/* ColorNook: bright bands, torn-paper edges, chunky headlines, red buttons, Arco the hedgehog. */
:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --blue: #12a1dc;
  --blue-dark: #0b7fb3;
  --navy: #16264a;
  --red: #ef3b2d;
  --red-dark: #c42a1e;
  --yellow: #ffd23f;
  --purple: #6b3fc4;
  --green: #22b573;
  --pink: #ff5ca8;
  --ink: #16264a;
  --text: #2a3550;
  --muted: #6a7488;
  --line: #dfe5ee;
  --soft: #eef8fd;
  /* older names still used by component rules */
  --coral: var(--red);
  --coral-dark: var(--red-dark);
  --cream: var(--soft);
  --sun: var(--yellow);
  --teal: var(--green);
  --sky: var(--blue);
  --lilac: var(--purple);
  --gray: var(--muted);
  --bw: 2px;
  --radius: 16px;
  --shadow: 0 8px 22px rgba(22, 38, 74, .12);
  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.06; margin: 0 0 .45em; color: var(--navy); }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.section { padding: 48px 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 2px 0 rgba(22, 38, 74, .08); }
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: 74px; }
/* Logo: Arco (mirrored, facing the name) leaning on a crayon wordmark; all real text, see _wordmark() in build_site.py */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--navy); flex: none; position: relative; }
.logo-mark { width: 108px; height: auto; margin: 0 -2px -14px -10px; align-self: flex-end; flex: none; position: relative; z-index: 1; overflow: visible;
  transition: transform .2s; transform-origin: 40% 85%; filter: drop-shadow(0 3px 0 rgba(22, 38, 74, .16)); }  /* taller than the 74px bar: Arco hangs ~14px over the hero */
.logo-txt { display: flex; flex-direction: column; position: relative; z-index: 2; white-space: nowrap; }
.logo-name { display: block; font: 800 2rem/1 var(--display); letter-spacing: -.01em; color: var(--navy); text-shadow: 0 3px 0 rgba(22, 38, 74, .18); }
.logo-name span { font-size: inherit; }
.logo-name b, .logo-name i { font: inherit; font-style: normal; }
.logo-name .w1 i { display: inline-block; }
.logo-name .w1 i:nth-child(1) { color: var(--red); transform: rotate(-6deg); }
.logo-name .w1 i:nth-child(2) { color: #f07f1a; transform: translateY(-2px); }
.logo-name .w1 i:nth-child(3) { color: var(--green); transform: rotate(5deg); }
.logo-name .w1 i:nth-child(4) { color: var(--blue); transform: translateY(-1px); }
.logo-name .w1 i:nth-child(5) { color: var(--purple); transform: rotate(-5deg); }
.logo-name .w1 i:nth-child(6) { color: #0aa8a0; transform: translateY(-2px); }  /* Spanish "Imprime" has 7 letters */
.logo-name .w1 i:nth-child(7) { color: #f07f1a; transform: rotate(4deg); }
.logo-name .amp { color: var(--pink); font-size: .9em; }
.logo-tag { align-self: flex-start; display: block; margin: 2px 0 0 4px; padding: 3px 8px 2px; border-radius: 999px; background: var(--yellow); color: var(--navy);
  font: 800 .64rem/1 var(--body); letter-spacing: .11em; text-transform: uppercase; transform: rotate(-2deg); }
.logo-spine, .logo-bob { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .logo-spine { animation: logo-spine 7s ease-in-out 2s infinite; }  /* now and then the top crayon wobbles */
  .logo-bob { animation: logo-bob 11s ease-in-out 4s infinite; }     /* and Arco gives a little nod */
}
@keyframes logo-spine { 0%, 84%, 100% { transform: none; } 87% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } 93% { transform: rotate(-6deg); } 96% { transform: rotate(3deg); } }
@keyframes logo-bob { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-4deg) translateY(-2px); } 95% { transform: rotate(2deg); } }
@media (hover: hover) { .logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); } }
@media (max-width: 600px) {
  .logo-mark { width: 84px; margin: 0 -3px -12px -8px; }
  .logo-name { font-size: 1.36rem; }
  .logo-tag { font-size: .5rem; letter-spacing: .05em; padding: 3px 6px 2px; }
}
.site-footer .logo-name { color: #fff; }
.nav { display: flex; align-items: center; align-self: stretch; gap: 4px; margin-left: 4px; flex: none; }  /* menus never shrink; the search box gives way instead */

/* Search */
.search { display: flex; align-items: center; background: #fff; border: 2px solid #d4dce8; border-radius: 999px; padding: 3px 4px 3px 14px; }
.hdr-in > .search { flex: 0 1 220px; min-width: 44px; margin-left: auto; }
.search:focus-within { border-color: var(--blue); }
.search input { border: 0; outline: 0; background: none; font: 600 .95rem var(--body); color: var(--text); width: 100%; min-width: 0; padding: 7px 0; }
.search input::placeholder { color: var(--muted); }
.search button { border: 0; background: var(--red); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
@media (hover: hover) { .search button:hover { background: var(--red-dark); } }
.search-big { margin: 0; max-width: 520px; padding: 4px 6px 4px 18px; }
.search-big input { font-size: 1.05rem; padding: 9px 0; }
.search-big button { width: 40px; height: 40px; }
/* suggestions under search boxes (assets/search.js) */
.search { position: relative; }
.sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 290px; z-index: 60; background: #fff; border: 2px solid #d4dce8; border-radius: 14px; box-shadow: 0 10px 28px rgba(20,40,80,.18); padding: 6px; text-align: left; }
.sugg[hidden] { display: none; }
.hdr-in > .search .sugg { left: auto; width: 340px; }
.search .sugg a[href] { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.sugg a.on, .sugg a:focus { background: #eef4fb; outline: 0; }
@media (hover: hover) { .sugg a:hover { background: #eef4fb; } }
.sugg img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #fff; border: 1px solid #dfe6ef; flex: none; }
.sugg span { display: flex; flex-direction: column; min-width: 0; }
.sugg b { font: 700 .92rem/1.25 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg small { color: var(--muted); font-size: .8rem; }
.search .sugg a.sugg-all[href] { justify-content: center; font-weight: 700; color: var(--blue); border-top: 1px solid #e3e9f1; border-radius: 0 0 10px 10px; margin-top: 4px; }
.sugg-h { padding: 8px 10px 2px; font: 800 .72rem var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sugg-emo { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 1.9rem; background: #eef4fb; border-radius: 10px; }
.card-img .sugg-emo { width: 100%; height: 100%; min-height: 180px; font-size: 4rem; border-radius: 0; }
.sugg-fix { padding: 6px 10px; font-size: .85rem; color: var(--muted); }
.sugg-fix b { font-size: .85rem; color: var(--text); }
#search-status b { font-weight: 800; }
.footer-search { margin: 18px 0 0; max-width: 320px; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
.footer-search input { color: #fff; }
.footer-search input::placeholder { color: #aab6cc; }

/* Mega menu (sitenav.py) */
.hdr-in { position:relative }
.menu-toggle { display:none }
.nav .search { display:none }
.mm-bar { list-style:none; margin:0 0 0 6px; padding:0; display:flex; gap:2px; align-self:stretch }
.mm { display:flex; align-items:center }  /* full header height: no hover gap between button and panel */
.mm-btn { position:relative; text-decoration:none }
.mm-btn svg { cursor:pointer }
/* caret under the open button, centred on the panel's top border: header 74px, button 36px -> 19px below the button + half the caret */
.mm.open .mm-btn::after { content:""; position:absolute; left:50%; bottom:-26px; width:14px; height:14px; background:#fff; border-left:var(--bw) solid var(--ink);
  border-top:var(--bw) solid var(--ink); transform:translateX(-50%) rotate(45deg); z-index:31; pointer-events:none }
.mm-btn { display:flex; align-items:center; gap:6px; white-space:nowrap; font:700 .98rem var(--body); color:var(--ink); background:none; cursor:pointer;
  padding:8px 11px; border:var(--bw) solid transparent; border-radius:999px }
.mm-btn svg { width:12px; height:8px; transition:transform .15s }
.mm.open .mm-btn { border-color:var(--ink); background:var(--cream) }
@media (hover: hover) { .mm-btn:hover { border-color:var(--ink); background:var(--cream) } }
.mm.open .mm-btn svg { transform:rotate(180deg) }
.mm-panel { display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border:var(--bw) solid var(--ink);
  border-radius:0 0 20px 20px; box-shadow:8px 8px 0 var(--ink); padding:26px 28px 24px; gap:28px; z-index:30 }
.mm.open .mm-panel { display:flex }
@media (hover:hover) and (min-width:1001px) { .mm:hover .mm-btn { border-color:var(--ink); background:var(--cream) } }
.mm-cols { display:flex; gap:30px; flex:1 }
.mm-col { min-width:170px; flex:1 }
.mm-col ul { list-style:none; margin:0; padding:0 }
.mm-col li a { display:flex; justify-content:space-between; gap:10px; text-decoration:none; font-weight:600; padding:5px 8px; margin:0 -8px; border-radius:8px }
@media (hover: hover) { .mm-col li a:hover { background:var(--cream); color:var(--coral-dark) } }
.mm-col .n { font-size:.78rem; font-weight:800; color:var(--gray); background:#f3eee6; border-radius:999px; padding:1px 8px; align-self:center }
.mm-col li.more a { color:var(--coral-dark); font-weight:800; margin-top:6px }
.mm-h { font-family:var(--display); font-size:1.15rem; margin:0 0 8px; color:var(--ink) }
.mm-wide { flex:3 }
.mm-grid { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px }
.mm-side { width:260px; flex:none; display:flex; flex-direction:column; gap:14px }
.mm-feature { display:flex; gap:14px; align-items:center; text-decoration:none; border:var(--bw) solid var(--ink); border-radius:16px; padding:12px;
  background:var(--cream); box-shadow:5px 5px 0 var(--coral) }
.mm-feature img { width:84px; height:auto; border:2px solid var(--ink); border-radius:6px; background:#fff }
.mm-feature b { display:block; font-family:var(--display); font-weight:400; font-size:1.2rem; line-height:1.1; margin:6px 0 2px }
.mm-feature span span { font-size:.9rem; color:var(--gray) }
.mm-all { font-weight:800; color:var(--coral-dark); text-decoration:none }
.mm-note { margin:0; color:#555; font-size:.95rem }
.nav-season { margin-left:6px; white-space:nowrap; text-decoration:none; font-weight:800; color:#fff; background:var(--coral); border:var(--bw) solid var(--ink);
  border-radius:999px; padding:6px 14px; box-shadow:3px 3px 0 var(--ink); transform:rotate(-2deg) }

@media (max-width:1000px) {
  .menu-toggle { display:flex; align-items:center; gap:8px; margin-left:auto; font:800 1rem var(--body); color:var(--ink); background:#fff;
    border:var(--bw) solid var(--ink); border-radius:999px; padding:7px 14px; box-shadow:3px 3px 0 var(--ink); cursor:pointer }
  .nav { display:none !important }
  .hdr.drawer .nav { display:flex !important; flex-direction:column; align-items:stretch; justify-content:flex-start; position:fixed; inset:72px 0 0 0; background:#fff; overflow:auto;
    padding:12px 16px 40px; margin:0; z-index:40; border-top:var(--bw) solid var(--ink) }
  .mm-bar { flex-direction:column; margin:0; gap:0 }
  .mm { border-bottom:2px dashed #e5ddd2 }
  .mm-btn { width:100%; justify-content:space-between; font-size:1.2rem; padding:16px 4px; border:0; border-radius:0 }
  .mm.open .mm-btn { background:none; border:0 }
@media (hover: hover) { .mm-btn:hover { background:none; border:0 } }
  .mm { display:block }
  .mm.open .mm-btn::after { display:none }
  .mm-panel { position:static; border:0; box-shadow:none; padding:0 0 16px; flex-direction:column; gap:16px }
  .mm-cols { flex-direction:column; gap:14px }
  .mm-grid { grid-template-columns:repeat(2, 1fr) }
  .mm-side { width:auto }
  .nav-season { align-self:flex-start; margin:18px 0 0 }
  .hdr-in > .search { display:none }
  .nav .search { display:flex !important; flex:0 0 auto !important; width:100%; max-width:none; margin:4px 0 10px }
  body.lock { overflow:hidden }
}

/* Print: just the content, no chrome */
@media print {
  .hdr, .site-footer, .menu-toggle, .filters, .gcard-dl, .downloads, .pager, .show-more, .skip, .topic-links { display: none !important; }
  body { background: #fff; color: #000; }
  .grid .card.more { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 2px solid var(--ink);
  font: 800 1rem var(--body); text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--coral); }
@media (hover: hover) { .btn-primary:hover { box-shadow: 6px 6px 0 var(--coral); } }
.btn-ghost { background: #fff; }
.btn-link { border-color: transparent; text-decoration: underline; padding-inline: 8px; }
.btn-lg { padding: 15px 28px; font-size: 1.08rem; }

/* Hero */
.hero { padding: 56px 0 24px; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.eyebrow { display: inline-block; font-weight: 800; color: var(--teal); background: #e3f7f3; padding: 4px 12px; border-radius: 999px; margin: 0 0 16px; font-size: .9rem; }
.hl { background: linear-gradient(transparent 60%, var(--sun) 60%); padding: 0 .1em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 36em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-art { position: relative; height: 440px; }
.hero-art img {
  position: absolute; width: 56%; border-radius: 12px; background: #fff;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.hero-art img:nth-child(1) { left: 0; top: 40px; transform: rotate(-7deg); }
.hero-art img:nth-child(2) { left: 22%; top: 0; transform: rotate(2deg); z-index: 2; }
.hero-art img:nth-child(3) { right: 0; top: 60px; transform: rotate(8deg); }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.grid:not(.expanded) .gcard.more { display: none; }
.show-more { text-align: center; margin: 28px 0 0; }
.cat-card {
  --accent: var(--coral);
  display: block; text-decoration: none; background: var(--paper); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .2s;
}
@media (hover: hover) { .cat-card:hover { transform: translateY(-4px) rotate(-.5deg); } }
.cat-img { background: var(--accent); padding: 18px 18px 0; height: 200px; overflow: hidden; }
.cat-img img { border-radius: 8px 8px 0 0; }
.cat-body { padding: 14px 18px 18px; }
.cat-body h3 { margin: 0; font-size: 1.3rem; }
.cat-body span { color: var(--muted); font-weight: 700; font-size: .92rem; }
.accent-coral { --accent: #ffd9d4; }
.accent-teal { --accent: #cdf1ea; }
.accent-sky { --accent: #d6ebff; }
.accent-sun { --accent: #ffefc2; }
.accent-lilac { --accent: #e6dcff; }

/* Printable cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.card {
  display: flex; flex-direction: column; text-decoration: none; background: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.card[hidden] { display: none; }
@media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(42, 36, 64, .14); } }
.card-img { aspect-ratio: 8.5 / 11; border-bottom: 1px solid var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
.card-title { font-weight: 800; line-height: 1.25; }

.badge { flex: none; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: #eee; }
.badge-easy { background: #d8f5e6; color: #0f7a48; }
.badge-medium { background: #fff0c9; color: #8a5a00; }
.badge-detailed { background: #d6ebff; color: #0b5cad; }
.badge-hard { background: #ffe7cf; color: #9a4b00; }
.badge[class*="badge-grade"], .badge-pre-k { background: #e6dcff; color: #4b2bb3; }

/* Category page */
.cat-hero { background: var(--accent); padding: 36px 0 40px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.intro { max-width: 46em; }
.intro p { margin: 0 0 .7em; }
.cat-actions { margin-top: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { font: 700 .95rem var(--body); padding: 8px 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Item page */
.item { padding: 28px 0 8px; }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.item-preview { background: var(--accent); border-radius: 24px; padding: 28px; }
.item-preview img { background: #fff; border-radius: 6px; box-shadow: var(--shadow); width: 100%; }
.item-info h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 14px; }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 28px; align-items: center; }
.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 90px 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 800; }
.specs dd { margin: 0; color: var(--muted); }
.tags { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: .82rem; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }
.pager { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: .95rem; }
.pager a { text-decoration: none; color: var(--muted); }
@media (hover: hover) { .pager a:hover { color: var(--ink); } }

/* How to */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 0; list-style: none; counter-reset: s; }
.steps li { background: #fff; border-radius: var(--radius); padding: 22px 22px 22px 70px; position: relative; box-shadow: var(--shadow); counter-increment: s; }
.steps li::before {
  content: counter(s); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sun); display: grid; place-items: center; font: 700 1.1rem var(--display);
}

.prose { max-width: 720px; padding: 48px 0; }

/* Footer */
.site-footer { margin-top: 48px; background: var(--ink); color: #d9d4ea; padding: 48px 0 20px; }
.site-footer .logo { color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr .8fr; gap: 32px 28px; }
.footer-inner p { max-width: 30em; }
.footer-links { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.footer-links strong { color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.footer-links a { text-decoration: none; color: #d9d4ea; }
@media (hover: hover) { .footer-links a:hover { color: #fff; } }
.copyright { font-size: .85rem; color: #9a93b5; margin-top: 32px; }
.copyright a { color: #b7b0d0; }
@media (max-width: 1000px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

@media (max-width: 860px) {
  .hero-inner, .item-grid { grid-template-columns: 1fr; }
  .hero-art { height: 300px; max-width: 420px; }
  .item-grid { gap: 24px; }
  .item-preview { padding: 16px; }
}
@media (max-width: 600px) {
  .search { flex: 1 1 90px; min-width: 90px; padding-left: 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .topic-links a, .pill-links a { padding: 9px 14px; }
  .topic-links.compact a { padding: 7px 12px; }
  .chip { padding: 9px 18px; }
  .crumbs { font-size: .95rem; line-height: 1.9; }
  .pager a { padding: 8px 0; }
  .footer-links { gap: 10px; }
  .footer-links a { padding: 3px 0; }
  .copyright a { padding: 6px 2px; display: inline-block; }
  .card-body { flex-direction: column; align-items: flex-start; padding: 10px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-img { height: 140px; padding: 10px 10px 0; }
  .section { padding: 32px 0; }
  .downloads .btn-lg { flex: 1 1 100%; }
}

/* How to draw */
.card-img.square { aspect-ratio: 1; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.section-head a { font-weight: 800; }
.muted { color: var(--muted); }
.red { color: #ff4d3d; font-weight: 800; }
.step-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.step { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.step-img { aspect-ratio: 1; border-bottom: 1px solid var(--line); }
.step-text { padding: 16px 20px 20px; }
.step-text p { margin: 6px 0 0; }
.step-num { font: 600 1.15rem var(--display); color: var(--coral); }
.worksheet { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 40px; align-items: center; }
.ws-img img { border-radius: 10px; box-shadow: var(--shadow); background: #fff; transform: rotate(-2deg); }
.tut-banner {
  display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 12px 22px 12px 12px; text-decoration: none;
  background: var(--paper); border: 2px dashed var(--coral); border-radius: var(--radius);
}
.tut-banner img { width: 84px; height: 84px; border-radius: 12px; background: #fff; flex: none; }
.tut-banner strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
@media (max-width: 860px) { .worksheet { grid-template-columns: 1fr; } .ws-img { max-width: 320px; } }

/* SEO structure: gallery cards with direct download, topic links, FAQ */
.gcard { margin: 0; position: relative; }
.gcard .card-img { display: block; }
.gcard .card-title { text-decoration: none; }
.gcard-dl {
  margin: 0 12px 12px; padding: 9px 12px; border-radius: 999px; text-align: center; text-decoration: none;
  font-weight: 800; font-size: .92rem; background: var(--ink); color: #fff;
}
@media (hover: hover) { .gcard-dl:hover { background: var(--coral); } }
.updated { font-weight: 700; color: var(--muted); margin: -4px 0 14px; font-size: .95rem; }
.topic-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.topic-links span { font-weight: 800; margin-right: 4px; }
.topic-links a, .pill-links a {
  text-decoration: none; font-weight: 700; background: #fff; border: 2px solid var(--line);
  padding: 6px 14px; border-radius: 999px;
}
@media (hover: hover) { .topic-links a:hover, .pill-links a:hover { border-color: var(--ink); } }
.topic-links small, .pill-links small { color: var(--muted); font-weight: 800; margin-left: 4px; }
.topic-links.compact { margin: 20px 0; }
.topic-links.compact a { font-size: .88rem; padding: 3px 12px; }
.pill-links { display: flex; flex-wrap: wrap; gap: 10px; }
.prose-block { max-width: 820px; }
.tips { padding-left: 1.2em; }
.tips li { margin-bottom: 6px; }
.faq { max-width: 820px; }
.faq details { background: #fff; border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 10px; padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 800; padding: 16px 0; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font: 600 1.4rem var(--display); color: var(--coral); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* Long-form text */
.article h2 { margin-top: 1.6em; }
.article h3 { margin: 0 0 .3em; font-size: 1.2rem; }
.article.narrow, .article > p, .article > ul { max-width: 820px; }
.page-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.pp-item { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; background: var(--paper); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); max-width: 900px; }
.pp-thumb img { width: 96px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.pp-item p { margin: 0 0 6px; color: var(--muted); }
.pp-links { font-size: .9rem; font-weight: 700; }
.facts { padding-left: 1.2em; }
.facts li { margin-bottom: 6px; }
h3.step-num { margin: 0; }

/* Home: theme groups, "new" pills, trust points */
.theme-group { margin-top: 26px; }
.theme-group h3 { font-size: 1.25rem; margin: 0 0 14px; color: var(--muted); }
.more-pills { margin-top: 14px; align-items: center; }
.more-pills > .muted { font-weight: 800; font-size: .92rem; margin-right: 4px; }
.more-pills a { font-size: .9rem; padding: 4px 12px; }
.pill-links em { font-style: normal; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--coral); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.section.slim { padding: 8px 0 0; }
.section.slim .eyebrow { margin: 0 6px 0 0; }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.why > div { background: var(--paper); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); border-top: 5px solid var(--sun); }
.why > div:nth-child(2) { border-color: var(--coral); }
.why > div:nth-child(3) { border-color: var(--teal); }
.why > div:nth-child(4) { border-color: var(--sky); }
.why strong { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.why p { margin: 6px 0 0; color: var(--muted); font-size: .98rem; }
.prose h2 { font-size: 1.4rem; margin-top: 1.4em; }
#results:empty { display: none; }
@media (max-width: 600px) {
  .search { flex: 1 1 120px; padding-left: 10px; }
  .search input { font-size: .9rem; }
  .hero-actions .btn-link { padding-inline: 0; }
}


/* ---------- ColorNook style: shared components ---------- */
.mm-panel { border: 0; border-radius: 0 0 22px 22px; box-shadow: 0 22px 50px rgba(22, 38, 74, .22); }
.mm-btn { border: 0 !important; }
.mm.open .mm-btn { background: var(--soft); }
@media (hover: hover) { .mm-btn:hover { background: var(--soft); } }
@media (hover: hover) { .mm-col li a:hover { background: var(--soft); color: var(--red-dark); } }
.mm-col li.more a, .mm-all { color: var(--red); }
.mm-h { font-weight: 800; }
.mm-feature { border: 0; box-shadow: none; background: var(--soft); }
.mm-feature b { font-weight: 800; }
.nav-season { background: var(--red); border: 0; box-shadow: 0 3px 0 var(--red-dark); transform: none; }
/* Menu button (phones): a filled red pill with a bold label */
.menu-toggle { color: #fff; background: var(--red); border: 0 !important; box-shadow: 0 4px 0 var(--red-dark) !important; border-radius: 999px;
  font: 800 1.12rem/1 var(--display); min-height: 44px; padding: 10px 15px 9px 12px; gap: 6px; }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle[aria-expanded="true"] { background: var(--navy); box-shadow: 0 4px 0 #0c1630 !important; }
@media (hover: hover) { .menu-toggle:hover { background: var(--red-dark); } }
/* Desktop menu: bold display font, a crayon-colored bar under each item, a filled pill in that color when open */
.mm[data-k="color"] { --c: var(--red); } .mm[data-k="cbn"] { --c: var(--blue); } .mm[data-k="math"] { --c: var(--purple); }
.mm[data-k="act"] { --c: #f07f1a; } .mm[data-k="draw"] { --c: var(--green); } .mm[data-k="read"] { --c: #c2255c; } .mm[data-k="write"] { --c: #0f8b8d; }

@media (min-width: 1001px) {
  .mm-btn { font: 800 1.06rem/1 var(--display); color: var(--navy); padding: 9px 9px 8px; }
  .mm-btn span { position: relative; }
  .mm-btn span::before { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 4px; border-radius: 4px; background: var(--c, var(--blue)); }
  .mm-btn svg { color: var(--c, var(--navy)); }
  .mm.open .mm-btn { background: var(--c, var(--soft)); color: #fff; }
  .mm.open .mm-btn span::before, .mm.open .mm-btn svg { opacity: 0; }
}
@media (hover: hover) and (min-width: 1001px) {
  .mm:hover .mm-btn, .mm-btn:hover { background: var(--c, var(--soft)); color: #fff; }
  .mm:hover .mm-btn span::before, .mm:hover .mm-btn svg { opacity: 0; }
}

.btn { border: 0; border-radius: 999px; background: #fff; color: var(--navy); box-shadow: 0 4px 0 #cfd7e3, 0 0 0 2px #d4dce8 inset;
  font-weight: 800; transition: transform .12s; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 5px 0 var(--red-dark); }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 5px 0 #d9a900; }
.btn-ghost { background: #fff; }
.btn-link { box-shadow: none; background: none; text-decoration: underline; }
@media (hover: hover) { .btn-link:hover { transform: none; color: var(--red); } }
.btn-lg { padding: 15px 30px; }

.kicker { display: inline-block; font: 800 .85rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.eyebrow { color: var(--navy); background: var(--yellow); border: 0; }
.muted { color: var(--muted); }

/* torn paper edges and doodles */
.band { position: relative; padding: 72px 0; }
.torn { position: absolute; left: 0; width: 100%; height: 34px; z-index: 2; pointer-events: none; }
.torn.top { top: -1px; transform: scaleY(-1); }
.torn.bot { bottom: -1px; }
.torn path { fill: #fff; }
.doodle { position: absolute; width: 28px; height: 28px; z-index: 1; }
.doodle path { fill: var(--yellow); }

/* cards */
.grid { gap: 20px; }
.card, .cat-card { border: 0; border-radius: 14px; box-shadow: var(--shadow); background: #fff; transition: transform .15s, box-shadow .15s; }
@media (hover: hover) { .card:hover, .cat-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 14px 30px rgba(22, 38, 74, .18); } }
.card-img, .step-img { border-bottom: 1px solid #e5eaf2; }
.card-title { color: var(--navy); }
.cat-img { border-bottom: 0; }
.cat-img img { border: 4px solid #fff; border-bottom: 0; }
.cat-body h3 { font-weight: 800; }
.accent-coral { --accent: var(--red); }
.accent-teal { --accent: var(--green); }
.accent-sky { --accent: var(--blue); }
.accent-sun { --accent: var(--yellow); }
.accent-lilac { --accent: var(--purple); }
.gcard-dl { background: var(--red); color: #fff; border: 0; box-shadow: 0 3px 0 var(--red-dark); }
@media (hover: hover) { .gcard-dl:hover { background: var(--red-dark); } }

.badge { border: 0; color: var(--navy) !important; text-transform: none; letter-spacing: 0; font-size: .78rem; transform: none; }
.badge-easy { background: #d7f3e4; }
.badge-medium { background: #fff1c2; }
.badge-detailed { background: #d6ecfa; }
.badge-hard { background: #ffe0d8; }
.badge[class*="badge-grade"], .badge-pre-k { background: #ebe3fb; }

.chip { border: 2px solid #d4dce8; }
.chip.active { background: #0a6f9d; border-color: #0a6f9d; }  /* 5.6:1 on white text; the brand blue was 2.9:1 */
.topic-links a, .pill-links a { border: 2px solid #d4dce8; box-shadow: none; background: #fff; }
@media (hover: hover) { .topic-links a:hover, .pill-links a:hover { border-color: var(--blue); background: var(--soft); } }
.pill-links em { background: var(--red); border: 0; }

/* topic page header: a blue band with a torn edge */
.cat-hero { position: relative; background: var(--blue); color: #fff; padding: 36px 0 70px; border: 0; overflow: hidden; overflow-x: clip; overflow-y: visible; }  /* visible below: search suggestions hang out of the band */
.cat-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 40 L0 22 L40 30 L85 14 L130 26 L170 10 L220 24 L265 12 L310 28 L360 16 L405 30 L450 12 L500 24 L545 8 L595 26 L640 14 L690 30 L735 12 L785 24 L830 10 L880 28 L925 16 L975 30 L1020 12 L1070 26 L1115 14 L1160 28 L1200 18 L1200 40 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.cat-hero h1, .cat-hero h2 { color: #fff; }
.cat-hero .crumbs, .cat-hero .crumbs a { color: #e1f4fd; }
.cat-hero .updated { color: var(--yellow); }
.cat-hero .intro, .cat-hero .intro p { color: #f1faff; }
.cat-hero a:not(.btn) { color: #fff; }
.cat-hero .btn-primary { box-shadow: 0 5px 0 var(--red-dark); }

/* topic hero: text left, a hand of "playing cards" (4 sheets fanned out) right */
.cat-in { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px 48px; align-items: center; }
.fan { position: relative; height: 330px; }
.fan a { position: absolute; left: 50%; bottom: 10px; width: 46%; margin-left: -23%; border-radius: 10px; border: 5px solid #fff;
  background: #fff; box-shadow: 0 14px 30px rgba(10, 40, 80, .38); transform-origin: 50% 175%; transform: rotate(var(--r, 0deg));
  transition: transform .2s, box-shadow .2s; }
.fan img { display: block; width: 100%; height: auto; border-radius: 6px; }
.fan .f1 { --r: -19deg; z-index: 1; } .fan .f2 { --r: -6deg; z-index: 2; } .fan .f3 { --r: 6deg; z-index: 3; } .fan .f4 { --r: 19deg; z-index: 4; }
.fan.n3 .f1 { --r: -15deg; } .fan.n3 .f2 { --r: 0deg; } .fan.n3 .f3 { --r: 15deg; }
.fan.n2 .f1 { --r: -9deg; } .fan.n2 .f2 { --r: 9deg; }
.fan.n1 .f1 { --r: 3deg; }
.fan a:focus-visible { z-index: 9; box-shadow: 0 22px 40px rgba(10, 40, 80, .45); transform: rotate(var(--r, 0deg)) translateY(-18px); }
@media (hover: hover) { .fan a:hover { z-index: 9; box-shadow: 0 22px 40px rgba(10, 40, 80, .45); transform: rotate(var(--r, 0deg)) translateY(-18px); } }
@media (max-width: 900px) {
  .cat-in { grid-template-columns: 1fr; }
  .fan { width: 100%; height: 250px; max-width: 360px; margin: 0 auto; }
  .fan .f1 { --r: -15deg; } .fan .f2 { --r: -5deg; } .fan .f3 { --r: 5deg; } .fan .f4 { --r: 15deg; }
}
@media (max-width: 480px) { .fan { height: 210px; } .fan a { width: 48%; margin-left: -24%; } }
@media (prefers-reduced-motion: reduce) { .fan a { transition: none; } }

/* item page */
.item-preview { border: 0; background: var(--soft); }
.item-preview img { border: 0; box-shadow: var(--shadow); }
.tags li { border: 2px solid #d4dce8; color: var(--text); }
.steps li { border: 0; box-shadow: var(--shadow); }
.steps li::before { background: var(--red); color: #fff; border: 0; font-family: var(--display); }
.step, .pp-item, .why > div { border: 0; box-shadow: var(--shadow); }
.step-num { color: var(--red); }
.faq details { border: 0; box-shadow: 0 4px 14px rgba(22, 38, 74, .08); }
.faq summary { color: var(--navy); }
.faq summary::after { color: var(--red); font-family: var(--body); font-weight: 800; }
.pp-thumb img, .ws-img img { border: 1px solid #e5eaf2; box-shadow: none; }
.tut-banner { border: 2px dashed var(--blue); background: var(--soft); box-shadow: none; }
.why strong, .tut-banner strong, .footer-links strong { font-weight: 800; }

/* footer */
.site-footer { background: var(--navy); color: #b9c6de; border: 0; margin-top: 0; }
.site-footer .logo { color: #fff; }
.footer-links strong { color: #fff; }
.footer-links a { color: #b9c6de; }
@media (hover: hover) { .footer-links a:hover { color: #fff; } }
.copyright, .copyright a { color: #8d9bb7; }
.footer-nook { width: 110px; height: auto; margin-bottom: 10px; }

/* 404 and search */
.oops { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.oops .nook { width: 220px; height: auto; }
#search-popular .nook { width: 150px; height: auto; margin: 0 0 12px; }
@media (max-width: 860px) {
  .oops { grid-template-columns: 1fr; }
  .oops .nook { width: 160px; }
}

/* ---------- home page ---------- */
.home .center { text-align: center; }
.home .lede { font-size: 1.18rem; max-width: 44rem; margin-inline: auto; }
.home .hero { background: var(--blue); color: #fff; padding: 56px 0 96px; overflow: hidden; border: 0; }
.home .hero h1 { color: #fff; }
.home .hero h1 em { font-style: normal; color: var(--yellow); }
.home .hero .kicker { color: var(--yellow); }
.home .hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.home .sub { font-size: 1.22rem; max-width: 32rem; color: #eaf7ff; }
.home .btns { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0 30px; }
.home .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 560px; }
.home .stat { background: rgba(255, 255, 255, .14); border-radius: 16px; padding: 12px 10px; text-align: center; }
.home .stat b { display: block; font: 800 1.9rem/1 var(--display); color: #fff; }
.home .stat span { font-size: .82rem; font-weight: 700; color: #dff2fc; }
.home .collage { position: relative; height: 470px; }
.home .collage .photo { position: absolute; right: 0; top: 10px; width: 92%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px;
  border: 8px solid #fff; box-shadow: 0 22px 50px rgba(10, 40, 80, .35); transform: rotate(2deg); }
.home .collage .sheet { position: absolute; width: 30%; border-radius: 8px; border: 5px solid #fff; background: #fff; box-shadow: 0 14px 30px rgba(10, 40, 80, .35); z-index: 2; }
.home .collage .s1 { left: 0; bottom: 10px; transform: rotate(-8deg); }
.home .collage .s2 { left: 24%; bottom: -20px; transform: rotate(5deg); }
.home .collage .nook { position: absolute; right: -10px; bottom: -34px; width: 200px; height: auto; z-index: 4; filter: drop-shadow(0 10px 14px rgba(10, 40, 80, .3)); }

.home .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; text-align: left; }
.home .door { border-radius: 22px; padding: 22px 18px 0; color: #fff; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s; }
@media (hover: hover) { .home .door:hover { transform: translateY(-4px); } }
.home .door h3 { color: #fff; font-size: 1.45rem; margin: 0 0 6px; }
.home .door p { font-size: .95rem; }
.home .door p { margin: 0 0 14px; color: rgba(255, 255, 255, .92); }
.home .door .go { font-weight: 800; margin-bottom: 18px; }
.home .dphoto { display: block; margin: auto -18px 0; border-top: 6px solid rgba(255, 255, 255, .9); }
.home .dphoto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home .d1 { background: var(--red); } .home .d2 { background: var(--purple); } .home .d3 { background: var(--green); } .home .d4 { background: #0a6f9d; } .home .d5 { background: #e8590c; } .home .d6 { background: #c2255c; }
.home .dcards { display: flex; gap: 8px; padding: 12px 12px 0; background: rgba(255, 255, 255, .18); }
.home .dcards img { width: 50%; aspect-ratio: 320 / 414; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; background: #fff; }
.home .games-band .lede { max-width: 720px; margin: 0 0 24px; color: #dfe7f5; }
.home .games-band .pill-links .muted { color: #b9c6e0; }
@media (max-width: 1100px) { .home .doors { grid-template-columns: repeat(2, 1fr); } }

.home .headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.home .headrow h2 { margin: 0; }
.home .headrow a.more { font-weight: 800; color: var(--red); }
.home .navy { background: var(--navy); color: #dfe7f5; }
.home .navy h2 { color: #fff; }
.home .navy h2 em { font-style: normal; color: var(--yellow); }
.home .navy .kicker, .home .purple .kicker { color: var(--yellow); }
.home .navy .headrow a.more, .home .next a { color: var(--yellow); }
.home .next { margin: 28px 0 0; }
.home .navy .card-body { color: var(--navy); }
.home .purple { background: var(--purple); color: #efe8ff; }
.home .purple h2 { color: #fff; }
.home .soft { background: var(--soft); }

.home .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home .tile { position: relative; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; background: #fff; box-shadow: var(--shadow); transition: transform .15s; }
@media (hover: hover) { .home .tile:hover { transform: translateY(-4px); } }
.home .tile img { aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
.home .tile b { position: absolute; left: 10px; bottom: 10px; background: var(--yellow); color: var(--navy); font: 800 1.05rem var(--display); padding: 2px 12px; border-radius: 999px; }
.home .tile i { position: absolute; right: 10px; top: 10px; font: 800 .8rem var(--body); font-style: normal; background: #fff; padding: 2px 9px; border-radius: 999px; color: var(--navy); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.home .all-themes { margin-top: 22px; align-items: center; }
.home .all-themes .muted { font-weight: 800; margin-right: 4px; }
.home .all-themes a { font-size: .92rem; padding: 4px 12px; }

.home .math-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.home .gradebtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 26px; }
.home .gradebtns a { text-decoration: none; background: #fff; color: var(--purple); border-radius: 14px; padding: 12px; text-align: center; font: 800 1.15rem var(--display); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.home .gradebtns a small { display: block; font: 700 .78rem var(--body); color: var(--muted); }
.home .skillchips { display: flex; flex-wrap: wrap; gap: 8px; }
.home .skillchips a { text-decoration: none; color: #fff; border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
@media (hover: hover) { .home .skillchips a:hover { background: rgba(255, 255, 255, .15); } }
.home .math-imgs { position: relative; height: 430px; }
.home .math-imgs img { position: absolute; width: 56%; border-radius: 10px; border: 6px solid #fff; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); background: #fff; }
.home .math-imgs img:nth-child(1) { left: 0; top: 20px; transform: rotate(-5deg); }
.home .math-imgs img:nth-child(2) { right: 0; top: 0; transform: rotate(5deg); }
.home .math-imgs .nook { position: absolute; right: 22%; bottom: -20px; width: 180px; height: auto; z-index: 3; }

.home .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.home .steps3 .num { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font: 800 2.2rem var(--display); color: #fff; margin-bottom: 14px; }
.home .s1 { background: var(--red); } .home .s2 { background: var(--blue); } .home .s3 { background: var(--green); }
.home .steps3 p { margin: 0; color: var(--muted); }

.home .split .row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.home .split .row:last-child { margin-bottom: 0; }
.home .split .rev .pic { order: 2; }
.home .split .pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 40px rgba(22, 38, 74, .18); transform: rotate(-1.5deg); }
.home .split .rev .pic img { transform: rotate(1.5deg); }
.home .split p { font-size: 1.12rem; margin: 0 0 22px; }

.home .promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; text-align: left; }
.home .promise { background: #fff; border-radius: 18px; padding: 22px; border-top: 6px solid var(--blue); box-shadow: 0 6px 18px rgba(22, 38, 74, .1); }
.home .promise:nth-child(2) { border-color: var(--red); } .home .promise:nth-child(3) { border-color: var(--yellow); } .home .promise:nth-child(4) { border-color: var(--green); }
.home .promise b { display: block; font: 800 1.25rem var(--display); color: var(--navy); margin-bottom: 4px; }
.home .promise p { margin: 0; color: var(--muted); }
.home .home-faq { margin: 30px auto 0; text-align: left; }

.home .final { background: var(--red); color: #fff; overflow: hidden; }
.home .final h2 { color: #fff; margin-bottom: 4px; }
.home .final p { margin: 0; font-size: 1.15rem; }
.home .final .torn path { fill: var(--soft); }
.home .final-in { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.home .final .nook { width: 200px; height: auto; }

@media (max-width: 900px) {
  .band { padding: 56px 0; }
  .home .hero-in, .home .math-in, .home .final-in { grid-template-columns: 1fr; }
  .home .collage { height: 340px; }
  .home .collage .nook { width: 150px; }
  .home .doors, .home .steps3, .home .promises { grid-template-columns: 1fr; }
  .home .tiles { grid-template-columns: repeat(2, 1fr); }
  .home .stats { grid-template-columns: repeat(2, 1fr); }
  .home .math-imgs { height: 320px; }
  .home .split .row { grid-template-columns: 1fr; gap: 24px; }
  .home .split .rev .pic { order: 0; }
  .home .final .nook { width: 140px; }
}

/* ---------- mobile drawer in the house style: colored section blocks, link chips ---------- */
@media (max-width:1000px) {
  .hdr.drawer .nav { border-top: 0; padding: 14px 16px 48px; gap: 10px; background: #fff; }
  .nav .search { order: 0; margin: 0; }
  .nav-season { order: 1; align-self: stretch; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--yellow); color: var(--navy);
    box-shadow: 0 4px 0 #d9a900; font-size: 1.05rem; }
  .nav-season::before { content: "In season: "; font-weight: 600; }
  .nav-season::after { content: " \2192"; }
  .mm-bar { order: 2; gap: 10px; }
  .mm { border: 0; }
  .mm-btn { color: #fff; border-radius: 14px !important; padding: 15px 18px; font: 800 1.25rem var(--display); }
  .mm[data-k="color"] .mm-btn { background: var(--red); }
  .mm[data-k="cbn"] .mm-btn { background: var(--blue); }
  .mm[data-k="math"] .mm-btn { background: var(--purple); }
  .mm[data-k="draw"] .mm-btn { background: var(--green); }
  .mm.open .mm-btn { color: #fff; filter: brightness(.95); }
@media (hover: hover) { .mm-btn:hover { color: #fff; filter: brightness(.95); } }
  .mm[data-k="color"].open .mm-btn { background: var(--red); }
@media (hover: hover) { .mm[data-k="color"] .mm-btn:hover { background: var(--red); } }
  .mm[data-k="cbn"].open .mm-btn { background: var(--blue); }
@media (hover: hover) { .mm[data-k="cbn"] .mm-btn:hover { background: var(--blue); } }
  .mm[data-k="math"].open .mm-btn { background: var(--purple); }
@media (hover: hover) { .mm[data-k="math"] .mm-btn:hover { background: var(--purple); } }
  .mm[data-k="draw"].open .mm-btn { background: var(--green); }
@media (hover: hover) { .mm[data-k="draw"] .mm-btn:hover { background: var(--green); } }
  .mm.open .mm-btn { border-radius: 14px 14px 0 0 !important; }
  .mm-panel { background: var(--soft); border-radius: 0 0 14px 14px; padding: 14px 12px 16px; gap: 14px; box-shadow: none; }
  .mm-cols { gap: 16px; }
  .mm-col { min-width: 0; }
  .mm-h { font: 800 .8rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }
  .mm-col ul, .mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mm-cols, .mm-col, .mm-panel { min-width: 0; max-width: 100%; }
  .mm-col li a { margin: 0; padding: 10px 12px; background: #fff; border-radius: 10px; font-weight: 700; color: var(--navy);
    box-shadow: 0 2px 0 #d9e3ee; align-items: center; line-height: 1.2; }
  @media (hover: hover) { .mm-col li a:hover { background: #fff; color: var(--red); } }
  .mm-col .n { background: var(--soft); flex: none; }
  .mm-col li.more { grid-column: 1 / -1; }
  .mm-col li.more a { background: none; box-shadow: none; padding: 4px; color: var(--red); }
  .mm-side { gap: 10px; }
  .mm-feature { background: #fff; padding: 10px; }
  .mm-feature img { width: 64px; }
  .mm-note { font-size: .92rem; padding: 0 4px; }
}

/* ---------- announcement bar (rotating messages) ---------- */
.announce { position: relative; z-index: 21; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--navy);
  min-height: 40px; padding: 0 44px; overflow: hidden; }
.ann-track { position: relative; flex: 1; max-width: 760px; height: 40px; }
.ann { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  font-weight: 800; font-size: .95rem; line-height: 1.2; opacity: 0; transform: translateX(40px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.ann.on { opacity: 1; transform: none; pointer-events: auto; }
.ann.out { opacity: 0; transform: translateX(-40px); }
.ann.back:not(.on) { transform: translateX(40px); }
.ann.on.back { animation: annBack .45s ease; }
@keyframes annBack { from { opacity: 0; transform: translateX(-40px); } }
@media (hover: hover) { .ann:hover { text-decoration: underline; } }
.ann-prev, .ann-next { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--navy); font: 800 1.6rem/1 var(--body);
  width: 36px; height: 36px; cursor: pointer; border-radius: 50%; }
.ann-prev { left: 6px; } .ann-next { right: 6px; }
@media (hover: hover) { .ann-prev:hover, .ann-next:hover { background: rgba(0, 0, 0, .08); } }

/* ---------- scroll reveal (only with JS, never for reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(0, 0, .3, 1), transform .7s cubic-bezier(0, 0, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (hover: hover) { .js .card.reveal.in:hover, .js .cat-card.reveal.in:hover { transform: translateY(-4px) rotate(-.5deg); transition-delay: 0s; } }
@media (hover: hover) { .js .home .door.reveal.in:hover, .js .home .tile.reveal.in:hover { transform: translateY(-4px); transition-delay: 0s; } }
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } .announce { display: none; } }

/* ---------- hero seal, check row, highlighter ---------- */
.home .seal { position: absolute; left: 4%; top: -6px; width: 112px; height: 112px; z-index: 3; animation: spin 24s linear infinite;
  filter: drop-shadow(0 6px 10px rgba(10, 40, 80, .25)); }
.home .seal text { font: 800 11.2px var(--body); letter-spacing: 1.1px; fill: var(--navy); }
.home .seal .seal-mid { font: 800 22px var(--display); letter-spacing: 0; fill: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }
.home .checks { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.home .checks li { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); }
.home .checks li::before { content: ""; width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
mark { background: linear-gradient(transparent 12%, var(--yellow) 12%, var(--yellow) 88%, transparent 88%); color: inherit; padding: 0 .15em; }
@media (prefers-reduced-motion: reduce) { .home .seal { animation: none; } }

/* ---------- menu: drawn section icons (phones) and the in-season card ---------- */
.mm-ic { display: none; }
.nav-season .season-img, .nav-season .season-txt { display: none; }
@media (max-width:1000px) {
  .mm-btn { justify-content: flex-start; gap: 14px; padding: 10px 16px 10px 10px; }
  .mm-btn span { flex: 1; text-align: left; }
  .nav-season { display: flex !important; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--navy); color: #fff; box-shadow: 0 4px 0 #0c1630; }
  .nav-season::before, .nav-season::after { content: none; }
  .nav-season .season-chip { display: none; }
  .nav-season .season-img { display: block; width: 64px; height: auto; border-radius: 8px; border: 3px solid #fff; background: #fff; transform: rotate(-4deg); }
  .nav-season .season-txt { display: flex; flex-direction: column; line-height: 1.15; }
  .nav-season small { font: 800 .72rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
  .nav-season b { font: 800 1.35rem var(--display); }
  .nav-season em { font-style: normal; font-weight: 700; font-size: .9rem; color: #c9d6ee; }
  .announce { padding: 0 38px; }
  .ann { font-size: .85rem; }
}
@media (max-width:600px) { .ann-track { height: 46px; } .announce { min-height: 46px; } .ann { font-size: .8rem; } }

/* tag rows: one swipeable line on phones instead of a tall stack of pills */
.topic-links a { font-size: .95rem; padding: 6px 14px; }
@media (max-width:700px) {
  .topic-links { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 8px; gap: 8px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .topic-links::-webkit-scrollbar { display: none; }
  .topic-links > * { flex: none; scroll-snap-align: start; }
  .topic-links span { font-size: .9rem; }
  .topic-links a { white-space: nowrap; font-size: .9rem; padding: 7px 13px; }
}
/* a nowrap tag row must never widen its grid column (item pages on phones) */
.item-grid > *, .item-info { min-width: 0; }
@media (max-width: 860px) { .item-grid { grid-template-columns: minmax(0, 1fr); } }
/* announcement: slide whole messages past each other instead of cross-fading (no overlapping text) */
.ann-track { overflow: hidden; }
.ann { transform: translateX(105%); opacity: 1; visibility: hidden; transition: transform .5s ease, visibility 0s linear .5s; }
.ann.on { transform: none; visibility: visible; transition: transform .5s ease, visibility 0s; }
.ann.out { transform: translateX(-105%); visibility: visible; transition: transform .5s ease, visibility 0s linear .5s; }
.ann.out.back { transform: translateX(105%); }
.ann.on.back { animation: annIn .5s ease; }
@keyframes annIn { from { transform: translateX(-105%); } }
.ann:not(.on):not(.out) { transition: none; }

/* ---------- home: printables by age (three big colored cards, photo on one side) ---------- */
.home .ages-band { padding-top: 8px; }
.home .ages { display: grid; gap: 24px; margin-top: 34px; }
.home .age { display: grid; grid-template-columns: 5fr 7fr; border-radius: 22px; overflow: hidden; color: #fff; min-height: 270px;
  box-shadow: 0 14px 34px rgba(22, 38, 74, .14); }
.home .age-pic { position: relative; min-height: 240px; border-right: 6px solid rgba(255, 255, 255, .9); }
.home .age-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home .age.rev .age-pic { order: 2; border-right: 0; border-left: 6px solid rgba(255, 255, 255, .9); }
.home .age-txt { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.home .age h3 { color: #fff; font-size: 2rem; margin: 0 0 8px; }
.home .age h3 small { display: inline-block; font: 800 .8rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
  margin-left: 6px; padding: 3px 11px; border-radius: 999px; background: var(--yellow); color: var(--navy); }
.home .age p { margin: 0 0 20px; font-size: 1.1rem; max-width: 36rem; color: rgba(255, 255, 255, .94); }
.home .age-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.home .age-btns a { text-decoration: none; background: #fff; color: var(--navy); border-radius: 999px; padding: 9px 16px; font: 800 1.02rem var(--body);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2); transition: transform .15s; }
@media (hover: hover) { .home .age-btns a:hover { transform: translateY(-2px); color: var(--red-dark); } }
.home .age-btns small { font: 700 .78rem var(--body); color: var(--muted); margin-left: 2px; }
.home .a1 { background: var(--blue-dark); }
.home .a2 { background: var(--yellow); color: var(--navy); }
.home .a2 h3, .home .a2 p { color: var(--navy); }
.home .a2 h3 small { background: var(--navy); color: #fff; }
.home .a2 .age-btns a { box-shadow: 0 4px 0 #d9a900; }
.home .a3 { background: var(--navy); }
@media (max-width: 900px) {
  .home .age { grid-template-columns: 1fr; min-height: 0; }
  .home .age-pic, .home .age.rev .age-pic { order: 0; min-height: 0; aspect-ratio: 16 / 9; border: 0; border-bottom: 6px solid rgba(255, 255, 255, .9); }
  .home .age-txt { padding: 22px 20px 24px; }
  .home .age h3 { font-size: 1.6rem; }
  .home .age h3 small { margin: 6px 0 0; }
}

/* ---------- "New" stickers: gallery cards and topic pills from the newest batch ---------- */
.card.is-new { position: relative; }
.new-tag { position: absolute; left: 10px; top: 10px; z-index: 2; pointer-events: none; background: var(--red); color: #fff;
  font: 800 .74rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px 4px; border-radius: 999px;
  box-shadow: 0 0 0 2px var(--yellow), 0 3px 8px rgba(22, 38, 74, .25); transform: rotate(-6deg); }
.pill-links em { font: 800 .68rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red);
  padding: 3px 7px 2px; border-radius: 999px; box-shadow: 0 0 0 2px var(--yellow); margin-left: 6px; vertical-align: 2px; }
@media print { .new-tag { display: none; } }
/* mid-size screens: keep the one-line header from overlapping */
@media (min-width:1001px) and (max-width:1200px) {
  .mm-btn { padding: 8px 8px; font-size: .92rem; }
  .nav-season { display: none !important; }
}

/* Umbrella topic hubs: one card row per child topic */
.hub-group { margin-top: 28px; }
.hub-group .section-head h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .hub-group .section-head h2 a:hover { color: var(--blue-dark); } }

/* Activities menu (spot the difference, hidden pictures, preschool, tracing) */
@media (max-width:1000px) {
  .mm[data-k="act"] .mm-btn, .mm[data-k="act"].open .mm-btn { background: #f07f1a; }
@media (hover: hover) { .mm[data-k="act"] .mm-btn:hover { background: #f07f1a; } }
  .mm[data-k="read"] .mm-btn, .mm[data-k="read"].open .mm-btn { background: #c2255c; }
@media (hover: hover) { .mm[data-k="read"] .mm-btn:hover { background: #c2255c; } }
  .mm[data-k="write"] .mm-btn, .mm[data-k="write"].open .mm-btn { background: #0f8b8d; }
@media (hover: hover) { .mm[data-k="write"] .mm-btn:hover { background: #0f8b8d; } }
}
@media (min-width:1001px) and (max-width:1200px) {
  .mm-btn { padding: 8px 6px; font-size: .9rem; }
}
@media (min-width:1201px) and (max-width:1600px) { /* 7 menus since the Writing section (2026-11-06): keep the search button on screen */
  .mm-btn { padding: 9px 6px 8px; font-size: 1rem; }
}
@media (min-width:1001px) and (max-width:1750px) {
  .nav-season { display: none !important; }
}

/* "Play it online" button on printables that have an online game at /play/ */
.btn-play { background: var(--green); color: #fff; box-shadow: 0 5px 0 #168a56; }
@media (hover: hover) { .btn-play:hover { background: #1ea566; } }

/* phones: no double-tap zoom delay on links and buttons (taps register at once) */
html { touch-action: manipulation; -webkit-tap-highlight-color: rgba(18, 161, 220, .15); }

/* instant feedback on tap: links and buttons press in while the finger is down (owner: "buttons do not react instantly") */
.btn, .card, .cat-card, .door, .tile, .chip, .gcard-dl, .pill-links a, .topic-links a, .menu-toggle, .mm-btn, .mm-col li a,
.play-door, .play-card, .path-node, .pager a, .nav-season, .ann-prev, .ann-next { transition: transform .08s ease-out, box-shadow .15s; }
.btn:active, .card:active, .cat-card:active, .door:active, .tile:active, .chip:active, .gcard-dl:active, .pill-links a:active,
.topic-links a:active, .menu-toggle:active, .mm-btn:active, .play-door:active, .play-card:active, .path-node:active, .pager a:active,
.nav-season:active { transform: scale(.96); }
.mm-col li a:active, .ann-prev:active, .ann-next:active { background: var(--soft); }

/* "Games" link in the header (online games at /play/): a green pill next to the menu */
.nav-games { margin-left: 6px; white-space: nowrap; text-decoration: none; font: 800 .98rem "Figtree", sans-serif; color: #fff; background: var(--green);
  border-radius: 999px; padding: 8px 14px; box-shadow: 0 3px 0 #168a56; transition: transform .08s ease-out; }
.nav-games:active { transform: scale(.96); }
@media (hover: hover) { .nav-games:hover { background: #1ea566; } }
@media (max-width: 1000px) {
  .nav-games { order: 1; align-self: stretch; margin: 0 0 8px; padding: 12px 16px; border-radius: 14px; font-size: 1.1rem; text-align: left; }
}
/* desktop header with the Games pill: a little wider than the content, season chip only in the drawer and the menus */
@media (min-width: 1001px) {
  .hdr > .wrap { width: min(1300px, 100% - 32px); }
  .hdr .nav-season { display: none !important; }
}
@media (min-width: 1001px) and (max-width: 1339px) {
  .mm-btn { font-size: .9rem; padding-left: 6px; padding-right: 6px; }
  .logo-mark { width: 84px; }
  .nav-games { padding: 7px 11px; font-size: .9rem; }
}
@media (min-width: 1001px) and (max-width: 1099px) {
  .mm-btn { font-size: .84rem; padding-left: 4px; padding-right: 4px; gap: 3px; }
  .logo-mark { width: 72px; }
  .hdr-in { gap: 8px; }
}
/* six menu items since the Reading menu (2026-11-04): no chevrons on small laptops so the header never scrolls sideways */
@media (min-width: 1001px) and (max-width: 1219px) {
  .mm-btn svg { display: none; }
}

/* ---------- menu icons (assets/icons/nav/*.svg) and the phone drawer rows: drawn icon on a white chip, bold label, round chevron ---------- */
.nav-go, .nav-games .ng-sub, .nav-games .ng-go { display: none; }
.nav-games { display: inline-flex; align-items: center; gap: 4px; min-height: 37px; padding-left: 8px; padding-right: 13px; }
.nav-games .ng-ic { flex: none; width: 26px; height: 26px; margin: -6px 0; }
@media (min-width: 1001px) and (max-width: 1339px) {
  .nav-games { gap: 3px; min-height: 34px; padding-left: 6px; padding-right: 9px; }
  .nav-games .ng-ic { width: 22px; height: 22px; }
}
@media (max-width: 1000px) {
  .hdr.drawer .nav { gap: 12px; }
  .mm-bar { gap: 12px; }
  .mm[data-k="color"] { --cd: var(--red-dark); } .mm[data-k="cbn"] { --cd: var(--blue-dark); } .mm[data-k="math"] { --cd: #4c2a94; }
  .mm[data-k="act"] { --cd: #c25f0c; } .mm[data-k="draw"] { --cd: #168a56; } .mm[data-k="read"] { --cd: #8f1a44; } .mm[data-k="write"] { --cd: #0a6466; }
  .mm-btn { min-height: 66px; gap: 14px; padding: 9px 12px 9px 9px; font: 800 1.3rem/1.1 var(--display); border-radius: 16px !important;
    box-shadow: 0 4px 0 var(--cd, #0c1630); }
  .mm.open .mm-btn { border-radius: 16px 16px 0 0 !important; box-shadow: none; filter: none; }
  .mm-panel { border-radius: 0 0 16px 16px; }
  /* white chip behind every drawn icon, so each one reads on any row color */
  .mm-ic, .nav-games .ng-ic { display: block; flex: none; box-sizing: border-box; width: 48px; height: 48px; padding: 5px; margin: 0;
    background: #fff; border-radius: 14px; box-shadow: inset 0 -3px 0 rgba(22, 38, 74, .12); }
  /* chevrons sit in a soft round button, all on one vertical line */
  .mm-btn svg, .nav-go { display: block; flex: none; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .2); color: #fff; }
  .mm-btn svg { padding: 12px 9px 11px; }
  .nav-go { padding: 9px 10px 9px 12px; }
  /* Games: the main action, a taller green row with a sub-line and a yellow play button */
  .nav-games { display: flex; gap: 14px; min-height: 76px; margin: 0; padding: 10px 10px 10px 9px; border-radius: 16px;
    font: 800 1.42rem/1.05 var(--display); box-shadow: 0 5px 0 #168a56; }
  .nav-games .ng-ic { width: 54px; height: 54px; padding: 6px; }
  .nav-games .ng-t { flex: 1; display: flex; flex-direction: column; }
  .nav-games .ng-sub { display: block; margin-top: 3px; font: 700 .86rem/1.2 var(--body); color: #e3fbef; }
  .nav-games .ng-go { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 3px 0 rgba(12, 22, 48, .28); }
  /* in-season card: same height rhythm, radius and chevron as the rows */
  .nav-season { gap: 14px; padding: 9px 12px 9px 9px; border-radius: 16px; }
  .nav-season .season-img { width: 48px; }
  .nav-season .season-txt { flex: 1; }
  .nav-season b { font-size: 1.3rem; line-height: 1.1; }
}

/* ---------- home UX fixes 2026-11-04 ---------- */
/* pills on the navy games band: text inherited the light band color and was invisible on the white pills */
.home .navy .pill-links a { color: var(--navy); }
/* download buttons line up at the bottom of every card, whatever the title length */
.gcard-dl { margin-top: auto; }
/* tile counts say what they count and sit above the name label, never over the sheet title */
.home .tile i { top: auto; right: auto; left: 10px; bottom: 46px; font-size: .78rem; }
/* online game tiles get a play button so they read as games, not printables */
.home .tile .tplay { position: absolute; left: 50%; top: 42%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--red); box-shadow: 0 4px 0 var(--red-dark), 0 6px 18px rgba(0, 0, 0, .18); }
.home .tile .tplay::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff; }
.pill-all { display: none !important; }
@media (max-width: 600px) {
  /* .grid-4 was declared after the phone rule and forced one huge card per row on phones */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* long pill walls: first 8 + a link to the full list */
  .home .all-themes.cap a:nth-of-type(n+9) { display: none; }
  .home .all-themes.cap a.pill-all { display: inline-flex !important; font-weight: 800; border-color: var(--navy); }
  /* doors: shorter pictures so the five doors are not five screens */
  .home .dphoto img { aspect-ratio: 16 / 7; }
  .home .dcards img { aspect-ratio: auto; height: 120px; }
  .home .tile b { font-size: .92rem; padding: 2px 10px; }
  .home .tile i { bottom: 40px; }
  .home .tile .tplay { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .home .tile .tplay::after { left: 17px; top: 13px; border-width: 9px 0 9px 14px; }
}
/* the play band intro lined up with the heading, not centered under it */
.home .play-band .lede { margin-left: 0; }

/* ---------- home restructure 2026-11-04: 13 sections -> 8 ---------- */
/* hero runs straight into the navy season band */
.home .hero.to-navy .torn.bot path { fill: var(--navy); }
/* hero numbers are facts, not buttons */
.home .stat { background: none; border-radius: 0; border-left: 3px solid rgba(255, 255, 255, .35); text-align: left; padding: 2px 0 2px 12px; }
/* age card with worksheet cards instead of a photo */
.home .age-cards { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 22px 22px 0; background: rgba(255, 255, 255, .1); }
.home .age-cards img { position: static; width: 44%; height: auto; aspect-ratio: 320 / 414; object-fit: cover; object-position: top;
  border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.home .age-cards img:nth-child(2) { transform: translateY(-14px) rotate(3deg); }
.home .age-skills { margin-top: 22px; }
/* games band: three tabs (CSS radios, no JS); hidden panels do not load their lazy images */
.home .games-band .headrow { margin-bottom: 18px; }
.home .purple .pill-links a { color: var(--navy); }
.home .purple .pill-links .muted { color: #e2d8ff; }
.home .purple .card-body { color: var(--navy); }
.home .purple h2 em { font-style: normal; color: var(--yellow); }
.home .gtabs { display: flex; flex-wrap: wrap; gap: 10px; }
.home .gtabs input { position: absolute; opacity: 0; pointer-events: none; }
.home .gtabs label { cursor: pointer; padding: 10px 20px; border-radius: 999px; font: 800 1.1rem var(--display); color: #fff;
  background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .35); }
.home .gtabs label small { font: 700 .8rem var(--body); opacity: .85; margin-left: 4px; }
.home .gtabs input:checked + label { background: var(--yellow); border-color: var(--yellow); color: var(--navy); box-shadow: 0 3px 0 #d9a900; }
.home .gtabs input:focus-visible + label { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .home .gtabs label:hover { border-color: #fff; } }
.home .gpanel { display: none; flex-basis: 100%; margin-top: 18px; }
.home #gt-online:checked ~ .gp-online, .home #gt-draw:checked ~ .gp-draw, .home #gt-puzzles:checked ~ .gp-puzzles { display: block; }
.home .gpanel .lede { max-width: 760px; margin: 0 0 22px; color: #efe8ff; text-align: left; }
.home .gpanel .pill-links { margin-top: 20px; }
.home .gmore { margin-top: 22px; }
@media (max-width: 600px) {
  .home .gtabs { gap: 8px; }
  .home .gtabs label { padding: 8px 14px; font-size: 1rem; }
  .home .gtabs label small { display: none; }
  .home .gpanel .all-themes { display: none; }
  .home .age-cards { padding: 16px 16px 0; min-height: 0; }
}
@media (max-width: 600px) {
  /* season band: 4 cards on phones, "See all" covers the rest */
  .home .navy .grid-4 .gcard:nth-child(n+5) { display: none; }
  .home .age-pic { min-height: 150px; height: 150px; }
  .home .age-cards { height: auto; }
}

/* riddle and joke lists on topic pages (qa_section, 2026-11-04) */
.qa-list { padding-left: 1.4em; display: grid; gap: 10px; }
.qa-list li { padding: 10px 14px; background: #fff8ec; border-radius: 12px; }
.qa-list .qa-q { margin: 0 0 4px; font-weight: 700; }
.qa-list details summary { cursor: pointer; color: #c2255c; font-weight: 800; font-size: .92rem; min-height: 32px; display: flex; align-items: center; }
.qa-list details p { margin: 4px 0 0; }

/* SEO pass 2026-11-04: the keyword line is the H1, the slogan keeps the big look as a paragraph */
.home .hero .slogan { font-family: var(--display); font-weight: 800; line-height: 1.06; margin: 0 0 .45em; font-size: clamp(2.3rem, 5.2vw, 4rem); color: #fff; }
.home .hero .slogan em { font-style: normal; color: var(--yellow); }
.home .hero h1.kicker { font: 800 .85rem/1.4 var(--body); margin: 0 0 10px; }
.home .gtitle { color: #fff; font-size: 1.45rem; margin: 0 0 8px; }

/* very narrow phones (iPhone SE / mini, 320 px): logo + "Menu" did not fit and the page scrolled sideways; icon-only button, word kept for screen readers */
@media (max-width: 374px) { .menu-toggle { font-size: 0; gap: 0; padding: 10px 12px; min-width: 44px; min-height: 44px; justify-content: center; } }

/* ---------- Buttons, 2026-11-05: flat pills like tuttletwins.com (owner: the chunky 3D buttons "look AI-generated") ----------
   No colored "ledge" under the button, no lift on hover. Solid pill, medium-weight text, roomy padding;
   on hover the colors swap (filled -> outlined), like on Tuttle Twins. */
:root { --btn-red: #d9503f; --btn-red-dark: #b83f30; }
.btn { border: 2px solid transparent; border-radius: 999px; box-shadow: none; min-height: 54px; padding: 0 34px;
  font: 700 1.04rem/1.15 var(--body); letter-spacing: 0; transform: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .08s ease-out; }
.btn-lg { min-height: 62px; padding: 0 40px; font-size: 1.12rem; }
@media (hover: hover) { .btn:hover { transform: none; } }
.btn:active { transform: scale(.97); }
/* default and ghost: white with a navy outline -> navy fill on hover */
.btn, .btn-ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
@media (hover: hover) { .btn:hover, .btn-ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); } }
/* primary: brick red fill -> white with red outline on hover */
.btn-primary, .cat-hero .btn-primary { background: var(--btn-red); color: #fff; border-color: var(--btn-red); box-shadow: none; }
@media (hover: hover) { .btn-primary:hover, .cat-hero .btn-primary:hover { background: #fff; color: var(--btn-red); border-color: var(--btn-red); } }
/* light (on the blue hero): white fill -> outlined white on hover */
.btn-light { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }
@media (hover: hover) { .btn-light:hover { background: transparent; color: #fff; border-color: #fff; } }
/* yellow (on navy / purple bands): yellow fill -> outlined yellow on hover */
.btn-yellow { background: var(--yellow); color: var(--navy); border-color: var(--yellow); box-shadow: none; }
@media (hover: hover) { .btn-yellow:hover { background: transparent; color: var(--yellow); border-color: var(--yellow); } }
/* play online: green fill -> outlined green */
.btn-play { background: var(--green); color: #fff; border-color: var(--green); box-shadow: none; }
@media (hover: hover) { .btn-play:hover { background: #fff; color: #168a56; border-color: var(--green); } }
.btn-link { border-color: transparent; background: none; min-height: 0; padding-inline: 8px; }
@media (hover: hover) { .btn-link:hover { background: none; color: var(--btn-red); border-color: transparent; } }

/* the same flat look for the other pills that had a 3D ledge */
.menu-toggle, .menu-toggle[aria-expanded="true"] { box-shadow: none !important; font-family: var(--body); font-weight: 700; }
.menu-toggle { background: var(--btn-red); }
@media (hover: hover) { .menu-toggle:hover { background: var(--btn-red-dark); } }
.nav-season, .nav-games, .nav-games .ng-go, .gcard-dl, .home .tile .tplay, .home .gtabs input:checked + label { box-shadow: none; }
.gcard-dl { background: var(--btn-red); border-radius: 999px; font-weight: 700; transition: background-color .25s ease; }
@media (hover: hover) { .gcard-dl:hover { background: var(--btn-red-dark); } }
.home .tile .tplay { background: var(--btn-red); }
.nav-games { font-weight: 700; }
.home .age-btns a { box-shadow: none; border: 2px solid #fff; font-weight: 700; transition: background-color .25s ease, color .25s ease, transform .08s ease-out; }
.home .a2 .age-btns a { box-shadow: none; border-color: #fff; }
@media (hover: hover) { .home .age-btns a:hover { transform: none; background: transparent; color: #fff; }
  .home .a2 .age-btns a:hover { color: var(--navy); border-color: var(--navy); }
  .home .age-btns a:hover small { color: inherit; } }
.home .gradebtns a { box-shadow: none; border: 2px solid #fff; transition: background-color .25s ease, color .25s ease; }
@media (hover: hover) { .home .gradebtns a:hover { background: transparent; color: #fff; } .home .gradebtns a:hover small { color: #e2d8ff; } }
@media (max-width: 1000px) {
  .mm-btn { box-shadow: none; }
  .nav-season { box-shadow: none; }
  .nav-games { box-shadow: none; }
}
/* phones: the roomier padding must not push long labels past the screen edge */
@media (max-width: 600px) { .btn { padding: 10px 24px; text-align: center; } .btn-lg { padding: 12px 26px; } }
/* hover fix 2026-11-05: an old rule (.btn-primary:hover { box-shadow: 6px 6px 0 coral }) still drew the offset ledge on hover */
@media (hover: hover) {
  .btn:hover, .btn-primary:hover, .btn-light:hover, .btn-yellow:hover, .btn-play:hover, .btn-ghost:hover, .cat-hero .btn-primary:hover { box-shadow: none; transform: none; }
  /* the other pills swap fill -> outline too, instead of just going darker */
  .menu-toggle:hover { background: #fff; color: var(--btn-red); box-shadow: inset 0 0 0 2px var(--btn-red) !important; }
  .gcard-dl:hover { background: #fff; color: var(--btn-red); box-shadow: inset 0 0 0 2px var(--btn-red); }
  .nav-games:hover { background: #fff; color: #168a56; box-shadow: inset 0 0 0 2px var(--green); }
}
.menu-toggle, .gcard-dl, .nav-games { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .08s ease-out; }

/* header search on computers (2026-11-05): the menus fill the header, so a squeezed box showed only an empty white ring.
   Now it is one round red button; a click opens the search field under it (assets/search.js adds .open). Phones keep the box in the drawer. */
@media (min-width: 1001px) {
  .hdr-in > .search { flex: none; min-width: 0; margin-left: auto; padding: 0; border: 0; background: none; }
  .hdr-in > .search button { width: 40px; height: 40px; }
  .hdr-in > .search button svg { width: 20px; height: 20px; }
  .hdr-in > .search input { display: none; }
  .hdr-in > .search.open input { display: block; position: absolute; z-index: 61; top: calc(100% + 10px); right: 0; width: 340px; padding: 11px 18px;
    background: #fff; border: 2px solid var(--blue); border-radius: 999px; box-shadow: 0 10px 28px rgba(20,40,80,.18); font-size: 1rem; }
  .hdr-in > .search.open .sugg { top: calc(100% + 66px); right: 0; }
}

/* phones/tablets: iOS zooms the whole page when a focused field is under 16px - keep fields at 16px on touch screens */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, .search input, .search-big input, .hdr-in > .search.open input { font-size: 16px !important; }
}

/* big full-width search bar under the header on every page (2026-11-05, owner: "a very important element on our page") */
.search-band { background: var(--soft); border-bottom: 1px solid var(--line); padding: 14px 0; }
.search.search-xl { width: 100%; max-width: none; margin: 0; padding: 5px 6px 5px 22px; border: 3px solid var(--blue); background: #fff;
  box-shadow: 0 6px 18px rgba(18, 161, 220, .16); }
.search.search-xl:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(18, 161, 220, .25); }
.search.search-xl input { font: 600 1.15rem var(--body); padding: 13px 0; }
.search.search-xl button { width: auto; height: 50px; padding: 0 22px 0 18px; border-radius: 999px; gap: 8px; display: flex; align-items: center;
  font: 800 1.1rem var(--display); }
.search.search-xl button svg { width: 22px; height: 22px; }
.search.search-xl button::after { content: "Search"; }
.search.search-xl .sugg { left: 0; right: 0; width: auto; }
@media (max-width: 600px) {
  .search-band { padding: 10px 0; }
  .search.search-xl { flex: none; padding: 4px 4px 4px 16px; }
  .search.search-xl input { font-size: 17px !important; padding: 11px 0; }
  .search.search-xl button { height: 46px; width: 46px; padding: 0; justify-content: center; }
  .search.search-xl button::after { content: none; }
}
/* search page hero: the box is full width too (2026-11-05, owner: "full width"); white rim so it shows on the blue band */
.cat-hero .search.search-xl { border-color: #fff; }
.cat-hero .search.search-xl:focus-within { border-color: var(--yellow); }

/* ---------- home UX review 2026-11-05 ---------- */
/* online game tiles: a "Play" pill instead of a round button that read as a video */
.home .tile .tplay { width: auto; height: 44px; margin: 0; top: 40%; transform: translate(-50%, -50%); padding: 0 20px 0 40px; border-radius: 999px;
  display: flex; align-items: center; color: #fff; font: 800 1.05rem var(--display); letter-spacing: .01em; white-space: nowrap; }
.home .tile .tplay::after { left: 18px; top: 13px; border-width: 9px 0 9px 14px; }
/* season band: the next holiday as a strip of 4 small sheets */
.home .next-strip { margin-top: 34px; display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: 26px; align-items: center;
  padding: 22px 24px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 2px dashed rgba(255, 210, 63, .55); }
.home .next-strip h3 { margin: 4px 0 16px; font-size: 1.6rem; line-height: 1.15; }
.home .next-strip h3 a { color: #fff; text-decoration: none; }
.home .ns-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home .ns-cards a { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.home .ns-cards img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 414; object-fit: cover; }
@media (hover: hover) { .home .ns-cards a:hover { outline: 3px solid var(--yellow); } }
/* teachers + parents: one band, two cards side by side (was two big photo rows) */
.home .duo-in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.home .duo-card { background: var(--soft); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.home .duo-pic { width: 100%; height: 220px; object-fit: cover; display: block; }
.home .duo-card > div { padding: 24px 28px 28px; }
.home .duo-card h2 { font-size: 1.6rem; margin: 4px 0 10px; }
.home .duo-card p { margin: 0 0 18px; }
/* preschool photo: keep the faces in the crop */
.home .a1 .age-pic img { object-position: center 18%; }
/* "more themes" pills: 16 on computers too (all of them stay in the page as links) */
.home .all-themes.cap a:nth-of-type(n+17):not(.pill-all) { display: none; }
.home .all-themes.cap a.pill-all { display: inline-flex !important; font-weight: 800; border-color: var(--navy); }
/* newsletter in the final red band */
.home .final-in { grid-template-columns: auto 1fr; }
.home .nl h2 { margin-bottom: 6px; }
.home .nl > p { margin: 0 0 16px; }
.home .nl-form { display: flex; gap: 10px; max-width: 620px; flex-wrap: wrap; }
.home .nl-form input[type=email] { flex: 1 1 260px; min-height: 54px; padding: 0 22px; border-radius: 999px; border: 2px solid #fff; font: 600 1.05rem var(--body); color: var(--navy); }
.home .nl-form input[type=email]:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.home .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.home .final .nl-note { margin: 12px 0 0; font-size: .92rem; opacity: .95; }
.home .final .nl-note a, .home .final .nl-ok { color: #fff; }
.home .final .nl-ok { font: 800 1.25rem var(--display); margin: 8px 0 0; }
/* softer, quicker scroll reveal */
.js .reveal { transform: translateY(12px); transition-duration: .35s, .35s; transition-delay: calc(var(--i, 0) * 40ms); }
@media (max-width: 900px) {
  .home .next-strip { grid-template-columns: 1fr; gap: 16px; }
  .home .duo-in { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  /* hero: the photo collage pushed the first printable two screens down; on phones the season sheets come right after the facts */
  .home .hero .collage { display: none; }
  .home .hero { padding: 28px 0 64px; }
  .home .btns { margin: 20px 0 22px; gap: 10px; }
  .home .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .home .stat { padding: 2px 0 2px 8px; }
  .home .stat b { font-size: 1.35rem; }
  .home .stat span { font-size: .72rem; line-height: 1.2; display: block; }
  .home .next-strip { padding: 16px; margin-top: 24px; }
  .home .next-strip h3 { font-size: 1.3rem; margin-bottom: 12px; }
  .home .ns-cards { gap: 8px; }
  /* by-age cards: text and buttons only, the pictures added ~3 screens */
  .home .age-pic { display: none; }
  /* 4 drawing guides and 4 game tiles on phones; "All ..." buttons cover the rest */
  .home .band .grid-4 .tut-card:nth-child(n+5), .home .gpanel .tiles .tile:nth-child(n+5), .home .gpanel .grid-4 > :nth-child(n+5) { display: none; }
  .home .all-themes.cap a:nth-of-type(n+9):not(.pill-all) { display: none; }
  .home .duo-pic { height: 150px; }
  .home .duo-card > div { padding: 18px 20px 22px; }
  .home .final .nook { display: none; }
  .home .nl-form .btn { width: 100%; }
}
@media (max-width: 600px) {
  /* hero stars sat on top of the kicker text */
  .home .hero > .doodle, .home .final > .doodle { display: none; }
  /* doors: 2 per row, title + one sheet + link (the 6 tall doors were ~6 screens) */
  .home .doors { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .home .door { padding: 14px 12px 0; border-radius: 16px; }
  .home .door h3 { font-size: 1.08rem; line-height: 1.15; }
  .home .door p { display: none; }
  .home .door .go { font-size: .88rem; margin-bottom: 10px; }
  .home .dphoto { margin: auto -12px 0; border-top-width: 4px; }
  .home .dcards { padding: 8px 8px 0; }
  .home .dcards img { width: 100%; height: 110px; }
  .home .dcards img + img { display: none; }
  .home .checks { gap: 6px 14px; }
  /* by-age buttons: smaller pills, two per line */
  .home .age-btns { gap: 8px; }
  .home .age-btns a { padding: 6px 12px; font-size: .9rem; }
}

/* ---------- search placement 2026-11-05 ---------- */
/* home: the search box sits in the hero under the slogan, with popular picks under it (no band on the home page) */
.home .hero-search { max-width: 620px; margin: 22px 0 12px; border-color: #fff; box-shadow: 0 10px 26px rgba(10, 40, 80, .25); }
.home .hero-search:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 210, 63, .45); }
.home .hero-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; font-size: .92rem; }
.home .hero-pop span { font-weight: 800; color: var(--yellow); margin-right: 2px; }
.home .hero-pop a { color: #fff; text-decoration: none; font-weight: 700; padding: 5px 13px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); }
@media (hover: hover) { .home .hero-pop a:hover { background: #fff; color: var(--navy); border-color: #fff; } }
.home .hero .sub { margin-top: 0; }
/* magnifier in the sticky header: phones and tablets only (computers have the band / the hero box) */
/* computers: the magnifier sits at the right end of the sticky header too (2026-11-05), see "Play online pill" below */
@media (max-width: 1000px) {
  .search-band { display: none; }
  .hdr-in > .search.hdr-q { display: flex; flex: none; margin-left: auto; padding: 0; border: 0; background: none; position: static; min-width: 0; }
  .hdr-in > .search.hdr-q + .menu-toggle { margin-left: 8px; }
  .hdr-q button { width: 44px; height: 44px; }
  .hdr-q button svg { width: 20px; height: 20px; }
  .hdr-q input { display: none; }
  .hdr-q.open input { display: block; position: absolute; z-index: 61; top: calc(100% + 8px); left: 12px; right: 12px; width: auto;
    padding: 12px 18px; background: #fff; border: 3px solid var(--blue); border-radius: 999px; box-shadow: 0 12px 30px rgba(20, 40, 80, .22); }
  .hdr-q .sugg { left: 12px; right: 12px; width: auto; top: calc(100% + 66px); }
}
@media (max-width: 600px) {
  .home .hero-search { margin: 16px 0 10px; }
  .home .hero-pop { font-size: .85rem; gap: 6px; margin-bottom: 16px; }
  .home .hero-pop a { padding: 4px 10px; }
}
@media (max-width: 1000px) { .hdr-q button { background: var(--blue); } }
/* phones: logo + magnifier + menu must fit in 320-430 px, so the menu button shows only its icon (the word stays for screen readers) */
@media (max-width: 480px) {
  .hdr-in { gap: 8px; }
  .menu-toggle { font-size: 0 !important; gap: 0 !important; padding: 0 !important; width: 44px; height: 44px; min-width: 44px; justify-content: center; }
}
/* 320-374 px phones: smaller logo and buttons so logo + magnifier + menu fit without sideways scrolling */
@media (max-width: 374px) {
  .hdr-in { gap: 6px; }
  .hdr-in > .logo .logo-mark { width: 60px; height: auto; }
  .hdr-in > .logo .logo-name { font-size: 1.12rem; }
  .hdr-in > .logo .logo-tag { font-size: .44rem; }
  .hdr-q button, .menu-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
}

/* ---------- "Play online" pill + desktop magnifier, 2026-11-05 ----------
   Games got 0 header clicks vs 226 PDF downloads in the first days: an outlined pill instead of the strongest element in the header,
   a play icon instead of a console gamepad, and the label says what it is (online, not the printable drawing games). */
.ng-play { display: none; }
@media (min-width: 1001px) {
  .nav-games { background: #fff; color: #168a56; box-shadow: inset 0 0 0 2px var(--green); padding-left: 7px; gap: 6px; }
  .nav-games .ng-ic { display: none; }
  .nav-games .ng-play { display: block; flex: none; width: 22px; height: 22px; color: var(--green); }
  .hdr-q button { background: var(--blue); }
}
/* room check with iframes 1001-1920: under 1440 px the magnifier does not fit (search stays in the band / hero); at 1340-1439
   (full-size menus) the pill says "Play"; from 1440 px the header row is 80 px wider and "Play online" + magnifier both fit */
/* 2026-11-08: the search band was removed, so the magnifier shows on 1001-1439 px too (it fits: tested 1010-1440 px) */
@media (min-width: 1001px) and (max-width: 1439px) { .hdr-in > .search.hdr-q { display: flex !important; order: 9; margin-left: auto; } }
@media (min-width: 1340px) and (max-width: 1439px) { .nav-games .ng-more { display: none; } }
@media (min-width: 1440px) {
  .hdr > .wrap { width: min(1380px, 100% - 32px); }
  .hdr-in > .search.hdr-q { display: flex; order: 9; margin-left: 10px; }
}
@media (hover: hover) and (min-width: 1001px) {
  .nav-games:hover { background: var(--green); color: #fff; box-shadow: inset 0 0 0 2px var(--green); }
  .nav-games:hover .ng-play { color: #fff; }
  .nav-games:hover .ng-play path { fill: var(--green); }
}

/* ---------- 2026-11-05 owner feedback ---------- */
/* hero without the two buttons: the stats follow the description */
.home .hero .sub { margin-bottom: 26px; }
/* "Play online" pill: navy + yellow play icon (green sat right next to the green "How to draw" underline) */
@media (min-width: 1001px) {
  .nav-games { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
  .nav-games .ng-play { color: var(--yellow); }
  .nav-games .ng-play path { fill: var(--navy); }
}
@media (hover: hover) and (min-width: 1001px) {
  .nav-games:hover { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 2px var(--navy); }
  .nav-games:hover .ng-play { color: var(--yellow); }
  .nav-games:hover .ng-play path { fill: var(--navy); }
}
/* phones/tablets: when the header search is open, a white sheet covers the page under the header (tap it to close) */
@media (max-width: 1000px) {
  .hdr-q.open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #fff; }
  .hdr-q.open input { border-color: var(--blue); box-shadow: none; }
}

/* space between a card grid and the "Related:" pills under it */
.grid + .topic-links { margin-top: 28px; }
@media (max-width: 640px) { .grid + .topic-links { margin-top: 20px; } }

/* "See all N ->" next to section headings: a visible blue pill, not a small underlined link */
.section-head > a { align-self: center; background: var(--blue-dark); color: #fff; text-decoration: none; font-size: 1rem;
  padding: 10px 20px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.12); white-space: nowrap; }
@media (hover: hover) { .section-head > a:hover { background: #096a96; color: #fff; } }
@media (max-width: 640px) { .section-head > a { font-size: .92rem; padding: 8px 16px; } }
/* phones (owner, 2026-11-05: "prea mult aici"): the hero is kicker + slogan + search + 3 popular picks; the description and the
   numbers are hidden on phones (the search placeholder already says how many printables there are) */
@media (max-width: 600px) {
  .home .hero .sub, .home .hero .stats { display: none; }
  .home .hero-pop { flex-wrap: nowrap; margin-bottom: 4px; }
  .home .hero-pop a:nth-of-type(n+4) { display: none; }
  .home .hero { padding-bottom: 56px; }
  .home .hero h1.kicker { font-size: .74rem; }
}
/* phones (owner, 2026-11-05): the hero photo is back, under the search bar and the Popular picks: the photo with the FREE seal and a small Arco,
   without the two loose sheets (the season band right below shows the sheets) */
@media (max-width: 600px) {
  .home .hero .collage { display: block; height: auto; margin: 22px 0 0; padding: 0 0 6px; }
  .home .hero .collage .photo { position: relative; top: 0; right: 0; width: 100%; border-width: 6px; transform: rotate(1.2deg); }
  .home .hero .collage .sheet { display: none; }
  .home .hero .collage .seal { width: 78px; height: 78px; left: -6px; top: -16px; }
  .home .hero .collage .nook { width: 96px; right: -8px; bottom: -22px; }
}
/* phones, next request the same evening ("pune si fisele"): the two sheets are back too, the desktop collage in a phone size */
@media (max-width: 600px) {
  .home .hero .collage { height: 320px; padding: 0; margin-top: 20px; }
  .home .hero .collage .photo { position: absolute; top: 8px; right: 0; width: 88%; border-width: 6px; transform: rotate(2deg); }
  .home .hero .collage .sheet { display: block; width: 31%; border-width: 4px; }
  .home .hero .collage .s1 { left: 0; bottom: 12px; }
  .home .hero .collage .s2 { left: 25%; bottom: -8px; }
  .home .hero .collage .seal { width: 74px; height: 74px; left: 6%; top: -12px; }
  .home .hero .collage .nook { width: 112px; right: -6px; bottom: -18px; }
}
@media (max-width: 374px) { .home .hero-pop a:nth-of-type(n+3) { display: none; } }

/* email pack box on a topic page (build_site.PACK_FORMS, owner's test 2026-11-06): all sheets in one PDF for the newsletter sign-up */
.pack-box { display: flex; align-items: center; gap: 30px; margin: 0 0 28px; padding: 22px 28px; border-radius: var(--radius);
  background: var(--soft); border: 2px dashed var(--blue); scroll-margin-top: 90px; }
.pack-stack { position: relative; flex: none; width: 150px; height: 170px; }
.pack-stack img { position: absolute; top: 8px; left: 22px; width: 104px; height: auto; border-radius: 6px; background: #fff;
  box-shadow: 0 4px 12px rgba(22, 38, 74, .18); }
.pack-stack img:nth-child(1) { transform: rotate(-9deg) translateX(-20px); }
.pack-stack img:nth-child(2) { transform: rotate(7deg) translateX(20px); }
.pack-stack img:nth-child(3) { transform: rotate(-1deg); z-index: 1; }
.pack-text { flex: 1; min-width: 0; }
.pack-text h2 { margin: 0 0 4px; font-size: 1.6rem; color: var(--navy); }
.pack-text > p { margin: 0 0 12px; }
.pack-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 600px; }
.pack-form input[type=email] { flex: 1 1 240px; min-height: 50px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--navy);
  font: 600 1rem var(--body); color: var(--navy); background: #fff; }
.pack-form input[type=email]:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pack-box .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pack-box .pack-note { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.pack-box .pack-ok { margin: 6px 0 0; font: 800 1.15rem var(--display); color: var(--navy); }
@media (max-width: 640px) {
  .pack-box { flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 16px; text-align: left; }
  .pack-stack { width: 150px; height: 140px; margin: 0 auto; }
  .pack-stack img { width: 86px; }
  .pack-text h2 { font-size: 1.35rem; }
  .pack-form .btn { width: 100%; }
}
@media print { .pack-box { display: none !important; } }
.cat-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* "at a glance" facts on topic pages (2026-11-06): under the gallery, short quotable lines for parents and AI assistants */
.glance-wrap { margin-top: 8px; margin-bottom: 8px; }
.glance-wrap h2 { margin: 0 0 12px; }
.glance { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.glance div { background: #f3f8fc; border: 1px solid #dde9f2; border-radius: 14px; padding: 10px 14px; }
.glance dt { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #0a6f9d; }
.glance dd { margin: 2px 0 0; font-size: .95rem; line-height: 1.35; }
@media (max-width: 600px) { .glance { grid-template-columns: 1fr 1fr; gap: 8px; } .glance div { padding: 8px 10px; } .glance dd { font-size: .88rem; } }

/* ---- Menu by area of activity (2026-11-06): Coloring pages, Worksheets (grade filter), Activities, How to draw ---- */
.mm[data-k="ws"] { --c: #6c3fc5; }
.ws-col li[hidden], .mm-none[hidden], .g-filter [hidden] { display: none !important; }
.mm-none { font: 600 .9rem var(--body); color: var(--muted); padding: 6px 4px; }
.ws-wrap { flex: 1; min-width: 0; }
.ws-top, .grade-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.ws-top { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px dashed #e3e8f2; }
.ws-q { font: 800 1rem var(--display); color: var(--navy); }
.ws-top .filters, .grade-bar .filters { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ws-top .chip { padding: 6px 14px; font-size: .9rem; }
.grade-bar { margin: 0 0 18px; padding: 14px 16px; background: var(--soft); border-radius: 16px; }
.grade-note { font-size: .85rem; }
.pill-links.jump { margin: 0 0 8px; }
@media (min-width: 1001px) {
  .mm[data-k="color"] .mm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; }
  .ws-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; }
}
@media (max-width: 1000px) {
  .mm[data-k="ws"] { --cd: #4a2a8c; }
  .mm[data-k="ws"] .mm-btn, .mm[data-k="ws"].open .mm-btn { background: #6c3fc5; }
@media (hover: hover) { .mm[data-k="ws"] .mm-btn:hover { background: #6c3fc5; } }
  .ws-top { padding-bottom: 10px; margin-bottom: 10px; }
  .ws-top .chip { padding: 7px 12px; }
}

/* ---------- phone menu v3 (owner 2026-11-06, choice "C + 2"): pale section rows; a tap opens the section on its own screen ---------- */
.mm-sub-head, .mm-seeall { display: none; }
@media (max-width:1000px) {
  .hdr .nav { gap: 10px; }
  .hdr .mm-bar { order: 2; gap: 10px; }
  .hdr .nav-games { --c: var(--green); --cd: #168a56; order: 3; }
  /* rows: a pale tint of the section color, dark text, chevron in a white circle pointing right (it opens a new screen) */
  .hdr .mm .mm-btn, .hdr .mm.open .mm-btn, .hdr .nav-games {
    background: #f4f1ec; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--navy); filter: none; box-shadow: none; border: 0;
    min-height: 62px; padding: 8px 12px 8px 9px; gap: 14px; font: 800 1.18rem/1.1 var(--display); border-radius: 14px !important; }
  @media (hover: hover) { .hdr .mm .mm-btn:hover, .hdr .nav-games:hover { background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--navy); filter: none; } }
  .hdr .mm-ic, .hdr .nav-games .ng-ic { width: 44px; height: 44px; padding: 4px; box-shadow: none; }
  .hdr .mm .mm-btn svg { background: #fff; color: var(--cd, var(--navy)); transform: rotate(-90deg); }
  /* Play online: the last row, same look as the others (owner: not highlighted) */
  .hdr .nav-games .ng-play, .hdr .nav-games .ng-sub, .hdr .nav-games .ng-go { display: none !important; }
  .hdr .nav-games .ng-more { display: inline !important; }
  .hdr .nav-games .ng-t { flex: 1; }
  .hdr .nav-games::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2l4 4-4 4' fill='none' stroke='%23168a56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }

  /* a section on its own screen: header with "< Menu", a "See all" link, then one big row per topic */
  .hdr .nav.sub > *:not(.mm-bar), .hdr .nav.sub .mm:not(.open), .hdr .nav.sub .mm.open > .mm-btn { display: none !important; }
  .hdr .nav.sub .mm-panel { display: flex; flex-direction: column; gap: 0; background: #fff; border: 0; border-radius: 0; padding: 0 0 24px; box-shadow: none; }
  .hdr .nav.sub .mm-sub-head { display: flex; align-items: center; gap: 12px; position: sticky; top: -14px; z-index: 2; background: #fff;
    margin: -14px 0 0; padding: 14px 0 12px; border-bottom: 2px solid #eee8de; }
  .mm-back { flex: none; font: 800 1rem var(--body); color: var(--navy); background: #f3eee6; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
  .mm-back:active { transform: scale(.96); }
  .mm-sub-head b { font: 800 1.45rem/1.1 var(--display); color: var(--navy); }
  .hdr .nav.sub .mm-seeall { display: block; padding: 14px 2px 6px; font: 800 1.05rem var(--body); color: var(--cd, var(--navy)); text-decoration: none; }
  .hdr .nav.sub .mm-cols { gap: 0; }
  .hdr .nav.sub .mm-h { margin: 18px 0 2px 2px; color: var(--cd, var(--muted)); }
  .hdr .nav.sub .mm-col ul, .hdr .nav.sub .mm-grid { display: block; }
  .hdr .nav.sub .mm-col li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 6px 14px 2px;
    background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid #eee8de; font: 700 1.08rem/1.25 var(--body); color: var(--navy); }
  .hdr .nav.sub .mm-col li a::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2.5px solid #9aa3b5; border-right: 2.5px solid #9aa3b5;
    transform: rotate(45deg); margin-right: 4px; }
  .hdr .nav.sub .mm-col li.more a { color: var(--cd, var(--red)); font-weight: 800; border-bottom: 0; }
  .hdr .nav.sub .mm-col li.more.hub, .hdr .nav.sub .mm-all { display: none; }
  .hdr .nav.sub .mm-none { padding: 12px 2px; }
  /* grade chips: one swipeable line */
  .hdr .nav.sub .ws-top { margin: 6px 0 0; padding: 8px 0 12px; }
  .hdr .nav.sub .ws-top .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .hdr .nav.sub .ws-top .chip { flex: none; }
  .hdr .nav.sub .mm-side { margin-top: 18px; }
}
@media (max-width:1000px) { .hdr .nav.sub .mm-col li.more a::after { content: none; } }

/* ---------- drawing ideas gallery (/drawing-ideas/, 2026-11-07) ---------- */
.ideas h3 { margin: 26px 0 10px; font: 800 1.2rem var(--display); color: var(--navy); }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.idea { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; background: #fff;
  border: 2px solid #e6eef0; border-radius: 14px; text-decoration: none; color: var(--navy); }
.idea img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.idea b { font: 800 .95rem/1.15 var(--body); text-align: center; }
.idea i { position: absolute; top: 6px; left: 6px; font: 800 .68rem var(--body); font-style: normal; color: #fff; background: #168a56;
  border-radius: 999px; padding: 2px 7px; }
@media (hover: hover) { .idea:hover { border-color: #168a56; } }
.idea:active { transform: scale(.96); }
.ideas-link { margin-top: 18px; }
@media (max-width: 600px) { .idea-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .idea b { font-size: .82rem; } }


/* ---------- Sheet cards (2026-11-08): every printable is shown as a sheet of paper with the title underneath,
   instead of a rounded white card. Drawing-guide cards (square thumbnails) keep the old card look. ---------- */
.card:not(.tut-card) { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.card:not(.tut-card) .card-img {
  background: #fff; padding: 7%; border: 1px solid #cfd7e3; border-radius: 2px;
  box-shadow: 0 2px 4px rgba(22, 38, 74, .08), 0 12px 24px -8px rgba(22, 38, 74, .28);
  transition: transform .15s, box-shadow .15s;
}
.card:not(.tut-card) .card-img img { object-fit: contain; }
.card:not(.tut-card) .card-body { padding: 10px 2px 0; align-items: flex-start; }
.card:not(.tut-card) .card-title { color: var(--navy); }
.gcard:not(.tut-card) .gcard-dl { margin: 10px 0 0; }
@media (hover: hover) {
  .card:not(.tut-card):hover, .js .card.reveal.in:not(.tut-card):hover { transform: none; box-shadow: none; }
  .card:not(.tut-card):hover .card-img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 38, 74, .08), 0 20px 30px -10px rgba(22, 38, 74, .35); }
}
@media (max-width: 600px) { .card:not(.tut-card) .card-body { padding: 8px 0 0; } }
/* "More ..." and "You may also like" rows on printable pages sit on a light table so the sheets read as paper */
.wrap.sheets-band { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(16px, calc(50% - 590px)); background: #f1f4f9; }
.wrap.sheets-band + .wrap.sheets-band { padding-top: 0; }

/* 2026-11-08 evening (owner, card design taken over by the main session): more air between the sheet cards, on phones too */
.grid { gap: 32px 24px; }
@media (max-width: 600px) { .grid, .wrap.sheets-band .grid { gap: 28px 16px; } }

/* 2026-11-08 evening: iPhone (WebKit) fix. Safari does not resolve the image's height:100% inside an aspect-ratio box, so the
   sheet images overflowed and the cards overlapped ("cardurile sunt lipite"). The frame keeps the aspect ratio and the image is
   placed absolutely inside it, which every engine sizes the same way. */
.card:not(.tut-card) .card-img { position: relative; padding: 0; min-height: 120px; }
.card:not(.tut-card) .card-img img { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; object-fit: contain; display: block; }
.card:not(.tut-card) { min-width: 0; }

/* 2026-11-08 evening (owner: "pastreaza inaltimea coloanelor egala"): every card in a row has the same height. The sheet keeps
   its ratio, the title area gets a fixed height (2 lines on desktop, 3 on phones, longer titles end with an ellipsis) and the
   badge / download button sit on the same line in every card of the row. */
.card:not(.tut-card) { height: 100%; }
.card:not(.tut-card) .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card:not(.tut-card) .card-body { min-height: 3.4rem; align-items: flex-start; }
@media (max-width: 600px) {
  .card:not(.tut-card) .card-title { -webkit-line-clamp: 3; }
  .card:not(.tut-card) .card-body { min-height: 6.4rem; flex-direction: column; justify-content: space-between; align-items: flex-start; }
}

/* 2026-11-08 night (owner: "titlu nu se vede"): the sheet cards no longer have a white box, so on the navy / purple home bands the
   title sat navy-on-navy. White title there, with the badge kept readable. */
.home .navy .card:not(.tut-card) .card-title, .home .purple .card:not(.tut-card) .card-title { color: #fff; }
.home .navy .card:not(.tut-card) .card-body, .home .purple .card:not(.tut-card) .card-body { color: #fff; }

/* 2026-11-08 night (owner chose "E" from the card-style board): two "fridge" touches in places where they tell the story
   without making the long grids busy.
   1) Magnet + small alternating tilt: only on "New" sheet cards and on the sheet cards of the home page. The sheet
      straightens on hover. Magnet colours cycle red / blue / yellow (brand colours).
   2) Yellow tape on the two top corners of the big picture on every printable page (one picture per page, no noise). */
.home .card:not(.tut-card), .card.is-new:not(.tut-card) { position: relative; }
.home .card:not(.tut-card)::before, .card.is-new:not(.tut-card)::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  z-index: 3; pointer-events: none; box-shadow: 0 3px 5px rgba(0, 0, 0, .28);
  background: radial-gradient(circle at 35% 30%, #fff 0, #ff8a7f 18%, var(--red) 60%, #b52317 100%);
}
.home .card:not(.tut-card):nth-child(3n+2)::before, .card.is-new:not(.tut-card):nth-child(3n+2)::before {
  background: radial-gradient(circle at 35% 30%, #fff 0, #8ad8f7 18%, var(--blue) 60%, #0b7fb3 100%);
}
.home .card:not(.tut-card):nth-child(3n)::before, .card.is-new:not(.tut-card):nth-child(3n)::before {
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffe48a 18%, var(--yellow) 60%, #d9a900 100%);
}
.home .card:not(.tut-card) .card-img, .card.is-new:not(.tut-card) .card-img { transform: rotate(-1.4deg); }
.home .card:not(.tut-card):nth-child(even) .card-img, .card.is-new:not(.tut-card):nth-child(even) .card-img { transform: rotate(1.2deg); }
.home .card:not(.tut-card):nth-child(3n) .card-img, .card.is-new:not(.tut-card):nth-child(3n) .card-img { transform: rotate(-.6deg); }
@media (hover: hover) {
  .home .card:not(.tut-card):hover .card-img, .card.is-new:not(.tut-card):hover .card-img { transform: rotate(0) translateY(-4px); }
}
@media print { .card:not(.tut-card)::before { display: none; } .card:not(.tut-card) .card-img { transform: none !important; } }

.item-preview { position: relative; --pad: 28px; }
.item-preview::before, .item-preview::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none; width: 64px; height: 20px; top: calc(var(--pad) - 4px);
  background: linear-gradient(180deg, rgba(255, 224, 120, .82), rgba(255, 210, 63, .78)); box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.item-preview::before { left: calc(var(--pad) - 22px); transform: rotate(-38deg); }
.item-preview::after { right: calc(var(--pad) - 22px); transform: rotate(38deg); }
@media (max-width: 860px) { .item-preview { --pad: 16px; } .item-preview::before, .item-preview::after { width: 52px; height: 17px; } }
@media print { .item-preview::before, .item-preview::after { display: none; } }

/* 2026-11-08 night (owner: "scoate bluemarin si round corners, umbra ca la celelalte"): the big picture on a printable page
   is a plain sheet on the page, with the same thin border and shadow as the sheet cards; no light-blue panel, no round
   corners. A small padding stays only so the tape strips have room inside the page gutter. */
.item-preview { background: transparent; border-radius: 0; padding: 12px; --pad: 12px; }
.item-preview img { border: 1px solid #cfd7e3; border-radius: 2px;
  box-shadow: 0 2px 4px rgba(22, 38, 74, .08), 0 12px 24px -8px rgba(22, 38, 74, .28); }
@media (max-width: 860px) { .item-preview { padding: 10px; --pad: 10px; } }

/* 2026-11-08 night (owner chose "C" after "E"): 2-page printables (worksheet + answer key, or drawing page + ideas page) show
   a second sheet peeking out behind the first, so a parent sees at a glance that the PDF is a small set. Exactly one sheet
   behind, because these PDFs have exactly two pages. The back sheet sits on the card (not inside the picture frame), so the
   tilted "New"/home sheets and the hover lift still work. Class set by two_page() in build_site.py. */
.card.two-page:not(.tut-card) { position: relative; }
.card.two-page:not(.tut-card) .card-img { z-index: 1; }
.card.two-page:not(.tut-card)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 8.5 / 11; z-index: 0; pointer-events: none;
  background: #fff; border: 1px solid #cfd7e3; border-radius: 2px; box-shadow: 0 2px 6px rgba(22, 38, 74, .14);
  transform: rotate(3deg) translate(5px, -1px); transform-origin: 50% 100%;
}
@media (max-width: 600px) { .card.two-page:not(.tut-card)::after { transform: rotate(2.6deg) translate(3px, -1px); } }
@media print { .card.two-page:not(.tut-card)::after { display: none; } }

/* small email pack box under "Download PDF" on single sheets (build_site.pack_mini, owner option B 2026-11-09) */
.pack-box.pack-mini { display: block; margin: 16px 0 18px; padding: 14px 16px; }
.pack-mini .pack-mini-h { margin: 0 0 4px; font: 800 1.15rem var(--display); color: var(--navy); }
.pack-mini > p { margin: 0 0 10px; font-size: .95rem; }
.pack-mini .pack-form input[type=email] { min-height: 44px; flex-basis: 200px; }
.pack-mini .pack-note { margin: 8px 0 0; font-size: .82rem; }
.pack-mini .pack-ok { font-size: 1rem; }