/* =========================================================
   Play Your Part · The Sneaky Chicken
   Moonlit storybook: night indigo, parchment, yolk, comb.
   ========================================================= */

:root {
  --night: #1b1433;
  --night-2: #261c47;
  --night-3: #33275e;
  --ink: #221a35;
  --ink-soft: #52476a;
  --paper: #f8f0dd;
  --paper-2: #f1e5c8;
  --paper-line: #e2d2ac;
  --feather: #fff7e6;
  --yolk: #ffc53d;
  --yolk-deep: #f5a623;
  --comb: #fe5d26;           /* BAPC orange, as the chicken's comb */
  --moss: #3d7a5a;
  --plum: #6b4fa0;
  --on-night: #f3ecdc;
  --on-night-soft: #bcb2d6;

  --font-display: 'Caprasimo', 'Georgia', serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 2px 0 var(--ink), 0 10px 30px -12px rgba(34, 26, 53, .35);
  --wrap: 1120px;
  --gutter: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; text-decoration-color: var(--comb); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--comb); }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; background: rgba(34,26,53,.07); padding: .1em .35em; border-radius: 5px; }
strong { font-weight: 700; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 780px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.br-md { display: none; }
@media (min-width: 720px) { .br-md { display: inline; } }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: .005em; }
h2 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); margin-bottom: .45em; }
h3 { font-size: 1.35rem; margin-bottom: .35em; }
.sub { color: var(--ink-soft); font-size: 1.1rem; max-width: 640px; margin: -.4rem auto 2.8rem; }
.big { font-size: 1.2rem; line-height: 1.7; }
.aside { font-family: var(--font-hand); font-size: 1.55rem; color: var(--plum); line-height: 1.2; margin-top: 1.4rem; }
.on-night { color: var(--on-night); }
.sub.on-night, .aside.on-night { color: var(--on-night-soft); }
.sub.on-night strong { color: var(--on-night); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--yolk);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  border: 2.5px solid var(--ink); border-radius: 999px; cursor: pointer; text-decoration: none;
  padding: .7em 1.4em; color: var(--ink); background: var(--btn-bg);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .linklike:focus-visible, .play-btn:focus-visible, .wave:focus-visible { outline: 3px solid var(--comb); outline-offset: 3px; }
.btn-yolk { --btn-bg: var(--yolk); }
.btn-yolk:hover { --btn-bg: #ffd166; }
.btn-lg { font-size: 1.08rem; padding: .85em 1.7em; }
.btn-xl { font-size: 1.3rem; padding: .95em 2.1em; box-shadow: 0 5px 0 var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--ink); }
.btn-sm { font-size: .88rem; padding: .5em 1.05em; box-shadow: 0 3px 0 var(--ink); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--on-night); border-color: var(--on-night); box-shadow: 0 4px 0 rgba(243,236,220,.35); }
.btn-ghost:hover { color: var(--yolk); border-color: var(--yolk); box-shadow: 0 6px 0 rgba(255,197,61,.4); }
.btn-ghost-dark { background: transparent; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--comb); text-underline-offset: 3px; text-decoration-thickness: 2px; cursor: pointer; }
.linklike:hover { color: var(--comb); }
.linklike[disabled] { cursor: default; text-decoration: none; color: inherit; }

/* Kevin, named like a game character: bold, accent colour, tiny portrait */
.kev { font-weight: 800; color: var(--comb); white-space: nowrap; }
.kev img {
  display: inline-block; width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover;
  vertical-align: -.45em; margin-right: .3em;
  border: 1px solid rgba(34,26,53,.35); background: #000;
  transform: rotate(-6deg);
}
.night .kev { color: #ff8a5c; }
.night .kev img { border-color: rgba(255,197,61,.6); }
.player-sub .kev { color: var(--comb); }
.player-sub .kev img { border-color: rgba(34,26,53,.35); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27, 20, 51, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(243,236,220,.1);
}
.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--on-night); }
.brand:hover { color: var(--on-night); }
.brand-logo { height: 38px; width: auto; }
.nav .btn { white-space: nowrap; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-links a { color: var(--on-night-soft); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--yolk); }
@media (max-width: 760px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }


/* ---------- night sections ---------- */
.night { background: radial-gradient(120% 90% at 80% 0%, var(--night-3) 0%, var(--night-2) 35%, var(--night) 75%); color: var(--on-night); position: relative; overflow: hidden; }
.stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 12%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 34%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 14% 86%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 88%, #fff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }

/* ---------- hero ---------- */
.hero { padding: 28px 0 72px; }
.hero-intro {
  margin: 0 0 1.6rem; text-align: center; position: relative; z-index: 1;
  font-family: var(--font-hand); font-size: 1.7rem; line-height: 1; color: var(--yolk); transform: rotate(-2deg);
}
.moon {
  position: absolute; width: 150px; height: 150px; border-radius: 50%; right: 7%; top: 40px;
  background: radial-gradient(circle at 38% 38%, #fff8e0, #f5e3a8 60%, #e8cf85);
  box-shadow: 0 0 80px 20px rgba(255, 228, 150, .18);
  opacity: .9;
}
.moon::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(210,180,110,.35); left: 30%; top: 55%; box-shadow: 44px -30px 0 -5px rgba(210,180,110,.3), 30px 20px 0 -8px rgba(210,180,110,.3); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
.hero-title { font-size: clamp(3.4rem, 9vw, 6.6rem); color: var(--feather); margin-bottom: .9rem; text-shadow: 0 5px 0 rgba(0,0,0,.25); }
.episode {
  display: inline-block; position: relative; margin: 0 0 1.6rem .2rem;
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.2;
  color: var(--ink); background: var(--yolk); padding: .35em .9em .4em;
  border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-2deg);
}
.episode span { font-family: var(--font-body); font-weight: 800; font-size: .62em; text-transform: uppercase; letter-spacing: .1em; vertical-align: .18em; margin-right: .35em; color: var(--ink-soft); }
.bubble {
  position: absolute; z-index: 2; left: -4%; top: 4%;
  font-family: var(--font-hand); font-size: 1.65rem; line-height: 1.1; color: var(--ink);
  background: var(--feather); border: 2.5px solid var(--ink); border-radius: 22px;
  padding: .45em .8em .5em; box-shadow: 0 4px 0 var(--ink); white-space: nowrap;
  transform: rotate(-5deg); animation: bubble-in .5s 1s both cubic-bezier(.2,.9,.3,1.4);
}
.bubble::after {
  content: ''; position: absolute; right: 26px; bottom: -14px; width: 22px; height: 22px;
  background: var(--feather); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: skewX(30deg) rotate(45deg);
}
@keyframes bubble-in { from { opacity: 0; transform: rotate(-5deg) scale(.6); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
.hero-lede { font-size: 1.16rem; color: var(--on-night); max-width: 560px; margin-bottom: 1.8rem; }
.hero-lede strong { color: var(--yolk); font-weight: 700; }
.hero-ctas, .final-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.hero-ctas .status { font-size: .95rem; background: none; border: 0; padding: 0; }
.final-ctas { justify-content: center; margin-top: 1.8rem; }
.status { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--on-night); background: rgba(255,255,255,.06); border: 1px solid rgba(243,236,220,.18); padding: .45em .95em; border-radius: 999px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yolk); box-shadow: 0 0 0 0 rgba(255,197,61,.7); animation: pulse 2s infinite; flex: none; }
.status.is-open .status-dot { background: #5fd68b; animation-name: pulse-green; }
.status.is-closed .status-dot { background: var(--on-night-soft); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,197,61,.6); } 70% { box-shadow: 0 0 0 9px rgba(255,197,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,197,61,0); } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(95,214,139,.6); } 70% { box-shadow: 0 0 0 9px rgba(95,214,139,0); } 100% { box-shadow: 0 0 0 0 rgba(95,214,139,0); } }

.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 70px; }
.hero-art .chicken { width: min(100%, 380px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.notes-float span { position: absolute; font-size: 2rem; color: var(--yolk); opacity: 0; animation: float-note 6s ease-in infinite; }
.notes-float span:nth-child(1) { left: 12%; top: 50%; animation-delay: 0s; }
.notes-float span:nth-child(2) { left: 78%; top: 30%; animation-delay: 1.5s; color: var(--comb); }
.notes-float span:nth-child(3) { left: 30%; top: 22%; animation-delay: 3s; color: var(--on-night); }
.notes-float span:nth-child(4) { left: 64%; top: 62%; animation-delay: 4.5s; }
@keyframes float-note {
  0% { opacity: 0; transform: translateY(20px) rotate(-10deg); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-70px) rotate(12deg); }
}

/* ---------- chicken ---------- */
.chicken .ck-limb { stroke: #f39a2b; stroke-width: 6; stroke-linecap: round; fill: none; }
.chicken .ck-toes { stroke: #f39a2b; stroke-width: 4.5; stroke-linecap: round; fill: none; }
.chicken .ck-shadow { fill: rgba(0,0,0,.28); }
.chicken .ck-tail path { fill: #efd9ad; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.chicken .ck-body-outline { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linejoin: round; }
.chicken .ck-body { fill: var(--feather); }
.chicken .ck-wing { fill: #f3e2bf; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.chicken .ck-wing-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.chicken .ck-comb, .chicken .ck-wattle { fill: var(--comb); stroke: var(--ink); stroke-width: 4.5; stroke-linejoin: round; }
.chicken .ck-beak { fill: var(--yolk); stroke: var(--ink); stroke-width: 4.5; stroke-linejoin: round; }
.chicken .ck-mask, .chicken .ck-mask-tails path { fill: var(--night-3); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.chicken .ck-eye { fill: #fff; }
.chicken .ck-pupil { fill: var(--ink); animation: shifty 4s ease-in-out infinite; }
.chicken .ck-brow { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }

/* tiptoe at 120 BPM: one step = one beat = 0.5s */
.chicken .ck-bob { animation: bob .5s ease-in-out infinite alternate; }
.chicken .ck-leg { transform-box: view-box; }
.chicken .ck-leg-a { transform-origin: 100px 166px; animation: step-a 1s ease-in-out infinite; }
.chicken .ck-leg-b { transform-origin: 128px 166px; animation: step-b 1s ease-in-out infinite; }
.chicken .ck-mask-tails { transform-box: view-box; transform-origin: 144px 56px; animation: flutter .5s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes step-a { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg) translateY(-4px); } }
@keyframes step-b { 0%, 100% { transform: rotate(-4deg) translateY(-3px); } 50% { transform: rotate(-16deg); } }
@keyframes flutter { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
@keyframes shifty { 0%, 30% { transform: translateX(0); } 38%, 58% { transform: translateX(-5px); } 66%, 100% { transform: translateX(0); } }

/* idle chickens (player when paused) stand still */
.chicken.is-idle .ck-bob, .chicken.is-idle .ck-leg, .chicken.is-idle .ck-mask-tails { animation-play-state: paused; }

/* ---------- player ---------- */
.player-label {
  font-family: var(--font-hand); font-size: 1.75rem; line-height: 1; color: var(--yolk);
  margin: 3rem 0 .4rem 1.4rem; display: flex; align-items: flex-start; gap: .4rem; transform: rotate(-2deg); transform-origin: left;
}
.player-label svg { order: -1; width: 46px; height: 38px; margin-top: .45rem; fill: none; stroke: var(--yolk); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.player {
  position: relative; margin-top: 0;
  display: flex; gap: 1.2rem; align-items: center;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px; padding: 1.1rem 1.4rem 1rem;
  box-shadow: 0 6px 0 var(--ink), 0 30px 60px -20px rgba(0,0,0,.6);
}
.play-btn {
  flex: none; width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  background: var(--comb); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: grid; place-items: center; transition: transform .12s, box-shadow .12s;
}
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.play-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.play-btn svg { width: 28px; height: 28px; fill: #fff; }
.play-btn .i-pause { display: none; }
.player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }
.player-main { flex: 1; min-width: 0; }
.player-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.player-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; }
.player-sub { font-size: .88rem; color: var(--ink-soft); }
.player-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.wave { position: relative; height: 64px; margin-top: 62px; margin-bottom: 4px; cursor: pointer; touch-action: none; }
.wave-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.wave-bars i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--paper-line); }
.wave-fill { position: absolute; inset: 0; width: 0%; overflow: hidden; pointer-events: none; }
.wave-fill .wave-bars { width: var(--wave-w, 100%); }
.wave-fill .wave-bars i { background: var(--ink); }
.wave-fill .wave-bars i:nth-child(4n+1) { background: var(--comb); }
.wave-hover {
  position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px;
  background: var(--comb); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.wave-hover::after {
  content: attr(data-time); position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font: 700 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: #fff;
  background: var(--ink); padding: .3em .5em; border-radius: 6px; white-space: nowrap;
}
@media (hover: hover) { .wave:hover .wave-hover { opacity: 1; } }
.playhead { position: absolute; bottom: calc(100% - 10px); left: 0; width: 54px; pointer-events: none; }
.playhead .chicken { width: 54px; height: auto; }
.playhead .ck-shadow { display: none; }

/* ---------- paper sections ---------- */
.section { padding: 96px 0; position: relative; }
.paper { background: var(--paper); }
.paper-2 { background: var(--paper-2); }
.card { background: var(--feather); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- story ---------- */
.story { padding-bottom: 88px; }
.storybook {
  position: relative; overflow: hidden;
  padding: 3rem 3.2rem 7.5rem;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,197,61,.16), transparent 42%),
    radial-gradient(circle at 92% 95%, rgba(107,79,160,.10), transparent 45%),
    var(--feather);
  border: 2.5px solid var(--ink); border-radius: 8px;
  box-shadow: inset 0 0 0 10px var(--feather), inset 0 0 0 12px rgba(34,26,53,.28), 0 6px 0 var(--ink), 0 30px 50px -25px rgba(34,26,53,.45);
  transform: rotate(-.6deg);
}
.storybook h2 { max-width: 78%; margin-bottom: .55em; }
.storybook .big + .big { margin-top: 0; }
.big em { font-family: var(--font-body); font-style: italic; }
.sb-episode { font-family: var(--font-hand); font-size: 1.7rem; color: var(--plum); transform: rotate(-3deg); transform-origin: left; margin-bottom: .1rem; }
.sb-doodle { position: absolute; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-sky { top: 26px; right: 30px; width: 140px; }
.sb-sky path:first-child { fill: var(--yolk); }
.sb-notes { right: 44px; bottom: 96px; width: 52px; transform: rotate(10deg); opacity: .75; }
.sb-notes ellipse { fill: var(--ink); }
.sb-flourish { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--comb); font-size: 1.3rem; margin: 1.1rem 0; }
.sb-flourish span { width: 70px; border-top: 2.5px dotted var(--ink-soft); opacity: .6; }
.sb-trail { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 76px; }
.sb-trail .tracks { top: auto; height: 60px; opacity: .45; }
.sb-walker { position: absolute; bottom: 14px; width: 60px; animation: sneak 20s linear infinite; }
.sb-walker .chicken { width: 100%; height: auto; }
.sb-walker .ck-shadow { display: none; }
@keyframes sneak {
  0% { left: -70px; }
  100% { left: calc(100% + 10px); }
}
@media (prefers-reduced-motion: reduce) { .sb-walker { left: 60%; } }

.tracks {
  position: absolute; inset: 0; background-repeat: repeat-x; background-size: 120px 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23221a35' stroke-width='3' stroke-linecap='round' opacity='.55'%3E%3Cg transform='translate(24 40) rotate(90)'%3E%3Cpath d='M0 0 V-12 M0 0 L-6 -9 M0 0 L6 -9 M0 0 V5'/%3E%3C/g%3E%3Cg transform='translate(84 22) rotate(90)'%3E%3Cpath d='M0 0 V-12 M0 0 L-6 -9 M0 0 L6 -9 M0 0 V5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

.ticks { list-style: none; display: grid; gap: .75rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .98rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .45em; width: 14px; height: 10px; border-left: 3px solid var(--comb); border-bottom: 3px solid var(--comb); transform: rotate(-45deg); }

/* ---------- how it works: a trail of chicken footprints ---------- */
.trail { list-style: none; max-width: 860px; margin: 2.6rem auto 0; padding: 0; }
.trail > li { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: center; padding-bottom: 104px; }
.trail > li:last-child { padding-bottom: 0; }
.trail > li > * { grid-row: 1; }
.trail > li:nth-child(odd) .trail-card { grid-column: 1; transform: rotate(-1deg); }
.trail > li:nth-child(even) .trail-card { grid-column: 2; transform: rotate(1deg); }
/* footprints walking down to the next step */
.trail > li:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: 10px; width: 60px; height: 96px; opacity: .5;
  background-repeat: repeat-y; background-size: 60px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cg fill='none' stroke='%23221a35' stroke-width='3' stroke-linecap='round'%3E%3Cg transform='translate(20 14) rotate(180)'%3E%3Cpath d='M0 0 V-12 M0 0 L-6 -9 M0 0 L6 -9 M0 0 V5'/%3E%3C/g%3E%3Cg transform='translate(40 38) rotate(180)'%3E%3Cpath d='M0 0 V-12 M0 0 L-6 -9 M0 0 L6 -9 M0 0 V5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.trail > li:nth-child(odd):not(:last-child)::after { transform: translateX(-50%) rotate(-38deg); }
.trail > li:nth-child(even):not(:last-child)::after { transform: translateX(-50%) rotate(38deg); }

.trail-card { position: relative; background: var(--feather); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 1.9rem 1.5rem 1.4rem; }
/* date sticker on the top-right corner, like the "Episode 1" badge */
.trail-date {
  position: absolute; top: -18px; right: 18px; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--ink);
  background: var(--yolk); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--ink);
  padding: .2em .7em .25em; transform: rotate(3deg);
}
.trail-card h3 { font-size: 1.7rem; margin-bottom: .3em; }
.trail-card h3 .linklike { font-family: inherit; }
.trail-card p:last-child { color: var(--ink-soft); }
.trail-card.is-hot { background: var(--comb); box-shadow: 0 6px 0 var(--ink); }
.trail-card.is-hot .trail-date { top: -26px; font-size: 1.65rem; background: var(--night); color: var(--yolk); transform: rotate(-3deg); }
.trail-card.is-hot h3, .trail-card.is-hot p:last-child { color: #fff; }

.take-example { grid-column: 2; margin: 0; max-width: 290px; justify-self: center; transform: rotate(2deg); }
.take-example video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.take-example figcaption { font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; color: var(--plum); text-align: center; margin: .5rem -2.5rem 0; }
.take-example figcaption .kev { font-family: var(--font-body); font-size: .8em; }
.trail-chicken { grid-column: 2; justify-self: start; width: 110px; }
.trail-chicken .chicken { transform: scaleX(-1); } /* face the card */
.trail-chicken .chicken { width: 100%; height: auto; }

.how-cta { display: flex; justify-content: center; margin-top: 3.4rem; }

@media (max-width: 760px) {
  .trail { max-width: 460px; }
  .trail > li { grid-template-columns: 1fr; row-gap: 1.4rem; padding-bottom: 88px; }
  .trail > li > * { grid-row: auto; }
  .trail > li:nth-child(n) .trail-card { grid-column: 1; }
  .trail > li:nth-child(n):not(:last-child)::after { transform: translateX(-50%); height: 72px; bottom: 8px; }
  .take-example { grid-column: 1; max-width: 280px; }
  .trail-chicken { display: none; }
}

/* ---------- who can join ---------- */
#who { padding-bottom: 88px; }
.marquee { margin: .6rem 0 0; display: grid; gap: .9rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 55s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { list-style: none; display: flex; gap: .8rem; padding-right: .8rem; }
.marquee li { white-space: nowrap; font-weight: 700; font-size: 1.02rem; padding: .5em 1.1em; border-radius: 999px; border: 2px solid rgba(243,236,220,.28); color: var(--on-night); background: rgba(255,255,255,.04); }
.marquee li:nth-child(5n+2) { border-color: var(--yolk); color: var(--yolk); }
.marquee li:nth-child(7n+4) { border-color: var(--comb); color: #ffb08f; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- golden rules: one pinned note, not five boxes ---------- */
.golden {
  list-style: none; position: relative; max-width: 760px; margin: 0 auto;
  padding: 1.2rem 2.2rem 1.1rem; transform: rotate(-.5deg);
}
.golden::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,197,61,.75); border-left: 2px dashed rgba(34,26,53,.15); border-right: 2px dashed rgba(34,26,53,.15);
}
.golden li { display: grid; grid-template-columns: 44px 1fr; column-gap: 1.1rem; align-items: start; padding: 1.1rem 0; }
.golden li + li { border-top: 2.5px dotted var(--paper-line); }
.golden h3 { font-size: 1.25rem; margin: .45rem 0 .2rem; }
/* numbers as golden eggs */
.g-num {
  position: relative; width: 38px; height: 48px; display: grid; place-items: center; padding-top: 4px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 2.5px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff3c4 0%, #ffd45c 32%, #f5b124 70%, #d98d12 100%);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.g-num::after { content: ''; position: absolute; top: 8px; left: 8px; width: 7px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.85); transform: rotate(20deg); }
.golden li:nth-child(odd) .g-num { transform: rotate(-8deg); }
.golden li:nth-child(even) .g-num { transform: rotate(7deg); }
.golden li:hover .g-num { animation: wobble .5s ease-in-out; }
@keyframes wobble { 0%,100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 10deg; } }

.golden-wrap { position: relative; max-width: 760px; margin: 4.2rem auto 0; }
.golden-chicken { position: absolute; z-index: 2; top: -78px; right: -34px; width: 104px; }
.golden-chicken .chicken { width: 100%; height: auto; }
.golden-chicken .ck-shadow { display: none; }
.golden-bubble {
  position: absolute; right: 92%; top: 14px; white-space: nowrap;
  font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.05; color: var(--ink);
  background: var(--feather); border: 2.5px solid var(--ink); border-radius: 16px; padding: .3em .7em;
  box-shadow: 0 3px 0 var(--ink); transform: rotate(-6deg);
}
.golden-bubble::after {
  content: ''; position: absolute; right: -10px; bottom: 10px; width: 14px; height: 14px; background: var(--feather);
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg);
}
.golden p { font-size: .98rem; color: var(--ink-soft); }
.golden p strong { color: var(--ink); }

/* ---------- recording guide ---------- */
.rec-example {
  display: grid; grid-template-columns: 1fr minmax(0, 680px) 1fr; grid-template-areas: "l video r" ". cap .";
  align-items: center; column-gap: 1.2rem; max-width: 1100px; margin: 0 auto 3.4rem;
}
.rec-video {
  grid-area: video; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 30px 50px -25px rgba(34,26,53,.5); transform: rotate(-.6deg);
}
.rec-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rec-note { position: relative; z-index: 2; font-family: var(--font-hand); font-size: 1.55rem; line-height: 1.1; color: var(--plum); }
.rec-note svg { display: block; width: 84px; height: 60px; fill: none; stroke: var(--comb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rec-note-l { grid-area: l; align-self: start; margin-top: 1.5rem; text-align: right; transform: rotate(-4deg); }
.rec-note-l svg { margin: .2rem -14px 0 auto; }
.rec-note-r { grid-area: r; align-self: end; margin-bottom: 1.5rem; transform: rotate(3deg); }
.rec-note-r svg { margin: 0 0 .2rem -14px; }
.rec-example figcaption { grid-area: cap; text-align: center; font-size: .86rem; color: var(--ink-soft); margin-top: 1rem; }

.spec-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 2.6rem; }
.spec-strip p { background: var(--feather); border: 2px solid var(--ink); border-radius: 999px; padding: .5em 1.1em .5em .55em; font-weight: 600; font-size: .95rem; }
.spec-label { display: inline-block; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; background: var(--night); color: var(--yolk); padding: .35em .7em; border-radius: 999px; margin-right: .55em; vertical-align: .1em; }
.spec-note { color: var(--ink-soft); font-size: .9rem; max-width: 560px; margin: 1.2rem auto 0; text-align: center; }

/* ---------- faq ---------- */
.faq { display: grid; gap: .7rem; margin-top: 2rem; }
.faq details { background: var(--feather); border: 2px solid var(--ink); border-radius: var(--radius-sm); box-shadow: 0 3px 0 var(--ink); }
.faq summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 1.04rem; padding: 1rem 3rem 1rem 1.2rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.6rem; color: var(--comb); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
.faq-more { text-align: center; color: var(--ink-soft); margin-top: 1.8rem; }

/* ---------- final ---------- */
.final { padding: 96px 0 104px; }
.final-chicken { width: 140px; margin: 0 auto 1rem; }
.final-chicken .chicken { width: 100%; height: auto; }

/* ---------- footer ---------- */
.footer { background: #120d24; color: var(--on-night-soft); padding: 2.4rem 0 7rem; font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo { display: inline-block; margin-bottom: .8rem; }
.footer-logo img { height: 40px; width: auto; }
.footer-links { display: flex; gap: 1.2rem; align-items: flex-start; }
.footer a { color: var(--on-night); }

/* ---------- sticky bar ---------- */
.sticky-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 60;
  width: min(calc(100% - 32px), 620px);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--night); color: var(--on-night); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: .55rem .6rem .55rem 1.3rem;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.5);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
}
.sticky-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sticky-bar p { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-sub { color: var(--on-night-soft); }
@media (max-width: 520px) { .sticky-sub { display: none; } }

/* ---------- modal ---------- */
.modal {
  border: 0; padding: 0; background: transparent; margin: auto;
  width: min(100% - 24px, 640px); max-height: calc(100dvh - 24px);
  color: var(--ink);
}
.modal::backdrop { background: rgba(18, 13, 36, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal[open] { animation: pop .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-inner { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink); padding: 2rem 2rem 1.8rem; max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain; }
.modal h2 { font-size: 2.3rem; margin-bottom: .2em; }
.modal-lede { color: var(--ink-soft); margin-bottom: 1.4rem; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--feather); font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.modal-close:hover { background: var(--yolk); }
.hp { position: absolute; left: -9999px; }

fieldset { border: 0; border-top: 2px dashed var(--paper-line); padding: 1.2rem 0 .4rem; margin: 0; }
legend { font-family: var(--font-display); font-size: 1.2rem; padding-right: .6rem; }
.field { margin-bottom: 1rem; }
.field label, .label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.req { color: var(--comb); }
.opt { font-weight: 600; font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-left: .3em; }
.hint { font-size: .84rem; color: var(--ink-soft); margin-top: .35rem; }
.hint.top { margin: -.1rem 0 .8rem; }
input[type=text], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: .7em .85em;
  transition: box-shadow .15s, border-color .15s;
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221a35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85em center; padding-right: 2.2em; cursor: pointer; }
input::placeholder, textarea::placeholder { color: #9b91ad; }
input[type=text]:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,197,61,.6); }
.was-validated :invalid:not(fieldset) { border-color: var(--comb); box-shadow: 0 0 0 3px rgba(254,93,38,.22); }
textarea { resize: vertical; min-height: 80px; }

.level-help { background: var(--paper-2); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .9rem; font-size: .88rem; display: grid; gap: .25rem; }
.inst-rows { display: grid; gap: .6rem; }
.inst-row { display: grid; grid-template-columns: 1fr 160px 36px; gap: .5rem; align-items: center; }
.row-remove { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--feather); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.row-remove:hover { background: #ffd9c9; }
.add-row { margin-top: .7rem; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink); background: transparent; border: 2px dashed var(--ink-soft); border-radius: 12px; padding: .55em 1em; cursor: pointer; width: 100%; }
.add-row:hover { border-color: var(--comb); color: var(--comb); }
.add-row[hidden] { display: none; }

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; height: 100%; border: 2px solid var(--ink); border-radius: 14px; padding: .75rem .9rem; background: #fff; transition: background .15s, box-shadow .15s; }
.choice strong { display: block; font-size: .96rem; }
.choice em { font-style: normal; font-size: .82rem; color: var(--ink-soft); }
.choice input:checked + span { background: var(--yolk); box-shadow: 0 3px 0 var(--ink); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(254,93,38,.45); }
.pref { display: inline-block; vertical-align: .12em; margin-left: .35em; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--comb); color: #fff; padding: .2em .55em; border-radius: 999px; }
.choice em { display: block; margin-top: .2rem; line-height: 1.4; }
.was-validated .choice-row:has(input:invalid) span { border-color: var(--comb); }

.agree { display: grid; gap: .7rem; padding-bottom: 1.3rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input[type=checkbox] {
  flex: none; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
  border: 2.5px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center;
}
.check input[type=checkbox]:checked { background: var(--moss); }
.check input[type=checkbox]:checked::after { content: ''; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.check input[type=checkbox]:focus-visible { outline: 3px solid var(--comb); outline-offset: 2px; }
.check span { line-height: 1.5; }
.was-validated .check input:invalid { border-color: var(--comb); box-shadow: 0 0 0 3px rgba(254,93,38,.22); }

.form-error { background: #ffe1d6; border: 2px solid var(--comb); border-radius: 12px; padding: .7rem 1rem; font-size: .92rem; font-weight: 600; margin-bottom: 1rem; }
#submit-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.success { text-align: center; padding: 1rem 0 .4rem; }
.success-chicken { width: 150px; margin: 0 auto .6rem; }
.success-chicken .chicken { width: 100%; height: auto; }
.success p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.success .ticks { text-align: left; max-width: 420px; margin: 0 auto 1.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .rec-example { grid-template-columns: 1fr 1fr; grid-template-areas: "video video" "l r" "cap cap"; row-gap: 1rem; max-width: 640px; }
  .rec-note { margin: 0 !important; text-align: center !important; font-size: 1.3rem; }
  .rec-note svg { display: none; }
}
@media (max-width: 820px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art .chicken { width: 200px; }
  .hero-art { padding-top: 58px; }
  .bubble { left: 50%; top: 0; transform: translateX(-100%) rotate(-5deg); font-size: 1.35rem; animation: none; }
  .moon { width: 90px; height: 90px; right: 6%; top: 150px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .player { flex-direction: column; align-items: stretch; padding: 1rem; }
  .play-btn { position: absolute; right: 14px; top: 14px; width: 54px; height: 54px; }
  .play-btn svg { width: 22px; height: 22px; }
  .wave-bars { gap: 1px; }
  .player-meta { padding-right: 64px; flex-direction: column; align-items: flex-start; gap: .2rem; }
  .episode { margin-bottom: 1.3rem; }
  .spec-strip p { border-radius: 16px; width: 100%; padding: .7em .9em; }
  .brand-logo { height: 32px; }
  .nav-inner { gap: .8rem; }
  .storybook { padding: 2.2rem 1.4rem 6.5rem; }
  .storybook h2 { max-width: 85%; }
  .sb-sky { width: 80px; top: 18px; right: 16px; }
  .sb-notes { display: none; }
  .modal-inner { padding: 1.5rem 1.1rem 1.3rem; border-radius: 20px; }
  .modal h2 { font-size: 1.9rem; }
  .inst-row { grid-template-columns: 1fr 116px 36px; }
  .choice-row { grid-template-columns: 1fr; }
  .golden { padding: 1rem 1.2rem .9rem; transform: none; }
  .golden li { grid-template-columns: 34px 1fr; column-gap: .9rem; }
  .g-num { width: 32px; height: 41px; font-size: 1rem; padding-top: 5px; }
  .g-num::after { top: 5px; left: 6px; width: 4px; height: 7px; }
  .golden-chicken { width: 76px; top: -58px; right: -6px; }
  .golden-bubble { font-size: 1.1rem; }
}