/* ==========================================================================
   DASHRADAR.TV — shared kit (Lane B)
   Tokens, fonts, header/nav, buttons, reveal, section headers, footer,
   overlays, z-ladder. Pages link this file and keep only page-specific CSS.
   Mobile-first: base styles are the phone; min-width queries add desktop.
   Dark theme only. No build step.
   ========================================================================== */

/* ---------- 1. Self-hosted faces (files owned by Lane C) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-expanded-black-italic.woff2') format('woff2');
  font-style:italic;font-weight:900;font-stretch:125%;font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/chakra-petch-500.woff2') format('woff2');
  font-style:normal;font-weight:500;font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/chakra-petch-600.woff2') format('woff2');
  font-style:normal;font-weight:600;font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/chakra-petch-700.woff2') format('woff2');
  font-style:normal;font-weight:700;font-display:swap;
}
@font-face{
  font-family:'Share Tech Mono';
  src:url('fonts/share-tech-mono.woff2') format('woff2');
  font-style:normal;font-weight:400;font-display:swap;
}

/* ---------- 2. Tokens (FROZEN CONTRACT — brief §2) ---------- */
:root{
  /* surfaces */
  --bg:#0b0406; --bg2:#100608; --panel:#150a0d; --panel2:#1c0d11;
  --line:#3a141b; --line2:#521b24;
  /* reds — the two-red rule: solid fills vs glow/hover */
  --brand-red:#c81827;   /* solid fills: buttons at rest, .TV, logo marks */
  --red:#f01f2f;         /* glow / hover / active */
  --red-hot:#ff2b3d;     /* the glow rgba() colour: rgba(255,43,61,α) */
  --red-deep:#8c1220; --red-dim:#6e0e1a;
  /* text — --faint lightened from #8a565c (3.45:1, failed AA) to #c08a90 (7.04:1 on --bg) */
  --ink:#ffe9ea; --dim:#cf9aa0; --faint:#c08a90;
  /* spacing + radius scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;
  --r1:2px; --r2:4px;
  /* one content column, replacing four copies of width:77% */
  --col: min(92vw, 2000px);
  /* font roles */
  --disp:'Chakra Petch',sans-serif; --mono:'Share Tech Mono',monospace;
  --wm:'Archivo','Arial Black',sans-serif;
  /* motion-speed multiplier (consumed by page CSS/JS as calc(Xs*var(--spd))) */
  --spd:1.5;
  /* named type scale */
  --t-hero:clamp(2.4rem,4.35vw,6rem);   /* hero h1 (index; 1000px+ bump below) */
  --t-sec:clamp(1.7rem,3vw,2.6rem);     /* section h2 */
  --t-card:.95rem;                      /* card titles */
  --t-body:1rem;                        /* body / footer nav */
  --t-small:.85rem;                     /* nav links, buttons, sec-head sub/count */
  --t-label:.75rem;                     /* eyebrows, crumbs, HUD labels */
  --t-micro:.72rem;                     /* view counts, fine print, c-line */
  /* z-index ladder */
  --z-field:0;        /* pointer flow-field canvas (Lane D) */
  --z-content:1;      /* page content above the field */
  --z-header:900;     /* sticky header */
  --z-header-hi:950;  /* header-adjacent fixed chrome (e.g. deals compare pill) */
  --z-scan:9990;      /* fixed CRT scanline overlay */
  --z-vignette:9991;  /* fixed vignette overlay */
  --z-modal:9995;     /* sheets/modals that must clear the overlays */
  --z-skip:9999;      /* skip link */
  --z-pop:10000;      /* ticker hover preview card */
  --z-popmax:10001;   /* ticker hovered link above its preview */
}
@media (min-width:1000px){
  :root{
    --col: min(77%, 2000px);
    --t-hero:clamp(2.4rem,4.62vw,7.5rem); /* live behaviour: hero h1 steps up at 1000px+ */
  }
}

/* ---------- 3. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* horizontal-overflow backstop — page lanes must still fix the actual offenders */
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);font-size:var(--t-body);
  text-transform:uppercase;letter-spacing:.04em}
/* fixed CRT scanlines + vignette — over all text, below the ticker preview */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-scan);
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 4px);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-vignette);
  background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(5,1,2,.55) 100%);}
/* selection: --ink on --red-deep = 8.1:1 (the old #0b0406-on---red was 4.8:1, marginal) */
::selection{background:var(--red-deep);color:var(--ink)}
a{color:inherit}
img,svg,video{display:block}
button{font-family:inherit;text-transform:uppercase;cursor:pointer}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#000;padding:.6rem 1rem;
  z-index:var(--z-skip);font-family:var(--mono)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- 4. Wordmark + radar badge ---------- */
/* wordmark: Archivo Expanded Black Italic 900 (fallback Arial Black italic) — TEXT, never an image */
.wordmark{font-family:var(--wm);font-stretch:125%;font-weight:900;font-style:italic;
  font-size:1.15rem;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
/* .TV everywhere: same face as the DASHRADAR wordmark, in solid brand red */
.wordmark .tv{font-family:var(--wm);font-stretch:125%;font-weight:900;font-style:italic;color:var(--brand-red)}
/* only the top-left nav .TV flashes — everywhere else it is static */
.wordmark .tv.live{animation:blink 1.4s steps(1) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
/* small fuzzy brand glow on the top-left nav wordmark (hero h1 carries its own, page-scoped) */
header .wordmark{text-shadow:0 0 12px rgba(200,24,39,.4),0 0 34px rgba(200,24,39,.18)} /* rgba = --brand-red channels */

/* real DR radar badge (cropped to the disc) */
.badge{width:38px;height:38px;border-radius:50%;overflow:hidden;position:relative;flex:none;background:var(--bg)}
.badge video,.badge img{position:absolute;left:50%;top:50%;width:113.2%;height:113.2%;transform:translate(-50%,-50%);object-fit:cover}

/* ---------- 5. Header / nav (mobile-first: collapsed is the base) ---------- */
header{position:sticky;top:0;z-index:var(--z-header);background:rgba(11,4,6,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{width:var(--col);margin:0 auto;display:flex;align-items:center;gap:var(--s5);padding:.7rem var(--s4)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
/* mobile: menu button visible, nav is a dropdown panel under the header */
.menu-btn{display:block;background:none;border:1px solid var(--line2);color:var(--ink);
  font-family:var(--disp);font-size:var(--t-small);letter-spacing:.12em;padding:.5rem .8rem;margin-left:auto}
.nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(16,6,8,.92);
  /* heavy scrim (--bg2 channels at 92%, matching the header's .92 treatment) — dropdown
     chrome needs near-opacity over page content, but no solid fills anywhere */
  border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;
  padding:var(--s4) var(--s5);gap:var(--s4)}
.nav nav.open{display:flex}
/* live readability pass: nav links are Chakra Petch (--disp), CAPITAL — not mono */
.nav nav a.lnk{text-decoration:none;font-family:var(--disp);font-size:var(--t-small);
  color:var(--dim);letter-spacing:.12em;position:relative;padding:.3rem 0}
/* WCAG 1.4.1: a permanent hairline marks link-ness at rest; it goes red on hover/active */
.nav nav a.lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line2);transition:background .2s}
.nav nav a.lnk:hover{color:var(--ink)}
.nav nav a.lnk:hover::after{background:var(--red)}
.nav nav a.lnk.active{color:var(--red)}
.nav nav a.lnk.active::after{background:var(--red)}
/* 760px: nav collapse breakpoint (frozen) — inline row above it */
@media (min-width:760px){
  .menu-btn{display:none}
  .nav nav{display:flex;position:static;background:none;border-bottom:none;flex-direction:row;
    align-items:center;padding:0;gap:1.8rem;margin-left:auto}
}

/* ---------- 6. Buttons ---------- */
/* two-red rule: deep brand-red fill at rest, glow red + hot glow on hover — never dim-on-hover */
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--brand-red);color:#fff;
  border:1px solid var(--brand-red);padding:.65rem 1.2rem;font-family:var(--disp);
  font-size:var(--t-small);letter-spacing:.1em;text-decoration:none;font-weight:700;
  transition:background .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 0 10px rgba(200,24,39,.4),0 0 3px rgba(200,24,39,.55)} /* rgba = --brand-red channels */
.btn:hover{background:var(--red);border-color:var(--red);
  box-shadow:0 0 18px rgba(255,43,61,.55),0 0 5px rgba(255,43,61,.8)} /* rgba = --red-hot channels */
.btn.ghost{background:transparent;color:var(--red);border:1px solid var(--red-deep)}
.btn.ghost:hover{background:var(--red-dim);color:var(--ink)}

/* ---------- 7. Scroll reveal (transform/opacity only) ----------
   Hiding is opt-in via html.js, which site.js sets as its FIRST statement.
   With JS disabled, .rv never hides — pure-CSS no-JS fallback, no <noscript> required. */
.rv{transition:opacity .6s ease,translate .6s ease}
html:not(.js) .rv{opacity:1;translate:0 0}
html.js .rv{opacity:0;translate:0 18px}
html.js .rv.in{opacity:1;translate:0 0}

/* ---------- 8. Section headers + scanline sweep ---------- */
.sec-head{position:relative;display:flex;align-items:baseline;gap:var(--s5);margin-bottom:var(--s6);
  border-bottom:1px solid var(--line);padding-bottom:var(--s4);flex-wrap:wrap;overflow:hidden}
.sec-head h2{font-size:var(--t-sec);font-weight:700;letter-spacing:.05em}
.sec-head .sub{font-family:var(--disp);color:var(--faint);font-size:var(--t-small);letter-spacing:.12em}
.sec-head .count{margin-left:auto;font-family:var(--mono);color:var(--red);font-size:var(--t-small)}
/* phosphor scanline sweeps the header rule as it crosses the viewport midline —
   re-fires in BOTH scroll directions (deliberate house rule, BRAND-GUIDE §5).
   .in-view is toggled by site.js on the .sec-head itself OR on an ancestor. */
.sec-head .scan{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);
  box-shadow:0 0 14px rgba(255,43,61,.85),0 0 4px rgba(255,43,61,.9); /* rgba = --red-hot channels */
  transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.in-view .scan{animation:scanx 1.1s cubic-bezier(.22,1,.36,1) .15s both}
@keyframes scanx{0%{transform:scaleX(0);opacity:0}12%{opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.35}}

/* ---------- 9. Shared label ---------- */
.eyebrow{font-family:var(--disp);color:var(--faint);font-size:var(--t-label);letter-spacing:.2em}
.eyebrow b{color:var(--red);font-weight:400}

/* ---------- 10. Pointer flow-field mount (Lane D) ----------
   One DOCUMENT-HEIGHT layer per page (owner request 2026-08-20: the field scrolls
   with the site, not fixed to the viewport). field.js sets the height inline from
   the offset parent's scrollHeight and keeps a viewport-sized canvas aligned to
   the scroll offset. Rest colour is a muted brand red (--red-dim) — the canvas
   reads it via getComputedStyle and warms toward --red/--red-hot with sweep and
   cursor. Sits below the scanline/vignette overlays, above the page background,
   never intercepts clicks. */
[data-field]{position:absolute;top:0;left:0;width:100%;min-height:100vh;z-index:var(--z-field);pointer-events:none;color:var(--red-dim)}

/* ---------- 11. Footer (mobile-first: stacked is the base) ---------- */
/* translucent scrim (--bg2 channels at 55%) so the field shows through the band */
footer{border-top:1px solid var(--line);background:rgba(16,6,8,.55);margin-top:var(--s6)}
.foot{width:var(--col);margin:0 auto;padding:var(--s7) var(--s4);display:flex;flex-direction:column;
  align-items:flex-start;gap:2.2rem}
/* wrap + min-width:0 let the brand block shrink instead of clipping on phones */
.foot-brand{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}
.foot .badge{width:104px;height:104px}
.foot-info{min-width:0}
.foot-info .logo{text-decoration:none}
/* fluid wordmark: the flat 2rem rendered .foot-brand ~375px wide and clipped at 360px */
.foot-info .wordmark{font-size:clamp(1.4rem,7.5vw,2rem)}
.c-line{font-family:var(--disp);color:var(--ink);font-size:var(--t-micro);letter-spacing:.1em;margin:.4rem 0 0}
.c-line a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.c-line a:hover{color:var(--ink)}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:center}
/* WCAG 1.4.1: underline present at rest (subtle), brightens on hover */
.foot-nav a{font-family:var(--disp);text-transform:uppercase;font-size:var(--t-body);letter-spacing:.14em;
  color:var(--dim);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;
  transition:color .15s,text-decoration-color .15s}
.foot-nav a:hover{color:var(--ink);text-decoration-color:var(--red)}
.social{display:flex;gap:.8rem;margin-top:1.1rem}
.social a{width:36px;height:36px;border:1px solid rgba(200,24,39,.5);display:grid;place-items:center;
  color:var(--brand-red);transition:color .15s,border-color .15s} /* rgba = --brand-red channels */
.social a:hover{color:var(--red);border-color:var(--red)}
/* fine print aligns with the content column on any viewport — no 11.5% gutters, no overflow.
   Live readability pass: fine print is Chakra Petch (--disp), mixed case — not mono */
.fine{border-top:1px solid var(--line);text-align:left;font-family:var(--disp);font-size:var(--t-micro);
  color:var(--faint);letter-spacing:.2em;line-height:2.2;text-transform:none;
  padding:1.1rem max(var(--s4),calc((100% - var(--col))/2 + var(--s4)))}
@media (min-width:480px){
  .foot-nav{flex-wrap:nowrap;gap:2.6rem}
}
@media (min-width:1000px){
  .foot{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s7)}
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;translate:0 0}
  .sec-head .scan{display:none}
}