/* miwoo.io: Amirul's home on the web, told through two forms of one character.
   Layout: hero with a form switch (Miwoo, the person ⇄ the Miwoosaurus, his dinosaur alter ego):
   the wordmark grows "saurus", the intro swaps to a field-guide card and the mascot evolves.
   Below: three "paths" (Aporia large, Hatchery, Résumé) and the Hatchery project grid. */
:root {
  /* Colour: fern-tinted paper and deep forest ink; Miwoosaurus green; sunflower spikes; violet for links */
  --bg: #eef3ec;
  --surface: #f9fbf7;
  --ink: #10261f;
  --ink-2: #4a6158;
  --line: #cfdcd3;
  --dino: #4cc38a;
  --dino-shade: #2f9d68;
  --belly: #d9f5c8;
  --spike: #ffc234;
  --cheek: #ff9aa8;
  --violet: #5b3fd9;
  --sun-tint: #fff1c4;
  --violet-tint: #e7e2ff;
  --night: #0f1f19;          /* the Aporia card stays dark in both themes */
  --night-ink: #e9f3ec;
  --focus: #5b3fd9;
  --brand: #2f9d68;          /* wordmark accent, tuned per theme for contrast */
  --backdrop: #dbe8de;       /* arch behind the mascots */
  /* Miwoo's palette */
  --skin: #b8805a; --skin-shade: #97623f; --hair: #1b1511; --mouth: #4a2616; --iris: #2b1a10;
  --cap: #1c1d20; --cap-2: #2c2e33; --logo: #8a8f96; --tee: #222428; --tee-line: #3b3e44;
  --frame: #0e0e10; --rivet: #cfd3d8;

  /* Type: chunky display for the name only, a clean grotesk for reading, a mono for field labels */
  --display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --step--2: .75rem;
  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: 2.4rem;
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1914; --surface: #142520; --ink: #e5f0e8; --ink-2: #9db5aa; --line: #253a31;
    --dino: #4cc38a; --dino-shade: #2a8a5c; --belly: #c6ecb2; --spike: #ffc234; --cheek: #ff8c9c;
    --violet: #ab9cff; --sun-tint: #2c2712; --violet-tint: #221d3d; --night: #07110d; --night-ink: #e9f3ec;
    --focus: #ffc234; --brand: #5fd69b; --backdrop: #1b2f27; --tee: #25282d; --tee-line: #41454c; --cap-2: #30333a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1914; --surface: #142520; --ink: #e5f0e8; --ink-2: #9db5aa; --line: #253a31;
  --dino: #4cc38a; --dino-shade: #2a8a5c; --belly: #c6ecb2; --spike: #ffc234; --cheek: #ff8c9c;
  --violet: #ab9cff; --sun-tint: #2c2712; --violet-tint: #221d3d; --night: #07110d; --night-ink: #e9f3ec;
  --focus: #ffc234; --brand: #5fd69b; --backdrop: #1b2f27; --tee: #25282d; --tee-line: #41454c; --cap-2: #30333a; color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { text-wrap: balance; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.label { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-block: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.01em; }
.logo svg { width: 34px; height: 34px; }
.topnav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.topnav a, .theme-btn {
  font: 600 var(--step--1)/1 var(--body); color: var(--ink); text-decoration: none;
  padding: 9px 12px; border-radius: 999px; border: 0; background: none; cursor: pointer;
}
.topnav a:hover, .theme-btn:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn.is-turn svg { animation: turn .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes turn { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Day/Night change: a soft circle grows from the button (View Transitions), or a cross-fade of colours. */
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.theme-vt::view-transition-new(root) { z-index: 2; }
:root.theme-fade, :root.theme-fade *, :root.theme-fade *::before, :root.theme-fade *::after {
  transition: background-color .6s ease, color .6s ease, fill .6s ease, stroke .6s ease, box-shadow .6s ease, border-color .6s ease !important;
}

/* ── Hero: Miwoo ⇄ Miwoosaurus ───────────────────────────────────────────── */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(16px, 4vw, 48px); align-items: center; padding-block: clamp(8px, 3vw, 32px) 28px; }
.hero-copy { min-width: 0; display: grid; gap: 14px; container-type: inline-size; justify-items: start; }
.hero-copy > * { min-width: 0; max-width: 100%; }
.stack { display: grid; width: 100%; }
.stack > * { grid-area: 1 / 1; transition: opacity .3s ease, transform .35s ease, visibility 0s .35s; }
.hero[data-form="miwoo"] .for-saurus, .hero[data-form="saurus"] .for-miwoo { opacity: 0; transform: translateY(10px); visibility: hidden; }
.hero[data-form="miwoo"] .for-miwoo, .hero[data-form="saurus"] .for-saurus { transition-delay: .25s, .25s, 0s; }

.kicker p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.kicker .ipa { text-transform: none; letter-spacing: .02em; }
.kicker i { font-family: var(--body); font-size: var(--step-0); text-transform: none; letter-spacing: 0; color: var(--ink); }
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 13.6cqi, 6.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark .base { display: inline-block; transform-origin: 0 90%; }
.wordmark.is-bump .base { animation: bump .45s cubic-bezier(.3, .7, .4, 1); }
.wordmark .suffix span { display: inline-block; color: var(--brand); opacity: 0; transform: translateY(.3em) scale(.3); transform-origin: 50% 90%;
  transition: opacity .18s, transform .25s ease-in; transition-delay: calc((5 - var(--i)) * 28ms); }
.hero[data-form="saurus"] .wordmark .suffix span { opacity: 1; transform: none; transition: opacity .2s, transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.3s + var(--i) * 60ms); }
/* Stagger index for the "saurus" letters (0-5), used by the transition delays above */
.wordmark .suffix span:nth-child(1) { --i: 0; }
.wordmark .suffix span:nth-child(2) { --i: 1; }
.wordmark .suffix span:nth-child(3) { --i: 2; }
.wordmark .suffix span:nth-child(4) { --i: 3; }
.wordmark .suffix span:nth-child(5) { --i: 4; }
.wordmark .suffix span:nth-child(6) { --i: 5; }
.def { margin: 0; max-width: 46ch; font-size: var(--step-1); line-height: 1.45; color: var(--ink); }
.def b { font-weight: 700; }
.panel { display: grid; gap: 14px; align-content: start; }
.notes { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.notes li { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--step--1); }
.notes .label { font-size: .68rem; }

.stage { position: relative; min-width: 0; display: grid; justify-items: center; padding-block: 76px 16px; }
.mascots { position: relative; display: grid; width: min(100%, 360px); padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; border-radius: 999px 999px 28px 28px; }
.mascots::before { content: ""; position: absolute; inset: 6% 6% 0; border-radius: 999px 999px 28px 28px; background: var(--backdrop); }
.mascot { grid-area: 1 / 1; display: block; position: relative; transform-origin: 50% 96%; }
.mascot .miwo { display: block; width: 100%; height: auto; overflow: visible; }
/* Entering a form: the newcomer pops in after the puff; leaving: a quick squash. */
.m-h { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .3s, opacity .2s .3s; }
.m-d { transform: scale(.55, .05); opacity: 0; transition: transform .28s cubic-bezier(.5, 0, .75, 0), opacity .15s .12s; }
.hero[data-form="saurus"] .m-h { transform: scale(.55, .05); opacity: 0; transition: transform .28s cubic-bezier(.5, 0, .75, 0), opacity .15s .12s; }
.hero[data-form="saurus"] .m-d { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .3s, opacity .2s .3s; }
.puff { position: absolute; inset: 0; pointer-events: none; }
.tap-hint { position: absolute; z-index: 1; left: 50%; bottom: -13px; transform: translateX(-50%); display: grid; pointer-events: none; }
.tap-hint > span { grid-area: 1 / 1; justify-self: center; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 600 .7rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: opacity .3s ease, transform .35s ease, visibility 0s .35s; }
.hero[data-form="miwoo"] .tap-hint .for-miwoo, .hero[data-form="saurus"] .tap-hint .for-saurus { transition-delay: .5s, .5s, 0s; }
.mascots:hover .tap-hint > span, .mascots:focus-visible .tap-hint > span { background: var(--brand); color: #0b1d15; }
.mascots:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.puff i { position: absolute; left: 50%; top: 66%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); opacity: 0; transform: scale(0); }
.puff.is-on i { animation: puff .7s ease-out forwards; }
.puff i:nth-child(1) { --x: -90px; --y: -20px; } .puff i:nth-child(2) { --x: 90px; --y: -30px; } .puff i:nth-child(3) { --x: -50px; --y: -95px; }
.puff i:nth-child(4) { --x: 55px; --y: -100px; } .puff i:nth-child(5) { --x: 0px; --y: -50px; } .puff i:nth-child(6) { --x: -100px; --y: 40px; } .puff i:nth-child(7) { --x: 100px; --y: 40px; }
@keyframes puff { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.25); } }
@keyframes bump { 0%, 100% { transform: none; } 40% { transform: scale(1.04, .94); } 70% { transform: scale(.99, 1.02); } }
.bubble {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  margin: 0; width: max-content; max-width: min(92%, 300px);
  padding: 10px 16px; border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: var(--step--1); text-align: center; line-height: 1.35;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--surface); box-shadow: 1.5px 1.5px 0 0 var(--ink);
}
.bubble.is-new { animation: pop .28s ease-out; }

/* Mascot parts: wardrobe shared by both forms */
.miwo .w-cap { fill: var(--cap); }
.miwo .w-brim { fill: var(--cap-2); }
.miwo .w-seam { fill: none; stroke: var(--cap-2); stroke-width: 2; stroke-linecap: round; }
.miwo .w-logo { fill: none; stroke: var(--logo); stroke-width: 2.2; stroke-linecap: round; }
.miwo .w-frame { fill: rgba(255, 255, 255, .1); stroke: var(--frame); stroke-width: 7; }
.miwo .w-frame-line { fill: none; stroke: var(--frame); stroke-width: 6; stroke-linecap: round; }
.miwo .w-rivet { fill: var(--rivet); }
/* Miwoo */
.miwo .h-tee { fill: var(--tee); }
.miwo .h-tee-line { fill: none; stroke: var(--tee-line); stroke-width: 2.5; stroke-linecap: round; }
.miwo .h-skin { fill: var(--skin); }
.miwo .h-skin-shade { fill: var(--skin-shade); }
.miwo .h-ear { fill: none; stroke: var(--skin-shade); stroke-width: 3; stroke-linecap: round; }
.miwo .h-hair { fill: var(--hair); }
.miwo .h-brim-shadow { fill: var(--skin-shade); opacity: .6; }
.miwo .h-blush { fill: #d9735a; opacity: .3; }
.miwo .h-nose { fill: none; stroke: var(--skin-shade); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.miwo .h-iris { fill: var(--iris); }
.miwo .h-line { fill: none; stroke: var(--mouth); stroke-width: 4.5; stroke-linecap: round; }
.miwo .h-line.thin { stroke-width: 3; }
/* Miwoosaurus */
.miwo .m-skin { fill: var(--dino); }
.miwo .m-shade { fill: var(--dino-shade); }
.miwo .m-belly { fill: var(--belly); }
.miwo .m-belly-line { fill: none; stroke: var(--dino); stroke-width: 3; stroke-linecap: round; opacity: .6; }
.miwo .m-spike { fill: var(--spike); stroke: var(--spike); stroke-width: 7; stroke-linejoin: round; }
.miwo .m-arm { fill: none; stroke: var(--dino-shade); stroke-width: 15; stroke-linecap: round; }
.miwo .m-cheek { fill: var(--cheek); opacity: .75; }
.miwo .m-white { fill: #fff; }
.miwo .m-pupil { fill: #10261f; }
.miwo .m-line { fill: none; stroke: #10261f; stroke-width: 4.5; stroke-linecap: round; }
.miwo .m-mouth { fill: #10261f; }
.miwo .m-shadow { fill: var(--ink); opacity: .1; }
.miwo .m-body { transform-origin: 160px 274px; transition: transform .25s ease-out; }
.miwo .m-bob { transform-origin: 160px 274px; }
.miwo .m-head { transform-origin: 160px 228px; transition: transform .25s ease-out; }
.miwo .m-eye { transform-box: fill-box; transform-origin: center; transition: transform .07s; }
.miwo .m-eye.is-blink { transform: scaleY(.08); }
.miwo.is-hop .m-bob { animation: hop .45s cubic-bezier(.3, .7, .4, 1); }
.miwo.is-roar .m-bob { animation: roar .7s ease-in-out; }
.miwo .m-pupil, .miwo g { transition: transform .12s ease-out; }

@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.06, .92); } 55% { transform: translateY(-22px) scale(.97, 1.04); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes roar { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg) scale(1.05); } 40% { transform: rotate(4deg) scale(1.08); } 60% { transform: rotate(-3deg) scale(1.05); } 80% { transform: rotate(2deg); } }
@keyframes pop { from { transform: translateX(-50%) scale(.9); opacity: .4; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ── Paths (the three main choices) ──────────────────────────────────────── */
.paths .wrap { display: grid; gap: 14px; padding-block: 8px 24px; }
.paths-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.paths-head h2 { margin: 0; font-size: var(--step-1); }
.paths-head .hint { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
kbd {
  font: 600 .78rem/1 var(--mono); display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em;
  border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 var(--line);
}
.path-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.path.is-game { grid-row: span 2; }
.path {
  --c-bg: var(--surface); --c-fg: var(--ink); --c-dim: var(--ink-2); --c-art: var(--ink);
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-width: 0;
  padding: 20px; border-radius: var(--radius); background: var(--c-bg); color: var(--c-fg); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .2s cubic-bezier(.3, .7, .4, 1), box-shadow .2s;
}
.path:hover, .path:focus-visible, .path.is-active { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 0 0 2px var(--c-fg), 0 14px 0 -6px var(--c-art); }
.path:focus-visible { outline: none; }
.path-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.path kbd { background: var(--c-bg); color: var(--c-fg); box-shadow: inset 0 0 0 1.5px currentColor; }
.path .art { width: 56px; height: 56px; color: var(--c-art); }
.path h3 { margin: 0; font-size: var(--step-2); line-height: 1.1; letter-spacing: -.02em; }
.path p { margin: 6px 0 0; color: var(--c-dim); font-size: var(--step--1); max-width: 40ch; }
.path-go { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: var(--step--1); }
.path-go .addr { font-family: var(--mono); font-weight: 400; font-size: var(--step--2); color: var(--c-dim); overflow-wrap: anywhere; }
.path-go .arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-fg); color: var(--c-bg); transition: transform .2s; }
.path:hover .arrow, .path.is-active .arrow { transform: translateX(3px); }

.path.is-game { --c-bg: var(--night); --c-fg: var(--night-ink); --c-dim: #a9c1b5; --c-art: var(--dino); grid-template-rows: auto auto 1fr auto; }
.path.is-hatch { --c-bg: var(--sun-tint); --c-art: #c98b00; }
.path.is-cv { --c-bg: var(--violet-tint); --c-art: var(--violet); }
.path .shot { margin: -6px -6px 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; max-width: calc(100% + 12px); }
.path .shot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .5s ease-out; }
.path.is-game:hover .shot img { transform: scale(1.04); }
.pill { font: 600 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--dino); color: #0b1d15; }
.pill.is-soon { background: var(--spike); }

/* ── Hatchery ────────────────────────────────────────────────────────────── */
.hatchery .wrap { display: grid; gap: 22px; padding-block: 48px 64px; }
.section-head { display: grid; gap: 6px; max-width: 62ch; }
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-3); line-height: 1; }
.section-head p { margin: 0; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.card { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.card-media { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; background: var(--night); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.card-body { display: grid; gap: 10px; align-content: start; padding: 18px 20px 22px; min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h3 { margin: 0; font-size: var(--step-1); line-height: 1.2; }
.card p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: var(--step--1); text-decoration: none; transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.card.is-soon .card-media { background: radial-gradient(circle at 50% 120%, var(--sun-tint), var(--surface) 70%); }
.card.is-soon .card-media svg { width: 92px; height: auto; overflow: visible; }
.egg-shell { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.egg-spots { fill: var(--dino); opacity: .8; }
.egg .crack { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.card.is-soon:hover .egg, .card.is-soon:focus-within .egg { animation: wobble .6s ease-in-out infinite; transform-origin: 50% 90%; }
.card.is-soon .crack { opacity: 0; transition: opacity .2s; }
.card.is-soon:hover .crack { opacity: 1; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); }
.footer .wrap { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding-block: 22px 32px; color: var(--ink-2); font-size: var(--step--1); }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .path-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .path.is-game { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .stage { order: -1; padding-top: 76px; }
  .mascots { width: min(62vw, 240px); }
  .def { font-size: var(--step-0); }
  .paths-head .hint { display: none; }
}
@media (max-width: 560px) {
  .path-grid { grid-template-columns: minmax(0, 1fr); }
  .path h3 { font-size: var(--step-1); }
  .topnav a.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}