/* Get Moving! — AWWA Home · Forest & Whale — story page (draft 3)
   Tokens follow forestandwhale.com so it can be embedded later. */

@font-face{font-family:'Nitti Grotesk';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/NittiGrotesk-Light.woff2') format('woff2')}
@font-face{font-family:'Nitti Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/NittiGrotesk-Regular.woff2') format('woff2')}
@font-face{font-family:'Nitti Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/NittiGrotesk-Bold.otf') format('opentype')}
@font-face{font-family:'Nitti Grotesk';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/NittiGrotesk-Italic.otf') format('opentype')}

:root{
  --ink:#161616;--ink-soft:#3a3a3a;--muted:#777370;--line:#e8e5e0;--rule:#d6d3cd;
  --paper:#ffffff;--paper-2:#f5f3ef;
  --quote-blue:#b7e2f5;--quote-grey:#eef0f2;
  --font:'Nitti Grotesk','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --fs-lead:clamp(1.3rem,2.35vw,2.05rem);
  --fs-caption:clamp(1.05rem,1.45vw,1.3rem);
  --gutter:clamp(1rem,4vw,3rem);
  --car-h:clamp(100px,15vh,170px);       /* carousel height */
  --cap-gap:clamp(.6rem,1.6vh,1rem);     /* image -> text */
  --car-gap:clamp(1rem,2.6vh,1.6rem);    /* text -> carousel */
  --m:clamp(24px,4.8vh,64px);            /* white margin above and below page content (pages with carousels) */
  --side:96px;                           /* carousel side margin; set by script = image-to-carousel distance */
  --content-w:min(calc(100vw - 2 * var(--side)), 1680px);
  --vh:100vh;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@supports (height:100svh){:root{--vh:100svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;font-family:var(--font);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior:none}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
figure{margin:0}

/* ---------- Typing ---------- */
.js .typed .c{color:transparent}
.js .typed .c.on{color:inherit}
.js .typed a{text-decoration:none}
.js .typed a .c.on{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.cursor{position:absolute;width:0;pointer-events:none}
.cursor::after{content:"";position:absolute;left:.08em;top:6%;width:1.5px;height:88%;background:currentColor;animation:blink 1.05s steps(1) infinite}
.cursor.is-typing::after{animation:none}
@keyframes blink{50%{opacity:0}}

/* ---------- Pages ---------- */
.page{position:relative;min-height:var(--vh);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(1rem,3.5vh,2.2rem) 0;background:var(--paper)}
.page + .page::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--content-w);height:1px;background:var(--rule)}
.page-inner{width:100%;display:flex;flex-direction:column;align-items:center;transition:opacity .45s var(--ease)}
.page.is-faded .page-inner{opacity:0}
.cue{position:absolute;left:50%;bottom:calc(var(--m) / 2);transform:translate(-50%,50%);display:flex;align-items:center;gap:.5rem;font-size:.66rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .6s ease;pointer-events:none}
.cue.is-on{opacity:1}
.cue::after{content:"\2193";font-size:.8rem;letter-spacing:0;animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}

/* text pages */
.lead{font-size:var(--fs-lead);line-height:1.42;margin:0;font-weight:300;text-align:center;width:min(calc(100% - 2 * var(--gutter)),660px)}
.lead--wide{width:min(calc(100% - 2 * var(--gutter)),780px)}
.lead + .lead{margin-top:.9em}
.wide-text{width:var(--content-w);margin-top:clamp(1.6rem,4vh,2.6rem);font-size:1rem;font-weight:400;color:var(--ink-soft);line-height:1.6;text-align:left}
.wide-text p{margin:0 0 .7em}
.js .after{opacity:0;transition:opacity .9s var(--ease)}
.js .after.is-in{opacity:1}

/* image pages */
.caption{font-size:var(--fs-caption);line-height:1.5;text-align:center;width:min(calc(100% - 2 * var(--gutter)),72ch);flex:none;margin:var(--cap-gap) auto 0}
.fig-ward{width:min(calc(100% - 2 * var(--gutter)),1040px,calc((var(--vh) - 12rem) * 3150 / 1920))}
.fig-ward svg{max-height:none}
.fig-constellation{width:min(calc(100% - 2 * var(--gutter)),calc((var(--vh) - var(--car-h) - 14rem) * 680 / 700))}
.fig-ba{width:min(calc(100% - 2 * var(--gutter)),1040px,calc((var(--vh) - var(--car-h) - 13rem) * 2040 / 1180))}
.ba-crop{position:relative;aspect-ratio:2040/1180;overflow:hidden}
.ba-crop canvas{position:absolute;width:114.559%!important;left:-7.353%;top:-18.644%;max-width:none}
.hero-pair{display:flex;gap:8px;justify-content:center}
.hero-pair img{height:calc(var(--vh) - var(--car-h) - 15rem);max-height:560px;width:auto;max-width:calc(50vw - var(--gutter) - 4px);object-fit:cover}
.hero-single img{height:calc(var(--vh) - var(--car-h) - 15rem);max-height:600px;width:auto;max-width:calc(100vw - 2 * var(--gutter));object-fit:cover}
.zoomable{cursor:zoom-in}
.js .fade{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .fade.is-in{opacity:1;transform:none}

/* ---------- Carousel (inset by --side on both sides) ---------- */
.carousel{width:var(--content-w);margin-top:var(--car-gap)}
.track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track.is-drag{cursor:grabbing}
.track.is-drag *{pointer-events:none}
.item{flex:0 0 auto;height:var(--car-h);padding:0;border:0;background:var(--paper-2);display:block;position:relative;overflow:hidden}
.item img{height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;transition:transform .6s var(--ease)}
button.item{cursor:zoom-in}
button.item:hover img{transform:scale(1.03)}
button.item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.quote{width:calc(var(--car-h) * 1.25);display:flex;align-items:center;justify-content:center;padding:.7rem .8rem;text-align:center;font-size:calc(var(--car-h) * .105);line-height:1.25;font-weight:300}
.quote--blue{background:var(--quote-blue)}
.quote--grey{background:var(--quote-grey)}
.quote--wide{width:calc(var(--car-h) * 2.6);font-size:calc(var(--car-h) * .082);text-align:left}
.js .carousel .item{opacity:0;transform:translateX(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .carousel.is-in .item{opacity:1;transform:none}

/* ---------- Team ---------- */
.team-list{font-size:var(--fs-caption);line-height:1.55;width:min(calc(100% - 2 * var(--gutter)),560px)}
.team-list p{margin:0 0 1.1em}
.team-list p:last-of-type{margin-bottom:0}
.team-list p > span{display:block}
.back{display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(1.6rem,4vh,2.6rem);border:1px solid var(--ink);border-radius:999px;padding:.7rem 1.35rem;font-size:.95rem;font-weight:400;text-decoration:none;transition:background .2s,color .2s}
.back:hover{background:var(--ink);color:#fff}

/* ---------- Sound toggle (browsers only allow sound after a click / tap / key press) ---------- */
.sound{position:fixed;left:16px;bottom:14px;z-index:60;display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.85);border:0;padding:.35rem .5rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.sound svg{width:16px;height:16px}
.sound .on{display:none}
.sound.is-on .on{display:inline}
.sound.is-on .off{display:none}
.sound:hover{color:var(--ink)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.97);display:none;flex-direction:column}
.lb.is-open{display:flex}
.lb-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:56px 64px 16px;overscroll-behavior:contain}
.lb-stage img{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;cursor:zoom-in}
.lb.is-zoom .lb-stage{align-items:flex-start;justify-content:flex-start}
.lb.is-zoom .lb-stage img{max-width:none;max-height:none;cursor:zoom-out;margin:auto}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:1.4rem;padding:12px 16px 18px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb button{background:none;border:0;cursor:pointer;padding:.5rem;font-size:1.4rem;line-height:1;color:var(--ink)}
.lb .lb-close{position:absolute;top:12px;right:16px}
.lb .lb-prev,.lb .lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;padding:1rem}
.lb .lb-prev{left:8px}.lb .lb-next{right:8px}

@media (max-width:700px){
  :root{--car-h:clamp(90px,14vh,130px);--side:var(--gutter)}
  .hero-pair img,.hero-single img{height:auto;max-height:calc(var(--vh) - var(--car-h) - 17rem)}
  .lb-stage{padding:52px 8px 8px}
  .lb .lb-prev,.lb .lb-next{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .fade,.js .carousel .item,.js .after,.page-inner{transition:none!important;transform:none!important}
  .cue::after,.cursor::after{animation:none}
}


/* ---------- Pages with the shared white margin (--m top and bottom); the main visual fills the rest ---------- */
.page--fill,.page--steps{padding:var(--m) 0}
.page--fill .page-inner,.page--steps .page-inner{height:calc(var(--vh) - 2 * var(--m))}
.visual{flex:1 1 0;min-height:0;width:100%;container-type:size;display:flex;align-items:center;justify-content:center}
.page .fig-constellation svg{width:min(100cqw,calc(100cqh * 620 / 642));height:auto;max-height:100cqh}
.page .fig-ba{width:100%}
.page .fig-ba .ba-crop{width:min(calc(100cqw - 2 * var(--gutter)),calc(100cqh * 2040 / 1180))}
.page .hero-pair{width:100%;gap:8px}
.page .hero-pair img{height:min(100cqh,calc((100cqw - 2 * var(--gutter) - 8px) / 2 * 1448 / 1095));width:auto;max-width:none;max-height:none}
.page .hero-single{width:100%}
.page .hero-single img{width:auto;height:auto;max-width:calc(100cqw - 2 * var(--gutter));max-height:100cqh}
.page--fill .carousel{flex:none}

/* ---------- Two-step pages (outcomes, team) ---------- */
.page--steps .page-inner{justify-content:flex-start}
.group{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.shift{transition:transform .9s var(--ease)}
.page[data-states]:not(.is-state2) .shift{transform:translateY(var(--shift,0px))}
.page[data-states] [data-state="2"]{transition:opacity .7s var(--ease)}
.page[data-states]:not(.is-state2) [data-state="2"]{opacity:0!important;pointer-events:none}
.bullets{list-style:none;margin:clamp(1.8rem,5vh,3rem) 0 0;padding:0;width:min(calc(100% - 2 * var(--gutter)),720px);font-size:var(--fs-caption);line-height:1.55}
.bullets li{position:relative;padding-left:1.4em;margin:0 0 1.15em}
.bullets li:last-child{margin-bottom:0}
.bullets li::before{content:"\2022";position:absolute;left:.2em;top:0}
.page--steps .team-list{margin-top:clamp(1.8rem,5vh,3rem)}
.page--steps .wide-text{flex:none;margin-top:var(--car-gap)}
.page--steps .back{margin-top:clamp(1.4rem,3.5vh,2.2rem)}
.js .bullets li.typed::before{opacity:0;transition:opacity .3s}
.js .bullets li.typed:has(.c.on)::before{opacity:1}

/* ---------- Team: names left-aligned with the heading ---------- */
.team-block{display:grid;justify-items:start;width:max-content;max-width:calc(100% - 2 * var(--gutter))}
.team-block .team-title{width:auto;max-width:100%;text-align:left}
.team-block .team-list{width:0;min-width:100%}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:clamp(1.6rem,4vh,2.4rem)}
.actions .back{margin-top:0}
.btn-3d{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;padding:.7rem 1.35rem;font-size:.95rem;font-weight:400;cursor:pointer;transition:background .2s,color .2s}
.btn-3d:hover{background:transparent;color:var(--ink)}

/* ---------- 3D room overlay ---------- */
.viz{position:fixed;inset:0;z-index:200;background:#fff;opacity:0;transition:opacity 1.3s ease}
.viz iframe{opacity:0;transition:opacity 1.2s ease}
.viz.is-loaded iframe{opacity:1}
.viz.is-on{opacity:1}
.viz iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.viz-close{position:absolute;top:26px;right:30px;z-index:2;background:rgba(30,30,30,.6);color:#fff;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:.65rem 1.15rem;font-size:.9rem;font-weight:400;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.viz-close:hover{background:rgba(30,30,30,.9)}
@media (max-width:700px){.viz-close{top:12px;right:12px;padding:.55rem .9rem;font-size:.82rem}}
.team-block .team-list p > span{white-space:nowrap}
@media (max-width:700px){.team-block .team-list p > span{white-space:normal}}

/* even line lengths: no single word left alone on the last line */
.lead,.caption{text-wrap:balance}
.bullets li{text-wrap:balance}
.wide-text p,.team-list{text-wrap:pretty}
.nw{white-space:nowrap}
@media (max-width:700px){.lead{font-size:1.16rem;line-height:1.45}}
@media (max-width:380px){.lead{font-size:1.06rem}}

/* labels on the new-ward plan: fade in with the colours after the pencil finishes */
.ba-label{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:var(--fs-caption);font-weight:300;line-height:1;color:var(--ink);opacity:0;transition:opacity 1s ease;pointer-events:none}
.fw-ba.is-coloured .ba-label{opacity:1}

.caption--wide{width:min(calc(100% - 2 * var(--gutter)),1080px)}
/* Team credits: keep the longer credits list on one screen */
.page--steps .team-list p{margin-bottom:.75em}
@media (min-width:701px) and (max-height:860px){
  .team-block .team-list{width:auto;min-width:0;columns:2;column-gap:clamp(2.5rem,5vw,4.5rem)}
  .team-block .team-list p{break-inside:avoid}
}
@media (max-width:700px){
  .page--steps .team-list{font-size:.95rem;line-height:1.45;margin-top:1.3rem}
  .page--steps .team-list p{margin-bottom:.6em}
  .page--steps .wide-text{font-size:.88rem;line-height:1.5}
}
@media (max-width:700px) and (max-height:700px){
  .page--steps .team-list{font-size:.84rem}
  .page--steps .wide-text{font-size:.8rem}
}