/* Our Shared World Online: shared design system.
   Warm paper, soft cut-paper cards, unit-color accents.
   Andika = child-facing text. Inter = UI and adult text.
   Variable names are part of the build contract; keep them. */

/* ---------- Fonts (local, file:// safe) ---------- */
@font-face { font-family: "Andika"; src: url(../fonts/andika-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../fonts/andika-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../fonts/andika-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../fonts/andika-latin-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata-latin-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-400.woff2) format("woff2"); font-weight: 100 549; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-600.woff2) format("woff2"); font-weight: 550 649; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-700.woff2) format("woff2"); font-weight: 650 749; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-800.woff2) format("woff2"); font-weight: 750 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --u1: #24788a; --u1-l: #dcecef; --u1-ink: #1d6575;
  --u2: #4b8a37; --u2-l: #e2eed9; --u2-ink: #3a6c2b;
  --u3: #cc5a26; --u3-l: #f7e3d6; --u3-ink: #a3441a;
  --u4: #4650a0; --u4-l: #e1e3f3; --u4-ink: #3d4690;
  --u5: #9a6a1c; --u5-l: #f2e8d4; --u5-ink: #7f5714;
  --u6: #8a3e78; --u6-l: #f1e0ec; --u6-ink: #7a3469;

  --ink: #1d2a31; --ink-2: #4b5a63; --ink-3: #66747c;
  --paper: #fffdf8; --warm: #f7f1e6; --sand: #ece1cb; --rule: #e2d8c6;
  --sky: #d3e6ec; --leaf: #4b8a37; --leaf-2: #8db86b; --soil: #b98a5c; --soil-d: #8b5f3c;
  --sun: #f0b23a; --cream: #fff7e6;
  /* Hand-drawn layer: blue ballpoint ink, kraft paper, faint graph grid. */
  --pen: #3553a5; --kraft: #ecdfc6; --kraft-2: #e2d1b1; --grid-line: rgba(64, 120, 132, .06);
  --torn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'><path d='M0 16 L0 6.2 L9 6.9 L16 3.7 L34 3.9 L52 3.6 L70 5.1 L77 7.3 L84 5.4 L102 7.2 L120 4.2 L129 9.3 L147 12.5 L165 8.9 L172 12.8 L179 8.6 L188 5.9 L197 8.4 L215 6.1 L238 4.8 L256 8.7 L265 6.7 L283 10.1 L301 3.6 L310 8.0 L328 7.3 L339 7.7 L353 6.6 L362 10.9 L385 10.8 L392 8.7 L410 8.0 L421 10.3 L432 9.1 L439 4.2 L453 4.6 L464 4.5 L478 7.2 L501 3.8 L519 8.7 L530 6.4 L541 8.9 L559 11.0 L566 11.4 L577 7.7 L600 3.6 L623 10.0 L646 8.8 L669 11.2 L680 10.2 L703 6.5 L717 6.6 L735 4.2 L742 5.2 L753 4.3 L762 7.0 L776 3.8 L790 7.0 L801 11.8 L815 11.6 L826 10.1 L837 9.8 L851 12.6 L860 3.8 L869 5.3 L878 3.1 L896 4.8 L907 3.0 L921 8.3 L939 8.7 L948 9.9 L966 12.5 L989 9.8 L996 7.6 L1019 11.0 L1033 7.0 L1047 4.0 L1070 7.0 L1079 3.7 L1088 7.4 L1095 6.4 L1102 4.0 L1120 4.5 L1127 12.5 L1145 3.3 L1154 9.1 L1163 9.3 L1174 9.0 L1188 4.2 L1200 8 L1200 16Z'/></svg>");
  --tape: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><path d='M3 1 0 5l3 4-2 4 3 4-3 4 2 4-2 5h94l3-5-2-4 3-4-3-4 2-4-2-4 3-4-3-4Z'/></svg>");
  --corner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='3.4' fill='none' stroke='%233553a5' stroke-width='1.3'/><path d='M7 1.5v2M7 10.5v2M1.5 7h2M10.5 7h2' stroke='%233553a5' stroke-width='1.2' stroke-linecap='round'/></svg>");
  --focus: #1a5fb4;
  --good: #2f7a3d; --good-l: #e3f1e2;
  --hint: #8a5a12; --hint-l: #fbf0d9;

  --unit: var(--u1); --unit-l: var(--u1-l); --unit-ink: var(--u1-ink);

  --font-kid: "Andika", "Andika New Basic", "Comic Neue", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Literata", Georgia, "Times New Roman", serif;

  --r-paper: 26px 20px 28px 18px / 20px 28px 18px 26px;
  --r-paper-2: 18px 28px 20px 26px / 26px 18px 28px 20px;
  --r-paper-sm: 14px 11px 15px 10px / 11px 15px 10px 14px;
  --shadow-paper: 0 1px 0 rgba(120, 90, 50, .10), 0 2px 3px rgba(80, 55, 25, .06), 0 10px 22px -12px rgba(80, 55, 25, .28);
  --shadow-lift: 0 2px 0 rgba(120, 90, 50, .10), 0 6px 10px rgba(80, 55, 25, .08), 0 18px 30px -14px rgba(80, 55, 25, .34);
  --wrap: 1120px;
  --tap: 48px;
  --kid-size: 22px;
}
.u1 { --unit: var(--u1); --unit-l: var(--u1-l); --unit-ink: var(--u1-ink); }
.u2 { --unit: var(--u2); --unit-l: var(--u2-l); --unit-ink: var(--u2-ink); }
.u3 { --unit: var(--u3); --unit-l: var(--u3-l); --unit-ink: var(--u3-ink); }
.u4 { --unit: var(--u4); --unit-l: var(--u4-l); --unit-ink: var(--u4-ink); }
.u5 { --unit: var(--u5); --unit-l: var(--u5-l); --unit-ink: var(--u5-ink); }
.u6 { --unit: var(--u6); --unit-l: var(--u6-l); --unit-ink: var(--u6-ink); }
@media (min-width: 600px) { :root { --kid-size: 24px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--ink); background-color: #fbf6ec;
  font: 400 17px/1.55 var(--font-ui);
  background-image:
    radial-gradient(1200px 520px at 8% -6%, color-mix(in srgb, var(--unit-l) 70%, transparent), transparent 70%),
    radial-gradient(900px 600px at 105% 30%, rgba(247, 241, 230, .9), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
  background-size: auto, auto, 26px 26px, 26px 26px, auto;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: block; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--unit-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
h1, h2, h3, h4 { font-family: var(--font-kid); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; color: var(--ink); letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 8vw, 58px); }
h2 { font-size: clamp(28px, 5.4vw, 38px); }
h3 { font-size: clamp(23px, 4vw, 28px); }
h4 { font-size: 21px; }
/* Page and section titles use Literata, as in the printed book. Child text stays in Andika. */
h1, h2 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.012em; line-height: 1.12; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; box-shadow: 0 0 0 3px #fff; }
h2[tabindex="-1"]:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--unit) 28%, white); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .wrap { padding: 0 24px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kid { font-family: var(--font-kid); font-size: var(--kid-size); line-height: 1.6; }
.muted { color: var(--ink-2); }
.eyebrow { font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--unit-ink); margin: 0 0 8px; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }
[hidden] { display: none !important; }

/* Skip link */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Icons */
.ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Paper surfaces ---------- */
.paper {
  background: var(--paper); border-radius: var(--r-paper);
  box-shadow: var(--shadow-paper); border: 1px solid rgba(120, 95, 60, .08);
  padding: 20px; position: relative;
}
.paper:nth-child(even) { border-radius: var(--r-paper-2); }
@media (min-width: 600px) { .paper { padding: 26px 28px; } }
.paper--tint { background: color-mix(in srgb, var(--unit-l) 55%, var(--paper)); }
.paper--warm { background: var(--warm); }
.paper--flat { box-shadow: none; }
.tilt-l { transform: rotate(-1.1deg); } .tilt-r { transform: rotate(.9deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 10px 22px; border-radius: 999px;
  font: 700 17px/1.1 var(--font-ui); text-decoration: none; cursor: pointer;
  border: 2px solid var(--unit-ink); background: var(--paper); color: var(--unit-ink);
  box-shadow: 0 2px 0 rgba(60, 40, 20, .12); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--unit-l); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--fill { background: var(--unit-ink); color: #fff; }
.btn--fill:hover { background: color-mix(in srgb, var(--unit-ink) 88%, black); }
.btn--big { min-height: 60px; padding: 12px 28px; font-size: 19px; }
.btn--quiet { border-color: transparent; background: transparent; box-shadow: none; }
.btn--quiet:hover { background: color-mix(in srgb, var(--unit-l) 60%, transparent); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 2px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0;
  transition: background-color .12s ease, border-color .12s ease; touch-action: manipulation;
}
.icon-btn:hover { border-color: var(--unit); background: var(--unit-l); }
.icon-btn .ico { width: 24px; height: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Header ---------- */
/* Reserve the space used when the deferred shared script inserts the header. */
body:not(:has(> .osw-header))::before { content: ""; display: block; height: 69px; flex: none; }
.osw-header { font-family: var(--font-ui); position: relative; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--rule); }
.osw-header .wrap { display: flex; align-items: center; gap: 10px; min-height: 68px; }
.osw-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 19px/1.1 var(--font-kid); margin-right: auto; min-height: var(--tap); border-radius: 12px; }
.osw-brand svg { width: 40px; height: 40px; flex: none; }
.osw-brand small { display: block; font: 600 12px/1.2 var(--font-ui); color: var(--ink-2); letter-spacing: .02em; }
@media (max-width: 380px) { .osw-brand small { display: none; } .osw-brand { font-size: 17px; } }
.osw-nav { display: none; align-items: center; gap: 4px; }
.osw-nav > a, .osw-menu > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px;
  font: 600 16px/1 var(--font-ui); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.osw-menu > summary::-webkit-details-marker { display: none; }
.osw-nav > a:hover, .osw-menu > summary:hover, .osw-menu[open] > summary { background: var(--warm); }
.osw-nav > a[aria-current] { background: var(--unit-l); color: var(--unit-ink); }
.osw-menu { position: relative; }
.osw-menu > summary .chev { width: 16px; height: 16px; transition: transform .15s ease; }
.osw-menu[open] > summary .chev { transform: rotate(180deg); }
.osw-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; padding: 10px;
  background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-lift); border: 1px solid var(--rule);
  display: grid; gap: 2px;
}
.osw-pop a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.osw-pop a:hover { background: var(--warm); }
.osw-pop a[aria-current="page"], .osw-nav .osw-menu:has(a[aria-current="page"]) > summary { background: var(--unit-l); color: var(--unit-ink); }
.osw-pop .dot { width: 14px; height: 14px; border-radius: 4px 6px 4px 6px; flex: none; }
.osw-pop small { display: block; font-weight: 400; color: var(--ink-2); font-size: 14px; }
.osw-motion {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px 0 10px; border-radius: 999px;
  border: 2px solid var(--rule); background: var(--paper); font: 600 15px/1 var(--font-ui); cursor: pointer; color: var(--ink);
}
.osw-motion .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--sand); position: relative; flex: none; transition: background-color .15s; }
.osw-motion .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.osw-motion[aria-pressed="true"] .sw { background: var(--unit-ink); }
.osw-motion[aria-pressed="true"] .sw::after { transform: translateX(14px); }
.osw-burger > summary { list-style: none; padding: 0; justify-content: center; }
.osw-burger > summary::-webkit-details-marker { display: none; }
.osw-burger .osw-pop { position: absolute; left: 12px; right: 12px; top: calc(100% + 4px); min-width: 0; max-height: calc(100vh - 90px); overflow: auto; }
.osw-burger { position: static; }
.osw-pop h2 { font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 12px 12px 6px; }
.osw-pop .osw-motion { margin: 10px 4px 4px; justify-self: start; }
@media (min-width: 1120px) {
  .osw-nav { display: flex; }
  .osw-burger { display: none; }
}
.osw-brand, .osw-nav > a, .osw-menu > summary, .osw-motion { white-space: nowrap; flex: none; }
.osw-nav { gap: 2px; }
/* The header shares the 1120px page column at every desktop width, so the nav stays compact (no icons, 8px padding):
   with icons it needs about 1320px and spilled past the window on wide screens. */
@media (min-width: 1120px) { .osw-nav > a, .osw-menu > summary { padding: 0 8px; } .osw-motion { padding-right: 8px; } .osw-nav > a > .ico, .osw-nav .osw-menu > summary > .ico:not(.chev) { display: none; } }

/* ---------- Footer ---------- */
.osw-footer { font-family: var(--font-ui); margin-top: 64px; padding: 36px 0 44px; background: var(--warm); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 15px; position: relative; }
.osw-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: var(--warm); -webkit-mask: var(--torn) 0 0 / 100% 100%; mask: var(--torn) 0 0 / 100% 100%; }
.osw-footer .wrap { display: grid; gap: 14px; }
.osw-footer nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -10px; }
.osw-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.osw-footer p { margin: 0; max-width: 70ch; }
@media (min-width: 860px) { .osw-footer .wrap { grid-template-columns: auto 1fr; column-gap: 48px; align-items: start; } .osw-footer nav { grid-row: span 2; align-content: start; max-width: 480px; } }

/* ---------- Page hero ---------- */
.hero { position: relative; padding: 28px 0 54px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 0; pointer-events: none; }
.hero-hills svg { width: 100%; height: 100%; display: block; }
.tagpill { text-decoration: none; display: inline-flex; border-radius: 8px; overflow: hidden; font: 800 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--unit-ink); margin-bottom: 14px; }
.tagpill span { padding: 7px 10px; color: var(--unit-ink); background: var(--paper); }
.tagpill span + span { background: var(--unit-ink); color: #fff; }
.hero h1 { color: var(--ink); max-width: 18ch; }
.bigq { display: flex; gap: 12px; align-items: flex-start; font: 700 clamp(21px, 3.6vw, 27px)/1.35 var(--font-kid); color: var(--unit-ink); max-width: 40ch; margin: 0 0 18px; }
.bigq .ico { width: 34px; height: 34px; margin-top: 1px; padding: 5px; border-radius: 50%; border: 2.5px solid currentColor; }
.hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.25fr .75fr; gap: 40px; } }
.hero-art { position: relative; border-radius: 4px; box-shadow: var(--shadow-lift); border: 8px solid var(--paper); background: var(--paper); aspect-ratio: 16/10; transform: rotate(1deg); margin: 14px 12px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 2px; }
@media (min-width: 860px) { .hero-art { aspect-ratio: 4/5; max-width: 380px; justify-self: end; } }
.hero-art-wrap { position: relative; }
.hero-art-wrap .hero-art { width: auto; }
@media (min-width: 860px) { .hero-art-wrap { justify-self: end; width: 100%; max-width: 440px; } }
.hero-stamp { position: absolute; left: -18px; bottom: -22px; width: 112px; height: 112px; z-index: 2; filter: drop-shadow(0 3px 4px rgba(60, 40, 20, .18)); }
.hero-cta { margin: 4px 0 6px; }
/* Week heroes show the week's own photo: keep a landscape frame so the picture is not over-cropped. */
.hero-art.is-photo img { object-position: 50% 45%; }
@media (min-width: 860px) { .hero-art.is-photo { aspect-ratio: 4/3; max-width: 440px; } }
.books { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.book-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); font-size: 15px; max-width: 100%; }
.book-chip .spine { width: 30px; height: 38px; border-radius: 3px 6px 6px 3px; background: var(--unit); flex: none; position: relative; box-shadow: inset 4px 0 0 rgba(0,0,0,.18); }
.book-chip .spine::after { content: ""; position: absolute; left: 9px; right: 5px; top: 9px; height: 3px; background: rgba(255,255,255,.7); border-radius: 2px; box-shadow: 0 6px 0 rgba(255,255,255,.5); }
.book-chip cite { font-style: italic; font-weight: 700; display: block; color: var(--ink); }
.book-chip span.by { color: var(--ink-2); }
.books-label { font: 700 14px/1.2 var(--font-ui); color: var(--ink-2); margin: 18px 0 2px; letter-spacing: .02em; }

/* ---------- Today's path (sticky section nav) ---------- */
.secnav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, #fbf6ec 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
/* Wider than the page text, so all six steps fit in one row from about 1280px. */
.secnav-in { position: relative; display: flex; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 12px; }
.secnav-title { display: none; align-items: center; gap: 8px; margin: 0 10px 0 4px; font: 800 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--unit-ink); white-space: nowrap; }
.secnav-title .ico { width: 22px; height: 22px; }
.secnav ol { list-style: none; margin: 0; padding: 8px 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.secnav ol::-webkit-scrollbar { display: none; }
.secnav li { display: flex; align-items: center; flex: none; }
/* A dotted trail joins the steps. */
.secnav li + li::before { content: ""; width: 10px; height: 0; border-top: 3px dotted color-mix(in srgb, var(--unit) 45%, var(--rule)); margin: 0 2px; flex: none; }
.secnav li.is-done + li::before { border-top-style: solid; border-color: var(--good); }
.secnav li.gp { margin-left: auto; padding-left: 10px; }
.secnav li.gp::before { content: none; }
.secnav a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px 0 6px; border-radius: 999px; white-space: nowrap;
  font: 700 16px/1 var(--font-ui); color: var(--ink); text-decoration: none; border: 2px solid transparent;
}
.secnav li.gp a { padding-left: 12px; color: var(--ink-2); font-weight: 600; border-color: var(--rule); min-height: 44px; }
.secnav a .num { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); font-size: 15px; }
.secnav a .num .tick { display: none; width: 20px; height: 20px; }
.secnav a .num .tick svg { stroke-width: 3; }
.secnav li.is-done .num { background: var(--good); border-color: var(--good); color: #fff; }
.secnav li.is-done .num .n { display: none; }
.secnav li.is-done .num .tick { display: inline-flex; }
.secnav a .ico { width: 22px; height: 22px; }
.secnav a:hover { background: var(--paper); }
.secnav a[aria-current="true"] { background: var(--paper); border-color: var(--unit); color: var(--unit-ink); }
.secnav a[aria-current="true"] .num { border-color: var(--unit-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--unit) 25%, transparent); }
.secnav li:not(.is-done) a[aria-current="true"] .num { background: var(--unit-ink); color: #fff; }
@media (max-width: 899px) { .secnav-in:not(.has-cue) ol { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; } .secnav li.gp { margin-left: 8px; } }
/* When the steps do not fit, the strip scrolls: its cut edge fades and an arrow button sits on that side (week.js adds them). */
.secnav-more { position: absolute; top: 50%; z-index: 1; display: none; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 50%;
  border: 2px solid var(--unit); background: var(--paper); color: var(--unit-ink); box-shadow: var(--shadow-paper); cursor: pointer; }
.secnav-more .ico { width: 22px; height: 22px; }
.secnav-more.is-l { left: 6px; }
.secnav-more.is-r { right: 6px; }
.secnav-in.can-l .secnav-more.is-l, .secnav-in.can-r .secnav-more.is-r { display: grid; }
.secnav-in.can-r ol { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 84px), transparent calc(100% - 30px)); mask-image: linear-gradient(90deg, #000 calc(100% - 84px), transparent calc(100% - 30px)); }
.secnav-in.can-l ol { -webkit-mask-image: linear-gradient(90deg, transparent 30px, #000 84px); mask-image: linear-gradient(90deg, transparent 30px, #000 84px); }
.secnav-in.can-l.can-r ol { -webkit-mask-image: linear-gradient(90deg, transparent 30px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 30px)); mask-image: linear-gradient(90deg, transparent 30px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 30px)); }

/* ---------- Week sections ---------- */
.wsec { padding: 44px 0 12px; scroll-margin-top: 72px; }
@media (min-width: 860px) { .wsec { padding-top: 64px; } }
.wsec + .wsec { border-top: 1px dashed color-mix(in srgb, var(--unit) 22%, var(--rule)); margin-top: 28px; }
.wsec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
/* Big pictorial badge: the section's picture, with its step number on a small chip. */
.wsec-head .badge { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--unit-l); color: var(--unit-ink); border: 3px solid var(--unit-ink); box-shadow: var(--shadow-paper); }
.wsec-head .badge > .ico { width: 34px; height: 34px; }
.wsec-head .badge .ico svg { stroke-width: 2.2; }
.wsec-head .bn { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--unit-ink); color: #fff; font: 800 14px/1 var(--font-ui); border: 2px solid var(--paper); }
@media (min-width: 600px) { .wsec-head .badge { width: 76px; height: 76px; } .wsec-head .badge > .ico { width: 40px; height: 40px; } }
.wsec-head h2 { margin: 0; }
.wsec-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 17px; }
.wsec--parents .badge { background: var(--warm); }
/* "Done! Next stop" at the end of each step. */
.next-stop { display: flex; justify-content: flex-end; margin: 26px 0 0; }
.next-stop .btn { background: var(--paper); }
.next-stop .btn .ico:first-child { width: 26px; height: 26px; padding: 3px; border-radius: 50%; border: 2px solid currentColor; }
.next-stop .btn.is-done { border-color: var(--good); color: var(--good); }
.next-stop .btn.is-done .ico:first-child { background: var(--good); border-color: var(--good); color: #fff; }
@media (max-width: 599px) { .next-stop .btn { width: 100%; } }
.box-title { font: 800 13px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--unit-ink); margin: 0 0 12px; }

/* Word cards */
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 16px; }
.wordcard {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; min-height: 72px; padding: 12px 16px;
  background: var(--paper); border: 2px solid color-mix(in srgb, var(--unit) 35%, var(--rule)); border-radius: var(--r-paper-sm);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--unit) 25%, transparent); color: var(--ink); cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.wordcard:nth-child(even) { border-radius: 11px 15px 10px 14px / 14px 10px 15px 11px; }
.wordcard:hover { background: var(--unit-l); }
.wordcard:active { transform: translateY(1px); }
.wordcard .spk { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--unit-ink); color: #fff; }
.wordcard .spk .ico { width: 24px; height: 24px; }
.wordcard b { display: block; font: 700 23px/1.15 var(--font-kid); color: var(--unit-ink); }
.wordcard span.m { display: block; font: 400 17px/1.35 var(--font-kid); color: var(--ink-2); margin-top: 2px; }
.wordcard.is-playing { background: var(--unit-l); }
.wordcard.is-playing .spk { animation: osw-pulse 1s ease-in-out infinite; }
div.wordcard { cursor: default; }
@keyframes osw-pulse { 50% { transform: scale(1.08); } }

/* ---------- Listen-along player ---------- */
.listen { display: grid; gap: 16px; }
.listen.is-playing .lp-bar { border-color: color-mix(in srgb, var(--unit) 45%, transparent); }
.lp-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px 10px 10px; border-radius: 28px;
  background: color-mix(in srgb, var(--unit-l) 70%, var(--paper)); border: 2px solid color-mix(in srgb, var(--unit) 18%, transparent);
  transition: border-color .2s ease;
}
@media (max-width: 599px) { .lp-bar { border-radius: 22px; padding: 10px; } }
/* Big play: a 64px disc with a progress ring, plus a word. */
.lp-play { display: inline-flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 24px 0 4px; border-radius: 999px; border: 0; background: transparent; color: var(--unit-ink); font: 800 21px/1 var(--font-ui); }
.lp-play .disc { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--unit-ink); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .16); transition: transform .15s ease, background-color .15s ease; }
.lp-play .glyph { display: grid; place-items: center; width: 30px; height: 30px; }
.lp-play .glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.lp-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.lp-ring circle { fill: none; stroke-width: 4.5; }
.lp-ring .trk { stroke: color-mix(in srgb, var(--unit) 18%, transparent); }
.lp-ring .prog { stroke: var(--sun); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.lp-play:hover .disc { background: color-mix(in srgb, var(--unit-ink) 85%, black); transform: scale(1.04); }
.lp-play:active .disc { transform: scale(.97); }
.lp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-speed { display: inline-flex; border-radius: 999px; background: var(--paper); border: 2px solid var(--rule); padding: 2px; }
.lp-speed button { min-width: 50px; min-height: 44px; border: 0; background: transparent; border-radius: 999px; font: 700 15px/1 var(--font-ui); color: var(--ink-2); padding: 0 8px; }
.lp-speed button[aria-pressed="true"] { background: var(--unit-ink); color: #fff; }
.lp-tool { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px 0 10px; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); font: 700 15px/1 var(--font-ui); color: var(--ink); }
.lp-tool .ico { width: 22px; height: 22px; }
.lp-tool[aria-pressed="true"] { border-color: var(--unit-ink); background: var(--unit-ink); color: #fff; }
.lp-tool:hover { border-color: var(--unit); }
.lp-time { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; min-width: 160px; font: 600 14px/1 var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lp-time input[type=range] { flex: 1; min-width: 60px; }
@media (max-width: 599px) { .lp-play { flex: 1 1 auto; } .lp-time { order: 3; flex-basis: 100%; } .lp-tools { order: 2; } }
input[type=range] { accent-color: var(--unit-ink); height: 44px; cursor: pointer; }
.lp-text { position: relative; margin: 0; padding: 6px 2px; border-radius: 14px; }
.lp-text p { position: relative; z-index: 1; font-family: var(--font-kid); font-size: var(--kid-size); line-height: 1.8; margin: 0 0 .9em; max-width: 38em; }
.lp-text p:last-child { margin-bottom: 0; }
.lp-w { border-radius: 6px; cursor: pointer; transition: color .15s ease; }
.lp-w:hover { background: color-mix(in srgb, var(--unit-l) 70%, transparent); }
.lp-w.is-now { color: var(--ink); }
/* The gliding highlight sits behind the words. */
.lp-hl { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 8px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--sun) 45%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 45%, #fff), inset 0 -3px 0 var(--unit-ink);
  transition: transform .16s cubic-bezier(.3, .7, .4, 1), width .16s cubic-bezier(.3, .7, .4, 1), opacity .2s ease; }
.lp-hl.is-on { opacity: 1; }
.lp-hl.is-jump { transition: opacity .2s ease; }
.listen.is-captions .lp-hl { display: none; }
.lp-text.is-on .lp-w.is-past { color: var(--ink); }
.lp-text:focus-visible { outline-offset: 6px; }
.lp-caption {
  display: none; min-height: 7.2em; padding: 22px 24px; border-radius: var(--r-paper); background: var(--ink); color: #fff;
  font: 700 clamp(26px, 5vw, 38px)/1.4 var(--font-kid);
  /* Each word is a flex item, so the sentence must wrap; the gap stands in for the spaces flex drops. */
  flex-wrap: wrap; align-content: center; column-gap: .28em; min-width: 0; overflow-wrap: anywhere;
}
.lp-caption .lp-cw { padding: 0 2px; border-radius: 6px; }
.lp-caption .lp-cw.is-now { background: var(--sun); color: var(--ink); }
.listen.is-captions .lp-caption { display: flex; }
.listen.is-captions .lp-text { display: none; }
.lp-note { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); background: var(--warm); border-radius: 12px; padding: 10px 14px; margin: 0; }
.lp-note .ico { flex: none; margin-top: 2px; }
.lp-hint { font-size: 14px; color: var(--ink-2); margin: 0; }

/* ---------- Lab host ---------- */
.lab-host { min-height: 120px; }
.lab-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 260px; border-radius: var(--r-paper); color: var(--ink-2); font: 600 17px/1.3 var(--font-ui);
  background: linear-gradient(100deg, var(--paper) 30%, color-mix(in srgb, var(--unit-l) 60%, var(--paper)) 50%, var(--paper) 70%) 0 0 / 300% 100%; box-shadow: var(--shadow-paper); animation: osw-shimmer 1.8s ease-in-out infinite; }
.lab-loading .ico { width: 30px; height: 30px; color: var(--unit); }
@keyframes osw-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lab-frame { background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); padding: 14px; border: 1px solid rgba(120, 95, 60, .08); }
@media (min-width: 600px) { .lab-frame { padding: 22px; } }
.soon { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 34px 20px; background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); border: 2px dashed color-mix(in srgb, var(--unit) 40%, var(--rule)); }
.soon .art { width: 96px; height: 96px; color: var(--unit); }
.soon h3 { margin: 0; }
.soon p { margin: 0; max-width: 46ch; color: var(--ink-2); }

/* ---------- Look closely ---------- */
.lookgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* Two items on a wide screen: two even columns, not two of three with an empty third. */
.lookgrid.is-one { grid-template-columns: minmax(0, 760px); }
.lookcard { margin: 0; background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); padding: 10px 10px 14px; border: 1px solid rgba(120, 95, 60, .08); }
.lookcard:nth-child(3n+2) { transform: rotate(.6deg); border-radius: var(--r-paper-2); }
.lookcard:nth-child(3n) { transform: rotate(-.5deg); }
.lookbtn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--warm); border-radius: 16px 12px 18px 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.lookgrid.is-one .lookbtn { aspect-ratio: auto; }
.lookbtn img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.lookgrid.is-one .lookbtn img { height: auto; max-height: 70vh; object-fit: contain; margin: 0 auto; }
.lookbtn:hover img { transform: scale(1.03); }
.lookbtn .lens { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 16px/1 var(--font-ui); box-shadow: var(--shadow-paper); }
.lookbtn .lens .ico { width: 22px; height: 22px; color: var(--unit-ink); }
.lookcard figcaption { padding: 10px 6px 0; }
.lookcard figcaption b { display: block; font: 700 19px/1.3 var(--font-kid); }
.lookcard figcaption .kindtag { display: inline-block; font: 700 12px/1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--unit-ink); background: var(--unit-l); padding: 5px 8px; border-radius: 6px; margin-bottom: 6px; }
.lookcard figcaption small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.subhead { font: 700 22px/1.2 var(--font-kid); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; }
.subhead .ico { color: var(--unit); }
.explainers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.explainers > :only-child { max-width: 640px; }
.xcard { display: flex; align-items: center; gap: 16px; padding: 16px 18px; min-height: 84px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); text-decoration: none; color: var(--ink); font: 700 19px/1.25 var(--font-kid); border: 2px solid transparent; }
.xcard:hover { border-color: var(--unit); }
.xcard .play { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 14px 18px 14px 18px; background: var(--unit-l); color: var(--unit-ink); }
.xcard small { display: block; font: 400 15px/1.4 var(--font-ui); color: var(--ink-2); margin-top: 4px; }
.xcard .play .ico { width: 28px; height: 28px; }

/* Then-and-now slider */
.tn { position: relative; aspect-ratio: 16/10; max-height: 70vh; margin-inline: auto; border-radius: var(--r-paper); overflow: hidden; box-shadow: var(--shadow-paper); background: var(--warm); --pos: 50%; touch-action: pan-y; user-select: none; }
.tn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tn .tn-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.tn .tn-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.tn .tn-knob { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-lift); pointer-events: none; }
.tn .tn-knob .ico { width: 28px; height: 28px; }
.tn .tn-lab { position: absolute; top: 12px; max-width: calc(50% - 18px); padding: 7px 12px; border-radius: 14px; background: rgba(29, 42, 49, .84); color: #fff; font: 700 15px/1.25 var(--font-ui); pointer-events: none; }
.tn .tn-lab.l { left: 12px; } .tn .tn-lab.r { right: 12px; }
.tn input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.tn:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.tn-wrap { margin: 0; }
.tn-wrap + .tn-wrap { margin-top: 18px; }
@media (max-width: 599px) { .tn .tn-lab { top: auto; bottom: 10px; font-size: 13px; padding: 6px 9px; } .tn .tn-lab.l { left: 8px; } .tn .tn-lab.r { right: 8px; } }
.tn-wrap figcaption { font-size: 15px; color: var(--ink-2); margin-top: 8px; }

/* Zoom dialog */
.zm { border: 0; padding: 0; width: min(1240px, 100vw); height: min(940px, 100dvh); max-width: 100vw; max-height: 100dvh; background: var(--paper); color: var(--ink); border-radius: 0; box-shadow: var(--shadow-lift); overflow: hidden; }
@media (min-width: 700px) { .zm { width: calc(100vw - 40px); height: calc(100dvh - 40px); border-radius: 24px; } }
.zm::backdrop { background: rgba(29, 42, 49, .62); }
.zm-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
@media (max-width: 479px) { .zm-zoomtxt { display: none; } .zm-top { gap: 4px; padding-left: 14px; } }
.zm-pages .btn { flex: 1 1 auto; }
@media (min-width: 900px) { .zm-in { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); } .zm-top { grid-column: 1 / -1; } }
.zm-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--rule); }
.zm-top h2 { font: 700 20px/1.2 var(--font-kid); margin: 0 auto 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-stage { position: relative; overflow: hidden; background: #efe7d8; touch-action: none; cursor: grab; }
.zm-stage.is-drag { cursor: grabbing; }
.zm-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.zm-layer img { width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.zm-spot {
  position: absolute; width: 48px; height: 48px; margin: 0; padding: 0; border-radius: 50%; border: 3px solid #fff; background: var(--unit-ink); color: #fff;
  font: 700 20px/1 var(--font-ui); transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); box-shadow: 0 0 0 3px rgba(29,42,49,.25), 0 4px 10px rgba(0,0,0,.3); display: grid; place-items: center;
}
.zm-spot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid #fff; opacity: .7; animation: zm-ring 2s ease-out infinite; }
.zm-spot[aria-pressed="true"] { background: var(--sun); color: var(--ink); }
.zm-spot.is-found { background: var(--good); }
@keyframes zm-ring { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.zm-panel { padding: 14px 16px 18px; border-top: 1px solid var(--rule); overflow: auto; max-height: 38dvh; display: grid; gap: 12px; align-content: start; background: var(--paper); }
@media (min-width: 900px) { .zm-panel { border-top: 0; border-left: 1px solid var(--rule); max-height: none; padding: 20px; } }
.zm-q { font: 700 24px/1.35 var(--font-kid); margin: 0; }
.zm-a { font: 400 20px/1.45 var(--font-kid); margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--good-l); }
.zm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.zm-tabs button { min-width: 48px; min-height: 48px; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper); font: 700 18px/1 var(--font-ui); }
.zm-tabs button[aria-pressed="true"] { background: var(--unit-ink); color: #fff; border-color: var(--unit-ink); }
.zm-tabs button.is-found { border-color: var(--good); }
.zm-help { font-size: 14px; color: var(--ink-2); margin: 0; }
.zm-zoomtxt { font: 700 14px/1 var(--font-ui); color: var(--ink-2); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Field trips ---------- */
.trips { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.trips > .trip:only-child { max-width: 640px; }
.trip { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px 18px; background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); text-decoration: none; color: var(--ink); border: 2px solid transparent; align-items: start; }
.trip:nth-child(even) { border-radius: var(--r-paper-2); }
.trip:hover { border-color: var(--unit); box-shadow: var(--shadow-lift); }
.trip .tk { grid-row: 1 / span 4; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px 20px 16px 20px; background: var(--unit-l); color: var(--unit-ink); }
.trip .tk .ico { width: 28px; height: 28px; }
.trip > :not(.tk) { grid-column: 2; min-width: 0; }
.trip b { font: 700 20px/1.25 var(--font-kid); }
.trip .org { font: 600 14px/1.4 var(--font-ui); color: var(--ink-2); display: block; }
.trip .org > span + span::before { content: "·"; margin: 0 .4em; color: var(--ink-3); font-weight: 700; }
.trip .org .k { text-transform: uppercase; letter-spacing: .07em; font-size: 12px; font-weight: 800; color: var(--unit-ink); }
.trip .why { font-size: 15px; color: var(--ink-2); margin: 0; }
.trip .ext { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1 var(--font-ui); color: var(--unit-ink); }
.trip .ext .ico { width: 16px; height: 16px; }
.trip-note { font-size: 15px; color: var(--ink-2); margin: 14px 0 0; }

/* ---------- Checkpoint game ---------- */
.cp { display: grid; gap: 18px; }
.cp-stage { background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); padding: 18px; position: relative; overflow: hidden; border: 1px solid rgba(120, 95, 60, .08); }
@media (min-width: 600px) { .cp-stage { padding: 26px; } }
.cp-rounds { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 700 15px/1 var(--font-ui); color: var(--ink-2); margin-bottom: 14px; }
.cp-rounds .r { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; font-weight: 600; color: var(--ink-3); }
.cp-rounds .r + .r::before { content: ""; width: 18px; border-top: 3px dotted var(--rule); margin-right: 2px; }
.cp-rounds .rn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font: 800 13px/1 var(--font-ui); }
.cp-rounds .r[aria-current="step"] { color: var(--unit-ink); font-weight: 800; }
.cp-rounds .r[aria-current="step"] .rn { background: var(--unit-ink); border-color: var(--unit-ink); color: #fff; }
.cp-rounds .r.is-done { color: var(--good); }
.cp-rounds .r.is-done .rn { background: var(--good); border-color: var(--good); color: #fff; }
.cp-prompt { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.cp-listen { display: inline-flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 26px 0 10px; border-radius: 999px; border: 0; background: var(--unit-ink); color: #fff; font: 700 21px/1 var(--font-ui); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.cp-listen .disc { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.2); }
.cp-listen .ico { width: 30px; height: 30px; }
.cp-listen.is-playing .disc { animation: osw-pulse 1s ease-in-out infinite; }
.cp-q { font: 700 clamp(23px, 4vw, 30px)/1.3 var(--font-kid); margin: 0; flex: 1 1 260px; }
.cp-choices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cp-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-paper); background: var(--warm); border: 3px solid transparent; transition: transform .15s ease, border-color .15s ease, opacity .2s ease; }
.cp-card:nth-child(2) { border-radius: var(--r-paper-2); }
.cp-pick { display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; padding: 18px 14px 74px; min-height: 190px; border: 0; background: transparent; border-radius: inherit; color: var(--ink); font: 700 23px/1.3 var(--font-kid); width: 100%; }
.cp-pick:hover { background: color-mix(in srgb, var(--unit-l) 60%, transparent); }
.cp-shape { width: 64px; height: 64px; }
.cp-say { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 10px; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); font: 700 15px/1 var(--font-ui); color: var(--ink); }
.cp-say .ico { width: 22px; height: 22px; color: var(--unit-ink); }
.cp-say.is-playing { border-color: var(--unit-ink); background: var(--unit-l); }
.cp-card.is-right { border-color: var(--good); background: var(--good-l); }
.cp-card.is-wrong { border-color: var(--hint); background: var(--hint-l); }
.cp-card.is-wrong .cp-pick { opacity: .6; }
.cp-card .tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 800 14px/1 var(--font-ui); }
.cp-card.is-right .tag { background: var(--good); color: #fff; }
.cp-card.is-wrong .tag { background: var(--hint); color: #fff; }
.cp-hint-ring .cp-say { animation: cp-glow 1.4s ease-in-out 2; }
@keyframes cp-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 60%, transparent); } }
.cp-feedback { min-height: 56px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; font: 700 22px/1.3 var(--font-kid); }
.cp-feedback .ico { width: 34px; height: 34px; flex: none; }
.cp-feedback.good { color: var(--good); }
.cp-feedback.try { color: var(--hint); }
.cp-feedback .sub { font: 400 18px/1.4 var(--font-kid); color: var(--ink-2); flex-basis: 100%; }
.cp-words { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.cp-word { min-height: 96px; padding: 14px; border-radius: var(--r-paper-sm); border: 3px solid var(--rule); background: var(--paper); font: 700 26px/1.2 var(--font-kid); color: var(--ink); box-shadow: 0 3px 0 rgba(60,40,20,.1); }
.cp-word:nth-child(even) { border-radius: 11px 15px 10px 14px / 14px 10px 15px 11px; }
.cp-word:hover { border-color: var(--unit); background: var(--unit-l); }
.cp-word.is-right { border-color: var(--good); background: var(--good-l); color: var(--good); }
.cp-word.is-done { border-style: dashed; color: var(--ink-3); background: var(--warm); }
.cp-word.is-wrong { border-color: var(--hint); background: var(--hint-l); }
.cp-stars { display: flex; gap: 6px; }
.cp-stars .ico { width: 30px; height: 30px; color: var(--sand); }
.cp-stars .ico.on { color: var(--sun); }
.cp-stars .ico.on svg { fill: var(--sun); stroke: #b07d12; }
.cp-meaning { font: 400 19px/1.4 var(--font-kid); color: var(--ink-2); margin: 0; flex-basis: 100%; }
.cp-done { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 18px 0; }
.cp-stamp { width: 150px; height: 150px; }
.cp-done h3 { margin: 4px 0 0; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px 6px 2px 5px; opacity: .9; animation: osw-fall 1.6s ease-in forwards; }
@keyframes osw-fall { to { transform: translateY(520px) rotate(320deg); opacity: 0; } }

/* ---------- Parent corner ---------- */
.parent { background: color-mix(in srgb, var(--warm) 70%, var(--paper)); }
.pgrid { display: grid; gap: 18px; }
@media (min-width: 860px) { .pgrid { grid-template-columns: 1fr 1fr; } .pgrid .full { grid-column: 1 / -1; } }
.parent h3 { font: 700 21px/1.25 var(--font-ui); display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.parent h3 .ico { color: var(--unit-ink); }
.parent ul, .parent ol { margin: 0; padding-left: 1.25em; }
.parent li { margin: 6px 0; }
.steps { list-style: none; counter-reset: s; padding: 0 !important; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; margin: 10px 0; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--unit-ink); color: var(--unit-ink); font: 700 16px/1 var(--font-ui); }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--hint-l); color: #5e3d07; }
.callout .ico { flex: none; width: 26px; height: 26px; }
.callout.safe { background: #fdeee7; color: #7a2e12; }
.evidence { display: grid; gap: 12px; }
.evidence div { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.evidence p { margin: 0; }
/* At a glance: one tidy card of label/value rows. */
.glance { background: var(--paper); border-top: 6px solid var(--unit); }
.gl { margin: 0; display: grid; }
.gl-row { display: grid; gap: 4px 18px; padding: 14px 0; border-top: 1px solid var(--rule); }
.gl-row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) { .gl-row { grid-template-columns: 170px minmax(0, 1fr); align-items: start; } }
.gl dt { display: flex; align-items: center; gap: 10px; font: 800 14px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--unit-ink); padding-top: 3px; }
.gl dt .ico { width: 24px; height: 24px; }
.gl dd { margin: 0; }
.gl dd p { margin: 0; max-width: 72ch; }
.gl-row.is-safety dd { padding: 10px 14px; border-radius: 12px; background: #fdeee7; color: #7a2e12; }
.gl-row.is-safety dt { color: #9a3a16; }
.chips { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0 !important; padding: 6px 12px; border-radius: 999px; background: var(--warm); border: 1px solid var(--rule); font-size: 15px; }
/* Add to portfolio: the one clear action for grown-ups. */
.portfolio-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; margin-top: 18px; padding: 16px; border-radius: 18px; background: var(--unit-l); border: 2px dashed color-mix(in srgb, var(--unit) 45%, transparent); }
.portfolio-cta .pc-art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px 20px 16px 20px; background: var(--paper); color: var(--unit-ink); }
.portfolio-cta .pc-art .ico { width: 30px; height: 30px; }
.portfolio-cta p { margin: 0; font-size: 15px; color: var(--ink); }
.portfolio-cta .btn { grid-column: 1 / -1; justify-self: start; }
.booklist li { margin: 8px 0; }
.evidence .g { display: inline-grid; place-items: center; min-width: 74px; padding: 6px 10px; border-radius: 10px; background: var(--unit-ink); color: #fff; font: 800 13px/1.1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
details.key { border-radius: 16px; background: var(--paper); border: 2px solid var(--rule); }
details.key > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; font: 700 18px/1.2 var(--font-ui); cursor: pointer; list-style: none; border-radius: 14px; }
details.key > summary::-webkit-details-marker { display: none; }
details.key > summary .chev { margin-left: auto; transition: transform .15s; }
details.key[open] > summary .chev { transform: rotate(180deg); }
details.key .key-body { padding: 0 18px 18px; }
details.key h4 { font: 700 16px/1.3 var(--font-ui); margin: 16px 0 6px; color: var(--unit-ink); }
.pnext { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 34px; }
.pnext a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 12px 18px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); text-decoration: none; color: var(--ink); }
.pnext a:hover { box-shadow: var(--shadow-lift); }
.pnext a small { font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--unit-ink); display: flex; align-items: center; gap: 6px; }
.pnext a b { font: 700 18px/1.25 var(--font-kid); }
.pnext a.next { text-align: right; grid-column: 2; }
.pnext a.next small { justify-content: flex-end; }

/* ---------- Cards: units, weeks, tools, steps ---------- */
.grid-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tcard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 86px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.tcard:hover { border-color: var(--unit); box-shadow: var(--shadow-lift); }
.tcard .ti { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 16px 20px 16px 20px; color: #fff; }
.tcard .ti .ico { width: 28px; height: 28px; }
.tcard b { display: block; font: 700 20px/1.2 var(--font-kid); }
.tcard small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
/* Hub cards: a few big choices, one line each. */
.hub-cards .tcard { padding: 20px; }
.hub-cards .tcard b { font-size: 24px; }
.hub-cards .tcard small { font-size: 16px; line-height: 1.4; margin-top: 4px; }
@media (min-width: 600px) { .hub-cards--2, .hub-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) {
  .hub-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .hub-cards--3 .tcard { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1000px) {
  .hub-cards--4 { grid-template-columns: repeat(4, 1fr); }
  .hub-cards--4 .tcard { flex-direction: column; align-items: flex-start; }
}
.ow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; font-family: var(--font-ui); }
.ow-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
.ow-tabs a:hover { border-color: var(--unit); }
.ow-tabs a[aria-current] { background: var(--unit-ink); border-color: var(--unit-ink); color: #fff; }
.ph-more { display: grid; gap: 12px; margin-top: 14px; }
.ph-more .key-body > :last-child { margin-bottom: 0; }
.ph-next { margin: 18px 0 0; }
.block { padding: 34px 0 6px; }
.block > .wrap > h2 { margin-bottom: 18px; }
.prose { max-width: 68ch; }
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 68ch; }
.wrap.prose > .rhythm { max-width: 900px; }
.wrap.prose > .credit-list { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.prose h2 { margin-top: 1.4em; }
.prose p, .prose li { font-size: 18px; }
.feature-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list li .ico { color: var(--unit-ink); width: 26px; height: 26px; margin-top: 1px; }
.rhythm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); list-style: none; padding: 0; }
.rhythm li { padding: 16px 18px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); }
.rhythm b { display: block; font: 800 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--unit-ink); margin-bottom: 8px; }
.credit-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.credit-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); align-items: start; }
.credit-list img { width: 112px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--warm); }
.credit-list b { display: block; font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
.credit-list small { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.credit-list small + small { margin-top: 2px; }
.credit-list a { word-break: break-word; }
.credit-list b, .credit-list small { overflow-wrap: anywhere; }
@media (max-width: 420px) { .credit-list li { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .credit-list img { width: 88px; height: 66px; } }
.credit-list img[data-media-src] { object-fit: contain; }
.credit-list details summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--unit-ink); }

/* ---------- Labs: one shared banner, gallery cards ---------- */
/* Every lab writes its required banner as <p class="lab-<type>-banner">. One look for all of them. */
.lab-host p[class$="-banner"] {
  margin: 0 0 12px; padding: 10px 14px; border: 0; border-left: 6px solid var(--unit); border-radius: 12px;
  background: var(--unit-l); color: var(--ink); font: 700 20px/1.3 var(--font-kid); letter-spacing: 0;
}
.lab-host h2 { font-family: var(--font-kid); font-weight: 700; letter-spacing: 0; }
.lab-hero { padding: 28px 0 22px; }
/* With a lab open, the hero shrinks to a title row so the model starts near the top. */
.page-labs:has(#lab-open:not([hidden])) .lab-hero { padding-bottom: 40px; }
.page-labs:has(#lab-open:not([hidden])) .lab-hero .hero-doodle { display: none; }
.lab-hero .lede { margin: 0; }
.lab-open-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 0 16px; }
.lab-open-head h2 { margin: 0; font-size: clamp(26px, 4.6vw, 34px); }
.lab-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); list-style: none; padding: 0; margin: 0; }
.lab-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 96px; padding: 14px 16px; background: var(--paper); border-radius: var(--r-paper-sm); box-shadow: var(--shadow-paper); text-decoration: none; color: var(--ink); border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.lab-gallery li:nth-child(even) .lab-card { border-radius: 11px 15px 10px 14px / 14px 10px 15px 11px; }
.lab-card:hover { border-color: var(--unit); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.lab-card .li { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px 22px 17px 23px; background: var(--unit-l); color: var(--unit-ink); }
.lab-card .li .ico { width: 34px; height: 34px; }
.lab-card b { display: block; font: 700 21px/1.2 var(--font-kid); }
.lab-card small { display: block; margin-top: 4px; font: 700 13px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--unit-ink); }
.lab-unit { margin: 30px 0 14px; display: flex; align-items: center; gap: 10px; font: 800 clamp(22px, 3.6vw, 27px)/1.2 var(--font-title); }
.lab-unit .dot { width: 16px; height: 16px; border-radius: 5px 7px 5px 7px; background: var(--unit); flex: none; }

/* ---------- Checkpoint answers: number, colour and shape ---------- */
.cp-card { border-color: color-mix(in srgb, var(--cp-c, var(--unit)) 35%, var(--rule)); background: color-mix(in srgb, var(--cp-c, var(--unit-l)) 45%, var(--paper)); }
.cp-num { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); color: var(--ink); font: 800 21px/1 var(--font-ui); pointer-events: none; }
.cp-shape { width: 72px; height: 72px; }
/* Answer picture: a paper tile edged in the card's colour, beside the number. */
.cp-shape.cp-pic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 20px 16px 22px 16px; background: var(--paper); border: 3px solid color-mix(in srgb, var(--unit) 55%, var(--rule)); box-shadow: 0 2px 0 color-mix(in srgb, var(--unit) 20%, transparent); }
.cp-pic svg { width: 74px; height: 74px; }
.cp-pick { padding-bottom: 88px; }
.cp-say { min-height: 56px; padding: 0 20px 0 12px; border-color: var(--unit-ink); background: var(--unit-ink); color: #fff; font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.cp-say .ico { width: 28px; height: 28px; color: #fff; }
.cp-say:hover { background: color-mix(in srgb, var(--unit-ink) 85%, black); }
.cp-say.is-playing { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.cp-say.is-playing .ico { color: var(--ink); }
.cp-listen { min-height: 76px; font-size: 23px; }
.cp-listen .disc { width: 58px; height: 58px; }
.cp-listen .ico { width: 34px; height: 34px; }
.cp-feedback:empty { min-height: 0; margin-top: 0; }

/* ---------- Passport stamps ---------- */
.stamp { display: block; width: 100%; height: 100%; transform: rotate(var(--rot, -6deg)); overflow: visible; }
/* A soft press: drops in, settles, ink spreads. Calm motion shows it at rest. */
.is-new .stamp { animation: osw-stamp .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.is-new::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 3px solid currentColor; opacity: 0; animation: osw-ink .7s ease-out .35s both; pointer-events: none; }
.cp-stamp, .hero-stamp { position: relative; color: var(--unit-ink); }
@keyframes osw-stamp { 0% { transform: translateY(-26px) scale(1.5) rotate(-24deg); opacity: 0; } 55% { transform: scale(.94) rotate(calc(var(--rot, -6deg) + 2deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--rot, -6deg)); opacity: 1; } }
@keyframes osw-ink { 0% { transform: scale(.9); opacity: .45; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Phones: bigger targets for small fingers ---------- */
@media (max-width: 599px) and (pointer: coarse) {
  :root { --tap: 52px; }
  .lp-speed button { min-height: 48px; min-width: 54px; }
  .osw-footer nav a { min-height: 48px; }
  .cp-say { min-height: 60px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .zm-spot::after, .confetti, .is-new::after { display: none !important; }
  .lab-loading { animation: none; }
}
html.osw-rm { scroll-behavior: auto; }
html.osw-rm *, html.osw-rm *::before, html.osw-rm *::after { animation: none !important; transition: none !important; }
html.osw-rm .zm-spot::after, html.osw-rm .confetti, html.osw-rm .is-new::after { display: none !important; }
html.osw-rm .tilt-l, html.osw-rm .tilt-r { transform: none; }

/* ---------- Print ---------- */
@media print {
  .osw-header, .osw-footer, .ow-tabs, .secnav, .lp-bar, .skip-link { display: none !important; }
  body { background: #fff; }
  .paper, .lookcard, .wcard { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Paper craft: torn bands, tape and hand-drawn frames ---------- */
/* A band of kraft paper with torn top and bottom edges. */
.band-kraft { position: relative; background: var(--kraft); margin-top: 40px; padding-bottom: 36px; }
.band-kraft::before, .band-kraft::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: var(--kraft); -webkit-mask: var(--torn) 0 0 / 100% 100%; mask: var(--torn) 0 0 / 100% 100%; }
.band-kraft::before { top: -15px; }
.band-kraft::after { bottom: -15px; transform: scaleY(-1); }
.band-kraft + * { margin-top: 18px; }
.wsec.band-kraft { border-top: 0; }
/* A photo taped onto the page, held by four paper photo corners, inside a thin double ink frame. */
.framed::after { content: ""; position: absolute; inset: -17px; pointer-events: none; border: 1.4px solid var(--pen); border-radius: 3px;
  outline: 1.1px solid var(--pen); outline-offset: -5px; opacity: .85;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M0 0h28L0 28z' fill='%235a4630'/><path d='M28 0L0 28' stroke='%23fff' stroke-opacity='.3' stroke-width='1.2'/></svg>") left 13px top 13px / 28px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M0 0h28v28z' fill='%235a4630'/><path d='M0 0l28 28' stroke='%23fff' stroke-opacity='.3' stroke-width='1.2'/></svg>") right 13px top 13px / 28px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M0 0v28h28z' fill='%235a4630'/><path d='M0 0l28 28' stroke='%23fff' stroke-opacity='.3' stroke-width='1.2'/></svg>") left 13px bottom 13px / 28px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M28 0v28H0z' fill='%235a4630'/><path d='M28 0L0 28' stroke='%23fff' stroke-opacity='.3' stroke-width='1.2'/></svg>") right 13px bottom 13px / 28px no-repeat; }
.taped::before { content: ""; position: absolute; z-index: 2; top: -16px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(233, 218, 178, .78); -webkit-mask: var(--tape) 0 0 / 100% 100%; mask: var(--tape) 0 0 / 100% 100%; pointer-events: none; }
/* Explainer players get the same taped, ink-framed look as photos. */
.ex-player::before, .xp-player::before { content: ""; position: absolute; z-index: 3; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(233, 218, 178, .78); -webkit-mask: var(--tape) 0 0 / 100% 100%; mask: var(--tape) 0 0 / 100% 100%; pointer-events: none; }
.ex-player::after, .xp-player::after { content: ""; position: absolute; inset: -12px; pointer-events: none; border: 1.4px solid var(--pen); border-radius: 6px; outline: 1.1px solid var(--pen); outline-offset: -5px; opacity: .55; }
@media (max-width: 599px) { .ex-player::after, .xp-player::after { display: none; } }
.lookcard { position: relative; }
.lookcard::before { content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(2.5deg);
  background: rgba(233, 218, 178, .78); -webkit-mask: var(--tape) 0 0 / 100% 100%; mask: var(--tape) 0 0 / 100% 100%; pointer-events: none; }
.lookcard:nth-child(even)::before { left: 22%; transform: translateX(-50%) rotate(-4deg); }
/* Explainers: keyboard hints only where there is a keyboard and pointer hover. */
@media (hover: none) { .ex-keys, .xp-keys, .xp-note:has(> .xp-keys:only-child) { display: none; } }
@media print { .framed::after, .taped::before, .lookcard::before { display: none; } }

/* ---------- One notebook for every page: tool and hub heroes ---------- */
/* Map, Globe, Museum, Portfolio, Labs, Parent hub and Credits share this hero: eyebrow, Literata title,
   an Andika lede and a taped, ink-framed drawing on the right. */
.hero--tool { padding: 30px 0 56px; }
.hero--tool h1 { margin-bottom: 12px; max-width: 16ch; }
.hero--tool .lede { margin: 0; max-width: 52ch; font: 400 19px/1.55 var(--font-kid); color: var(--ink-2); }
@media (min-width: 600px) { .hero--tool .lede { font-size: 21px; } }
@media (min-width: 860px) { .hero--tool .hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
@media (min-width: 1100px) { .hero--tool .hero-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
.hero-doodle { position: relative; display: none; margin: 20px 18px; padding: 8px; background: var(--paper); border-radius: 3px; box-shadow: var(--shadow-lift); transform: rotate(1.4deg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 16px 16px; }
.hero-doodle svg { display: block; width: 100%; height: auto; }
@media (min-width: 860px) { .hero-doodle { display: block; } }
html.osw-rm .hero-doodle { transform: none; }
/* Slim: for Map and Globe, where the model itself should start inside the first screen. */
.hero--slim { padding: 22px 0 46px; }
.hero--slim h1 { font-size: clamp(34px, 5.4vw, 48px); margin-bottom: 8px; }
@media (min-width: 860px) { .hero--slim .hero-grid { grid-template-columns: minmax(0, 1fr) 240px; } .hero--slim .hero-doodle { margin: 14px 18px; } }
/* Small notes under the lede: a paper label, and an inked text link. */
.hero-note { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 9px 16px 9px 12px; border-radius: var(--r-paper-sm);
  background: var(--paper); box-shadow: var(--shadow-paper); font: 600 15px/1.35 var(--font-ui); color: var(--ink); max-width: 100%; }
.hero-note svg, .hero-note .ico { flex: none; width: 22px; height: 22px; color: var(--unit-ink); }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; }
.hero-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 17px/1.2 var(--font-ui); color: var(--unit-ink); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.hero-link svg, .hero-link .ico { width: 22px; height: 22px; flex: none; }

/* A panel with a thin inner ink rule, so it reads as double-framed like the photos. */
.inked { position: relative; }
.inked::after { content: ""; position: absolute; inset: 5px; border: 1.2px solid var(--pen); border-radius: inherit; opacity: .38; pointer-events: none; }
.taped { position: relative; }
/* A kraft-paper panel with torn top and bottom edges, for the "more" area at the foot of a tool. */
/* A torn kraft band starts its first heading flush with the band. */
.band-kraft .wrap > h2:first-child { margin-top: 0; }
.kraft-panel { position: relative; margin: 34px 0 16px; padding: 22px 18px 24px; background: var(--kraft); }
.kraft-panel::before, .kraft-panel::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--kraft); -webkit-mask: var(--torn) 0 0 / 100% 100%; mask: var(--torn) 0 0 / 100% 100%; pointer-events: none; }
.kraft-panel::before { top: -13px; }
.kraft-panel::after { bottom: -13px; transform: scaleY(-1); }
@media (min-width: 600px) { .kraft-panel { padding: 26px 28px 28px; } }
@media print { .hero-doodle, .inked::after, .kraft-panel::before, .kraft-panel::after { display: none; } .kraft-panel { background: none; } }

/* ---------- Lab Challenge: one second-round ticket for every lab ---------- */
/* Markup: <button class="osw-challenge" aria-describedby="why-id">Challenge<small>Round 2</small></button>
           <p class="osw-challenge-why" id="why-id">Finish round 1 first.</p>
   Locked: aria-disabled="true" (not disabled), so it stays focusable and can speak its reason on tap.
   Add .is-new for one stamp-style reveal when it unlocks. The star (or lock) stub is drawn by CSS. */
.osw-challenge {
  position: relative; display: inline-flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; min-height: 64px; max-width: 100%;
  padding: 10px 24px 10px 74px; border: 2px solid var(--unit-ink); border-radius: 12px 16px 12px 16px / 14px 12px 16px 12px;
  background: var(--unit-ink); color: #fff; font: 700 22px/1.15 var(--font-kid); text-align: left; letter-spacing: 0;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--unit-ink) 55%, black), var(--shadow-paper);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.osw-challenge small { font: 800 12.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
/* The ticket stub: a gold star disc, then a perforated line. */
.osw-challenge::before { content: ""; position: absolute; left: 12px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fffdf8' stroke='%231d2a31' stroke-width='1.6' stroke-linejoin='round'><path d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8Z'/></svg>") center / 26px no-repeat;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fff 30%, transparent); }
.osw-challenge::after { content: ""; position: absolute; left: 63px; top: 9px; bottom: 9px; border-left: 2px dashed rgba(255, 255, 255, .6); }
.osw-challenge:hover { background: color-mix(in srgb, var(--unit-ink) 86%, black); }
.osw-challenge:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--unit-ink) 55%, black); }
.osw-challenge:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 14px; box-shadow: 0 0 0 3px #fff; }
/* Locked: still in the unit colour and fully readable, with a lock on the stub and a dashed edge. */
.osw-challenge[aria-disabled="true"] { background: var(--unit-l); color: var(--unit-ink); border-style: dashed; border-color: color-mix(in srgb, var(--unit-ink) 70%, transparent);
  box-shadow: none; cursor: help; }
.osw-challenge[aria-disabled="true"]::before { background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10.5' width='14' height='9.5' rx='2.5' fill='%23f0b23a'/><path d='M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.5v2'/></svg>") center / 24px no-repeat;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--unit) 40%, transparent); }
.osw-challenge[aria-disabled="true"]::after { border-left-color: color-mix(in srgb, var(--unit-ink) 45%, transparent); }
.osw-challenge[aria-disabled="true"]:hover { background: color-mix(in srgb, var(--unit-l) 80%, var(--unit) 10%); }
.osw-challenge[aria-disabled="true"]:active { transform: none; }
.osw-challenge.is-new { animation: osw-ticket .6s cubic-bezier(.2, .9, .3, 1.25) both; }
.osw-challenge.is-new::before { animation: osw-ink .7s ease-out .3s both; }
@keyframes osw-ticket { 0% { transform: translateY(-10px) scale(1.12) rotate(-3deg); opacity: .4; } 60% { transform: scale(.97) rotate(.6deg); opacity: 1; } 100% { transform: none; } }
/* The reason, always visible beside or under the ticket. */
.osw-challenge-why { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 400 18px/1.35 var(--font-kid); color: var(--ink-2); }
.osw-challenge-why::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--unit); background: var(--unit-l)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7v6M12 16.5v.5' stroke='%231d2a31' stroke-width='2.6' stroke-linecap='round'/></svg>") center / 16px no-repeat; }
.osw-challenge-why:empty { display: none; }
@media (max-width: 599px) { .osw-challenge { width: 100%; } }

/* ---------- Books by grade: book colors, "My book" choice, week Standards band ---------- */
/* <html data-book> is set in the page head from osw:book; these rules show and highlight with no script and no layout shift. */
[data-for="k-social"] { --bk: var(--u5); --bk-ink: var(--u5-ink); --bk-l: var(--u5-l); }
[data-for="k-science"] { --bk: var(--u6); --bk-ink: var(--u6-ink); --bk-l: var(--u6-l); }
[data-for="g1-social"] { --bk: var(--u1); --bk-ink: var(--u1-ink); --bk-l: var(--u1-l); }
[data-for="g1-science"] { --bk: var(--u2); --bk-ink: var(--u2-ink); --bk-l: var(--u2-l); }
[data-for="g2-social"] { --bk: var(--u3); --bk-ink: var(--u3-ink); --bk-l: var(--u3-l); }
[data-for="g2-science"] { --bk: var(--u4); --bk-ink: var(--u4-ink); --bk-l: var(--u4-l); }
.spine { display: inline-block; width: 12px; height: 20px; flex: none; border-radius: 2px 4px 4px 2px; background: var(--bk, var(--unit)); box-shadow: inset 3px 0 0 rgba(0, 0, 0, .2); }
.osw-pop .bk-dot { background: var(--bk); }
/* Grade badge and "This is my grade" buttons (home lanes, grade pages, books, parent hub). */
.lane-num { display: grid; place-items: center; align-content: center; flex: none; width: 72px; height: 72px; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--unit-ink); color: #fff; font: 800 34px/1 var(--font-title); }
.lane-num small { font: 800 10.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.lane-pick[aria-pressed="false"] .ico, .bkg-pick[aria-pressed="false"] .ico { display: none; }
.lane-pick[aria-pressed="true"], .bkg-pick[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.ph-grades { display: grid; gap: 16px; margin: 16px 0; }
@media (min-width: 760px) { .ph-grades { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.ph-grade h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.ph-grade .lane-num { width: 56px; height: 56px; font-size: 26px; }
.ph-grade .lane-num { background: var(--unit-ink); }
.ph-gl { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.ph-gl li { line-height: 1.5; }
.ph-gl .spine { margin-right: 8px; vertical-align: -4px; }
/* "My grade" menu: the two grade years, then the grade choice, then the family-edition units. */
.osw-grade .osw-pop { width: min(380px, calc(100vw - 24px)); }
.gr-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--unit-ink); color: #fff; font: 800 17px/1 var(--font-title); }
.gr-link[data-g="k"] .gr-num { background: var(--u5-ink); }
.gr-link[data-g="1"] .gr-num { background: var(--u2-ink); }
.gr-link[data-g="2"] .gr-num { background: var(--u4-ink); }
.gr-pick { margin: 6px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--warm); }
.gr-pick-l { margin: 0 0 8px; font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gr-opt[data-grade-set="k"] { grid-column: 1 / -1; }
.gr-opt { min-height: var(--tap); padding: 6px 10px; border-radius: 12px; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 15px/1.2 var(--font-ui); cursor: pointer; }
.gr-opt:hover { border-color: var(--unit); }
.gr-opt[aria-pressed="true"] { border-color: var(--unit-ink); background: var(--unit-l); color: var(--unit-ink); }
.gr-opt[aria-pressed="true"]::before { content: "✓ " / ""; }
.osw-pop-h { margin: 12px 12px 6px; font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bk-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-pick legend { padding: 0; margin-bottom: 6px; font: 700 21px/1.25 var(--font-kid); }
.bk-pick-hint { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; }
.bk-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.bk-opt { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 14px 8px 12px; border-radius: 14px; background: var(--paper); border: 2px solid var(--rule); cursor: pointer; font: 500 16px/1.2 var(--font-ui); color: var(--ink); }
.bk-opt input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--unit-ink); }
.bk-opt b { font-weight: 800; }
.bk-opt:hover { border-color: var(--unit); }
.bk-opt:has(input:checked) { border-color: var(--unit-ink); background: var(--unit-l); color: var(--unit-ink); }
.bk-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.osw-pop .bk-pick { padding: 0 2px 4px; }
.osw-pop .bk-pick legend { margin: 12px 10px 8px; font: 700 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.osw-pop .bk-opts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px; }
.osw-pop .bk-opt { font-size: 15px; padding: 6px 10px; }
/* Lesson-first labels above a week title: "Grade 1 · Science · Lesson 6". Shown only for the chosen book or grade. */
.lsn-here { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.lsn-here:not(:has(.lsn:not([hidden]))) { margin: 0; }
.lsn { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 12px; border-radius: 16px 20px 16px 20px; background: var(--bk-l, var(--unit-l)); border: 2px solid var(--bk-ink, var(--unit-ink)); color: var(--bk-ink, var(--unit-ink)); font: 600 17px/1.2 var(--font-ui); text-decoration: none; box-shadow: var(--shadow-paper); }
.lsn b { font-weight: 800; }
.lsn .spine { height: 24px; background: var(--bk-ink, var(--unit-ink)); }
.lsn:hover { background: var(--paper); }
.lsn.is-out { background: var(--paper); border-style: dashed; color: var(--ink-2); box-shadow: none; font-size: 15px; }
html[data-book="g1-social"] .lsn[data-for="g1-social"], html[data-book="g1-science"] .lsn[data-for="g1-science"],
html[data-book="g2-social"] .lsn[data-for="g2-social"], html[data-book="g2-science"] .lsn[data-for="g2-science"],
html[data-book="family"] .lsn[data-for="family"],
html[data-grade="1"]:not([data-book^="g"]) .lsn[data-g="1"]:not(.is-out), html[data-grade="1"]:not([data-book^="g"]) .lsn-none[data-g="1"],
html[data-grade="2"]:not([data-book^="g"]) .lsn[data-g="2"]:not(.is-out), html[data-grade="2"]:not([data-book^="g"]) .lsn-none[data-g="2"],
html[data-grade="both"]:not([data-book^="g"]) .lsn[data-g]:not(.is-out), html[data-grade="both"]:not([data-book^="g"]) .lsn-none { display: inline-flex; }
/* With a grade chosen the family week number becomes the secondary label. */
.tagpill .fam-pre { display: none; padding: 0; background: none; color: inherit; }
html[data-grade] .tagpill .fam-pre { display: inline; }
/* "Your book" flags */
.bk-flag { display: none; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--bk-ink, var(--unit-ink)); color: #fff; font: 800 12.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bk-flag .ico { width: 16px; height: 16px; }
.wsec-head > .bk-flag { align-self: center; }
html[data-book="g1-social"] .std-group[data-for="g1-social"] .bk-flag, html[data-book="g1-science"] .std-group[data-for="g1-science"] .bk-flag,
html[data-book="g2-social"] .std-group[data-for="g2-social"] .bk-flag, html[data-book="g2-science"] .std-group[data-for="g2-science"] .bk-flag,
html[data-book="g1-social"] body[data-books~="g1-social"] .bk-flag.for-social, html[data-book="g2-social"] body[data-books~="g2-social"] .bk-flag.for-social,
html[data-book="g1-science"] body[data-books~="g1-science"] .bk-flag.for-science, html[data-book="g2-science"] body[data-books~="g2-science"] .bk-flag.for-science { display: inline-flex; }
/* Week sections for the chosen subject get a ring; the other subject's reading stays, on plain warm paper. */
html[data-book="g1-social"] body[data-books~="g1-social"] .sheet.for-social, html[data-book="g2-social"] body[data-books~="g2-social"] .sheet.for-social,
html[data-book="g1-science"] body[data-books~="g1-science"] .for-science:not(.bk-flag), html[data-book="g2-science"] body[data-books~="g2-science"] .for-science:not(.bk-flag) { box-shadow: 0 0 0 3px var(--unit), var(--shadow-lift); }
html[data-book="g1-social"] body[data-books~="g1-social"] .sheet.for-science, html[data-book="g2-social"] body[data-books~="g2-social"] .sheet.for-science,
html[data-book="g1-science"] body[data-books~="g1-science"] .sheet.for-social, html[data-book="g2-science"] body[data-books~="g2-science"] .sheet.for-social { background: var(--warm); }
/* A grade with no single book: flag its subjects' sheets this week; the subject it does not study this week goes plain. */
html[data-grade="1"]:not([data-book^="g"]) body[data-books~="g1-social"] .bk-flag.for-social, html[data-grade="2"]:not([data-book^="g"]) body[data-books~="g2-social"] .bk-flag.for-social,
html[data-grade="1"]:not([data-book^="g"]) body[data-books~="g1-science"] .bk-flag.for-science, html[data-grade="2"]:not([data-book^="g"]) body[data-books~="g2-science"] .bk-flag.for-science { display: inline-flex; }
html[data-grade="1"]:not([data-book^="g"]) body:not([data-books~="g1-social"]) .sheet.for-social, html[data-grade="2"]:not([data-book^="g"]) body:not([data-books~="g2-social"]) .sheet.for-social,
html[data-grade="1"]:not([data-book^="g"]) body:not([data-books~="g1-science"]) .sheet.for-science, html[data-grade="2"]:not([data-book^="g"]) body:not([data-books~="g2-science"]) .sheet.for-science { background: var(--warm); }
/* Parent corner: only the chosen grade's evidence line. */
.bk-gnote { display: none; margin: 0; font-size: 14px; color: var(--ink-2); }
html[data-book^="g1"] .evidence [data-grade="2"], html[data-book^="g2"] .evidence [data-grade="1"],
html[data-grade="1"]:not([data-book^="g"]) .evidence [data-grade="2"], html[data-grade="2"]:not([data-book^="g"]) .evidence [data-grade="1"] { display: none; }
html[data-book^="g1"] .bk-gnote[data-grade="1"], html[data-book^="g2"] .bk-gnote[data-grade="2"],
html[data-grade="1"]:not([data-book^="g"]) .bk-gnote[data-grade="1"], html[data-grade="2"]:not([data-book^="g"]) .bk-gnote[data-grade="2"] { display: block; }
/* A chosen grade shows only its own standards column. */
html[data-grade="1"] .std-grade[data-g="2"], html[data-grade="2"] .std-grade[data-g="1"] { display: none; }
@media (min-width: 820px) { html[data-grade="1"] .std-cols, html[data-grade="2"] .std-cols { grid-template-columns: 1fr; } }
/* The week's Standards band, under the hero. */
.stdband { padding: 0 0 8px; }
.std-card { border-top: 6px solid var(--unit); }
.std-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 16px; }
.std-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(24px, 3.6vw, 30px); }
.std-head h2 .ico { width: 28px; height: 28px; color: var(--unit-ink); }
.std-head p { flex: 1 1 260px; margin: 0; color: var(--ink-2); font-size: 15px; }
.std-more, .std-lesson { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--rule); background: var(--paper); color: var(--unit-ink); font: 700 15px/1 var(--font-ui); text-decoration: none; white-space: nowrap; }
.std-more:hover, .std-lesson:hover { border-color: var(--unit); }
.std-more .ico, .std-lesson .ico { width: 18px; height: 18px; }
.std-cols { display: grid; gap: 16px; }
@media (min-width: 820px) { .std-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
.std-grade h3 { margin: 0 0 8px; font: 800 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--unit-ink); }
.std-group { padding: 12px 14px; border-radius: 14px; background: var(--warm); border: 2px solid transparent; }
.std-group + .std-group { margin-top: 10px; }
.std-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.std-top h4 { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font: 700 17px/1.2 var(--font-ui); }
.std-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.std-list li { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.std-code { font: 800 14px/1.65 var(--font-ui); color: var(--bk-ink, var(--unit-ink)); white-space: nowrap; }
.std-none { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.std-group.is-none { background: transparent; border: 2px dashed var(--rule); }
html[data-book="g1-social"] .std-group[data-for="g1-social"], html[data-book="g1-science"] .std-group[data-for="g1-science"],
html[data-book="g2-social"] .std-group[data-for="g2-social"], html[data-book="g2-science"] .std-group[data-for="g2-science"] { background: var(--paper); border: 2px solid var(--bk); box-shadow: var(--shadow-paper); }
.home-book { display: grid; gap: 16px; margin-top: 22px; justify-items: start; }
.ph-pick { margin: 18px 0 28px; }