/* Look taken from the Version 2 website prototype (26 Oct 2026): same colours, fonts, card and drop.
   Fonts are our own copies in fonts/ so a visitor's browser never contacts Google. Single light look. */
@font-face { font-family: "Bagel Fat One"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bagel-fat-one.woff2) format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/cinzel-decorative-900.woff2) format("woff2"); }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/chivo.woff2) format("woff2"); }
@font-face { font-family: "Chivo Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/chivo-mono.woff2) format("woff2"); }

:root {
  --aqua: #86F5FF; --pink: #FFA8C8; --cream: #FFF3EA; --ink: #000000; --ink-soft: #3D2F28;
  --paper: #FFFFFF; --line: #EBD9CB; --error: #A3122E;
  --mark: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --display: "Cinzel Decorative", Georgia, serif;
  --body: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Chivo Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; background: var(--cream); color: var(--ink-soft); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

.top { border-bottom: 1px solid var(--line); background: var(--cream); }
.top .wrap { display: flex; align-items: center; min-height: 68px; }
.wordmark { font-family: var(--mark); font-size: 1.45rem; line-height: 1; color: var(--ink); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 480px) { .wordmark { font-size: 1.15rem; } }

main { flex: 1; overflow: clip; display: grid; align-items: center; justify-items: center; padding-block: 56px 72px; }
.stage { position: relative; width: 100%; max-width: 480px; }
.drop { position: absolute; z-index: 0; right: -4px; top: -52px; width: 112px; height: auto; opacity: .72; transform: rotate(159.5deg); pointer-events: none; }
@media (min-width: 640px) { .drop { right: -64px; top: -72px; width: 150px; } }

.card { position: relative; z-index: 1; display: grid; gap: 16px; padding: 36px 40px; background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); min-width: 0; }
@media (max-width: 520px) { .card { padding: 26px 20px; box-shadow: 6px 6px 0 var(--ink); } }
.card > * { margin: 0; }
.kicker { font: 700 .78rem/1.3 var(--mono); color: var(--ink); }
h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; color: var(--ink); text-wrap: balance; }
#message { color: var(--ink-soft); }

.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 .95rem/1 var(--body); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); background: #2a1f1a; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

.card[data-state="done"], .card[data-state="already"] { background: var(--aqua); }
.card[data-state="invalid"] h1, .card[data-state="missing"] h1, .card[data-state="error"] h1 { color: var(--error); }

footer { background: var(--ink); color: var(--cream); padding-block: 22px; }
.fine { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font: 400 .76rem/1.5 var(--mono); }
.fine p { margin: 0; color: color-mix(in srgb, var(--cream) 80%, transparent); }
.fine a { color: var(--cream); text-underline-offset: 3px; }
.fine a:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }