/* MCR-004 public expression: a shaded forest, warm laboratory light, then a
   readable document. Colours inherit Constelación; scientific pixels do not. */
:root {
  --exp-ink: var(--brand-neutral-950);
  --exp-paper: var(--brand-cream-100);
  --exp-light: var(--brand-neutral-50);
  --exp-amber: var(--brand-amber-500);
  --exp-space: clamp(24px, 5.5vw, 100px);
  --exp-display: clamp(3rem, 6.2vw, 6.25rem);
}
.exp-container { width: min(1320px, calc(100% - 2 * var(--exp-space))); margin-inline: auto; }
.exp-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 30px; }
.exp-lead { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.5; }
.exp-note { font-size: .87rem; line-height: 1.6; color: var(--shell-muted); }
.exp-container h2, .lab-copy h2 { font-family: var(--brand-font-display); font-size: var(--exp-display); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; margin: 0 0 30px; }
.exp-container p { max-width: 64ch; }
.exp-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 52px; padding: 12px 24px; border-radius: 3px; background: var(--brand-indigo-900); color: var(--exp-paper); border: 1px solid transparent; font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .2s var(--brand-ease-out-expo); }
.exp-button:hover { transform: translateY(-2px); }
.exp-button--amber { background: var(--exp-amber); color: var(--exp-ink); }
.exp-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 18px; color: inherit; text-underline-offset: 5px; font-weight: 500; }
body[data-page="home"] [hidden] { display: none !important; }
body[data-page="home"] main { overflow: clip; }
.home-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.forest-chapter { background: var(--exp-ink); color: var(--exp-paper); position: relative; }
.forest-stage.home-hero { height: max(740px, calc(100svh - 64px)); min-height: 0; padding: 0; position: relative; isolation: isolate; background: var(--exp-ink); overflow: clip; }
.home-field-photo--hero { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; background: var(--exp-ink); overflow: visible; }
.home-field-photo--hero picture { display: block; height: 100%; }
.home-field-photo--hero img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; transform: scale(var(--forest-scale, 1)); transform-origin: var(--forest-origin, 62.5% 45.7%); }
.home-field-photo--hero figcaption { position: absolute; z-index: 3; bottom: 86px; right: var(--exp-space); left: auto; width: min(360px, 30%); color: var(--exp-paper); background: var(--exp-ink); padding: 10px 14px; font-size: .75rem; line-height: 1.6; border: 0; }
.home-field-photo--hero figcaption span { display: block; font-weight: 700; }
.forest-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--exp-ink) 0%, color-mix(in srgb, var(--exp-ink) 92%, transparent) 27%, color-mix(in srgb, var(--exp-ink) 35%, transparent) 60%, transparent 100%), linear-gradient(0deg, var(--exp-ink), transparent 28%); pointer-events: none; }
.forest-copy { position: relative; z-index: 2; padding: clamp(70px, 10vh, 130px) var(--exp-space) 130px; width: min(890px, 64%); }
.forest-copy .exp-kicker { color: var(--exp-amber); }
.forest-copy h1.hero-title { font-size: clamp(4rem, 7.7vw, 8.4rem); font-weight: 500; line-height: .99; letter-spacing: -.064em; margin: 0 0 30px; color: var(--exp-paper); }
.forest-copy .home-hero__category { color: var(--exp-paper); font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.45; margin: 0 0 16px; max-width: 38ch; }
.forest-purpose { font-size: .94rem; line-height: 1.55; max-width: 47ch; margin: 0 0 26px; color: var(--brand-neutral-200); }
.forest-bottom { position: absolute; inset: auto var(--exp-space) 22px; display: flex; gap: 20px; justify-content: space-between; align-items: center; z-index: 4; font-size: .75rem; letter-spacing: .06em; }
.forest-bottom a { color: inherit; display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.motion-toggle { border: 1px solid var(--brand-neutral-400); background: var(--exp-ink); color: var(--exp-paper); padding: 8px 14px; min-height: 44px; border-radius: 3px; font: inherit; cursor: pointer; }
.home-field-photo--hero .home-field-photo__fallback { position: absolute; right: var(--exp-space); top: 36%; width: 30%; padding: 24px; border: 1px solid var(--brand-neutral-400); color: var(--exp-paper); background: var(--exp-ink); z-index: 3; }
.observation-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding-block: 110px; }
.observation-intro h2 { font-size: clamp(2.8rem, 4.6vw, 5.2rem); }
.observation-intro > div:last-child { padding-top: 35px; }
.observation-intro p { line-height: 1.7; }
.lab-chapter { position: relative; background: var(--exp-paper); }
.lab-stage { position: relative; isolation: isolate; min-height: 800px; height: calc(100svh - 64px); overflow: clip; color: var(--exp-ink); }
.lab-image { position: absolute; inset: 0; display: block; }
.lab-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--lab-scale, 1)); transform-origin: 74% 19%; }
.lab-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--exp-paper) 94%, transparent), color-mix(in srgb, var(--exp-paper) 85%, transparent) 33%, transparent 60%); }
.lab-copy { position: relative; z-index: 2; padding: 110px var(--exp-space); width: 52%; }
/* This light photographic scene keeps dark ink in either page theme. */
.lab-copy h2 { color: var(--exp-ink); font-size: clamp(3.2rem, 5.7vw, 6.2rem); }
.lab-copy p:not(.exp-kicker) { font-size: 1.1rem; line-height: 1.65; max-width: 36ch; margin-bottom: 30px; }
.lab-caption { position: absolute; z-index: 3; bottom: 22px; right: var(--exp-space); margin: 0; max-width: 400px; font-size: .75rem; padding: 10px 14px; color: var(--exp-ink); background: var(--exp-paper); }
.microscopy-section { padding: 120px 0 90px; background: var(--shell-bg); position: relative; }
.micro-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; margin-bottom: 45px; }
.micro-heading > div:last-child { padding-top: 35px; line-height: 1.7; }
.micro-species { font-size: 1.7rem; margin-top: 0; color: var(--shell-text); }
.micro-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-block: 1px solid var(--shell-border); padding-block: 12px; }
.micro-toolbar button, .micro-toolbar a { font: inherit; font-size: .95rem; border: 1px solid transparent; background: transparent; color: var(--shell-text); padding: 10px 18px; min-height: 44px; border-radius: 3px; text-decoration: none; cursor: pointer; }
.micro-toolbar button[aria-pressed="true"] { background: var(--shell-text); color: var(--shell-bg); }
.micro-toolbar button:hover, .micro-toolbar a:hover { border-color: var(--shell-muted); }
#micro-zoom { margin-left: auto; border-color: var(--shell-border); }
.micro-viewer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.micro-viewer[data-view="spores"], .micro-viewer[data-view="hairs"] { grid-template-columns: minmax(0, 920px); justify-content: center; }
.micro-viewer figure { margin: 0; min-width: 0; }
.micro-viewport { width: 100%; aspect-ratio: 796 / 531; overflow: auto; overscroll-behavior: contain; background: var(--shell-surface-2); }
.micro-viewport img { display: block; max-width: none; width: 100%; height: auto; }
.micro-viewer.is-zoomed .micro-viewport img { width: 200%; }
.micro-viewer figcaption { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; font-size: .84rem; padding: 16px 0; }
.micro-viewer figcaption strong { font-weight: 500; }
.micro-source { border-top: 1px solid var(--shell-border); padding: 14px 0; }
.micro-source summary, .catalog-summary summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: 500; }
.micro-source > div { max-width: 900px; line-height: 1.7; padding-bottom: 14px; }
.micro-source a { color: var(--shell-link); text-underline-offset: 4px; }
.key-invitation { padding-block: 100px 130px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12%; }
.key-invitation h2 { font-size: clamp(3rem, 5.5vw, 5.6rem); }
.key-invitation p { line-height: 1.7; }
.key-invitation .exp-button { margin-top: 18px; }
.method-preview { margin-top: 70px; border-block: 1px solid var(--shell-border); padding-block: 30px; }
.method-preview__title { font-size: 1.9rem; line-height: 1.3 !important; }
.method-preview ul { padding: 0; list-style: none; }
.method-preview li { padding: 14px 0; border-bottom: 1px solid var(--shell-border); display: flex; align-items: center; gap: 20px; }
.method-preview li span { font-size: 2rem; width: 40px; color: var(--shell-link); }
.evidence-chapter { background: var(--brand-indigo-900); color: var(--exp-paper); padding-block: 100px; }
.evidence-grid { display: grid; grid-template-columns: .8fr 1fr; gap: 12%; align-items: center; }
.evidence-chapter .home-field-photo--method { border-radius: 0; margin: 0; border: 0; background: transparent; }
.evidence-chapter .home-field-photo--method img { width: 100%; height: auto; max-height: 700px; object-fit: cover; }
.evidence-chapter .home-field-photo--method figcaption { background: transparent; color: var(--exp-paper); font-size: .75rem; padding: 16px 0; }
.evidence-copy h2 { font-size: clamp(2.8rem, 4.5vw, 4.8rem); }
.evidence-copy p { line-height: 1.65; }
.evidence-copy .exp-kicker { color: var(--exp-amber); }
.evidence-route { list-style: none; padding: 0; margin: 30px 0; display: block; }
.evidence-route li { display: flex; align-items: baseline; gap: 28px; border-top: 1px solid var(--brand-indigo-400); padding: 18px 0; background: none; }
.evidence-route li > span { color: var(--exp-amber); font-size: .8rem; }
.evidence-route strong { font-size: 1.25rem; }
.evidence-route p { margin: 5px 0 0; font-size: .95rem; }
.discovery-end { padding-block: 120px 80px; }
.discovery-links { margin-block: 45px 20px; }
.discovery-links > a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 40px; padding-block: 25px; border-bottom: 1px solid var(--shell-border); text-decoration: none; color: var(--shell-text); font-size: clamp(1.2rem, 2.1vw, 1.9rem); }
.discovery-links > a > span { font-size: .85rem; color: var(--shell-muted); align-self: center; }
.catalog-summary { margin-top: 30px; }
.catalog-summary #home-summary-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.catalog-summary dd { margin: 4px 0; font-size: 1.6rem; }
.catalog-summary dt { font-size: .82rem; }
.catalog-summary a { color: var(--shell-link); }
body[data-page="home"] :focus-visible { outline: 3px solid var(--shell-focus); outline-offset: 5px; }
#scroll-progress { width: 100%; transform: scaleX(0); transform-origin: left; }
@media (max-width: 999px) {
  .forest-stage.home-hero { min-height: 780px; height: calc(100svh - 64px); }
  .forest-copy { width: 80%; padding-top: 80px; }
  .forest-copy h1.hero-title { font-size: clamp(3.8rem, 9vw, 6rem); }
  .forest-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--exp-ink) 94%, transparent), color-mix(in srgb, var(--exp-ink) 50%, transparent) 70%), linear-gradient(0deg, var(--exp-ink), transparent 45%); }
  .lab-copy { width: 70%; }
  .lab-stage { min-height: 740px; height: auto; }
  .lab-image img { object-position: 60% 50%; }
  .lab-shade { background: linear-gradient(90deg, var(--exp-paper), color-mix(in srgb, var(--exp-paper) 92%, transparent) 32%, transparent 90%); }
  .micro-heading { gap: 4%; }
  .evidence-grid { gap: 6%; }
}
@media (max-width: 700px) {
  .exp-kicker { font-size: .68rem; letter-spacing: .11em; margin-bottom: 22px; }
  .forest-stage.home-hero { min-height: 760px; height: calc(100svh - 64px); }
  .forest-copy { width: 100%; padding: 62px var(--exp-space) 120px; }
  .forest-copy h1.hero-title { font-size: clamp(2.8rem, 13vw, 5rem); }
  .forest-copy .home-hero__category { font-size: 1.05rem; }
  .forest-purpose { max-width: 32ch; font-size: .85rem; }
  .home-field-photo--hero img { object-position: 64% 50%; }
  .forest-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--exp-ink) 94%, transparent), color-mix(in srgb, var(--exp-ink) 60%, transparent) 70%), linear-gradient(0deg, var(--exp-ink), transparent 50%); }
  .home-field-photo--hero figcaption { left: var(--exp-space); right: auto; width: calc(100% - 2 * var(--exp-space)); bottom: 76px; background: color-mix(in srgb, var(--exp-ink) 94%, transparent); padding: 8px 10px; }
  .forest-bottom { gap: 8px; font-size: .65rem; }
  .forest-bottom > span { display: none; }
  .motion-toggle { font-size: .7rem; }
  .observation-intro, .micro-heading, .key-invitation, .evidence-grid { grid-template-columns: 1fr; gap: 26px; }
  .observation-intro { padding-block: 65px; }
  .observation-intro > div:last-child, .micro-heading > div:last-child { padding-top: 0; }
  .lab-stage { min-height: 820px; }
  .lab-copy { padding: 55px var(--exp-space); width: 100%; }
  .lab-copy h2 { font-size: clamp(3rem, 12vw, 4rem); }
  .lab-copy p:not(.exp-kicker) { font-size: .95rem; width: 80%; }
  .lab-image { top: 280px; }
  .lab-image img { object-position: 73% bottom; }
  .lab-shade { background: linear-gradient(180deg, var(--exp-paper), var(--exp-paper) 31%, color-mix(in srgb, var(--exp-paper) 75%, transparent) 50%, transparent 70%); }
  .lab-caption { right: 14px; left: 14px; bottom: 14px; font-size: .65rem; }
  .ocular { display: none; }
  .microscopy-section { padding-block: 70px 35px; }
  .micro-toolbar { gap: 2px; }
  .micro-toolbar button, .micro-toolbar a { font-size: .85rem; padding-inline: 12px; }
  #micro-zoom { margin-left: 0; }
  .micro-viewer { grid-template-columns: 1fr; gap: 18px; }
  .micro-heading { margin-bottom: 26px; }
  .key-invitation { padding-block: 65px; }
  .method-preview { margin-top: 12px; }
  .evidence-chapter { padding-block: 60px; }
  .evidence-chapter .home-field-photo--method { max-width: 380px; }
  .evidence-chapter .home-field-photo--method img { max-height: 440px; }
  .discovery-end { padding-block: 70px 45px; }
  .catalog-summary #home-summary-metrics { gap: 8px; }
  .catalog-summary dd { font-size: 1.3rem; }
  .home-field-photo--hero .home-field-photo__fallback { right: 20px; top: auto; bottom: 180px; font-size: .8rem; width: 60%; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .exp-button { transition: none; }
  .exp-button:hover { transform: none; }
  .home-field-photo--hero img, .lab-image img { transform: none; }
  .ocular { display: none; }
}

.evidence-copy h2 { color: var(--exp-paper); }

.forest-stage.home-hero { display: block; }
.micro-viewport > img[data-deferred-src] { display: none; }
.micro-error { padding: 24px; color: var(--shell-text); }

@media (max-width: 720px) { .catalog-summary #home-summary-metrics { grid-template-columns: 1fr; gap: 16px; } }

/* The scroll is the camera: native scrolling drives independent depth planes.
   Static/reduced-motion keeps the same content with no empty pinning distance. */
.motion-toggle { position: fixed; z-index: 35; right: 20px; bottom: 18px; font-size: .75rem; letter-spacing: 0; }
.field-focus, .optical-rings, .lab-journey-note, .ocular { display: none; }
.home-field-photo--hero img { transform: translateX(var(--forest-x, 0%)) scale(var(--forest-scale, 1)); }
.lab-image img { transform: translate(var(--lab-x, 0%), var(--lab-y, 0%)) scale(var(--lab-scale, 1)); transform-origin: var(--lab-origin, 70% 24%); }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .observation-intro > div:first-child { transform: translateY(var(--reading-shift, 0px)); }
  .motion-ready .observation-intro > div:last-child { transform: translateY(calc(var(--reading-shift, 0px) * -.4)); }
}
@media (min-width: 760px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .motion-cinematic .forest-chapter { height: calc(225svh - 64px); }
  .motion-cinematic .lab-chapter { height: calc(285svh - 64px); }
  .motion-cinematic .forest-stage.home-hero, .motion-cinematic .lab-stage { position: sticky; top: 64px; height: calc(100svh - 64px); min-height: 0; }
  .motion-cinematic .forest-copy { width: 76%; padding-top: clamp(42px, 8vh, 110px); opacity: var(--copy-opacity, 1); visibility: var(--copy-visibility, visible); transform: translateY(var(--copy-y, 0px)); }
  .motion-cinematic .forest-copy h1.hero-title { font-size: clamp(3.5rem, 7.7vw, 8.4rem); }
  .motion-cinematic .forest-shade { opacity: var(--shade-opacity, 1); }
  .motion-cinematic .field-focus { display: block; position: absolute; inset: 0; z-index: 2; opacity: var(--field-detail, 0); pointer-events: none; }
  .field-focus > span { position: absolute; width: var(--focus-size, 38vw); aspect-ratio: 1; left: var(--focus-x, 62%); top: var(--focus-y, 46%); border: 1px solid var(--exp-paper); border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--focus-turn, 0deg)) scale(var(--forest-scale, 1)); }
  .field-focus > span::before, .field-focus > span::after { content: ''; position: absolute; inset: -14px; border: 1px solid color-mix(in srgb, var(--exp-paper) 45%, transparent); border-radius: 50%; }
  .field-focus > span::after { inset: 14px; border-style: dashed; }
  .field-focus > i { position: absolute; width: 22%; height: 1px; background: var(--exp-paper); top: 53%; left: 19%; transform: rotate(-18deg); transform-origin: right; }
  .field-focus b { position: absolute; left: var(--exp-space); bottom: 25%; font-size: clamp(2.7rem, 5.8vw, 6rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; text-shadow: 0 2px 24px var(--exp-ink); }
  .motion-cinematic .lab-copy { width: 62%; padding-top: clamp(42px, 10vh, 110px); opacity: var(--lab-copy-opacity, 1); visibility: var(--lab-copy-visibility, visible); transform: translateY(var(--lab-copy-y, 0px)); }
  .motion-cinematic .lab-copy h2 { font-size: clamp(3rem, 5.7vw, 6.2rem); }
  .motion-cinematic .lab-image img { object-position: 50% 50%; }
  .motion-cinematic .lab-shade { opacity: var(--lab-copy-opacity, 1); }
  .motion-cinematic .optical-rings { display: block; position: absolute; z-index: 2; width: var(--lens-size, 160px); aspect-ratio: 1; left: var(--lens-x, 70%); top: var(--lens-y, 20%); opacity: var(--optics-opacity, 0); transform: translate(-50%, -50%) scale(var(--optics-scale, 1)) rotate(var(--optics-turn, 0deg)); pointer-events: none; }
  .optical-rings i { position: absolute; inset: 0; border: 2px solid color-mix(in srgb, var(--exp-paper) 70%, transparent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--exp-ink) 35%, transparent); }
  .optical-rings i:nth-child(2) { inset: 13%; border-style: dashed; transform: rotate(-25deg); }
  .optical-rings i:nth-child(3) { inset: 25%; border-color: var(--exp-amber); }
  .motion-cinematic .ocular { display: block; position: absolute; inset: 0; z-index: 4; width: auto; height: auto; border: 0; border-radius: 0; transform: none; opacity: 1; background: var(--exp-ink); clip-path: circle(var(--ocular-radius, 0%) at var(--lens-x, 70%) var(--lens-y, 20%)); pointer-events: none; }
  .ocular-document { position: absolute; inset: 8% 10% 12%; display: flex; flex-direction: column; align-items: center; gap: 16px; transform: scale(var(--portal-scale, 1)); }
  .ocular-frame { position: relative; flex: 1; min-height: 0; width: 100%; }
  .ocular-document img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .ocular-document p { flex: none; margin: 0; text-align: center; color: var(--exp-paper); opacity: var(--portal-caption, 0); font-size: clamp(1.3rem, 2.2vw, 2rem); }
  .ocular-document p span { display: block; font-size: .78rem; line-height: 1.7; margin-top: 10px; }
  .motion-cinematic .lab-journey-note { display: flex; flex-direction: column; gap: 22px; position: absolute; z-index: 3; left: var(--exp-space); top: 24%; color: var(--exp-paper); opacity: var(--optics-opacity, 0); text-shadow: 0 2px 24px var(--exp-ink); pointer-events: none; }
  .lab-journey-note strong { font-weight: 500; font-size: clamp(4rem, 8vw, 9rem); letter-spacing: -.06em; line-height: .95; }
  .lab-journey-note > span { font-size: .75rem; letter-spacing: .08em; }
  .motion-cinematic .lab-caption { z-index: 5; left: var(--exp-space); right: auto; max-width: 330px; bottom: 18px; }
  .motion-cinematic .forest-copy:focus-within, .motion-cinematic .lab-copy:focus-within { opacity: 1; visibility: visible; transform: none; }
}
@media (max-height: 780px) and (min-width: 760px) {
  .motion-cinematic .forest-copy { padding-top: 32px; }
  .motion-cinematic .forest-copy h1.hero-title { font-size: clamp(3.4rem, 6vw, 5.5rem); margin-bottom: 18px; }
  .motion-cinematic .forest-copy .exp-kicker { margin-bottom: 18px; }
  .motion-cinematic .forest-copy .home-hero__category { font-size: 1.1rem; }
  .motion-cinematic .lab-copy { padding-top: 42px; }
  .motion-cinematic .lab-copy h2 { font-size: clamp(3rem, 5vw, 4.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-field-photo--hero img, .lab-image img { transform: none; }
}

.motion-ready .forest-bottom { padding-right: 160px; }
.motion-cinematic .lab-caption { opacity: var(--lab-disclaimer, 1); }
.ocular-document .portal-error { color: var(--exp-paper); font-size: 1rem; line-height: 1.6; text-align: center; }
@media (max-width: 700px) { .motion-ready .forest-bottom { padding-right: 140px; } }

/* The unpinned reading route grows with its text, including without JavaScript.
   The figure keeps its semantic caption; only its visual box participates in
   the surrounding grid. Photography stays behind, credits follow the copy. */
html:not(.motion-cinematic) .forest-stage.home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); height: auto;
  min-height: max(740px, calc(100svh - 64px)); align-content: start;
}
html:not(.motion-cinematic) .home-field-photo--hero { display: contents; }
html:not(.motion-cinematic) .home-field-photo--hero picture { position: absolute; inset: 0; height: 100%; }
html:not(.motion-cinematic) .forest-copy { grid-row: 1; width: min(960px, 100%); padding-bottom: 32px; }
html:not(.motion-cinematic) .home-field-photo--hero figcaption {
  grid-row: 2; position: relative; inset: auto; width: auto; max-width: 52ch;
  margin: 0 var(--exp-space) 24px; align-self: end;
}
html:not(.motion-cinematic) .forest-bottom {
  grid-row: 3; position: relative; inset: auto; padding: 0;
  margin: 0 var(--exp-space) 32px; flex-wrap: wrap;
}
html:not(.motion-cinematic) .lab-stage { height: auto; min-height: max(800px, calc(100svh - 64px)); }
html:not(.motion-cinematic) .lab-copy { width: min(960px, 100%); padding-bottom: 36px; }
html:not(.motion-cinematic) .lab-caption { position: relative; inset: auto; margin: 0 var(--exp-space) 32px; }
html:not(.motion-cinematic) .forest-copy,
html:not(.motion-cinematic) .lab-copy { transform: none; opacity: 1; visibility: visible; }
html:not(.motion-cinematic) .forest-shade { opacity: 1; }
html:not(.motion-cinematic) .lab-shade { opacity: 1; }
@media (min-width: 701px) {
  html:not(.motion-cinematic) .lab-shade { background: linear-gradient(90deg, var(--exp-paper), color-mix(in srgb, var(--exp-paper) 90%, transparent) 70%, color-mix(in srgb, var(--exp-paper) 70%, transparent)); }
}

.motion-toolbar { display: contents; }

/* Compact reading gets a reserved control strip below navigation. A floating
   pause button must never cover the primary exploration action on a phone. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready:not(.motion-cinematic) { --motion-toolbar-height: calc(1.2rem + 36px); scroll-padding-top: calc(80px + var(--motion-toolbar-height)); }
  html.motion-ready:not(.motion-cinematic) body[data-page="home"] main { padding-top: calc(64px + var(--motion-toolbar-height)); }
  html.motion-ready:not(.motion-cinematic) .motion-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    position: fixed; inset: 64px 0 auto; height: var(--motion-toolbar-height); padding: 6px 20px;
    background: var(--shell-bg); border-bottom: 1px solid var(--shell-border); z-index: 35;
  }
  html.motion-ready:not(.motion-cinematic) .motion-toggle { position: static; }
}

/* Source context stays available at every scale and without JavaScript. */
.home-field-photo--hero figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 4px; }
.reference-source { border-top: 1px solid var(--shell-border); margin-top: 20px; }
.reference-source summary { min-height: 44px; padding-block: 14px; cursor: pointer; font-weight: 500; }
.reference-source a { color: var(--shell-link); text-underline-offset: 4px; }
.reference-source > div { font-size: .94rem; }
.home-field-photo--method figcaption span { display: block; margin-bottom: 6px; }
.reference-unavailable ~ .field-focus { display: none !important; }