:root{
  --ink:#24251f;
  --blood:#8d2b22;
  --clay:#c55d2d;
  --paper:#f3eddf;
  --river:#123d49;
  --river-light:#2d6a73;
  --sand:#d8b98a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
body:before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}

.opening{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#142328}
.opening>img{width:100%;height:100%;object-fit:cover;object-position:center 52%;animation:heroBreathe 18s ease-in-out infinite alternate}
.opening-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,28,34,.76) 0%,rgba(9,28,34,.22) 54%,rgba(9,28,34,.08) 100%);mix-blend-mode:multiply}
.hero-title{position:absolute;z-index:2;left:7vw;right:7vw;bottom:12vh;color:#fff9ee;display:grid;grid-template-columns:minmax(0,1080px) auto;align-items:end;gap:4rem}
.hero-title h1{max-width:1140px;margin:0;font-size:clamp(3.8rem,8.4vw,8.8rem);font-weight:400;line-height:.91;letter-spacing:-.06em;text-wrap:balance;text-shadow:0 3px 30px rgba(4,20,24,.56)}
.hero-title h1 em{color:#e2a66f;font-weight:400}
.credits{margin:0 0 .8rem;white-space:nowrap;font:500 13px/1.75 Arial,sans-serif;letter-spacing:.04em}
.opening-mark{position:absolute;right:4vw;bottom:3.5vh;z-index:3;width:72px;height:72px;border:1px solid rgba(255,249,238,.78);border-radius:50%;display:grid;place-items:center;color:#fff9ee;text-decoration:none;animation:scrollCue 2.2s ease-in-out infinite}
.opening-mark span{font-size:30px}
.opening-mark svg{position:absolute;bottom:7px;width:20px;fill:none;stroke:currentColor;stroke-width:1.5}

.paper-section{background:var(--paper)}
.intro{padding:11rem max(5vw,1.4rem) 8rem}
.statement{max-width:1150px;margin:0 auto 8rem;text-align:center}
.statement p{margin:0;font-size:clamp(2.5rem,4.7vw,5.3rem);line-height:1.04;letter-spacing:-.048em;text-wrap:balance}
.body-copy{font-size:clamp(1.22rem,1.75vw,1.55rem);line-height:1.78}
.text-flow{max-width:780px;margin:0 auto;padding:6rem 2rem}
.text-flow p{margin:0 0 1.8em}

.blood-section{position:relative;background:var(--blood);color:#fff4e8;padding:12rem max(6vw,1.5rem)}
.blood-section:before,.blood-section:after{content:"";position:absolute;left:5vw;right:5vw;height:1px;background:rgba(255,244,232,.23)}
.blood-section:before{top:5rem}.blood-section:after{bottom:5rem}
.blood-copy{max-width:920px;margin:0 auto}
.blood-copy p{max-width:735px;margin:0 0 7rem}
.blood-copy p:nth-child(even){margin-left:auto}
.blood-copy p:last-child{margin-bottom:0}

.full-image{width:100%;height:min(72vw,920px);margin:0;overflow:hidden;background:#33231c}
.full-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.2,.75,.25,1),filter 1.2s ease}
.full-image.is-visible img{transform:scale(1.025)}
.routes{padding:4rem 0 8rem}
.display-line{max-width:1120px!important;margin:1rem auto 8rem!important;font-size:clamp(2.6rem,5.1vw,5.7rem);line-height:1.03;letter-spacing:-.052em;text-align:center;text-wrap:balance}

.clay-intro{background:#ded0b6;padding:10rem max(7vw,1.5rem)}
.clay-intro p{max-width:1080px;margin:0 auto;color:#553626;font-size:clamp(2.5rem,5vw,5.4rem);line-height:1.04;letter-spacing:-.05em;text-align:center;text-wrap:balance}
.orange-frame{width:100%;margin:0;padding:clamp(2rem,4.5vw,4.5rem);background:var(--clay);overflow:visible}
.orange-frame-image{position:relative;width:100%;max-width:1600px;margin:0 auto;aspect-ratio:3/2;overflow:hidden;background:#b87849}
.orange-frame-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.75,.25,1)}
.orange-frame:hover img{transform:scale(1.025)}

.pirapora-section{position:relative;background:var(--river);color:#f7edda;padding:12rem max(6vw,1.5rem)}
.pirapora-copy{max-width:950px;margin:0 auto}
.pirapora-copy p{max-width:760px;margin:0 0 6rem}
.pirapora-copy p:nth-child(even){margin-left:auto;color:#f0c398}
.pirapora-copy p:last-child{margin-bottom:0}
.ocean-statement{min-height:88svh;display:grid;place-items:center;padding:12vh max(6vw,1.5rem)}
.ocean-statement p{max-width:1180px;margin:0;color:var(--river);font-size:clamp(3rem,6vw,6.6rem);line-height:.99;letter-spacing:-.06em;text-align:center;text-wrap:balance}

.scroll-story{position:relative;min-height:315vh;background:#142e32;color:#fff6e6;overflow:clip}
.scroll-story-image{position:absolute;inset:0;height:100%;z-index:0}
.scroll-story-image:after{content:"";position:absolute;inset:0;background:rgba(8,34,40,.42)}
.scroll-story-image img{width:100%;height:100%;object-fit:cover;object-position:center center}
.scroll-story-copy{position:relative;z-index:1;max-width:930px;margin:0 auto;padding:30vh 1.4rem 38vh}
.scroll-story-copy p{max-width:740px;margin:0 auto 62vh;padding:2rem 2.2rem;background:rgba(17,50,56,.9);box-shadow:0 18px 60px rgba(3,21,25,.28);opacity:.08;transform:translateY(3rem);transition:opacity .8s ease,transform .8s ease}
.scroll-story-copy p.is-visible{opacity:1;transform:translateY(0)}
.scroll-story-copy p:last-child{margin-bottom:0}
.scroll-story-copy strong{display:block;margin-top:1.15em;color:#f0b781;font-size:clamp(2rem,4vw,4rem);font-weight:400;line-height:1.05;letter-spacing:-.04em}

.about{background:#28241e;color:#e9dec8;padding:11rem max(7vw,2rem);display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw}
.about-title{font:600 12px/1.2 Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#bd7255;position:sticky;top:3rem;align-self:start}
.about-copy{max-width:770px;font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.75}
.about-copy p{margin:0 0 1.6em}
.signature{color:#bd7255;font-style:italic;margin-top:3rem!important}

.reveal,.reveal-media{opacity:0;transform:translateY(42px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.25,1)}
.reveal.is-visible,.reveal-media.is-visible{opacity:1;transform:none}

@keyframes heroBreathe{from{transform:scale(1.01)}to{transform:scale(1.065)}}
@keyframes scrollCue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

@media(max-width:900px){
  .hero-title{grid-template-columns:1fr;gap:1.4rem;bottom:14vh}
  .hero-title .credits{margin:0}
  .opening-mark{right:1.4rem;bottom:1.4rem}
}

@media(max-width:760px){
  .opening{min-height:680px}
  .opening-wash{background:linear-gradient(0deg,rgba(9,28,34,.8) 0%,rgba(9,28,34,.16) 75%)}
  .hero-title{left:1.35rem;right:1.35rem}
  .hero-title h1{font-size:clamp(3.2rem,14.8vw,5.2rem)}
  .intro{padding-top:7rem;padding-bottom:5rem}
  .statement{margin-bottom:4rem}
  .statement p{font-size:clamp(2.2rem,9vw,3.5rem)}
  .text-flow{padding:4rem 1.4rem}
  .blood-section{padding:9rem 1.4rem}
  .blood-copy p,.blood-copy p:nth-child(even){margin:0 0 5rem}
  .full-image{height:70svh;min-height:520px}
  .routes{padding-bottom:5rem}
  .display-line{margin-bottom:5rem!important;font-size:clamp(2.45rem,10.5vw,3.9rem)}
  .clay-intro{padding:7rem 1.4rem}
  .clay-intro p{font-size:clamp(2.3rem,10vw,3.7rem)}
  .orange-frame{padding:1.4rem}
  .pirapora-section{padding:9rem 1.4rem}
  .pirapora-copy p,.pirapora-copy p:nth-child(even){margin:0 0 5rem}
  .ocean-statement{min-height:72svh}
  .ocean-statement p{font-size:clamp(2.7rem,11vw,4.4rem)}
  .scroll-story{min-height:285vh}
  .scroll-story-copy{padding-top:24vh;padding-bottom:30vh}
  .scroll-story-copy p{padding:1.4rem;margin-bottom:56vh}
  .about{grid-template-columns:1fr;padding:7rem 1.5rem}
  .about-title{position:relative;top:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .opening>img,.opening-mark{animation:none}
  .reveal,.reveal-media,.scroll-story-copy p{opacity:1;transform:none;transition:none}
}
