/* Argon v2 — design tokens and type roles (brief sections 1, 1.5, 2.2, 4.16, Appendix A).
   Load order: tokens.css, then app.css. Nothing in here is page layout. */

/* Same URL as the <link> in index.html (1.4); the browser serves the second request from cache. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

/* ---------- 1.1 root tokens ---------- */
:root{
  --ground:#E8E6E1;
  --ground-2:#DEDBD4;
  --ink:#121110;
  --ink-2:rgba(18,17,16,.56);
  --ink-3:rgba(18,17,16,.28);
  --line:rgba(18,17,16,.14);
  --paper:#FBFAF6;
  --dark:#141210;
  --accent:#C8401F;
  --accent-2:#F07B59;
  --line-on-dark:rgba(251,250,246,.14);
  --ink-3-on-dark:rgba(251,250,246,.5);

  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 24px 60px rgba(0,0,0,.18);

  /* blend chrome (2.2) */
  --blend-ink:#fff;
  --blend-label:rgba(255,255,255,.56);
  --busy-ink:#FBFAF6;
  --busy-label:rgba(251,250,246,.6);

  /* 1.3 per-build accent trio, mapped by index (A = title, route panel, first swatch) */
  --b1-a:#C8401F; --b1-b:#F2E8DC; --b1-c:#121110;
  --b2-a:#0E3B8C; --b2-b:#DCE7FF; --b2-c:#FFD23F;
  --b3-a:#5B2A86; --b3-b:#F3E9FF; --b3-c:#FF9F1C;
  --b4-a:#0B6E4F; --b4-b:#DDF5EA; --b4-c:#F2C14E;
  --b5-a:#1E1E1E; --b5-b:#F59E0B; --b5-c:#ECECEC;
  --b6-a:#7A1F1F; --b6-b:#FBE5E5; --b6-c:#D4AF37;

  /* current build trio; JS sets data-accent="1..6" on the build view (or sets these directly) */
  --build-a:var(--b1-a); --build-b:var(--b1-b); --build-c:var(--b1-c);

  /* motion switch: 1 = full motion, 0 = reduced (4.16). JS reads this or matchMedia. */
  --motion:1;
}
[data-accent="1"]{--build-a:var(--b1-a);--build-b:var(--b1-b);--build-c:var(--b1-c)}
[data-accent="2"]{--build-a:var(--b2-a);--build-b:var(--b2-b);--build-c:var(--b2-c)}
[data-accent="3"]{--build-a:var(--b3-a);--build-b:var(--b3-b);--build-c:var(--b3-c)}
[data-accent="4"]{--build-a:var(--b4-a);--build-b:var(--b4-b);--build-c:var(--b4-c)}
[data-accent="5"]{--build-a:var(--b5-a);--build-b:var(--b5-b);--build-c:var(--b5-c)}
[data-accent="6"]{--build-a:var(--b6-a);--build-b:var(--b6-b);--build-c:var(--b6-c)}

/* ---------- reset (1.2, 0.7) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  overflow-x:clip;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,video,canvas,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
[hidden]{display:none !important}

/* 5.16 focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ---------- helpers ---------- */
.sr-only{
  position:absolute !important;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;
}
.sr-only-focusable:focus,.sr-only-focusable:focus-visible{
  position:fixed !important;left:16px;top:16px;width:auto;height:auto;margin:0;
  clip:auto;clip-path:none;white-space:normal;z-index:1000;
  padding:10px 14px;background:var(--paper);color:var(--ink);
  font:500 12px/15px var(--sans);
}

/* 2.2 difference blend.
   A position:fixed element is a stacking context that isolates its children, so a .blend leaf inside
   a fixed wrapper blends against nothing. Two cases:
   - Chrome: the WHOLE header.chrome is the blended layer; its .blend leaves only carry the colors.
     Accent marks sit unblended in .chrome-marks (z201).
   - Builds view (tally): leaves keep difference on themselves; .builds-view paints var(--ground)
     (app.css) so the ground and the deck canvas are inside the same group as the leaves.
   Filters (velocity blur) go on the leaf, never on a wrapper. */
.blend{color:var(--blend-ink);mix-blend-mode:difference;transition:color .2s linear}
.blend.t-mono,.blend .t-mono,.t-mono.blend-label{color:var(--blend-label)}
.chrome{mix-blend-mode:difference;color:var(--blend-ink)}
.chrome .blend{mix-blend-mode:normal}
/* 2.2 during a route transition the chrome goes normal + paper */
html[data-route-busy] .chrome{mix-blend-mode:normal}
html[data-route-busy] .blend{mix-blend-mode:normal;color:var(--busy-ink)}
html[data-route-busy] .blend.t-mono,
html[data-route-busy] .blend .t-mono{color:var(--busy-label)}

/* ---------- 1.5 type roles ---------- */
/* Mono label (all small labels) and Wheel category */
.t-mono,.t-cat{
  font-family:var(--mono);font-size:10px;line-height:13px;letter-spacing:.08em;
  font-weight:400;text-transform:uppercase;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.on-dark.t-mono,.on-dark .t-mono{color:var(--ink-3-on-dark)}

/* Value under label / secondary line */
.t-val{font-family:var(--sans);font-size:12px;line-height:15px;letter-spacing:0;font-weight:500;color:var(--ink)}
.t-val-2{font-family:var(--sans);font-size:12px;line-height:15px;letter-spacing:0;font-weight:400;color:var(--ink-2)}

/* Nav item */
.t-nav{font-family:var(--sans);font-size:22px;line-height:20px;letter-spacing:-.005em;font-weight:500;text-transform:uppercase;color:var(--ink)}

/* Wordmark (rail) */
.t-wordmark{font-family:var(--sans);font-size:24px;line-height:24px;letter-spacing:-.01em;font-weight:600;text-transform:uppercase;color:var(--ink)}

/* Wheel title */
.t-title{font-family:var(--serif);font-size:26px;line-height:26px;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:var(--ink)}

/* Wheel blurb */
.t-blurb{font-family:var(--sans);font-size:15px;line-height:20px;letter-spacing:-.005em;font-weight:400;color:var(--ink)}

/* Counter digits (tally) + total */
.t-counter{font-family:var(--serif);font-size:180px;line-height:.85;letter-spacing:-.04em;font-weight:400;font-variant-numeric:tabular-nums}
.t-counter-total{font-family:var(--mono);font-size:10px;line-height:13px;letter-spacing:.08em;font-weight:400;text-transform:uppercase}

/* Build page title (3.2.1): in flow, accent A */
.t-page-title{font-family:var(--serif);font-size:clamp(64px,8.6vw,124px);line-height:.9;letter-spacing:-.012em;font-weight:400;text-transform:uppercase;color:var(--build-a)}

/* Build page full video title (3.2.1 row 3) */
.t-lede{font-family:var(--sans);font-size:18px;line-height:24px;letter-spacing:-.005em;font-weight:500;color:var(--ink)}

/* About statement */
.t-statement{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1.02;letter-spacing:-.005em;font-weight:400;text-transform:lowercase;color:var(--accent)}

/* About stat numbers */
.t-stat{font-family:var(--serif);font-size:120px;line-height:.85;letter-spacing:-.04em;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}

/* Body / Lab intro (table) and the 16/24 paragraph used by THE BUILD and the Lab intro (3.2.3, 3.4.3) */
.t-body{font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:-.005em;font-weight:400;color:var(--ink)}
.t-body-l{font-family:var(--sans);font-size:16px;line-height:24px;letter-spacing:-.005em;font-weight:400;color:var(--ink)}

/* Lab title (3.4.3) and MORE BUILDS card title (3.2.4) */
.t-lab-title{font-family:var(--serif);font-size:72px;line-height:.9;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:var(--ink)}
.t-card-title{font-family:var(--serif);font-size:28px;line-height:28px;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:var(--ink)}

/* Route panel title */
.t-route-title{font-family:var(--serif);font-size:clamp(72px,10vw,180px);line-height:.85;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:#FFF}

/* Boot wordmark (3.7) */
.t-boot-mark{font-family:var(--serif);font-size:clamp(72px,11vw,168px);line-height:.85;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:var(--paper)}

/* Contact title / link */
.t-contact-title{font-family:var(--serif);font-size:48px;line-height:44px;letter-spacing:.01em;font-weight:400;text-transform:uppercase;color:var(--paper)}
.t-contact-link{font-family:var(--sans);font-size:16px;line-height:20px;letter-spacing:-.005em;font-weight:500;color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(251,250,246,.55)}

/* Receipt */
.t-receipt{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:400;text-transform:uppercase;color:var(--ink)}
.t-receipt-title{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.14em;font-weight:500;text-transform:uppercase;color:var(--ink)}

/* Lab caption (left name ink-2, right aspect ink-3) */
.t-caption{font-family:var(--mono);font-size:10px;line-height:13px;letter-spacing:.08em;font-weight:400;text-transform:uppercase;color:var(--ink-2)}
.t-caption-aspect{color:var(--ink-3)}

/* Underlined inline link (chrome email, About band, facts strip) */
.u-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ---------- 390 column (narrow layout at max-width 1099.98px, 0.7) ---------- */
@media (max-width:1099.98px){
  .t-wordmark{font-size:14px;line-height:14px;letter-spacing:.04em}
  .t-nav.is-drawer,.drawer .t-nav{font-family:var(--serif);font-size:56px;line-height:.9;letter-spacing:.01em;font-weight:400;color:var(--paper)}
  .t-title{font-size:30px;line-height:30px}
  .t-blurb{font-size:14px;line-height:19px;max-width:300px;text-wrap:balance}
  .t-counter{font-size:96px}
  .t-counter.blend{mix-blend-mode:normal;color:var(--ink)}
  .t-counter-total.blend{mix-blend-mode:normal;color:var(--ink-2)}
  .t-page-title{font-size:clamp(44px,14vw,64px)}
  .t-lede{font-size:16px;line-height:22px}
  .t-statement{font-size:28px;line-height:1.05}
  .t-stat{font-size:56px}
  .t-lab-title{font-size:44px}
  .t-route-title{font-size:clamp(48px,14vw,72px)}
  .t-contact-title{font-size:40px;line-height:38px}
}

/* ---------- 4.16 reduced motion hooks ---------- */
@media (prefers-reduced-motion: reduce){
  :root{--motion:0}
  html{scroll-behavior:auto !important}
  /* CSS loops (waveform etc.) stop; app.css sets the static bar heights 4/8/6px. GSAP durations come from JS. */
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}