/* Small refinements to the original exhibition composition. */
:root { --muted: #4e5b6c; --header-height: 88px; }
body { font-size: 16px; overflow-x: clip; }
body.menu-open { overflow: hidden; }
img { height: auto; }
main, section, figure, .section-heading > *, .structure-grid > *, .materials-grid > * { min-width: 0; }
.desktop-nav { font-size: 14px; gap: 24px; }
.desktop-nav a[aria-current]::after { width: 100%; }
.eyebrow { font-size: 12px; letter-spacing: .08em; }
.hero-description { font-size: 16px; color: #cad5e4; }
.hero-eyebrow { color: #d0d9e5; }
.text-link { font-size: 14px; }
.hero-bottom { font-size: 12px; color: #c3cfdf; }
.section-index a { font-size: 11px; height: 28px; }
.section-number { color: #617082; }
.intro { font-size: 18px; line-height: 1.7; }
.body-copy { font-size: 16px; line-height: 1.85; }
.micro-label, .diagram-caption { font-size: 12px; color: #5b687a; line-height: 1.65; }
.section-heading > .intro { max-width: 390px; }
.form-label { font-size: 13px; }
.archive-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.archive-photo img { position: absolute; left: 50%; top: 50%; width: 75%; height: 133.3333%; max-width: none; object-fit: contain; transform: translate(-50%, -50%) rotate(-90deg); }
.archive figcaption { font-size: 12px; line-height: 1.5; gap: 16px; color: #5b687a; }
.form-insight > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }
.structure-copy > .body-copy { max-width: 46ch; }
.structure-photo img { width: 100%; height: clamp(560px, 56vw, 790px); min-height: 0; max-height: none; object-fit: cover; }
.structure-photo figcaption { font-size: 12px; line-height: 1.6; }
.structure-controls button { font-size: 12px; min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
.structure-controls button span { font-size: 11px; width: 20px; height: 20px; }
.structure-detail { min-height: 165px; }
.structure-detail h3 { font-size: 17px; line-height: 1.5; }
.structure-detail p { font-size: 15px; line-height: 1.8; }
.structure-glimpses { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 48px; }
.structure-glimpses img { width: 100%; height: auto; }
.structure-glimpses figcaption { font-size: 12px; line-height: 1.6; color: #5b687a; margin-top: 13px; }
.flow-section .intro { font-size: 17px; color: #cad5e4; max-width: 380px; }
.flow-section .section-number { color: #b9c9dc; }
.svg-label { fill: #d6e1ee; font-size: 14px; }
.svg-note { fill: #c3d0e0; font-size: 14px; }
.flow-diagram .diagram-caption, .flow-footer .micro-label { color: #c0d0e2; }
.flow-footnote { font-size: 14px; color: #c5d2e3; max-width: 260px; }
.material-photo img { width: 100%; height: clamp(440px, 44vw, 650px); object-fit: cover; }
.material-photo figcaption { font-size: 12px; line-height: 1.6; }
.material-photo figcaption span { color: #617084; }
.material-list p { font-size: 14px; line-height: 1.6; }
.material-list span { font-size: 12px; }
.experience-caption .eyebrow { color: #c6d5e7; }
.experience-caption > span:last-child { font-size: 14px; color: #c5d3e4; }
.context-list { font-size: 13px; color: #516071; }
.brand-section { min-height: 840px; }
.brand-logo { width: 136px; height: 136px; margin-bottom: 28px; }
.brand-logo img { width: 100%; height: auto; }
.brand-content > .eyebrow { font-size: 12px; color: #c7d4e5; }
.brand-product { font-size: 17px; color: #cad6e6; }
.brand-contact { font-size: 14px; gap: 17px; margin-top: 42px; }
.brand-contact a { overflow-wrap: anywhere; }
.site-footer { font-size: 12px; color: #becde0; }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: 15px; padding: 10px 0; font-size: 14px; min-height: 44px; }
  .menu-lines { width: 19px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .mobile-menu:not([hidden]) { display: flex; position: fixed; inset: var(--header-height) 0 auto; z-index: 29; background: var(--paper); color: var(--ink); padding: 16px var(--gutter) 25px; flex-direction: column; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; box-shadow: 0 24px 40px #111e3928; }
  .mobile-menu a { display: flex; align-items: center; gap: 20px; padding: 14px 0; font-size: 16px; line-height: 1.5; border-bottom: 1px solid var(--line); }
  .mobile-menu a span { font-size: 12px; color: #617084; }
  .mobile-menu a[aria-current] { font-weight: 600; }
  .section-index { display: none; }
  .structure-copy > .body-copy { font-size: 16px; }
}
@media (max-width: 760px) {
  :root { --header-height: 68px; }
  .site-header { height: var(--header-height); }
  .wordmark { font-size: 16px; }
  .menu-toggle { font-size: 13px; }
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; }
  .hero-copy { order: 1; width: 100%; padding: 120px var(--gutter) 0; pointer-events: auto; }
  .hero h1 { font-size: clamp(48px, 10.5vw, 72px); line-height: 1.03; }
  .hero-eyebrow { font-size: 11px; gap: 10px; margin-bottom: 27px; }
  .hero-description { font-size: 16px; line-height: 1.75; margin-top: 25px; }
  .hero-link { font-size: 14px; margin-top: 20px; }
  .hero-photo { order: 2; position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: clamp(340px, 105vw, 500px); margin-top: 22px; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 73%; }
  .hero-photo:after { background: linear-gradient(180deg, var(--navy-dark), transparent 25%), linear-gradient(0deg, var(--navy-dark), transparent 21%); }
  .hero-bottom { order: 3; position: static; margin: 0 var(--gutter) 27px; font-size: 12px; padding-top: 18px; flex-wrap: wrap; gap: 14px; align-self: stretch; }
  .hero-count { margin-left: 16px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .section h2 { font-size: clamp(38px, 8.7vw, 48px); line-height: 1.12; }
  .section-heading > .intro, .intro { font-size: 18px; max-width: 100%; line-height: 1.7; }
  .body-copy { font-size: 16px; line-height: 1.85; }
  .eyebrow { font-size: 11px; }
  .form-option { padding: 17px 14px; }
  .form-option svg { height: 135px; }
  .form-label { font-size: 12px; line-height: 1.5; gap: 8px; }
  .studies-caption { font-size: 12px; }
  .exploration-bottom { gap: 30px; }
  .archive-photo { height: auto; aspect-ratio: 4 / 3; }
  .archive figcaption { font-size: 11px; gap: 10px; }
  .form-insight > p:not(.eyebrow) { font-size: 16px; }
  .structure-copy > .intro { font-size: 18px; }
  .structure-copy > .body-copy { font-size: 16px; }
  .structure-photo img { height: clamp(400px, 124vw, 570px); min-height: 0; object-position: 50% 54%; }
  .structure-photo figcaption { font-size: 12px; }
  .structure-drawing .diagram-caption, .diagram-caption { font-size: 12px; }
  .structure-controls { gap: 4px; }
  .structure-controls button { font-size: 12px; padding: 14px 0; }
  .structure-controls button span { width: 20px; height: 20px; font-size: 11px; margin-right: 5px; }
  .structure-detail { min-height: 165px; }
  .structure-detail h3 { font-size: 17px; }
  .structure-detail p { font-size: 15px; }
  .structure-glimpses { grid-template-columns: minmax(0,1fr); gap: 26px; margin-top: 32px; }
  .flow-section .intro { font-size: 17px; max-width: 100%; }
  .flow-mobile > span { font-size: 16px; line-height: 1.5; color: #d1dfed; }
  .flow-mobile > i { font-size: 22px; }
  .flow-diagram .diagram-caption { font-size: 12px; }
  .flow-footnote { font-size: 15px; max-width: 100%; }
  .materials-copy > .body-copy { font-size: 16px; }
  .materials-copy .intro { font-size: 18px; }
  .material-photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
  .material-photo figcaption { font-size: 12px; flex-wrap: wrap; gap: 5px 16px; }
  .material-list p { font-size: 14px; }
  .experience-panel { display: flex; flex-direction: column; position: relative; height: auto; min-height: 0; max-height: none; padding: 28px 24px 0; gap: 22px; }
  .experience-caption { order: 1; position: static; transform: none; width: 100%; }
  .experience-caption .eyebrow { font-size: 11px; }
  .experience-caption p { font-size: 36px; line-height: 1.15; margin: 20px 0; }
  .experience-caption > span:last-child { font-size: 14px; }
  .experience-panel > img { order: 2; position: static; width: calc(100% + 48px); max-width: none; height: clamp(390px, 120vw, 570px); object-fit: cover; object-position: 50% 53%; align-self: center; }
  .experience-panel:after { display: none; }
  .everyday-intro .intro { font-size: 18px; }
  .everyday-intro .body-copy { font-size: 16px; }
  .everyday-context > p { font-size: 23px; line-height: 1.5; }
  .context-list { font-size: 14px; gap: 14px 22px; }
  .brand-section { display: flex; flex-direction: column; min-height: 0; padding: 65px var(--gutter) 28px; gap: 30px; }
  .brand-content { order: 1; position: relative; width: 100%; }
  .brand-logo { width: 126px; height: 126px; margin-bottom: 26px; }
  .brand-content > .eyebrow { font-size: 12px; line-height: 1.7; }
  .brand-content h2 { font-size: clamp(32px, 8.2vw, 48px); }
  .brand-product { font-size: 17px; }
  .brand-contact { font-size: 14px; gap: 18px; margin-top: 32px; }
  .brand-photo { order: 2; position: relative; top: auto; right: auto; bottom: auto; width: calc(100% + var(--gutter) * 2); height: clamp(390px, 120vw, 530px); align-self: center; }
  .brand-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }
  .brand-photo:after { background: linear-gradient(180deg, var(--navy-dark), transparent 28%), linear-gradient(0deg, var(--navy-dark), transparent 23%); }
  .site-footer { order: 3; position: static; width: 100%; font-size: 12px; gap: 16px; flex-wrap: wrap; padding-top: 20px; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 15px; }
  .hero h1 { font-size: 46px; }
  .form-label { font-size: 11px; }
  .structure-controls button { font-size: 11px; }
  .brand-content h2 { font-size: 30px; }
}