:root {
      --ink: #1f2933;
      --muted: #5b6570;
      --white: #ffffff;
      --green: #8AC926;
      --blue: #00BBF9;
      --magenta: #F15BB5;
      --orange: #FF7B00;
      --purple: #9B5DE5;
      --gold: #FFB800;
      --line: rgba(31, 41, 51, .13);
      --soft-line: rgba(31, 41, 51, .08);
      --content: 1120px;
      --reading: 720px;
      --radius: 18px;
      --radius-small: 11px;
      --shadow: 0 14px 40px rgba(31, 41, 51, .10);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 17px;
      line-height: 1.58;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: var(--blue);
      text-underline-offset: .18em;
      text-decoration-thickness: .08em;
    }

    button, a { -webkit-tap-highlight-color: transparent; }

    :focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 8px;
      z-index: 1000;
      padding: .7rem 1rem;
      color: var(--white);
      background: var(--ink);
      border-radius: 8px;
    }

    .skip-link:focus { left: 8px; }

    .wrap {
      width: min(calc(100% - 2rem), var(--content));
      margin-inline: auto;
    }

    /* =========================================================
       SHARED SITE HEADER / NAV
       Production version should be identical on all public pages.
       ========================================================= */

    .site-header {
      position: relative;
      z-index: 20;
      border-bottom: 1px solid var(--soft-line);
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(8px);
    }

    .header-inner {
      display: flex;
      min-height: 72px;
      gap: 1rem 2rem;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      color: var(--ink);
      text-decoration: none;
      font-size: 1.08rem;
      font-weight: 950;
      letter-spacing: -.025em;
    }

    .brand-mark {
      display: inline-grid;
      grid-template-columns: repeat(3, 10px);
      gap: 3px;
      margin-right: .65rem;
    }

    .brand-mark span {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }

    .brand-mark span:nth-child(1) { background: var(--green); }
    .brand-mark span:nth-child(2) { background: var(--blue); }
    .brand-mark span:nth-child(3) { background: var(--magenta); }
    .brand-mark span:nth-child(4) { background: var(--orange); }
    .brand-mark span:nth-child(5) { background: var(--purple); }
    .brand-mark span:nth-child(6) { background: var(--gold); }

    .nav {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem;
      align-items: center;
      justify-content: flex-end;
    }

    .nav a {
      padding: .56rem .72rem;
      color: var(--ink);
      text-decoration: none;
      font-size: .94rem;
      font-weight: 780;
      border-radius: 999px;
    }

    .nav a:hover,
    .nav a:focus-visible {
      background: rgba(138, 201, 38, .13);
    }

    .nav .nav-shop {
      color: var(--ink);
      background: var(--green);
      border: 2px solid var(--green);
      font-weight: 900;
    }

    .nav .nav-shop:hover { filter: brightness(.96); }

    /* =========================================================
       HERO
       ========================================================= */

    .hero {
      padding: clamp(2.4rem, 6vw, 5.5rem) 0 clamp(3rem, 7vw, 6.5rem);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
      gap: clamp(2.3rem, 6vw, 5.25rem);
      align-items: center;
    }

    .eyebrow {
      display: inline-block;
      margin: 0 0 .75rem;
      color: var(--ink);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 26px;
      height: 5px;
      margin-right: .5rem;
      vertical-align: .13em;
      background: var(--green);
      border-radius: 999px;
    }

    h1, h2, h3 {
      margin-top: 0;
      line-height: 1.04;
      letter-spacing: -.04em;
    }

    h1 {
      max-width: 760px;
      margin-bottom: 1rem;
      font-size: clamp(3rem, 7.2vw, 6.1rem);
      font-weight: 950;
    }

    h2 {
      margin-bottom: .85rem;
      font-size: clamp(2.2rem, 4.8vw, 4rem);
      font-weight: 930;
    }

    h3 {
      margin-bottom: .45rem;
      font-size: 1.25rem;
      font-weight: 880;
    }

    .hero-copy {
      max-width: 650px;
      margin: 0;
      color: var(--muted);
      font-size: clamp(1.08rem, 2vw, 1.28rem);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: 1.6rem;
    }

    .button {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      padding: .78rem 1.05rem;
      color: var(--ink);
      background: var(--green);
      border: 2px solid var(--green);
      border-radius: 999px;
      text-decoration: none;
      font-weight: 900;
      line-height: 1.15;
      box-shadow: 0 6px 0 rgba(31, 41, 51, .10);
    }

    .button:hover {
      color: var(--ink);
      transform: translateY(-1px);
    }

    .button.secondary {
      color: var(--ink);
      background: var(--white);
      border-color: var(--ink);
      box-shadow: none;
    }

    .hero-media {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: var(--blue);
      border-radius: 28px;
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .hero-media::before,
    .hero-media::after {
      content: "";
      position: absolute;
      z-index: 0;
      border-radius: 50%;
    }

    .hero-media::before {
      width: 280px;
      height: 280px;
      right: -85px;
      top: -85px;
      background: var(--green);
    }

    .hero-media::after {
      width: 190px;
      height: 190px;
      left: -55px;
      bottom: -55px;
      background: var(--magenta);
    }

    .hero-video {
      position: absolute;
      z-index: 1;
      inset: 18px;
      width: calc(100% - 36px);
      height: calc(100% - 36px);
      object-fit: cover;
      background: #111;
      border-radius: 18px;
    }

    .video-placeholder {
      position: absolute;
      z-index: 2;
      inset: 18px;
      display: grid;
      place-items: center;
      padding: 1.5rem;
      color: var(--white);
      background:
        linear-gradient(135deg, rgba(31,41,51,.28), rgba(31,41,51,.62)),
        var(--ink);
      border-radius: 18px;
      text-align: center;
    }

    .video-placeholder strong {
      display: block;
      max-width: 320px;
      font-size: clamp(1.3rem, 3vw, 2rem);
      line-height: 1.1;
    }

    .video-placeholder span {
      display: block;
      margin-top: .55rem;
      opacity: .85;
      font-size: .9rem;
    }

    .hero-note {
      position: absolute;
      z-index: 3;
      right: 1.25rem;
      bottom: 1.1rem;
      margin: 0;
      padding: .5rem .7rem;
      color: var(--ink);
      background: var(--gold);
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 900;
    }

    /* =========================================================
       SECTION SYSTEM
       ========================================================= */

    .section {
      padding: clamp(3.75rem, 8vw, 7rem) 0;
      border-top: 1px solid var(--soft-line);
    }

    .section-heading {
      max-width: var(--reading);
      margin-bottom: 2.2rem;
    }

    .section-heading p:last-child {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .accent-blue .eyebrow::before { background: var(--blue); }
    .accent-magenta .eyebrow::before { background: var(--magenta); }
    .accent-orange .eyebrow::before { background: var(--orange); }
    .accent-purple .eyebrow::before { background: var(--purple); }
    .accent-gold .eyebrow::before { background: var(--gold); }

    /* HOW IT WORKS */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    .step {
      position: relative;
      min-height: 100%;
      padding: 1.5rem 1.45rem 1.6rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
    }

    .step:nth-child(1) { border-top: 8px solid var(--green); }
    .step:nth-child(2) { border-top: 8px solid var(--blue); }
    .step:nth-child(3) { border-top: 8px solid var(--gold); }

    .step-number {
      display: inline-grid;
      place-items: center;
      width: 2.5rem;
      height: 2.5rem;
      margin-bottom: 1rem;
      color: var(--ink);
      border-radius: 8px;
      font-weight: 950;
      line-height: 1;
    }

    .step:nth-child(1) .step-number { background: var(--green); }
    .step:nth-child(2) .step-number { background: var(--blue); }
    .step:nth-child(3) .step-number { background: var(--gold); }

    .step p { margin: 0; color: var(--muted); }

    /* WHY CARDBOARD / CALLOUT */
    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .84fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: center;
    }

    .callout {
      padding: clamp(1.6rem, 4vw, 2.35rem);
      color: var(--ink);
      background: var(--green);
      border-radius: 24px;
    }

    .callout .eyebrow::before { background: var(--ink); }
    .callout h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
    .callout p { margin-bottom: 0; }
    .callout .button {
      background: var(--white);
      border-color: var(--white);
      box-shadow: none;
    }

    /* MAKERS */
    .makers-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
      gap: 1rem;
    }

    .maker-panel {
      min-height: 320px;
      padding: clamp(1.6rem, 4vw, 2.4rem);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .maker-panel.primary {
      min-height: 470px;
      color: var(--ink);
      background: var(--magenta);
    }

    .maker-panel.secondary {
      color: var(--ink);
      background: var(--gold);
    }

    .maker-panel .panel-tag {
      align-self: flex-start;
      margin-bottom: auto;
      padding: .35rem .55rem;
      background: var(--white);
      border-radius: 999px;
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .maker-panel h3 {
      max-width: 500px;
      margin-bottom: .5rem;
      font-size: clamp(1.8rem, 4vw, 3rem);
    }

    .maker-panel p { max-width: 540px; margin: 0; }

    .community-strip {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 1.5rem;
      align-items: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--line);
    }

    .community-strip p { margin: 0; color: var(--muted); }

    .social-links {
      display: flex;
      gap: .65rem;
      justify-content: flex-end;
    }

    .social-icon {
      display: inline-grid;
      place-items: center;
      width: 48px;
      height: 48px;
      color: var(--ink);
      background: var(--white);
      border: 2px solid var(--ink);
      border-radius: 50%;
      text-decoration: none;
      font-weight: 950;
    }

    /* ENGINEERING */
    .mechanisms {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    .mechanism {
      padding: 1.3rem 1.35rem 1.4rem;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-small);
    }

    .mechanism:nth-child(1),
    .mechanism:nth-child(4) { border-left: 7px solid var(--blue); }
    .mechanism:nth-child(2),
    .mechanism:nth-child(5) { border-left: 7px solid var(--green); }
    .mechanism:nth-child(3),
    .mechanism:nth-child(6) { border-left: 7px solid var(--orange); }

    .mechanism p { margin: 0; color: var(--muted); font-size: .96rem; }

    /* TOYMAKING */
    .feature-list {
      display: grid;
      gap: .85rem;
      margin: 1.4rem 0 0;
      padding: 0;
      list-style: none;
    }

    .feature-list li {
      position: relative;
      padding-left: 1.65rem;
    }

    .feature-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 10px;
      height: 10px;
      background: var(--orange);
      border-radius: 2px;
      transform: rotate(45deg);
    }

    .educator-callout {
      padding: clamp(1.6rem, 4vw, 2.35rem);
      color: var(--white);
      background: var(--purple);
      border-radius: 24px;
    }

    .educator-callout .eyebrow { color: var(--white); }
    .educator-callout .eyebrow::before { background: var(--gold); }
    .educator-callout h2,
    .educator-callout p { color: var(--white); }
    .educator-callout p { opacity: .94; }
    .educator-callout .button {
      color: var(--ink);
      background: var(--gold);
      border-color: var(--gold);
      box-shadow: none;
    }

    /* STORE POPUP */
    .store-cta { position: relative; display: inline-flex; }

    .store-popup {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: calc(100% + 10px);
      width: max-content;
      max-width: min(280px, 80vw);
      padding: .65rem .8rem;
      color: var(--white);
      background: var(--ink);
      border-radius: 8px;
      box-shadow: var(--shadow);
      font-size: .9rem;
      font-weight: 800;
      line-height: 1.3;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 6px);
      transition: opacity .15s ease, transform .15s ease;
    }

    .store-cta.is-open .store-popup {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    /* =========================================================
       SHARED SITE FOOTER
       Production version should be identical on all public pages.
       ========================================================= */

    .site-footer {
      padding: 2.5rem 0 3.2rem;
      color: rgba(255,255,255,.75);
      background: var(--ink);
    }

    .footer-inner {
      display: flex;
      gap: 1rem 2rem;
      align-items: flex-start;
      justify-content: space-between;
    }

    .footer-brand {
      color: var(--white);
      font-weight: 900;
    }

    .site-footer p {
      max-width: 600px;
      margin: .35rem 0 0;
      font-size: .9rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1rem;
      justify-content: flex-end;
    }

    .footer-links a {
      color: var(--white);
      font-size: .9rem;
    }

    @media (max-width: 860px) {
      .header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: .85rem 0;
      }

      .nav {
        width: 100%;
        justify-content: flex-start;
      }

      .hero-grid,
      .split,
      .community-strip {
        grid-template-columns: 1fr;
      }

      .hero-media { order: -1; }

      .steps,
      .mechanisms {
        grid-template-columns: 1fr 1fr;
      }

      .makers-showcase { grid-template-columns: 1fr; }
      .maker-panel.primary,
      .maker-panel.secondary { min-height: 330px; }
      .social-links { justify-content: flex-start; }
    }

    @media (max-width: 580px) {
      body { font-size: 16px; }

      .wrap { width: min(calc(100% - 1.25rem), var(--content)); }

      .header-inner {
        min-height: 60px;
        gap: .65rem;
      }

      .brand { font-size: 1rem; }

      .nav {
        gap: .1rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .1rem;
      }

      .nav a {
        flex: 0 0 auto;
        padding: .46rem .58rem;
        font-size: .86rem;
      }

      .hero {
        padding-top: 1.4rem;
      }

      .hero-grid { gap: 1.8rem; }

      h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }

      .hero-media {
        aspect-ratio: 16 / 11;
        border-radius: 20px;
      }

      .hero-video,
      .video-placeholder {
        inset: 12px;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
        border-radius: 14px;
      }

      .button-row,
      .button,
      .store-cta { width: 100%; }

      .steps,
      .mechanisms { grid-template-columns: 1fr; }

      .section { padding: 3.7rem 0; }

      .footer-inner { flex-direction: column; }
      .footer-links { justify-content: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .store-popup { transition: none; }
      .button:hover { transform: none; }
    }


/* =========================================================
   CANONICAL PUBLIC-PAGE EXTENSIONS
   These compose existing CTW primitives; they do not establish a second theme.
   ========================================================= */
.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.6rem, 6vw, 4.5rem); }
.page-hero .section-heading { margin-bottom: 0; }
.page-hero h1 { font-size: clamp(2.7rem, 6vw, 5rem); }
.page-hero .hero-copy { max-width: 760px; }
.soft { background: rgba(31,41,51,.025); }
.wide-reading { max-width: 880px; }
.two-up { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.three-up { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.card { min-height:100%; padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.card p:last-child { margin-bottom:0; color:var(--muted); }
.card-accent-green { border-top:8px solid var(--green); }
.card-accent-blue { border-top:8px solid var(--blue); }
.card-accent-magenta { border-top:8px solid var(--magenta); }
.card-accent-orange { border-top:8px solid var(--orange); }
.card-accent-purple { border-top:8px solid var(--purple); }
.card-accent-gold { border-top:8px solid var(--gold); }
.number-badge { display:inline-grid; place-items:center; min-width:2.5rem; height:2.5rem; margin-bottom:1rem; padding:0 .65rem; border-radius:8px; background:var(--green); font-weight:950; line-height:1; }
.meta { color:var(--muted); font-size:.93rem; font-weight:700; }
.notice { padding:clamp(1.35rem,4vw,2rem); border-radius:24px; background:var(--gold); }
.notice p:last-child { margin-bottom:0; }
.executive-summary { padding:clamp(1.4rem,4vw,2.2rem); border:2px dashed rgba(31,41,51,.25); border-radius:24px; background:rgba(255,184,0,.16); }
.executive-summary .eyebrow::before { background:var(--gold); }
.toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:end; margin:1.5rem 0 2rem; }
.field { display:grid; gap:.38rem; }
.field label { font-size:.82rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.field input,.field select { min-height:50px; width:100%; padding:.72rem .85rem; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:11px; }
.field input:focus,.field select:focus { border-color:var(--blue); outline:3px solid rgba(0,187,249,.2); outline-offset:1px; }
.region-list,.toy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.region-card,.toy-card { display:flex; min-height:100%; flex-direction:column; padding:1.35rem; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); background:var(--white); text-decoration:none; }
.region-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.toy-card:hover { transform:none; box-shadow:none; }
.region-card h3,.toy-card h3 { margin-bottom:.5rem; }
.region-card p,.toy-card p { color:var(--muted); }
.region-card .button,.toy-card .button { margin-top:auto; align-self:flex-start; }
.toy-visual { position:relative; display:grid; place-items:center; aspect-ratio:4/3; margin:-.25rem -.25rem 1rem; overflow:hidden; border-radius:14px; background:var(--blue); }
.toy-visual::before,.toy-visual::after { content:""; position:absolute; border-radius:50%; }
.toy-visual::before { width:160px; height:160px; right:-35px; top:-45px; background:var(--green); }
.toy-visual::after { width:110px; height:110px; left:-25px; bottom:-30px; background:var(--magenta); }
.toy-visual strong { position:relative; z-index:1; max-width:80%; padding:.7rem; text-align:center; font-size:1.25rem; line-height:1.05; }
.toy-visual > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: var(--white);
  object-fit: contain;
  object-position: center;
}
.standard-group { margin-top:1.4rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.standard-group-header { padding:1rem 1.1rem; background:rgba(155,93,229,.12); border-bottom:1px solid var(--line); }
.standard-group-header h2 { margin:0; font-size:clamp(1.35rem,3vw,1.8rem); }
.standard-row { display:grid; grid-template-columns:minmax(120px,.28fr) minmax(0,.9fr) minmax(0,1fr); gap:1rem; padding:1.1rem; }
.standard-row + .standard-row { border-top:1px solid var(--line); }
.standard-code { font-weight:950; }
.standard-row p { margin:0; }
.standard-row .alignment { color:var(--muted); }
.empty-state { display:none; padding:1.2rem; border:1px dashed var(--line); border-radius:var(--radius); color:var(--muted); text-align:center; }
.page-nav { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }

/* Assembly vocabulary folded into the same stylesheet. Existing assembly pages can migrate here. */
.assembly-main { --content:940px; padding:clamp(3rem,7vw,5.5rem) 0 4.5rem; }
.video-shell { position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; background:#111; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.build-outline { display:grid; gap:1rem; margin-top:2.2rem; }
.blueprint-sheet { overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.sheet-heading { display:flex; gap:1rem; align-items:baseline; justify-content:space-between; padding:.9rem 1rem; background:rgba(31,41,51,.04); border-bottom:1px solid var(--line); }
.chapter-list { display:grid; margin:0; padding:0; list-style:none; }
.chapter-item + .chapter-item { border-top:1px solid var(--line); }
.chapter-card { display:grid; grid-template-columns:2.7rem minmax(0,1fr) 150px auto; gap:.8rem; width:100%; min-height:112px; align-items:center; padding:.7rem .8rem; color:var(--ink); background:var(--white); border:0; font:inherit; text-align:left; }
.chapter-number { display:grid; place-items:center; width:2.25rem; height:2.25rem; color:var(--ink); background:var(--blue); border-radius:7px; font-weight:950; }
.chapter-schematic { display:grid; place-items:center; width:150px; height:92px; background:var(--white); border:1px solid var(--line); border-radius:8px; }
.chapter-time { min-width:3.6rem; color:var(--blue); font-size:.9rem; font-weight:900; text-align:right; white-space:nowrap; }
.completion { margin-top:1.2rem; overflow:hidden; background:rgba(31,41,51,.04); border:1px solid var(--line); border-radius:var(--radius); }
.completion-inner { padding:1.25rem 1.35rem; }
.utility-links { display:grid; margin-top:2.4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.utility-link { display:flex; min-height:52px; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem .1rem; color:var(--ink); border-bottom:1px solid var(--line); text-decoration:none; font-weight:800; }
.utility-links > :last-child { border-bottom:0; }

@media (max-width:860px) {
  .region-list,.toy-grid,.three-up { grid-template-columns:1fr 1fr; }
  .standard-row { grid-template-columns:1fr; gap:.45rem; }
}
@media (max-width:580px) {
  .two-up,.three-up,.region-list,.toy-grid,.toolbar { grid-template-columns:1fr; }
  .region-card .button,.toy-card .button { width:100%; }
  .chapter-card { grid-template-columns:2.45rem minmax(0,1fr) 96px; min-height:96px; }
  .chapter-schematic { width:96px; height:78px; }
  .chapter-time { grid-column:2; text-align:left; }
}


/* =========================================================
   COMPATIBILITY TOKENS FOR ASSEMBLY / LEARNING COMPONENTS
   These map the older component vocabulary onto the current CTW design.
   ========================================================= */
:root {
  --paper: var(--white);
  --paper-deep: rgba(31, 41, 51, .045);
  --cardboard: var(--gold);
  --blue-dark: #0098cc;
  --blue-soft: rgba(0, 187, 249, .11);
  --content-narrow: 940px;
  --content-wide: var(--content);
}

/* === ASSEMBLY COMPONENTS (consolidated from former assembly.css) === */
/* Cardboard Toy World — single-toy assembly pages */
body {
  --page-width: var(--content-narrow);
}

.assembly-header {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 246, .98);
}

.header-inner {
  position: relative;
  min-height: 72px;
}

.assembly-main {
  padding: clamp(3rem, 7vw, 5.5rem) 0 4.5rem;
}

.page-heading {
  margin-bottom: 1.5rem;
}

.page-heading h1 {
  margin-bottom: .45rem;
  font-size: clamp(2.4rem, 7vw, 4.25rem);
}

.project-meta {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 700;
}

/* Lightweight YouTube facade. No iframe/API exists until user interaction. */
.video-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  scroll-margin-top: 1rem;
  background: #111;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.video-shell > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.24), rgba(0,0,0,.02) 55%);
  pointer-events: none;
}

.video-shell.is-loading::before {
  content: "Loading video…";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  padding: .55rem .75rem;
  color: var(--white);
  background: rgba(29, 37, 43, .9);
  border-radius: 7px;
  font-size: .9rem;
  font-weight: 800;
  transform: translate(-50%, 42px);
}

.play-button {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 82px;
  height: 58px;
  padding: 0;
  color: var(--white);
  background: #d92525;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
}

.play-button:hover {
  background: #bc1f1f;
}

.play-button svg {
  width: 27px;
  height: 27px;
  margin-left: 3px;
  fill: currentColor;
}

.video-label {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: .85rem;
  margin: 0;
  padding: .42rem .6rem;
  color: var(--white);
  background: rgba(29, 37, 43, .88);
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 760;
}

.video-shell iframe,
.video-shell > div {
  position: absolute !important;
  z-index: 3;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Completion panel lives directly beneath the video on every toy page. */
.completion {
  margin-top: 1.2rem;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.completion-inner {
  padding: 1.25rem 1.35rem;
}

.completion-kicker {
  margin: 0;
  color: var(--blue);
  font-weight: 850;
}

.completion h2 {
  margin: .2rem 0 .45rem;
  font-size: clamp(1.4rem, 4vw, 2rem);
}

.completion-intro {
  margin: 0;
  color: var(--muted);
}

.completion-extra {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.completion.is-complete {
  background: var(--white);
  border-color: var(--cardboard);
  transform: scale(1.006);
}

.completion.is-complete .completion-extra {
  display: block;
}

.challenge {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--blue-soft);
  border-radius: 10px;
}

.challenge p {
  margin: 0;
}

.adult-share {
  margin-top: 1.15rem;
}

.adult-share p {
  margin: 0 0 .7rem;
  color: var(--muted);
}

.social-links {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.social-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 3px 12px rgba(29, 37, 43, .06);
}

.social-icon:hover {
  border-color: #bebbb3;
}

.social-icon svg {
  width: 28px;
  height: 28px;
}

/* One-page project map. Physical blueprint pages remain the organizing chunks. */
.build-outline {
  display: grid;
  gap: 1rem;
  margin-top: 2.2rem;
}

.blueprint-sheet {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sheet-heading {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .9rem 1rem;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}

.sheet-heading h2 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
}

.sheet-time {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
}

.chapter-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-item + .chapter-item {
  border-top: 1px solid var(--line);
}

.chapter-card {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) 150px auto;
  gap: .8rem;
  width: 100%;
  min-height: 112px;
  align-items: center;
  padding: .7rem .8rem;
  color: var(--ink);
  background: var(--white);
  border: 0;
  font: inherit;
  text-align: left;
}

button.chapter-card {
  cursor: pointer;
}

button.chapter-card:hover,
button.chapter-card.is-active {
  background: #fffefa;
}

button.chapter-card:hover .chapter-schematic,
button.chapter-card.is-active .chapter-schematic {
  border-color: #b9b5ac;
}

button.chapter-card.is-active {
  box-shadow: inset 4px 0 0 var(--blue);
}

.chapter-number {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--white);
  background: var(--blue);
  border-radius: 7px;
  font-weight: 900;
  line-height: 1;
}

.chapter-number.is-empty {
  background: transparent;
}

.chapter-copy {
  min-width: 0;
}

.chapter-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 830;
  line-height: 1.25;
}

.chapter-kind {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.chapter-schematic {
  display: grid;
  place-items: center;
  width: 150px;
  height: 92px;
  padding: .3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.chapter-schematic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chapter-time {
  min-width: 3.6rem;
  color: var(--blue);
  font-size: .9rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.chapter-pending .chapter-time {
  color: var(--muted);
}

.utility-links {
  display: grid;
  gap: .1rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.utility-link,
.store-trigger {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-weight: 760;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.utility-links > :last-child {
  border-bottom: 0;
}

.utility-link:hover,
.store-trigger:hover {
  color: var(--blue);
}

.utility-arrow {
  flex: 0 0 auto;
  color: var(--blue);
  font-weight: 900;
}

.store-row {
  position: relative;
}

.store-trigger {
  width: 100%;
}

.store-popup {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(280px, 85vw);
  padding: .65rem .8rem;
  color: var(--white);
  background: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}

.store-row.is-open .store-popup {
  opacity: 1;
  transform: translateY(0);
}

.assembly-footer {
  padding: 1.6rem 0 2rem;
  color: #aeb7bd;
  background: var(--ink);
}

.footer-inner {
  display: flex;
  gap: .8rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-brand {
  color: var(--white);
  font-weight: 850;
}

.assembly-footer p {
  margin: 0;
  font-size: .85rem;
}

@media (max-width: 680px) {
  .brand {
    width: 100%;
    height: 82px;
  }

  .brand-logo {
    top: 0;
    width: min(315px, 82vw);
  }

  .assembly-main {
    padding-top: 2.5rem;
  }

  .chapter-card {
    grid-template-columns: 2.45rem minmax(0, 1fr) 96px;
    gap: .6rem;
    min-height: 96px;
    padding: .6rem;
  }

  .chapter-number {
    width: 2.15rem;
    height: 2.15rem;
  }

  .chapter-schematic {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 96px;
    height: 78px;
  }

  .chapter-time {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: -.25rem;
    text-align: left;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .chapter-card {
    grid-template-columns: 2.35rem minmax(0, 1fr) 82px;
  }

  .chapter-schematic {
    width: 82px;
    height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .completion,
  .store-popup {
    transition: none;
  }
}


/* === LEARNING COMPONENTS (consolidated from former learn.css) === */
/* Cardboard Toy World — toy Learning & Activities pages */
body {
  --page-width: var(--content-narrow);
}

.site-header {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 246, .98);
}

.header-inner {
  display: flex;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.site-header .brand {
  align-self: stretch;
  flex: 0 0 210px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
  justify-content: flex-end;
}

.nav a {
  padding: .55rem .7rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 700;
  border-radius: 8px;
}

.nav a:hover {
  background: var(--blue-soft);
}

.nav .nav-shop {
  color: var(--white);
  background: var(--blue);
}

.nav .nav-shop:hover {
  color: var(--white);
  background: var(--blue-dark);
}

.nav .store-cta {
  width: auto;
}

.store-cta {
  position: relative;
  display: inline-flex;
}

.store-popup {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(280px, 80vw);
  padding: .65rem .8rem;
  color: var(--white);
  background: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .15s ease, transform .15s ease;
}

.store-cta.is-open .store-popup {
  opacity: 1;
  transform: translate(-50%, 0);
}

.nav-store .store-popup {
  top: calc(100% + 10px);
  bottom: auto;
}

.nav-store .store-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-bottom-color: var(--ink);
  transform: translateX(-50%);
}

.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: 2.4rem;
}

.learn-hero-copy {
  min-width: 0;
}

.learn-hero h1 {
  margin-bottom: .4rem;
  font-size: clamp(2.5rem, 7vw, 4.6rem);
}

.learn-hero .button {
  display: inline-flex;
  width: auto;
  margin-top: 1.35rem;
}

.learn-hero-figure {
  margin: 0;
}

.learn-hero-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.learn-main {
  padding: clamp(3rem, 7vw, 5rem) 0 5rem;
}

.newsletter {
  display: grid;
  grid-template-columns: 1fr minmax(300px, .8fr);
  gap: clamp(1.3rem, 4vw, 3rem);
  align-items: center;
  margin: 2rem 0 2.4rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  color: var(--white);
  background: var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.newsletter .eyebrow {
  color: #d8edf6;
}

.newsletter h2,
.newsletter p {
  color: var(--white);
}

.newsletter h2 {
  margin-bottom: .65rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.newsletter p {
  margin-bottom: 0;
  opacity: .92;
}

.signup {
  display: grid;
  gap: .55rem;
}

.signup label {
  font-size: .86rem;
  font-weight: 800;
}

.signup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
}

.signup input {
  min-width: 0;
  min-height: 48px;
  padding: .7rem .8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 9px;
}

.signup button {
  min-height: 48px;
  padding: .7rem 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 9px;
  cursor: pointer;
  font-weight: 850;
}

.signup button:hover {
  background: #edf6fa;
}

.signup-status {
  min-height: 1.35em;
  margin: 0;
  color: #e7f3f8 !important;
  font-size: .83rem;
}

.accordion {
  border-top: 1px solid var(--line);
}

details {
  border-bottom: 1px solid var(--line);
}

summary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .1rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 850;
  letter-spacing: -.02em;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}

details[open] summary::after {
  content: "–";
}

.detail-body {
  padding: .15rem .1rem 1.6rem;
}

.detail-intro {
  max-width: var(--reading);
  color: var(--muted);
}

.learning-grid,
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 1rem;
}

.learning-card,
.evidence-card {
  padding: 1rem;
  background: var(--paper-deep);
  border-radius: 10px;
}

.learning-card h3,
.evidence-card h3,
.activity h3,
.administrator-case h3 {
  margin-bottom: .4rem;
  font-size: 1.12rem;
}

.learning-card p,
.evidence-card p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.vocabulary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.vocabulary li {
  padding: .8rem .9rem;
  background: var(--paper-deep);
  border-left: 4px solid var(--cardboard);
  border-radius: 0 8px 8px 0;
  font-weight: 820;
}

.standards-tool {
  margin-top: 1.2rem;
  padding: 1.1rem;
  background: var(--paper-deep);
  border-radius: var(--radius);
}

.region-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .86rem;
  font-weight: 850;
}

.region-select {
  width: 100%;
  min-height: 50px;
  padding: .65rem .75rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.region-message {
  margin: .65rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.standard-result {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.standard-result.is-visible {
  display: block;
}

.standard-code {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .28rem .45rem;
  color: var(--white);
  background: var(--blue);
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 900;
}

.standard-result p:last-child {
  margin-bottom: 0;
}

.alignment {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.administrator-case {
  margin-top: 1.2rem;
  padding: 1.1rem 1.15rem;
  border-left: 4px solid var(--cardboard);
  background: var(--white);
}

.administrator-case p:last-child {
  margin-bottom: 0;
}

.extension-list {
  display: grid;
  gap: .8rem;
  margin-top: 1rem;
}

.activity {
  padding: 1rem;
  background: var(--paper-deep);
  border-radius: 10px;
}

.activity p {
  margin-bottom: 0;
  color: var(--muted);
}

.activity-meta {
  display: inline-block;
  margin-bottom: .45rem;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer {
  padding: 2rem 0 2.6rem;
  color: #aeb7bd;
  background: var(--ink);
}

.footer-inner {
  display: flex;
  gap: 1rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-brand {
  color: var(--white);
  font-weight: 850;
}

.site-footer p {
  margin: .35rem 0 0;
  max-width: 580px;
  font-size: .86rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: flex-end;
}

.footer-links a {
  color: #e8edf0;
  font-size: .86rem;
}

@media (max-width: 760px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: .9rem 0 .75rem;
  }

  .site-header .brand {
    width: 100%;
    height: 82px;
    flex-basis: 82px;
  }

  .brand-logo {
    top: 0;
    width: min(315px, 82vw);
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
  }

  .learn-hero,
  .newsletter {
    grid-template-columns: 1fr;
  }

  .learn-hero-figure {
    order: -1;
  }
}

@media (max-width: 620px) {
  .nav {
    gap: .1rem;
  }

  .nav a {
    padding: .48rem .52rem;
    font-size: .88rem;
  }

  .learn-main {
    padding-top: 2.5rem;
  }

  .signup-row,
  .learning-grid,
  .evidence-grid,
  .vocabulary {
    grid-template-columns: 1fr;
  }

  .signup button,
  .learn-hero .button {
    width: 100%;
  }

  summary {
    min-height: 64px;
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-popup {
    transition: none;
  }
}


/* =========================================================
   CANONICAL CONSOLIDATION OVERRIDES
   ========================================================= */
.site-header,
.assembly-header {
  position: relative;
  z-index: 20;
  min-height: 0;
  border-bottom: 1px solid var(--soft-line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  min-height: 0;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.brand {
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 210px;
  height: auto;
  min-width: 0;
  margin: 20px 0;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  position: static;
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
}

.brand-mark { display: none; }

.site-footer,
.assembly-footer {
  padding: 2.5rem 0 3.2rem;
  color: var(--ink);
  background: var(--green);
  border-top: 7px solid var(--orange);
  box-shadow: 0 -7px 0 var(--purple);
}

.site-footer .footer-brand,
.assembly-footer .footer-brand,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer p, .site-footer li,
.assembly-footer h1, .assembly-footer h2, .assembly-footer h3,
.assembly-footer p, .assembly-footer li { color: var(--ink); }

.site-footer a,
.assembly-footer a,
.footer-links a { color: var(--ink); }

.site-footer a:hover,
.assembly-footer a:hover,
.footer-links a:hover { color: var(--white); }

@media (max-width: 860px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 0 .75rem;
  }
  .brand, .site-header .brand {
    width: 210px;
    height: auto;
    flex-basis: auto;
    margin: 20px 0;
  }
  .brand-logo {
    position: static;
    width: 210px;
    max-width: min(210px, 82vw);
  }
}


/* =========================================================
   FLAT-SITE ASSEMBLY PAGE LAYOUT
   Supports the canonical /assembly pages supplied in the source ZIP.
   These pages intentionally share the CTW colors, type, logo and footer.
   ========================================================= */
.assembly-header .header-inner {
  flex-direction: row;
  align-items: center;
}
.project-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}
.project-name {
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
  line-height: 1.1;
}
.project-id .project-meta {
  margin-top: .18rem;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.video-stage {
  padding: clamp(1.25rem, 4vw, 2.5rem) 0;
  background: var(--ink);
}
.video-stage .video-shell {
  width: min(calc(100% - 2rem), 1120px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  color: var(--white);
  background: linear-gradient(135deg, rgba(0,187,249,.3), rgba(31,41,51,.92));
  text-align: center;
}
.video-placeholder-inner {
  width: min(100%, 620px);
}
.video-kicker {
  margin: 0 0 .45rem;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.video-title {
  margin: 0 0 1.35rem;
  color: var(--white);
  font-size: clamp(2.3rem, 7vw, 5rem);
  font-weight: 950;
}
.video-placeholder .play-button {
  position: relative;
  left: auto;
  top: auto;
  margin: 0 auto;
  transform: none;
}
.video-placeholder .play-button::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid currentColor;
}
.video-note {
  margin: 1rem auto 0;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
}
.player-footer-rules {
  width: 100%;
  height: 14px;
  background: transparent;
}
.player-footer-rules span {
  display: block;
  width: 100%;
  height: 7px;
}
.player-footer-rules span:first-child {
  background: var(--purple);
}
.player-footer-rules span:last-child {
  background: var(--orange);
}
.blueprint-console {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: #61A82D;
  color: #000;
  font-family:
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-weight: 700;
  -webkit-font-smoothing: auto;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.blueprint-console,
.blueprint-console .console-heading,
.blueprint-console .clearance,
.blueprint-console .clearance *,
.blueprint-console .kid-safe-note,
.blueprint-console .retro-link,
.blueprint-console .chapter-nav a {
  color: #000 !important;
  -webkit-text-fill-color: #000;
  opacity: 1;
}
.console-inner {
  display: grid;
  grid-template-columns: minmax(250px,.8fr) minmax(320px,1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.console-heading,
.clearance,
.kid-safe-note,
.retro-link,
.chapter-nav a {
  color: #000;
  font-family: inherit;
  font-size: 14pt;
  line-height: 1.45;
  text-align: left;
}
.console-heading {
  margin: 0 0 .6rem;
  }
.clearance,
.kid-safe-note {
  margin: 0 0 .6rem;
}
.retro-link,
.chapter-nav a {
  color: #000;
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: .14em;
}
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chapter-nav a:hover,
.chapter-nav a.is-active {
  color: #000;
}
.enrichment {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: var(--white);
}
.enrichment details {
  width: min(calc(100% - 2rem), 940px);
  margin-inline: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.enrichment summary {
  min-height: 68px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 900;
}
.enrichment-body {
  max-width: var(--reading);
  padding: 0 0 1.4rem;
  color: var(--muted);
}
.site-footer .footer-grid {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr .85fr .85fr;
  gap: 2rem;
}
.site-footer .footer-col h3 { margin-bottom: .6rem; font-size: 1.05rem; }
.site-footer .footer-col p { margin: .35rem 0; }
.site-footer .footer-tagline { font-weight: 900; }
.site-footer .footer-col .footer-links {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: stretch;
}
@media (max-width: 760px) {
  .assembly-header .header-inner { flex-direction: row; align-items: center; padding-bottom: 0; }
  .project-id { align-items: flex-end; }
  .console-inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .chapter-nav { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .assembly-header .brand { width: 170px; }
  .assembly-header .brand-logo { width: 170px; }
  .project-name { font-size: .95rem; }
}


/* =========================================================
   TOY GALLERY — LEVEL-BASED LAYOUT
   ========================================================= */
.toy-gallery-page { background: var(--white); }
.toy-gallery-page .page-hero { padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.gallery-levels { padding: 0 0 clamp(3.5rem, 7vw, 6rem); background: var(--white); }
.gallery-level { padding: clamp(2rem, 4.5vw, 3.5rem) 0 0; }
.gallery-level + .gallery-level { margin-top: clamp(1.2rem, 2vw, 1.8rem); }
.gallery-level > h2 { margin-bottom: 1.2rem; font-size: clamp(2rem, 4.8vw, 4rem); }
.toy-card { cursor: default; }
.toy-card .button { align-self: flex-start; margin-top: auto; cursor: pointer; }
@media (max-width: 620px) {
  .gallery-level { padding-top: 2.2rem; }
  .gallery-level + .gallery-level { margin-top: .7rem; }
}

/* =========================================================
   STANDARDS SEARCH PAGE — PAGE-SCOPED LAYOUT
   Keeps this page compact and prevents generic shared rules from stretching
   the hero image or jurisdiction picker.
   ========================================================= */
.standards-search-page {
  --page-width: var(--content);
  background: var(--white);
}

.standards-search-page .page-hero {
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
  background: var(--white);
}

.standards-search-page .page-hero .split {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .7fr);
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: center;
}

.standards-search-page .page-hero .section-heading {
  max-width: 720px;
  margin-bottom: 0;
}

.standards-search-page .standards-hero-figure {
  width: min(100%, 460px);
  margin: 0;
  justify-self: end;
}

.standards-search-page .standards-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.standards-search-page .standards-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
  width: min(100%, 760px);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.standards-search-page .standards-picker .field {
  flex: 1 1 520px;
  max-width: 590px;
}

.standards-search-page .standards-picker select {
  width: 100%;
  max-width: 590px;
  min-height: 52px;
  padding: .72rem .85rem;
  color: #000;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14pt;
  line-height: 1.3;
  color-scheme: light;
}

.standards-search-page .standards-picker select option {
  color: #000;
  background: #fff;
  font-size: 14pt;
}

.standards-search-page .standards-picker select optgroup {
  color: #4b5563;
  background: #fff;
  font-size: 14pt;
  font-weight: 800;
}

.standards-search-page .standards-picker-actions {
  flex: 0 0 auto;
}

.standards-search-page .section {
  padding: clamp(1.8rem, 3.8vw, 3rem) 0;
  border-top: 0;
  background: var(--white);
}

.standards-search-page .feature-card {
  max-width: 860px;
}

@media (max-width: 860px) {
  .standards-search-page .page-hero .split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .standards-search-page .standards-hero-figure {
    width: min(100%, 560px);
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .standards-search-page .page-hero {
    padding-top: 2rem;
  }

  .standards-search-page .standards-picker {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .standards-search-page .standards-picker .field,
  .standards-search-page .standards-picker select {
    max-width: none;
  }

  .standards-search-page .standards-picker-actions,
  .standards-search-page .standards-picker-actions .button {
    width: 100%;
  }
}



/* =========================================================
   EDUCATORS PAGE — HERO IMAGE ONLY
   Keeps the established CTW public-page design; scoped to this page.
   ========================================================= */
.educators-page .page-hero .educator-hero-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.educators-page .page-hero .section-heading { margin-bottom: 0; }
.educators-page .educator-hero-figure {
  width: min(100%, 500px);
  margin: 0 0 0 auto;
}
.educators-page .educator-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (max-width: 860px) {
  .educators-page .page-hero .educator-hero-split { grid-template-columns: 1fr; }
  .educators-page .educator-hero-figure { width: min(100%, 620px); margin: 0; }
}

/* =========================================================
   SITE-WIDE WHITE SECTION BACKGROUNDS
   Public page rows stay white; color lives in cards, callouts and accents.
   ========================================================= */
body,
.page-hero,
.section,
.section.soft,
.soft {
  background: var(--white);
}

/* =========================================================
   EDUCATORS PAGE — COMPACT WHITE LAYOUT + IMAGE PLACEHOLDERS
   ========================================================= */
.educators-page .page-hero {
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
}

.educators-page .educator-hero-steps {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

.educators-page .section {
  background: var(--white);
}

.educators-page .educator-image-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 500px);
  aspect-ratio: 16 / 9;
  margin: 0;
  justify-self: end;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.educators-page .educator-image-placeholder span {
  font-weight: 850;
  letter-spacing: .02em;
}

.educators-page .educator-media-row {
  align-items: center;
}

.educators-page .educator-media-row .section-heading {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .educators-page .educator-image-placeholder {
    width: min(100%, 620px);
    justify-self: start;
  }

  .educators-page .educator-media-row .educator-image-placeholder {
    order: 0;
  }
}

/* =========================================================
   EDUCATORS PAGE — PORTRAIT PHOTO FRAMES
   ========================================================= */
.educators-page .educator-portrait-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.8vw, 1rem);
  width: min(100%, 500px);
  margin: 0;
  justify-self: end;
}

.educators-page .educator-portrait-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.educators-page .educator-portrait-placeholder span {
  padding: .75rem;
  font-weight: 850;
  letter-spacing: .02em;
  text-align: center;
}

.educators-page .educator-portrait-placeholder > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: var(--white);
  object-fit: contain;
  object-position: center;
}

@media (max-width: 860px) {
  .educators-page .educator-portrait-pair {
    width: min(100%, 620px);
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .educators-page .educator-portrait-pair {
    grid-template-columns: 1fr;
    width: min(100%, 360px);
  }
}

/* =========================================================
   CANONICAL SHOP NAV BUTTON — BLUEPRINT LABEL TREATMENT
   ========================================================= */
.nav .nav-shop {
  color: var(--purple);
  background: var(--white);
  border: 3px solid var(--purple);
  box-shadow: inset 0 0 0 3px var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.nav .nav-shop:hover,
.nav .nav-shop:focus-visible {
  color: var(--purple);
  background: var(--white);
  border-color: var(--purple);
  box-shadow: inset 0 0 0 3px var(--orange);
  filter: none;
}

/* =========================================================
   HOMEPAGE — COMPACT ROWS + FIVE-STEP HOW-IT-WORKS PROCESS
   ========================================================= */
.home-page .section {
  padding: 20px 0;
}

.home-page .section-heading {
  margin-bottom: 1.2rem;
}

.home-page .how-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 2vw, 1.2rem);
  align-items: stretch;
}

.home-page .how-process-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.home-page .how-process-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  background: rgba(31,41,51,.035);
  border-bottom: 1px solid var(--line);
}

.home-page .how-process-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-page .how-process-image span {
  padding: .9rem;
  font-weight: 850;
  text-align: center;
}

.home-page .how-process-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
}

.home-page .how-process-copy .step-number {
  margin-bottom: .75rem;
}

.home-page .how-process-copy h3 {
  margin-bottom: .45rem;
}

.home-page .how-process-copy p {
  margin: 0;
  color: var(--muted);
}

.home-page .how-process-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
}

.home-page .how-process-result .how-process-image {
  height: 100%;
  aspect-ratio: auto;
  min-height: 250px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.home-page .how-process-result .how-process-copy {
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.home-page .home-social-strip {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

.home-page .home-social-strip .social-links {
  justify-content: flex-start;
}

@media (max-width: 860px) {
  .home-page .how-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .how-process-result {
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 580px) {
  .home-page .how-process {
    grid-template-columns: 1fr;
  }

  .home-page .how-process-result {
    grid-column: auto;
    display: flex;
    flex-direction: column;
  }

  .home-page .how-process-result .how-process-image {
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* =========================================================
   CANONICAL HEADING SCALE — OCT 2026
   A restrained major-second-ish hierarchy for faster reading.
   ========================================================= */
h1,
.page-hero h1,
.page-heading h1,
.learn-hero h1,
.home-page .hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.72rem, 3.2vw, 2.75rem);
}