/* Fonts are registered by wlc.js (wlcFonts); text waits for them, at most 3 s. */
.fonts-loading body { opacity:0; }

:root {
  --paper:#f1ebdd; --tomato:#d8401f; --pink:#f2a8bd; --mustard:#ecb53a; --choc:#3b2017; --cream:#fbf6ea;
  --ground:var(--paper); --ink:var(--tomato); --text:var(--ink);
}
.mustard { --ground:var(--mustard); }
.pink { --ground:var(--pink); }

* { box-sizing:border-box; }
html { background:var(--ground); }
body { margin:0; background:var(--ground); color:var(--text); font:15px/1.6 "LC Mono", monospace; -webkit-font-smoothing:antialiased; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background-image:var(--grain); background-size:128px; opacity:.45; mix-blend-mode:multiply; z-index:10; }
a { color:inherit; }
canvas { display:block; width:100%; height:auto; }
p { margin:0 0 .8em; text-wrap:pretty; }
h1, h2, h3, .lede { text-wrap:balance; }

.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.strip { height:30px; background-image:var(--strip); background-size:600px 30px; background-repeat:repeat-x; background-position:var(--strip-x, 0) 0; }

/* type */
.label { font:14px/1.3 "LC Mono Bold", monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0; }
.script { font-family:"LC Script", cursive; color:var(--ink); line-height:1; margin:0; -webkit-text-stroke:.045em currentColor; paint-order:stroke fill; }
.display { font-family:"LC Compact", Impact, sans-serif; color:var(--ink); text-transform:uppercase; line-height:.9; letter-spacing:.01em; font-weight:400; margin:0; }
h2.display { font-size:clamp(44px, 7vw, 76px); margin-bottom:20px; }

/* nav */
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; padding-bottom:20px; }
.nav a { text-decoration:none; }
.nav .home { font:26px/1 "LC Compact", sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }
.nav .links { display:flex; gap:24px; white-space:nowrap; font:14px/1 "LC Mono Bold", monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.nav .links a:hover, .nav .links a[aria-current] { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }

/* buttons: hand-cut, they jump a step on hover */
.btn { display:inline-block; font:24px/1 "LC Compact", sans-serif; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; color:var(--ground); background:var(--ink) center/100% 100% no-repeat; padding:16px 24px 13px; border:0; cursor:pointer; }
.btn.stamped { background-color:transparent; }
.btn.ghost { background-color:transparent; color:var(--ink); }
.btn.ghost:not(.stamped) { box-shadow:inset 0 0 0 2.5px var(--ink); }
.btn:hover { animation:nudge .5s steps(1, end) infinite; }
.btn:disabled { opacity:.45; cursor:not-allowed; animation:none; }
@keyframes nudge { 0% { transform:rotate(-1.5deg); } 50% { transform:rotate(1.2deg) translateY(-1px); } }

/* stop-motion moves on hover: held poses, no tweening */
.hop:hover canvas { animation:hop .6s steps(1, end); }
@keyframes hop { 0% { transform:none; } 20% { transform:translateY(-6px) rotate(-4deg); } 40% { transform:translateY(-11px) rotate(3deg); } 60% { transform:translateY(-5px) rotate(-2deg); } 80% { transform:translateY(-1px) rotate(1deg); } }
.jiggle { animation:jiggle .5s steps(1, end) infinite; }
@keyframes jiggle { 0% { transform:rotate(-4deg); } 50% { transform:rotate(3deg) scale(1.03); } }

footer { margin-top:96px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; padding-bottom:26px; }

/* home */
/* The hero fills the first screen under the strip and nav (96px), with the mark sized to fit it. */
.hero { display:grid; justify-items:center; align-content:center; text-align:center; padding:8px 0 40px; min-height:calc(100svh - 96px); }
.hero .mark { width:min(820px, 100%, (100svh - 250px)*720/630); min-width:min(420px, 100%); }
.hero .lede { max-width:40ch; font-size:17px; line-height:1.55; margin-top:8px; }

.next-card { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:32px; text-decoration:none; background:var(--mustard) center/100% 100% no-repeat; padding:36px 40px 36px 24px; }
.next-card.stamped, .card.stamped { background-color:transparent; }
.next-card:hover { animation:nudge .6s steps(1, end) infinite; }
.next-card .script { font-size:44px; margin-bottom:6px; }
.next-card .display { font-size:clamp(46px, 6vw, 72px); }
.next-card .when { margin-top:14px; font-family:"LC Mono Bold", monospace; }
.next-card .label { margin-top:10px; }

.how { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px; margin-top:96px; }
.how .art { width:150px; margin-bottom:10px; }
.how h3 { font:34px/1 "LC Compact", sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin:0 0 6px; }

.closed { margin-top:96px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:40px; align-items:center; border-top:2.5px solid var(--ink); padding-top:40px; }

/* event */
.ev-hero { padding-top:40px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:center; }
.ev-hero .mark { width:min(500px, 100%); justify-self:center; }
.ev-title .display { font-size:clamp(56px, 7.4vw, 100px); }
.ev-title .label { margin-top:16px; }
.ev-title .when { font:16px/1.3 "LC Mono Bold", monospace; margin-top:18px; }
.plate { position:relative; max-width:680px; margin:8px auto 0; }
.plate .burst { position:absolute; width:clamp(96px, 21%, 140px); right:3%; top:14%; }

.card { background:transparent center/100% 100% no-repeat; padding:40px; }
.details { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px; margin-top:72px; }
.details .label { margin-bottom:10px; }
.details p { margin:0; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.table { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:28px 20px; margin-top:20px; }
.table figure { margin:0; text-align:center; }
.table figcaption { font:14px/1.3 "LC Mono Bold", monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-top:2px; }

/* apply */
.ap-hero { padding-top:56px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px; align-items:center; }
.ap-hero .display { font-size:clamp(64px, 10vw, 124px); margin-bottom:24px; }
.sign { width:min(520px, 100%); justify-self:center; }
.form-wrap { position:relative; max-width:700px; margin:72px auto 0; }
.form { }
.form .label { margin-bottom:24px; }
.form label { display:block; margin-bottom:22px; }
.form label span { display:block; font-family:"LC Mono Bold", monospace; margin-bottom:4px; }
.form input, .form textarea { width:100%; font:inherit; color:var(--text); background:transparent; border:0; border-bottom:2px solid color-mix(in srgb, var(--ink) 40%, transparent); padding:6px 0; resize:none; }
.form :disabled { cursor:not-allowed; }
.stamp { position:absolute; width:min(300px, 60%); right:-14px; top:96px; transform:rotate(-9deg); pointer-events:none; }
.stamp canvas { animation:thunk .5s steps(1, end) .7s both; }
@keyframes thunk { 0% { opacity:0; transform:scale(1.7); } 25% { opacity:1; transform:scale(1.3); } 50% { transform:scale(.94); } 75% { transform:scale(1.02); } 100% { opacity:1; transform:none; } }
.guest { max-width:700px; margin:56px auto 0; text-align:center; }
.guest .script { font-size:48px; margin-bottom:12px; }

@media (max-width:800px) {
  .wrap { padding:0 16px; }
  body { font-size:14px; }
  .next-card, .ev-hero, .ap-hero, .closed { grid-template-columns:1fr; }
  .next-card { padding:24px 20px; }
  .how, .details { grid-template-columns:1fr; gap:28px; }
  .how { margin-top:64px; }
  .card { padding:24px; }
  .stamp { right:-4px; top:60px; }
  .nav .links { gap:14px; font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; }
}