/* A page from the Primer. Homepage only. docs/design/site-primer.md. */
@font-face { font-family: "IBM Plex Sans"; src: url("/primer/fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: optional; }
@font-face { font-family: "Primer Reading"; src: url("/primer/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: optional; }
.building-page {
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Primer Reading", Georgia, serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-y: var(--space-9); --gutter: var(--space-7); --content: 1248px;
  --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --shade: 39 49 37;
  --shadow-1: 0 2px 4px rgb(var(--shade) / 0.03), 0 16px 32px -24px rgb(var(--shade) / 0.24);
  --shadow-2: 0 4px 8px rgb(var(--shade) / 0.04), 0 24px 48px -24px rgb(var(--shade) / 0.24);
  --shadow-3: 0 32px 96px -24px rgb(var(--shade) / 0.36);
  --hairline: #d7d7c8; --ink: #203d34; --ink-soft: #58645a; --oxblood: #355748; --focus: #2c6450;
  --tone-cream: #f8f5ec; --tone-warm: var(--tone-cream); --tone-sage: var(--tone-cream); --tone-paper: var(--tone-cream); --tone-footer: var(--tone-cream);
  --plate: #bcc6b6; --plate-paper: var(--tone-cream); --plate-ink: var(--ink-soft);
  --paper: var(--tone-cream); background: var(--tone-cream); color: var(--ink); font: 400 18px/1.6 var(--sans);
}
html:has(body.building-page) { background: #f8f5ec; scroll-behavior: smooth; }
html.past-middle:has(body.building-page) { background: #f8f5ec; }
.building-page :is(h1,h2,h3) { text-wrap: balance; }
.building-page :is(p,li,figcaption,summary) { text-wrap: pretty; }
.building-page :is(.build-wrap,.mast.marketing-mast) { max-width: calc(var(--content) + 2 * var(--gutter)); padding-inline: var(--gutter); }
.building-page .membership .build-wrap { padding-inline: var(--gutter); }
.building-page :is(#tutoring,#how-it-works,#plans,#start,#subjectTopics) { scroll-margin-top: var(--space-6); }
.building-page .mast.marketing-mast { min-height: 112px; background: transparent; }
.building-page .brand b { font-family: var(--serif); }
.building-page .marketing-nav { gap: var(--space-6); font-size: 14px; }
.building-page .build-eyebrow { margin: 0 0 var(--space-5); font: 500 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); }
.building-page :is(.tutoring-heading,.plans-head,.build-faq .section-heading) { display: block; max-width: none; margin: 0 0 var(--space-7); padding: 0; text-align: left; }
.building-page :is(.tutoring-heading,.plans-head,.build-faq .section-heading,.home-form-head) h2 { margin: 0; font: 450 clamp(34px,3.7vw,52px)/1.1 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.building-page .tutoring-line { margin: var(--space-4) 0 0; font: 18px/1.6 var(--sans); color: var(--ink-soft); }
/* The opening spread: one sentence, two real lesson plates in the margin. */
.building-page .build-opening.founder-note { margin: 0; padding: 0; background: var(--tone-cream); }
.building-page .opening-copy { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; justify-items: stretch; gap: var(--space-8); padding-block: var(--space-7) var(--space-9); }
.building-page .opening-story { max-width: 720px; position: relative; }
.building-page .opening-story h1 { max-width: none; margin: 0 0 var(--space-5); font: 450 clamp(42px,4.7vw,72px)/1.08 var(--serif); font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1; letter-spacing: -.045em; color: var(--ink); }
.building-page .opening-story h1 span { display: block; white-space: nowrap; }
.building-page .opening-story > p:not(.build-eyebrow) { margin: 0 0 var(--space-5); max-width: 43ch; font: 400 19px/1.6 var(--sans); color: var(--ink-soft); }
.building-page .opening-grades { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; align-items: center; margin: 0 0 var(--space-5); }
.building-page .opening-grades b { margin: 0; padding: 0; background: none; font: 500 14px/1.5 var(--sans); }
.building-page .opening-grades span { font: 400 14px/1.5 var(--sans); }
.building-page .opening-grades span::before { content: "·"; margin-right: var(--space-3); }
.building-page .opening-actions { margin: 0 0 var(--space-7); gap: var(--space-5); }
.building-page .opening-person { align-items: center; gap: var(--space-4); font: 14px/1.6 var(--sans); }
.building-page .founder-portrait { width: 48px; height: 60px; border-radius: 24px 24px 4px 4px; object-fit: contain; box-shadow: none; }
.building-page .opening-person a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -4px; border: 0; font-weight: 400; }
.building-page .opening-memory.opening-lessons { position: relative; max-width: none; width: 100%; margin: 0; padding-top: var(--space-5); }
.building-page .lesson-videos { display: grid; grid-template-columns: 1fr; gap: var(--space-6); position: relative; }
.building-page .lesson-plate { width: calc(100% - var(--space-7)); margin: 0; }
.building-page .lesson-plate:nth-child(2) { margin-left: var(--space-7); }
.building-page .lesson-pop { position: relative; display: block; width: 100%; aspect-ratio: 3/2; padding: var(--space-2); border: 1px solid var(--plate); border-radius: var(--radius-s); background: var(--plate-paper); box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate; }
.building-page .lesson-pop img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--plate-paper); border-radius: 3px; }
.building-page .lesson-pop::after { content: none; }
.building-page .lesson-play { position: absolute; inset: auto var(--space-4) var(--space-4) auto; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 0 0 2px; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%; background: #fffdf2; color: var(--ink); box-shadow: var(--shadow-1); z-index: 1; }
.building-page .lesson-length { position: absolute; bottom: var(--space-4); left: var(--space-4); z-index: 1; background: #203d34; color: #fff; border-radius: 4px; padding: var(--space-1) var(--space-2); font: 500 12px/1.4 var(--sans); }
.building-page .opening-lessons .lesson-plate figcaption { display: flex; gap: var(--space-3); align-items: baseline; margin: var(--space-3) 0 0; text-align: left; font: 14px/1.45 var(--sans); color: var(--ink-soft); }
.building-page .lesson-plate figcaption strong { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.building-page .plate-number { font: italic 400 17px/1 var(--serif); color: var(--plate-ink); }
.building-page .opening-lessons > figcaption { margin: var(--space-5) 0 0; padding-inline-end: calc(var(--space-8) + var(--space-4)); text-align: right; font: italic 400 15px/1.5 var(--serif); color: var(--ink-soft); }
.building-page .primer-flourish { position: absolute; width: 96px; height: 96px; top: -56px; right: var(--space-4); color: var(--ink-soft); pointer-events: none; }
/* Playable pages. Pictures carry the frame; the words have open space. */
.building-page .tutoring { padding-block: var(--section-y); background: var(--tone-warm); }
.building-page .tutoring-grid { display: block; margin: 0; }
.building-page .math-boxes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-5); }
.building-page .world-box { padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; box-shadow: none; }
.building-page .world-box-picture { position: relative; display: block; padding: var(--space-2); background: var(--plate-paper); border: 1px solid var(--plate); border-radius: var(--radius-s); aspect-ratio: 3/2; overflow: hidden; }
.building-page .world-box-picture img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.building-page .world-box-subject { margin: var(--space-5) 0 var(--space-2); color: var(--plate-ink); font: 500 11px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.building-page .world-box-title { margin: 0; font: 500 clamp(16px,1.6vw,23px)/1.25 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.building-page .world-box-actions { position: absolute; inset: auto var(--space-3) var(--space-3) auto; display: block; padding: 0; }
.building-page .world-box-play { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--plate); border-radius: 999px; background: var(--tone-cream); color: var(--ink); box-shadow: var(--shadow-1); font: 500 14px/1.4 var(--sans); }
.building-page .world-box .topic-entry { min-height: 44px; font: 400 12px/1.5 var(--sans); gap: var(--space-1); }
.building-page .tutoring-note { margin: var(--space-6) 0 0; text-align: center; font: 15px/1.6 var(--sans); color: var(--ink-soft); }
.building-page .learning-loop { margin-top: var(--space-9); }
.building-page .learning-loop-intro { max-width: none; }
.building-page .learning-loop-intro h3, .building-page .learning-keep h3 { margin: 0; max-width: 30ch; font: 450 clamp(30px,3.3vw,46px)/1.12 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.building-page .learning-keep { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; margin-top: var(--space-9); }
.building-page .learning-keep .keep-copy h3 { max-width: 13ch; }
.building-page .learning-keep .world-book { margin-top: 0; max-width: none; }
@media (max-width: 1100px) { .building-page .learning-keep { grid-template-columns: 1fr; gap: var(--space-6); } .building-page .learning-keep .keep-copy h3 { max-width: 30ch; } .building-page .learning-keep .world-book { max-width: 760px; } }
/* One sentence on one line (the founder, 2026-10-24): no measure cap on this paragraph; a phone still wraps it. */
.building-page .learning-loop-intro > p:last-child { margin: var(--space-4) 0 0; max-width: none; color: var(--ink-soft); font: 17px/1.6 var(--sans); }
.building-page .learning-trail { display: flex; justify-content: space-between; gap: var(--space-5); margin: var(--space-7) 0; padding: 0; list-style: none; }
.building-page .learning-trail li { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); font: 500 16px/1.4 var(--sans); }
.building-page .learning-trail li span { color: var(--ink-soft); font: italic 400 25px/1 var(--serif); }
.building-page .learning-trail li:not(:last-child)::after { content: "→"; margin-left: var(--space-6); color: #84927e; }
.building-page .tutoring .subject-topics[data-inline] { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; min-width: 0; }
.building-page .subject-topics[data-inline] .topic-heading h3 { font-size: 27px; }
.building-page .subject-topics[data-inline] .topic-heading p:not(.build-eyebrow) { max-width: none; font: 17px/1.6 var(--sans); }
.building-page .subject-topics[data-inline] .topic-stage { gap: 24px; }
.building-page .subject-topics[data-inline] .topic-node { padding: 12px; font-size: 13px; background: var(--tone-paper); border-color: var(--plate); }
.building-page .subject-topics[data-inline] .topic-selected { background: #e8ebdf; }
.building-page .subject-topics[data-inline] .topic-selected h4 { font-size: 23px; }
.building-page .topic-grade-details { margin-top: var(--space-5); }
.building-page .topic-grade-details > summary { min-height: 44px; display: list-item; align-content: center; color: var(--ink-soft); cursor: pointer; font: 14px/1.5 var(--sans); }
.building-page .tutoring .world-book { position: relative; margin: var(--space-7) 0 0; max-width: 760px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.building-page .tutoring .subject-topics[data-inline] { margin-top: var(--space-6); }
.building-page .world-book::before { content: none; }
.building-page .world-book-label { margin: 0 0 var(--space-4); text-align: center; color: var(--oxblood); font: 500 11px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.building-page .tutoring .world-book img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.building-page .book-page-link { display: block; padding: var(--space-3); background: var(--tone-paper); border: 1px solid var(--hairline); border-radius: 2px 10px 10px 2px; box-shadow: 4px 5px 0 -1px #e4dfd1,8px 10px 0 -2px #d8d3c4,var(--shadow-1); }
.building-page .world-book figcaption { margin-top: var(--space-5); text-align: left; }
.building-page .world-book .world-book-line { display: block; margin: 0; text-align: left; font: 400 17px/1.6 var(--sans); color: var(--ink-soft); }
.building-page .world-book figcaption p { margin: var(--space-3) 0; font: 16px/1.6 var(--sans); color: var(--ink-soft); }
.building-page .world-book figcaption small { display: block; color: var(--ink-soft); font: 12px/1.5 var(--sans); }
/* An illustrated sequence in the margin of the Book. */
.building-page .journey { position: relative; margin: var(--space-8) auto 0; }
.building-page .journey-path { position: relative; height: 80px; margin-bottom: var(--space-5); container-type: inline-size; }
.building-page .journey-line { position: absolute; inset: auto 0 8px; height: 1px; background: repeating-linear-gradient(90deg,#b5baa7 0 3px,transparent 3px 12px); }
.building-page .journey-line::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p,1)); background: #9aa98f; }
.building-page .tutoring .journey-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); margin: 0; max-width: none; }
.building-page .tutoring .journey-steps li { padding: var(--space-4) 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.building-page .journey-steps li { --c: var(--ink-soft); --c-soft: #e8ebdf; }
.building-page .step-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.building-page .tutoring .step-number { display: block; margin: 0; min-width: 0; height: auto; background: none; color: var(--c); font: italic 400 44px/1 var(--serif); }
.building-page .step-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50% 45% 48% 40%; background: var(--c-soft); color: var(--c); }
.building-page .step-mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.building-page .tutoring .journey-steps h3 { min-height: 2.5em; margin: 0; font: 500 26px/1.25 var(--serif); letter-spacing: -.02em; }
.building-page .tutoring .journey-steps li > p { margin: var(--space-3) 0 0; max-width: 25ch; color: var(--ink-soft); font: 16px/1.6 var(--sans); }
/* Equal invitations. Commercial words remain generated by plans.js. */
/* The pricing continues the steps: no chapter head, no top padding, no card frames or rules (the founder, 2026-10-25). */
.building-page .membership { padding-block: 0 var(--section-y); background: var(--tone-sage); }
.building-page .membership .build-wrap.plans-head { grid-template-columns: none; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.building-page .membership h2 { max-width: none; }
.building-page .membership .plans-head { margin-bottom: var(--space-6); }
.building-page .price-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); }
.building-page .price-plan { --wi: var(--ink); position: relative; padding: var(--space-5) 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.building-page .price-plan h3 { margin: 0; font: 500 28px/1.2 var(--serif); letter-spacing: -.025em; }
.building-page .price-plan .plan-price { margin: var(--space-6) 0 0; display: flex; gap: var(--space-2); align-items: baseline; }
.building-page .plan-amount { font: 450 60px/1 var(--serif); letter-spacing: -.04em; }
.building-page .plan-per { color: var(--ink-soft); font: 14px/1.5 var(--sans); }
.building-page .plan-list { margin: var(--space-6) 0; padding-top: 0; border-top: 0; gap: var(--space-4); font: 16px/1.5 var(--sans); }
.building-page .plan-join { margin-top: auto; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--ink); border-radius: var(--radius-s); background: var(--ink); color: #fffdf7; font: 500 14px/1.5 var(--sans); }
/* A short letter. Extra context and optional choices stay available. */
.building-page .story-close { padding-block: var(--section-y); background: var(--tone-cream); }
.building-page .home-form { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: var(--space-5) var(--space-8); align-items: start; }
.building-page .home-form > :is(#buildInterest,.form-card,.thanks) { grid-column: 2; }
.building-page .story-close .home-form-head { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding: var(--space-6) 0 0; max-width: 380px; text-align: left; }
.building-page .story-close .home-form-head p { margin: var(--space-5) 0 0; color: var(--ink-soft); font: 17px/1.65 var(--sans); }
.building-page .home-form-head a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.building-page .form-card.f { position: relative; margin: 0; padding: var(--space-6); border: 1px solid #ded9cc; border-radius: 3px; background: var(--tone-paper); box-shadow: var(--shadow-1); }
.building-page .form-card.f::before { content: ""; display: block; width: 64px; height: 8px; margin: 0 0 var(--space-6); background: repeating-linear-gradient(135deg,#a3b19b 0 8px,transparent 8px 16px); }
.building-page .f .grid { gap: var(--space-5) var(--space-4); }
.building-page .f .form-details { margin-top: var(--space-5); border: 0; background: transparent; }
.building-page .f .form-details > summary { padding: var(--space-3) 0; min-height: 44px; cursor: pointer; color: var(--ink-soft); font: 400 14px/1.5 var(--sans); }
.building-page .f .form-details[open] > summary { margin-bottom: var(--space-4); }
.building-page .f .form-details .check { margin-top: var(--space-4); }
.building-page .f label { margin-bottom: var(--space-2); color: var(--ink); font: 500 14px/1.5 var(--sans); }
.building-page .f :is(input:not([type="checkbox"]),select,textarea) { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid #c7cabb; border-radius: 4px; background: #fffefa; color: var(--ink); font: 400 16px/1.5 var(--sans); }
.building-page .f textarea { min-height: 128px; }
.building-page .f .consent { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid #dfdfd1; font: 14px/1.6 var(--sans); }
.building-page .f .check { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: var(--space-3); min-height: 44px; }
.building-page .f input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; flex: 0 0 22px; }
.building-page .send-row { margin-top: var(--space-6); }
.building-page .send-row .btn { min-height: 48px; border-radius: var(--radius-s); padding: var(--space-3) var(--space-5); }
.building-page .thanks { grid-column: 2; }
.building-page .build-faq { padding-block: var(--section-y); background: var(--tone-warm); }
.building-page .faq-list { gap: 0 var(--space-7); }
/* No hairline under a question (the founder, 2026-10-24): the air between rows is the separator. */
.building-page .build-faq details { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.building-page .build-faq summary { min-height: 80px; padding: var(--space-5) 0; font: 500 17px/1.45 var(--sans); border-radius: 0; }
.building-page .build-faq details p { padding: 0 var(--space-6) var(--space-5) 0; margin: 0; color: var(--ink-soft); font: 16px/1.6 var(--sans); }
.building-page footer { padding-block: var(--space-7); background: var(--tone-cream); border-top: 1px solid var(--hairline); }
.building-page footer .build-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.building-page footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font: 14px/1.5 var(--sans); }
.building-page footer .build-wrap a:focus-visible { outline-color: var(--focus); }
.building-page footer a:first-child { font-family: var(--serif); font-size: 22px; }
.building-page dialog.mission-dialog { border: 1px solid #ddd9cb; border-radius: var(--radius-m); box-shadow: var(--shadow-3); background: var(--tone-paper); }
.building-page dialog.mission-dialog::backdrop { background: rgb(23 40 31 / .6); backdrop-filter: blur(6px); }
.building-page .lesson-dialog { width: min-content; min-width: min(320px,calc(100vw - 32px)); max-width: min(1000px,calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow: hidden; }
.building-page #lessonVideoSlot { display: block; flex: 0 0 auto; padding: 0; background: var(--tone-paper); }
.building-page #lessonVideoSlot :is(video,img) { display: block; max-height: calc(100dvh - 152px); max-width: min(998px,calc(100vw - 34px)); width: auto; height: auto; object-fit: contain; }
.building-page .icon-button { width: 44px; height: 44px; min-width: 44px; }
.building-page .home-dragon { position: absolute; display: block; pointer-events: none; }
.building-page .home-dragon .dragon-body { position: relative; display: block; width: 100%; height: 100%; }
.building-page .home-dragon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.building-page .home-dragon .dragon-blink { opacity: 0; }
.building-page .dragon-egg { right: -8px; bottom: -40px; width: 64px; height: 64px; z-index: 2; }
.building-page .dragon-walk { left: 0; bottom: 4px; width: 76px; height: 76px; transform: translate3d(calc(100cqw - 100%),0,0); }
.building-page .dragon-walk .dragon-body { transform: scaleX(-1); }
.building-page .dragon-cheer { position: relative; width: 92px; height: 92px; margin: 0 0 var(--space-5); }
@media (max-width:1100px) {
  .building-page .opening-copy { gap: var(--space-6); }
  .building-page .opening-story h1 { font-size: clamp(42px,4.7vw,60px); }
  .building-page .lesson-plate { width: 100%; }
  .building-page .lesson-plate:nth-child(2) { margin-left: 0; }
  .building-page .math-boxes { gap: var(--space-4); }
  .building-page .world-box-title { font-size: clamp(15px,1.65vw,19px); }
  .building-page .price-plans { gap: var(--space-6); }
  .building-page .price-plan { padding: var(--space-5) 0 0; }
  .building-page .home-form { grid-template-columns: 1fr; gap: var(--space-7); max-width: 880px; }
  .building-page .story-close .home-form-head { max-width: 580px; padding-top: 0; }
  .building-page .home-form > :is(.home-form-head,#buildInterest,.form-card,.thanks) { grid-column: 1; grid-row: auto; }
}
@media (max-width:900px) {
  .building-page .opening-copy { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-6); }
  .building-page .opening-story { max-width: 700px; }
  .building-page .opening-story h1 { max-width: none; font-size: clamp(40px,7vw,64px); }
  .building-page .opening-story > p:not(.build-eyebrow) { max-width: 40ch; }
  .building-page .lesson-videos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
  .building-page .opening-memory.opening-lessons { padding: 0; }
  .building-page .primer-flourish { top: -72px; }
  .building-page .math-boxes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-7) var(--space-5); }
  .building-page .world-box-title { font-size: 24px; }
  .building-page .price-plans { grid-template-columns: 1fr; max-width: 640px; margin-inline: 0; }
  .building-page .membership .build-wrap.plans-head { max-width: calc(640px + 2 * var(--gutter)); margin-inline: 0; }
  .building-page .price-plan { padding: var(--space-6) 0 0; }
  .building-page .tutoring .journey-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-7); }
}
@media (max-width:600px) {
  .building-page { --gutter: var(--space-5); --section-y: var(--space-8); }
  .building-page .mast.marketing-mast { min-height: 80px; }
  .building-page .marketing-nav { gap: var(--space-4); }
  .building-page .marketing-nav .how-link { display: none; }
  .building-page .opening-copy { gap: var(--space-7); padding-block: var(--space-6) var(--space-8); }
  .building-page .opening-story h1 { font-size: clamp(28px,8.8vw,46px); line-height: 1.1; margin-bottom: var(--space-5); }
  .building-page .opening-story > p:not(.build-eyebrow) { font-size: 17px; max-width: 37ch; }
  .building-page .opening-grades { gap: var(--space-1) var(--space-2); }
  .building-page .opening-grades :is(b,span) { font-size: 12px; }
  .building-page .opening-grades span::before { margin-right: var(--space-2); }
  .building-page .opening-actions { margin-bottom: var(--space-6); }
  .building-page .lesson-videos { gap: var(--space-4); }
  .building-page .lesson-pop { padding: var(--space-1); }
  .building-page .lesson-play { width: 40px; height: 40px; bottom: var(--space-2); right: var(--space-2); }
  .building-page .lesson-length { bottom: var(--space-2); left: var(--space-2); font-size: 10px; }
  .building-page .opening-lessons .lesson-plate figcaption { font-size: 13px; gap: var(--space-2); }
  .building-page .opening-lessons > figcaption { text-align: center; font-size: 14px; }
  .building-page .primer-flourish { width: 64px; height: 64px; top: -64px; right: 0; }
  .building-page .tutoring-line { font-size: 16px; }
  .building-page :is(.tutoring-heading,.plans-head,.build-faq .section-heading) { margin-bottom: var(--space-6); }
  .building-page .math-boxes { gap: var(--space-6) var(--space-4); }
  .building-page .world-box-picture { padding: var(--space-1); }
  .building-page .world-box-subject { margin-top: var(--space-4); font-size: 10px; }
  .building-page .world-box-title { font-size: clamp(14px,3.9vw,22px); }
  .building-page .world-box-play { font-size: 12px; padding: var(--space-2) var(--space-3); }
  .building-page .world-box-actions { right: var(--space-2); bottom: var(--space-2); }
  .building-page .plate-number { display: none; }
  .building-page .world-box .topic-entry { font-size: 11px; }
  .building-page .learning-loop { margin-top: var(--space-8); }
  .building-page .learning-trail { gap: var(--space-3); }
  .building-page .learning-trail li { flex: 1; display: block; font-size: 12px; }
  .building-page .learning-trail li span { display: block; margin-bottom: var(--space-2); }
  .building-page .learning-trail li:not(:last-child)::after { content: none; }
  .building-page .world-book::before { left: 8px; }
  .building-page .world-book-label { font-size: 10px; }
  .building-page .tutoring .journey-steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .building-page .tutoring .journey-steps li { display: grid; grid-template-columns: 80px minmax(0,1fr); column-gap: var(--space-5); padding-top: 0; }
  .building-page .step-head { grid-row: span 2; flex-direction: column; gap: var(--space-3); margin: 0; }
  .building-page .tutoring .step-number { font-size: 36px; }
  .building-page .step-mark { width: 48px; height: 48px; }
  .building-page .tutoring .journey-steps h3 { min-height: 0; font-size: 25px; align-self: end; }
  .building-page .price-plan { padding: var(--space-6) 0 0; }
  .building-page .form-card.f { padding: var(--space-5); }
  .building-page .f .grid { grid-template-columns: 1fr; }
  .building-page .build-faq summary { min-height: 72px; padding-block: var(--space-5); font-size: 16px; }
  .building-page .faq-list { grid-template-columns: 1fr; }
  .building-page .dragon-cheer { width: 76px; height: 76px; }
}
@media (max-width:360px) {
  .building-page { --gutter: var(--space-4); }
  .building-page .marketing-mast .brand b { font-size: 19px; }
  .building-page .marketing-nav { gap: var(--space-3); font-size: 11px; }
  .building-page .world-box-play > span[aria-hidden] { display: none; }
  .building-page .world-box .topic-entry { letter-spacing: -.035em; }
}
@media (prefers-reduced-motion:reduce) { html:has(body.building-page) { scroll-behavior: auto; } }
/* The idea map (the founder, 2026-10-24): the topics as dots on a night plate, in grade columns, pressed to explain.
   Colours by topic area match the swatches on the area buttons; the card under the plate carries the words. */
.building-page .topic-picture { margin: var(--space-5) 0 0; }
.building-page .map-sky { margin: 0; padding: 0; }
.building-page .map-sky-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 18% 0%, #1d3d35 0%, #0f211c 55%, #0a1714 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), var(--shadow-1); scrollbar-width: thin; }
.building-page .map-sky-svg { display: block; width: 100%; min-width: 720px; max-width: none; height: auto; }
.building-page .map-sky-head { fill: #9fbdb0; font: 500 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.building-page .map-sky-link { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: 1; transition: stroke-opacity .24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .map-sky-link.is-lit { stroke: #ffe3a3; stroke-opacity: .9; stroke-width: 1.6; }
.building-page .map-sky.has-active .map-sky-link:not(.is-lit) { stroke-opacity: .07; }
.building-page .map-sky-dot { cursor: pointer; outline: none; --dot: #cdd6f4; }
.building-page .map-sky-dot.is-number-sense { --dot: #8fd3ff; }
.building-page .map-sky-dot.is-fractions { --dot: #ffb3c7; }
.building-page .map-sky-dot.is-geometry { --dot: #a6e3a1; }
.building-page .map-sky-dot.is-algebra { --dot: #f9e2af; }
.building-page .map-sky-dot.is-patterns { --dot: #cba6f7; }
.building-page .map-sky-dot.is-statistics { --dot: #f5a97f; }
.building-page .map-sky-dot.is-number-theory { --dot: #94e2d5; }
.building-page .map-sky-hit { fill: transparent; }
.building-page .map-sky-core { fill: var(--dot); transform-box: fill-box; transform-origin: center; transition: transform .16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .map-sky-halo { fill: var(--dot); opacity: 0; transition: opacity .16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .map-sky-dot:hover .map-sky-core, .building-page .map-sky-dot:focus-visible .map-sky-core { transform: scale(1.5); }
.building-page .map-sky-dot:focus, .building-page .map-sky-dot:focus-visible { outline: none !important; box-shadow: none; }
.building-page .map-sky-dot:focus-visible .map-sky-halo { opacity: .6; stroke: #fff8e8; stroke-width: 1.5; }
.building-page .map-sky-dot.is-near .map-sky-core { transform: scale(1.3); }
.building-page .map-sky-dot.is-active .map-sky-core { transform: scale(1.8); }
.building-page .map-sky-dot.is-active .map-sky-halo { opacity: .45; }
.building-page .map-sky.has-active .map-sky-dot:not(.is-active):not(.is-near) .map-sky-core { opacity: .5; }
.building-page .map-sky-label { fill: #fff8e8; font: 500 11px/1 var(--sans); opacity: 0; pointer-events: none; paint-order: stroke; stroke: #0a1714; stroke-width: 3px; stroke-linejoin: round; transition: opacity .16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .map-sky-label:is(.is-on,.is-hover) { opacity: 1; }
.building-page .subject-topics[data-inline] .topic-status { margin: var(--space-4) 0 0; max-width: 76ch; color: var(--ink); font: 15px/1.6 var(--sans); }
.building-page .subject-topics[data-inline] .topic-status strong { font: 500 19px/1.3 var(--serif); color: var(--ink); }
.building-page .subject-topics[data-inline] .topic-status-idea { display: block; margin-top: 2px; color: var(--ink-soft); }
.building-page .subject-topics[data-inline] .topic-groups { margin-top: var(--space-5); }
.building-page .map-sky-dot.is-active .map-sky-halo { animation: sky-pulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sky-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.4); } }
.building-page .map-sky figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; color: var(--ink-soft); font: 13px/1.5 var(--sans); }
.building-page .map-sky-words { flex: 1 1 100%; margin-top: var(--space-2); color: var(--ink); font: 400 clamp(18px,1.6vw,22px)/1.55 var(--sans); }
.building-page .map-sky-slide { display: none; }
.building-page .topic-group { display: inline-flex; align-items: center; }
.building-page .topic-swatch { order: -1; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--dot, #b9c4b4); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.building-page .topic-swatch[data-key=number-sense] { --dot: #8fd3ff; }
.building-page .topic-swatch[data-key=fractions] { --dot: #ffb3c7; }
.building-page .topic-swatch[data-key=geometry] { --dot: #a6e3a1; }
.building-page .topic-swatch[data-key=algebra] { --dot: #f9e2af; }
.building-page .topic-swatch[data-key=patterns] { --dot: #cba6f7; }
.building-page .topic-swatch[data-key=statistics] { --dot: #f5a97f; }
.building-page .topic-swatch[data-key=number-theory] { --dot: #94e2d5; }
.building-page .topic-node-key { display: block; margin: var(--space-4) 0 2px; font: 600 11px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.building-page .topic-node-idea, .building-page .topic-node-mixup { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--ink); overflow-wrap: break-word; }
.building-page .topic-node-mixup > span:last-child { color: var(--oxblood); }
.building-page .topic-steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.building-page .topic-step { min-height: 44px; padding: 6px 12px; border: 1px solid #c8d6c7; border-radius: 999px; background: #fffdf7; color: var(--ink); font: 500 13px/1.4 var(--sans); text-align: left; cursor: pointer; transition: background-color .16s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .topic-step:hover { border-color: #71896b; background: #f1f5eb; }
@media (max-width: 760px) { .building-page .map-sky-slide { display: inline; } }
@media (prefers-reduced-motion: reduce) { .building-page :is(.map-sky-core, .map-sky-halo, .map-sky-link, .map-sky-label, .topic-step) { transition: none; } .building-page .map-sky-dot.is-active .map-sky-halo { animation: none; } }
/* The book (the founder, 2026-10-25): a framed cover with his illustration and a contents line, then every section a
   chapter page with a running head, a numeral and a drop cap; a dark plate for chapter seven; a colophon at the end.
   No rules between things: air and ornament separate them. docs/design/site-primer.md. */
.building-page { --gold: #b7975e; --gold-soft: #e9d3a1; }
.building-page .build-opening.founder-note .build-wrap { padding-block: var(--space-4); }
.building-page .book-cover { position: relative; margin: 0; padding: var(--space-8) var(--space-8) var(--space-7); border-radius: 6px; background: #faf7ee; box-shadow: inset 0 0 0 10px var(--ink), inset 0 0 0 13px #faf7ee, inset 0 0 0 14px var(--gold), var(--shadow-2); }
.building-page .cover-corner { position: absolute; width: 72px; height: 72px; color: var(--gold); pointer-events: none; }
.building-page .cover-corner-tl { top: 24px; left: 24px; }
.building-page .cover-corner-tr { top: 24px; right: 24px; transform: rotate(90deg); }
.building-page .cover-corner-br { bottom: 24px; right: 24px; transform: rotate(180deg); }
.building-page .cover-corner-bl { bottom: 24px; left: 24px; transform: rotate(270deg); }
.building-page .book-cover .opening-copy { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-8); padding-block: var(--space-4) var(--space-5); }
.building-page .book-cover .opening-story h1 { font-size: clamp(27px, 5.1vw, 72px); margin-bottom: var(--space-5); }
@media (max-width: 1100px) { .building-page .book-cover .opening-story h1 { font-size: clamp(27px, 8.4vw, 72px); } }
.building-page .book-cover .opening-story h1 span:first-child::first-letter { margin-right: .04em; padding: .02em .1em 0 .06em; border: 1px solid var(--gold); border-radius: 5px; background: #fdfaf2; color: var(--oxblood); }
.building-page .book-cover .opening-story > p:not(.build-eyebrow):not(.opening-second) { max-width: 40ch; font-size: 20px; color: var(--ink); }
.building-page .opening-second { margin: calc(-1 * var(--space-5)) 0 var(--space-6); font: 500 16px/1.5 var(--sans); }
.building-page .opening-second a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--oxblood); text-decoration: none; }
.building-page .opening-second a:hover { color: var(--ink); }
.building-page .cover-art { margin: 0; align-self: center; }
.building-page .cover-art img { display: block; width: 100%; height: auto; }
.building-page .cover-contents { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin: var(--space-5) 0 0; padding: 0 var(--space-2); font: 500 14px/1.5 var(--sans); color: var(--ink-soft); }
.building-page .cover-contents .contents-word { margin-right: var(--space-2); font: italic 400 20px/1 var(--serif); color: var(--ink); }
.building-page .cover-contents a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ink-soft); text-decoration: none; }
.building-page .cover-contents a:hover { color: var(--ink); }
.building-page .cover-contents .num { font: italic 400 17px/1 var(--serif); color: var(--gold); }
.building-page .chapter-head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); font: 500 12px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oxblood); }
.building-page .chapter-num { font: italic 400 28px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--gold); }
.building-page .chapter-title { margin: 0 0 var(--space-5); max-width: 24ch; font: 450 clamp(34px, 3.7vw, 54px)/1.08 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.building-page .chapter-lede { max-width: 62ch; margin: 0 0 var(--space-4); font: 400 20px/1.6 var(--sans); color: var(--ink); }
.building-page .chapter-lede::first-letter { float: left; margin: .1em .14em 0 0; padding: .04em .18em .02em; border: 1px solid var(--gold); border-radius: 5px; background: #fdfaf2; font: 450 3.1em/.95 var(--serif); color: var(--oxblood); }
.building-page .chapter-note { max-width: 62ch; margin: 0 0 var(--space-7); font: 400 17px/1.6 var(--sans); color: var(--ink-soft); }
.building-page .chapter-one { padding-block: var(--space-7) var(--space-9); }
.building-page .chapter-one .opening-memory.opening-lessons { max-width: 820px; padding-top: var(--space-4); }
.building-page .students { padding-block: 0 var(--space-9); background: var(--tone-cream); }
.building-page .chapter-one { background: var(--tone-cream); }
.building-page .students-chapter { margin: 0; padding: var(--space-8); border-radius: var(--radius-m); background: var(--ink); color: #f6f1e7; box-shadow: var(--shadow-2); }
.building-page .students-chapter .chapter-num { color: var(--gold-soft); }
.building-page .students-chapter .chapter-title { max-width: 20ch; color: #fff8e8; }
.building-page .students-chapter .chapter-lede { color: #e4ebe5; }
.building-page .students-chapter .chapter-lede::first-letter { color: #fff8e8; background: rgb(255 255 255 / .06); border-color: var(--gold-soft); }
.building-page .students-chapter p { color: #cfe0d7; }
.building-page .students-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.building-page .students-grid > div > p:not(.chapter-lede):not(.students-links) { margin: 0; max-width: 48ch; font: 400 17px/1.65 var(--sans); }
.building-page .students-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-6) 0 0; }
.building-page .students-ask, .building-page .students-teach { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-5); border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; transition: background-color .16s cubic-bezier(0.2, 0.8, 0.2, 1), color .16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.building-page .students-ask { background: var(--gold-soft); color: var(--ink); }
.building-page .students-ask:hover { background: #fff8e8; color: var(--ink); }
.building-page .students-teach { border: 1px solid #cfe0d7; color: #f6f1e7; }
.building-page .students-teach:hover { background: rgb(255 255 255 / .08); color: #fff8e8; }
.building-page .students-room { margin: 0; padding: var(--space-6); border: 1px solid rgb(255 255 255 / .16); border-radius: 12px; background: rgb(255 255 255 / .04); }
.building-page .room-head { margin: 0 0 var(--space-4); font: 500 12px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #cfe0d7; }
.building-page .room-line { margin: 0 0 var(--space-4); font: 450 clamp(22px, 2vw, 28px)/1.3 var(--serif); color: #fff8e8; }
.building-page .students-room p:last-child { margin: 0; font: 400 16px/1.65 var(--sans); }
.building-page footer .build-wrap.colophon { flex-direction: column; justify-content: center; gap: var(--space-2); padding-block: var(--space-9) var(--space-8); text-align: center; }
.building-page .colophon-dragon { width: 96px; height: 96px; margin-bottom: var(--space-4); }
.building-page .colophon-line { margin: 0; font: 450 clamp(26px, 2.6vw, 38px)/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.building-page .colophon-last { max-width: 26ch; color: var(--oxblood); }
.building-page .colophon-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); font: 500 14px/1.5 var(--sans); }
.building-page .colophon-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1100px) {
  .building-page .book-cover .opening-copy { grid-template-columns: 1fr; gap: var(--space-6); }
  .building-page .cover-art { max-width: 560px; }
  .building-page .students-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .building-page .book-cover { padding: var(--space-6) var(--space-5) var(--space-5); box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 8px #faf7ee, inset 0 0 0 9px var(--gold), var(--shadow-2); }
  .building-page .cover-corner { width: 40px; height: 40px; }
  .building-page .cover-corner-tl, .building-page .cover-corner-tr { top: 14px; }
  .building-page .cover-corner-bl, .building-page .cover-corner-br { bottom: 14px; }
  .building-page .cover-corner-tl, .building-page .cover-corner-bl { left: 14px; }
  .building-page .cover-corner-tr, .building-page .cover-corner-br { right: 14px; }
  .building-page .students-chapter { padding: var(--space-6) var(--space-5); }
  .building-page .cover-contents { gap: 0 var(--space-4); font-size: 13px; }
}
@media (max-width: 480px) {
  .building-page .build-opening.founder-note .build-wrap { padding-inline: var(--space-4); }
  .building-page .book-cover { padding: var(--space-6) var(--space-4) var(--space-5); }
  .building-page .book-cover .opening-story h1 { letter-spacing: -.05em; }
}
@media (prefers-reduced-motion: reduce) { .building-page :is(.students-ask, .students-teach) { transition: none; } }

/* No rule above the colophon either (the founder, 2026-10-25). */
.building-page footer { border-top: 0; }