/* Mobile is a composed reading experience, with the same lab identity. */
:root {
  --border: oklch(.58 .02 280);
  --header-height: 96px;
}
html { scroll-padding-top: calc(var(--header-height) + 20px); }
.site-header.scrolled { --header-height: 78px; }
html.menu-open { overflow-y: hidden; }
:where(h1,h2,h3,h4,h5,p,a,button,summary) { overflow-wrap: break-word; }
:where(.project-copy,.dashboard-heading>div,.contact-email,.widget-head,.capability-detail) { min-width: 0; }
.fallback-nav { display: none; }
.mobile-menu {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: max(24px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  border: 0;
  color: var(--text);
  overscroll-behavior: contain;
}
.mobile-menu::backdrop { background: var(--bg); }
.mobile-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.mobile-menu-heading h2 { font-size: clamp(24px,6vw,36px); line-height: 1.2; }
.mobile-menu-heading button { flex-shrink: 0; border: 1px solid var(--border); border-radius: 4px; }
.mobile-menu a { gap: 16px; font-size: clamp(20px,5.5vw,28px); }
.mobile-menu a span { flex-shrink: 0; }
.mobile-menu-note { margin-top: 32px; font-size: 16px; color: var(--muted); }
.mobile-menu :focus-visible { outline-offset: 4px; }
#train-instant { margin-top: 10px; text-decoration: underline; text-underline-offset: 4px; }
.text-link,.subtle-link,.source-note a,.evidence a,#capability-projects a { text-underline-offset: 4px; }
.subtle-link,.source-note a,.evidence a,#capability-projects a { text-decoration: underline; }
.chess-move-form { display: flex; width: 100%; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
.chess-move-form label { flex: 1; font-size: 14px; color: var(--muted); }
.chess-move-form select { display: block; width: 100%; min-height: 44px; margin-top: 6px; background: var(--raised); color: var(--text); border: 1px solid var(--border); padding: 8px 12px; border-radius: 4px; font: 16px/1.4 var(--body); }
.chess-move-form button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 4px; font-size: 16px; }
.chess-move-form select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.lab-dialog { overscroll-behavior: contain; }

@media screen and (max-width: 800px) {
  :root { --header-height: calc(64px + env(safe-area-inset-top)); --gutter: clamp(20px,5vw,32px); }
  .site-header,.site-header.scrolled { height: var(--header-height); gap: 12px; padding-top: env(safe-area-inset-top); padding-left: max(var(--gutter),env(safe-area-inset-left)); padding-right: max(var(--gutter),env(safe-area-inset-right)); }
  .site-header.scrolled { --header-height: calc(64px + env(safe-area-inset-top)); }
  .identity { gap: 9px; font-size: 15px; min-height: 44px; }
  .brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
  .header-actions { gap: 12px; }
  .contact-link { min-height: 44px; align-items: center; gap: 10px; font-size: 14px; border: 0; }
  .menu-toggle { border: 1px solid var(--border); border-radius: 4px; }
  .hero { padding-top: var(--header-height); }
  .hero .hero-stage { min-height: 0; padding-top: 24px; padding-bottom: 20px; }
  .hero .hero-topline { font-size: 10px; letter-spacing: .045em; }
  .hero .hero-copy { width: 100%; max-width: none; margin: 0; padding: 28px 0 0; }
  .hero .hero-band { padding: 0; }
  .hero .intro-name { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(38px,10.8vw,68px); line-height: 1.08; }
  .hero .hero-description { font-size: 18px; line-height: 1.55; max-width: 38ch; margin: 20px 0 24px; }
  .hero .hero-actions { flex-wrap: wrap; gap: 12px 24px; }
  .hero .hero-actions .button { min-height: 52px; font-size: 12px; padding: 14px 18px; gap: 20px; white-space: normal; text-align: left; }
  .hero .hero-actions .text-link { font-size: 16px; min-height: 48px; gap: 12px; }
  .hero .core-visual { position: relative; align-self: center; flex: none; width: min(100%,420px); max-width: 100%; height: clamp(220px,63vw,300px); aspect-ratio: auto; top: auto; right: auto; bottom: auto; margin: -8px 0 -12px; transform: none; opacity: 1; order: 3; }
  .hero .hero-footer { order: 4; margin: 0; padding-top: 12px; gap: 16px; }
  .hero .core-label { display: none; }
  .hero .scroll-cue { font: 11px/1.5 var(--body); letter-spacing: 0; }
  .hero .diagnostic-trigger { font: 12px/1.5 var(--body); }
  .hero .scroll-line { height: 20px; }
  .phase-track { display: none; }
  .work-section { padding-top: 48px; }
  .section-intro { display: block; margin-bottom: 28px; }
  .section-intro h2 { font-size: clamp(36px,8vw,54px); line-height: 1.15; }
  .section-intro>p { font-size: 18px; max-width: 40ch; margin-top: 18px; }
  .section-intro>p br { display: none; }
  .section-kicker { font-size: 15px; margin-bottom: 18px; }
  .project-index { margin-bottom: 40px; }
  .project-index a { min-height: 96px; padding: 16px 10px 16px 0; gap: 10px; }
  .project-index a+a { padding-left: 14px; }
  .project-index a:nth-child(3) { padding-left: 0; }
  .project-index a>span:nth-child(2) { font-size: 16px; }
  .project-index small { font-size: 13px; line-height: 1.4; max-width: none; }
  .index-symbol { font-size: 27px; flex-shrink: 0; }
  .index-arrow { display: none; }
  .project { margin-bottom: 56px; }
  .project-caption { flex-wrap: wrap; gap: 6px 16px; font-size: 12px; line-height: 1.65; letter-spacing: 0; padding-bottom: 16px; }
  .project-caption>span:last-child { max-width: 100%; text-align: left; color: var(--muted); }
  .project h3,.dashboard-heading h3 { font-size: clamp(36px,8.5vw,52px); line-height: 1.15; }
  .project-nags h3 { font-size: clamp(58px,14vw,80px); }
  .project-title-line,.project-subtitle { font-size: 16px; }
  .project-outcome,.nags-layout .project-outcome { font-size: 22px; line-height: 1.45; }
  .project-body,.nags-layout .project-body { font-size: 18px; line-height: 1.65; }
  .project-status { font: 12px/1.5 var(--body); letter-spacing: 0; }
  .nags-layout { padding: 28px 20px; gap: 28px; }
  .nags-layout .evidence { gap: 14px; }
  .nags-layout .evidence strong { font-size: 34px; }
  .evidence>span { font: 14px/1.5 var(--body); }
  .evidence a { font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
  .nags-layout .source-note,.source-note { font-size: 14px; line-height: 1.6; }
  .project-links { gap: 8px 24px; }
  .text-link,.subtle-link { min-height: 44px; font-size: 16px; display: inline-flex; align-items: center; }
  .chess-instrument { padding: 18px 12px 12px; box-shadow: none; }
  .instrument-top { font: 12px/1.6 var(--body); flex-wrap: wrap; gap: 6px 16px; letter-spacing: 0; }
  .chess-stage { max-width: 400px; padding-left: 16px; margin-top: 20px; transform: none; }
  .chess-square { font-size: clamp(24px,7vw,40px); }
  .board-coordinates,.board-files { font-size: 11px; }
  .instrument-bottom { flex-wrap: wrap; gap: 8px 16px; }
  .instrument-bottom p { font-size: 16px; max-width: none; }
  .quiet-button { font-size: 15px; min-height: 44px; }
  .instrument-bottom .quiet-button { font-size: 15px; }
  .machinery summary { font-size: 17px; min-height: 60px; }
  .machinery-body p,.machinery-body .small-copy { font-size: 17px; line-height: 1.65; max-width: 68ch; }
  .pipeline { font-size: 12px; gap: 10px; letter-spacing: 0; }
  .blackjack-layout { padding-top: 12px; gap: 20px; }
  .policy-instrument { padding: 12px 0; }
  .playing-cards { height: 280px; }
  .training-control { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 20px; }
  .training-control .button { font: 16px/1.5 var(--body); min-height: 52px; }
  .training-control progress { height: 6px; }
  .training-control p { font: 13px/1.5 var(--body); margin-top: 8px; color: var(--muted); }
  .demo-note,.research-note { font-size: 15px; line-height: 1.6; }
  .compact { margin-top: 24px; }
  .dashboard-heading { gap: 18px; padding-top: 16px; }
  .dashboard-stage { padding: 0; background: none; overflow: visible; }
  .dashboard-demo { padding: 20px 14px; transform: none; }
  .dashboard-toolbar { flex-wrap: wrap; gap: 8px 16px; }
  .dashboard-greeting { margin: 20px 0; }
  .dashboard-greeting h4 { font-size: 23px; line-height: 1.3; }
  .dashboard-greeting p { font-size: 16px; max-width: 40ch; }
  .demo-badge { display: none; }
  .widget h5 { font-size: 16px; }
  .widget-grid { grid-template-columns: 1fr; gap: 16px; }
  .notes-widget { grid-column: auto; }
  .focus-widget { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
  .focus-widget .widget-head { grid-column: 1/-1; }
  .focus-clock { width: 154px; margin: 0 auto; }
  .focus-clock small { font: 10px/1.4 var(--body); letter-spacing: 0; }
  .focus-start,.tasks-widget label { font-size: 16px; }
  .tasks-widget label { min-height: 56px; line-height: 1.5; }
  .tasks-widget input { width: 22px; height: 22px; }
  .widget-note,.note-foot { font-size: 14px; }
  .dashboard-evidence { font-size: 14px; line-height: 1.5; gap: 14px; }
  .threshold-instrument { padding: 22px 18px; background: var(--surface); }
  .threshold-instrument h4 { font-size: 26px; margin-top: 22px; }
  .threshold-instrument>p:not(.demo-note):not(.research-note):not(.sr-only) { font-size: 17px; }
  .threshold-chart { height: 180px; }
  .chart-axis { font: 12px/1.5 var(--body); letter-spacing: 0; }
  .range-label { font-size: 17px; }
  input[type=range] { min-height: 44px; margin: 12px 0; }
  .threshold-readouts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .threshold-readouts span { font-size: 13px; }
  .threshold-readouts strong { font-size: clamp(23px,6vw,32px); }
  .orbit-row small { font-size: 17px; line-height: 1.55; }
  .orbit-heading p,.capability-detail>p { font-size: 18px; }
  .capabilities-section { padding-top: 48px; padding-bottom: 48px; }
  .capability-intro h2 { font-size: clamp(34px,8.5vw,50px); }
  .capability-intro>p:last-child { font-size: 18px; }
  .capability { font-size: 18px; }
  .capability>span:last-child { opacity: 1; transform: none; }
  .capability-diagram span { font: 12px/1.5 var(--body); letter-spacing: 0; }
  #capability-projects { gap: 12px 24px; font-size: 16px; }
  #capability-projects a { display: inline-flex; min-height: 44px; align-items: center; }
  .about-section { display: flex; flex-direction: column; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .about-copy { order: 0; width: 100%; }
  .about-art { order: 1; width: 220px; max-width: 100%; }
  .about-code,.about-coordinate { font: 11px/1.5 var(--body); }
  .about-copy h2 { font-size: 44px; }
  .about-copy>p:not(.section-kicker):not(.about-lead) { font-size: 18px; }
  .contact-prelude { font: 12px/1.5 var(--body); letter-spacing: 0; }
  .contact-section h2 { font-size: clamp(36px,9vw,56px); line-height: 1.15; }
  .contact-section h2 br,.contact-bottom>p br { display: none; }
  .contact-bottom>p { font-size: 18px; max-width: 38ch; }
  .contact-email { column-gap: 10px; }
  .contact-email>span:first-child { font-size: 16px; }
  .contact-email strong { font-size: clamp(18px,5.3vw,26px); overflow-wrap: anywhere; }
  .contact-tools { gap: 0 24px; }
  .contact-tools .quiet-button { font-size: 16px; }
  .site-footer { padding-bottom: max(20px,env(safe-area-inset-bottom)); font-size: 14px; }
  .site-footer .quiet-button,.console-launch { font-size: 14px; }
  .site-footer>div { flex-wrap: wrap; gap: 0 20px; }
  .console-launch kbd { display: none; }
  .lab-dialog { max-height: calc(100dvh - 24px); width: calc(100% - 24px); }
  .dialog-header { padding: 12px 16px; }
  .dialog-header .mono { font: 14px/1.5 var(--body); letter-spacing: 0; }
  .console-output { padding: 18px 16px; font-size: 13px; max-height: 45dvh; }
  #console-form { margin: 0 16px; flex-wrap: wrap; }
  #console-form label { width: 100%; font-size: 13px; }
  #console-input { font-size: 16px; min-height: 44px; }
  .console-footer { padding: 12px 16px; font: 11px/1.5 var(--body); gap: 16px; }
  .arcade-controls { padding: 16px 12px; flex-wrap: wrap; }
  html:not(.js) .fallback-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: calc(var(--header-height) + 12px); }
  .fallback-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; text-decoration: underline; }
  html:not(.js) .hero { padding-top: 0; }
}

@media screen and (max-width: 380px) {
  .identity { font-size: 14px; }
  .header-actions { gap: 8px; }
  .contact-link { font-size: 13px; gap: 6px; }
  .hero .hero-actions .button { width: 100%; justify-content: space-between; }
  .hero .hero-actions { gap: 4px 20px; }
  .project-index { grid-template-columns: 1fr; }
  .project-index a,.project-index a+a { padding: 14px 0; min-height: 72px; border-left: 0; }
  .project-index a+a { border-top: 1px solid var(--line); }
  .project-index small { margin-top: 0; }
  .focus-widget { grid-template-columns: 1fr; }
  .focus-widget .widget-head { grid-column: auto; }
  .dashboard-evidence { grid-template-columns: 1fr; }
  .evidence a { margin-left: 0; }
}

/* Static hero on tablets, phones in landscape, and reduced-motion desktops. */
@media screen and (orientation: portrait) and (min-width: 801px) and (max-width: 1024px), screen and (orientation: portrait) and (pointer: coarse) and (min-width: 801px), screen and (orientation: landscape) and (pointer: coarse) and (max-height: 560px) and (min-width: 801px) {
  .hero .hero-stage { min-height: 0; }
  .hero .hero-copy { width: 100%; padding: 40px 0 24px; }
  .hero .hero-band { padding: 0; }
  .hero .core-visual { position: relative; width: min(65%,460px); align-self: center; top: auto; right: auto; bottom: auto; transform: none; order: 3; }
  .hero .core-label { display: none; }
  .hero .hero-footer { order: 4; }
}
@media screen and (max-width: 800px) and (orientation: landscape) {
  .hero .hero-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.65fr); column-gap: 24px; }
  .hero .hero-topline,.hero .hero-footer { grid-column: 1/-1; }
  .hero .hero-copy { padding: 24px 0; }
  .hero .core-visual { grid-column: 2; grid-row: 2; margin: 0; }
  .hero h1 { font-size: clamp(32px,5.5vw,44px); }
  .hero .hero-actions .button { width: auto; }
}
@media (pointer: coarse) {
  button:not(.chess-square) { min-width: 44px; min-height: 44px; }
  :where(.quiet-button,.subtle-link,.text-link,.evidence a,.contact-link,.console-launch,#capability-projects a) { min-height: 44px; }
  .training-control .button { -webkit-user-select: none; user-select: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-delay: 0s!important; }
}
@media (forced-colors: active) {
  :where(button,a,input,select,summary):focus-visible { outline: 3px solid Highlight; }
  .button,.widget,.chess-square,.sample-bar { border: 1px solid CanvasText; }
  .chess-square.selected,.chess-square.solved { outline: 3px solid Highlight; outline-offset: -3px; }
  .chess-square.possible::after { background: Highlight; forced-color-adjust: none; }
}
@media print { .fallback-nav,.mobile-menu,.chess-move-form,#train-instant { display: none!important; } }