/* stackville.org. Dark-first and clean: ink background, big chunky type, the brand's green, pink and
   gold as accents. The sticker look (ink edge, hard shadow) is kept for the logo and the buttons only.
   Fonts are files in /fonts: no Google Fonts, no third-party requests of any kind. */

@font-face { font-family: 'Lilita One'; src: url(../fonts/LilitaOne-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Figtree; src: url(../fonts/Figtree-VariableFont_wght.ttf) format('truetype'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Chivo Mono'; src: url(../fonts/ChivoMono-VariableFont_wght.ttf) format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Anton; src: url(../fonts/Anton-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Silkscreen; src: url(../fonts/Silkscreen-Regular.ttf) format('truetype'); font-display: swap; }

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --bg: #0a0d0a; --surface: #121712; --surface-2: #1a211a; --line: #243024; --line-2: #33422f;
  --text: #f2f6ea; --muted: #a3b09c; --faint: #6f7d69; --ink: #070707; --on-fill: #070707;
  --green: #50a441; --green-hi: #87bf5b; --green-deep: #3a6f3b; --green-text: #8fcd62;
  --pink: #dc5c9d; --pink-text: #f294c4; --gold: #ddae42; --gold-deep: #b9822c; --gold-text: #efc86a;
  --hazard: #ff7a3d; --focus: #efc86a; --gloss: #ffffff59;

  --font-display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: Figtree, 'Segoe UI', system-ui, sans-serif;
  --font-money: 'Chivo Mono', ui-monospace, Consolas, monospace;
  --font-pixel: Silkscreen, ui-monospace, monospace;
  --font-slogan: Anton, Impact, 'Arial Narrow Bold', sans-serif; /* big, sharp, condensed: the slogan only */

  --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
  --wrap: 1160px; --gutter: 20px;
  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 500 17px/1.6 var(--font-body); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-text); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; margin: 0; line-height: 1.02; }
p { margin: 0 0 12px; }
strong { font-weight: 800; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--surface); padding: 8px 12px; border-radius: var(--r-md); }
.money { font-family: var(--font-money); font-weight: 600; font-variant-numeric: tabular-nums; }
.key {
  display: inline-block; min-width: 1.9em; padding: 0 7px; text-align: center;
  font: 700 0.82em/1.6 var(--font-money); color: var(--on-fill);
  background: var(--gold); border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 -3px 0 var(--gold-deep); vertical-align: 0.05em;
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* ── Buttons (sticker: ink edge, hard shadow, press into it) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px 13px;
  font: 400 20px/1 var(--font-display); letter-spacing: 0.01em; color: var(--on-fill); text-decoration: none;
  background: var(--green); border: 3px solid var(--ink); border-radius: var(--r-md);
  box-shadow: inset 0 3px 0 var(--gloss), inset 0 -4px 0 var(--green-deep), 4px 4px 0 var(--ink);
  cursor: pointer; transition: transform 80ms, box-shadow 80ms, background-color 80ms;
}
.btn:hover { color: var(--on-fill); background: var(--green-hi); transform: translate(-1px, -1px); box-shadow: inset 0 3px 0 var(--gloss), inset 0 -4px 0 var(--green-deep), 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: inset 0 3px 0 var(--gloss), inset 0 -4px 0 var(--green-deep); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); box-shadow: none; transform: none; }
.btn--ghost:active { transform: translate(1px, 1px); }
.btn--sm { min-height: 42px; padding: 8px 16px 9px; font-size: 17px; }

/* ── Header ────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: #0a0d0ae6; border-bottom: 1px solid var(--line); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top { background: #0a0d0abf; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-right: auto; }
.brand img { width: 38px; height: 38px; }
.brand span { font: 400 26px/1 var(--font-display); }
.nav { display: flex; gap: 4px 26px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 16px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--green); }
.menu-btn { display: none; }
@media (max-width: 820px) {
  .top .wrap { gap: 12px; min-height: 62px; flex-wrap: wrap; }
  .brand span { font-size: 23px; } .brand img { width: 34px; height: 34px; }
  .top .btn { min-height: 38px; padding: 6px 12px 7px; font-size: 16px; box-shadow: inset 0 3px 0 var(--gloss), inset 0 -3px 0 var(--green-deep), 3px 3px 0 var(--ink); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
    background: transparent; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
  .menu-btn svg { width: 22px; height: 22px; }
  /* without JavaScript the menu just shows as a row; with it, it opens and closes */
  .js .nav { display: none; }
  .nav { order: 3; width: 100%; flex-direction: column; gap: 0; padding: 4px 0 12px; }
  .nav a { padding: 12px 2px; font-size: 18px; border-bottom: 1px solid var(--line); color: var(--text); }
  .nav a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"] { color: var(--green-text); border-bottom-color: var(--line); }
  .js .top.is-open .nav { display: flex; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 70% at 72% 45%, #50a44129, transparent 70%), radial-gradient(40% 50% at 10% 100%, #dc5c9d14, transparent 70%); }
/* banknote linework: the seal behind the logo, the wave band along the bottom */
.hero__seal { position: absolute; z-index: -1; width: 760px; height: 760px; right: -120px; top: 50%; margin-top: -380px; background: var(--green-hi); opacity: 0.13;
  -webkit-mask: url(../img/rosette.svg) center / contain no-repeat; mask: url(../img/rosette.svg) center / contain no-repeat; pointer-events: none; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 26px; z-index: -1; background: var(--green-hi); opacity: 0.18;
  -webkit-mask: url(../img/wave.svg) repeat-x 0 50% / 104px 26px; mask: url(../img/wave.svg) repeat-x 0 50% / 104px 26px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px 48px; padding-top: 72px; padding-bottom: 96px; }
.hero__serial { display: block; margin-bottom: 22px; font: 400 12px/1 var(--font-pixel); letter-spacing: 0.06em; color: var(--green-text); }
.hero h1 { font: 400 clamp(64px, 10.5vw, 148px)/0.88 var(--font-slogan); text-transform: uppercase; letter-spacing: 0.005em; max-width: 7ch; }
.hero__lead { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 40ch; margin: 24px 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__connect { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 22px; color: var(--faint); font-size: 15px; }
.hero__logo { justify-self: center; width: min(100%, 440px); transform: rotate(-5deg);
  /* a die-cut sticker: white rim, then a hard ink shadow */
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(8px 9px 0 #000);
  animation: slap 420ms cubic-bezier(.2, 1.6, .4, 1) 120ms both; }
@keyframes slap { from { transform: rotate(-14deg) scale(1.25); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-5deg) scale(1); } }

/* the connect code: a slip you can copy */
.connect { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.connect code { display: flex; align-items: center; padding: 0 12px; min-height: 40px; min-width: 0; color: var(--text);
  font: 600 15px/1.2 var(--font-money); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect button { flex: none; font: 700 14px/1 var(--font-body); color: var(--on-fill); background: var(--gold); border: 0; padding: 0 14px; cursor: pointer; }
.connect button:hover { background: var(--gold-text); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 72px; gap: 8px; }
  .hero picture { order: -1; }
  .hero__logo { width: min(56%, 240px); margin: 0 auto 22px; }
  .hero__serial-more { display: none; }
  .hero__seal { width: 520px; height: 520px; right: 50%; margin-right: -260px; top: 0; margin-top: -90px; }
  .hero__serial { margin-bottom: 14px; }
  .hero__lead { font-size: 18px; margin: 18px 0 26px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__connect .connect { width: 100%; }
  .connect code { flex: 1; }
}
@media (max-width: 400px) { .connect code { font-size: 13px; padding: 0 10px; } .connect button { padding: 0 12px; } }

/* ── Sections ──────────────────────────────────────────── */
main { flex: 1; }
.section { padding: 96px 0 0; }
.section__head { max-width: 680px; margin-bottom: 36px; }
.section__head h2 { font-size: clamp(38px, 5.4vw, 64px); margin-bottom: 14px; }
.section__head p { color: var(--muted); font-size: 19px; margin: 0; }
.fine { font-size: 15px; color: var(--faint); margin-top: 18px; max-width: 70ch; }
@media (max-width: 640px) { .section { padding-top: 72px; } .section__head { margin-bottom: 26px; } .section__head p { font-size: 17px; } }

/* crime: what's out there + the five kinds of money */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Currency icons: the in-game art (see index.html), each on the same dark green sticker circle */
.cur { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center;
  background: #142c18; border: 2px solid var(--line-2); border-radius: 50%; box-shadow: inset 0 2px 0 #ffffff1f, 2px 2px 0 #000; }
.cur svg { width: 26px; height: 26px; display: block; }
/* Juice: the HUD's 💦, solid white exactly like the HUD (same filter) */
.cur--juice span { font: 19px/1 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; filter: brightness(0) invert(1); }


/* ── Picture grids ─────────────────────────────────────── */
/* sticker art: inline SVGs get a white die-cut rim and a hard shadow */
.art svg { display: block; width: 100%; height: 100%; overflow: visible;
  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(5px 6px 0 #000); }
.art .k { stroke: #070707; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.art .k3 { stroke: #070707; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

/* crime: one picture per thing, one line each */
.scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scene { position: relative; overflow: hidden; padding: 26px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.scene::before { content: ''; position: absolute; left: 50%; top: -30%; width: 120%; height: 90%; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow, #dc5c9d2e), transparent); pointer-events: none; }
.scene .art { position: relative; width: 112px; height: 112px; margin: 4px auto 22px; }
.scene h3 { position: relative; font-size: 25px; margin-bottom: 6px; text-align: center; }
.scene p { position: relative; margin: 0; color: var(--muted); font-size: 16px; text-align: center; }
.scene--gold { --glow: #ddae4230; } .scene--green { --glow: #50a44133; } .scene--blue { --glow: #6cb4e02e; }
@media (max-width: 900px) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .scenes { gap: 10px; }
  .scene { padding: 18px 12px 16px; }
  .scene .art { width: 76px; height: 76px; margin-bottom: 14px; }
  .scene h3 { font-size: 20px; }
  .scene p { font-size: 14px; line-height: 1.45; }
}

/* the five kinds of money: a row of coins */
.coins { margin: 40px 0 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.coins__title { font-size: 26px; margin-bottom: 22px; }
.coins ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.coins li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.coins .cur { width: 64px; height: 64px; margin-bottom: 6px; border-width: 3px; box-shadow: inset 0 3px 0 #ffffff1f, 3px 3px 0 #000; }
.coins .cur svg { width: 40px; height: 40px; }
.coins strong { font: 400 20px/1.1 var(--font-display); }
.coins span.what { color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) { .coins ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* three on top, two centred under them */
  .coins { padding: 20px 12px; }
  .coins ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 6px; }
  .coins li { grid-column: span 2; }
  .coins li:nth-child(4) { grid-column: 2 / span 2; }
  .coins .cur { width: 54px; height: 54px; } .coins .cur svg { width: 34px; height: 34px; }
  .coins strong { font-size: 17px; }
  .coins span.what { font-size: 13px; }
}

/* jobs: six picture cards */
.gigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gig { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 0 18px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.gig .art { width: 76px; height: 76px; grid-row: 1 / span 2; }
.gig h3 { font-size: 22px; align-self: end; }
.gig .pay { align-self: start; margin: 4px 0 0; color: var(--green-text); font: 600 15px/1.35 var(--font-money); }
.gig .pay small { color: var(--faint); font: 600 13px/1.35 var(--font-body); }
.hiring { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.hiring li { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 700; }
.hiring li:first-child { border: 0; padding-left: 0; color: var(--text); }
@media (max-width: 900px) { .gigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .gigs { gap: 10px; }
  .gig { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px 10px; }
  .gig .art { width: 64px; height: 64px; grid-row: auto; margin-bottom: 12px; }
  .gig h3 { font-size: 18px; }
  .gig .pay { font-size: 13px; }
}

/* off the clock: one row of chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 10px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-weight: 800; }
.chips li span { color: var(--faint); font-weight: 600; margin-left: 6px; }

/* store */
.promise { position: relative; overflow: hidden; padding: 36px; border-color: #ddae4255;
  background: radial-gradient(80% 120% at 100% 0%, #ddae421f, transparent 60%), var(--surface); }
.promise h2 { font-size: clamp(34px, 4.6vw, 52px); margin: 0 0 14px; }
.promise p { color: var(--muted); margin-bottom: 8px; }
.promise ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.promise li { padding: 8px 14px; border: 1px solid #ddae4566; border-radius: 999px; color: var(--gold-text); font-weight: 700; font-size: 16px; }
.promise .fine { margin: 18px 0 0; }
@media (max-width: 640px) { .promise { padding: 26px 20px; } }

/* join steps (a real sequence, so they're numbered) */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.steps > li { counter-increment: step; padding: 22px 22px 24px; }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  font: 400 22px/1 var(--font-display); color: var(--on-fill); background: var(--green); border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: inset 0 3px 0 var(--gloss), 2px 2px 0 #000; }
.steps h3 { font-size: 22px; margin-bottom: 6px; }
.steps p { margin: 0 0 6px; color: var(--muted); font-size: 16px; }
.steps .connect { margin: 10px 0 2px; width: 100%; }
.steps .connect code { flex: 1; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 18px; }
  .steps > li::before { margin: 0; }
}
.help { max-width: 820px; margin-top: 32px; }
.help details { border-top: 1px solid var(--line); padding: 14px 0; }
.help details:last-child { border-bottom: 1px solid var(--line); }
.help summary { cursor: pointer; font-weight: 800; }
.help details p { margin: 8px 0 0; color: var(--muted); max-width: 70ch; }

/* closing call to action */
.pullup { margin-top: 110px; padding: 72px 0; text-align: center; border-top: 1px solid var(--line);
  background: radial-gradient(50% 90% at 50% 100%, #50a44124, transparent 70%); }
.pullup h2 { font: 400 clamp(52px, 8vw, 104px)/0.92 var(--font-slogan); text-transform: uppercase; margin-bottom: 16px; }
.pullup p { color: var(--muted); font-size: 19px; margin: 0 auto 30px; max-width: 44ch; }
.pullup .hero__cta { justify-content: center; }
@media (max-width: 640px) { .pullup { margin-top: 80px; padding: 56px 0; } .pullup .btn { flex: 1 1 100%; } }

/* ── Footer ────────────────────────────────────────────── */
.foot { margin-top: 0; padding: 32px 0 40px; border-top: 1px solid var(--line); color: var(--faint); }
main + .foot { margin-top: 96px; }
.pullup + .foot, main:has(> .pullup:last-child) + .foot { margin-top: 0; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot p { margin: 0; font-size: 14px; max-width: 70ch; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* ── Rules page ────────────────────────────────────────── */
.page-head { padding-top: 64px; padding-bottom: 8px; }
.page-head h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.95; margin-bottom: 14px; }
.page-head .tag { font: 400 24px/1.25 var(--font-display); color: var(--green-text); margin-bottom: 16px; }
.page-head p { max-width: 68ch; color: var(--muted); }
.charter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 32px; }
.charter__nav { position: sticky; top: 88px; padding: 10px; }
.charter__nav ol { list-style: none; margin: 0; padding: 0; }
.charter__nav a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 700; }
.charter__nav a:hover { background: var(--surface-2); color: var(--text); }
.charter__body { display: grid; gap: 20px; }
.rules { padding: 28px 30px 18px; }
.rules h2 { font-size: 32px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rules p { max-width: 75ch; color: #d6dece; }
.rules p strong { color: var(--text); }
.rules ul { margin: 0 0 12px; padding-left: 1.2em; max-width: 75ch; color: #d6dece; }
.rules li { margin: 6px 0; }
.chan { font-weight: 800; color: var(--text); white-space: nowrap; }
@media (max-width: 860px) {
  .page-head { padding-top: 40px; }
  .charter { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .charter__nav { position: static; padding: 8px; }
  .charter__nav ol { display: flex; flex-wrap: wrap; gap: 2px; }
  .charter__nav a { padding: 6px 10px; font-size: 15px; }
  .rules { padding: 22px 18px 12px; }
  .rules h2 { font-size: 27px; }
}

/* ── Applications ──────────────────────────────────────── */
.crumb { margin: 0 0 10px; font-weight: 800; }
.apply-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.apply-card { padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.apply-card h2 { font-size: 30px; }
.apply-card p { color: var(--muted); flex: 1; }
.apply-icon { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; color: var(--on-fill);
  border: 3px solid var(--ink); border-radius: var(--r-md); transform: rotate(-6deg);
  box-shadow: inset 0 3px 0 var(--gloss), 3px 3px 0 #000; }
.apply-icon svg { width: 36px; height: 36px; }
.apply-icon--gang { background: var(--pink); }
.apply-icon--pd { background: #6cb4e0; }
.apply-icon--ems { background: var(--hazard); }
.apply-icon--staff { background: var(--gold); }
.apply-card .apply-icon { margin-bottom: 10px; }
.apply-title { display: flex; align-items: center; gap: 18px; }
.apply-title .apply-icon { width: 64px; height: 64px; }
.apply-title .apply-icon svg { width: 40px; height: 40px; }
.apply { max-width: 760px; padding: 30px; margin-top: 16px; display: grid; gap: 22px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; }
.field__opt { font-weight: 600; color: var(--faint); }
.field__hint { margin: -2px 0 2px; font-size: 15px; color: var(--faint); }
.apply input[type="text"], .apply input[type="number"], .apply textarea {
  width: 100%; font: 500 17px/1.45 var(--font-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px;
}
.apply input[type="number"] { max-width: 140px; font-family: var(--font-money); }
.apply textarea { resize: vertical; min-height: 128px; }
.apply input:hover, .apply textarea:hover { border-color: var(--faint); }
.apply input:focus-visible, .apply textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field--check { display: flex; align-items: center; gap: 12px; }
.field--check input { width: 22px; height: 22px; margin: 0; accent-color: var(--green); flex: none; }
.field--check label { font-weight: 700; }
.apply .fine { margin: 0; }
.apply .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-done { padding-top: 64px; }
.apply-done__card { max-width: 640px; padding: 32px; }
.apply-done__card h1 { font-size: clamp(38px, 5vw, 56px); margin-bottom: 12px; }
.apply-done__card p { color: var(--muted); }
@media (max-width: 640px) {
  .apply { padding: 22px 18px; }
  .apply .btn { justify-self: stretch; }
  .apply-title { gap: 12px; } .apply-title .apply-icon { width: 48px; height: 48px; } .apply-title .apply-icon svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
  .btn { transition: none; }
}