/* Slowpost · Version 3 · post office meets sunset poster */
:root {
  --paper: #F3E4C4;
  --card: #FAF1DC;
  --ink: #3E2A1E;
  --red: #C2412D;
  --blue: #2B5A8A;
  --mustard: #E8A93A;
  --orange: #E07B39;
  --teal: #3E8A86;
  --sky: #BFDDD8;
  --peach: #F2B49A;
  --gold: #F3C766;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.5 Nunito, system-ui, sans-serif;
  background: var(--paper) radial-gradient(rgba(62,42,30,.07) 1px, transparent 1.3px) 0 0 / 7px 7px;
  min-height: 100vh;
}
[hidden] { display: none !important; }
a { color: var(--ink); }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Texture and motifs */
.airmail { background: repeating-linear-gradient(135deg, var(--red) 0 14px, var(--card) 14px 22px, var(--blue) 22px 36px, var(--card) 36px 44px); }
.airmail-bar { height: 8px; }
.perf { padding: 7px; background: radial-gradient(circle at 7px 7px, transparent 4.5px, var(--card) 5px) -7px -7px / 14px 14px; filter: drop-shadow(3px 3px 0 rgba(62,42,30,.85)); }
.tw { font-family: 'Special Elite', 'Courier New', monospace; letter-spacing: .06em; text-transform: uppercase; }
.hand { font-family: Gaegu, 'Comic Sans MS', cursive; font-weight: 700; }
.display { font-family: Righteous, 'Arial Rounded MT Bold', sans-serif; font-weight: 400; }
.h1 { margin: 0; font-family: Righteous, sans-serif; font-weight: 400; font-size: clamp(38px, 5vw, 64px); line-height: 1; text-wrap: balance; }
.h2 { margin: 0; font-family: Righteous, sans-serif; font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; text-wrap: balance; }
.badge { display: inline-block; font: 12px Silkscreen, monospace; text-transform: uppercase; background: var(--red); color: var(--card); padding: 5px 8px; border-radius: 6px; }
.badge.dark { background: var(--ink); color: var(--gold); }
.stk { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px rgba(62,42,30,.2)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; padding: 10px 32px; background: var(--paper); border-bottom: 2px dashed rgba(62,42,30,.35); }
@media (max-width: 760px) { .top { position: static; padding: 10px 16px; } }
.logo img { height: 52px; width: auto; display: block; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 400 16px 'Special Elite', monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .2s ease; }
.nav a:hover { background: rgba(62,42,30,.08); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--card); }
.ticket { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.ticket .badge[hidden] { display: none; }

/* Buttons */
.btn-stamp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; background: var(--red); color: var(--card); font: 900 18px Nunito, sans-serif; text-decoration: none; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); outline: 2px dashed rgba(250,241,220,.6); outline-offset: -8px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn-stamp:hover { color: var(--card); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn-stamp:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-stamp:disabled { opacity: .55; cursor: progress; transform: none; }
.btn-stamp.small { min-height: 46px; padding: 0 20px; font-size: 16px; outline-offset: -7px; }
.btn-plain { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); font: 400 15px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.btn-plain:hover { background: #fff8e8; }
.link { background: none; border: 0; padding: 0; min-height: 44px; font: 800 16px Nunito, sans-serif; color: var(--ink); text-decoration: underline; cursor: pointer; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font: 400 14px 'Special Elite', monospace; letter-spacing: .06em; text-transform: uppercase; }
.input { font: 17px Nunito, sans-serif; color: var(--ink); padding: 12px 14px; border: 2px solid var(--ink); border-radius: 6px; background: var(--card); min-height: 52px; width: 100%; }
.hint { font-size: 13px; line-height: 1.4; }
.msg { margin: 0; font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 6px; }
.msg.err { background: #FBE1D3; color: #8A2F12; border: 2px solid #C2412D; }
.msg.ok { background: #DDEEEA; color: #1F4F4C; border: 2px solid var(--teal); }

/* Steps */
.steps { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px dashed rgba(62,42,30,.4); border-radius: 6px; font: 400 15px 'Special Elite', monospace; text-transform: uppercase; letter-spacing: .06em; }
.steps li.on { background: var(--ink); color: var(--card); border-style: solid; border-color: var(--ink); }
.steps li.done { background: var(--sky); border-color: transparent; }

/* Page wrapper */
.wrap { max-width: 1180px; margin: 0 auto; padding: 36px 32px 64px; }
@media (max-width: 600px) { .wrap { padding: 24px 16px 48px; } }

/* Footer */
.foot { margin-top: 24px; }
.foot .inner { max-width: 760px; margin: 0 auto; padding: 56px 32px 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 15px 'Special Elite', monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px dashed rgba(62,42,30,.4); }
.foot .copy { font: 400 12px 'Special Elite', monospace; letter-spacing: .06em; text-transform: uppercase; opacity: .75; padding-top: 14px; border-top: 1px dashed rgba(62,42,30,.3); width: 100%; }

/* Toast */
.sp-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--card); font: 700 15px Nunito, sans-serif; padding: 12px 20px; border-radius: 8px; box-shadow: 3px 3px 0 var(--orange); z-index: 60; max-width: calc(100vw - 48px); }

/* Celebration */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fx span { position: absolute; display: block; }
.fx .rise { top: 100%; animation: fx-rise ease-in forwards; }
.fx .fall { top: -50px; animation: fx-fall linear forwards; }
@keyframes fx-rise { 0% { transform: translateY(0) scale(.5); opacity: 0 } 12% { opacity: 1 } 100% { transform: translateY(-115vh) scale(1.1) rotate(20deg); opacity: 0 } }
@keyframes fx-fall { 0% { transform: translateY(0) rotate(0) } 100% { transform: translateY(115vh) rotate(540deg) } }
@keyframes pop-in { 0% { transform: scale(.92) rotate(-2deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
.pop { animation: pop-in .5s ease-out both; }
@keyframes thunk { 0% { transform: scale(1.3); opacity: 0 } 60% { transform: scale(.94); opacity: 1 } 100% { transform: none } }
.thunk { animation: thunk .45s ease-out both; }