/* The Last $20: hero exemplar. Colours come from Elias's own art:
   bottle-green night (the moon poster), sodium-lamp amber (the bar bulbs + his pixel "still here."),
   receipt cream (Twenty's shirt, the Cameo caption boxes), banknote green, battery red. */
:root {
  --night: #0f1a16;
  --night-2: #16241e;
  --cream: #eadfc4;
  --smoke: #c3cdbb;
  --amber: #f2a93b;
  --bill: #5f8242;
  --bill-text: #78a355;   /* the same green, light enough to pass AA as small text */
  --red: #d9452b;
  --paper: #e9dec3;
  --ink: #1d1a12;
  /* Pixelify Sans is now ONLY for things that are texture, not language: the coin's
     struck faces and the neon sign, both drawn in JS. Colton, round 4: "the text you
     have chosen is SO HARD TO READ." A pixel font at display size is a costume, and it
     was costing us every headline. The arcade feeling comes from the lamp, the cabinets
     and the CRT — it does not have to come from the letterforms. */
  --pix: "Pixelify Sans", ui-monospace, monospace;     /* coin + neon only */
  --type: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;  /* receipts and addresses */
  --cx: 69%; --cy: 50%; --d: 480px;
  /* ── spacing scale, round 6 ────────────────────────────────────────────
     Audited 2026-09-19: the page was carrying 14/20/22/24/26/28/30/34/40/70/
     96/104 as one-off values, which is why sections read as stacked rather
     than composed. These eight steps replace them. Everything vertical on
     this site is now one of these, so the eye can learn the rhythm. */
  --s-1: 8px;    --s-2: 14px;   --s-3: 22px;   --s-4: 30px;
  --s-5: 44px;   --s-6: 64px;   --s-7: 96px;   --s-8: 128px;
  /* ── shape language ───────────────────────────────────────────────────
     Was seven different radii (2,3,4,5,6,7,8,10) — and the cabinet heads were
     1px tighter than the cabinets they sit in, so the corner leaked. Three
     steps: controls, panels, screens. */
  --r-1: 4px;    /* buttons, chips, nav keys, the number plates */
  --r-2: 6px;    /* cards and plates bolted to a cabinet */
  --r-3: 10px;   /* cabinets and screens — the big machines */
  /* Readability. Every glyph on this site sits on a dark, busy, moving background —
     a 3D stage, a lit street, a CRT scanline field. Contrast alone does not carry it;
     the eye needs the letter separated from whatever is behind it. Two layers do that:
     a tight 1px shadow that reads as an edge, and a wide low-opacity halo that quietly
     darkens the ground behind the glyph itself. Not a drop-shadow — a lift. */
  --lift: 0 1px 2px rgba(0,0,0,.78), 0 0 9px rgba(0,0,0,.5);
  /* Display type is big enough to take a hard sign-painter edge as well. */
  --lift-display: 0 2px 0 rgba(0,0,0,.72), 0 3px 10px rgba(0,0,0,.6), 0 0 26px rgba(0,0,0,.4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--cream);
  font: 400 18px/1.65 var(--type);
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--lift);
}
/* …and off again on every surface where the ink is DARK on a light ground.
   A black shadow under black text on cream paper just smears it. */
.receipt, .receipt *, .ca-box, .ca-box *, .btn-primary, .pin .no, .skip { text-shadow: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; border-radius: 2px; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: fixed; top: 12px; left: 12px; z-index: 50; background: var(--cream); color: var(--ink);
  padding: 10px 14px; font-weight: 700; text-decoration: none; }

/* ── top bar ─────────────────────────────────────────────── */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 32px;
  height: 72px; padding: 0 clamp(16px, 6.5vw, 112px);
  background: linear-gradient(180deg, rgba(12, 21, 18, 0.85), rgba(12, 21, 18, 0));
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; margin-right: auto; }
.brand-name { font: 800 21px/1 var(--display); letter-spacing: -0.005em; }
.cell {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 24px; border: 2px solid var(--cream); border-radius: 2px;
  font: 700 14px/1 var(--display); padding-left: 8px;
}
.cell::after { content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: var(--cream); }
.cell-fill { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 4px; background: var(--red); }
.links { display: flex; gap: 28px; }
.links a { font: 600 17px/1 var(--type); letter-spacing: .01em; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.links a:hover { border-bottom-color: var(--amber); }
.menu-btn { display: none; }

/* ── hero ────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; }
.stage { position: absolute; inset: 0; z-index: 0; }
.stage::before {                       /* the lamp, before WebGL is up */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--cx) var(--cy), rgba(242, 169, 59, 0.16), transparent 34%);
}
.stage::after {                        /* keeps the copy readable over the scene */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 26, 22, 0.97) 0%, rgba(15, 26, 22, 0.9) 24%,
      rgba(15, 26, 22, 0.58) 38%, rgba(15, 26, 22, 0.14) 50%, rgba(15, 26, 22, 0) 58%),
    linear-gradient(0deg, var(--night) 0%, rgba(15, 26, 22, 0) 16%);
}
#scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
  touch-action: pan-y;   /* vertical swipes still scroll; only sideways reaches the coin */
}
#scene.on { opacity: 1; }
.over-coin #scene { cursor: grab; }
.grabbing #scene { cursor: grabbing; }
#poster { display: none; }
.no-webgl #poster {
  display: block; position: absolute; left: var(--cx); top: var(--cy);
  width: var(--d); height: var(--d); transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--d) * 0.03) #9c7a41, 0 0 0 calc(var(--d) * 0.042) #4f3d20, 0 40px 80px rgba(0, 0, 0, 0.6);
}
/* The fallback coin is a real two-sided CSS card, so the flip button STAYS. */
.poster3d {
  position: absolute; left: var(--cx); top: var(--cy);
  width: var(--d); height: var(--d);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d; will-change: transform;
  cursor: grab; touch-action: pan-y; z-index: 1;
}
.poster3d.held { cursor: grabbing; }
.pface {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; backface-visibility: hidden;
  box-shadow: 0 0 0 calc(var(--d) * 0.03) #9c7a41,
              0 0 0 calc(var(--d) * 0.042) #4f3d20,
              0 40px 80px rgba(0, 0, 0, 0.6);
}
.pback { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .poster3d { transition: none; } }

.copy {
  position: relative; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; max-width: calc(600px + clamp(16px, 6.5vw, 112px));
  padding: 96px 0 36px clamp(16px, 6.5vw, 112px);
}
.copy > * { pointer-events: auto; }

h1 {
  margin: 0 0 22px; color: var(--amber);
  font: 900 clamp(60px, 6.4vw, 98px)/0.94 var(--display); letter-spacing: -0.03em;
  /* the amber bloom stays — it is the lamp — but it now sits on top of a hard edge */
  text-shadow: var(--lift-display), 0 0 34px rgba(242, 169, 59, 0.3);
}
h1 .l1, h1 .l2 { display: block; }
.lede { margin: 0 0 26px; max-width: 34em; font-size: 20.5px; line-height: 1.62; }
.lede cite { font-style: italic; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 22px; border-radius: 3px;
  font: 600 17px/1.15 var(--type); letter-spacing: .01em; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--amber); color: #1a1206; box-shadow: 0 12px 30px -12px rgba(242, 169, 59, 0.6); }
.btn-primary:hover { background: #ffbd57; transform: translateY(-1px); }
.btn-ghost { color: var(--cream); border: 2px solid rgba(234, 223, 196, 0.55); background: rgba(15, 26, 22, 0.35); }
.btn-ghost:hover { border-color: var(--cream); }

/* the receipt: "no promises. no roadmap. just a receipt." */
.receipt-wrap { margin-top: 26px; width: min(100%, 486px); filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.5)); transform: rotate(-1.3deg); }
.receipt {
  /* 15px Courier Prime measured small and read smaller still: a typewriter face
     has a short x-height, so it looks roughly a size and a half below the Archivo
     next to it. Colton, on both desktop and phone: the receipt "needs to be a lot
     bigger, it's hard to see". 18.5px here is about 16px of apparent size. */
  background: var(--paper); color: var(--ink); font: 400 18.5px/1.55 var(--mono);
  padding: 16px 24px 28px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}
.receipt-head { margin: 0 0 12px; padding-bottom: 12px; text-align: center; font-weight: 700;
  font-size: 19.5px; letter-spacing: 0.03em;
  border-bottom: 2px dashed rgba(29, 26, 18, 0.4); }
.receipt dl { margin: 0; }
.row { display: flex; align-items: baseline; }
.row dt { flex: 1; display: flex; align-items: baseline; }
.row dt::after { content: ""; flex: 1; margin: 0 8px; border-bottom: 2px dotted rgba(29, 26, 18, 0.45); transform: translateY(-4px); }
.row dd { margin: 0; font-weight: 700; }
.row dd.low { color: #a42c18; }
.ca { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(29, 26, 18, 0.4); }
.ca-label { grid-column: 1 / -1; }
.ca-value { font: 700 17px/1.4 var(--mono); word-break: break-all; background: rgba(29, 26, 18, 0.07); padding: 7px 9px; border-radius: 2px; }
.ca-copy {
  font: 700 16px/1 var(--type); letter-spacing: .04em; color: var(--paper); background: var(--ink);
  border: 0; border-radius: 2px; min-height: 44px; padding: 0 16px; cursor: pointer;
}
.ca-copy:hover { background: #3a3324; }
.ca-copy:focus-visible { outline-color: var(--ink); }

.receipt-buy { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 4px 0; font: 700 17.5px/1 var(--type); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.receipt-buy:hover { color: #6b4a12; }
.receipt-buy:focus-visible { outline-color: var(--ink); }

.risk { margin: 20px 0 0; font-size: 16px; color: var(--smoke); }

.flip {
  position: absolute; z-index: 3; transform: translateX(-50%);
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 var(--type); color: var(--cream);
  background: rgba(12, 21, 18, 0.6); border: 1px solid rgba(234, 223, 196, 0.4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.flip:hover { border-color: var(--amber); }

/* ── phones ──────────────────────────────────────────────── */
@media (max-width: 979px), (max-aspect-ratio: 19/20) {
  .top { height: 64px; gap: 12px; }
  .brand-name { font-size: 19px; }
  .menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 3px;
    font: 600 16px/1 var(--type); color: var(--cream); background: rgba(15, 26, 22, 0.6);
    border: 2px solid rgba(234, 223, 196, 0.5); cursor: pointer;
  }
  .links { display: none; }
  .menu-open .links {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 64px; left: 0; right: 0; padding: 8px 16px 18px;
    background: var(--night); border-bottom: 2px solid rgba(234, 223, 196, 0.2);
  }
  .menu-open .links a { font-size: 19px; padding: 13px 0; border-bottom: 1px solid rgba(234, 223, 196, 0.12); }

  .stage { bottom: auto; height: 60vh; height: 60svh; }
  .stage::after {                      /* same fade as before, now measured against the 60svh stage */
    background: linear-gradient(180deg, rgba(15, 26, 22, 0) 0%, rgba(15, 26, 22, 0) 65%,
      rgba(15, 26, 22, 0.92) 77.5%, var(--night) 85%);
  }
  .copy {
    min-height: 0; max-width: 640px; margin: 0 auto; justify-content: flex-start;
    padding: 49vh 16px 40px; padding-top: 49svh;
  }
  h1 { font-size: clamp(40px, 12vw, 64px); margin-bottom: 14px; }
  h1 .l1, h1 .l2 { display: inline; }
  .lede { font-size: 18px; margin-bottom: 22px; }
  .receipt-wrap { width: 100%; margin-top: 30px; }
}
@media (max-width: 599px) {
  .actions { flex-direction: column; gap: 10px; }
  .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #scene, .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}