/* Motion follows the product story; this file adds no external assets or scripts. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-leave .22s ease-out both; }
::view-transition-new(root) { animation: page-arrive .45s var(--ease) both; }
:root.motion-paused::view-transition-old(root),
:root.motion-paused::view-transition-new(root) { animation: none; }

.home-hero,
.page-hero { isolation: isolate; }
.home-hero-grid,
.page-hero-grid,
.hero-bottom,
.hero-foot { z-index: 1; }
.page-hero-grid { position: relative; }
.ambient-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient-field > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambient-shape { position: absolute; display: block; border-radius: 50%; }
.ambient-one {
  width: 700px; height: 700px; top: -350px; right: -170px;
  background: radial-gradient(ellipse at 35% 40%, #a7c56a23, #436d4130 45%, transparent 70%);
  animation: atmosphere-drift 23s ease-in-out infinite alternate;
}
.ambient-two {
  width: 740px; height: 740px; left: -400px; bottom: -500px;
  border: 1px solid #c9e29518; box-shadow: 0 0 0 70px #c9e29504, 0 0 0 140px #c9e29504;
  animation: organic-morph 19s ease-in-out infinite alternate;
}
.ambient-three {
  width: 500px; height: 650px; bottom: -400px; right: 7%;
  background: radial-gradient(ellipse, #d4a36d14, transparent 65%);
  animation: atmosphere-drift 27s ease-in-out -7s infinite alternate-reverse;
}
.flow-path {
  fill: none; stroke: #d7efac15; stroke-width: 1;
  stroke-dasharray: 8 18; animation: river-flow 24s linear infinite;
}
.flow-secondary { stroke: #b3dcd414; animation-direction: reverse; }
.ambient-seed { position: absolute; width: 5px; height: 9px; background: var(--lime); border-radius: 100% 0; opacity: .5; }
.seed-one { top: 22%; left: 63%; animation: seed-drift 15s ease-in-out infinite; }
.seed-two { top: 78%; left: 35%; background: var(--orange); animation: seed-drift 20s ease-in-out -8s infinite reverse; }
.seed-three { top: 35%; right: 4%; animation: seed-drift 18s ease-in-out -12s infinite; }
.hero-drawing { position: absolute; left: 48%; bottom: 7%; width: 110px; color: #d8ec9940; rotate: -12deg; }
.drawn-icon { width: 100%; overflow: visible; }
.drawn-icon > * { stroke-dasharray: 600; stroke-dashoffset: 600; animation: illustration-draw 5s var(--ease) both; }
.blue-hero .flow-path,
.peach-hero .flow-path { stroke: #173c2c13; }
.blue-hero .hero-drawing,
.peach-hero .hero-drawing { color: #173c2c35; }
.blue-hero .ambient-one { background: radial-gradient(ellipse, #e6efb480, transparent 68%); }
.peach-hero .ambient-one { background: radial-gradient(ellipse, #f8e3af70, transparent 68%); }

/* Kinetic type retains the original readable heading in the DOM. */
.headline-mask { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.headline-line { display: block; transform-origin: 0 100%; }
.motion-ready:not(.motion-paused) .headline-line { animation: headline-rise 1s var(--ease) both; }
.motion-ready .headline-mask:nth-child(2) .headline-line { animation-delay: .11s; }
.motion-ready .headline-mask:nth-child(3) .headline-line { animation-delay: .22s; }
.motion-ready .headline-mask:nth-child(4) .headline-line { animation-delay: .3s; }
.splash-logo { overflow: visible; isolation: isolate; }
.splash-logo::before {
  content: ''; position: absolute; inset: -20px -25px; border: 1px solid #91aa6c50;
  border-radius: 48% 52% 58% 42%; animation: intro-orbit 2s ease-out both; z-index: -1;
}
.splash-logo::after {
  content: ''; position: absolute; width: 8px; height: 13px; background: #83a34e;
  right: 0; top: 15px; border-radius: 100% 0; animation: seed-drift 4s ease-in-out infinite;
}
.splash-logo img { clip-path: inset(0 0 0 0); animation: logo-appear 1.1s var(--ease) both; }

/* An unobtrusive sticky navigation keeps long animated pages usable. */
.site-header { transition: top .35s, height .35s, box-shadow .35s; }
.site-header.is-scrolled {
  position: fixed; top: 12px; height: 64px;
  box-shadow: 0 10px 40px #082b2220; border-color: #173c2c14;
}
.site-menu:not([hidden]) { animation: menu-open .4s var(--ease) both; }
.site-menu:not([hidden]) nav a { animation: menu-item .6s var(--ease) both; }
.site-menu nav a:nth-child(2n) { animation-delay: .07s; }
.site-menu nav a:nth-child(3n) { animation-delay: .12s; }
.site-menu nav a:nth-child(5n) { animation-delay: .18s; }
.site-menu nav a:hover small { opacity: 1; }
.menu-open .site-header { top: 22px; }

/* Controls operate the real-time model; nothing here implies measured performance. */
.product-views {
  position: absolute; top: 0; right: 0; display: flex; gap: 3px; padding: 4px;
  border: 1px solid #d8ec9930; background: #173d2a38; border-radius: 30px;
  backdrop-filter: blur(8px); z-index: 5;
}
.product-views button {
  background: transparent; color: #d7e2ca; font-size:9px;
  padding: 8px 13px; min-height: 35px; border-radius: 24px;
  transition: color .25s, background .25s;
}
.product-views button[aria-pressed="true"] { color: #173c2c; background: var(--lime); }
.blue-hero .product-views { background: #ffffff40; border-color: #173c2c25; }
.blue-hero .product-views button { color: #173c2c; }
.scene-controls button { min-width: 40px; min-height: 40px; transition: background .25s, scale .25s; }
.scene-controls button:hover { background: #d8ec9930; scale: 1.08; }
.crate-scene .label-one { top: 60px; }
.scene-glow { animation: thermal-glow 7s ease-in-out infinite alternate; }
.scene-orbit { animation: orbit-breathe 15s ease-in-out infinite alternate; }

/* The scroll-driven harvest story uses normal document scrolling and real anchors. */
.harvest-story {
  color: var(--ink); background: #e9eddc;
  padding: 100px 0 70px; position: relative; overflow: clip;
}
.story-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 80px; align-items: end; }
.story-intro > .eyebrow { grid-column: 1 / -1; }
.story-intro h2 { font-size:clamp(45.6px,4.75vw,70.3px); }
.story-intro > p { max-width: 330px; font-size:14.25px; margin: 0 0 5px; }
.journey-layout { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 70px; position: relative; margin-top: 40px; }
.journey-stage {
  position: sticky; top: 105px; grid-column: 2; grid-row: 1;
  align-self: start; height: min(650px,calc(100svh - 130px)); min-height: 470px;
  border: 1px solid #71826335; border-radius: 140px 140px 16px 16px;
  background: #d4dfbd; isolation: isolate; overflow: hidden;
  transition: background .8s ease, border-radius .8s var(--ease);
}
.journey-stage[data-chapter="1"] { background: #bad5cb; border-radius: 16px 140px 16px 16px; }
.journey-stage[data-chapter="2"] { background: #e6c7a1; border-radius: 140px 16px 16px 16px; }
.stage-grid {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(#173c2c06 1px,transparent 1px),linear-gradient(90deg,#173c2c06 1px,transparent 1px);
  background-size: 35px 35px; mask-image: linear-gradient(transparent,#000 40%,transparent);
}
.journey-scene-word {
  position: absolute; top: 9%; width: 100%; text-align: center; font-size:clamp(47.5px,5.13vw,78.85px);
  line-height: 1; letter-spacing: -.07em; color: #45644925; z-index: -1;
  transition: translate .7s var(--ease), opacity .7s;
}
.journey-stage .crate-scene { height: calc(100% - 86px); width: 100%; }
.journey-stage .scene-label { display: none; }
.journey-stage .model-note { bottom: 48px; color: #173c2c; font-size:6px; }
.journey-stage .scene-controls { color: #173c2c; bottom: 0; }
.journey-stage .scene-controls button { border-color: #173c2c30; }
.journey-stage .scene-orbit { border-color: #173c2c20; inset: 20% 8%; }
.journey-token {
  position: absolute; top: 52%; left: 6%; right: 6%; margin: auto;
  width: max-content; max-width: 88%; display: flex; align-items: center; gap: 11px;
  color: #173c2c; padding: 13px 18px; font-size:11px; background: #f8faeece;
  border: 1px solid #fff7; border-radius: 40px; backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px #173c2c18; translate: 0 100px; pointer-events: none;
}
.token-orbit { width: 8px; height: 8px; border-radius: 50%; background: #6b9451; box-shadow: 0 0 0 4px #8fa75a22; }
.journey-stage-bottom {
  position: absolute; inset: auto 24px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; color: #173c2c;
}
.journey-stage-bottom > span { font-size:8px; letter-spacing: .08em; }
.journey-stage-bottom b { font-size:23.75px; font-weight: 400; letter-spacing: -.04em; }
.journey-stage-bottom > span:last-child { font-size:6px; }
.journey-dots { display: flex; gap: 2px; }
.journey-dots a { display: grid; place-items: center; height: 40px; width: 27px; }
.journey-dots a span { width: 5px; height: 5px; border-radius: 10px; background: #67826450; transition: width .4s, background .4s; }
.journey-dots a[aria-current] span { width: 22px; background: #173c2c; }
.journey-chapters { grid-column: 1; grid-row: 1; }
.journey-chapter { min-height: 70svh; display: flex; align-items: start; flex-direction: column; justify-content: center; padding-block: 70px; scroll-margin-top: 130px; }
.journey-chapter h3 { font-size:clamp(35.15px,3.8vw,57px); line-height: 1.05; }
.journey-chapter h3 em { color: #6c844c; }
.journey-chapter > p { max-width: 370px; font-size:14.25px; color: #53654e; margin: 25px 0; }
.journey-chapter .text-link { font-size:12px; }

/* An original resource sculpture morphs between food, water and energy. */
.resource-garden { background: #dce6bd; overflow: hidden; }
.resource-garden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.resource-garden h2 { font-size:clamp(44.65px,4.845vw,69.35px); }
.resource-garden-grid > div > p { font-size:14.25px; max-width: 410px; margin-top: 28px; }
.resource-picker { display: flex; gap: 8px; margin-top: 30px; }
.resource-picker button {
  color: var(--ink); background: transparent; border: 1px solid #173c2c40;
  padding: 11px 22px; border-radius: 30px; font-size:12px; min-height: 44px;
  transition: background .3s, color .3s;
}
.resource-picker button[aria-selected="true"] { color: var(--cream); background: var(--forest); }
.resource-sculpture { position: relative; width: min(100%,330px); height: 320px; margin: 0 auto 25px; }
.resource-sculpture svg { width: 100%; height: 100%; filter: drop-shadow(20px 24px 15px #48613c30); }
.resource-morph { transition: d 1.2s var(--ease); transform-origin: center; animation: sculpture-breathe 9s ease-in-out infinite; }
.resource-vein { stroke-dasharray: 400; stroke-dashoffset: 0; transition: opacity .3s; }
.resource-sculpture:not([data-resource-shape="0"]) .resource-vein { opacity: 0; }
.resource-halo { position: absolute; inset: 10px 0; border: 1px solid #173c2c30; border-radius: 50%; rotate: -25deg; transform: scaleY(.78); }
.resource-orbit { position: absolute; height: 10px; width: 10px; border-radius: 50%; background: #d58b58; }
.orbit-dot-a { left: 13%; top: 24%; animation: seed-drift 8s ease-in-out infinite; }
.orbit-dot-b { right: 7%; bottom: 20%; width: 5px; height: 5px; background: #2d6e4f; animation: seed-drift 10s ease-in-out -5s infinite; }
#resource-panel > h3 { font-size:29.45px; margin-bottom: 20px; }
#resource-panel > p { font-size:13.3px; max-width: 430px; min-height: 90px; }
#resource-panel > .eyebrow { font-size:8px; margin-bottom: 17px; }

/* The notebook combines real supplied CAD with original animated annotations. */
.lab-notebook { background: #d1ddd1; }
.notebook-spread { display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid #173c2c30; background: #f2f3e8; border-radius: 5px; overflow: hidden; }
.notebook-visual { position: relative; align-self: stretch; min-height: 440px; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.notebook-grid { position: absolute; inset: 0; background: linear-gradient(#173c2c0a 1px,transparent 1px),linear-gradient(90deg,#173c2c0a 1px,transparent 1px); background-size: 22px 22px; z-index: -1; }
.notebook-visual img { mix-blend-mode: multiply; transition: transform 1.2s var(--ease), filter 1.2s, opacity 1.2s; width: 100%; }
.notebook-visual[data-lab-view="1"] img { transform: scale(1.25) rotate(-5deg); filter: contrast(1.15) sepia(.2); }
.notebook-visual[data-lab-view="2"] img { transform: scale(.9) rotate(3deg); opacity: .6; }
.notebook-index { position: absolute; left: 25px; top: 22px; font-size:8px; letter-spacing: .12em; }
.notebook-caption { position: absolute; left: 25px; right: 25px; bottom: 22px; font-size:8px; border-top: 1px solid #173c2c30; padding-top: 16px; }
.notebook-annotations { position: absolute; width: 100%; fill: none; stroke: #735a39; stroke-width: 1.2; opacity: 0; transition: opacity .7s; }
.notebook-annotations path { stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1s; }
.notebook-visual[data-lab-view="1"] .notebook-annotations { opacity: 1; }
.notebook-visual[data-lab-view="1"] .notebook-annotations path { stroke-dashoffset: 0; }
.notebook-copy { padding: 35px; border-left: 1px solid #173c2c25; }
.lab-tabs { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px solid #173c2c30; margin-bottom: 50px; }
.lab-tabs button { color: #60745a; padding: 12px 3px; border-bottom: 2px solid transparent; background: none; font-size:9px; min-height: 44px; }
.lab-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
#lab-panel .eyebrow { font-size:8px; margin-bottom: 22px; }
#lab-panel h3 { font-size:35.15px; margin-bottom: 24px; }
#lab-panel p { font-size:13.3px; min-height: 110px; }
.notebook-stamp { display: inline-block; margin-top: 25px; border: 1px solid #6c7a4c70; padding: 8px 12px; font-size:7px; letter-spacing: .12em; rotate: -4deg; color: #657a47; }

/* Purposeful microinteractions, without a replacement cursor or moving hit targets. */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ''; position: absolute; inset: 100% -15% -100%; background: #ffffff16; border-radius: 50%; z-index: -1; transition: inset .6s var(--ease); }
.button:hover::before { inset: -70% -15%; }
.feature-panel,
.spec-sheet,
.news-art,
.affiliation-note { transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s; }
.feature-panel:hover { box-shadow: 0 20px 35px #173c2c12; }
.feature-panel:focus-visible { transform: translateY(-5px); }
.crop-art .produce-shape { transition: border-radius .7s var(--ease), background .7s, width .7s, height .7s; }
.collab-orbit::before { stroke-dasharray: 12 8; animation: connection-pulse 5s ease-in-out infinite; }
.impact-words > span { transition: padding-left .4s, color .4s; }
.impact-words > span:hover { padding-left: 13px; color: var(--lime); }
.research-timeline li { position: relative; }
.research-timeline li::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--lime); transition: width 1s var(--ease); }
.research-timeline li.in::before { width: 100%; }
.cad-figure { transition: box-shadow .5s; }
.cad-figure:hover { box-shadow: 0 20px 70px #173c2c14; }
.cad-figure img { transition: transform .9s var(--ease); }
.cad-figure:hover img { transform: scale(1.035); }
.check-label input { transition: box-shadow .2s; }
.check-label input:checked { box-shadow: 0 0 0 4px #9ab47730; }
#contact-form:focus-within { box-shadow: 0 0 0 1px #6e8b5450,0 20px 60px #173c2c08; }
#contact-form { transition: box-shadow .4s; }
.footer-wordmark { background: linear-gradient(110deg,#f6f5ec 25%,#d8ec99 40%,#f6f5ec 55%); background-size: 200% 100%; background-clip: text; }
.footer-wordmark:hover { animation: wordmark-light 3s ease-in-out; }
.closing-art::before { content: ''; position: absolute; width: 75%; aspect-ratio: 1; border: 1px dashed #64804655; border-radius: 50%; animation: orbit 55s linear infinite; }
.closing-art { isolation: isolate; }
.closing-art .organic-art { filter: drop-shadow(12px 16px 0 #315c3c0d); }
.motion-paused .journey-stage { transition: none; }
.motion-paused .headline-line { animation: none; }
.motion-paused .resource-morph { transition: none; }
.animation-sleep *, .animation-sleep *::before, .animation-sleep *::after,
.animation-suspended *, .animation-suspended *::before, .animation-suspended *::after { animation-play-state: paused !important; }

/* A native horizontal filmstrip: touch, keyboard and buttons all use the same rail. */
.chapter-reel-section { padding: 85px 0; background: #ecebdc; overflow: hidden; }
.reel-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.reel-heading h2 { font-size:clamp(43.7px,4.275vw,63.65px); }
.reel-controls { display: flex; align-items: center; gap: 10px; }
.reel-controls button { width: 45px; height: 45px; border-radius: 50%; background: transparent; color: var(--ink); border: 1px solid #173c2c40; font-size:17.1px; }
.reel-controls button:hover:not(:disabled) { background: var(--forest); color: var(--cream); }
.reel-controls button:disabled { opacity: .3; cursor: default; }
.reel-controls > span { font-size:7px; letter-spacing: .1em; margin-left: 10px; }
.chapter-reel { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: max(56px,calc((100vw - 1280px)/2)); padding: 0 max(56px,calc((100vw - 1280px)/2)) 20px; scrollbar-color: #698052 #d9dec9; scrollbar-width: thin; }
.reel-frame { flex: 0 0 390px; height: 400px; padding: 28px; position: relative; overflow: hidden; isolation: isolate; scroll-snap-align: start; transition: filter .35s; }
.reel-frame:hover { filter: brightness(1.04); }
.reel-frame-top { display: flex; justify-content: space-between; align-items: center; font-size:9px; text-transform: uppercase; letter-spacing: .1em; }
.reel-frame-top > span:last-child { font-size:21.85px; }
.reel-frame h3 { font-size:53.2px; margin-top: 42px; position: relative; z-index: 2; }
.reel-frame-bottom { position: absolute; left: 28px; right: 28px; bottom: 25px; border-top: 1px solid #173c2c35; padding-top: 15px; display: flex; justify-content: space-between; font-size:7px; letter-spacing: .12em; }
.reel-drawing { position: absolute; width: 190px; right: -22px; bottom: 48px; opacity: .4; rotate: 15deg; transition: rotate .6s, scale .6s; }
.reel-frame:hover .reel-drawing { rotate: 0deg; scale: 1.1; }
.reel-drawing .drawn-icon > * { animation: none; stroke-dashoffset: 0; }
.reel-frame:hover .drawn-icon > *, .reel-frame:focus-visible .drawn-icon > * { animation: illustration-draw 2s var(--ease) both; }
.reel-blue { background: #bad6cc; }.reel-green { background: #b3c999; }.reel-earth { background: #e3b58d; }.reel-paper { background: #d4dbcf; }.reel-lime { background: #d3e88d; }

@keyframes headline-rise { from { transform: translateY(110%) rotate(3deg); opacity: .1; } to { transform: none; opacity: 1; } }
@keyframes atmosphere-drift { from { transform: translate(-40px,20px) scale(.9); } to { transform: translate(70px,80px) scale(1.2); } }
@keyframes organic-morph { from { border-radius: 43% 57% 32% 68%; transform: rotate(-12deg); } to { border-radius: 65% 35% 63% 37%; transform: rotate(15deg); } }
@keyframes river-flow { to { stroke-dashoffset: -650; } }
@keyframes seed-drift { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(14px,-25px) rotate(70deg); } }
@keyframes illustration-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-orbit { from { opacity: 0; transform: scale(.8) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(10deg); } }
@keyframes logo-appear { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes thermal-glow { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1.2); } }
@keyframes orbit-breathe { from { rotate: -3deg; } to { rotate: 5deg; } }
@keyframes menu-open { from { opacity: 0; clip-path: inset(0 0 100%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sculpture-breathe { 0%,100% { transform: rotate(-6deg) scale(.94); } 50% { transform: rotate(5deg) scale(1); } }
@keyframes connection-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes wordmark-light { to { background-position: -200% 0; } }
@keyframes page-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 1400px) {
  .journey-chapter { min-height: 700px; }
}
@media (max-width: 1000px) {
  .journey-layout { gap: 35px; }
  .journey-chapter h3 { font-size:40.85px; }
  .journey-stage { height: 510px; min-height: 450px; }
  .journey-token { font-size:9px; top: 48%; translate: 0 110px; }
  .resource-garden-grid { gap: 50px; }
  .notebook-copy { padding: 28px; }
  #lab-panel h3 { font-size:28.5px; }
  .lab-tabs button { font-size:8px; }
}
@media (max-width: 760px) {
  .chapter-reel-section { padding-block: 60px; }
  .reel-heading { flex-direction: column; align-items: start; gap: 25px; }
  .reel-heading h2 { font-size:41.8px; }
  .chapter-reel { padding-inline: 20px; scroll-padding-left: 20px; }
  .reel-frame { flex-basis: 290px; height: 350px; padding: 24px; }
  .reel-frame h3 { font-size:45.6px; }
  .reel-frame-bottom { left: 24px; right: 24px; }
  .reel-drawing { width: 150px; }
  .harvest-story { padding-block: 70px 25px; }
  .story-intro { grid-template-columns: 1fr; gap: 22px; }
  .story-intro > .eyebrow { margin-bottom: 0; }
  .story-intro h2 { font-size:44.65px; }
  .story-intro > p { font-size:13.3px; max-width: 400px; }
  .journey-layout { display: flex; flex-direction: column; margin-top: 35px; gap: 0; }
  .journey-stage {
    top: 88px; width: 100%; height: 380px; min-height: 0; z-index: 3;
    border-radius: 70px 70px 12px 12px; box-shadow: 0 12px 25px #173c2c0a;
  }
  .journey-stage[data-chapter="1"] { border-radius: 12px 70px 12px 12px; }
  .journey-stage[data-chapter="2"] { border-radius: 70px 12px 12px 12px; }
  .journey-scene-word { top: 10%; font-size:62.7px; }
  .journey-stage .crate-scene { height: calc(100% - 55px); max-width: 470px; margin: auto; }
  .journey-stage .model-note { font-size:5px; bottom: 28px; }
  .journey-stage .scene-controls { bottom: 0; gap: 15px; }
  .journey-stage .scene-controls button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
  .journey-stage .scene-controls span { font-size:6px; }
  .journey-stage-bottom { inset: auto 20px 8px; }
  .journey-stage-bottom b { font-size:19px; }
  .journey-token { top: 40%; translate: 0 80px; padding: 8px 13px; font-size:8px; }
  .journey-chapters { position: relative; z-index: 1; }
  .journey-chapter { min-height: 58svh; padding-block: 65px; scroll-margin-top: 480px; }
  .journey-chapter h3 { font-size:38.95px; }
  .journey-chapter > p { font-size:13.3px; max-width: 450px; margin-block: 22px; }
  .journey-chapter > .eyebrow { font-size:8px; }
  .journey-chapter .text-link { font-size:12px; }
  .resource-garden-grid { grid-template-columns: 1fr; gap: 35px; }
  .resource-garden h2 { font-size:43.7px; }
  .resource-garden-grid > div > p { font-size:13.3px; }
  .resource-sculpture { width: 270px; height: 270px; margin-bottom: 20px; }
  #resource-panel > p { min-height: 70px; font-size:13.3px; }
  .notebook-spread { grid-template-columns: 1fr; }
  .notebook-visual { min-height: 330px; }
  .notebook-copy { border-left: 0; border-top: 1px solid #173c2c25; padding: 25px; }
  .lab-tabs { margin-bottom: 30px; }
  .lab-tabs button { font-size:10px; }
  #lab-panel p { min-height: 70px; }
  #lab-panel h3 { font-size:30.4px; }
  .notebook-stamp { margin-top: 15px; }
  .hero-drawing { width: 75px; left: auto; right: -10px; bottom: 35%; opacity: .5; }
}
@media (max-width: 640px) {
  .site-header.is-scrolled { top: 8px; height: 61px; }
  .menu-open .site-header { top: 14px; }
  .product-views { top: 3px; right: 0; }
  .product-views button { min-height: 32px; font-size:8px; padding: 8px 12px; }
  .crate-scene .label-one { top: 46px; }
  .scene-controls button { min-width: 36px; min-height: 36px; }
  .hero-drawing { bottom: 42%; }
  .splash-logo::before { inset: -8px -15px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .journey-stage { height: 300px; }
  .journey-token { translate: 0 65px; }
  .journey-chapter { scroll-margin-top: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .headline-line { animation: none !important; }
  .drawn-icon > * { stroke-dashoffset: 0; }
  .resource-morph { transition: none; }
  .journey-stage { transition: none; }
}

/* Compact navigation panel; content behind it remains usable and scrollable. */
body.menu-open { overflow: visible; }
.site-menu {
  inset: 108px 28px auto auto;
  width: min(600px,calc(100% - 56px));
  max-height: min(560px,calc(100dvh - 132px));
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #173c2c25;
  border-radius: 12px;
  box-shadow: 0 16px 50px #082b2233;
}
.menu-inner { width: auto; margin: 0; padding: 22px; }
.menu-inner > .eyebrow { margin-bottom: 12px; font-size: 9px; }
.menu-inner > nav { grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.menu-inner nav a {
  padding: 10px 9px; min-height: 44px; gap: 9px;
  border: 0; border-radius: 5px;
  font-size: 15px; line-height: 1.3; letter-spacing: -.015em;
}
.menu-inner nav a:hover,.menu-inner nav a[aria-current] { background: #e5ecd7; color: var(--forest); }
.menu-inner nav small { font-size: 9px; }
.menu-inner nav a > span { font-size: 16px; }
.menu-bottom { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font-size: 10px; }
.site-menu:not([hidden]) { animation: dropdown-arrive .2s var(--ease) both; }
.site-menu:not([hidden]) nav a { animation: none; }
@keyframes dropdown-arrive { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media(min-width:1400px) { .site-menu { right: max(28px,calc((100% - 1320px)/2)); } }
@media(max-width:640px) {
  .site-menu { top: 90px; right: 14px; width: calc(100% - 28px); max-height: min(500px,calc(100dvh - 112px)); }
  .menu-inner { padding: 16px; }
  .menu-inner > nav { column-gap: 8px; }
  .menu-inner nav a { font-size: 13px; padding: 9px 5px; gap: 6px; }
  .menu-inner nav small { font-size: 8px; }
  .menu-bottom { font-size: 9px; }
}