/* ==========================================================================
   AdVelocity  /  base.css
   Tokens, reset, typography, layout primitives, motion contract.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Brand surfaces. The canvas is never pure black. */
  --ink:#050505;
  --canvas:#0A0A0C;
  --panel:#101013;
  --panel-2:#16161A;
  --panel-3:#1D1D22;
  --line:#26262C;
  --line-strong:#3A3A44;

  /* The accent, spent in rare doses. */
  --red:#E31B23;
  --red-hot:#FF2B34;
  --red-deep:#A5141A;
  --red-dim:rgba(227,27,35,.16);
  --red-glow:rgba(227,27,35,.42);

  /* The one light surface. */
  --paper:#F4F2EE;
  --paper-2:#E7E4DC;

  /* Type colours, measured against --canvas. */
  --text:#F2F1ED;         /* 18.1:1 */
  --text-2:#A2A2AC;       /*  7.4:1 */
  --text-3:#8A8A94;       /*  5.8:1  labels and secondary notes */
  --on-paper:#111114;
  --on-paper-2:#4A4A52;

  /* Type families. */
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  /* Labels and buttons used to be set in a monospace face. They now share the
     body family, so the site runs on two typefaces instead of three. The token
     keeps its name so nothing that references it needs touching. */
  --mono:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Type scale. Headings stay in proportion with the reading text instead of
     dwarfing it, and paragraphs are sized for reading rather than decoration. */
  --t-mega:clamp(2.3rem,1.55rem + 3vw,3.5rem);     /* hero h1, 37 to 56px */
  --t-xxl:clamp(2.05rem,1.55rem + 2.1vw,3rem);     /* page h1, 33 to 48px */
  --t-xl:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);    /* section h2, 28 to 36px */
  --t-lg:clamp(1.4rem,1.2rem + .9vw,1.75rem);      /* sub-section, 22 to 28px */
  --t-md:clamp(1.2rem,1.08rem + .5vw,1.45rem);     /* card titles, 19 to 23px */
  --t-body:clamp(1.03rem,.98rem + .26vw,1.125rem); /* 16.5 to 18px */
  --t-sm:1.0625rem;                                /* 17px */
  --t-xs:.9375rem;                                 /* 15px */
  --t-label:.8125rem;                              /* 13px */

  /* Rhythm. */
  --gutter:clamp(1.15rem,4vw,3.5rem);
  --sec-y:clamp(4.5rem,10vw,9.5rem);
  --maxw:1560px;
  --rail:clamp(0px,4.4vw,86px);

  /* Motion contract. Two curves, used everywhere. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.62s;
  --dur-fast:.28s;

  --radius:2px;
  --nav-h:76px;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  overflow-x:hidden;          /* fallback declared first */
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--line-strong) var(--canvas);
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse}
:where(h1,h2,h3,h4,h5,h6){font-weight:inherit;font-size:inherit}

/* ----------------------------------------------------------- 3. TYPOGRAPHY */
.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.t-mega{font-size:var(--t-mega);font-weight:700;line-height:1.06;letter-spacing:-.026em}
.t-xxl{font-size:var(--t-xxl);font-weight:700;line-height:1.08;letter-spacing:-.022em}
.t-xl{font-size:var(--t-xl);font-weight:700;line-height:1.14;letter-spacing:-.018em}
.t-lg{font-size:var(--t-lg);font-weight:700;line-height:1.2;letter-spacing:-.012em}
.t-md{font-size:var(--t-md);font-weight:600;line-height:1.28;letter-spacing:-.006em}
.lean{font-style:italic}

/* The mono rail label. */
.kicker{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-2);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  line-height:1;
}
.kicker::before{
  content:"";
  width:1.9em;
  height:1px;
  background:var(--red);
  flex:none;
}
.kicker.no-rule::before{display:none}
.kicker--red{color:var(--red)}

.idx{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* Text blocks are capped in ch on the text element itself, never a container. */
.lede{
  font-size:clamp(1.09rem,1rem + .4vw,1.25rem);
  line-height:1.6;
  color:var(--text-2);
  max-width:60ch;
}
.prose p{max-width:68ch;color:var(--text-2)}
.prose h3{font-size:var(--t-md);margin-block:1.8rem .55rem;color:var(--text)}
.prose h3:first-child{margin-top:0}
.prose p + p{margin-top:1.05em}
.prose strong{color:var(--text);font-weight:600}

.hl{color:var(--red)}
.dim{color:var(--text-2)}

/* -------------------------------------------------------------- 4. LAYOUT */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{max-width:1120px}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,6rem)}

/* The persistent left rail. Collapses to nothing under 1100px. */
.railed{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0}
.railed > .rail-col{position:relative}
.rail-mark{
  position:sticky;
  top:calc(var(--nav-h) + 2.4rem);
  writing-mode:vertical-rl;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--text-3);
  white-space:nowrap;
}
@media (max-width:1099px){
  .railed{grid-template-columns:minmax(0,1fr)}
  .railed > .rail-col{display:none}
}

.cols{display:grid;gap:clamp(1.6rem,3.4vw,3.4rem)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}}

/* Rows of text align on the baseline, not centred boxes. */
.baseline{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}

.rule{height:1px;background:var(--line);border:0;width:100%}
.rule--red{background:linear-gradient(90deg,var(--red),transparent 62%)}

/* ---------------------------------------------------- 5. ACCESS AND FOCUS */
.skip{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:2000;
  background:var(--red);
  color:#fff;
  padding:.85rem 1.3rem;
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease);
}
.skip:focus{top:14px}

:focus-visible{
  outline:2px solid var(--red-hot);
  outline-offset:3px;
  border-radius:1px;
}
:focus:not(:focus-visible){outline:none}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

main:focus{outline:none}

/* Touch targets, added without breaking label alignment. */
@media (pointer:coarse){
  .btn,.chip-btn,.tab{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .btn--block{width:100%}
}

/* ------------------------------------------------- 6. THE MOTION CONTRACT
   Every hidden start state is gated behind .js on the root element, which a
   one line script in the head switches on. So if JavaScript is blocked, or
   fails, or an observer never fires, the page renders complete rather than
   blank. The animation is the enhancement; the content is never the cost. */
.js .reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.reveal.in{opacity:1;transform:none}

.js .reveal-stagger > *{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:70ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:140ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:210ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:280ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:350ms}
.reveal-stagger.in > *:nth-child(7){transition-delay:420ms}
.reveal-stagger.in > *:nth-child(8){transition-delay:490ms}

/* Retire the stagger once the entrance finishes, or every later hover lags
   forever. The selector repeats nth-child so it beats the delay rules. */
.reveal-stagger.done > *:nth-child(n){transition-delay:0ms !important}

/* A masked line reveal with room for descenders. */
.mask{overflow:hidden;display:block;padding-block:.14em;margin-block:-.14em}
.js .mask > span{
  display:block;
  transform:translate3d(0,102%,0);
  transition:transform .82s var(--ease-out);
}
.mask.in > span,.in .mask > span{transform:none}

/* ------------------------------------------------- 7. REDUCED MOTION, FULL */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }

  /* Every choreographed element sits in its finished state. */
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
  .mask > span{transform:none !important}
  .parallax{transform:none !important}
  .marquee__track{animation:none !important;transform:none !important}

  /* Positional transforms are re-applied, never blanket-killed, so nothing
     gets thrown off screen. */
  .centre-x{transform:translateX(-50%) !important}
  .centre-y{transform:translateY(-50%) !important}
  .centre-xy{transform:translate(-50%,-50%) !important}
}

/* Off-screen and hidden-tab pausing. animation-play-state does not inherit,
   so this hits every element and pseudo-element directly. */
body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused !important;
}

/* ------------------------------------------------------ 8. PRINT COURTESY */
@media print{
  .site-nav,.site-foot,.assistant,.sticky-cta,.to-top,.env,.cursor,.scroll-prog{display:none !important}
  body{background:#fff;color:#000}
}