/* Hallmark · shape: Bento Grid · genre: editorial · theme: Hum (deal 1/3, seed interactive-picture-books-ontario-215d·f4941f03·2026-11-06·r0) · redesign: full · draw: dca231
 * hero: Stage · nav: banner over a retracting bar · footer: letter close · imagery: the product · signature: the live 3D pop-up book on a torn sugar-paper mat
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · spring: the primary only (gate 12, Hum declares it) · weakest: S, the shelf of 22 books is dense, so it sits on its own paper-2 band with big grade numerals */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tear-both: polygon(0.0% -0.5px, 2.5% 0.5px, 5.0% 0.2px, 7.5% -1.9px, 10.0% 2.6px, 12.5% 2.1px, 15.0% 2.6px, 17.5% 2.5px, 20.0% 2.5px, 22.5% 1.2px, 25.0% -0.1px, 27.5% 2.7px, 30.0% 0.3px, 32.5% 0.5px, 35.0% 2.1px, 37.5% 4.8px, 40.0% 3.2px, 42.5% 0.2px, 45.0% -0.6px, 47.5% 2.5px, 50.0% 3.3px, 52.5% 3.6px, 55.0% 3.2px, 57.5% 1.3px, 60.0% 0.6px, 62.5% 3.6px, 65.0% -0.0px, 67.5% -1.0px, 70.0% 1.2px, 72.5% 3.4px, 75.0% -0.2px, 77.5% 0.3px, 80.0% 4.1px, 82.5% 3.8px, 85.0% 0.7px, 87.5% 2.4px, 90.0% 5.8px, 92.5% 3.4px, 95.0% 6.1px, 97.5% 1.5px, 100.0% 3.6px, 100.0% calc(100% - 0.1px), 97.5% calc(100% - -0.5px), 95.0% calc(100% - 1.8px), 92.5% calc(100% - 1.3px), 90.0% calc(100% - 1.6px), 87.5% calc(100% - 0.0px), 85.0% calc(100% - -0.2px), 82.5% calc(100% - 2.2px), 80.0% calc(100% - -2.2px), 77.5% calc(100% - -0.4px), 75.0% calc(100% - 2.5px), 72.5% calc(100% - 5.4px), 70.0% calc(100% - 7.0px), 67.5% calc(100% - 6.0px), 65.0% calc(100% - 8.9px), 62.5% calc(100% - 7.0px), 60.0% calc(100% - 4.6px), 57.5% calc(100% - 6.5px), 55.0% calc(100% - 4.7px), 52.5% calc(100% - 5.6px), 50.0% calc(100% - 5.3px), 47.5% calc(100% - 6.3px), 45.0% calc(100% - 3.2px), 42.5% calc(100% - 1.4px), 40.0% calc(100% - 6.1px), 37.5% calc(100% - 3.9px), 35.0% calc(100% - 6.2px), 32.5% calc(100% - 4.5px), 30.0% calc(100% - 0.2px), 27.5% calc(100% - 3.8px), 25.0% calc(100% - 3.0px), 22.5% calc(100% - 5.9px), 20.0% calc(100% - 8.6px), 17.5% calc(100% - 8.8px), 15.0% calc(100% - 6.9px), 12.5% calc(100% - 6.8px), 10.0% calc(100% - 4.1px), 7.5% calc(100% - 1.4px), 5.0% calc(100% - 4.2px), 2.5% calc(100% - 7.4px), 0.0% calc(100% - 5.2px));
  --tear-bottom: polygon(0 0, 100% 0, 100.0% calc(100% - -3.3px), 97.5% calc(100% - -2.1px), 95.0% calc(100% - 0.1px), 92.5% calc(100% - 4.0px), 90.0% calc(100% - 5.5px), 87.5% calc(100% - 2.9px), 85.0% calc(100% - 4.7px), 82.5% calc(100% - 2.9px), 80.0% calc(100% - 5.6px), 77.5% calc(100% - 3.0px), 75.0% calc(100% - -0.6px), 72.5% calc(100% - 1.7px), 70.0% calc(100% - 4.0px), 67.5% calc(100% - 4.6px), 65.0% calc(100% - 5.9px), 62.5% calc(100% - 3.4px), 60.0% calc(100% - 5.3px), 57.5% calc(100% - 3.0px), 55.0% calc(100% - 5.4px), 52.5% calc(100% - 4.8px), 50.0% calc(100% - 0.6px), 47.5% calc(100% - 2.9px), 45.0% calc(100% - 7.0px), 42.5% calc(100% - 4.8px), 40.0% calc(100% - 5.2px), 37.5% calc(100% - 1.3px), 35.0% calc(100% - 3.1px), 32.5% calc(100% - 2.7px), 30.0% calc(100% - 4.8px), 27.5% calc(100% - 6.0px), 25.0% calc(100% - 6.2px), 22.5% calc(100% - 4.1px), 20.0% calc(100% - 6.4px), 17.5% calc(100% - 8.0px), 15.0% calc(100% - 8.1px), 12.5% calc(100% - 5.7px), 10.0% calc(100% - 1.9px), 7.5% calc(100% - 5.9px), 5.0% calc(100% - 2.8px), 2.5% calc(100% - 2.1px), 0.0% calc(100% - 0.7px));
  --tear-top: polygon(0.0% 3.4px, 2.5% 1.8px, 5.0% 4.4px, 7.5% 2.6px, 10.0% 3.7px, 12.5% 6.9px, 15.0% 5.3px, 17.5% 6.2px, 20.0% 2.6px, 22.5% 3.8px, 25.0% 3.5px, 27.5% 1.5px, 30.0% 0.4px, 32.5% 1.4px, 35.0% 2.9px, 37.5% 2.7px, 40.0% 1.4px, 42.5% 2.0px, 45.0% 2.5px, 47.5% -0.0px, 50.0% 2.1px, 52.5% 4.7px, 55.0% 4.0px, 57.5% 4.0px, 60.0% 1.6px, 62.5% 4.1px, 65.0% 2.8px, 67.5% 0.1px, 70.0% 1.8px, 72.5% 1.5px, 75.0% -0.0px, 77.5% 1.3px, 80.0% 4.9px, 82.5% 3.4px, 85.0% 0.9px, 87.5% 4.1px, 90.0% 6.0px, 92.5% 6.4px, 95.0% 3.2px, 97.5% 1.6px, 100.0% 0.3px, 100% 100%, 0 100%);
  --number: oklch(52% 0.16 250); --algebra: oklch(52% 0.15 300); --data: oklch(64% 0.15 60);
  --spatial: oklch(56% 0.13 155); --money: oklch(60% 0.19 10);
  --banner-h: 40px; --bar-h: 72px;
  --color-ink-paper: oklch(96% 0.012 95);
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0625rem; line-height: 1.5; }
b, strong { font-weight: 600; }
mark { background: color-mix(in oklab, var(--color-accent) 70%, transparent); color: inherit; padding: 0 var(--space-3xs); border-radius: var(--space-2xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
a { color: var(--color-accent-2); }
h1, h2, h3 { color: var(--color-ink); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* card stock controls */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 0; border-radius: var(--radius-stock); min-height: 54px; padding: 0 var(--space-lg); font-weight: 600; font-size: var(--text-md); text-decoration: none; color: var(--color-ink); cursor: pointer;
  background: var(--grain), var(--fibre), var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-rule), inset 0 2px 0 var(--color-fringe), 0 var(--edge) 0 0 var(--color-edge);
  transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink);
  box-shadow: inset 0 2px 0 color-mix(in oklab, var(--color-fringe) 60%, transparent), 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent);
  transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); --edge: 4px; }
.btn--sm:hover { --edge: 6px; }
.btn--sm:active { --edge: 1px; }

/* paper sheets */
.sheet { position: absolute; filter: var(--shadow-paper); pointer-events: none; }
.sheet > i { position: absolute; inset: 0; background: var(--grain), var(--fibre), var(--sheet-c, var(--color-paper-3)); clip-path: var(--tear-both); }
.sheet::before { content: ""; position: absolute; inset: -1px; background: var(--color-fringe); clip-path: var(--tear-both); }

/* nav: a banner over a bar; the banner scrolls away and the bar stays */
.site-head { position: sticky; top: calc(-1 * var(--banner-h)); z-index: var(--z-sticky-nav); }
.banner { height: var(--banner-h); display: grid; place-items: center; padding-inline: var(--space-md); background: var(--grain), var(--color-ink); color: var(--color-ink-paper); font-size: var(--text-sm); text-align: center; }
.bar { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); background: var(--grain), var(--fibre), var(--color-paper); max-width: none; box-shadow: 0 1px 0 var(--color-rule); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.brand-mark { width: 36px; height: 36px; }
.nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav a:not(.btn) { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-md); padding: var(--space-xs) 0; border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-snap); }
.nav a:not(.btn):hover { border-bottom-color: var(--color-accent-deep); }
.menu-btn { display: none; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; cursor: pointer; }
.menu-btn:hover { background: var(--color-paper-2); }
.menu-btn:active { background: var(--color-paper-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; translate: none; }

/* hero: Stage */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - var(--banner-h) - var(--bar-h)); padding-block: var(--space-xl) var(--space-2xl); }
.hero-copy { display: grid; justify-items: start; gap: var(--space-lg); }
.hero h1 { font-size: clamp(2.75rem, 4.6vw + 0.6rem, 5.25rem); line-height: 1.02; max-width: 11ch; }
.hero .lead { max-width: 30ch; color: var(--color-ink-2); }
.note { font-size: var(--text-sm); color: var(--color-muted); }
.hero-stage { position: relative; height: clamp(360px, 68svh, 720px); }
.sheet--mat { inset: 4% 0 2% 4%; --sheet-c: var(--color-sugar); }
.hero-stage canvas { position: relative; display: block; width: 100%; height: 100%; }
.stage-fallback { position: absolute; inset: 0; display: none; place-items: center; }
.stage-fallback img { width: min(60%, 360px); }
.hero-stage.no3d canvas { display: none; }
.hero-stage.no3d .stage-fallback { display: grid; }

/* bento */
.bento { padding-block: var(--space-2xl) var(--section-gap-s); }
.bento h2 { margin-bottom: var(--space-xl); }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: var(--gap-columns); }
.tile { position: relative; margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); grid-column: span 5; }
.tile p { color: var(--color-ink-2); max-width: 34ch; }
.tile--lead { grid-column: span 7; grid-row: span 2; padding: 0; overflow: hidden; justify-content: stretch; }
.tile--lead img, .tile--shot img, .tile video { width: 100%; height: 100%; object-fit: cover; flex: 1; min-height: 0; display: block; background: var(--color-paper-3); }
.tile figcaption { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.tile--pear { grid-column: span 4; background: var(--grain), var(--fibre), var(--color-accent); }
.count { font-variant-numeric: tabular-nums; font-size: var(--text-title); line-height: 1.3; color: var(--color-ink); }
.count b { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.tiles > .tile:nth-child(5) { grid-column: span 4; }
.tile--shot { grid-column: span 4; padding: 0; overflow: hidden; }

/* the ad */
.ad { padding-block: var(--section-gap-s) 0; display: grid; gap: var(--space-xl); }
.ad-frame { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--color-ink); box-shadow: var(--shadow-card); }
.ad-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--color-ink); }
.ad-frame figcaption { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-paper); }

/* how: a pinned run */
.how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); padding-block: var(--section-gap-s); align-items: start; }
.how-pin { position: sticky; top: calc(var(--bar-h) + var(--space-xl)); }
.how-shot { margin: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-card); }
.how-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.how-shot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--color-ink); }
.how-shot figcaption { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.how h2 { margin-bottom: var(--space-xl); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-md); row-gap: var(--space-xs); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(s); grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-stock); background: var(--color-mint); color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); }
.steps p { color: var(--color-ink-2); }

/* library: the shelf on its own paper */
.library { position: relative; padding-block: var(--section-gap-s); }
.library::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain), var(--fibre), var(--color-paper-2); clip-path: var(--tear-both); filter: drop-shadow(0 1px 0 var(--color-fringe)); }
.lib-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); }
.sub { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; }
.shelf { display: grid; }
.grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-edge); }
.grade:last-child { border-bottom: var(--rule-hair) solid var(--color-edge); }
.grade-head { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-md); align-content: start; align-items: baseline; }
.grade-n { grid-row: span 2; font-size: var(--text-display-s); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-ink); min-width: 1.4ch; }
.grade-head h3 { font-size: var(--text-title); }
.grade-head p { color: var(--color-muted); font-size: var(--text-sm); }
.grade-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-md); }
.book { --edge: 5px; position: relative; display: grid; align-content: start; gap: var(--space-2xs); min-height: 150px; padding: var(--space-lg); border-radius: var(--radius-card); text-decoration: none; color: var(--color-ink);
  background: var(--grain), var(--fibre), var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge), 2px calc(var(--edge) + 6px) 14px -6px color-mix(in oklab, var(--color-ink) 28%, transparent);
  transition: translate var(--dur-short) var(--ease-snap), box-shadow var(--dur-short) var(--ease-snap); }
.book .ttl { font-size: var(--text-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.book .n { font-weight: 600; color: var(--color-mint-deep); font-size: var(--text-sm); }
.book .what { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.book .open { margin-top: var(--space-sm); font-weight: 600; color: var(--color-accent-2); }
.book.live:hover { --edge: 8px; translate: 0 -3px; }
.book.live:active { --edge: 1px; translate: 0 4px; }
.book.live:hover .ttl { color: var(--color-accent-2); }
.book:not(.live) { opacity: 0.7; }
.more { margin-top: var(--space-xl); color: var(--color-ink-2); }

/* families and teachers: rows */
.who { padding-block: var(--section-gap-s); }
.who-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.who-row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.who h2 { font-size: var(--text-2xl); }
.who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.who li { position: relative; padding-left: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; max-width: 52ch; }
.who li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-mint-deep); }

/* about: a torn ink sheet */
.about { position: relative; padding-block: var(--section-gap-s); margin-block: var(--space-xl) 0; }
.about::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain), var(--color-ink); clip-path: var(--tear-both); }
.about-sheet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.about-logo { width: 100%; max-width: 300px; justify-self: center; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); rotate: -2deg; box-shadow: var(--shadow-card); }
.about-copy { display: grid; gap: var(--space-md); justify-items: start; color: var(--color-ink-paper); }
.about-copy h2 { color: var(--color-ink-paper); }
.about-copy p { color: var(--color-ink-paper); max-width: 60ch; }
.about-copy .btn { margin-top: var(--space-sm); }

/* footer: a letter close */
.site-foot { padding-block: var(--space-3xl) var(--space-2xl); }
.foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-xl); }
.signoff { font-size: var(--text-title); line-height: 1.3; color: var(--color-ink-2); }
.sig { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.colophon { font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; text-align: right; }

@media (max-width: 60rem) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-sm) var(--gutter) var(--space-lg); background: var(--grain), var(--fibre), var(--color-paper); box-shadow: var(--shadow-card); }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .nav .btn { margin-top: var(--space-md); }
  .bar { position: relative; }
  .hero, .how, .lib-head, .about-sheet, .who-row, .grade { grid-template-columns: minmax(0, 1fr); }
  .grade { gap: var(--space-md); }
  .hero { min-height: 0; gap: var(--space-xl); padding-top: var(--space-xl); }
  .hero-stage { height: clamp(300px, 56vw, 480px); }
  .how { gap: var(--space-xl); }
  .how-pin { position: static; }
  .tile, .tile--lead, .tile--pear, .tile--shot, .tiles > .tile:nth-child(5) { grid-column: span 6; grid-row: auto; }
  .tile--lead, .tile--shot { grid-column: span 12; aspect-ratio: 16 / 10; }
  .who-row { gap: var(--space-md); }
  .about-logo { max-width: 220px; justify-self: start; }
  .foot { grid-template-columns: 1fr; }
  .colophon { text-align: left; }
}
@media (max-width: 40rem) {
  :root { --banner-h: 36px; --bar-h: 64px; }
  .banner { font-size: var(--text-xs); }
  .tile, .tile--pear, .tiles > .tile:nth-child(5) { grid-column: span 12; min-height: 0; }
  .tiles { grid-auto-rows: auto; }
  .grade-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .book { min-height: 0; padding: var(--space-md); }
  .brand-name { font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .book.live:hover { translate: none; }
}