/* Hallmark · genre: playful · macrostructure: Narrative Workflow · theme: custom
 * vibe: "blueprint office, deadpan machine, wet ink"
 * paper oklch(17% 0.031 254) · accent oklch(83% 0.106 227) cool-cyan
 * display Saira Stencil One + body IBM Plex Mono (+ Caveat hand)
 * axes: dark / stencil-display / cool-cyan
 * nav: N3 side-rail · footer: Ft5 statement · enrichment: blueprint scenes + hand-built SVG + canvas ink
 * tone: deadpan · audience: people scrolling crypto twitter at 1am · use: feed the machine ink
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-ink);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-line) 16%, transparent) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-line) 16%, transparent) var(--rule), transparent var(--rule));
  background-size: var(--grid-cell) var(--grid-cell);
  color: var(--color-chalk);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-cyan); }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  transition: none;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--color-paper); color: var(--color-chalk); padding: var(--space-sm);
}
.skip:focus { left: var(--space-sm); }

/* ── N3 side rail ─────────────────────────────────────────── */
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  width: var(--rail);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  padding-block: var(--space-md);
  background: color-mix(in oklab, var(--color-ink) 88%, transparent);
  border-inline-end: var(--rule) solid var(--color-line-soft);
}
.rail__mark {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-cyan);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-decoration: none;
  margin-block-start: var(--space-xs);
}
.rail__doors { display: flex; flex-direction: column; gap: var(--space-2xs); width: 100%; padding-inline: var(--space-2xs); }
.door {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--color-chalk);
  text-decoration: none;
  text-align: center;
  padding: var(--space-xs) var(--space-2xs);
  min-height: 44px;
  display: grid; align-content: center;
  border: var(--rule) solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  transform: rotate(-0.6deg);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.door:nth-child(even) { transform: rotate(0.7deg); }
.door:hover, .door.is-hover { transform: translateY(-2px) rotate(0deg); border-color: var(--color-cyan); }
.door[aria-current="page"] { border-color: var(--color-amber); color: var(--color-amber); }
.rail__foot { margin-block-start: auto; width: 100%; padding-inline: var(--space-2xs); }

.page { margin-inline-start: var(--rail); }

@media (max-width: 60rem) {
  .rail {
    position: sticky; inset-block-start: 0; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-start; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-inline-end: 0; border-block-end: var(--rule) solid var(--color-line-soft);
    backdrop-filter: none;
  }
  .rail__mark { writing-mode: horizontal-tb; margin: 0; }
  .rail__doors { flex-direction: row; flex-wrap: wrap; width: auto; flex: 1 1 auto; padding: 0; }
  .door { flex: 0 1 auto; padding-inline: var(--space-sm); font-size: var(--text-base); }
  .rail__foot { margin: 0; width: auto; padding: 0; }
  .page { margin-inline-start: 0; }
}

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-cyan);
  border: var(--rule-thick) solid var(--color-cyan);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn.is-hover { background: var(--color-chalk); border-color: var(--color-chalk); }
.btn:active, .btn.is-active { transform: translateY(2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn--ghost {
  background: transparent; color: var(--color-cyan); border-color: var(--color-line);
}
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-paper); border-color: var(--color-cyan); color: var(--color-cyan); }
.btn--amber { background: var(--color-amber); border-color: var(--color-amber); }
.btn--amber:hover, .btn--amber.is-hover { background: var(--color-chalk); border-color: var(--color-chalk); }
.btn--small { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); }
.btn--wide { width: 100%; }
.btn[data-state="loading"] { opacity: 0.7; cursor: progress; }
.btn[data-state="error"] { background: var(--color-red); border-color: var(--color-red); color: var(--color-chalk); }
.btn[data-state="success"] { background: var(--color-amber); border-color: var(--color-amber); }

.connect {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  width: 100%; min-height: 44px; padding: var(--space-xs);
  color: var(--color-cyan); background: var(--color-paper);
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-sm);
  cursor: pointer; word-break: break-all; line-height: 1.2;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.connect:hover, .connect.is-hover { border-color: var(--color-cyan); }
.connect[data-wallet="on"] { color: var(--color-amber); }

/* ── layout blocks ────────────────────────────────────────── */
.wrap { width: min(72rem, 100%); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.wrap--narrow { width: min(48rem, 100%); }

.stage {
  position: relative;
  padding-block: var(--space-3xl);
  border-block-start: var(--rule) solid var(--color-line-soft);
}
.stage:first-of-type { border-block-start: 0; }

.stage__no {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-line);
  line-height: 1;
  display: block;
  margin-block-end: var(--space-xs);
}
.stage__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-chalk);
  line-height: 1.05;
  margin-block-end: var(--space-md);
}
.lede { font-size: var(--text-lg); color: color-mix(in oklab, var(--color-chalk) 78%, var(--color-line)); max-width: 46ch; }
.hand { font-family: var(--font-hand); font-size: var(--text-xl); color: var(--color-cyan-dim); line-height: 1.25; }

/* ── character ────────────────────────────────────────────── */
.noop { position: relative; display: inline-block; width: min(30rem, 66vw); }
.noop__img { width: 100%; filter: drop-shadow(0 0 0 transparent); }
.noop__img.is-out { opacity: 0; }
.noop--breathe { animation: breathe 4.2s var(--ease-in-out) infinite; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.2%) scale(1.012); }
}
.noop__visor {
  position: absolute; inset-block-start: 34%; inset-inline-start: 26%;
  width: 48%; height: 9%;
  background: var(--color-cyan);
  opacity: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 0; padding: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.noop__visor:hover { opacity: 0.18; }
.noop.is-blink .noop__visor { opacity: 0.55; }

.bubble {
  position: relative;
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-ink);
  background: var(--color-chalk);
  border: var(--rule-thick) solid var(--color-chalk);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  max-width: 28ch;
  transform: rotate(-1deg);
}
.bubble::after {
  content: ""; position: absolute; inset-block-end: -10px; inset-inline-start: 24px;
  width: 0; height: 0;
  border-inline: 9px solid transparent;
  border-block-start: 11px solid var(--color-chalk);
}
.bubble[hidden] { display: none; }
.bubble--bad { background: var(--color-red); border-color: var(--color-red); color: var(--color-ink); }
.bubble--good { background: var(--color-amber); border-color: var(--color-amber); }

/* ── paper slips ──────────────────────────────────────────── */
.slip {
  background: var(--color-paper);
  border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  position: relative;
}
.slip--torn { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 96% 100%, 92% calc(100% - 7px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 9px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 7px), 40% 100%, 36% calc(100% - 9px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 7px), 8% 100%, 4% calc(100% - 9px), 0 100%); }
.slip__line { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; border-block-start: var(--rule) dashed var(--color-line-soft); padding-block-start: var(--space-xs); margin-block-start: var(--space-xs); }
.slip__line span:last-child { color: var(--color-cyan); word-break: break-all; }

.stamp {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-red);
  border: 3px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  display: inline-block;
  transform: rotate(-7deg);
  opacity: 0.88;
}
.stamp--amber { color: var(--color-amber); border-color: var(--color-amber); }

/* ── scenes / motion ──────────────────────────────────────── */
.scene { position: relative; overflow: clip; }
.pin { min-height: 100svh; display: grid; place-items: center; position: relative; }
.scene__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.4; will-change: transform;
}
.paper-layer { position: absolute; inset: 0; pointer-events: none; }
.paper-layer svg { position: absolute; }

#inkCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

.shake { animation: shake 320ms var(--ease-out) 1; }
@keyframes shake {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-6px, 3px, 0); }
  55% { transform: translate3d(5px, -2px, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* ── forms ────────────────────────────────────────────────── */
label { display: block; font-size: var(--text-sm); color: var(--color-cyan-dim); margin-block-end: var(--space-2xs); }
input[type="text"] {
  width: 100%; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-chalk); background: var(--color-ink);
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}
input[type="text"]:hover { border-color: var(--color-cyan-dim); }
input[type="text"]::placeholder { color: color-mix(in oklab, var(--color-chalk) 40%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block: var(--space-sm); }
.chip {
  font-family: var(--font-hand); font-size: var(--text-lg); line-height: 1;
  min-height: 44px; padding: var(--space-xs) var(--space-md);
  color: var(--color-chalk); background: transparent;
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover, .chip.is-hover { border-color: var(--color-cyan); transform: translateY(-2px); }
.chip[aria-pressed="true"] { border-color: var(--color-amber); color: var(--color-amber); }

/* ── live/soon ────────────────────────────────────────────── */
[data-when="live"] { display: none; }
:root[data-mode="live"] [data-when="live"] { display: revert; }
:root[data-mode="live"] [data-when="soon"] { display: none; }

.copy-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.copy-row code { font-size: var(--text-sm); color: var(--color-cyan); word-break: break-all; }

.gauge { height: 14px; border: var(--rule) solid var(--color-line); border-radius: var(--radius-pill); overflow: clip; background: var(--color-ink); }
.gauge__fill { height: 100%; width: 0; background: var(--color-amber); transform-origin: left; transition: width var(--dur-slow) var(--ease-out); }

.log { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.log li { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; padding-block: var(--space-2xs); border-block-end: var(--rule) dashed var(--color-line-soft); }

/* ── footer Ft5 ───────────────────────────────────────────── */
.foot { border-block-start: var(--rule) solid var(--color-line-soft); padding-block: var(--space-2xl) var(--space-xl); margin-block-start: var(--space-3xl); }
.foot__say { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 0.95; color: var(--color-chalk); margin-block-end: var(--space-lg); }
.foot__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: baseline; font-size: var(--text-sm); color: var(--color-line); }
.foot__meta a { color: var(--color-cyan-dim); }

@media (prefers-reduced-motion: reduce) {
  .book__pen, .clock__fresh, .shelfrow__dust, .tin__coin { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .pin { min-height: auto; }
  .scene__bg { position: relative; height: auto; opacity: 0.5; }
}

/* ── home · 1.0 front desk ────────────────────────────────── */
.hero { padding-block: var(--space-xl); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--space-xl); align-items: center; min-height: 82svh;
}
.hero__say {
  font-family: var(--font-display); font-size: var(--text-display);
  line-height: 0.88; color: var(--color-chalk); margin-block-end: var(--space-md);
}
.hero__block { font-size: var(--text-sm); color: var(--color-cyan-dim); }
.hero__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.noop__img { transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px)); transition: transform var(--dur-slow) var(--ease-out); }
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-block: var(--space-xl); }
  .hero__body { order: -1; }
  .noop { width: min(18rem, 66vw); }
}

/* ── home · 2.0 the storm ─────────────────────────────────── */
.storm { min-height: 100svh; display: grid; align-items: center; }
.storm__text { position: relative; z-index: 2; }
.slip-fly { color: var(--color-line); opacity: 0.85; will-change: transform; }
.slip-fly--a { inset-block-start: 14%; inset-inline-start: 4%; }
.slip-fly--b { inset-block-start: 62%; inset-inline-start: 12%; }
.slip-fly--c { inset-block-start: 32%; inset-inline-end: 6%; }
.slip-fly--d { inset-block-start: 76%; inset-inline-end: 18%; }

/* ── home · 3.0 it reads one ──────────────────────────────── */
.read__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-2xl); align-items: start; }
.read__slip { margin: 0; will-change: transform; }
.slip__req { font-family: var(--font-hand); font-size: var(--text-xl); color: var(--color-cyan-dim); margin-block-end: var(--space-xs); }
.slip__verdict { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; color: var(--color-red); margin: 0; }
[data-read-note] { margin-block-start: var(--space-md); }
@media (max-width: 60rem) { .read__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* ── home · 4.0 the stamp ─────────────────────────────────── */
.stampzone { min-height: 70svh; display: grid; align-items: center; }
.stampzone__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: var(--space-2xl); align-items: center; }
.stampzone__art { color: var(--color-cyan); display: grid; place-items: center; }
.stampzone__art svg { max-width: 100%; height: auto; will-change: transform; }
.stampzone__paper { color: var(--color-line); }
@media (max-width: 60rem) { .stampzone__grid { grid-template-columns: minmax(0, 1fr); } .stampzone__art svg { width: 9rem; } }

/* ── home · 5.0 the doors ─────────────────────────────────── */
.plates { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.plate { flex: 1 1 15rem; }
.plate--a { flex-grow: 1.4; }
.plate--c { flex-grow: 1.15; }
.plate a {
  display: block; height: 100%; text-decoration: none; color: var(--color-chalk);
  background: var(--color-paper); border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-sm); padding: var(--space-lg);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.plate--a a { transform: rotate(-1.2deg); }
.plate--b a { transform: rotate(0.9deg); }
.plate--c a { transform: rotate(-0.4deg); }
.plate a:hover, .plate a.is-hover { transform: translateY(-3px) rotate(0deg); border-color: var(--color-cyan); }
.plate strong { display: block; font-family: var(--font-hand); font-size: var(--text-2xl); color: var(--color-amber); line-height: 1; margin-block-end: var(--space-xs); }
.plate span { color: color-mix(in oklab, var(--color-chalk) 72%, var(--color-line)); font-size: var(--text-sm); }

/* ── the counter ──────────────────────────────────────────── */
.counter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: start; }
.counter__h1, .inkroom__h1, .racks__h1 { font-size: var(--text-3xl); margin-block-end: var(--space-md); }
.counter__actions, .inkroom__actions, .racks__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.counter__desk { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.counter__desk .noop { width: min(17rem, 54vw); }
.receipt { width: 100%; max-width: 100%; height: auto; border: var(--rule) solid var(--color-line); border-radius: var(--radius-sm); transform: rotate(-1deg); }
@media (max-width: 60rem) { .counter__grid { grid-template-columns: minmax(0, 1fr); } .counter__desk .noop { width: min(14rem, 46vw); } }

/* ── ink room ─────────────────────────────────────────────── */
.inkroom__grid { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.inkroom__jar { color: var(--color-cyan); text-align: center; position: sticky; top: var(--space-lg); }
.inkroom__jar svg { max-width: 100%; height: auto; margin-inline: auto; }
.jar__ink { fill: var(--color-amber); transition: height var(--dur-slow) var(--ease-out), y var(--dur-slow) var(--ease-out); }
.inkroom__noop { width: min(15rem, 48vw); margin-block-start: var(--space-lg); }
[data-receipt] a { word-break: break-word; }
@media (max-width: 60rem) {
  .inkroom__grid { grid-template-columns: minmax(0, 1fr); }
  .inkroom__jar { position: static; }
  .inkroom__jar svg { width: 8rem; }
}

/* ── archive ──────────────────────────────────────────────── */
.racks { min-height: 78svh; display: grid; align-items: center; }
.racks__text { position: relative; z-index: 2; max-width: 44rem; }
.drawer__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.drawer__grid .noop { width: min(16rem, 52vw); }
.drawer__panel { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.drawer__slip { width: 100%; }
.relics { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.relics li { display: flex; align-items: center; gap: var(--space-xs); }
.relics img { width: 44px; height: 44px; object-fit: contain; }
.relics a { font-family: var(--font-hand); font-size: var(--text-lg); }
@media (max-width: 60rem) { .drawer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── the waiting list (front desk 5.0) ────────────────────── */
.waitlist__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: var(--space-2xl); align-items: center; }
.waitlist__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.waitlist__actions .btn { text-decoration: none; }
.book { margin: 0; color: var(--color-line); display: grid; place-items: center; }
.book svg { max-width: 100%; height: auto; transform: rotate(-2deg); will-change: transform; }
.book__lines { color: var(--color-cyan-dim); }
.book__pen { color: var(--color-amber); animation: scribble 5.5s var(--ease-in-out) infinite; transform-origin: 200px 118px; }
@keyframes scribble { 0%, 70%, 100% { transform: translate(0, 0) rotate(0deg); } 78% { transform: translate(-6px, 2px) rotate(-5deg); } 86% { transform: translate(4px, -2px) rotate(4deg); } }
.plate--d a { transform: rotate(1.6deg); }
@media (max-width: 60rem) { .waitlist__grid { grid-template-columns: minmax(0, 1fr); } .book svg { width: 12rem; } }

/* ── punch clock (counter) ────────────────────────────────── */
.clock__grid { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.clock__card { color: var(--color-line); display: grid; place-items: center; }
.clock__card svg { max-width: 100%; height: auto; transform: rotate(1.4deg); }
.clock__punches { color: var(--color-amber); }
.clock__fresh { color: var(--color-cyan); animation: pulsering 2.8s var(--ease-in-out) infinite; transform-origin: 160px 122px; }
@keyframes pulsering { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@media (max-width: 60rem) { .clock__grid { grid-template-columns: minmax(0, 1fr); } .clock__card svg { width: 8rem; } }

/* ── the shelf (archive) ──────────────────────────────────── */
.shelfrow__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-2xl); align-items: center; }
.shelfrow__art { color: var(--color-line); display: grid; place-items: center; }
.shelfrow__art svg { max-width: 100%; height: auto; }
.shelfrow__dust { color: var(--color-cyan-dim); animation: driftdust 9s linear infinite; }
@keyframes driftdust { 0% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-10px); opacity: 0.8; } 100% { transform: translateY(0); opacity: 0.2; } }
@media (max-width: 60rem) { .shelfrow__grid { grid-template-columns: minmax(0, 1fr); } .shelfrow__art svg { width: 13rem; } }

/* ── the tin (ink room) ───────────────────────────────────── */
.tin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: var(--space-2xl); align-items: center; }
.tin__art { color: var(--color-cyan); display: grid; place-items: center; }
.tin__art svg { max-width: 100%; height: auto; }
.tin__coin { color: var(--color-amber); animation: dropcoin 3.6s var(--ease-in) infinite; }
@keyframes dropcoin { 0%, 55% { transform: translateY(-14px); opacity: 0; } 62% { opacity: 1; } 78% { transform: translateY(34px); opacity: 1; } 84%, 100% { transform: translateY(34px); opacity: 0; } }
@media (max-width: 60rem) { .tin__grid { grid-template-columns: minmax(0, 1fr); } .tin__art svg { width: 8rem; } }

/* ── payroll ──────────────────────────────────────────────── */
.window { min-height: 76svh; display: grid; align-items: center; }
.window__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.window__cage { position: relative; color: var(--color-line); display: grid; place-items: center; }
.window__cage > svg { grid-area: 1 / 1; width: 100%; max-width: 30rem; height: auto; align-self: center; }
.window__noop { grid-area: 1 / 1; position: static; width: min(17rem, 52vw); align-self: center; justify-self: center; }
.window__sign {
  position: absolute; inset-block-end: -6%; inset-inline-start: 6%;
  background: var(--color-paper); border: var(--rule) solid var(--color-amber); color: var(--color-amber);
  padding: var(--space-2xs) var(--space-sm); transform: rotate(-3deg); cursor: pointer; font-size: var(--text-lg);
}
.window__h1 { font-size: var(--text-3xl); margin-block-end: var(--space-md); }
.window__text { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
@media (max-width: 60rem) {
  .window__grid { grid-template-columns: minmax(0, 1fr); }
  .window__noop { width: min(13rem, 46vw); }
  .window__sign { inset-block-end: -4%; }
}

.drawerfill__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); gap: var(--space-2xl); align-items: start; }
.drawerfill__gauge { margin-block: var(--space-lg) var(--space-sm); }
.drawerfill__read { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-amber); line-height: 1.2; }
.drawerfill__slip { margin: 0; transform: rotate(1.2deg); }
@media (max-width: 60rem) { .drawerfill__grid { grid-template-columns: minmax(0, 1fr); } }

.mine__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: start; }
.mine__card { border: var(--rule) solid var(--color-line-soft); background: var(--color-paper); padding: var(--space-lg); transform: rotate(-0.5deg); }
.mine__points { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-chalk); line-height: 1.05; margin-block: var(--space-sm) var(--space-xs); }
.mine__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.mine__actions .btn { text-decoration: none; }
.mine__buy { margin-block-start: var(--space-md); }
.mine__h3 { font-family: var(--font-hand); font-size: var(--text-2xl); color: var(--color-amber); margin-block-end: var(--space-sm); }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.rules li { padding-inline-start: var(--space-lg); position: relative; color: color-mix(in oklab, var(--color-chalk) 76%, var(--color-line)); }
.rules li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; width: 10px; height: 10px; border: var(--rule) solid var(--color-cyan-dim); transform: rotate(45deg); }
@media (max-width: 60rem) { .mine__grid { grid-template-columns: minmax(0, 1fr); } }

.wall { list-style: none; margin: var(--space-lg) 0 0; padding: 0; font-size: var(--text-sm); }
.wall li { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; padding-block: var(--space-xs); border-block-end: var(--rule) dashed var(--color-line-soft); }
.wall li:nth-child(odd) { transform: rotate(-0.25deg); }
.wall li[data-me] { color: var(--color-amber); border-block-end-color: var(--color-amber); }
.wall li span:last-child { color: var(--color-cyan-dim); }
.mine__buy .btn, .waitlist__actions .btn, .mine__actions .btn { white-space: normal; }