/* ============================================================
   BROKEHELLA, BRAND SYSTEM v2.0
   "In Broke We Trust"

   THE CONCEPT: THE OXIDATION.
   A penny starts bright copper and turns verdigris green.
   So does this site. Scroll depth drives --ox (0 -> 1).
   Surface = new copper. Depths = oxide green.
   Every accent, glow and border interpolates along that arc.
   The trip is the chemistry, not chaos.
   ============================================================ */

/* ---------- 1. THE METAL ---------- */
:root {
  /* Substrate */
  --void:        #060807;
  --soot:        #0B0E0D;
  --ash:         #121715;
  --patina-deep: #14251F;
  --patina:      #1E3A2E;

  /* The copper arc (fresh strike) */
  --copper-deep: #7A3F17;
  --copper:      #B4632A;
  --penny:       #E08A3C;
  --flare:       #FF7A1A;

  /* The oxide arc (aged, verdigris) */
  --oxide-deep:  #14463A;
  --oxide:       #2A6B57;
  --verdigris:   #3FE0B0;
  --verdigris-hi:#7FF5D4;

  /* Ink
     Alphas are set by contrast, not by taste: on --void, dim lands at
     ~6.5:1 and faint at ~4.8:1, both clearing WCAG AA (4.5:1) for body
     text. Do not lower these. Faint used to be 0.34, which measured
     2.66:1 and made every hint, caption and stamp on the site fail. */
  --cream:       #F3E7D8;
  --cream-dim:   rgba(243, 231, 216, 0.62);
  --cream-faint: rgba(243, 231, 216, 0.52);

  /* Status. Semantic, not decorative. These carry meaning, so unlike
     --accent they must NOT drift with --ox. A warning that oxidizes
     into the same green as a success state stops being a warning. */
  --negative:    #E8746B;  /* a price or practice this site calls out */
  --positive:    var(--accent);

  /* --- THE OXIDATION VARIABLE ---
     0 = freshly minted copper, 1 = fully oxidized verdigris.
     site.js writes this from scroll depth. */
  --ox: 0;

  /* Live accents. These are what components actually use.
     color-mix walks the copper arc into the oxide arc. */
  --accent:      color-mix(in oklab, var(--penny), var(--verdigris) calc(var(--ox) * 100%));
  --accent-hot:  color-mix(in oklab, var(--flare), var(--verdigris-hi) calc(var(--ox) * 100%));
  --accent-deep: color-mix(in oklab, var(--copper-deep), var(--oxide-deep) calc(var(--ox) * 100%));
  --accent-rgb-glow: color-mix(in oklab, var(--accent) 30%, transparent);
  /* The darkest accent that is still legible AS TEXT on --void.
     --accent-deep is a shadow/edge tone (~2.1:1). Fine for borders and
     glows, too dark for letterforms. Use this for any gradient that
     letters are cut out of, e.g. .foil. Still oxidizes with --ox. */
  --accent-edge: color-mix(in oklab, var(--accent-deep), var(--accent) 55%);
  --hair:        color-mix(in oklab, var(--accent) 26%, transparent);
  --hair-soft:   color-mix(in oklab, var(--accent) 13%, transparent);

  /* Type */
  --display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Motion, never faster than a resting heartbeat */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-warm: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 0.28s;
  --t-med:  0.6s;
  --t-slow: 1.2s;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 66ch;
  --shell: 1180px;
}

/* Quiet Mode, for people whose nervous systems have had enough */
[data-quiet="on"] *,
[data-quiet="on"] *::before,
[data-quiet="on"] *::after {
  animation-play-state: paused !important;
  transition-duration: 0.01ms !important;
}
[data-quiet="on"] .trip-canvas,
[data-quiet="on"] .aurora,
[data-quiet="on"] video { display: none !important; }
[data-quiet="on"] { --ox: 0.4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  scroll-behavior: smooth;
  /* --bg-aged is written by the oxidation engine as you scroll: the paper
     itself cools from warm near-black to green-black. Falls back with JS off. */
  background: var(--bg-aged, var(--void));
  -webkit-text-size-adjust: 100%;
}

body {
  background: transparent;
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

img, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--void); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--soot); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--copper), var(--oxide));
  border-radius: 9px;
}

/* ---------- 3. ATMOSPHERE ---------- */

/* Struck-metal grain. Every surface in this neighborhood has tooth. */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  /* dust settles on anything left alone long enough. Driven by scroll depth */
  opacity: var(--grain-op, 0.05);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* Scanline / mint-press ghost */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.16;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.5) 2px 3px
  );
}

/* The trip: slow oxidizing aurora behind everything */
.aurora {
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  filter: blur(90px) saturate(140%);
  opacity: 0.5;
  /* The light behind everything ages with the metal. The engine writes
     --aurora-1/2/3; the color-mix values are the JS-off fallback. */
  background:
    radial-gradient(38% 44% at 18% 22%,
      var(--aurora-1, color-mix(in oklab, var(--flare) 55%, transparent)), transparent 70%),
    radial-gradient(42% 40% at 82% 30%,
      var(--aurora-2, color-mix(in oklab, var(--verdigris) 42%, transparent)), transparent 72%),
    radial-gradient(50% 46% at 50% 88%,
      var(--aurora-3, color-mix(in oklab, var(--oxide) 60%, transparent)), transparent 74%);
  animation: drift 34s var(--ease-warm) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  50%  { transform: translate3d(3%, 2%, 0)   scale(1.12); }
  100% { transform: translate3d(-1%, 3%, 0)  scale(1.04); }
}

/* WebGL/2D trip canvas layer */
.trip-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
}

/* Vignette, the coin sits in shadow */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(3, 5, 4, 0.82) 100%);
}

/* ---------- 4. TYPE ---------- */
/* Element-agnostic on purpose: an eyebrow is often the real heading of
   its section, so it has to render identically on <span> and on <h2>.
   weight/line-height/text-wrap are pinned here to beat the h1-h4 rule
   below, which would otherwise make a heading eyebrow bold and tight. */
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.1vw, 11px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-wrap: wrap;
  color: var(--accent);
  display: block;
  margin-bottom: 1.1em;
}
/* Decorative lead-in, not punctuation. This was an em dash and the
   de-dash pass turned it into a comma, so every eyebrow on the site
   rendered as ", A NIGHT THAT PICKS ITSELF". A middot is the mark the
   rest of the site already uses as a separator. */
.eyebrow::before { content: '· '; opacity: 0.55; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.h-hero {
  font-size: clamp(46px, 12vw, 148px);
  letter-spacing: 0.02em;
  line-height: 0.92;
}
.h1 { font-size: clamp(32px, 6.2vw, 66px); }
.h2 { font-size: clamp(26px, 4.4vw, 46px); }
.h3 { font-size: clamp(19px, 2.4vw, 26px); }
.h4 { font-size: clamp(15.5px, 1.7vw, 19px); letter-spacing: 0.05em; }

.lede {
  font-size: clamp(17.5px, 2.3vw, 23px);
  line-height: 1.58;
  font-weight: 300;
  color: rgba(243, 231, 216, 0.86);
  max-width: 44ch;
}

.prose { max-width: var(--measure); color: var(--cream-dim); }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--cream); font-weight: 600; }
.prose em { color: var(--accent); font-style: italic; }

.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

/* Copper foil text, the struck letters on the coin */
.foil {
  background: linear-gradient(
    100deg,
    var(--accent-edge) 0%,
    var(--accent) 26%,
    var(--cream) 44%,
    var(--accent-hot) 58%,
    var(--accent) 76%,
    var(--accent-edge) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen {
  0%   { background-position: 260% 50%; }
  100% { background-position: -60% 50%; }
}

/* Glowing edge, like the rim light on the coin */
.glow-edge {
  text-shadow:
    0 0 14px color-mix(in oklab, var(--accent-hot) 55%, transparent),
    0 0 46px color-mix(in oklab, var(--accent) 32%, transparent);
}

/* ---------- 5. LAYOUT ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 780px; }
.shell-wide   { max-width: 1400px; }

.section { padding-block: clamp(72px, 11vw, 148px); position: relative; }
.section-tight { padding-block: clamp(48px, 7vw, 88px); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
  margin-block: clamp(40px, 6vw, 72px);
}

.grid { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.stack   { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.row     { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* ---------- 6. COMPONENTS ---------- */

/* Panel, a struck plate of metal */
.panel {
  position: relative;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--accent) 6%, transparent),
      transparent 55%),
    rgba(10, 14, 12, 0.66);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.panel:hover {
  border-color: color-mix(in oklab, var(--accent) 52%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 14%, transparent),
              0 18px 50px -26px color-mix(in oklab, var(--accent) 60%, transparent);
}
.panel-lift:hover { transform: translateY(-3px); }

/* Panel corner ticks. Mint registration marks */
.panel-ticks::before,
.panel-ticks::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 1px solid var(--accent);
  opacity: 0.5;
  pointer-events: none;
}
.panel-ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel-ticks::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--t-med) var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--void); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn-solid {
  background: var(--accent);
  color: var(--void);
  font-weight: 700;
  box-shadow: 0 0 30px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn-solid::before { background: var(--accent-hot); }
.btn-solid:hover { color: var(--void); }

.btn-ghost { border-color: var(--hair); color: var(--cream-dim); }
.btn-ghost:hover { border-color: var(--accent); color: var(--void); }

.btn-sm { padding: 9px 16px; font-size: 10.5px; letter-spacing: 0.14em; }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-dim);
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
}
.chip:hover { border-color: var(--accent); color: var(--cream); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
  font-weight: 700;
}

/* Metric / stat readout, The Standard lives on these */
.metric {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 16px;
}
.metric dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 6px;
}
.metric dd {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.metric dd small {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-top: 7px;
  text-transform: uppercase;
}

/* Numbered volume marker */
.vol-num {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 82px);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--accent) 46%, transparent);
  opacity: 0.75;
}

/* Ticker rail */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--hair-soft);
  padding-block: 11px;
  background: rgba(0, 0, 0, 0.32);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: ticker 42s linear infinite;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-faint);
  white-space: nowrap;
}
.ticker-track span { display: inline-flex; gap: 46px; }
.ticker-track b { color: var(--accent); font-weight: 400; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Progress meter */
.meter {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-hot));
  box-shadow: 0 0 14px -2px var(--accent);
  transition: width 0.9s var(--ease);
}

/* Form fields */
.field { display: block; }
.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 8px;
}
.input, select.input, textarea.input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hair);
  border-radius: 3px;
  color: var(--cream);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.62);
}
.input::placeholder { color: var(--cream-faint); }
textarea.input { resize: vertical; min-height: 110px; line-height: 1.6; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--void);
  box-shadow: 0 0 12px -1px var(--accent);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--void);
  box-shadow: 0 0 12px -1px var(--accent); cursor: grab;
}

/* ---------- 7. NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px var(--gutter);
  background: color-mix(in oklab, var(--void) 76%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--hair-soft); padding-block: 9px; }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.14em;
  color: var(--cream);
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-brand img {
  width: 30px; height: 30px;
  border-radius: 50%;
  filter: drop-shadow(0 0 9px color-mix(in oklab, var(--accent) 62%, transparent));
  transition: transform 1.4s var(--ease);
}
.nav-brand:hover img { transform: rotate(360deg); }
.nav-brand b { color: var(--accent); font-weight: 700; }

/* .nav-brand and .nav-tools both hold flex-shrink:0 content (the wordmark's
   min-content width; the Oath button, quiet toggle and burger, which must
   stay full-size and tappable). On a narrow phone their combined width can
   exceed the viewport with nothing able to compress, pushing the burger
   button, the only way to open the mobile menu, off-screen entirely.
   Drop the wordmark text below 480px; the coin alone still reads as the
   mark, and it frees enough width for nav-tools to stay fully visible. */
@media (max-width: 480px) {
  .nav-brand span { display: none; }
  .nav-brand { gap: 0; }
}

.nav-links {
  display: none; gap: 3px; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  padding: 4px; border: 1px solid var(--hair-soft); border-radius: 999px;
  background: color-mix(in oklab, var(--soot) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 30px -22px rgba(0,0,0,.9);
}
@media (min-width: 1040px) { .nav-links { display: flex; } }

.nav-links a {
  position: relative; padding: 7px 10px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-faint);
  border: 1px solid transparent; border-radius: 999px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-fast) var(--ease); opacity: .8;
}
.nav-links a:hover {
  color: var(--cream); background: rgba(255,255,255,.045);
  border-color: var(--hair-soft);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] {
  color: var(--cream);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 17%, transparent), rgba(255,255,255,.035));
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent),
              0 0 18px -12px var(--accent);
}
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[data-soon="true"]::before {
  content: 'SOON'; margin-right: 5px; font-size: 7px; letter-spacing: .12em;
  color: var(--penny); opacity: .85; vertical-align: 1px;
}
@media (min-width: 1040px) and (max-width: 1180px) {
  .nav-links a { padding-inline: 8px; font-size: 8.8px; letter-spacing: .1em; }
  .nav-links { gap: 2px; }
}

.nav-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: transparent;
  color: var(--cream-dim);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--void); border-color: var(--accent); }

/* Mobile drawer */
.burger { display: grid; }
@media (min-width: 1040px) { .burger { display: none; } }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: color-mix(in oklab, var(--void) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Was align-content:center with one flat list. Twenty-seven links in
     six groups do not centre — they overflow, and a centred overflowing
     list clips its own first item where you cannot scroll to it. */
  display: block;
  padding: 76px var(--gutter) 48px;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateY(0); }

.drawer-in {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: start;
}
.drawer-group { display: grid; gap: 1px; align-content: start; }
.drawer-group h2 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hair);
}
.drawer a {
  font-family: var(--display);
  /* Down from clamp(21px,5.5vw,32px): at the old size six groups of
     links ran to three screens on a phone. */
  font-size: clamp(16px, 3.6vw, 19px);
  font-weight: 700;
  color: var(--cream);
  padding: 9px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--hair-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.drawer a span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0.7;
}
.drawer a:hover { color: var(--accent); }
.drawer a[aria-current="page"] { color: var(--accent); }
.drawer a[data-soon="true"]::before {
  content: 'SOON'; font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em;
  color: var(--penny); margin-right: auto; opacity: .85; order: 2;
}
.drawer a[data-soon="true"] span { order: 3; }
.drawer a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.drawer-close {
  position: fixed; top: 16px; right: var(--gutter); z-index: 2;
}

/* Scroll progress, the oxidation gauge */
.oxbar {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  z-index: 901;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--flare), var(--penny), var(--verdigris));
  box-shadow: 0 0 12px -1px var(--accent);
}

/* ---------- 8. FOOTER ---------- */
.foot {
  border-top: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  padding-block: clamp(46px, 7vw, 76px) 34px;
}
.foot-grid {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.foot h2 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot ul a { color: var(--cream-dim); font-size: 14px; transition: color var(--t-fast); }
.foot ul a:hover { color: var(--cream); }
.foot-base {
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: 22px;
  border-top: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--cream-faint);
  text-transform: uppercase;
}

/* ---------- 9. REVEAL ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.09s; }
.rv-d2 { transition-delay: 0.18s; }
.rv-d3 { transition-delay: 0.27s; }
.rv-d4 { transition-delay: 0.36s; }

/* ---------- 9b. THE COIN ---------- */
/* Heads is identity. Tails is the movement. Every flip pulls a
   different reverse, so the coin is mythology, not a logo. */

.coin-stage {
  display: grid;
  justify-items: center;
  /* The gap has to clear the HALO, not the coin.

     coin-gl.js draws at 1.6x the coin box, so the glow overshoots the
     coin by 0.3x its height on every side. Derive the gap from the same
     expression the coin is sized with, rather than picking a number that
     happens to work at one viewport: change --coin-size or the shader's
     PAD and this follows automatically. The +6px is breathing room so
     the faintest part of the bloom still stops short of the words. */
  --coin-size: min(52vw, 250px);
  gap: calc(var(--coin-size) * 0.3 + 6px);
  perspective: 1600px;
  /* The halo is measured against this box, so it has to be the
     containing block. Without it the canvas escapes to whatever
     ancestor happens to be positioned. */
  position: relative;
}
/* The caption sits above the glow. The halo is light behind the coin,
   never a wash over the words. */
.coin-plate { position: relative; z-index: 1; }

/* The revolution itself is driven from coin.js via the Web Animations
   API, not from here, a `transition` on transform would fight it and
   make the turn stutter. Keep this rule free of transform timing.
   `will-change` + a 3D context keep the whole thing on the compositor,
   so the spin costs no main-thread work between edge-on moments. */
/* SAFARI: do NOT add `contain`, `mix-blend-mode`, `filter`, `opacity < 1`,
   `clip-path` or `mask` to this element. Every one of those is a CSS
   grouping property, and the Transforms spec says a grouping property
   forces `transform-style: flat`, which silently destroys preserve-3d
   and leaves the coin a dead flat disc. Chrome is lenient about this and
   Safari is not, so it will look perfect on desktop while being broken
   on every iPhone. It cost a `contain: layout paint` here to learn. */
.coin3d {
  width: var(--coin-size, min(52vw, 250px));
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;   /* older iOS still wants this */
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
/* Short phones: the hero has to fit the coin, its plate and the
   wordmark without pushing the fold off screen. */
@media (max-height: 740px) {
  .coin-stage { --coin-size: min(42vw, 200px); }
  .coin3d { width: var(--coin-size); }
}
.coin3d:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 12px; }

/* ---- WebGL coin layer (assets/coin-gl.js) ----
   Sibling of .coin3d, never a child. Anything that creates a paint
   containment or stacking context ON .coin3d flattens preserve-3d in
   Safari, which is what made the coin static on a real iPhone. Keep
   this layer outside it and that trap stays shut.

   When the shader is live the CSS faces are hidden with visibility
   rather than display, so the element keeps its box and the coin does
   not resize at the moment the layer mounts. If the shader ever bails,
   removing data-gl brings the real coin straight back. */
.coin-gl {
  /* Positioned from JS against the COIN, not against the stage.
     .coin-stage is a grid holding the coin AND the caption plate, so
     "top: 50%" of the stage lands below the coin and dropped the halo
     straight onto the text. The offsets are written by coin-gl.js. */
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;          /* behind the caption plate, never over words */
}
.coin-stage[data-gl="on"] .coin-face { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .coin-gl { display: none; }
  .coin-stage[data-gl="on"] .coin-face { visibility: visible; }
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  /* the struck rim, catching light */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent),
    0 0 34px -4px color-mix(in oklab, var(--flare) 55%, transparent),
    0 0 90px -10px color-mix(in oklab, var(--verdigris) 42%, transparent),
    inset 0 0 40px rgba(0, 0, 0, 0.55);
}
.coin-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  /* the struck face must not be draggable off the spinning coin */
  -webkit-user-drag: none;
  user-select: none;
}
.coin-tails { transform: rotateY(180deg); }

/* Fallback spin for engines without the Web Animations API. coin.js
   applies this inline only when el.animate() is missing or throws. */
@keyframes coinRevolve {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Reduced motion: the coin is parked face-on and cross-fades between
   designs instead of turning. The fade is the only thing that moves. */
[data-coin-calm="true"] .coin-heads img {
  transition: opacity 0.24s linear;
}
[data-coin-calm="true"] .coin3d { cursor: pointer; }

/* Light catching struck metal.
   This lives INSIDE each face, not as a sibling of them. The previous
   version was a .coin3d::after using mix-blend-mode, which is a grouping
   property. It flattened preserve-3d, and on Safari a blended layer in
   a 3D subtree rasterises once and then never re-composites, so the coin
   rendered a single frame and sat there. A plain gradient inside a face
   that already has overflow:hidden and backface-visibility:hidden gets
   the same look with none of that risk. No blend mode, no animation. */
.coin-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 32% 26%,
    color-mix(in oklab, var(--cream) 20%, transparent),
    transparent 56%);
}

/* rarity tiers glow harder */
[data-rare="true"] .coin-face {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--verdigris) 60%, transparent),
    0 0 46px -3px color-mix(in oklab, var(--verdigris) 62%, transparent),
    0 0 110px -8px color-mix(in oklab, var(--verdigris) 45%, transparent),
    inset 0 0 40px rgba(0, 0, 0, 0.55);
}
[data-rare="legendary"] .coin-face {
  box-shadow:
    0 0 0 2px var(--verdigris-hi),
    0 0 60px -2px color-mix(in oklab, var(--verdigris-hi) 75%, transparent),
    0 0 140px -6px color-mix(in oklab, var(--flare) 55%, transparent),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  animation: legendaryPulse 2.4s ease-in-out infinite;
}
@keyframes legendaryPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.13) saturate(1.25); }
}

/* the readout plate under the coin */
.coin-plate {
  text-align: center;
  display: grid;
  gap: 5px;
  max-width: 38ch;
  min-height: 84px;
  align-content: start;
}
.coin-side {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.coin-side.rare { color: var(--verdigris); }
.coin-side.legendary { color: var(--verdigris-hi); }
.coin-side.legendary::before { content: '★ '; }
.coin-name {
  font-family: var(--display);
  font-size: clamp(17px, 2.6vw, 23px);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.03em;
}
.coin-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-dim);
}

.coin-hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---------- 10. HELPERS ---------- */
.center     { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.dim        { color: var(--cream-dim); }
.faint      { color: var(--cream-faint); }
.accent     { color: var(--accent); }
.tiny       { font-size: 12.5px; }
.mt-s  { margin-top: 12px; }  .mt-m  { margin-top: 24px; }
.mt-l  { margin-top: 40px; }  .mt-xl { margin-top: 64px; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.full { width: 100%; }

.frame {
  border: 1px solid var(--hair);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--soot);
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 18px 15px;
  background: linear-gradient(transparent, rgba(4, 6, 5, 0.94));
  font-size: 13.5px;
  color: var(--cream);
  line-height: 1.5;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--void);
  padding: 10px 18px; z-index: 9999; border-radius: 0 0 4px 0;
  font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 0; }

/* Toast */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 130%);
  z-index: 9990;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--void);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.9);
  transition: transform 0.5s var(--ease);
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast[data-show="true"] { transform: translate(-50%, 0); }

/* A send confirmation that cannot silently disappear the way the
   toast above can. Fixed to the bottom of the viewport on phones
   (the reachable zone with a thumb), a floating card on wider
   screens. Stays open until someone closes it. */
.send-confirm {
  position: fixed; inset: auto 0 0 0; z-index: 9995;
  display: flex; justify-content: center; pointer-events: none;
  transform: translateY(100%); transition: transform 0.35s var(--ease);
}
.send-confirm[data-show="true"] { transform: translateY(0); pointer-events: auto; }
.send-confirm-box {
  width: 100%; max-width: 520px; margin: 0 var(--gutter, 16px) var(--gutter, 16px);
  background: var(--void); border: 1px solid var(--hair, rgba(255,255,255,.14));
  border-radius: 8px; padding: 18px 20px;
  box-shadow: 0 -14px 50px -10px rgba(0,0,0,.85);
}
@media (min-width: 700px) {
  .send-confirm { inset: auto 26px 26px auto; justify-content: flex-end; }
  .send-confirm-box { margin: 0; }
}
.send-confirm-status {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.send-confirm-note { font-size: 13.5px; line-height: 1.55; color: var(--cream-dim); margin-bottom: 12px; }
.send-confirm-text {
  width: 100%; resize: vertical; min-height: 90px; padding: 10px 12px;
  background: var(--panel-inset, rgba(0,0,0,.3)); border: 1px solid var(--hair-soft);
  border-radius: 4px; color: var(--cream); font-family: var(--mono); font-size: 12px;
  line-height: 1.5; margin-bottom: 12px;
}
.send-confirm-row { display: flex; gap: 10px; flex-wrap: wrap; }
.send-confirm-row .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }

/* ===============================================================
   TOUCH TARGETS

   Measured at 375px: the menu button and quiet-mode toggle were
   34x34, section chips 29px tall, and checkboxes 13x13. All of
   those are fine under a mouse and genuinely hard to hit with a
   thumb, and the menu button is on every page.

   Scoped to pointer:coarse so the desktop layout is untouched.
   A mouse does not need a 44px target and widening everything
   for everyone would loosen the whole design for no reason.
   =============================================================== */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; font-size: 15px; }

  .nav-brand { min-height: 44px; }

  /* Chips grow downward, not wider, so rows of them still wrap the
     same way and the line lengths people are used to do not shift. */
  .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  .btn-sm { min-height: 44px; }

  /* A 13px checkbox is a coin toss with a thumb. This is the one
     place the visual size genuinely has to change rather than just
     the hit area, because the box itself is the affordance. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px;
    accent-color: var(--accent);
  }
  /* The label is the easier target, so make the whole row tappable
     rather than asking anyone to hit the box itself. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }

  /* Bare nav links (the studio's section links were 22px tall). */
  nav a, .subnav a, .tabs a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Every standalone control that is a thing you press. Deliberately
     NOT a blanket "a, button" rule: inline links inside a sentence are
     exempt under WCAG 2.5.8 and padding them out would wreck the
     line spacing of every paragraph on the site. */
  .btn, .tab, .fav, .pill, .toggle, .seg,
  button.chip, [role="tab"], .icon-btn, .style-select,
  select, input[type="text"], input[type="email"], input[type="search"], textarea,
  /* .input directly, not only by [type=...]: a bare <input class="input">
     with no type attribute defaults to text in every browser, but the
     attribute selectors above only match an EXPLICIT type="text", so an
     untyped field (there are many across this site) fell through to
     whatever height the base .input class happened to give it. Caught
     by testing an actual rendered input, not by reading the selector
     and assuming it covered the case it looked like it covered. */
  input.input {
    min-height: 44px;
  }
  .fav { min-width: 44px; display: inline-grid; place-items: center; }

  /* A checkbox whose label row is already a comfortable target does not
     need to grow further; this catches the ones where it is not a
     direct child of the label. */
  label input[type="checkbox"], label input[type="radio"] { flex-shrink: 0; }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    min-height: 44px; display: flex; align-items: center; gap: 10px;
  }
}