/* Hallmark · genre: playful · macrostructure: Split Studio · tone: playful · anchor hue: ledger green
 * theme: custom (vibe: "risograph office, slipped orange plate")
 * paper oklch(95% 0.022 85) · accent oklch(47% 0.09 155) · Alfa Slab One + Newsreader + Caveat
 * axes: light / slab-display / chromatic-green · nav: N12 · footer: Ft2
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 */
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* the paper the whole site is printed on */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 18%, oklch(30% 0.02 70 / 0.05) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 62%, oklch(30% 0.02 70 / 0.045) 0 1px, transparent 1px),
    radial-gradient(circle at 37% 84%, oklch(30% 0.02 70 / 0.04) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}
main, header, footer { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-slip); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
  min-width: 0;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--text-display-s); }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.1rem); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-md); max-width: 62ch; }
.said { font-family: var(--font-hand); font-size: var(--text-lg); color: var(--color-accent-deep); line-height: 1.35; }
.wrap { width: min(1180px, 100% - 2rem); margin-inline: auto; }
@media (max-width: 480px) { .wrap { width: min(1180px, 100% - 32px); } }

/* ---------- N12 banner + retracting nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 500; transform: translateY(0); transition: transform var(--dur-mid) var(--ease-out); }
.nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.nav.is-dismissed { transform: none; }
.nav.is-dismissed .nav__banner { display: none; }
.nav__banner {
  height: var(--banner-h); display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  background: var(--color-accent); color: var(--color-paper);
  font-family: var(--font-hand); font-size: 1.12rem; padding-inline: var(--space-md);
}
.nav__banner p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.nav__banner-x {
  position: absolute; right: 6px; width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  color: var(--color-paper); font-size: 1.1rem; line-height: 1; border-radius: var(--radius-sm);
}
.nav__banner-x:hover { background: var(--color-accent-deep); }
.nav__bar { height: var(--bar-h); background: var(--color-paper); border-bottom: var(--rule-slab) solid var(--color-ink); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-md); }
.nav__brand { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); text-decoration: none; flex: none; }
.nav__brand img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--color-ink); }
.nav__doors { display: flex; gap: var(--space-xs); margin-left: auto; align-items: center; }
.door {
  font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; color: var(--color-ink);
  padding: 7px 11px 6px; border: var(--rule-hair) solid var(--color-ink); background: var(--color-paper-2);
  position: relative; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.door::before { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--color-slip); opacity: 0; }
.door:hover { background: var(--color-accent-wash); transform: translateY(-2px) rotate(-0.6deg); color: var(--color-ink); }
.door[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.nav__wallet { flex: none; }
@media (max-width: 860px) {
  .nav__bar { height: auto; }
  .nav__inner { flex-wrap: wrap; padding-block: 8px; gap: 8px; }
  .nav__doors { width: 100%; order: 3; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nav__doors::-webkit-scrollbar { display: none; }
  .nav__wallet { margin-left: auto; }
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  padding: 10px 16px; border: 2px solid var(--color-ink); background: var(--color-paper-2); color: var(--color-ink);
  border-radius: var(--radius-sm); position: relative;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  box-shadow: 3px 3px 0 var(--color-ink);
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--color-slip); background: var(--color-paper); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--color-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 2px 2px 0 var(--color-ink-soft); }
.btn--accent { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent-deep); }
.btn--accent:hover:not(:disabled) { background: var(--color-accent-deep); color: var(--color-paper); }
.btn--big { font-size: var(--text-lg); padding: 14px 22px; }
.btn[data-state="loading"] { opacity: 0.7; pointer-events: none; }
.btn[data-state="error"] { border-color: var(--color-slip); box-shadow: 3px 3px 0 var(--color-slip); }
.btn[data-state="success"] { background: var(--color-accent-wash); }

/* ---------- Split Studio spread ---------- */
.spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px);
  align-items: center; padding-block: var(--space-2xl);
}
.spread--flip > :first-child { order: 2; }
.spread__aside { min-width: 0; }
@media (max-width: 820px) {
  .spread { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .spread--flip > :first-child { order: 0; }
}
.taped { position: relative; border: var(--rule-slab) solid var(--color-ink); background: var(--color-paper-2); }
.taped::after {
  content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-2.4deg);
  background: oklch(85% 0.05 95 / 0.8); border-inline: 1px dashed oklch(60% 0.03 80 / 0.5);
}
.taped img { width: 100%; filter: saturate(0.94); }
.tilt-a { transform: rotate(-0.8deg); }
.tilt-b { transform: rotate(0.7deg); }

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--banner-h) + var(--bar-h) + var(--space-xl)); padding-bottom: var(--space-xl); position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
@media (max-width: 820px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: var(--text-display); }
.hero__sub { font-size: var(--text-lg); max-width: 34ch; }
.stage { position: relative; }
.stage__bg { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--rule-slab) solid var(--color-ink); }
.merv { display: block; width: min(420px, 78vw); height: auto; margin-inline: auto; transform-origin: 50% 88%; }
.merv--breathe { animation: breathe 3.4s var(--ease-in-out) infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.012); } }
.merv--over { position: absolute; left: 50%; bottom: -10%; translate: -50% 0; width: min(400px, 64vw); margin: 0; }

/* ---------- pinned slot scene ---------- */
.pin { position: relative; height: 230vh; }
.pin__sticky { position: sticky; top: calc(var(--bar-h) + 8px); height: calc(100vh - var(--bar-h) - 16px); display: grid; place-items: center; overflow: hidden; }
.pin__stage { position: relative; width: min(560px, 88vw); height: 100%; display: grid; place-items: center; }
.pin__merv { width: min(340px, 62vw); height: auto; transform: translateY(calc(var(--p, 0) * -12px)); }
.coin {
  position: absolute; top: 2%; left: 50%; width: 62px; height: 62px; border-radius: 50%;
  border: 3px solid var(--color-ink); background: var(--color-slip);
  translate: -50% 0; transform: translateY(calc(var(--p, 0) * 30vh)) rotate(calc(var(--p, 0) * 540deg));
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-ink);
  opacity: calc(1 - max(0, (var(--p, 0) - 0.52)) * 12);
}
.strip {
  position: absolute; bottom: 12%; left: 50%; width: min(300px, 62vw); padding: 10px 14px;
  background: var(--color-paper); border: 2px solid var(--color-ink); font-family: var(--font-hand); font-size: 1.1rem;
  translate: -50% 0;
  transform: translateY(calc((1 - var(--q, 0)) * 34vh)) rotate(calc((1 - var(--q, 0)) * -6deg));
  opacity: var(--q, 0);
}
.pin__cap { position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; font-family: var(--font-hand); font-size: 1.25rem; color: var(--color-ink-soft); }

/* ---------- certificate svg ---------- */
.cert-frame { width: 100%; height: auto; border: var(--rule-slab) solid var(--color-ink); background: var(--color-paper-2); }
.safe { width: min(330px, 74vw); height: auto; }
.safe__dial { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--p, 0) * 300deg)); }

/* ---------- doors row (in-world nav) ---------- */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); padding-block: var(--space-xl); }
.doorcard {
  display: block; text-decoration: none; color: var(--color-ink); background: var(--color-paper-2);
  border: var(--rule-slab) solid var(--color-ink); padding: var(--space-md) var(--space-md) var(--space-lg);
  position: relative; min-height: 190px;
  transition: transform var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.doorcard:nth-child(odd) { transform: rotate(-0.7deg); }
.doorcard:nth-child(even) { transform: rotate(0.5deg); }
.doorcard:hover { transform: translateY(-5px) rotate(0deg); background: var(--color-accent-wash); color: var(--color-ink); }
.doorcard__glass { height: 74px; margin-bottom: var(--space-sm); background: repeating-linear-gradient(-8deg, var(--color-paper-3) 0 7px, var(--color-paper-2) 7px 14px); border: 2px solid var(--color-ink); display: grid; place-items: center; }
.doorcard__glass span { font-family: var(--font-hand); font-size: 1.3rem; color: var(--color-accent-deep); }
.doorcard__knob { position: absolute; right: 14px; bottom: 16px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-slip); border: 2px solid var(--color-ink); }
.doorcard h3 { margin-bottom: 6px; font-size: var(--text-lg); }
.doorcard p { font-size: var(--text-sm); margin: 0; color: var(--color-ink-soft); }

/* ---------- panels, plaque, footer ---------- */
.panel { border: var(--rule-slab) solid var(--color-ink); background: var(--color-paper-2); padding: var(--space-lg); }
.panel--slip { border-color: var(--color-slip); }
.stamp {
  display: inline-block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-slip);
  border: 2.5px solid var(--color-slip); padding: 5px 12px 4px; transform: rotate(-4deg); border-radius: var(--radius-sm);
}
.plaque {
  display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: var(--rule-slab) solid var(--color-ink); border-bottom: var(--rule-slab) solid var(--color-ink);
  padding-block: var(--space-md); margin-top: var(--space-2xl);
}
.plaque__cell { min-width: 0; }
.plaque__cell b { display: block; font-family: var(--font-hand); font-weight: 400; font-size: 1.15rem; color: var(--color-accent-deep); }
.plaque__cell span, .plaque__cell a { font-size: var(--text-sm); word-break: break-all; }
.copy-btn { font-size: var(--text-xs); padding: 3px 8px; margin-left: 6px; box-shadow: 2px 2px 0 var(--color-ink); }
.foot-line { border-top: var(--rule-hair) solid var(--color-ink); margin-top: var(--space-lg); padding-block: var(--space-md) var(--space-xl); }
.foot-line p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; max-width: none; }

/* ---------- forms / feedback ---------- */
.says { margin-top: var(--space-md); font-family: var(--font-hand); font-size: 1.28rem; color: var(--color-accent-deep); min-height: 1.6em; }
.says[data-tone="bad"] { color: var(--color-slip); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 8px 0; border-bottom: 1px dotted var(--color-ink-soft); font-size: var(--text-sm); }
.rows li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.big-num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.hand { font-family: var(--font-hand); font-size: 1.2rem; }
.only-live { display: none; }
[data-mode="live"] .only-live { display: revert; }
[data-mode="live"] .only-soon { display: none; }
canvas.paper-air { position: fixed; inset: 0; pointer-events: none; z-index: 400; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
  .pin { height: auto; }
  .pin__sticky { position: static; height: auto; padding-block: var(--space-xl); }
  .coin, .strip { position: static; translate: none; transform: none; opacity: 1; margin: var(--space-md) auto; }
  .safe__dial { transform: none; }
  .merv--breathe { animation: none; }
}