@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');

:root { --cream:#f2eddf; --ink:#102f32; --orange:#ef6d39; --teal:#2b7772; --lime:#c9d86a; --river:#74c9c1; --progress:0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--cream); background:var(--ink); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
a { color:inherit; }
.mobile-only { display:none; }
.skip-link { position:fixed; top:-4rem; left:1rem; z-index:100; background:white; color:#111; padding:.8rem 1rem; }
.skip-link:focus { top:1rem; }
.progress { position:fixed; inset:0 0 auto; height:4px; background:#ffffff18; z-index:90; }
.progress span { display:block; width:calc(var(--progress) * 100%); height:100%; background:var(--orange); }
.site-header { position:fixed; z-index:50; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:1.3rem 2rem; pointer-events:none; mix-blend-mode:difference; }
.brand,.sound-btn { pointer-events:auto; }
.brand { display:flex; gap:.65rem; align-items:center; text-decoration:none; font-weight:700; line-height:.9; letter-spacing:-.03em; }
.brand small { font-size:.58rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.brand-mark { display:grid; place-items:center; width:2.5rem; aspect-ratio:1; border:1px solid currentColor; border-radius:50%; font-family:"Fraunces",serif; font-size:1.4rem; }
.sound-btn { border:1px solid #ffffff66; border-radius:999px; color:inherit; background:#0003; backdrop-filter:blur(8px); padding:.65rem .9rem; display:flex; align-items:center; gap:.55rem; font:600 .66rem/1 "DM Sans"; text-transform:uppercase; letter-spacing:.09em; cursor:pointer; }
.sound-bars { display:flex; gap:2px; align-items:end; height:10px; }
.sound-bars i { display:block; width:2px; height:5px; background:currentColor; }
.sound-btn[aria-pressed="true"] .sound-bars i { animation:pulse .7s ease-in-out infinite alternate; }
.sound-btn[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:.2s}.sound-btn[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:.4s}
@keyframes pulse { to { height:11px; } }
.era-nav { position:fixed; z-index:45; right:1.4rem; top:50%; translate:0 -50%; display:grid; gap:.8rem; }
.era-nav a { width:9px; height:9px; border:1px solid #fff; border-radius:50%; background:#ffffff20; text-decoration:none; position:relative; transition:.25s; }
.era-nav a span { position:absolute; right:1rem; top:50%; translate:0 -50%; opacity:0; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; transition:.25s; white-space:nowrap; }
.era-nav a:hover span,.era-nav a:focus span,.era-nav a.active span { opacity:1; }
.era-nav a.active { background:var(--orange); border-color:var(--orange); scale:1.5; }
.hero { min-height:100svh; position:relative; display:flex; align-items:flex-end; padding:clamp(7rem,13vw,11rem) clamp(1.4rem,7vw,7rem); overflow:hidden; }
.hero-image,.hero-wash { position:absolute; inset:-5%; }
.hero-image { background:url("assets/gore-river-hero.webp") 63% center/cover no-repeat; transform:translateY(calc(var(--hero-shift, 0) * 1px)) scale(1.06); }
.hero-wash { background:linear-gradient(90deg,#092329ee 0%,#092329b8 36%,transparent 73%),linear-gradient(0deg,#102f32 0%,transparent 28%); }
.hero-copy { position:relative; z-index:2; max-width:880px; }
.eyebrow,.chapter-kicker { margin:0 0 1rem; font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,.year { font-family:"Fraunces",serif; }
h1 { margin:0; font-size:clamp(3.6rem,7vw,6.5rem); line-height:.8; letter-spacing:-.035em; word-spacing:.12em; text-wrap:balance; }
.hero-intro { max-width:520px; margin:2rem 0 0; font-size:clamp(1rem,1.7vw,1.35rem); line-height:1.55; }
.hero-year { position:absolute; right:-.02em; bottom:-.12em; font:800 clamp(5rem,18vw,18rem)/.75 "Fraunces",serif; letter-spacing:-.08em; color:#ffffff10; white-space:nowrap; }
.scroll-cue { position:absolute; right:clamp(2rem,8vw,8rem); bottom:3rem; z-index:2; display:flex; align-items:center; gap:.7rem; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; }
.scroll-cue span { display:block; height:2.6rem; width:1.3rem; border:1px solid #fff8; border-radius:2rem; position:relative; }
.scroll-cue span:after { content:""; position:absolute; width:3px; height:7px; background:white; border-radius:3px; left:50%; top:6px; translate:-50%; animation:scroll 1.7s infinite; }
@keyframes scroll { 70%,100% { transform:translateY(18px); opacity:0; } }
.story { position:relative; }
.river-line { position:absolute; z-index:4; inset:0 auto 0 50%; width:min(19vw,230px); height:100%; translate:-50%; overflow:visible; pointer-events:none; }
.river-line path { fill:none; vector-effect:non-scaling-stroke; }
.river-shadow { stroke:#173e3e; stroke-width:20; opacity:.2; }
#riverPath { stroke:var(--river); stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--river-progress, 0)); path-length:1; }
.chapter { min-height:115vh; position:relative; display:flex; align-items:center; padding:8rem clamp(1.4rem,8vw,9rem); overflow:hidden; }
.chapter-inner { width:min(43%,620px); position:relative; z-index:5; opacity:.3; transform:translateY(55px); transition:opacity .8s,transform .8s; }
.chapter.visible .chapter-inner { opacity:1; transform:none; }
.chapter-inner.right { margin-left:auto; }
.chapter-inner.wide { width:100%; max-width:1200px; margin:auto; }
.chapter-kicker { color:var(--orange); }
.year { font-size:clamp(3.8rem,7vw,6.7rem); line-height:.78; letter-spacing:-.065em; margin:0 0 1.6rem; opacity:.22; }
.word-year { font-size:clamp(3.2rem,6vw,5.8rem); }
h2 { margin:0; font-size:clamp(2.7rem,4.6vw,4.8rem); line-height:.92; letter-spacing:-.055em; }
.lead { max-width:600px; margin:1.7rem 0; font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.7; }
.chapter-dark { background:#102f32; }
.chapter-tussock { background:#d7c68d; color:#173335; }
.chapter-paper { color:#27302c; background-color:#efe8d7; background-image:linear-gradient(#163b3b10 1px,transparent 1px),linear-gradient(90deg,#163b3b10 1px,transparent 1px); background-size:28px 28px; }
.chapter-ink { background:#183e3c; }
.chapter-sky { background:linear-gradient(#74979e,#d7c897 73%,#9f8b55); color:#173335; }
.chapter-night { background:radial-gradient(circle at 75% 50%,#724326 0%,#172d32 42%,#091d25 75%); }
.chapter-green { background:#b8c96b; color:#183632; }
.chapter-today { background:#ef6d39; color:#172f31; min-height:auto; padding-block:11rem; }
blockquote { font:600 clamp(1.5rem,2.5vw,2.2rem)/1.2 "Fraunces"; margin:3rem 0 0; border-left:3px solid var(--orange); padding-left:1.5rem; max-width:500px; }
.fact-stamp { border:2px solid currentColor; border-radius:50%; width:12rem; aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:1rem; margin:3rem 0 0 auto; }
.fact-stamp span,.fact-stamp small { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; }.fact-stamp strong { font:800 2rem "Fraunces"; }
.rotate-left { rotate:-8deg; }
.survey-map { width:min(100%,560px); margin:2.7rem 0 0; color:#223b38; background:#ddd2b8; border:1px solid #40514b; box-shadow:10px 12px 0 #243c36; rotate:-1.2deg; }
.survey-heading,.survey-map figcaption { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; text-transform:uppercase; letter-spacing:.13em; font-size:.57rem; border-bottom:1px solid #40514b; }
.survey-heading strong { font:800 1rem "Fraunces"; letter-spacing:.04em; }
.survey-map svg { display:block; width:100%; height:auto; background:#e8dfca; }
.survey-map figcaption { border:0; border-top:1px solid #40514b; letter-spacing:.06em; text-transform:none; }
.map-paper { fill:#e8dfca; }.map-grain{fill:#6e7668;opacity:.16}.survey-river{fill:none;stroke:#4b8581;stroke-width:72;opacity:.82}.survey-bank{fill:none;stroke:#233d38;stroke-width:1.3;stroke-dasharray:7 5}.lots path{fill:none;stroke:#344a43;stroke-width:1.2}.lots .main-road{stroke:#b15436;stroke-width:12;opacity:.48}.ford-line{fill:none;stroke:#e8dfca;stroke-width:8;stroke-dasharray:5 4}.town-mark{fill:#b15436;stroke:#e8dfca;stroke-width:3}.north path,.note-arrow{fill:none;stroke:#263e39;stroke-width:1.5}.north text{font:700 13px "DM Sans"}.map-label{fill:#263e39;font:700 12px "DM Sans";letter-spacing:2px}.town-label{font:800 26px "Fraunces";letter-spacing:4px}.river-label{fill:#e8dfca;font-size:10px}.map-note{fill:#263e39;font:italic 15px "Fraunces"}
.historic-photo { position:absolute; z-index:6; margin:0; padding:.65rem; color:#1d3532; background:#ede4d2; border:1px solid #203b37; box-shadow:12px 14px 0 #102f3230; }
.historic-photo a { display:block; overflow:hidden; background:#172f31; }
.historic-photo img { display:block; width:100%; height:auto; filter:grayscale(1) sepia(.18) contrast(1.08); transition:transform .6s,filter .6s; }
.historic-photo:hover img { transform:scale(1.025); filter:grayscale(.45) sepia(.1) contrast(1.03); }
.historic-photo figcaption { padding:.85rem .35rem .25rem; display:grid; gap:.22rem; }
.historic-photo figcaption span { color:#b94f32; font-size:.58rem; font-weight:700; letter-spacing:.16em; }
.historic-photo figcaption strong { font:800 1.2rem/1.1 "Fraunces"; }
.historic-photo figcaption small { max-width:30rem; font-size:.61rem; line-height:1.45; opacity:.72; }
.browne-portrait { right:clamp(4rem,10vw,11rem); top:19%; width:clamp(215px,19vw,280px); rotate:3deg; }
.browne-portrait img { aspect-ratio:3/4; object-fit:cover; object-position:center top; }
.rail-photo { left:clamp(3.5rem,7vw,7rem); top:24%; width:min(37vw,510px); rotate:-2deg; }
.rail-photo img { aspect-ratio:1.55; object-fit:cover; }
.mataura-photo { right:clamp(3.5rem,7vw,7rem); top:31%; width:min(39vw,540px); rotate:1.5deg; }
.mataura-photo img { aspect-ratio:2.15; object-fit:cover; }
.settler-photo { left:clamp(3.5rem,7vw,7rem); top:25%; width:min(38vw,510px); rotate:-2.2deg; }
.settler-photo img { aspect-ratio:1.48; object-fit:cover; }
.flight-photo { right:clamp(4rem,8vw,8rem); top:23%; width:min(35vw,470px); rotate:2deg; }
.flight-photo img { aspect-ratio:1.34; object-fit:cover; }
.mainstreet-photo { left:clamp(3.5rem,7vw,7rem); top:24%; width:min(39vw,530px); rotate:-1.5deg; }
.mainstreet-photo img { aspect-ratio:1.5; object-fit:cover; }
.district-map-photo { right:clamp(6rem,12vw,13rem); top:16%; width:clamp(230px,22vw,320px); rotate:2deg; }
.district-map-photo a { background:#e9e4d4; padding:1rem; }
.district-map-photo img { height:min(56vh,540px); object-fit:contain; filter:none; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3rem; border-top:1px solid #fff4; padding-top:1.6rem; }
.stat-row div { display:flex; align-items:center; gap:1rem; }.stat-row strong{font:800 3.5rem "Fraunces"}.stat-row span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;max-width:120px}
.plane { position:absolute; z-index:3; left:calc((var(--chapter-progress, 0) * 105%) - 10%); top:25%; color:#173335; font-size:4rem; rotate:-8deg; filter:drop-shadow(10px 12px 0 #17333522); }
.flight-log { display:flex; gap:1rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; align-items:center; }.flight-log span{opacity:.55}
.neon-sign { margin-top:3rem; border:2px solid #efb265; box-shadow:0 0 20px #ef6d3955,inset 0 0 20px #ef6d3933; padding:1.7rem; width:min(100%,420px); text-align:center; rotate:-2deg; }.neon-sign span,.neon-sign small{display:block;font-size:.65rem;letter-spacing:.2em}.neon-sign strong{display:block;font:800 2.3rem "Fraunces";color:#f4a463;text-shadow:0 0 12px #ef6d39}
.big-number { margin-top:2rem; display:flex; flex-direction:column; }.big-number strong{font:800 clamp(4.5rem,8vw,7.5rem)/.8 "Fraunces";letter-spacing:-.07em}.big-number span{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;margin-top:1rem}
.today-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:5rem; border-top:1px solid #173335; border-left:1px solid #173335; }
.feature { min-height:500px; border-right:1px solid #173335; border-bottom:1px solid #173335; display:flex; flex-direction:column; color:inherit; text-decoration:none; overflow:hidden; transition:.35s; }.feature:hover{background:#f1e8d4;transform:translateY(-10px)}
.feature-media { display:block; height:210px; position:relative; overflow:hidden; border-bottom:1px solid #173335; }
.feature-media img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.75) contrast(1.05); transition:transform .6s,filter .6s; }
.feature:hover .feature-media img { transform:scale(1.05); filter:saturate(1) contrast(1); }
.feature-icon { position:absolute; right:1rem; bottom:1rem; display:grid; place-items:center; width:3.25rem; aspect-ratio:1; color:#f3ead8; background:#173335cc; border:1px solid #f3ead8; border-radius:50%; font:normal 1.5rem/1 "DM Sans"; backdrop-filter:blur(4px); }
.feature-copy { display:flex; flex:1; flex-direction:column; padding:1.5rem; }
.feature-overline { font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 .5rem; }
.feature strong{font:800 1.75rem/1 "Fraunces"}.feature small{font-size:.8rem;line-height:1.5;margin-top:1rem}.feature em{font-style:normal;font-size:.54rem;line-height:1.35;margin-top:auto;padding-top:1.3rem;opacity:.6}
.finale { min-height:85vh; padding:8rem clamp(1.4rem,8vw,9rem); display:flex; justify-content:space-between; align-items:center; background:linear-gradient(#102f32aa,#102f32ee),url("assets/gore-river-hero.webp") center/cover fixed; }
.finale h2 { font-size:clamp(3.3rem,6.5vw,6rem); }
.round-link { display:flex; flex-direction:column; justify-content:space-between; width:clamp(9rem,18vw,14rem); aspect-ratio:1; border-radius:50%; border:1px solid #fff; padding:2rem; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; transition:.3s; }.round-link span{align-self:flex-end;font-size:2rem}.round-link:hover{background:var(--orange);border-color:var(--orange);rotate:6deg}
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem; background:#071b20; font-size:.72rem; color:#ffffff88; }.sources{text-align:right}.sources a:hover{color:white}
@media (max-width:850px){.site-header{padding:1rem}.sound-btn{display:none}.era-nav{right:.75rem}.era-nav a span{display:none}.hero{padding:7rem 1.4rem 5rem}.hero-image{background-position:68% center}.scroll-cue{display:none}.river-line{left:1.7rem;width:70px;translate:0}.chapter{min-height:105vh;padding:7rem 2.6rem 7rem 4.7rem}.chapter.has-photo{flex-direction:column;align-items:stretch}.chapter-inner,.chapter-inner.right{width:100%;max-width:none;margin:0}.historic-photo{position:relative;inset:auto;width:min(88%,520px);margin-top:2.5rem}.browne-portrait{margin-left:auto}.today-grid{grid-template-columns:1fr 1fr}.finale{align-items:flex-start;flex-direction:column;justify-content:center;gap:4rem;background-attachment:scroll}footer{flex-direction:column}.sources{text-align:left}}
@media (max-width:540px){h1{font-size:2.9rem;line-height:.84}.mobile-only{display:block}h2{font-size:2.55rem}.year{font-size:3.65rem}.hero-intro{font-size:.94rem;max-width:19rem}.survey-heading span:first-child{display:none}.survey-map figcaption span:last-child{display:none}.today-grid{grid-template-columns:1fr}.feature{min-height:280px}.stat-row{grid-template-columns:1fr}.flight-log{font-size:.58rem}.finale{min-height:90vh}.chapter-today{padding-block:8rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-image{transform:none}.plane{left:72%}}