/* ScreenQube BASE — reset, document, typography, layout primitives, reveal, a11y, print. Load order IS the cascade (tokens → base → components → sections), no @layer; every value reads a token. */

/* Metric-matched fallback: without it the font-display:swap moves the hero ~28px, roughly 0.03 of a 0.05 CLS budget in one event. Re-measure if the typeface changes. */
@font-face{
  font-family:"PJS Fallback";
  src:local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust:105.2%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}

/* Reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{ margin:0 }
/* :where() so the reset adds ZERO specificity — as a bare `ul[class]` it was (0,1,1) and silently out-ranked every class rule that set list padding. */
:where(ul[class],ol[class]){ list-style:none; margin:0; padding:0 }
img,svg,video,picture{ display:block; max-width:100% }
/* [hidden] is zero-specificity in the UA sheet, so .form{display:grid} beat it and a hidden form stayed on screen beside its own success panel, inviting a second submission. */
[hidden]{ display:none !important }
img,video{ height:auto }

/* Ambient clips are animation, not media: JS strips `controls`, but a browser can still paint its own chrome on tap or long-press. */
video[data-autoloop]{ pointer-events:none }
video[data-autoloop]::-webkit-media-controls{ display:none !important }
video[data-autoloop]::-webkit-media-controls-enclosure{ display:none !important }
input,button,textarea,select{ font:inherit; color:inherit }
button{ background:none; border:0; padding:0; cursor:pointer }
table{ border-collapse:collapse; width:100% }

/* The sticky nav is ~66px, so anything scrolled to by anchor OR by keyboard focus must clear it (WCAG 2.2 SC 2.4.11). */
:target,
:where(a,button,summary,input,textarea,select,[tabindex]){ scroll-margin-top:88px }

/* Focused programmatically by the skip link; it should not draw a ring. */
main:focus{ outline:none }

/* Document */
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--f);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-underline-offset:.18em;
}

a{ color:var(--red) }
a:hover{ color:var(--red-deep) }

::selection{ background:var(--red-wash); color:var(--ink) }

/* Warm scrollbar — the direction asks for red even here */
@supports (scrollbar-color: red white){
  html{ scrollbar-color:var(--red-soft) var(--mist); scrollbar-width:thin }
}

/* Typography */
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.03em; line-height:1.1; text-wrap:balance }

.d1{ font-size:var(--t-d1); font-weight:800; letter-spacing:-.045em; line-height:1.02 }
.d2{ font-size:var(--t-d2); font-weight:800; letter-spacing:-.04em;  line-height:1.06 }
.h1{ font-size:var(--t-h1); font-weight:700; letter-spacing:-.03em }
.h2{ font-size:var(--t-h2); font-weight:700; letter-spacing:-.025em }
.h3{ font-size:var(--t-h3); font-weight:600; letter-spacing:-.02em }

.body{ font-size:var(--t-body); color:var(--ink-2); line-height:1.6; max-width:var(--measure) }
.sm  { font-size:var(--t-sm);   color:var(--ink-2); line-height:1.6;  max-width:var(--measure) }
.xs  { font-size:var(--t-xs);   color:var(--ink-2); line-height:1.55; max-width:var(--measure) }

/* The page's voice: one or two words per headline, serif italic, in red. */
.accent{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--red);
}

/* Section eyebrow. A paragraph, never a heading — it must not enter the document outline. */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-lab); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--red);
  background:var(--red-wash);
  border-radius:var(--r-pill);
  padding:5px 12px;
  margin-bottom:var(--s3);
}

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums }

/* Every figure on this site is tabular, always. */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

/* Footnote markers: padded out to a 24×24 target (WCAG 2.2 SC 2.5.8) and pulled back with negative margin so it still reads as a superscript. */
.fn-ref{
  display:inline-block; vertical-align:super;
  min-width:24px; min-height:24px; line-height:24px;
  margin-inline:-7px; text-align:center;
  font-size:.7em; font-weight:700; text-decoration:none;
}
.fn{
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--ink-2); line-height:1.7;
}
.fn li{ margin-bottom:var(--s1) }
.fn b{ color:var(--ink-2); font-weight:600 }

/* Layout primitives */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:78ch }

/* A section band. Grounds rotate page → sand → page → blush → page; never two the same in a row. */
.plate{ padding-block:clamp(var(--s8),6.5vw,var(--s10)); position:relative }
.plate--sand { background:var(--sand) }
.plate--blush{ background:linear-gradient(180deg,var(--blush) 0%,var(--page) 100%) }
.plate--peach{ background:var(--peach) }
.plate--tight{ padding-block:clamp(var(--s7),4vw,var(--s8)) }
.plate--flush-top{ padding-top:0 }
/* For content that escapes the wrap to the viewport edge. 100vw counts the scrollbar, so without the clip it adds horizontal page scroll wherever one shows. */
.plate--bleed{ overflow:hidden }

/* Section masthead */
.hd{ max-width:62ch; margin-bottom:var(--s7) }
.hd .body{ margin-top:var(--s4) }
.hd--center{ margin-inline:auto; text-align:center }
.hd--center .body{ margin-inline:auto }

.flow > * + *{ margin-top:var(--s4) }
.row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center }
.row--center{ justify-content:center }

/* Reveal */
/* Guarded by .js, and the guard EXPIRES via each page's deadman switch — "JS present but failing" is the common production case. `translate`, not `transform`: an independent property composes with .tile:hover instead of killing it. */
/* --rv-dur, not --dur-slow: a 700ms travel kept five composited layers live at once through the same scroll as the console re-transform, and shortening it cut dropped frames by about a third. */
.js .rv{
  --rv-dur:420ms;
  opacity:0;
  translate:0 22px;
  transition:opacity var(--rv-dur) var(--e), translate var(--rv-dur) var(--e);
}
.js .rv.is-in{ opacity:1; translate:none }
.js .rv[data-d="1"]{ transition-delay:calc(var(--stagger) * .5) }
.js .rv[data-d="2"]{ transition-delay:calc(var(--stagger) * 1) }
.js .rv[data-d="3"]{ transition-delay:calc(var(--stagger) * 1.5) }
.js .rv[data-d="4"]{ transition-delay:calc(var(--stagger) * 2) }
.js .rv[data-d="5"]{ transition-delay:calc(var(--stagger) * 2.5) }

/* Accessibility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:var(--s4); top:calc(-1 * var(--s10));
  z-index:var(--z-modal);
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:var(--sh-3);
  padding:var(--s3) var(--s5);
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
  transition:top var(--dur) var(--e);
}
.skip:focus{ top:var(--s4) }

/* Reduced motion */
/* tokens.css collapses durations globally; these make the collapse land on a legible end state rather than a hidden one. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .js .rv{ opacity:1; translate:none; transition:none }
}

/* Print */
@media print{
  .js .rv{ opacity:1; translate:none }
  .skip,.progress,.site-nav,.marquee,.reel,.hotspot__dot,
  .cta-pair,.notice,.sticky__media{ display:none !important }
  .plate{ padding-block:var(--s5); break-inside:avoid }
  body{ background:var(--white); font-size:11pt }

  /* The dark closing panel is a full page of ink otherwise. */
  .cta-panel{ background:var(--white); color:var(--ink); border:1px solid var(--line-2) }
  .cta-panel::before{ display:none }
  .cta-panel h2,.cta-panel .body{ color:var(--ink) }
  .tile--dark{ background:var(--white); color:var(--ink); border:1px solid var(--line-2) }
  .tile--dark h2,.tile--dark h3,.tile--dark .sm,.tile--dark .spec-list li{ color:var(--ink) }

  /* Gradient text prints as nothing — put the ink back. */
  .figure,.stat,.lost__code{ background:none; color:var(--ink); -webkit-text-fill-color:var(--ink) }
  .lost__note{ color:var(--ink-2) }

  /* Tables carry the detail someone actually prints this page for. */
  .table-wrap{ overflow:visible; border:0 }
  .table{ min-width:0; width:100%; font-size:10pt; break-inside:auto }
  .table thead{ display:table-header-group }        /* repeat on every page */
  .table tr{ break-inside:avoid }
  .faq details{ break-inside:avoid }
  .faq details > .faq__a{ display:block !important } /* print answers even when closed */

  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:var(--ink-3) }
}