/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4
 * Hallmark · macrostructure: Narrative Workflow, adapted to the existing Carret story
 * genre: playful · tone: warm and curious
 * theme: existing Carret identity · nav: N1b solid, compact · footer: Ft5 Statement
 * audience: school leaders · purpose: see what students learn and make, then enquire
 * enrichment: existing illustrative photography and CSS project vignettes
 * motion: feedback on actions; the level timeline draws on tab change; the teaching steps climb once on scroll
 * hero refinement: one display headline; grouped copy and action; widescreen video poster that opens the Carret video in a dialog
 * background rhythm: ivory hero; lavender teaching; warm-white levels and demos; soft blue Studios; navy; ivory school; soft blue invitation
 * review: source and contrast checks; rendered review by owner, no browser tests
 */
@import url('/tokens.css');

html, body { overflow-x: clip; }
.home-page { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.hm-wrap { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.home-page h1, .home-page h2, .home-page h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.home-page h2 { font-size: var(--text-heading); line-height: 1.15; letter-spacing: -.035em; }
.home-page p { color: var(--color-muted); }
.home-page a:focus-visible, .home-page button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.hm-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; font-size: var(--text-base); font-weight: 800; white-space: nowrap; color: var(--color-accent); }
.hm-link .icon { width: 20px; height: 20px; transition: transform var(--dur-short) var(--ease-out); }
.hm-link:focus-visible .icon { transform: translateX(3px); }
.hm-button { padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-pill); min-height: 52px; transition: background-color var(--dur-short) var(--ease-out); }
.hm-button:active { transform: translateY(1px); }
.hm-header { background: var(--color-paper); border: 0; z-index: var(--z-sticky); }
.hm-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 80px; }
.hm-header .brand { padding: var(--space-md) 0; }
.hm-header .brand img { width: 120px; }
.hm-header .menu-toggle { display: grid; place-items: center; background: var(--color-blue-soft); color: var(--color-blue-dark); }
.hm-header .menu-toggle .menu-close, .hm-header .menu-toggle[aria-expanded=true] .icon { display: none; }
.hm-header .menu-toggle[aria-expanded=true] .menu-close { display: block; }
.hm-header nav { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--color-paper); padding: var(--space-md) var(--page-gutter) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); max-height: calc(100svh - 80px); overflow: auto; box-shadow: none; }
.hm-header nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.hm-header nav a { font-size: var(--text-base); font-weight: 700; padding: var(--space-sm) 0; min-height: 48px; white-space: nowrap; }
.hm-header nav .hm-mobile-enquire { color: var(--color-accent); display: flex; gap: var(--space-sm); align-items: center; }
.hm-nav-action { display: none; }

.hm-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); align-items: center; }
.hm-hero-copy { display: grid; gap: var(--space-lg); min-width: 0; }
.hm-hero h1 { max-width: 16ch; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.hm-hero h1 > span { color: var(--color-accent); }
.hm-hero-intro { display: grid; gap: var(--space-lg); }
.hm-hero-intro p { font-size: var(--text-base); line-height: 1.65; max-width: 42ch; }
.hm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.hm-hero-visual { min-width: 0; margin: 0; }
.hm-hero-video { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.hm-hero-video img { width: 100%; height: 100%; object-fit: cover; }
.hm-hero-play { position: absolute; left: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-base); font-weight: 800; line-height: 1; transition: background-color var(--dur-short) var(--ease-out); }
.hm-hero-play .icon { width: 20px; height: 20px; fill: currentColor; }
/* The video plays in a dialog. The player is added on open and removed on close. */
html:has(.hm-video-dialog[open]) { overflow: hidden; }
.hm-video-dialog { width: min(calc(100vw - var(--page-gutter) * 2), 1100px, calc((100svh - 8rem) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; background: var(--color-clear); }
.hm-video-dialog::backdrop { background: color-mix(in srgb, var(--color-ink) 88%, transparent); }
.hm-video-close { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 var(--space-xs) auto; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-clear); color: var(--color-paper); }
.hm-video-dialog .hm-video-close:focus-visible { outline-color: var(--color-paper); outline-offset: 0; }
.hm-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-ink); }
.hm-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.hm-hero-caption { display: flex; justify-content: flex-end; padding-top: var(--space-xs); }
.hm-hero-caption .hm-link { min-height: 44px; gap: var(--space-xs); font-size: var(--text-sm); }

.hm-teaching { padding-block: var(--space-2xl); background: var(--color-purple-soft); }
.hm-teaching-learning { display: grid; gap: var(--space-xl); }
.hm-teaching-intro { display: grid; gap: var(--space-sm); }
.hm-teaching-intro p { color: var(--color-purple); font: 700 var(--text-md)/1.3 var(--font-display); letter-spacing: -.02em; }
/* The three stages stack as one panel on small screens and climb as steps from 60rem. */
.hm-teaching-steps { --hm-step-rise: 0px; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.hm-teaching-steps li { display: grid; align-content: start; gap: var(--space-sm); min-width: 0; padding: var(--space-lg); background: var(--color-surface); }
.hm-teaching-steps li:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.hm-teaching-steps li:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.hm-teaching-steps li + li { border-top: var(--rule-hair) solid var(--color-purple-soft); }
.hm-teaching-step-number { color: var(--color-purple); font: 700 var(--text-heading)/1 var(--font-display); letter-spacing: -.035em; }
.hm-teaching-steps h3 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.hm-teaching-steps p { max-width: 40ch; font-size: var(--text-base); line-height: 1.6; }
.hm-project-section { padding-block: var(--space-2xl); }
/* The levels and the demos share one neutral surface, so the level colours stay distinct. */
.home-page .hm-project-section { background: var(--color-surface); }
.home-page .hm-journey + .hm-project-section { padding-top: 0; }
.home-page .st-home p { color: var(--color-blue-dark); }
.hm-section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.hm-section-head p { font-size: var(--text-base); max-width: 40ch; }
.hm-section-head .hm-link { margin-top: var(--space-sm); }
.hm-projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.hm-project { min-width: 0; display: grid; grid-template-rows: minmax(336px, auto) auto; }
.hm-project-preview { display: block; border-radius: var(--radius-card); }
.hm-project-preview:active { opacity: .8; }
.hm-project-copy { display: grid; grid-template-rows: auto auto minmax(3.2em, auto) auto; justify-items: start; gap: var(--space-xs); padding-top: var(--space-lg); }
.hm-project-category { font-size: var(--text-sm); color: var(--color-muted); }
.hm-project-copy h3 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.025em; }
.hm-project-copy p { font-size: var(--text-base); }
.hm-project-copy .hm-link { margin-top: var(--space-xs); }
.hm-story-art, .hm-garden-art, .hm-question-art { border-radius: var(--radius-card); min-height: 336px; height: 100%; padding: var(--space-lg); }
.hm-story-art { display: flex; flex-direction: column; justify-content: center; background: var(--color-purple-soft); color: var(--color-purple); }
.hm-story-note { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-sm); transform: rotate(-3deg); }
.hm-story-note > span { font-size: var(--text-sm); font-weight: 800; }
.hm-story-note p { font: 700 var(--text-md)/1.4 var(--font-display); color: var(--color-purple); margin-top: var(--space-sm); }
.hm-story-paths { position: relative; display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-sm); font-size: var(--text-sm); }
.hm-story-paths::before { content: ''; position: absolute; left: 22%; right: 22%; top: calc(var(--space-sm) * -1); height: var(--space-sm); border: var(--rule-hair) solid var(--color-purple); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.hm-garden-art { background: var(--color-green-soft); display: grid; gap: var(--space-sm); align-content: center; }
.hm-garden-art > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-green); }
.hm-garden-art span { font-size: var(--text-sm); }
.hm-garden-art strong { grid-column: 1; font-size: var(--text-base); }
.hm-garden-art .icon { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.hm-question-art { background: var(--color-blue-soft); display: flex; flex-direction: column; justify-content: center; color: var(--color-blue-dark); gap: var(--space-lg); }
.hm-question-art > span { font-size: var(--text-sm); }
.hm-question-art > strong { font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: -.025em; }
.hm-question-art > div { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.hm-question-art > div span { border-bottom: var(--rule-hair) solid var(--color-accent); padding-bottom: var(--space-2xs); }
.hm-example-note { font-size: var(--text-sm); margin-top: var(--space-xl); }

.hm-journey { padding-block: var(--space-2xl); }
.home-page .hm-journey { background: var(--color-surface); }
.home-page .hm-explorer { border: 0; }
.home-page .hm-explorer .stage-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); border: 0; padding: 0; background: var(--color-clear); }
.home-page .hm-explorer .stage-tabs::after, .home-page .hm-explorer .stage-tabs button::after { display: none; }
/* The tabs sit on the panel like folder tabs. The selected tab shares the panel's colour. */
.home-page .hm-explorer .stage-tabs button { --hm-tab-ink: var(--color-ink); --hm-tab-soft: var(--color-orange-soft); display: flex; gap: var(--space-sm); align-items: center; min-height: 92px; padding: var(--space-md) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-clear); color: var(--color-muted); }
.home-page .hm-explorer .stage-tabs button[data-stage-tab=builder] { --hm-tab-ink: var(--color-accent-deep); --hm-tab-soft: var(--color-blue-soft); }
.home-page .hm-explorer .stage-tabs button[data-stage-tab=ninja] { --hm-tab-ink: var(--color-purple); --hm-tab-soft: var(--color-purple-soft); }
.home-page .hm-explorer .stage-tabs button[aria-selected=true] { border-color: var(--color-clear); background: var(--hm-tab-soft); color: var(--hm-tab-ink); }
.home-page .hm-explorer .stage-tabs .hm-level-number { display: none; }
.home-page .hm-explorer .stage-tabs span { margin: 0; font-size: var(--text-base); }
.home-page .hm-explorer .stage-tabs strong { display: block; font: 700 var(--text-lg)/1.25 var(--font-display); }
.hm-level-name small { display: block; font-size: var(--text-sm); margin-top: var(--space-2xs); }
/* Where :has() is supported, one tint slides between the tabs and takes the selected level's colour. */
@supports selector(:has(*)) {
  .home-page .hm-explorer { --hm-active-soft: var(--color-orange-soft); }
  .home-page .hm-explorer:has([data-stage-tab=builder][aria-selected=true]) { --hm-active-soft: var(--color-blue-soft); }
  .home-page .hm-explorer:has([data-stage-tab=ninja][aria-selected=true]) { --hm-active-soft: var(--color-purple-soft); }
  .home-page .hm-explorer .stage-tabs::before { content: ''; position: absolute; inset-block: 0; left: 0; width: calc((100% - var(--space-xs) * 2) / 3); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--hm-active-soft); transform: translateX(calc(var(--active-stage, 0) * (100% + var(--space-xs)))); transition: transform var(--dur-panel) var(--ease-out), background-color var(--dur-panel) var(--ease-out); }
  .home-page .hm-explorer .stage-tabs button[aria-selected=true] { background: var(--color-clear); }
}
/* Each level panel sets its own colours and fills with the level's soft colour. */
.home-page .hm-stage { --hm-level-ink: var(--color-ink); --hm-level-line: var(--color-orange); --hm-level-soft: var(--color-orange-soft); --hm-level-copy: var(--color-muted); display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: var(--space-xl); min-height: 460px; padding: var(--space-lg); background: var(--hm-level-soft) !important; border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.home-page .hm-stage-builder { --hm-level-ink: var(--color-accent-deep); --hm-level-line: var(--color-accent); --hm-level-soft: var(--color-blue-soft); --hm-level-copy: var(--color-blue-dark); }
.home-page .hm-stage-ninja { --hm-level-ink: var(--color-purple); --hm-level-line: var(--color-purple); --hm-level-soft: var(--color-purple-soft); --hm-level-copy: var(--color-purple); }
.home-page .hm-stage h3 { font-size: var(--text-xl); margin: 0; max-width: 26ch; text-wrap: balance; }
.home-page .hm-stage h4 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.025em; }
.hm-stage-copy { display: grid; gap: var(--space-lg); min-width: 0; }
.hm-stage-lead { display: grid; gap: var(--space-sm); min-width: 0; }
.home-page .hm-stage-lead p { max-width: 46ch; color: var(--hm-level-copy); font-size: var(--text-base); line-height: 1.65; }
.hm-stage-lead .hm-link { justify-self: start; }
.hm-stage-outcome { min-width: 0; }
/* One point per year: the line runs down the side on small screens and across the top from 60rem. */
.hm-stage-years { display: grid; margin: var(--space-lg) 0 0; }
.hm-stage-years > div { --hm-year: 0; position: relative; display: grid; align-content: start; gap: var(--space-2xs); min-width: 0; padding: 0 0 var(--space-lg) var(--space-lg); }
.hm-stage-years > div:nth-child(2) { --hm-year: 1; }
.hm-stage-years > div:nth-child(3) { --hm-year: 2; }
.hm-stage-years > div:nth-child(4) { --hm-year: 3; }
.hm-stage-years > div::before { content: ''; position: absolute; left: 0; top: var(--space-2xs); width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-pill); background: var(--hm-level-line); }
.hm-stage-years > div::after { content: ''; position: absolute; left: calc((var(--space-sm) - var(--rule-strong)) / 2); top: var(--space-2xs); bottom: calc(var(--space-2xs) * -1); width: var(--rule-strong); background: var(--hm-level-line); transform-origin: top; }
.hm-stage-years > div:last-child { padding-bottom: 0; }
.hm-stage-years > div:last-child::after { display: none; }
.hm-stage-years dt { color: var(--hm-level-ink); font-size: var(--text-sm); font-weight: 800; line-height: 1.4; }
.hm-stage-years dd { margin: 0; color: var(--color-ink); font: 700 var(--text-md)/1.3 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.hm-futures { background: var(--color-blue-dark); padding-block: var(--space-2xl); color: var(--color-paper); }
.hm-futures-inner { display: grid; gap: var(--space-xl); }
.hm-futures h2 { max-width: 20ch; }
.hm-futures h2 > span { display: block; text-wrap: balance; }
.hm-futures-inner > div > p { color: var(--color-blue-soft); margin-top: var(--space-lg); max-width: 44ch; }
.hm-futures .hm-link { color: var(--color-paper); margin-top: var(--space-lg); }
.hm-futures a:focus-visible { outline-color: var(--color-paper); }
.hm-future-notes { display: grid; gap: var(--space-lg); }
.hm-future-notes p { display: grid; gap: var(--space-2xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-accent); }
.hm-future-notes span { color: var(--color-blue-soft); font-size: var(--text-sm); }
.hm-future-notes strong { color: var(--color-paper); font: 700 var(--text-lg)/1.3 var(--font-display); }
.hm-school { padding-block: var(--space-2xl); }
.hm-school-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.hm-school figure { min-width: 0; }
.hm-school img { width: 100%; height: auto; aspect-ratio: 1.3; object-fit: cover; border-radius: var(--radius-card); }
.hm-school figcaption { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-sm); }
.hm-school-story p { font-size: var(--text-base); line-height: 1.65; max-width: 44ch; margin-top: var(--space-lg); }
.hm-school-story .hm-link { margin-top: var(--space-lg); }
/* How it runs: what adoption takes, in one bordered panel with the enquiry beside it. */
.hm-delivery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.hm-delivery-intro { display: grid; justify-items: start; align-content: start; gap: var(--space-lg); min-width: 0; }
.home-page .hm-delivery h3 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.025em; }
.hm-delivery-details { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.hm-delivery-details > div { display: grid; align-content: start; gap: var(--space-2xs); min-width: 0; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.hm-delivery-details > div:first-child { padding-top: 0; border-top: 0; }
.hm-delivery-details > div:last-child { padding-bottom: 0; }
.hm-delivery-details dt { color: var(--color-ink); font: 700 var(--text-md)/1.3 var(--font-display); letter-spacing: -.02em; }
.hm-delivery-details dd { margin: 0; max-width: 32ch; color: var(--color-muted); font-size: var(--text-base); line-height: 1.5; }
.home-page .hm-footer { background: var(--color-blue-soft); padding-block: var(--space-2xl) var(--space-lg); }
.home-page .hm-footer-invite p, .home-page .hm-colophon { color: var(--color-blue-dark); }
.hm-footer-invite { display: grid; gap: var(--space-lg); padding-bottom: var(--space-2xl); }
.hm-footer-invite p { color: var(--color-ink); margin-bottom: var(--space-md); }
.hm-footer-links { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xl); display: grid; gap: var(--space-lg); }
.hm-footer-links > a { width: 120px; min-height: 44px; display: flex; align-items: center; }
.hm-footer-links nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.hm-footer-links nav a, .hm-colophon a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.hm-colophon { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xl); }
.hm-colophon > span:nth-child(2) { flex-basis: 100%; }
.hm-social { display: flex; margin-inline: calc(var(--space-sm) * -1); }
.hm-colophon .hm-social a { justify-content: center; width: 44px; margin-left: 0; }
.hm-social .icon { width: 20px; height: 20px; }
.home-page button:disabled { opacity: .55; cursor: not-allowed; }
.home-page button:active:not(:disabled) { transform: translateY(1px); }
.hm-link:not(.hm-button):active, .hm-footer a:active, .hm-header a:active { text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
  .hm-link:hover .icon, .hm-nav-action:hover .icon, .hm-project:hover .hm-link .icon { transform: translateX(3px); }
  .hm-button:hover, .hm-hero-video:hover .hm-hero-play { background: var(--color-accent-deep); }
  .hm-footer-links a:hover, .hm-colophon a:hover { color: var(--color-accent); }
  .hm-nav-action:hover { background: var(--color-blue-soft); }
  .hm-explorer .stage-tabs button[aria-selected=false]:hover { color: var(--color-ink); }
}
@media (min-width: 40rem) {
  .hm-hero { padding-top: var(--space-2xl); }
  .hm-delivery-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-projects { max-width: 560px; margin-inline: auto; }
  .home-page .hm-explorer .stage-tabs button { padding: var(--space-lg); }
  .hm-futures-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .hm-school-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .hm-delivery-details > div:nth-child(2) { padding-top: 0; border-top: 0; }
  .hm-delivery-details > div:nth-child(3) { padding-bottom: 0; }
  .hm-footer-invite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
  .hm-colophon > span:nth-child(2) { flex-basis: auto; }
  .hm-colophon a { margin-left: auto; }
}
@media (min-width: 60rem) {
  .hm-header .menu-toggle { display: none; }
  .hm-nav { min-height: 88px; gap: var(--space-lg); }
  .hm-header nav, .hm-header nav.open { position: static; display: flex; flex-direction: row; align-items: center; gap: var(--space-lg); padding: 0; border: 0; max-height: none; overflow: visible; background: var(--color-clear); }
  .hm-header nav a { font-size: var(--text-sm); }
  .hm-header nav .hm-mobile-enquire { display: none; }
  .hm-nav-action { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: 800; white-space: nowrap; }
  .hm-nav-action { transition: background-color var(--dur-short) var(--ease-out); }
  .hm-nav-action .icon { width: 17px; height: 17px; transition: transform var(--dur-short) var(--ease-out); }
  .hm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); padding-block: var(--space-2xl); }
  .hm-hero-intro p { font-size: var(--text-md); line-height: 1.5; }
  .hm-teaching { padding-block: var(--space-3xl); }
  .hm-teaching-intro p { font-size: var(--text-lg); }
  .hm-teaching-steps { --hm-step-rise: var(--space-xl); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; overflow: clip; }
  .hm-teaching-steps li, .hm-teaching-steps li:first-child, .hm-teaching-steps li:last-child { position: relative; isolation: isolate; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); border-radius: 0; background: var(--color-clear); }
  .hm-teaching-steps li::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-card) 0 0; background: var(--color-surface); transition: transform 700ms var(--ease-out); }
  .hm-teaching-steps li:nth-child(1) { margin-top: calc(var(--hm-step-rise) * 2); }
  .hm-teaching-steps li:nth-child(1)::before { border-radius: var(--radius-card) 0 0 var(--radius-card); }
  .hm-teaching-steps li:nth-child(2) { margin-top: var(--hm-step-rise); }
  .hm-teaching-steps li:nth-child(3)::before { border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0; }
  .hm-teaching-steps li + li { border-top: 0; border-inline-start: var(--rule-hair) solid var(--color-purple-soft); }
  .hm-teaching-step-number { align-self: start; transition: transform 700ms var(--ease-out); }
  .hm-teaching-steps li:nth-child(3)::before, .hm-teaching-steps li:nth-child(3) .hm-teaching-step-number { transition-delay: 120ms; }
  /* Before the steps first scroll into view they sit level; removing the class lets them climb. */
  .hm-teaching-steps.is-level li:nth-child(2)::before, .hm-teaching-steps.is-level li:nth-child(2) .hm-teaching-step-number { transform: translateY(var(--hm-step-rise)); }
  .hm-teaching-steps.is-level li:nth-child(3)::before, .hm-teaching-steps.is-level li:nth-child(3) .hm-teaching-step-number { transform: translateY(calc(var(--hm-step-rise) * 2)); }
  .hm-project-section { padding-block: var(--space-3xl); }
  .hm-section-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; margin-bottom: var(--space-2xl); }
  .hm-section-head > :last-child { padding-top: var(--space-xs); }
  .hm-section-head p { max-width: 34ch; font-size: var(--text-md); line-height: 1.5; }
  .hm-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: none; }
  .hm-project { grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--space-xs); }
  .hm-project-copy { grid-template-rows: subgrid; grid-row: span 4; padding-top: var(--space-md); }
  .hm-story-note { padding: var(--space-lg); }
  .hm-story-note p { font-size: var(--text-lg); }
  .hm-project-copy h3 { font-size: 1.625rem; }
  .hm-journey { padding-block: var(--space-3xl); }
  .home-page .hm-explorer .stage-tabs button { gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); }
  .home-page .hm-explorer .stage-tabs .hm-level-number { display: block; color: var(--color-muted); font-size: var(--text-sm); }
  .home-page .hm-explorer .stage-tabs strong { font-size: 1.875rem; }
  .home-page .hm-stage { gap: var(--space-2xl); padding: var(--space-xl); min-height: 360px; }
  .hm-stage-copy { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .home-page .hm-stage-lead p { font-size: var(--text-md); line-height: 1.5; }
  .hm-stage-years { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-xl); }
  .hm-stage-years > div, .hm-stage-years > div:last-child { padding: var(--space-lg) var(--space-lg) 0 0; }
  .hm-stage-years > div::before { top: calc((var(--rule-strong) - var(--space-sm)) / 2); }
  .hm-stage-years > div::after, .hm-stage-years > div:last-child::after { display: block; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: var(--rule-strong); transform-origin: left; }
  .hm-futures { padding-block: var(--space-3xl); }
  .hm-futures-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-4xl); }
  .hm-future-notes strong { font-size: 1.75rem; }
  .hm-school { padding-block: var(--space-3xl); }
  .hm-school-story { gap: var(--space-2xl); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hm-delivery { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2xl); padding: var(--space-xl); }
  .home-page .hm-footer { padding-block: var(--space-3xl) var(--space-lg); }
  .hm-footer-invite { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding-bottom: var(--space-3xl); }
  .hm-footer-links { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-link .icon, .hm-nav-action .icon, .hm-button, .hm-nav-action { transition: none; }
  .hm-link:hover .icon, .hm-link:focus-visible .icon, .hm-nav-action:hover .icon, .hm-project:hover .hm-link .icon, .hm-button:active { transform: none; }
  .home-page button:active:not(:disabled) { transform: none; }
  .home-page .hm-explorer .stage-tabs::before { transition: none; }
  .hm-teaching-steps li::before, .hm-teaching-step-number { transition: none; }
  .hm-teaching-steps.is-level li::before, .hm-teaching-steps.is-level .hm-teaching-step-number { transform: none !important; }
}
@keyframes hm-line-down { from { transform: scaleY(0); } }
@keyframes hm-line-across { from { transform: scaleX(0); } }
@keyframes hm-dot-land { from { transform: scale(0); } }
@keyframes hm-year-in { from { opacity: 0; } }
@keyframes hm-bar-grow { from { transform: scaleX(0); } }
@keyframes hm-tile-nudge { 40% { transform: scale(1.12); } }
@keyframes hm-row-step { from { opacity: .3; transform: translateX(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  /* On a change of level the year line draws and each year lands in turn. */
  .hm-stage.is-drawing .hm-stage-years > div::after { animation: hm-line-down 140ms linear backwards; animation-delay: calc(var(--hm-year) * 140ms); }
  .hm-stage.is-drawing .hm-stage-years > div::before { animation: hm-dot-land 260ms var(--ease-out) backwards; animation-delay: calc(var(--hm-year) * 140ms); }
  .hm-stage.is-drawing .hm-stage-years dt, .hm-stage.is-drawing .hm-stage-years dd { animation: hm-year-in 300ms var(--ease-out) backwards; animation-delay: calc(var(--hm-year) * 140ms + 60ms); }
  /* Pointing at a featured demo plays a short hint of what it does. */
  .home-page .hm-project:hover .cp-bars i, .home-page .hm-project:focus-within .cp-bars i { transform-origin: left center; animation: hm-bar-grow 600ms var(--ease-out) backwards; }
  .home-page .hm-project:hover .cp-bars > div:nth-child(2) i, .home-page .hm-project:focus-within .cp-bars > div:nth-child(2) i { animation-delay: 80ms; }
  .home-page .hm-project:hover .cp-wrong, .home-page .hm-project:focus-within .cp-wrong { animation: hm-tile-nudge 500ms var(--ease-out); }
  .home-page .hm-project:hover .cp-helper-flow > span, .home-page .hm-project:focus-within .cp-helper-flow > span { animation: hm-row-step 400ms var(--ease-out) backwards; }
  .home-page .hm-project:hover .cp-helper-flow > span:nth-child(2), .home-page .hm-project:focus-within .cp-helper-flow > span:nth-child(2) { animation-delay: 120ms; }
  .home-page .hm-project:hover .cp-helper-flow > span:nth-child(3), .home-page .hm-project:focus-within .cp-helper-flow > span:nth-child(3) { animation-delay: 240ms; }
}
@media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
  .hm-stage.is-drawing .hm-stage-years > div::after { animation-name: hm-line-across; }
}

/* Curriculum previews shared by Home and Creations; equal activity surfaces. */
.cp-art { min-height:336px; height:100%; padding:var(--space-lg); border-radius:var(--radius-card); display:flex; flex-direction:column; justify-content:center; gap:var(--space-lg); }
.cp-spark { background:var(--color-orange-soft); color:var(--color-ink); }
.cp-builder { background:var(--color-blue-soft); color:var(--color-blue-dark); }
.cp-ninja { background:var(--color-purple-soft); color:var(--color-purple); }
.cp-kicker { font-size:var(--text-sm); font-weight:700; }
.cp-art > strong { font:700 var(--text-lg)/1.3 var(--font-display); letter-spacing:-.025em; }
.cp-route { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); font-size:var(--text-xl); }
.cp-milo, .cp-house { width:48px; height:48px; display:grid; place-items:center; background:var(--color-orange); border-radius:var(--radius-sm); font:700 var(--text-lg)/1 var(--font-display); }
.cp-instructions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-xs); font-size:var(--text-sm); font-weight:800; }
.cp-instructions > span { padding:var(--space-sm) var(--space-2xs); background:var(--color-surface); border-radius:var(--radius-sm); text-align:center; white-space:nowrap; }
.cp-instructions .cp-wrong { background:var(--color-orange); }
.cp-bars { display:grid; gap:var(--space-md); }
.cp-bars > div { display:grid; grid-template-columns:56px minmax(0,1fr) 1ch; gap:var(--space-sm); align-items:center; font-size:var(--text-sm); }
.cp-bars i { height:18px; width:var(--bar); background:var(--color-accent); border-radius:var(--radius-sm); }
.cp-helper-flow { display:grid; gap:var(--space-sm); font-size:var(--text-sm); }
.cp-helper-flow > span { display:flex; gap:var(--space-sm); align-items:center; padding:var(--space-sm); background:var(--color-surface); border-radius:var(--radius-sm); }
.cp-helper-flow .icon { width:18px; height:18px; flex-shrink:0; }
.cp-helper-flow .cp-approval { border:var(--rule-hair) solid var(--color-purple); }
@media(min-width:60rem) { .cp-art { padding:var(--space-xl) var(--space-lg); } }
.cp-privacy-art { display:flex; align-items:center; justify-content:center; gap:var(--space-lg); background:var(--color-surface); border-radius:var(--radius-sm); padding:var(--space-lg); font-size:3rem; color:var(--color-purple); }
.cp-privacy-art > span { font:700 var(--text-base)/1.4 var(--font-body); color:var(--color-ink); }
.cp-pattern { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); font-size:var(--text-lg); color:var(--color-accent); }
.cp-pattern > span { white-space:nowrap; }
.cp-pattern b { color:var(--color-purple); }
.cp-pattern i { color:var(--color-green); font-size:var(--text-xl); font-style:normal; }
.cp-welcome { display:grid; gap:var(--space-md); text-align:center; }
.cp-welcome > b { font:700 var(--text-md)/1.3 var(--font-display); }
.cp-welcome > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xs); }
.cp-welcome span { padding:var(--space-sm) var(--space-xs); border:var(--rule-hair) solid var(--color-accent); border-radius:var(--radius-sm); font-size:var(--text-sm); }
.cp-record-links { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-xs); font-weight:800; font-size:var(--text-md); text-align:center; }
.cp-record-links > span { padding:var(--space-sm) var(--space-xs); background:var(--color-surface); border-radius:var(--radius-sm); }
.cp-record-links small { display:block; margin-bottom:var(--space-xs); font:400 var(--text-sm)/1.4 var(--font-body); }
.cp-monitor > b { font:700 2.75rem/1.1 var(--font-display); }
.cp-monitor > span { display:block; font-size:var(--text-sm); }
.cp-monitor > div { display:flex; justify-content:space-between; gap:var(--space-sm); margin-top:var(--space-md); padding-top:var(--space-sm); border-top:var(--rule-hair) solid var(--color-purple); font-size:var(--text-sm); }
.cp-monitor strong { display:block; margin-top:var(--space-xs); font-size:var(--text-md); }
.cp-sorter { display:flex; justify-content:center; align-items:center; gap:var(--space-lg); font-size:3.5rem; line-height:1.5; color:var(--color-accent); }
.cp-sorter span:nth-child(2) { color:var(--color-purple); }
.cp-sorter b { font:700 2rem/1 var(--font-display); color:var(--color-ink); }
.cp-kite { text-align:center; }
.cp-kite > span { display:block; font-size:4rem; line-height:1; color:var(--color-purple); }
.cp-kite > div { display:flex; justify-content:space-around; margin-top:var(--space-lg); font-size:var(--text-sm); }
.cp-data-fix { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); padding:var(--space-lg) var(--space-md); background:var(--color-surface); border-radius:var(--radius-sm); font-size:var(--text-md); }
.cp-orbits { display:block; width:100%; height:120px; }
.cp-orbits ellipse { fill:none; stroke:var(--color-purple); stroke-width:1.5; }
.cp-orbit-sun { fill:var(--color-orange); }
.cp-orbit-planet { fill:var(--color-accent); stroke:var(--color-surface); stroke-width:2; }
.cp-version-labels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); font-size:var(--text-base); font-weight:800; }
.cp-version-labels > span { padding:var(--space-md) var(--space-xs); text-align:center; border:var(--rule-hair) solid var(--color-purple); border-radius:var(--radius-sm); }
.cp-version-labels small { display:block; font-size:var(--text-sm); margin-bottom:var(--space-sm); }