/* Shared controls, then the phone/tablet layout for the three public pages. */
:root {
  --header-bottom: 88px;
  --controls-height: 116px;
  --scene-height: clamp(148px, 26svh, 224px);
  --content-top: calc(var(--header-bottom) + var(--scene-height) + 20px);
}
html[data-page="course"] { --controls-height: 0px; }
.topbar { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; z-index: 20; }
.topbar .brand { grid-column: 1; grid-row: 1; }
.topbar nav { grid-column: 2; grid-row: 1; justify-self: end; }
.topbar-actions { display: flex; align-items: center; gap: 8px; grid-column: 3; grid-row: 1; }
.header-sound { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line); }
.topbar-actions .theme-switch { width: 44px; height: 44px; }
.header-sound[aria-pressed="false"] .sound-bars { opacity: .6; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.menu-icon { position: relative; width: 18px; height: 14px; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 1px; background: currentColor; transition: transform .2s; }
.menu-icon::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-3.5px) rotate(-45deg); }
.scene-window { display: none; }
.skip { z-index: 30; }
.sound-toggle:disabled { cursor: default; }
.volume-control input { min-height: 44px; }

@media (max-width: 900px), (max-height: 540px) and (max-width: 1100px) {
  :root { --gutter: clamp(16px, 5vw, 32px); --header-bottom: calc(64px + env(safe-area-inset-top)); }
  html { scrollbar-gutter: auto; scroll-padding-top: 0; }
  body { overflow-wrap: break-word; }
  .topbar {
    position: fixed; inset: 0 0 auto; width: 100%; height: auto;
    min-height: calc(64px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
    display: flex; justify-content: space-between; gap: 8px; background: var(--paper); backdrop-filter: none;
  }
  .topbar .brand { font-size: 14px; gap: 8px; min-width: 0; }
  .brand-mark { flex: 0 0 9px; height: 9px; margin-right: 1px; }
  .topbar .brand-slash, .topbar .brand-edition { display: none; }
  .topbar-actions { gap: 6px; flex-shrink: 0; }
  .menu-toggle { display: flex; }
  .topbar nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px;
    margin: 0; padding: 12px var(--gutter) 20px;
    max-height: calc(100svh - var(--header-bottom)); overflow-y: auto;
    border-bottom: 1px solid var(--line); background: var(--paper);
    box-shadow: 0 16px 25px rgba(0, 0, 0, .18);
  }
  html[data-menu-open="true"] .topbar nav { display: grid; }
  .topbar nav > a, .topbar nav > a:not(.contact-link), .topbar nav a.desktop-nav {
    display: flex !important; align-items: center; min-height: 48px; padding: 8px 0;
    font: 14px/1.5 var(--mono); white-space: normal;
  }
  .topbar nav .contact-link span { margin-left: 8px; }
  .topbar-actions .header-sound, .topbar-actions .theme-switch, .topbar-actions .menu-toggle { min-width: 44px; min-height: 44px; }
  .page-grain { display: none; }
  .home-page .scene {
    z-index: 5; height: 100lvh; bottom: auto; background: var(--paper);
    clip-path: inset(var(--header-bottom) 0 calc(100% - var(--header-bottom) - var(--scene-height)) 0);
  }
  .scene-window {
    display: block; position: fixed; z-index: 6; pointer-events: none;
    top: var(--header-bottom); left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    height: var(--scene-height); border-bottom: 1px solid var(--line);
  }
  .home-page .field-meta {
    top: calc(var(--header-bottom) + 8px); left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right)); z-index: 6;
    font-size: 12px; line-height: 1.4; gap: 12px; letter-spacing: 0;
  }
  .home-page .field-meta > span:first-child { display: block; }
  .home-page .field-meta > span:last-child { text-align: right; }
  .home-page .scene-caption, .chapter-watermark { display: none; }
  .home-page #story { padding-top: var(--content-top); padding-bottom: calc(var(--controls-height) + 24px); }
  .home-page .chapter {
    min-height: max(340px, calc(100svh - var(--content-top) - var(--controls-height)));
    padding: 32px max(var(--gutter), env(safe-area-inset-right)) 44px max(var(--gutter), env(safe-area-inset-left));
    align-items: flex-start; scroll-margin-top: var(--content-top);
  }
  .home-page .copy { width: 100%; max-width: none; background: none; min-width: 0; }
  .home-page h1 { font-size: clamp(2.75rem, 12vw, 4.6rem); line-height: 1.03; margin-left: 0; }
  .home-page h2, .home-page .chapter-experience h2 { font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.08; margin-left: 0; }
  .eyebrow { flex-wrap: wrap; font-size: 12px; line-height: 1.6; gap: 8px; margin-bottom: 20px; }
  .home-page .intro { font-size: 18px; line-height: 1.6; margin-block: 24px; }
  .home-page .body-copy { font-size: 17px; line-height: 1.7; margin-block: 24px; }
  .identity { flex-wrap: wrap; gap: 12px; font-size: 13px; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 100%; }
  .facts strong { font-size: clamp(36px, 10vw, 48px); }
  .facts div > span { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  .career-job { padding-left: 20px; }
  .career-date { flex-wrap: wrap; line-height: 1.7; }
  .career-current { display: none; }
  .career-job h3 { font-size: 23px; }
  .career-job p { font-size: 16px; line-height: 1.65; }
  .project { grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 10px; min-height: 64px; }
  .project small { font-size: 14px; line-height: 1.6; }
  .big-contact { font-size: clamp(18px, 5.4vw, 24px); gap: 12px; max-width: 100%; min-height: 64px; }
  .socials { flex-wrap: wrap; gap: 8px 24px; }
  .socials a, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .signature { line-height: 1.7; margin-top: 28px; }
  .signature span { margin-left: 12px; }
  .home-page .timeline {
    inset: auto 0 0; z-index: 15; min-height: 0; width: 100%;
    grid-template-columns: minmax(0, 1fr) 44px; gap: 0 12px;
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: var(--paper);
  }
  .timeline .chapters-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 1; gap: 0; }
  .timeline .chapters-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; font-size: 12px; line-height: 1.4; padding: 6px 0; gap: 2px; }
  .timeline .chapters-nav a span { margin: 0; font-size: 11px; }
  .timeline .sound-controls { grid-column: 1; grid-row: 2; gap: 12px; min-width: 0; }
  .sound-toggle { font-size: 12px; }
  .volume-control { min-width: 0; flex: 1; max-width: 90px; }
  .volume-control input { width: 100%; min-width: 44px; }
  .timeline .motion-toggle { grid-column: 2; grid-row: 2; width: 44px; min-height: 44px; justify-content: center; padding: 10px; }
  .timeline .motion-label { display: none; }
  .course-page .course-art {
    z-index: 5; top: var(--header-bottom); left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right)); bottom: auto;
    height: var(--scene-height); background: var(--paper);
  }
  .course-art::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter)); background: var(--paper); border-bottom: 1px solid var(--line); }
  .course-art canvas { inset: 30px 0 48px; height: calc(100% - 78px); }
  .art-label { top: 8px; font-size: 12px; line-height: 1.4; gap: 10px; letter-spacing: 0; }
  .art-caption { min-height: 44px; padding: 0; border: 0; gap: 12px; bottom: 0; }
  .art-caption > span { font-size: 11px; line-height: 1.5; max-width: calc(100% - 56px); }
  .course-art .field-pause { flex-shrink: 0; width: 44px; height: 44px; }
  .course-main, .course-footer { width: auto; margin-left: max(var(--gutter), env(safe-area-inset-left)); margin-right: max(var(--gutter), env(safe-area-inset-right)); }
  .course-main { padding-top: var(--content-top); }
  .course-page .course-hero { min-height: 0; padding: 32px 0 40px; display: block; }
  .course-hero h1 { font-size: clamp(2.75rem, 12vw, 4.6rem); line-height: 1.04; }
  .hero-description { font-size: 17px; line-height: 1.7; margin-block: 24px; }
  .hero-meta { flex-wrap: wrap; font-size: 12px; gap: 10px 16px; }
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 26px; }
  .primary-action { width: 100%; max-width: 100%; gap: 16px; padding: 16px 18px; min-height: 54px; font-size: 14px; }
  .primary-action > span { flex-shrink: 0; }
  .secondary-action { align-self: flex-start; min-height: 44px; font-size: 14px; }
  .section-heading { gap: 12px; }
  .section-heading h2 { font-size: 13px; line-height: 1.7; }
  .catalog-section, .course-page .course-section, .learning-principles { min-height: 0; padding: 32px 0 40px; }
  .featured-course, .planned-course { min-height: 0; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 36px 0; }
  .featured-course h3 { font-size: clamp(44px, 12vw, 68px); }
  .course-overview { min-width: 0; padding-top: 8px; }
  .course-overview > p, .planned-course > p { font-size: 16px; line-height: 1.7; }
  .planned-course h3 { font-size: clamp(30px, 8.8vw, 48px); }
  .planned-state { white-space: normal; line-height: 1.6; }
  .course-tags { gap: 8px 14px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 0; }
  .principles h3 { font-size: 23px; }
  .principles p { font-size: 16px; line-height: 1.7; }
  .course-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-block: 28px; }
  .course-numbers > div { min-width: 0; gap: 8px; }
  .course-numbers strong { font-size: clamp(36px, 10vw, 54px); }
  .course-numbers span { font-size: 12px; line-height: 1.6; }
  .format-intro, .program-heading, .start-course { display: block; }
  .format-intro h2, .program-heading h2, .start-course h2 { font-size: clamp(32px, 9vw, 52px); line-height: 1.1; }
  .format-intro > p, .program-heading p, .start-course p:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
  .track summary { grid-template-columns: 22px minmax(0, 1fr) 26px; gap: 8px 12px; min-height: 72px; padding: 24px 0; }
  .track summary h3 { font-size: 21px; line-height: 1.3; }
  .track-count { grid-row: 2; grid-column: 2; font-size: 12px; line-height: 1.6; }
  .track-description { margin-left: 0; font-size: 16px; }
  .module-list { grid-template-columns: minmax(0, 1fr); padding-left: 0; padding-bottom: 24px; }
  .module-list li { min-width: 0; gap: 12px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
  .module-list li span { flex: 0 0 22px; }
  .start-course { min-height: 0; padding: 32px 0 44px; }
  .course-footer { gap: 18px; padding: 26px 0 calc(24px + env(safe-area-inset-bottom)); }
  .footer-links { flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .course-footer .sound-controls { width: 100%; gap: 16px; }
  #catalog, #format, #program, #start, .track { scroll-margin-top: var(--content-top); }
}

/* A landscape phone needs reading space beside the scene, not a narrow slit. */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1100px) {
  :root { --scene-height: calc(100svh - var(--header-bottom) - var(--controls-height) - 16px); --content-top: calc(var(--header-bottom) + 12px); }
  .home-page .scene { clip-path: inset(var(--header-bottom) 0 calc(100% - var(--header-bottom) - var(--scene-height)) 65%); }
  .home-page .scene-window { left: 65%; }
  .home-page .field-meta { left: 65%; }
  .home-page .field-meta > span:first-child { display: none; }
  .home-page .copy { width: 62%; }
  .home-page .chapter { min-height: calc(100svh - var(--content-top) - var(--controls-height)); padding-top: 22px; padding-bottom: 32px; }
  .home-page h1 { font-size: clamp(40px, 6vw, 58px); }
  .home-page h2, .home-page .chapter-experience h2 { font-size: clamp(32px, 5vw, 44px); }
  .home-page .timeline { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; padding-top: 4px; }
  .timeline .chapters-nav { grid-column: 1; grid-row: 1; }
  .timeline .chapters-nav a { min-height: 44px; }
  .timeline .sound-controls { grid-column: 2; grid-row: 1; }
  .timeline .volume-control { display: none; }
  .timeline .motion-toggle { grid-column: 3; grid-row: 1; }
  .course-page .course-art { left: 65%; }
  .course-page .course-art::before { inset: 0; }
  .course-art .art-label > span:first-child { display: none; }
  .course-art .art-label { justify-content: flex-end; }
  .course-art .art-caption { align-items: center; }
  .course-main, .course-footer { width: calc(62% - var(--gutter)); margin-right: 0; }
  .course-hero h1 { font-size: clamp(40px, 6vw, 58px); }
  .format-intro h2, .program-heading h2, .start-course h2 { font-size: 36px; }
}
@media (hover: none) { .primary-action:hover { transform: none; } .project:hover { padding-left: 0; } }