/* 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: #a9b5a2;
  --amber: #f2a93b;
  --bill: #5f8242;
  --bill-text: #78a355;   /* the same green, light enough to pass AA as small text */
  --red: #d9452b;
  --paper: #e9dec3;
  --ink: #1d1a12;
  --pix: "Pixelify Sans", ui-monospace, monospace;     /* display only, 20px and up */
  --type: "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;
  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 17px/1.62 var(--type);
  -webkit-font-smoothing: antialiased;
}
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: 700 21px/1 var(--pix); letter-spacing: 0.01em; }
.cell {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 24px; border: 2px solid var(--cream); border-radius: 2px;
  font: 600 14px/1 var(--pix); 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: 500 16px/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.94) 0%, rgba(15, 26, 22, 0.72) 30%, rgba(15, 26, 22, 0) 52%),
    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);
}
.no-webgl .flip { display: 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: 700 clamp(64px, 6.6vw, 104px)/0.9 var(--pix); letter-spacing: -0.01em;
  text-shadow: 0 0 34px rgba(242, 169, 59, 0.22);
}
h1 .l1, h1 .l2 { display: block; }
.lede { margin: 0 0 26px; max-width: 34em; font-size: 19px; line-height: 1.6; }
.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%, 440px); filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.5)); transform: rotate(-1.3deg); }
.receipt {
  background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--mono);
  padding: 14px 22px 26px;
  -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 10px; padding-bottom: 10px; text-align: center; font-weight: 700; 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 15px/1.35 var(--mono); word-break: break-all; background: rgba(29, 26, 18, 0.07); padding: 7px 9px; border-radius: 2px; }
.ca-copy {
  font: 700 14px/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 15px/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: 15px; color: var(--smoke); }

.flip {
  position: absolute; z-index: 3; transform: translateX(-50%);
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: 500 15px/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: 16.5px; 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; }
}