/* Shared editorial language for the four case studies. Load after page styles. */
:root {
  --paper: #f3ead5;
  --paper-light: #f8f3e7;
  --ink: #30291f;
  --copper: #59452e;
  --muted: #756650;
  --line: #59452e38;
  --gutter: clamp(24px, 5.5vw, 104px);
  --icon-action: 16px;
  --icon-process: 24px;
  --icon-feature: 40px;
  scroll-padding-top: 110px;
}
.site-header { height: 88px; padding-inline: var(--gutter); gap: 24px; }
.site-header .back-link { font: 15px/1.5 var(--body); gap: 12px; min-height: 44px; }
.site-header .back-link .direction-icon { display: inline-flex; }
.languages { font: 14px/1.5 var(--sans); gap: 14px; }
.languages button { min-height: 44px; padding: 10px 2px; }
.hero h1, html:lang(zh-CN) .hero h1 {
  font-family: var(--display);
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
html:lang(zh-CN) .hero h1 { line-height: 1.4; letter-spacing: .02em; }
.chapter > .section-heading h2, html:lang(zh-CN) .chapter > .section-heading h2,
#reflection.chapter > .section-heading h2 {
  font-family: var(--display);
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.18;
  letter-spacing: -.025em;
}
html:lang(zh-CN) .chapter > .section-heading h2,
html:lang(zh-CN) #reflection.chapter > .section-heading h2 { line-height: 1.45; letter-spacing: .025em; }
.hero .hero-summary { font-size: 18px; line-height: 1.75; margin-block: 26px; }
html:lang(zh-CN) .hero .hero-summary { font-size: 19px; line-height: 1.85; letter-spacing: .055em; }
.chapter > .chapter-intro .body-copy,
.intro-grid > .body-copy, .editorial-row > .body-copy, .reflection-grid > .body-copy { font-size: 18px; line-height: 1.85; }
html:lang(zh-CN) .chapter > .chapter-intro .body-copy,
html:lang(zh-CN) .intro-grid > .body-copy, html:lang(zh-CN) .editorial-row > .body-copy,
html:lang(zh-CN) .reflection-grid > .body-copy { font-size: 19px; line-height: 1.85; letter-spacing: .055em; }
.hero .text-link { min-height: 48px; padding-block: 14px; font-size: 16px; gap: 48px; }
.direction-icon > svg { display: block; width: var(--icon-action); height: var(--icon-action); flex: none; }
.direction-diagonal > svg { transform: rotate(-45deg); }
.chapter { padding-block: 120px; }
.section-heading > .section-index { margin-bottom: 28px; }
.chapter > .chapter-intro { margin-top: 32px; margin-bottom: 52px; }
.closing .next-project { font-size: clamp(38px, 4.5vw, 68px); line-height: 1.2; gap: 24px; padding-bottom: 26px; }
.closing .next-project .direction-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 48px; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 50%;
}
.chapter-nav:not(details) { height: 72px; gap: 24px; }
.chapter-nav:not(details) a { font: 14px/1.5 var(--sans); gap: 10px; }
.chapter-nav a:after { height: 2px; }
.lightbox-toolbar { min-height: 70px; gap: 20px; }
.lightbox-toolbar button { min-height: 44px; }

/* Continuous monochrome fog: one noise density field, no cells or blob sprites. */
.atmosphere {
  position: fixed; inset: 0; z-index: 0;
  display: block; overflow: hidden; pointer-events: none;
  background: none; contain: strict;
}
.atmosphere .case-cloud-field {
  display: block; width: 100%; height: 100%; filter: blur(3px);
}
.atmosphere .case-cloud-field[hidden] { display: none; }
.atmosphere[data-cloud-state="fallback"]::before {
  content: ''; position: absolute; inset: -32px;
  background: url('assets/case-cloud-fallback.svg?v=coherent-cloud-20260930') repeat;
  background-size: 1200px 900px; filter: blur(3px);
  animation: case-fog-fallback 40s linear infinite;
}
@keyframes case-fog-fallback {
  from { background-position: 0 0; }
  to { background-position: 1200px -900px; }
}
.atmosphere[data-paused]::before { animation-play-state: paused; }

@media (max-width: 1050px) and (min-width: 701px) {
  .hero h1, html:lang(zh-CN) .hero h1 { font-size: clamp(32px, 4.6vw, 48px); }
  .chapter .heading-clause, .chapter .cjk-clause { white-space: normal; }
}
@media (max-width: 700px) {
  :root { --gutter: 24px; --icon-feature: 32px; scroll-padding-top: 94px; }
  .site-header { height: 76px; padding-inline: 20px; gap: 8px; }
  .wordmark { font-size: 14px; }
  .site-header .back-link { font-size: 12px; gap: 5px; }
  .languages { gap: 7px; font-size: 14px; }
  .languages button { padding-inline: 0; }
  .hero h1, html:lang(zh-CN) .hero h1 { font-size: clamp(34px, 10vw, 40px); line-height: 1.15; }
  html:lang(zh-CN) .hero h1 { font-size: clamp(30px, 9.5vw, 38px); line-height: 1.42; letter-spacing: .02em; }
  .chapter > .section-heading h2, html:lang(zh-CN) .chapter > .section-heading h2,
  #reflection.chapter > .section-heading h2 { font-size: 34px; line-height: 1.25; }
  html:lang(zh-CN) .chapter > .section-heading h2,
  html:lang(zh-CN) #reflection.chapter > .section-heading h2 { line-height: 1.45; }
  .hero .hero-summary, html:lang(zh-CN) .hero .hero-summary { font-size: 17px; line-height: 1.8; margin-block: 20px; }
  .chapter > .chapter-intro .body-copy, html:lang(zh-CN) .chapter > .chapter-intro .body-copy,
  .intro-grid > .body-copy, .editorial-row > .body-copy, .reflection-grid > .body-copy,
  html:lang(zh-CN) .intro-grid > .body-copy, html:lang(zh-CN) .editorial-row > .body-copy,
  html:lang(zh-CN) .reflection-grid > .body-copy { font-size: 17px; line-height: 1.85; }
  .chapter { padding-block: 72px; }
  .chapter .heading-clause, .chapter .cjk-clause { white-space: normal; }
  .section-heading > .section-index { margin-bottom: 24px; }
  .chapter > .chapter-intro { margin-top: 28px; margin-bottom: 44px; }
  .closing .next-project { font-size: 36px; gap: 16px; }
  .closing .next-project .direction-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .chapter-nav:not(details) { height: 66px; }
  .chapter-nav:not(details) a { font-size: 14px; }
  .mobile-contents summary, details.chapter-nav > summary { min-height: 58px; padding-block: 18px; font: 14px/1.6 var(--sans); }
  .lightbox-toolbar { height: auto; padding: 12px; font-size: 12px; gap: 10px; }
  .lightbox-toolbar > div { gap: 16px; }
  .atmosphere .case-cloud-field { filter: blur(2px); }
  .atmosphere[data-cloud-state="fallback"]::before { filter: blur(2px); }

}
@media (prefers-reduced-motion: reduce) {
  .atmosphere::before { animation: none; }
}

/* Mobile reading layout: the same inset, type floor and wrapping on every case. */
@media (max-width: 700px) {
  .site-header { padding-inline: var(--gutter); }
  .site-header .wordmark, .languages, .languages button { flex-shrink: 0; white-space: nowrap; }
  .site-header .back-link { min-width: 0; }
  .hero .eyebrow { gap: 12px; align-items: baseline; font-size: 12px; line-height: 1.7; }
  .hero .eyebrow > span:first-child { flex-shrink: 0; white-space: nowrap; }
  .hero .eyebrow > span:last-child { min-width: 0; }
  .chapter > .chapter-intro, html:lang(zh-CN) .chapter > .chapter-intro {
    font-size: 17px; line-height: 1.85; letter-spacing: .015em;
  }
  .hero h1, .section-heading h2, h3, .body-copy, .chapter-intro { overflow-wrap: break-word; }
  .hero-facts > div, .figure-label, .plate-note, .hero-baseline, .source-note,
  .paper-panel figcaption, .evidence figcaption { font-size: 12px; line-height: 1.75; }
  .hero-baseline { gap: 16px; flex-wrap: wrap; }
  .hero-baseline span { min-width: 0; }
  .paper-panel, .intro-grid > *, .editorial-row > *, .settings-layout > * { min-width: 0; }
  .figure-label { gap: 16px; align-items: baseline; }
  .figure-label > span:last-child { flex-shrink: 0; }
  .film-controls, .film-controls > span, .scope-legend { font-size: 12px; line-height: 1.7; }
  .film-controls { align-items: flex-start; gap: 12px; }
  .film-controls > span { max-width: none; flex: 1 1 150px; }
  .site-footer { gap: 20px; align-items: flex-start; }
  .site-footer > span { flex: 1 1 150px; }
  .site-footer details { flex-basis: 100%; min-width: 0; }
  .site-footer details p { overflow-wrap: anywhere; }
  .lightbox-toolbar > div { flex-shrink: 0; }
  .sculpture-stage:not([data-scene="hero"]):not([data-scene="overview"]) { opacity: .028 !important; }
  html[data-static-sculpture] .sculpture-stage { opacity: 1 !important; }
}
@media (max-width: 360px) {
  .chapter > .section-heading h2, html:lang(zh-CN) .chapter > .section-heading h2 { font-size: 30px; }
}