/* ══════════════════════════════════════════════════════════════════════════
   FSP Docs, docs.futureofsports.io

   Runs the FSP brand-guidelines type system lifted from the live site
   (skins/landing-m-brandskin.css + js/landing-d-chrome.js):

     display   Archivo, wght 100-200, wdth 100, +.04em, UPPERCASE, lh 1.06
     heads     Archivo 400, -.01em, lh 1.16, sentence case
     labels    Azeret Mono 400, +.14em, UPPERCASE, 10.5-11.5px
     body      Inter 300, lh 1.6-1.7
     numerals  Azeret Mono, tabular

   Two brand rules govern everything below:
     1. Lime lives on dark surfaces only. Blue is the accent on light.
     2. The system is drawn with rules, not pills. Radius stays at 0-2px.

   --fail is the one token not in the brand palette. Diagram failure markers
   have to read as failures at thumbnail size, and grey does not. It appears
   nowhere except those markers.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:    #14161A;
  --g2:     #3F4147;
  --muted:  #6B7078;
  --rule:   #C4C8D0;
  --hair:   #E4E7EC;
  --paper:  #F7F8FA;
  --blue:   #0000F5;
  --lime:   #C8F04A;
  --deep:   #0E1C33;
  --ground: #0A0E16;
  --fail:   #FF4D2E;

  --bar:    64px;
  --pad:    clamp(20px, 5vw, 48px);
  --measure: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--g2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */

.d-display {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 200, 'wdth' 100;
  font-weight: 200;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.04;
  color: var(--ink);
  font-size: clamp(32px, 5.6vw, 56px);
}

h2 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 200, 'wdth' 100;
  font-weight: 200;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ink);
  font-size: clamp(21px, 2.6vw, 28px);
}

h3 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  font-size: 18.5px;
}

h4 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: var(--ink);
  font-size: 16.5px;
}

.d-eb {
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.d-eb--muted { color: var(--muted); }
.d-eb--lime  { color: var(--lime); }

p { margin: 0 0 18px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--ink); }

a { color: var(--blue); text-decoration: underline;
    text-decoration-color: rgba(0,0,245,.3);
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--blue); }

code, .d-num {
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
code { font-size: .88em; color: var(--ink); background: var(--paper);
       border: 1px solid var(--hair); border-radius: 2px; padding: 1px 5px; }

/* ── Top bar ────────────────────────────────────────────────────────────── */

.d-bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--bar);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--pad);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.d-bar__mark { display: inline-flex; align-items: center; gap: 11px;
               text-decoration: none; color: var(--ink); }
.d-bar__mark:hover { color: var(--ink); }
.d-bar__word {
  font-family: 'Azeret Mono', monospace; font-weight: 400;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.d-bar__right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.d-bar__link {
  font-size: 14px; font-weight: 400; color: var(--g2);
  text-decoration: none; white-space: nowrap;
}
.d-bar__link:hover { color: var(--blue); }
.d-bar__cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border-radius: 2px; background: var(--blue); color: #fff;
  font-family: 'Azeret Mono', monospace; font-size: 11px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.d-bar__cta:hover { background: #0d0dff; color: #fff; }
@media (max-width: 700px) { .d-bar__link { display: none; } }

/* ── Shell: sidebar + article ───────────────────────────────────────────── */

.d-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--pad) 120px;
}

.d-side {
  position: sticky; top: var(--bar); align-self: start;
  max-height: calc(100vh - var(--bar)); overflow-y: auto;
  padding: 44px 0 60px;
}
.d-side__grp + .d-side__grp { margin-top: 30px; }
.d-side__h {
  display: block; margin: 0 0 12px;
  font-family: 'Azeret Mono', monospace; font-weight: 400;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.d-side__grp ul { margin: 0; padding: 0; list-style: none;
                  border-left: 1px solid var(--hair); }
.d-side__grp li a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 14px; line-height: 1.45; color: var(--g2);
  text-decoration: none;
}
.d-side__grp li a:hover { color: var(--blue); }
.d-side__grp li a[aria-current="true"],
.d-side__grp li a.on { color: var(--blue); border-left-color: var(--blue); }
.d-side__soon { color: var(--muted); opacity: .65; cursor: default; }

@media (max-width: 900px) {
  .d-shell { grid-template-columns: minmax(0, 1fr); }
  .d-side { position: static; max-height: none; padding: 28px 0 0;
            border-bottom: 1px solid var(--hair); padding-bottom: 28px; }
}

.d-art { padding: 44px 0 0; max-width: var(--measure); }

/* ── Article head ───────────────────────────────────────────────────────── */

.d-crumb {
  font-family: 'Azeret Mono', monospace; font-size: 10.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 26px;
}
.d-crumb a { color: var(--muted); text-decoration: none; }
.d-crumb a:hover { color: var(--blue); }
.d-crumb span { padding: 0 8px; opacity: .5; }

.d-head { padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
.d-head .d-eb { display: block; margin-bottom: 16px; }
.d-lede {
  margin-top: 26px; font-size: 19px; line-height: 1.6; color: var(--ink);
  font-weight: 300; max-width: 640px;
}
.d-meta {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: 'Azeret Mono', monospace; font-size: 10.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.d-sec { padding-top: 64px; scroll-margin-top: calc(var(--bar) + 24px); }
.d-sec > h2 + p, .d-sec > h2 + .d-sub { margin-top: 18px; }
.d-sub { margin-top: 16px; color: var(--muted); max-width: 620px; }

.d-block { margin-top: 34px; }
.d-block h3 { margin-bottom: 8px; }

/* Requirement rows: label left, rule between, prose right */
.d-req { margin-top: 30px; border-top: 1px solid var(--rule); }
.d-req__row {
  display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 28px;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.d-req__k {
  font-family: 'Azeret Mono', monospace; font-weight: 400;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); line-height: 1.7; padding-top: 2px;
}
.d-req__v p { margin-bottom: 10px; font-size: 16px; }
.d-req__v p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .d-req__row { grid-template-columns: minmax(0,1fr); gap: 8px; }
}

/* Numbered steps */
.d-steps { margin: 28px 0 0; padding: 0; list-style: none;
           border-top: 1px solid var(--rule); counter-reset: s; }
.d-steps li {
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--hair);
  counter-increment: s;
}
/* The counter, the title and the description are all direct grid children, so
   each needs its cell named. Without this the description falls into the 44px
   counter column on row 2 and sets one word per line. */
.d-steps li::before {
  content: counter(s, decimal-leading-zero);
  grid-column: 1; grid-row: 1;
  font-family: 'Azeret Mono', monospace; font-weight: 400; font-size: 12px;
  letter-spacing: .06em; color: var(--blue); padding-top: 3px;
}
.d-steps b { grid-column: 2; grid-row: 1; font-weight: 500; color: var(--ink); font-size: 16.5px; }
.d-steps span { grid-column: 2; grid-row: 2; margin-top: 3px; font-size: 15px; color: var(--muted); }

/* Plain bullets */
.d-list { margin: 14px 0 0; padding: 0; list-style: none; }
.d-list li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 16px; }
.d-list li::before { content: ''; position: absolute; left: 2px; top: 12px;
                     width: 6px; height: 1px; background: var(--blue); }

/* Callout */
.d-note {
  margin-top: 28px; padding: 20px 22px;
  background: var(--paper); border-left: 2px solid var(--blue); border-radius: 0 2px 2px 0;
}
.d-note .k {
  display: block; margin-bottom: 8px;
  font-family: 'Azeret Mono', monospace; font-weight: 400; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.d-note p { font-size: 15.5px; margin-bottom: 10px; }
.d-note--warn { border-left-color: var(--fail); }
.d-note--warn .k { color: var(--fail); }

/* ── Figures ────────────────────────────────────────────────────────────── */

.d-fig { margin: 34px 0 0; }
.d-fig__frame {
  background: var(--ground); border-radius: 2px; padding: 26px 20px;
  display: flex; justify-content: center;
}
.d-fig--plain .d-fig__frame { background: var(--paper); border: 1px solid var(--hair); }
.d-fig svg { display: block; width: 100%; height: auto; }
.d-fig__cap {
  margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.d-fig__cap b { color: var(--ink); font-weight: 500; }

/* Legend under the annotated frame */
.d-legend { margin: 22px 0 0; padding: 0; list-style: none;
            border-top: 1px solid var(--rule); }
.d-legend li {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px;
}
.d-legend .n {
  font-family: 'Azeret Mono', monospace; font-size: 11px; font-weight: 400;
  color: var(--blue); padding-top: 4px;
}

/* Camera-position cards */
.d-pos { margin-top: 30px; display: grid; gap: 1px; background: var(--hair);
         border: 1px solid var(--hair); border-radius: 2px;
         grid-template-columns: repeat(3, minmax(0,1fr)); }
.d-pos__c { background: #fff; padding: 22px 20px; }
.d-pos__tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 2px;
  font-family: 'Azeret Mono', monospace; font-size: 9.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
}
.d-pos__tag--go   { background: var(--deep);  color: var(--lime); }
.d-pos__tag--ok   { background: var(--paper); color: var(--g2); border: 1px solid var(--rule); }
.d-pos__tag--no   { background: rgba(255,77,46,.1); color: var(--fail); }
.d-pos__c h4 { margin: 14px 0 8px; }
.d-pos__c p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .d-pos { grid-template-columns: minmax(0,1fr); } }

/* Failure grid */
.d-fails { margin-top: 30px; display: grid; gap: 26px 22px;
           grid-template-columns: repeat(3, minmax(0,1fr)); }
.d-fails figure { margin: 0; }
.d-fails .thumb { background: var(--ground); border-radius: 2px; padding: 12px; }
.d-fails svg { display: block; width: 100%; height: auto; }
.d-fails figcaption { margin-top: 11px; }
.d-fails .v {
  display: block; margin-bottom: 5px;
  font-family: 'Azeret Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fail);
}
.d-fails .t { display: block; font-size: 14.5px; line-height: 1.5; color: var(--g2); }
@media (max-width: 860px) { .d-fails { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 500px) { .d-fails { grid-template-columns: minmax(0,1fr); } }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.d-faq { margin-top: 28px; border-top: 1px solid var(--rule); }
.d-faq details { border-bottom: 1px solid var(--hair); }
.d-faq summary {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
  font-family: 'Archivo', sans-serif; font-variation-settings: 'wght' 400, 'wdth' 100;
  font-weight: 400; font-size: 16.5px; line-height: 1.35; color: var(--ink);
  letter-spacing: -.005em;
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 26px;
  width: 11px; height: 1px; background: var(--ink);
  box-shadow: 0 0 0 0 transparent;
}
.d-faq summary::before {
  content: ''; position: absolute; right: 11px; top: 21px;
  width: 1px; height: 11px; background: var(--ink);
  transition: opacity .2s ease;
}
.d-faq details[open] summary::before { opacity: 0; }
.d-faq summary:hover { color: var(--blue); }
.d-faq summary:hover::after, .d-faq summary:hover::before { background: var(--blue); }
.d-faq .a { padding: 0 0 20px; max-width: 620px; }
.d-faq .a p { font-size: 15.5px; }

/* ── Sport index cards (home) ───────────────────────────────────────────── */

.d-home { max-width: 940px; margin: 0 auto; padding: 0 var(--pad) 24px; }
.d-hero { padding: 72px 0 40px; border-bottom: 1px solid var(--rule); }
.d-hero .d-eb { display: block; margin-bottom: 18px; }

.d-cards { margin-top: 40px; display: grid; gap: 1px; background: var(--hair);
           border: 1px solid var(--hair); border-radius: 2px; }
.d-card {
  background: #fff; padding: 26px 26px 24px; display: grid;
  grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center;
  text-decoration: none; color: inherit;
}
a.d-card:hover { background: var(--paper); color: inherit; }
.d-card__k {
  font-family: 'Azeret Mono', monospace; font-size: 10.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.d-card h3 { margin: 10px 0 6px; }
.d-card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.d-card__st {
  font-family: 'Azeret Mono', monospace; font-size: 9.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px; white-space: nowrap;
}
.d-card__st--live { background: var(--deep); color: var(--lime); }
.d-card__st--soon { background: var(--paper); color: var(--muted); border: 1px solid var(--rule); }
/* Dim the ink, not the card. Opacity on the card composites against the 1px
   grid rule showing through from .d-cards and reads as a stray grey panel. */
.d-card--soon h3 { color: var(--muted); }
.d-card--soon p, .d-card--soon .d-card__k { color: #9AA0AA; }

/* Dark band */
.d-band {
  margin-top: 64px; background: var(--ground); color: #fff;
  border-radius: 2px; padding: clamp(30px, 5vw, 46px);
}
.d-band h2 { color: #fff; }
.d-band .d-eb { display: block; margin-bottom: 16px; color: var(--lime); }
.d-band p { color: rgba(255,255,255,.68); }
.d-band .d-list li { color: rgba(255,255,255,.78); }
.d-band .d-list li::before { background: var(--lime); }
.d-band .d-list li b { color: #fff; font-weight: 500; }

/* ── Foot ───────────────────────────────────────────────────────────────── */

.d-foot { border-top: 1px solid var(--hair); margin-top: 90px; padding: 34px var(--pad) 60px; }
.d-foot__in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap;
              gap: 16px 28px; align-items: center; }
.d-foot span, .d-foot a {
  font-family: 'Azeret Mono', monospace; font-size: 10.5px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  text-decoration: none;
}
.d-foot a:hover { color: var(--blue); }
.d-foot .sp { margin-left: auto; }
@media (max-width: 640px) { .d-foot .sp { margin-left: 0; } }

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .d-bar, .d-side, .d-foot { display: none; }
  .d-shell { grid-template-columns: 1fr; padding: 0; }
  .d-faq details { open: true; }
  .d-fig__frame, .d-fails .thumb { background: #0A0E16 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}