/* BDFX spec site. Type and palette follow protocol-institute.org. */
:root {
  --bg: #FAFAF7;
  --fg: #1A1A1A;
  --muted: #6B6B66;
  --rule: #E4E3DC;
  --accent: #8A3B12;
  --banner: #FFF4E0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614;
    --fg: #E8E6DF;
    --muted: #9A988F;
    --rule: #2E2D29;
    --accent: #E0915E;
    --banner: #33281A;
  }
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
}
a { color: var(--accent); text-underline-offset: 2px; }
.top, main, footer { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
.top { padding-top: 1.25rem; }
.pi {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--fg); text-decoration: none; font-weight: 400; font-size: .85rem;
}
.eyebrow {
  margin: 3rem 0 0; font-size: .8rem; letter-spacing: .14em; color: var(--accent); font-weight: 500;
}
h1, h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin: .25rem 0 .75rem; }
h2 { font-size: 1.6rem; margin: 0 0 .75rem; }
.meta { color: var(--muted); font-size: .85rem; margin: 0 0 2rem; }
.meta strong { color: var(--fg); font-weight: 500; }
.banner { background: var(--banner); padding: .6rem .9rem; border-radius: 4px; font-size: .9rem; }

.spec { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.spec h1 { font-size: 1.6rem; margin: 0 0 1rem; }
ol.items { list-style: none; padding: 0; margin: 0; }
ol.items > li { position: relative; padding-left: 2.6rem; margin: 0 0 1rem; scroll-margin-top: 1rem; }
ol.items > li > .num {
  position: absolute; left: 0; top: .1rem; width: 2rem; text-align: right;
  font-size: .8rem; font-weight: 500; color: var(--muted); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
ol.items > li > .num:hover { color: var(--accent); }
ol.items > li:target { background: var(--banner); border-radius: 4px; }

.versions { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .9rem; }
.versions ul { padding-left: 1.1rem; }
.versions a[aria-current] { font-weight: 500; }
.tag { font-size: .7rem; border: 1px solid var(--rule); border-radius: 3px; padding: 0 .3rem; color: var(--muted); }
.muted { color: var(--muted); }
footer { color: var(--muted); font-size: .8rem; padding-top: 2rem; padding-bottom: 3rem; }