/* ═══════════════════════════════════════════════════════════════
   andar.ph · base.css — tokens, reset, type scale, layout primitives,
   nav, footer. See docs/website/BUILD-SPEC.md — it wins on conflict;
   docs/brand/VISUAL.md for why the drafting sheet is gone.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════ FONTS (self-hosted) ═══════════════════════ */
/* Standard Google Fonts "latin" subset range. */
@font-face{
  font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════ TOKENS ═══════════════════════ */
:root{
  --paper:#FAF9F5;
  --bone:#F1EFE8;
  --ink:#16181A;
  --mid:#4A4F54;
  --red:#D8401F;
  --red-ink:#A82F13;
  --hair:rgba(22,24,26,.08);
  --faint:rgba(22,24,26,.14);
  --grid:rgba(22,24,26,.045);

  --card-bg:#FFFFFF;
  /* the one orange: the pen line under "paper." and the gate phone's Yes. Buttons are ink. */
  --cta:#D23E1D;

  --din:'Barlow Semi Condensed','Helvetica Neue',Arial,sans-serif;
  --read:'Barlow','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --stampEase:cubic-bezier(.22,.86,.26,1);

  --page-inset:clamp(20px,5vw,72px);
  --maxw:87.5rem;
  --gutter:clamp(1rem,1.6vw,1.5rem);
  --section-pad:clamp(96px,14vh,180px);

  /* every section is a card on the page: this far in from the edge and from
     its neighbours, this round. The light cards are white sheets. */
  --frame:clamp(10px,1.6vw,24px);
  --panel-r:clamp(16px,1.8vw,28px);
  --sheet:#FFFFFF;
  /* the strong mark on a sheet (a selected tab, the dash that counts, a
     card's numeral) and the text set on it */
  --strong:#10293A;
  --on-strong:#FAF9F5;
  --arrow:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 9 9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  /* type */
  --t-label:.875rem;
  --t-micro:.8125rem;
  --t-small:1.0625rem;
  --t-body:1.125rem;
  --t-lead:clamp(1.2rem,1.5vw,1.45rem);
  --t-h3:clamp(1.5rem,2.4vw,2.125rem);
  --t-h2:clamp(2.25rem,4.6vw,4rem);
  --t-h1:clamp(3.4rem,9vw,8.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10293A;
    --bone:#0B1E2B;
    --ink:#DCE8EE;
    --mid:#A9BCC8;
    --red:#F2673C;
    --red-ink:#F2673C;
    --hair:rgba(220,232,238,.12);
    --faint:rgba(220,232,238,.22);
    --grid:rgba(220,232,238,.055);
    --card-bg:#0E2333;
    --sheet:#10293A;
    --strong:#DCE8EE;
    --on-strong:#10293A;
  }
}
:root[data-theme="dark"]{
  --paper:#10293A;
  --bone:#0B1E2B;
  --ink:#DCE8EE;
  --mid:#A9BCC8;
  --red:#F2673C;
  --red-ink:#F2673C;
  --hair:rgba(220,232,238,.12);
  --faint:rgba(220,232,238,.22);
  --grid:rgba(220,232,238,.055);
  --card-bg:#0E2333;
  --sheet:#10293A;
  --strong:#DCE8EE;
  --on-strong:#10293A;
}

/* screens keep the light set regardless of theme — paper objects on the sheet */
.screen{
  --paper:#FAF9F5;--bone:#F1EFE8;--ink:#16181A;--mid:#5F6469;
  --hair:rgba(22,24,26,.08);--faint:rgba(22,24,26,.14);--red:#D8401F;--red-ink:#A82F13;
  color:var(--ink);
  container-type: inline-size;
  --k: calc(1cqi / 440);
}

/* ═══════════════════════ RESET ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--read);font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}

/* author display rules (e.g. .btn-ghost's inline-flex) must not undo [hidden] */
[hidden]{display:none !important}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* entrance settle — parked only when JS is present; otherwise fully visible */
.js .en{opacity:0;transform:translateY(16px)}
.js .en.is-in{
  opacity:1;transform:none;
  transition:opacity .48s var(--ease),transform .48s var(--ease);
}
.js .en:nth-child(1){transition-delay:0s}
.js .en:nth-child(2){transition-delay:.07s}
.js .en:nth-child(3){transition-delay:.14s}
.js .en:nth-child(4){transition-delay:.21s}
.js .en:nth-child(5){transition-delay:.28s}
.js .en:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion: reduce){
  .js .en{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════ LAYOUT PRIMITIVES ═══════════════════════ */
.wrap{
  position:relative;z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--page-inset);
}
.datum-rule{height:1px;background:var(--hair);border:0;margin:0}

/* ═══════════════════════ PRIMITIVES ═══════════════════════ */
.lab{
  font-family:var(--din);font-weight:500;font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin:0;
}
/* the section label a reader actually reads: sentence case, readable size */
.eyebrow{
  font-family:var(--read);font-weight:600;font-size:.9375rem;letter-spacing:.01em;
  color:var(--red-ink);margin:0 0 14px;
}
.lab.r{color:var(--red-ink)}
.tn{font-variant-numeric:tabular-nums}

.illus{
  display:inline-block;border:1px dashed var(--mid);color:var(--mid);
  font-family:var(--din);font-weight:500;font-size:.688rem;
  letter-spacing:.2em;text-transform:uppercase;padding:3px 8px;
}

.stamp{
  display:inline-block;font-family:var(--din);font-weight:700;
  font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);border:2.5px solid var(--red);border-radius:3px;
  padding:5px 12px;transform:rotate(-6deg);opacity:.92;
}

/* the datum line — a hairline with a red scaleX fill; the site's one
   progress mechanism, reused by the rail HUD and the #how stage bar */
.datum{position:relative;height:1px;background:var(--hair)}
.datum i{
  display:block;height:100%;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left center;
}
@media (prefers-reduced-motion: no-preference){
  .datum i{transition:transform .1s linear}
}

/* the primary: a small pill in the page's own ink (near-white on navy and
   over the film, near-black on paper) with a ↗. Small, and not orange: the
   orange stays with the thing waiting on you. 44px tall, still an easy tap. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;
  font-family:var(--read);font-weight:600;font-size:.9375rem;line-height:1.2;letter-spacing:.01em;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:10px 18px 10px 20px;cursor:pointer;border-radius:999px;text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .15s;
}
.btn::after{
  content:'';flex:none;width:.7em;height:.7em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.btn-lg{font-size:1rem;padding:11px 20px 11px 22px}
.btn:hover{background:color-mix(in srgb,var(--ink) 84%,var(--paper));border-color:transparent}
.btn:hover::after{transform:translate(2px,-2px)}
.btn:active{transform:translateY(1px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-family:var(--din);font-weight:500;font-size:1rem;letter-spacing:.01em;
  color:var(--mid);background:var(--paper);border:1px solid var(--faint);
  padding:11px 22px;cursor:pointer;border-radius:999px;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn-ghost:disabled{opacity:.35;cursor:default}

/* ═══════════════════════ NAV ═══════════════════════ */
/* once the page scrolls, the bar floats inside the same frame as the opening
   film, rounded like it; its content stays on the page's own grid */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:20;
  height:calc(64px + var(--frame));padding-top:var(--frame);display:flex;align-items:center;
  background:transparent;
}
.nav::before{
  content:'';position:absolute;z-index:-1;inset:var(--frame) var(--frame) 0;
  border-radius:var(--panel-r);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.nav .wrap{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.is-solid::before{
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(11,30,43,.08);
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.nav-brand .mark{height:20px;width:auto;display:block;color:var(--ink)}
.nav-brand b{
  font-family:var(--din);font-weight:700;font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;
}
/* the links need clearly more room between them than a tracked word space,
   and the button a little more again */
.nav-right{display:flex;align-items:center;gap:clamp(28px,2.8vw,40px)}
.nav-cta{margin-inline-start:clamp(0px,.8vw,12px)}
.nav-link{font:600 .8125rem var(--read);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.82}
.nav-link:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
@media (max-width:899.98px){.nav-link{display:none}}
.nav-cta-short{display:none}
.nav-clock{color:var(--mid)}
@media (max-width:599.98px){
  .nav-cta-full{display:none}
  .nav-cta-short{display:inline}
}
@media (max-width:719.98px){
  .nav-clock{display:none}
  .nav .btn{white-space:nowrap;padding:8px 14px 8px 16px}
}

/* ═══════════════════════ FOOTER ═══════════════════════ */
.foot{padding-block:64px 40px;position:relative;z-index:1}
.foot-top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:24px;flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand .mark{height:20px;width:auto;color:var(--ink)}
.foot-brand b{
  font-family:var(--din);font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;
}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{
  font-family:var(--din);font-weight:500;font-size:1rem;letter-spacing:.01em;
  color:var(--mid);text-decoration:none;
}
.foot-links a:hover{color:var(--red-ink)}
.foot-legal{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.9375rem;color:var(--mid);padding-top:20px;border-top:1px solid var(--faint);
}
.foot-legal a{color:inherit}
@media (max-width:700px){
  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-legal{flex-direction:column;align-items:flex-start}
}