/* Potato Princess Press. The palette and type are the book cover's
   (tools/book/cover.js): cream ground, brown ink, gold, the potato's skin. */
:root {
  --cream: #fbf3dd;
  --card: #fffaf0;
  --ink: #2b1d12;
  --ink-soft: #6b5644;
  --gold: #f2c14e;
  --skin: #e3b774;
  --blush: #f3a3a0;
  --leaf: #a6cf86;
  --sky: #9ccbe9;     /* with gold, the colours found words take on the play page */
  --peach: #f5a565;
  --lilac: #cdb2e8;
  --pink: #f5a3c7;    /* POTATO, the play page's stowaway */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Avenir Next", "Nunito Sans", "Helvetica Neue", sans-serif;
  --stroke: 3px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 900; letter-spacing: -.015em; margin: 0; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Buttons: the cover's chunky outlined card, with a hard ink shadow. */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-block; padding: .7rem 1.25rem;
  font: 700 1rem/1.2 var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--card); border: var(--stroke) solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-gold { background: var(--gold); }
.btn-small { padding: .5rem .9rem; font-size: .9375rem; border-radius: 12px; }
.btn[aria-pressed="true"] { background: var(--gold); }

/* ---------- Masthead ---------- */
/* The bar stays at the top while you scroll. Once the page moves under it,
   it slims down: its cream backing shortens and gains an ink rule, and the
   logo and nav slide up into it (the logo shrinks, or fades out where the
   nav sits on a row of its own). The bar's own box never changes size, so
   the page under it doesn't jump; only the backing and the contents move,
   and the empty part lets clicks through.
   site.js measures --lift (how far the contents rise), --shrink (how much
   the backing loses) and --bar (the slim bar's height, so a jump to a
   section lands just below it). */
html { scroll-padding-top: var(--bar, 4rem); }
.topbar { position: sticky; top: 0; z-index: 10; pointer-events: none; }
.topbar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 100%; z-index: -1;
  background: var(--cream); border-bottom: var(--stroke) solid transparent;
  transition: height .35s cubic-bezier(.3, .8, .3, 1), border-color .25s, box-shadow .25s;
}
.topbar.stuck::before { height: calc(100% - var(--shrink, 0px));
                        border-bottom-color: var(--ink); box-shadow: 0 4px 0 rgba(43, 29, 18, .08); }
.masthead {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem;
  padding-block: 1.4rem;
  transition: transform .35s cubic-bezier(.3, .8, .3, 1);
}
.topbar.stuck .masthead { transform: translateY(calc(-1 * var(--lift, 0px))); }
.masthead a { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none;
        font: 900 1.35rem/1 var(--serif); letter-spacing: -.01em;
        transform-origin: left center; transition: transform .35s cubic-bezier(.3, .8, .3, 1), opacity .25s; }
.topbar.stuck .logo { transform: scale(.86); }
.topbar.two-row .logo { transform-origin: center; }
.topbar.two-row.stuck .logo { transform: translateY(-.4rem) scale(.9); opacity: 0; pointer-events: none; }
.logo i, .footer-name i { font-weight: 700; }
.logo-crown { height: 2.15rem; width: auto; flex: none; }
.masthead nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-weight: 600; }
.masthead nav a { text-decoration: none; padding-block: .2rem; border-bottom: 2px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--gold); }

/* ---------- Hero: the playable cover card ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(1.5rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem);
}
.hero h1 { font-size: clamp(2.8rem, 1.5rem + 4.8vw, 5.4rem); line-height: .95; letter-spacing: -.025em; }
.hero .lede { font-size: 1.1875rem; max-width: 34em; margin-top: 1.5rem; }
.hint {
  margin: 1.5rem 0 1.75rem; padding-left: 1.6rem; position: relative;
  font: italic 400 1.125rem/1.45 var(--serif);
}
.hint::before {
  content: ""; position: absolute; left: .15rem; top: .45em; width: .6rem; height: .6rem;
  background: var(--gold); outline: 2px solid var(--ink); transform: rotate(45deg);
}
.hint.done::before { background: var(--ink); }
.hero-art { margin: 0; }
.hero-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.bubble { font-family: var(--serif); font-style: italic; }

/* The hero potato. Its drawing is shared with the cover through <use>, so
   the blink is switched on with custom properties, which inherit into the
   copy: the cover potato never blinks.
   - It hops when a word is found or it is clicked, and action lines burst
     out beside it: a layer of their own that rises with it but doesn't fall.
   - It blinks now and then (once, and a double blink later, on a 16s loop),
     and once more when the mouse moves onto it. */
.hero-potato { cursor: pointer; --blink: blink 16s 4s infinite; }
.hero-art.hop .hero-potato { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
/* Squash and stretch, on a layer inside the hop so the hop (which the action
   lines follow) keeps its timing. From its base: long and thin as it shoots
   up, round at the top, flattened when it lands, then a wobble back. */
.hero-squash { transform-origin: 116px 138px; }
.hero-art.hop .hero-squash { animation: squash .6s ease-in-out both; }

/* The speech bubble, about its tail's tip. When the potato jumps it gets
   jostled a beat late; when its words change it pops out again from the
   tail and the new words fade in. */
.speech, .speech-pop { transform-origin: 386px 140px; }
.hero-art.hop .speech { animation: jostle .55s ease-in-out .06s both; }
.hero-art.say .speech-pop { animation: pop .42s cubic-bezier(.3, 1.6, .5, 1) both; }
.hero-art.say .speech-pop .bubble { animation: say-in .2s ease-out both; }
.hero-art.peek .hero-potato { --blink-now: blink-once .24s ease-in-out; }

/* The action lines, on the hero and on the sleeping potato in About. They
   rise with the potato (by --rise, its jump height), so they never touch it,
   then stay at the top of the jump as it falls. Each grows out from its inner
   end (dashoffset 1 to 0, with pathLength 1), drifts outward, then drains
   away from the back (0 to -1). */
.sparks { pointer-events: none; }
:is(.hero-art.hop, .about-potato.jump) .sparks { animation: rise .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.sparks path { opacity: 0; stroke-width: 3.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
:is(.hero-art.hop, .about-potato.jump) .sparks path { animation: action .6s cubic-bezier(.2, .7, .3, 1) both; }
:is(.hero-art.hop, .about-potato.jump) .sparks path:nth-child(2) { animation-delay: .03s; }
:is(.hero-art.hop, .about-potato.jump) .sparks path:nth-child(3) { animation-delay: .06s; }
.eyes { animation: var(--blink, none), var(--blink-now, none); transform-box: fill-box; transform-origin: center; }

/* Arms and crown, also through the shared drawing: on a jump both arms
   swing and settle while the crown lifts off the head and lands a beat late. Each part
   turns about its own joint: the shoulders, and the crown's base. */
.hero-art.hop .hero-potato { --arm-r-jump: arm-r-jump .6s ease-in-out; --arm-l-jump: arm-l-jump .6s ease-in-out;
                             --crown-jump: crown-jump .65s ease-in-out; }
.arm-r { animation: var(--arm-r-jump, none); transform-box: fill-box; transform-origin: 0% 100%; }
.arm-l { animation: var(--arm-l-jump, none); transform-box: fill-box; transform-origin: 100% 0%; }
.crown { animation: var(--crown-jump, none); transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-34px); } 100% { transform: translateY(0); } }
@keyframes squash {
  0%, 40%, 100% { transform: none; }
  8% { transform: scale(.93, 1.08); }
  22% { transform: scale(1.03, .97); }
  52% { transform: scale(.96, 1.05); }
  60% { transform: scale(1.12, .87); }
  72% { transform: scale(1.05, .95); }
  84% { transform: scale(.98, 1.02); }
}
@keyframes jostle {
  0%, 100% { transform: none; }
  25% { transform: translateY(-6px) rotate(-2deg); }
  55% { transform: translateY(1px) rotate(1.5deg); }
  80% { transform: rotate(-.5deg); }
}
@keyframes pop { 0% { transform: scale(.82); } 100% { transform: none; } }
@keyframes say-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rise { 0% { transform: translateY(0); } 40%, 100% { transform: translateY(var(--rise, -34px)); } }
@keyframes action {
  0% { opacity: 0; stroke-dashoffset: 1; stroke-width: 2.4; transform: translate(0, 0); }
  10% { opacity: 1; }
  45% { stroke-dashoffset: 0; stroke-width: 4.2; }
  85% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -1; stroke-width: 2; transform: translate(var(--dx), var(--dy)); }
}
@keyframes blink {
  0%, 44%, 45.6%, 93%, 94.4%, 95.8%, 100% { transform: scaleY(1); }
  44.8%, 93.7%, 95.1% { transform: scaleY(.1); }
}
@keyframes arm-r-jump {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  45% { transform: rotate(-9deg); }
  72% { transform: rotate(6deg); }
  88% { transform: rotate(-2deg); }
}
@keyframes arm-l-jump {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-6deg); }
  45% { transform: rotate(20deg); }
  72% { transform: rotate(-5deg); }
  88% { transform: rotate(2deg); }
}
@keyframes crown-jump {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(2px) rotate(3deg); }
  45% { transform: translateY(-9px) rotate(-9deg); }
  70% { transform: translateY(1px) rotate(5deg); }
  85% { transform: translateY(0) rotate(-2deg); }
}
@keyframes blink-once { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-art.hop .hero-potato, :is(.hero-art.hop, .about-potato.jump) :is(.sparks, .sparks path),
  .hero-art.hop :is(.hero-squash, .speech), .hero-art.say :is(.speech-pop, .bubble) { animation: none; }
  .hero-potato, .hero-art.peek .hero-potato, .hero-art.hop .hero-potato {
    --blink: none; --blink-now: none; --arm-r-jump: none; --arm-l-jump: none; --crown-jump: none;
  }
}

/* ---------- Boards (hero, cover, play) ---------- */
.board { touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.board text { font-family: var(--sans); font-weight: 600; fill: var(--ink);
              text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.board .trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.board .trail.gold { stroke: var(--gold); }
.board .trail.sky { stroke: var(--sky); }
.board .trail.peach { stroke: var(--peach); }
.board .trail.lilac { stroke: var(--lilac); }
.board .trail.live { stroke: var(--ink); stroke-opacity: .16; }
.board .trail.miss { stroke: var(--blush); stroke-opacity: .9; animation: fade .5s ease-in .1s forwards; }
.board .trail.shown { stroke: var(--ink); stroke-opacity: .13; }
.board .trail.leaf { stroke: var(--leaf); }   /* RADHIKA, the hidden word */
.board .trail.pink { stroke: var(--pink); }
.board .ring { fill: none; stroke: var(--ink); }
/* The letter under the mouse, before a drag starts: a touch bolder, on a
   faint disc. */
.board .hover-dot { fill: var(--ink); fill-opacity: .07; pointer-events: none; }
.board .hover-dot:not(.on) { display: none; }
.board text.lit { font-weight: 700; }
/* Confetti when the play page is solved, over everything. */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
.board .trail.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .topbar::before, .masthead, .logo { transition: none; }
  .board .trail.draw { animation: none; stroke-dashoffset: 0; }
  .board .trail.miss { animation-duration: .01s; animation-delay: .4s; }
}

/* ---------- The book ---------- */
.book {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: var(--stroke) solid var(--ink);
}
.book-cover { display: flex; justify-content: center; container-type: inline-size; --u: min(1cqw, .25rem); }

.cover {
  width: calc(100 * var(--u)); aspect-ratio: 6 / 9;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)); position: relative;
  background: var(--cream);
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset calc(4 * var(--u)) 0 0 calc(-2.6 * var(--u)) var(--gold), inset calc(5 * var(--u)) 0 calc(3 * var(--u)) calc(-3 * var(--u)) rgba(43, 29, 18, .18),
              0 1px 0 var(--ink), 14px 18px 0 -2px var(--skin), 14px 18px 0 0 var(--ink);
  outline: var(--stroke) solid var(--ink);
  transform: rotate(-2deg);
}
.cover-eyebrow { font: 600 calc(2.6 * var(--u))/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.cover-title { font-family: var(--serif); text-align: center; line-height: 1; margin-top: calc(4 * var(--u)); }
.cover-title span { display: block; }
.t-top { font-size: calc(13.5 * var(--u)); font-weight: 400; letter-spacing: -.01em; }
.t-joint { display: flex !important; align-items: center; justify-content: center; gap: calc(3 * var(--u));
           font-size: calc(8.5 * var(--u)); font-style: italic; font-weight: 700; margin-top: calc(1 * var(--u)); }
.t-joint::before, .t-joint::after { content: ""; width: calc(16 * var(--u)); height: calc(.6 * var(--u)); background: var(--gold); }
/* POTATOES rides an arch, as on the printed cover. */
.cover-potatoes { width: calc(100% + 4 * var(--u)); display: block; margin-top: calc(3 * var(--u)); overflow: visible; }
.cover-potatoes text { font-family: var(--serif); font-weight: 900; font-size: 112px; fill: var(--ink); letter-spacing: -1px; }
.cover-art { width: 100%; margin-top: calc(1 * var(--u)); }
.cover-imprint { margin-top: auto; padding-top: calc(2 * var(--u)); display: grid; font: 400 calc(2.3 * var(--u))/1.15 var(--sans); }
.cover-imprint span:first-child { text-transform: uppercase; }

.series { font: italic 400 1.125rem/1.4 var(--serif); color: var(--ink-soft); margin-bottom: .4rem; }
.book .blurb { font-size: 1.1875rem; margin-top: 1.25rem; max-width: 34em; }
.specs { margin: 1.75rem 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.specs div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: .6rem;
             border-bottom: 1px solid rgba(43, 29, 18, .22); }
.specs dt { font-family: var(--serif); font-weight: 700; }
.specs dd { margin: 0; }
.promise { font: italic 400 1.125rem/1.5 var(--serif); margin-bottom: 1.75rem; max-width: 32em; }

/* ---------- Coming next ---------- */
.next { padding-bottom: clamp(3rem, 7vw, 5rem); }
.next h3 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.next-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.ghost {
  padding: 1.5rem 1.5rem 1.25rem; border: 2px dashed var(--ink); border-radius: 18px;
  display: flex; flex-direction: column; gap: .6rem;
}
.ghost h4 { font-size: 1.3rem; line-height: 1.15; }
.ghost .status { margin-top: auto; padding-top: .5rem; font: italic 400 1.0625rem/1.4 var(--serif); color: var(--ink-soft); }

/* ---------- Play a page ---------- */
.play { background: var(--card); border-block: var(--stroke) solid var(--ink); padding-block: clamp(3rem, 7vw, 5rem); }
.play-head { max-width: 44rem; }
.play-head p { margin-top: 1rem; font-size: 1.125rem; }
.play-body {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 2.25rem;
}
.board-card {
  background: #fff; border: var(--stroke) solid var(--ink); border-radius: 22px;
  padding: clamp(.5rem, 2vw, 1.25rem); box-shadow: 6px 6px 0 var(--ink);
}
#playBoard { display: block; width: 100%; height: auto; }

/* The princess behind the board. She waits hidden behind its top left corner
   and, on .peeking, rises above its edge and leans out to the left; her
   bubble pops up beside her, clear of the board. Where there's room to the
   left of the board, she comes out sideways instead, with her bubble up to
   her left. Like the other potatoes she squashes and stretches (.peek-squash,
   from her base) and her crown lifts off and lands a beat late; on .ducking,
   as she drops back, she gathers herself and her crown is left behind for a
   moment. */
.board-wrap { position: relative; --peek-w: clamp(4.5rem, 12vw, 6rem); }
.board-wrap .board-card { position: relative; z-index: 1; }
.peeker {
  position: absolute; z-index: 0; left: 1.25rem; top: .25rem; width: var(--peek-w); height: auto;
  overflow: visible; transform-origin: 50% 100%; pointer-events: none;
  transition: transform .3s cubic-bezier(.5, 0, .9, .5) .1s;
}
.peek-squash { transform-box: fill-box; transform-origin: 50% 100%; }
.board-wrap.peeking .peeker {
  transform: translate(-12%, -88%) rotate(-12deg);
  --blink-now: blink-once .24s ease-in-out 1s; --crown-jump: crown-jump .65s ease-in-out .12s;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.board-wrap.peeking .peek-squash { animation: peek-pop .7s ease-in-out both; }
.board-wrap.ducking .peek-squash { animation: peek-duck .4s ease-in both; }
.board-wrap.ducking .peeker { --crown-jump: crown-duck .4s ease-in both; }
.peek-says {
  position: absolute; z-index: 2; left: calc(1.8rem + var(--peek-w)); bottom: calc(100% + .6rem);
  padding: .45rem .9rem; white-space: nowrap;
  background: #fffdf6; border: var(--stroke) solid var(--ink); border-radius: 14px;
  font: italic 700 1.125rem/1.2 var(--serif);
  transform-origin: 0% 100%; transform: scale(.6); opacity: 0;
  transition: transform .15s ease-in, opacity .15s ease-in;
}
/* The bubble's tail, pointing back at her: left, or down to the right when
   she's below it. */
.peek-says::after {
  content: ""; position: absolute; left: -.5rem; bottom: .4rem; width: .8rem; height: .8rem;
  background: inherit; border: inherit; border-width: 0 0 var(--stroke) var(--stroke); border-radius: 0 0 0 3px;
  transform: rotate(45deg);
}
.board-wrap.peeking .peek-says {
  transform: none; opacity: 1;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) .3s, opacity .1s linear .3s;
}
@media (min-width: 86rem) {
  .peeker { left: .5rem; top: 2.5rem; transform-origin: 100% 100%; }
  .board-wrap.peeking .peeker { transform: translate(-82%, 4%) rotate(-16deg); }
  .peek-says { left: auto; right: calc(100% + 1.1rem); bottom: auto; top: -2.6rem;
               width: max-content; max-width: 8rem; white-space: normal; text-align: center; transform-origin: 75% 100%; }
  .peek-says::after { left: auto; right: 1.3rem; bottom: -.5rem; border-width: 0 var(--stroke) var(--stroke) 0; border-radius: 0 0 3px 0; }
}
/* Popping out: stretched tall as she shoots up, flattened when she stops at
   the top, then a wobble back. */
@keyframes peek-pop {
  0% { transform: scale(.94, 1.06); }
  25% { transform: scale(.9, 1.12); }
  50% { transform: scale(1.1, .9); }
  68% { transform: scale(.97, 1.04); }
  84% { transform: scale(1.02, .98); }
  100% { transform: none; }
}
/* Ducking back: a crouch, then long and thin as she drops. */
@keyframes peek-duck {
  0% { transform: none; }
  30% { transform: scale(1.08, .9); }
  100% { transform: scale(.92, 1.1); }
}
@keyframes crown-duck {
  0%, 25% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-12px) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .peeker, .peek-says, .board-wrap.peeking :is(.peeker, .peek-says) { transition: none; }
  .board-wrap .peek-squash { animation: none; }
  .board-wrap .peeker { --blink-now: none !important; --crown-jump: none !important; }
}
.progress { font: 900 1.6rem/1.2 var(--serif); margin-bottom: 1rem; }
.wordlist {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1.25rem;
}
.wordlist li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
               padding-block: .3rem; border-bottom: 1px solid rgba(43, 29, 18, .18);
               font-weight: 600; letter-spacing: .04em; }
.wordlist li span { font: italic 400 .875rem/1 var(--serif); color: var(--ink-soft); letter-spacing: 0; }
.wordlist li.found b { text-decoration: line-through; text-decoration-color: var(--mark, var(--gold));
                       text-decoration-thickness: 4px; font-weight: 600; }
.aside-note { margin-top: 1.25rem; font: italic 400 1rem/1.5 var(--serif); color: var(--ink-soft); }
.aside-note.found { color: var(--ink); }
.aside-note:empty { display: none; }

.rules {
  list-style: none; counter-reset: r; padding: 0; margin: clamp(2rem, 5vw, 3rem) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem 2rem;
}
.rules li { counter-increment: r; position: relative; padding-left: 2.4rem; font-size: 1rem; }
.rules li::before {
  content: counter(r); position: absolute; left: 0; top: -.1rem;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink); font: 700 .95rem/1 var(--serif);
}

/* ---------- Themes ---------- */
.themes { padding-block: clamp(3rem, 7vw, 5rem); }
.themes > p:not(.theme-list) { margin-top: 1rem; max-width: 40rem; font-size: 1.125rem; }
.theme-list { margin-top: 2rem; font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.75 var(--serif); }
.theme-list span { white-space: nowrap; }
.theme-list span:not(:last-child)::after {
  content: ""; display: inline-block; width: .38em; height: .38em; margin: 0 .55em .12em;
  background: var(--gold); outline: 1.5px solid var(--ink); transform: rotate(45deg);
}
.theme-list .first { font-style: italic; font-weight: 700; }

/* ---------- About ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem); border-top: var(--stroke) solid var(--ink);
}
.about-copy p { margin-top: 1rem; font-size: 1.125rem; max-width: 36em; }
.about-potato { --rise: -16px; width: 100%; max-width: 22rem; justify-self: center; overflow: visible; cursor: pointer;
                 -webkit-tap-highlight-color: transparent; }

/* The sleeping potato. Asleep, it breathes (a slow squash and stretch from
   its base) and the Z's rise one after another. A click wakes it (.awake)
   and makes it jump (.jump, replayed on every click): it squashes, jumps and
   lands, the action lines burst out, its eyes snap open on its usual smile, the
   crown lifts off its head and lands a beat late, as on the hero potato,
   settling at the hero's slight tilt, and the Z's vanish. Then it nods off (.dozing): the
   eyes droop half shut, hold, close, the head dips and the crown flops back
   over with a wobble. Faces swap outright, never fade. Everything turns
   about points in the drawing's own units, so it moves the same in every
   browser. */
.sleeper { animation: breathe 3.6s ease-in-out infinite; transform-origin: 116px 140px; }
.about-potato.jump .sleeper { animation: startle .6s ease-out; }
.about-potato.dozing .sleeper { animation: nod .7s ease-in-out; }

.sleeper-crown { transform: rotate(-16deg); transform-origin: 116px 20px;
                 transition: transform .45s cubic-bezier(.35, 1.7, .55, 1) .2s; }
.about-potato.awake .sleeper-crown { transform: rotate(-5deg); transition: none; }
.about-potato.jump .sleeper-crown { animation: crown-wake .65s ease-in-out; }
.about-potato.jump.again .sleeper-crown { animation: crown-hop .65s ease-in-out; }  /* already awake: from its waking tilt */

.sleeper .open, .sleeper .smile { display: none; }
.about-potato:is(.awake, .dozing) :is(.open, .smile) { display: inline; }
.about-potato:is(.awake, .dozing) :is(.shut, .snore) { display: none; }
.sleeper .open { transform-origin: 116px 66px; }
.about-potato.awake .open { animation: eyes-open .16s ease-out; }
.about-potato.dozing .open { animation: eyes-shut .6s ease-in forwards; }

.zzz { transition: opacity .4s .25s; }
.about-potato:is(.awake, .dozing) .zzz { opacity: 0; transition: opacity .1s; }
.zzz text { opacity: 0; animation: zz 3.6s ease-in-out infinite; }
.zzz text:nth-child(2) { animation-delay: .45s; }
.zzz text:nth-child(3) { animation-delay: .9s; }

@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(.99, 1.03); }
}
@keyframes startle {
  0% { transform: none; }
  14% { transform: scale(1.05, .93); }
  42% { transform: translateY(-16px) scale(.97, 1.04); }
  70% { transform: scale(1.03, .97); }
  85% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}
@keyframes crown-wake {
  0% { transform: rotate(-16deg); }
  20% { transform: translateY(2px) rotate(-13deg); }
  45% { transform: translateY(-9px) rotate(-14deg); }
  70% { transform: translateY(1px) rotate(0); }
  85% { transform: translateY(0) rotate(-7deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes crown-hop {
  0%, 100% { transform: rotate(-5deg); }
  20% { transform: translateY(2px) rotate(-2deg); }
  45% { transform: translateY(-9px) rotate(-14deg); }
  70% { transform: translateY(1px) rotate(0); }
  85% { transform: translateY(0) rotate(-7deg); }
}
@keyframes nod {
  0%, 100% { transform: none; }
  55% { transform: translateY(4px) scale(1.01, .98); }
}
@keyframes eyes-open { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes eyes-shut {
  0% { transform: scaleY(1); }
  30%, 65% { transform: scaleY(.45); }
  100% { transform: scaleY(.1); }
}
@keyframes zz {
  0% { opacity: 0; transform: translate(-4px, 6px); }
  15% { opacity: 1; transform: translate(0, 0); }
  65% { opacity: 1; transform: translate(3px, -5px); }
  85%, 100% { opacity: 0; transform: translate(5px, -9px); }
}
@media (prefers-reduced-motion: reduce) {
  .sleeper, .about-potato:is(.awake, .dozing, .jump) :is(.sleeper, .open, .sleeper-crown),
  .about-potato.jump.again .sleeper-crown, .zzz text { animation: none; }
  .zzz text { opacity: 1; }
  .sleeper-crown, .about-potato.awake .sleeper-crown, .zzz, .about-potato:is(.awake, .dozing) .zzz { transition: none; }
}

/* ---------- Get a copy ---------- */
.buy { background: var(--gold); border-block: var(--stroke) solid var(--ink); }
.buy-inner { padding-block: clamp(3rem, 7vw, 4.5rem); max-width: 48rem; text-align: center; }
.buy-inner p { margin-top: 1rem; font-size: 1.125rem; }
.buy .email { margin-top: 1.5rem; font: 900 clamp(1.25rem, 1rem + 1.6vw, 2rem)/1.2 var(--serif); overflow-wrap: anywhere; }
.buy .email a { text-decoration-color: var(--ink); }
.buy .small { font-size: 1rem; margin-top: 1.5rem; }
.buy a:hover { text-decoration-color: var(--card); }

/* ---------- Footer ---------- */
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem;
          padding-block: 2rem 2.5rem; color: var(--ink-soft); font-size: .9375rem; }
.footer-name { font: 900 1.15rem/1 var(--serif); color: var(--ink); }

/* ---------- Narrow screens ---------- */
@media (max-width: 52rem) {
  .hero, .book, .about, .play-body { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 34rem; margin-inline: auto; width: 100%; }
  .book-cover { order: -1; }
  .book-cover { --u: min(.8cqw, .2rem); }
}
@media (max-width: 30rem) {
  .masthead { justify-content: center; text-align: center; gap: .5rem 2rem; padding-block: .8rem; }
  .masthead nav { justify-content: center; gap: .3rem 1rem; }
  .specs div { grid-template-columns: 5.5rem 1fr; gap: .75rem; }
  .wordlist { gap: .1rem .9rem; }
}