/* Quiet landscape colours; keep content readable above weather decoration. */
body.view-mobile .dashboard-grid > *, body.view-mobile .two-column > * { min-width: 0; max-width: 100%; }
body.view-mobile .weather-card, body.view-mobile .plots-card { width: 100%; min-width: 0; overflow: hidden; }
.nature-banner{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:40px 36px 320px;margin-bottom:36px;background:var(--surface)}
.nature-banner>div{position:relative;z-index:1;max-width:650px}
.nature-banner h2{max-width:24ch;font-size:clamp(26px,3vw,38px);line-height:1.2;margin:10px 0 18px}
.nature-banner p:not(.eyebrow){max-width:48ch;color:var(--muted)}
.nature-photo{position:absolute;bottom:0;left:0;width:100%;height:300px;object-fit:cover;object-position:center 50%}
.nature-photo.is-visible{animation:landscape-arrive 4s ease-out both}
.nature-credit{position:absolute;bottom:14px;left:20px;right:20px;width:fit-content;max-width:calc(100% - 40px);z-index:2;padding:8px 12px;border-radius:8px;background:rgba(3,25,22,.82);color:#fff!important;font-size:13px;line-height:1.5;text-underline-offset:3px}
@keyframes landscape-arrive{from{transform:scale(1.045)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.nature-photo.is-visible{animation:none}}
.project-footer{position:relative;padding-top:42px!important;gap:36px}
.project-footer:before{content:"";position:absolute;top:8px;left:0;right:0;height:9px;opacity:.3;background:linear-gradient(45deg,transparent 42%,var(--accent) 43% 57%,transparent 58%) 0 0/18px 18px,linear-gradient(-45deg,transparent 42%,var(--accent) 43% 57%,transparent 58%) 0 0/18px 18px}
.footer-contact a{overflow-wrap:anywhere;text-underline-offset:4px}
.footer-author>span{display:inline-block;margin-bottom:8px}
@media(max-width:600px){.nature-banner{padding:24px 20px 275px}.nature-photo{height:255px}.project-footer{gap:24px}.footer-author{font-size:17px}}
.weather-animation-setting{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;color:var(--text)}
.weather-animation-setting input{width:20px;height:20px;accent-color:var(--accent)}
h1,h2{font-weight:600!important;letter-spacing:-.025em}
h1{line-height:1.15!important;text-wrap:balance}
.hero .eyebrow{color:#e3fff3;text-shadow:0 1px 6px #072820}
.footer-author{font-size:19px;line-height:1.7;font-weight:500}
.project-footer{border-top:3px solid var(--accent)}
body[data-precipitation="rain"]::after,body[data-precipitation="snow"]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:21;opacity:.16;background-size:90px 100px;animation:ambient-rain 1.8s linear infinite}
body[data-precipitation="rain"]::after{background-image:repeating-linear-gradient(105deg,transparent 0 85px,#7ebdc9 86px 87px,transparent 88px 90px)}
body[data-precipitation="snow"]::after{background-image:radial-gradient(circle,#adcfd6 2px,transparent 3px);animation-duration:12s}
@keyframes ambient-rain{to{background-position:20px 100px}}
@media(prefers-reduced-motion:reduce){body[data-precipitation]::after{display:none}}
@media(max-width:700px){h1{font-size:clamp(30px,8vw,42px)!important}.topbar{flex-wrap:wrap}.topbar .nav{display:flex!important;overflow-x:auto;width:100%;padding:8px 0;gap:16px}.topbar .nav a{white-space:nowrap}}

/* Visual prototype: photographic story and calm, purposeful motion. */
.hero-photo{transform:scale(1.035);animation:hero-breathe 18s ease-in-out infinite alternate;will-change:transform}
.hero-overlay{background:linear-gradient(90deg,rgba(2,20,16,.95),rgba(2,20,16,.67) 48%,rgba(2,20,16,.12)),linear-gradient(0deg,rgba(2,20,16,.34),transparent 50%)}
.hero-content>*{opacity:0;transform:translateY(18px);animation:hero-copy-in .7s ease forwards}
.hero-content>*:nth-child(2){animation-delay:.12s}.hero-content>*:nth-child(3){animation-delay:.22s}.hero-content>*:nth-child(4){animation-delay:.32s}.hero-content>*:nth-child(5){animation-delay:.42s}
.field-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:0;min-height:470px;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow)}
.field-story-photo{position:relative;min-height:470px;margin:0;overflow:hidden}
.field-story-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,var(--surface)),linear-gradient(0deg,rgba(3,25,21,.2),transparent)}
.field-story-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.field-story.is-visible .field-story-photo img{transform:scale(1.025)}
.field-story-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,62px);position:relative;z-index:2}
.field-story-copy h2{max-width:13ch;margin:0 0 18px;font-size:clamp(2rem,4vw,3.35rem);line-height:1.04}
.field-story-copy>p:not(.eyebrow){color:var(--muted);max-width:42ch}
.field-signal{display:flex;align-items:center;gap:12px;margin-top:22px;padding:12px 15px;width:fit-content;border:1px solid rgba(83,217,173,.35);border-radius:14px;background:rgba(83,217,173,.08)}
.field-signal span{display:flex;align-items:center;gap:8px}.field-signal span i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(83,217,173,.55);animation:signal-pulse 2s ease-out infinite}.field-signal small{color:var(--muted)}
.sensor-beacon{position:absolute;z-index:3;left:49%;top:70%;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:var(--accent);box-shadow:0 0 0 0 rgba(83,217,173,.5);animation:beacon 2.4s ease-out infinite}.sensor-beacon i{position:absolute;inset:4px;border-radius:50%;background:#fff}
.reveal-on-scroll{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal-on-scroll.is-visible{opacity:1;transform:none}
.nature-photo{transition:transform 1.2s ease}.nature-banner:hover .nature-photo{transform:scale(1.025)}
@keyframes hero-breathe{from{transform:scale(1.035) translate3d(0,0,0)}to{transform:scale(1.085) translate3d(-.8%,.4%,0)}}
@keyframes hero-copy-in{to{opacity:1;transform:none}}
@keyframes signal-pulse{70%{box-shadow:0 0 0 11px rgba(83,217,173,0)}100%{box-shadow:0 0 0 0 rgba(83,217,173,0)}}
@keyframes beacon{70%{box-shadow:0 0 0 28px rgba(83,217,173,0)}100%{box-shadow:0 0 0 0 rgba(83,217,173,0)}}
@media(max-width:820px){.field-story{grid-template-columns:1fr}.field-story-photo{min-height:340px}.field-story-photo:after{background:linear-gradient(0deg,var(--surface),transparent 35%)}.field-story-copy{padding:28px}.field-story-copy h2{max-width:none}}
@media(max-width:520px){.field-story-photo{min-height:280px}.sensor-beacon{left:48%;top:70%}.field-signal{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.hero-photo,.hero-content>*,.sensor-beacon,.field-signal span i{animation:none!important}.hero-content>*{opacity:1;transform:none}.reveal-on-scroll{opacity:1;transform:none;transition:none}.field-story-photo img,.nature-photo{transition:none}}

/* Use the content width, including the explicit mobile preview mode. */
.app-shell{container-type:inline-size}
@container (max-width:700px){
  .hero h1{font-size:2rem!important;line-height:1.22!important;letter-spacing:normal!important;font-weight:600!important}
  .section h2,.nature-banner h2{font-size:1.6rem!important;line-height:1.3!important;letter-spacing:normal!important;font-weight:600!important;max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
  .section h3{font-size:1.15rem;line-height:1.4;letter-spacing:normal;font-weight:600;overflow-wrap:anywhere}
  .section p,.bubble,.architecture article p,.drip-steps p,.impact-flow p,.project-footer p{font-size:1rem;line-height:1.65;letter-spacing:normal;overflow-wrap:anywhere}
  .section .eyebrow,.hero .eyebrow,.zone-kicker{font-size:.875rem;line-height:1.5;letter-spacing:.04em;font-weight:600}
  .section label,.section small,.section dt,.section th,.section td,.plot-row p,.source-note,.map-disclaimer{font-size:.875rem;line-height:1.55;overflow-wrap:anywhere}
  .section input,.section select,.section textarea{font-size:1rem;line-height:1.5}
  .section button,.primary-link{font-weight:600;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
  .topbar .nav a,.segment button{font-size:.875rem;line-height:1.4;font-weight:500}
  .toolbar{flex-wrap:wrap}
  .nature-banner{padding:24px 20px 275px}
  .nature-banner h2{margin:8px 0 16px}
  .nature-photo{height:255px}
  .project-footer{display:grid;grid-template-columns:1fr;gap:20px;font-size:.875rem;line-height:1.65}
  .footer-contact{text-align:left}
  .footer-contact .footer-author{font-size:1.125rem;line-height:1.6;letter-spacing:normal}
  .footer-legal{flex-wrap:wrap}
  .zone-map{display:grid;gap:10px;padding:14px;min-height:0}
  .zone-shape{position:static;width:100%;min-height:0;border-radius:14px;padding:14px;transform:none}
  .zone-map:before{display:none}
  .zone-detail{padding:16px}
  .weather-facts{grid-template-columns:1fr}
  .section-head{align-items:flex-start;flex-wrap:wrap}
}