/* Shared responsive refinements. Keep each page's established art direction. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-wrap: anywhere; }
button, input, textarea, select { max-inline-size: 100%; }
button, a, input, textarea { touch-action: manipulation; }
fieldset, legend, label, nav, li, dd { min-inline-size: 0; }
fieldset, legend { max-inline-size: 100%; }
dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
dialog input, dialog textarea { font-size: max(1rem, 16px); font-weight: 400; }
.site-nav .wordmark { flex-shrink: 0; }
.site-nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-contact { min-height: 44px; }
.section-shell, .shell { padding-left: max(6vw, env(safe-area-inset-left), calc((100% - 1320px) / 2)); padding-right: max(6vw, env(safe-area-inset-right), calc((100% - 1320px) / 2)); }
.footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.footer .wordmark { font-size: min(3rem, 9vw); }

/* Text stays in normal flow, even on short windows or with enlarged fonts. */
[data-page="main"] .hero { height: auto; min-height: min(100svh, 1120px); max-height: none; padding: clamp(160px, 29svh, 325px) max(8vw, calc((100% - 1320px) / 2), env(safe-area-inset-left)) 130px; }
[data-page="main"] .hero-copy { position: relative; left: auto; top: auto; max-width: 1050px; }
[data-page="main"] .hero-next { left: max(8vw, calc((100% - 1320px) / 2), env(safe-area-inset-left)); }
[data-page="main"] .problem-split, [data-page="main"] .thesis-split { max-width: 1600px; margin-inline: auto; }
[data-page="main"] .problem-visual { min-height: 0; aspect-ratio: 6 / 5; align-self: center; width: 100%; }
[data-page="main"] .problem-visual video { object-position: center top; }
[data-page="main"] .data-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-page="main"] .footer-bottom { flex-wrap: wrap; align-items: center; }
[data-page="main"] .footer-bottom a { display: inline-flex; min-height: 44px; align-items: center; }

/* The comparison grows with its content, not with a fixed blank panel. */
[data-page="v2"] .menu-toggle, [data-page="v2"] .mobile-nav { display: none; }
[data-page="v2"] .hero { padding-left: max(var(--gutter), env(safe-area-inset-left), calc((100% - 1320px) / 2)); padding-right: max(var(--gutter), env(safe-area-inset-right), calc((100% - 1320px) / 2)); }
[data-page="v2"] .hero-foot { position: relative; bottom: auto; left: auto; right: auto; flex-wrap: wrap; margin-top: 64px; }
[data-page="v2"] .hero { padding-bottom: 28px; }
[data-page="v2"] .example-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
[data-page="v2"] .work-scene { min-height: 0; aspect-ratio: 4 / 5; }
[data-page="v2"] .annotation { min-height: 0; }
[data-page="v2"] .annotation-toggle { flex-wrap: wrap; border-radius: 24px; }
[data-page="v2"] .annotation-toggle button { white-space: normal; flex: 1 1 auto; min-width: 0; }
[data-page="v2"] .expert-fields > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
[data-page="v2"] .example-heading > * { min-width: 0; }
[data-page="portal"] { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
[data-page="portal"] header { padding-top: max(22px, env(safe-area-inset-top)); }
[data-page="portal"] fieldset { width: 100%; min-width: 0; }
[data-page="portal"] footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1100px) and (min-width: 961px) {
  [data-page="main"] .site-nav { gap: 14px; padding-left: 18px; }
  [data-page="main"] .site-nav nav { gap: 18px; }
  [data-page="main"] .nav-contact { flex-shrink: 0; }
}
@media (max-width: 960px) {
  .section-shell, .shell { padding-left: max(clamp(20px, 5.3vw, 42px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 5.3vw, 42px), env(safe-area-inset-right)); }
  .site-nav { top: calc(12px + env(safe-area-inset-top)); width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); gap: 8px; flex-wrap: wrap; height: auto; }
  [data-page="v2"] .site-nav { min-height: 60px; padding: 7px 7px 7px 16px; }
  [data-page="v2"] .site-nav .wordmark { margin-right: auto; font-size: 1.0625rem; }
  [data-page="v2"] .site-nav nav { display: none; }
  [data-page="v2"] .nav-contact { flex-shrink: 0; font-size: .875rem; padding: 10px 13px; }
  [data-page="v2"] .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; }
  [data-page="v2"] .menu-toggle span { width: 19px; height: 1.5px; background: currentColor; }
  [data-page="v2"] .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  [data-page="v2"] .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  [data-page="v2"] .mobile-nav:not([hidden]) { display: grid; position: absolute; z-index: 11; top: calc(86px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); padding: 12px 22px; border: 1px solid #dad5c8; border-radius: 20px; background: var(--paper); color: var(--ink); max-height: calc(100dvh - 110px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 10px 35px #23241c22; }
  [data-page="v2"] .mobile-nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); padding-block: 12px; font-size: 1rem; font-weight: 600; }
  [data-page="v2"] .mobile-nav a:last-child { border: 0; }
  [data-page="v2"] .hero { min-height: min(100svh, 850px); padding-top: max(145px, calc(100px + env(safe-area-inset-top))); }
  [data-page="v2"] .hero h1 { font-size: clamp(2.5rem, 7.5vw, 5rem); }
  [data-page="v2"] .intro, [data-page="v2"] .approach, [data-page="v2"] .pilot { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  [data-page="v2"] .example-heading { display: block; }
  [data-page="v2"] .example-heading > p { margin-top: 20px; max-width: 45ch; }
  [data-page="v2"] .example-spread { grid-template-columns: minmax(0, 1fr); }
  [data-page="v2"] .work-scene { aspect-ratio: 4 / 3; }
  [data-page="v2"] .annotation { padding: clamp(22px, 4vw, 36px); }
  [data-page="v2"] .pilot-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  [data-page="v2"] .pilot-paths article { padding-top: 20px; border-top: 1px solid #fffaf270; }
}
@media (max-width: 760px) {
  [data-page="main"] .hero { min-height: min(100svh, 920px); padding: max(136px, 23svh, calc(96px + env(safe-area-inset-top))) max(var(--mobile-gutter), env(safe-area-inset-left)) 120px; }
  [data-page="main"] .hero-next { left: max(var(--mobile-gutter), env(safe-area-inset-left)); }
  [data-page="main"] .hero-copy { max-width: 100%; }
  [data-page="main"] .problem-copy, [data-page="main"] .thesis-copy { padding-inline: max(var(--mobile-gutter), env(safe-area-inset-left)) max(var(--mobile-gutter), env(safe-area-inset-right)); }
  [data-page="main"] .problem-visual { flex-shrink: 0; }
  [data-page="v2"] .hero h1 { font-size: clamp(2.5rem, 8.6vw, 4rem); line-height: 1.04; }
  [data-page="v2"] .hero-foot { margin-top: 44px; gap: 8px; }
  [data-page="v2"] .footer-main { flex-wrap: wrap; }
}
@media (max-width: 500px) {
  [data-page="v2"] .site-nav .wordmark { font-size: 1rem; }
  [data-page="v2"] .nav-contact { font-size: .875rem; padding-inline: 11px; }
  [data-page="v2"] .expert-fields > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-page="v2"] .work-scene { aspect-ratio: 1; }
  [data-page="v2"] .pilot-paths { grid-template-columns: minmax(0, 1fr); }
  [data-page="v2"] .annotation-toggle { width: 100%; }
  [data-page="portal"] button, [data-page="portal"] .button { width: 100%; white-space: normal; }
}
@media (max-width: 360px) {
  [data-page="v2"] .site-nav { flex-wrap: wrap; border-radius: 26px; gap: 4px; }
  [data-page="v2"] .site-nav .nav-contact { order: 3; flex-basis: 100%; margin-top: 2px; }
  [data-page="v2"] .mobile-nav:not([hidden]) { top: calc(134px + env(safe-area-inset-top)); max-height: calc(100dvh - 158px - env(safe-area-inset-top)); }
  [data-page="v2"] .hero { padding-top: calc(165px + env(safe-area-inset-top)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  [data-page="main"] .hero { min-height: 100svh; padding-top: max(120px, calc(90px + env(safe-area-inset-top))); padding-bottom: 94px; }
  [data-page="main"] .hero-copy { max-width: 100%; }
  [data-page="v2"] .hero { min-height: 100svh; padding-top: max(120px, calc(90px + env(safe-area-inset-top))); }
  [data-page="v2"] .hero-foot { margin-top: 36px; }
}
@media (hover: none) { .button:hover, .pill:hover { transform: none; } }
@media (max-width: 960px) {
  .mobile-nav:not([hidden]), [data-page="v2"] .mobile-nav:not([hidden]) { top: calc(var(--nav-height, 60px) + 24px + env(safe-area-inset-top)); max-height: calc(100dvh - var(--nav-height, 60px) - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  [data-page="main"] .hero { padding-top: max(136px, 23svh, calc(var(--nav-height, 60px) + 60px + env(safe-area-inset-top))); }
  [data-page="v2"] .hero { padding-top: max(145px, calc(var(--nav-height, 60px) + 60px + env(safe-area-inset-top))); }
}