/* ==========================================================================
   Keen Mind Books
   A crayon-box palette on paper: thick ink outlines, flat fills, hard shadows.
   The look is the product - essentially a page out of a colouring book.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* ink + paper */
  --ink:        #181630;
  --ink-soft:   #4b4a6b;
  --paper:      #fffbf2;
  --white:      #ffffff;
  --dot:        rgba(24, 22, 48, 0.06);

  /* the crayon box */
  --sun:        #ffc531;
  --tangerine:  #ff9a3c;
  --coral:      #ff6b5e;
  --berry:      #f8479a;
  --grape:      #8257e6;
  --sky:        #24c1dd;
  --leaf:       #34c77b;

  /* one accent per block; components read these, never the raw colours */
  --accent:     var(--sun);
  --on-accent:  var(--ink);
  --wash:       color-mix(in srgb, var(--accent) 14%, var(--white));

  --line:       3px;
  --radius:     22px;
  --radius-sm:  14px;
  --pop:        7px 7px 0 var(--ink);
  --pop-sm:     4px 4px 0 var(--ink);

  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, "Segoe UI", sans-serif;

  --gutter:     clamp(16px, 4vw, 32px);
  --bay:        clamp(60px, 9vw, 112px);
}

/* accent classes - drop one on any block to recolour everything inside it */
.a-sun       { --accent: var(--sun);       --on-accent: var(--ink); }
.a-tangerine { --accent: var(--tangerine); --on-accent: var(--ink); }
/* Coral and berry are mid-tone brights: white on them lands at 2.8:1 and 3.3:1,
   which is under the bar for small text. Ink gets both above 5:1. */
.a-coral     { --accent: var(--coral);     --on-accent: var(--ink); }
.a-berry     { --accent: var(--berry);     --on-accent: var(--ink); }
.a-grape     { --accent: var(--grape);     --on-accent: var(--white); }
.a-sky       { --accent: var(--sky);       --on-accent: var(--ink); }
.a-leaf      { --accent: var(--leaf);      --on-accent: var(--ink); }

/* --wash has to be restated here, not just on :root. A custom property inherits
   the value it computed to where it was declared, so a --wash defined on :root
   is mixed from the root's --accent and stays that colour no matter which a-*
   class a section carries. */
.a-sun, .a-tangerine, .a-coral, .a-berry, .a-grape, .a-sky, .a-leaf {
  --wash: color-mix(in srgb, var(--accent) 14%, var(--white));
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 0.5vw + 15px, 18px);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 800; }

:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 200;
}
.skip:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- layout -- */
.wrap { width: min(1160px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { width: min(780px, 100%); }

.bay { padding-block: var(--bay); }

.band {
  background: var(--accent);
  color: var(--on-accent);
  border-block: var(--line) solid var(--ink);
}
.band--wash { background: var(--wash); color: var(--ink); }

.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-soft); max-width: 62ch; }
.band .lede, .band--wash .lede { color: inherit; opacity: 0.92; }

.section-head { max-width: 66ch; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head--centre { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; margin-bottom: 18px;
  background: var(--accent); color: var(--on-accent);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--pop-sm);
  rotate: -1.5deg;
}
.band .kicker { background: var(--white); color: var(--ink); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1;
  padding: 16px 26px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--white); color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--pop);
  transition: translate 120ms ease, box-shadow 120ms ease;
}
.btn:hover { translate: -2px -2px; box-shadow: 9px 9px 0 var(--ink); }
.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--ink); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
/* Every button here is a light fill inside an ink outline with an ink offset
   shadow. Fill it with ink and all three collapse into one flat shape - so no
   variant below uses --ink as its background. */
.btn--buy { background: var(--sun);   color: var(--ink); }
.btn--go  { background: var(--grape); color: var(--white); }
.btn--sm { padding: 11px 18px; font-size: 0.92rem; box-shadow: var(--pop-sm); }
.btn--sm:hover { box-shadow: 6px 6px 0 var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--white);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: clamp(22px, 3vw, 32px);
}

.grid { display: grid; gap: clamp(20px, 2.6vw, 30px); }
/* min() so a track can never insist on being wider than the screen it is on,
   and min-width:0 so a wide child (a table) scrolls itself rather than the page */
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid > * { min-width: 0; }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--line) solid var(--ink);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 13px; position: relative;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1; letter-spacing: -0.02em;
}
.brand__name span {
  display: block; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 5px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--font-display); font-weight: 500;
  text-decoration: none; padding: 9px 14px; border-radius: 999px;
  border: var(--line) solid transparent; white-space: nowrap;
}
.nav a:hover { background: color-mix(in srgb, var(--grape) 12%, var(--white)); border-color: var(--ink); }
.nav a[aria-current="page"] { background: var(--sun); border-color: var(--ink); }

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- hero -- */
.hero { padding-block: clamp(42px, 6vw, 82px) var(--bay); position: relative; overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(36px, 5vw, 60px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  position: relative; z-index: 1;
}
.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { font-style: normal; color: var(--grape); }

.trust {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 30px; padding: 0; list-style: none;
}
.trust li {
  font-family: var(--font-display); font-weight: 500; font-size: 0.88rem;
  padding: 7px 14px; margin: 0;
  background: var(--white);
  border: 2px solid var(--ink); border-radius: 999px;
}
.trust li::before { content: "\2713\00a0"; font-weight: 700; color: var(--leaf); }

/* the sticker board - a loose, pinned-to-the-wall arrangement */
.board { position: relative; display: grid; place-items: center; min-height: 400px; }
.board__item {
  position: absolute;
  border: var(--line) solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--pop); background: var(--white);
}
.board__art { position: relative; width: min(64%, 264px); padding: 14px; rotate: -4deg; z-index: 2; }
.board__art img { border-radius: 6px; }
.board__tag {
  position: absolute; left: 50%; bottom: -17px; translate: -50% 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 6px 14px; background: var(--sun); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap;
}
.board__sudoku { top: 1%; right: -1%; padding: 12px; rotate: 6deg; z-index: 3; }
.board__chip {
  bottom: 5%; left: -1%; z-index: 3;
  padding: 12px 16px; rotate: -7deg; text-align: center;
  background: var(--leaf); font-family: var(--font-display);
  font-weight: 600; font-size: 0.8rem; line-height: 1.3;
}
.board__chip b { display: block; font-size: 1.5rem; line-height: 1; }

.mini-grid { display: grid; grid-template-columns: repeat(4, 27px); gap: 3px; }
.mini-grid i {
  aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 4px;
  background: var(--white); font-style: normal;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
}

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.confetti span {
  position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--ink); border-radius: 5px;
  animation: bob 6s ease-in-out infinite;
}

@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* --------------------------------------------------------------- ranges -- */
.range {
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--pop); overflow: hidden;
  text-decoration: none;
  transition: translate 140ms ease, box-shadow 140ms ease;
}
.range:hover { translate: -3px -3px; box-shadow: 10px 10px 0 var(--ink); }
.range__top {
  background: var(--accent); color: var(--on-accent);
  border-bottom: var(--line) solid var(--ink);
  padding: 24px 24px 0; display: grid; place-items: center;
}
.range__top svg { width: 100%; max-width: 200px; height: auto; display: block; }
.range__body { padding: 24px 26px 28px; }
.range__body h3 { margin-bottom: 8px; }
.range__body p { color: var(--ink-soft); font-size: 0.97rem; }
.range__more { font-family: var(--font-display); font-weight: 600; color: var(--grape); }
.range:hover .range__more { text-decoration: underline; }

/* -------------------------------------------------------------- promise -- */
.promise { position: relative; padding-left: 62px; }
.promise__no {
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: 12px;
  box-shadow: var(--pop-sm); rotate: -4deg;
}
.promise h3 { font-size: 1.15rem; margin-bottom: 6px; }
.promise p { font-size: 0.97rem; opacity: 0.92; margin: 0; }

/* ----------------------------------------------------------------- play -- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tab {
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  padding: 12px 22px; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: var(--pop-sm);
}
/* Sun rather than ink: the selected tab still has to read as a sticker with an
   outline and a shadow, and an ink fill hides both. */
.tab[aria-selected="true"] { background: var(--sun); color: var(--ink); }

.panel { animation: fade 260ms ease; }
.panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

.play-layout {
  display: grid; gap: clamp(22px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  align-items: start;
}
.play-side h3 { margin-bottom: 10px; }
.play-side p { font-size: 0.95rem; color: var(--ink-soft); }

.status {
  font-family: var(--font-display); font-weight: 600;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: var(--line) solid var(--ink); background: var(--white);
  color: var(--ink); margin-top: 16px;
}
.status--win { background: var(--leaf); }
.status--oops { background: var(--coral); color: var(--white); }

/* sudoku ------------------------------------------------------------------ */
.sudoku {
  display: grid; grid-template-columns: repeat(9, 1fr);
  width: min(100%, 430px); aspect-ratio: 1;
  border: var(--line) solid var(--ink); border-radius: 10px;
  overflow: hidden; background: var(--ink); gap: 1px;
  font-family: var(--font-display);
}
.sudoku .cell {
  display: grid; place-items: center;
  background: var(--white); border: 0; padding: 0;
  font-family: inherit; font-size: clamp(0.95rem, 3.4vw, 1.4rem); font-weight: 600;
  color: var(--ink); cursor: default;
}
.sudoku .cell.box-r { margin-bottom: 2px; }
.sudoku .cell.box-c { margin-right: 2px; }
.sudoku .cell.blank {
  cursor: pointer;
  background: color-mix(in srgb, var(--sun) 24%, var(--white));
}
.sudoku .cell.blank:hover { background: color-mix(in srgb, var(--sun) 48%, var(--white)); }
.sudoku .cell.selected { background: var(--sun); box-shadow: inset 0 0 0 3px var(--ink); }
.sudoku .cell.filled { color: var(--grape); }
.sudoku .cell.wrong { background: var(--coral); color: var(--white); }

.pad {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-top: 16px; width: min(100%, 430px);
}
.pad button {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  padding: 12px 0; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.pad button:hover { background: color-mix(in srgb, var(--sun) 24%, var(--white)); }
.pad button:active { translate: 2px 2px; box-shadow: none; }

/* word search ------------------------------------------------------------- */
.ws {
  display: grid; gap: 2px;
  width: min(100%, 430px);
  font-family: var(--font-display);
  user-select: none; touch-action: none;
}
.ws .cell {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--white); border: 2px solid var(--ink); border-radius: 6px;
  font-weight: 600; font-size: clamp(0.8rem, 2.8vw, 1.05rem);
  cursor: pointer; padding: 0; color: var(--ink);
}
.ws .cell.trace { background: var(--sun); }
.ws .cell.found { background: var(--leaf); }

.wordlist { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.wordlist li {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  padding: 6px 13px; margin: 0;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
}
.wordlist li.found { background: var(--leaf); text-decoration: line-through; }

/* colouring --------------------------------------------------------------- */
.colour-stage {
  position: relative; background: var(--white);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--pop); padding: 14px; width: min(100%, 420px);
}
.colour-stage canvas {
  width: 100%; height: auto; display: block;
  border-radius: 8px; cursor: crosshair; touch-action: manipulation;
}

.crayons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 0; list-style: none; }
.crayons li { margin: 0; }
.crayon {
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: 50%;
  box-shadow: var(--pop-sm);
  transition: translate 120ms ease;
}
.crayon[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--ink), var(--pop-sm); translate: -2px -2px; }

/* ----------------------------------------------------------------- shelf -- */
.book {
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--pop); overflow: hidden;
}
.book__cover {
  position: relative; aspect-ratio: 17 / 22;
  display: grid; align-content: space-between; gap: 14px;
  padding: 24px 20px; text-align: center;
  background: var(--accent); color: var(--on-accent);
  border-bottom: var(--line) solid var(--ink);
}
.book__cover h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; margin: 0; }
.book__cover .sub {
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.book__cover .grid-mark {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  width: 88px; margin: 0 auto;
}
.book__cover .grid-mark i {
  aspect-ratio: 1; background: var(--white);
  border: 2px solid var(--ink); border-radius: 4px;
}
.book__cover .grid-mark i:nth-child(2n) { background: transparent; }
.book__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.book__meta { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.book__body .btn { margin-top: auto; align-self: flex-start; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  padding: 5px 12px; background: var(--wash); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
}

/* four across where there is room, for the four sudoku volumes */
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* a book's title under its cover photograph, and the two ways on from it */
.book__title { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.book__buy {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.book__body .book__buy .btn { margin-top: 0; }
.book__free { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }

/* a real cover in place of the drawn one - same shape, 8.5 x 11 is 17:22 */
.book__cover--photo { padding: 0; display: block; background: var(--white); }
.book__cover--photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ printables -- */
/* The free-puzzle pages the Pinterest pins open: each puzzle on a card with
   its answer folded under it, and the book they come from by the buy button. */
.hero--slim { padding-block: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 36px); }
.bay--tight { padding-block: clamp(20px, 3vw, 36px) var(--bay); }

.sheet-grid {
  display: grid; gap: clamp(20px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  /* Each card keeps its own height. A grid stretches every item in a row to
     match the tallest, so without this, opening one answer dragged the two
     cards beside it to the same height and left them mostly empty. The row
     still grows, so anything below is pushed down as before. */
  align-items: start;
}
.sheet {
  min-width: 0; padding: 18px 18px 12px;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--pop);
  scroll-margin-top: 16px;
}
/* the puzzle a pin was for, picked out when it opens the page */
.sheet:target { outline: 5px solid var(--sun); outline-offset: 5px; }
.sheet h3 { margin-bottom: 12px; }
.sheet img { width: 100%; border-radius: 6px; }
.sheet__facts { font-size: 0.88rem; color: var(--ink-soft); margin: 10px 0 4px; }
.sheet summary {
  font-family: var(--font-display); font-weight: 600;
  padding: 8px 0; cursor: pointer;
}
.sheet details img { margin: 6px 0 8px; }

.book-feature {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.cover-shot {
  width: 100%; max-width: 360px; justify-self: center;
  border: var(--line) solid var(--ink); border-radius: 10px;
  box-shadow: var(--pop); rotate: -2deg;
}
.ticks { list-style: none; padding: 0; margin: 20px 0 0; }
.ticks li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.ticks li::before {
  content: "\2713"; position: absolute; left: 0; top: 2px;
  width: 23px; height: 23px; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800; line-height: 1;
  background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--ink); border-radius: 7px;
}

.level-grid {
  display: grid; gap: clamp(20px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.level-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px; text-decoration: none;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--pop);
  transition: translate 120ms ease, box-shadow 120ms ease;
}
.level-card:hover { translate: -2px -2px; box-shadow: 9px 9px 0 var(--ink); }
.level-card img { width: 100%; border: 2px solid var(--ink); border-radius: 8px; }
.level-card .pill { background: var(--accent); color: var(--on-accent); }
.level-card > span:not(.pill) { font-family: var(--font-display); font-weight: 600; }
.level-card small { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; }

/* ---------------------------------------------------------- how to solve -- */
/* Every step the books teach, each beside its picture. */
.toc { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 28px; }
.toc__level ul { list-style: none; padding: 0; margin: 10px 0 0; }
.toc__level li { margin-bottom: 4px; }
.toc__level .pill { background: var(--accent); color: var(--on-accent); }

.technique-list { display: grid; gap: clamp(28px, 4vw, 48px); }
.technique {
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--pop);
  scroll-margin-top: 16px;
}
.technique:target { outline: 5px solid var(--sun); outline-offset: 5px; }
.technique__art { width: 100%; border: 2px solid var(--ink); border-radius: 10px; }
.technique h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 10px 0 12px; }
.technique .pill { background: var(--accent); color: var(--on-accent); }
.technique__book { color: var(--ink-soft); font-size: 0.95rem; }
.technique__try { font-family: var(--font-display); font-weight: 600; margin-top: 14px; }

/* ------------------------------------------------------------- data table */
.table-card { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 440px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--ink); }
th { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
     letter-spacing: 0.04em; text-transform: uppercase; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:nth-child(odd) > * { background: color-mix(in srgb, var(--sun) 9%, var(--white)); }

/* ------------------------------------------------------------------- FAQ -- */
.faq details {
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm); box-shadow: var(--pop-sm);
  padding: 2px 22px; margin-bottom: 14px;
}
.faq summary {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  padding: 16px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--sun); color: var(--ink);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding-bottom: 18px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- signup -- */
.signup-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.signup-form input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-body); font-size: 1rem;
  padding: 15px 20px;
  border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: var(--pop-sm); background: var(--white); color: var(--ink);
}
.form-note { font-size: 0.85rem; margin-top: 16px; opacity: 0.85; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(44px, 6vw, 72px) 30px;
}
.site-footer a { color: var(--paper); text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer h4 {
  font-family: var(--font-display);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 14px;
}
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
}
.footer-grid > * { min-width: 0; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
/* an email address is one unbreakable word; let it wrap rather than widen the page */
.site-footer a, .colophon span { overflow-wrap: anywhere; }
.footer-grid li { margin-bottom: 9px; }
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__name span { color: var(--sun); }
.colophon {
  margin-top: 40px; padding-top: 22px;
  border-top: 2px solid rgba(255, 251, 242, 0.22);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  justify-content: space-between; font-size: 0.86rem; opacity: 0.8;
}

/* ------------------------------------------------------------- flourish -- */
.squiggle { display: block; width: 100%; height: 24px; color: var(--ink); }

/* Scoped to .js so that with scripting off the content is simply there, rather
   than sitting at opacity 0 waiting for an observer that will never run. */
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity 600ms ease, translate 600ms ease; }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .book-feature { grid-template-columns: 1fr; }
  .technique { grid-template-columns: 1fr; }
  .board { min-height: 340px; }
  .play-layout { grid-template-columns: 1fr; }

  .nav-toggle {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px; padding: 0; cursor: pointer;
    background: var(--sun); border: var(--line) solid var(--ink);
    border-radius: 12px; box-shadow: var(--pop-sm);
  }
  .nav {
    position: absolute; inset-inline: 0; top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 6px; padding: 14px;
    background: var(--white); border: var(--line) solid var(--ink);
    border-radius: var(--radius); box-shadow: var(--pop);
  }
  .nav[hidden] { display: none; }
  .nav a { text-align: center; }
}

@media (min-width: 901px) {
  .nav[hidden] { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
}

@media print {
  .site-header, .site-footer, .btn-row, .confetti, .tabs { display: none; }
  body { background: var(--white); }
}

/* a row of crayon stripes, used to break one colour band off the next */
.crayon-rule { display: flex; gap: 6px; padding: 0; margin: 0; list-style: none; }
.crayon-rule li {
  flex: 1; height: 14px; margin: 0;
  border: 2px solid var(--ink); border-radius: 999px;
}