/* Coloring-book look: everything is black line art on white paper. Color only
   appears where a person acts (hover, tap, the hero whale) or to mark a level. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #4a4a4a;
  --line: 3px;
  --red: #ef4136;
  --orange: #f7901e;
  --yellow: #ffd23f;
  --green: #2fb36b;
  --blue: #2f80ed;
  --purple: #8e5bd9;
  --pink: #ff7aa8;
  --sky: #7fd3f7;
  --crayon: var(--yellow);
  --display: 'Grandstander', 'Comic Sans MS', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
  --wrap: 1180px;
  color-scheme: light;
}

/* Category crayons: one color per theme, used on hover and in small marks. */
.c-animal { --crayon: var(--green); }
.c-dinosaur { --crayon: var(--orange); }
.c-fantasy { --crayon: var(--purple); }
.c-vehicle { --crayon: var(--red); }
.c-nature { --crayon: var(--green); }
.c-food { --crayon: var(--pink); }
.c-holiday { --crayon: var(--red); }
.c-season { --crayon: var(--orange); }
.c-learning { --crayon: var(--blue); }
.c-people { --crayon: var(--yellow); }
.c-sport { --crayon: var(--blue); }
.c-space { --crayon: var(--purple); }
.c-toy { --crayon: var(--yellow); }
.c-music { --crayon: var(--pink); }
.c-place { --crayon: var(--sky); }
.c-pattern { --crayon: var(--purple); }
.c-bible { --crayon: var(--sky); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Safety net: nothing may ever make the page scroll sideways on a phone.
   clip (unlike hidden) creates no scroll container, so nothing else breaks. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; }
h2 a, h3 a { text-decoration: none; }
h2 a:hover, h3 a:hover { text-decoration: underline; }
p, ul, ol { margin: 0 0 1em; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.small { font-size: .9rem; color: var(--ink-soft); }
.lede { font-size: 1.2rem; max-width: 62ch; }
.meta { color: var(--ink-soft); }
.h-note { font: 400 1rem var(--body); color: var(--ink-soft); }
.todo { border: var(--line) dashed var(--red); padding: 8px 12px; border-radius: 10px; max-width: 62ch; }
.preview-note { border: var(--line) dashed var(--orange); border-radius: 10px; padding: 6px 12px; margin-top: 12px; font-weight: 700; }

/* ---------------------------------------------------------------- header */
.site-head { border-bottom: var(--line) solid var(--ink); background: var(--paper); position: relative; z-index: 20; }
.head-row { display: flex; align-items: center; gap: 20px; min-height: 72px; padding-block: 10px; }
.brand { font: 800 1.6rem var(--display); text-decoration: none; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .fox { transition: transform .2s ease; flex: none; }
.brand:hover .fox { transform: rotate(-8deg); }
.search-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.search-link:hover { background: var(--yellow); }
.menu-toggle { display: none; }

/* Main menu. Top level is a row of links, each with a small caret that opens
   a dropdown "sticker" card. Without JavaScript the dropdowns open on hover
   and on keyboard focus; with it, they open on hover and on the caret. */
.main-nav { flex: 1; min-width: 0; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; align-items: center; gap: 2px 10px; }
.menu-item { position: relative; display: flex; align-items: center; }
.menu-link { font: 700 1.0625rem var(--body); color: var(--ink); text-decoration: none; padding: 6px 0; border: 0; border-bottom: var(--line) solid transparent; background: none; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.menu-link:hover, .menu-link[aria-current], .is-active > .menu-link { border-bottom-color: var(--ink); }
.sub-toggle { color: var(--ink); background: none; border: 0; padding: 6px 2px; cursor: pointer; display: inline-flex; align-items: center; border-radius: 6px; }
.sub-toggle[hidden] { display: none; }
.caret { transition: transform .15s ease; }
.menu-item.open .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: -14px; z-index: 30;
  min-width: 250px; padding: 8px; margin-top: 2px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  display: none;
}
/* An invisible bridge, so the pointer can travel from the link to the card. */
.submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.submenu-wide { min-width: 440px; columns: 2; column-gap: 4px; }
.submenu li { break-inside: avoid; }
.submenu a { display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; line-height: 1.3; }
.submenu a:hover, .submenu a:focus-visible { background: var(--yellow); }
.submenu a[aria-current] { text-decoration: underline; }
.submenu .sub-all { column-span: all; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 6px; }
.submenu .sub-all a { font-weight: 400; text-decoration: underline; }
.menu-item:nth-last-child(-n+2) .submenu { left: auto; right: -14px; }

html:not(.js) .menu-item:hover > .submenu,
html:not(.js) .menu-item:focus-within > .submenu,
.js .menu-item:hover > .submenu,
.js .menu-item.open > .submenu { display: block; }

.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 18px auto 0; font-size: .95rem; color: var(--ink-soft); }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

/* ---------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-block: 48px 24px; }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.8rem); line-height: 1.02; }
.hero-art { margin: 0; }
.colorable { width: 100%; height: auto; touch-action: manipulation; }
.colorable [data-part] { transition: fill .25s ease; }
.colorable.on [data-part] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.colorable [data-part]:focus { outline: none; }
.colorable [data-part]:focus-visible { stroke: var(--blue); }
.colorable .deco { pointer-events: none; }
.colorable.on [data-part]:hover { stroke-width: 8; }
.hero-art figcaption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--c); cursor: pointer; padding: 0; }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.quick { color: var(--ink-soft); }
.quick a { font-weight: 700; color: var(--ink); }

.search-form { display: flex; gap: 8px; max-width: 560px; margin: 8px 0 14px; }
.search-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 12px 16px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); }
.search-form button, .btn { font: 700 1rem var(--body); display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; }
.search-form button, .btn-main { background: var(--ink); color: var(--paper); }
.search-form button:hover, .btn-main:hover { background: var(--blue); border-color: var(--blue); }
.btn:hover { background: var(--yellow); }
.btn-quiet { border-style: dashed; }

/* ---------------------------------------------------------------- page heads */
.page-head { padding-block: 22px 8px; }
.page-head h1 { max-width: 20ch; }
.level-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.level-filter button { font: 700 .95rem var(--body); border: var(--line) solid var(--ink); background: var(--paper); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.level-filter button span { font-weight: 400; color: var(--ink-soft); }
.level-filter button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.level-filter button[aria-pressed='true'] span { color: #d8d8d8; }
.level-section[hidden] { display: none; }

/* ---------------------------------------------------------------- sheets: a coloring page thumbnail */
.sheet-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; }
.sheet a { display: block; text-decoration: none; }
.sheet-paper { display: block; border: var(--line) solid var(--ink); border-radius: 10px; background: var(--paper); padding: 8px; aspect-ratio: 85 / 110; overflow: hidden; transition: transform .15s ease, background-color .15s ease; }
.sheet-paper img { width: 100%; height: 100%; object-fit: contain; }
.sheet a:hover .sheet-paper { background: var(--crayon, var(--yellow)); transform: rotate(-1.5deg); }
.sheet-title { display: block; font-weight: 700; margin-top: 8px; line-height: 1.3; }
.level { display: inline-block; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-top: 4px; border: 2px solid var(--ink); }
.level-toddler { background: #d8f5e4; }
.level-easy { background: #fff3c4; }
.level-medium { background: #dbe9fd; }
.level-detailed { background: #ece2fb; }

/* ---------------------------------------------------------------- likes
   The heart sits on top of the thumbnail, outside the card link. It is
   absolutely positioned, so showing it and filling in a count never moves
   anything else on the page (no layout shift). */
.sheet { position: relative; }
.like {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 48px; min-height: 40px; padding: 5px 11px;
  font: 700 .95rem var(--body);
  color: var(--ink); background: #ffe8ee;
  border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; line-height: 1;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* A red heart on a pink sticker: the one spot of color on an otherwise black
   and white card, so the eye finds it without it shouting. */
.like svg { color: var(--red); }
.like svg path { stroke-width: 2.6; }
.like:hover { background: #ffd0dc; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.like:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.like[aria-pressed='true'] { background: var(--red); color: var(--paper); }
.like[aria-pressed='true'] svg { color: var(--paper); fill: currentColor; }
.like-count { min-width: 1ch; font-variant-numeric: tabular-nums; }
.like-count:empty { display: none; }
.like.is-bumped { transform: scale(1.18); }

/* On the image page the heart joins the row of buttons. The slot keeps its
   width whether or not the button is shown, for the same reason. */
.like-slot { display: inline-flex; min-width: 108px; min-height: 48px; align-items: center; }
.like-big { position: static; min-height: 48px; gap: 8px; padding: 12px 20px; font-size: 1rem; }
.like-big svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .like, .like.is-bumped, .like:hover, .like:active { transition: none; transform: none; }
}
@media print { .like, .like-slot { display: none; } }

/* ---------------------------------------------------------------- the popular list */
.ranked { counter-reset: none; padding-top: 12px; }
.rank-no {
  position: absolute; top: -10px; left: -10px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 1rem var(--display);
  background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink);
}
.rank-top .rank-no { background: var(--ink); color: var(--paper); }
.rank-top .sheet-paper { border-width: 4px; }
.rank-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: .85rem; color: var(--ink-soft); }
.rank-likes { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rank-likes svg { width: 15px; height: 15px; color: var(--red); }

/* ---------------------------------------------------------------- topic cards */
.topic-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.topic-card a { display: grid; grid-template-rows: auto auto 1fr; text-decoration: none; border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 10px; height: 100%; transition: background-color .15s ease; }
.topic-card a:hover { background: var(--crayon); }
.topic-thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.topic-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.topic-name { font: 800 1.05rem/1.2 var(--display); margin-top: 8px; }
.topic-count { font-size: .85rem; color: var(--ink-soft); }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; text-decoration: none; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .95rem; }
.chips a:hover { background: var(--crayon); }
.chips span { font-weight: 400; color: var(--ink-soft); }

/* home: themes as a two-column list rather than a wall of cards */
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px 40px; }
.cat h3 { border-bottom: var(--line) solid var(--ink); padding-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cat h3 span { font: 400 .95rem var(--body); color: var(--ink-soft); }
.cat h3 a:hover { text-decoration-color: var(--crayon); text-decoration-thickness: 4px; }
.season { margin-top: 24px; }

.more { font-weight: 700; display: inline-block; margin-top: 14px; }

/* ---------------------------------------------------------------- image page */
.image-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 20px; }
.print-sheet { margin: 0; border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px; background: var(--paper); }
.print-only { display: none; }
.image-info h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.image-info h2 { font-size: 1.3rem; margin-top: 1.2em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 14px; border-top: var(--line) solid var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- online coloring */
.btn-color { background: var(--orange); }
.btn-color:hover { background: var(--yellow); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--paper); }
.btn-main:disabled:hover { background: var(--ink); border-color: var(--ink); }

.color-head { padding-bottom: 14px; }
.color-head h1 { max-width: 24ch; }
.color-app { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
/* The stage takes its size from the line-art <img>, which is in the HTML with
   width and height. The canvases are laid over it at exactly the same size,
   so nothing moves when the tool takes over (no layout shift). */
.color-stage { position: relative; border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 10px; background: var(--paper); }
.color-base { display: block; width: 100%; height: auto; }
.color-stage canvas { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.color-stage .lines { pointer-events: none; }
.color-stage .fills { cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.color-stage.is-ready .color-base { visibility: hidden; }

.color-panel { position: sticky; top: 16px; display: grid; gap: 14px; }
.color-dock { display: grid; gap: 14px; }
html:not(.js) .color-panel > :not(noscript):not(.small) { display: none; }
.color-status { margin: 0; font-weight: 700; min-height: 1.5em; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.paint { aspect-ratio: 1; min-width: 44px; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--c); padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.paint[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.paint:disabled { opacity: .5; cursor: default; }
.paint-eraser { background: var(--paper); border-style: dashed; }
.color-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.color-actions .btn { padding: 10px 16px; }
.color-print { display: none; }

.steps { padding-left: 1.3em; max-width: 70ch; }
.steps li { margin-bottom: .5em; }
.color-about h3 { font-size: 1.15rem; margin-top: 1em; }

/* Phones and tablets: the picture comes first and the crayon box docks to
   the bottom of the screen while the picture is in view, so a child never has
   to scroll between choosing a color and tapping a shape. The panel is
   flattened (display: contents) so the dock's sticky box is the whole tool. */
@media (max-width: 860px) {
  .color-app { grid-template-columns: 1fr; gap: 12px; }
  .color-panel { display: contents; }
  .color-status { order: 1; }
  .color-dock { order: 2; position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: var(--line) solid var(--ink); margin-inline: -16px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
  .color-panel > .color-actions, .color-panel > noscript, .color-panel > .small { order: 3; }
  .palette { display: flex; overflow-x: auto; gap: 8px; padding: 6px 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .paint { flex: 0 0 44px; width: 44px; min-width: 44px; }
  .color-dock .color-actions { flex-wrap: nowrap; }
  .color-dock .btn { padding: 8px 14px; min-height: 44px; }
}
@media (max-width: 420px) {
  .color-dock .btn-quiet span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------------------------------------------------------------- long text */
.prose > * { max-width: 70ch; }
section.prose { margin-top: 2.2em; }
.prose h2 { font-size: 1.5rem; }
.facts ul, .ideas ul { max-width: 70ch; padding-left: 1.2em; }
.facts li, .ideas li { margin-bottom: .4em; }
.faq > * { max-width: 70ch; }
.faq details { border-bottom: 2px solid var(--ink); padding: 10px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 8px 0 0; }

.letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.letters a { font: 800 1.1rem var(--display); text-decoration: none; border: 2px solid var(--ink); border-radius: 8px; min-width: 38px; text-align: center; padding: 2px 6px; }
.letters a:hover { background: var(--yellow); }
.az { columns: 4 220px; column-gap: 32px; }
.az section { break-inside: avoid; margin-bottom: 18px; }
.az h2 { margin-top: 0; }
.az ul, .tree ul { list-style: none; padding: 0; }
.az span { color: var(--ink-soft); font-size: .85rem; }
.tree ul ul { padding-left: 18px; border-left: 2px solid var(--ink); margin: 4px 0 8px 4px; }
.tree > ul { columns: 3 260px; column-gap: 32px; }
.tree > ul > li { break-inside: avoid; margin-bottom: 14px; font-weight: 700; }
.tree ul ul li { font-weight: 400; }

.results { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 6px; }
.results a { font-weight: 700; }
.results span { color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: var(--line) solid var(--ink); margin-top: 64px; padding: 36px 0 20px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.foot-brand { font: 800 1.4rem var(--display); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.foot-head { font-weight: 700; margin-bottom: 6px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 4px; }
.site-foot nav a { text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.copyright { color: var(--ink-soft); font-size: .9rem; margin-top: 24px; }

/* ---------------------------------------------------------------- small screens */
/* Small and mid screens: the menu folds into the Menu button and opens as a
   full-width panel under the header, one theme per row, each with its own
   caret. Nothing in the header is ever wider than the screen, so the page
   cannot scroll sideways. */
@media (max-width: 1100px) {
  .head-row { gap: 10px; }
  .brand { margin-right: auto; min-width: 0; }
  .search-link span { display: none; }
  .search-link { padding: 8px 10px; }
  .js .menu-toggle { display: inline-flex; align-items: center; gap: 6px; font: 700 1rem var(--body); color: var(--ink); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; order: 2; }
  .js .menu-toggle[aria-expanded='true'] { background: var(--ink); color: var(--paper); }
  .search-link { order: 3; }
  .head-row { flex-wrap: wrap; }
  .main-nav { order: 4; flex-basis: 100%; }
  .js .main-nav { display: none; }
  .js .site-head.nav-open .main-nav { display: block; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; border-top: 2px solid var(--ink); margin-top: 4px; }
  .menu-item { flex-wrap: wrap; border-bottom: 2px solid var(--ink); }
  .menu-link { flex: 1; min-height: 48px; padding: 10px 4px; border-bottom: 0; font-size: 1.15rem; justify-content: space-between; }
  .menu-link:hover, .is-active > .menu-link { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 3px; }
  .sub-toggle { min-width: 48px; min-height: 48px; justify-content: center; }
  .sub-toggle .caret { width: 22px; height: 22px; }
  .submenu, .submenu-wide, .menu-item:nth-last-child(-n+2) .submenu {
    position: static; flex-basis: 100%; min-width: 0; margin: 0 0 10px; padding: 0 0 0 12px;
    border: 0; border-left: var(--line) solid var(--ink); border-radius: 0; box-shadow: none; columns: auto;
  }
  .submenu::before { display: none; }
  .submenu a { padding: 10px 12px; min-height: 44px; }
  /* On touch screens hover would open and close menus by accident. */
  .js .menu-item:hover > .submenu { display: none; }
  .js .menu-item.open > .submenu { display: block; }
}
@media (max-width: 860px) {
  .hero, .image-page { grid-template-columns: 1fr; }
  .hero > *, .image-page > * { min-width: 0; }
  .hero { padding-top: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sheet-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .search-form { flex-direction: column; }
  .search-form button { justify-content: center; }
  .foot-grid { grid-template-columns: 1fr; }
  .cat-list { grid-template-columns: 1fr; }
  .brand { font-size: 1.3rem; gap: 6px; }
  .brand .fox { width: 34px; height: 34px; }
  .swatch { width: 30px; height: 30px; }
  .swatches { gap: 6px; }
}
/* Phones: brand, Menu and Search on one row. The Menu label is kept for
   screen readers and hidden visually only when space runs out. */
@media (max-width: 420px) {
  .head-row { gap: 8px; min-height: 64px; }
  .brand { font-size: clamp(1.05rem, 0.55rem + 2.6vw, 1.3rem); gap: 6px; }
  .brand .fox { width: 30px; height: 30px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .menu-toggle, .search-link { padding: 0; width: 44px; height: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .sheet a:hover .sheet-paper { transform: none; }
}

/* ---------------------------------------------------------------- print: only the coloring page */
@media print {
  @page { size: auto; margin: 0.4in; }
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet { position: absolute; inset: 0; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
  .print-sheet img { width: 100%; height: auto; max-height: 9.6in; object-fit: contain; }
  .print-only { display: block; font: 10pt var(--body); color: #555; margin-top: 6pt; }
  .color-print { display: flex; }
}