/* ───────────────────────── fonts ───────────────────────── */
@font-face{font-family:"Lancea";src:url("../fonts/Lancea.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lancea";src:url("../fonts/Lancea-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-normal.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-italic.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap}

/* ───────────────────────── tokens ───────────────────────── */
:root{
  --noir:#0B0E10;
  --slate:#141C21;
  --slate-2:#1C262C;
  --linen:#F5F1E9;
  --oat:#E5DCCC;
  --brass:#B58A45;
  --brass-lt:#D6B370;
  --ink:#0B0E10;
  --muted:rgba(245,241,233,.62);
  --muted-d:rgba(11,14,16,.6);
  --rule:rgba(245,241,233,.18);
  --gut:clamp(20px,5vw,64px);
  --measure:min(58ch,100%);
  --disp:"Newsreader",Georgia,'Times New Roman',serif;
  --body:"Newsreader",Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--linen);
  font-family:var(--body);font-size:clamp(17px,.367vw + 15.6px,21.5px);line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* fallback */
  overflow-x:clip;     /* does NOT create a scroll container, so sticky survives */
}
img{display:block;max-width:100%}
::selection{background:var(--brass);color:var(--noir)}

/* ───────────────────────── chrome ───────────────────────── */
#bar{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brass),var(--brass-lt));z-index:90}
#mast{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);mix-blend-mode:difference;pointer-events:none;
  font-family:var(--sans);font-size:clamp(11.5px,.286vw + 10.4px,15px);letter-spacing:.15em;text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .5s var(--ease)}
#mast.on{opacity:1}
#mast .ch{opacity:.6}
#mast a{pointer-events:auto}
#mast .logo img{height:34px;width:auto;display:block}
#mast .book{display:flex;gap:8px;margin-left:auto}
#mast .book a,.dock a{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.7);padding:9px 14px;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
#mast .book a:hover{background:#fff;color:#000}
.dock{display:none}
@media(max-width:820px){
  #mast{mix-blend-mode:normal;padding-block:12px;
    background:linear-gradient(180deg,rgba(11,14,16,.8),rgba(11,14,16,0))}
  #mast .book{display:none}
  #mast .logo img{height:24px}
  #mast .ch{display:none}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,14,16,.82);backdrop-filter:blur(10px);border-top:1px solid rgba(245,241,233,.14)}
  .dock a{text-align:center;padding:13px 8px;font-size:11.5px;color:var(--linen);border-color:rgba(245,241,233,.45)}
  .dock a:hover{background:var(--brass);border-color:var(--brass);color:var(--noir)}
  #cue{bottom:84px}
  #finale .colophon{padding-bottom:72px}
}
#dots{position:fixed;right:calc(var(--gut) * .5);top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:14px;mix-blend-mode:difference;opacity:0;transition:opacity .5s var(--ease)}
#dots.on{opacity:1}
#dots a{width:7px;height:7px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:transparent;transition:background .3s,transform .3s}
#dots a.act{background:#fff;transform:scale(1.35)}
@media(max-width:820px){#dots{display:none}}

/* ───────────────────────── primitives ───────────────────────── */
.eyebrow{font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-lt);margin:0 0 1.4em}
.eyebrow.dk{color:var(--brass)}
h1,h2,h3{font-family:var(--disp);font-weight:500;margin:0;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance}
h2{font-size:clamp(26px,3.76vw + 11.9px,72px)}
h3{font-size:clamp(21px,1.55vw + 15.2px,40px);line-height:1.05}
p{margin:0 0 1.25em}
.wrap{padding:clamp(90px,14vh,180px) var(--gut)}
.col{max-width:var(--measure);margin-inline:auto}
.lede{font-size:clamp(18px,.571vw + 15.9px,25px);line-height:1.5}
.drop::first-letter{font-family:var(--disp);float:left;font-size:4.6em;line-height:.76;
  padding:.06em .1em 0 0;color:var(--brass-lt)}
.cap{font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:14px}
.rule{width:56px;height:1px;background:var(--brass);margin:0 0 2.2em}
.light{background:var(--linen);color:var(--ink)}
.light .cap{color:var(--muted-d)}
.light .rule{background:var(--brass)}

/* reveal-on-scroll base — hidden ONLY when js is confirmed alive */
.js .rv{opacity:0;transform:translateY(34px)}
.js.no-anim .rv,.no-anim .rv{opacity:1;transform:none}

/* word split */
.words span{display:inline-block;overflow:hidden;vertical-align:top}
.js .words span i{display:inline-block;font-style:inherit;transform:translateY(105%)}
.words span i{display:inline-block;font-style:inherit}
.js.no-anim .words span i,.no-anim .words span i{transform:none}

/* ───────────────────────── cover ───────────────────────── */
#cover{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:end center}
#cover .bg{position:absolute;inset:-8% -4%;background:url(../img/hero-aerial.jpg) center/cover no-repeat;
  will-change:transform}
.js #cover .bg{transform:scale(1.12)}
#cover .veil{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 78%,rgba(11,14,16,.72) 0%,rgba(11,14,16,0) 62%),
    linear-gradient(180deg,rgba(11,14,16,.72) 0%,rgba(11,14,16,.28) 26%,rgba(11,14,16,.58) 62%,rgba(11,14,16,.96) 100%)}
#cover .inner{position:relative;text-align:center;padding:0 var(--gut) clamp(110px,16vh,170px);max-width:1180px}
#cover h1{font-size:clamp(32px,5.22vw + 12.4px,96px);text-shadow:0 2px 40px rgba(0,0,0,.45)}
#cover h1 em{font-style:italic;color:var(--brass-lt)}
#cover .sub{margin:1.6em auto 0;max-width:52ch;color:rgba(245,241,233,.86);font-size:clamp(18.5px,.408vw + 17px,23.5px)}
#cover .kick{font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,241,233,.75);margin-bottom:2.2em}
#cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:clamp(11px,.286vw + 9.9px,14.5px);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,233,.66);
  display:flex;flex-direction:column;align-items:center;gap:10px}
#cue::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,rgba(245,241,233,.7),transparent);
  animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}
  46%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ───────────────────────── standfirst ───────────────────────── */
#dek{background:var(--linen);color:var(--ink)}
#dek .col{max-width:min(62ch,100%)}
#dek .lede{font-size:clamp(18px,.408vw + 16.5px,23px);line-height:1.5}
.byline{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:3em;
  font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.byline b{font-weight:600;color:var(--ink)}

/* ───────────────────────── scrollmation ───────────────────────── */
.scrollmation{position:relative}
.scrollmation .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.scrollmation .layer{position:absolute;inset:0;will-change:opacity,transform}
.js .scrollmation .layer{opacity:0}
.scrollmation .layer:first-child{opacity:1}
.scrollmation .layer img{width:100%;height:100%;object-fit:cover}
.scrollmation .stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,14,16,.9) 0%,rgba(11,14,16,.55) 46%,rgba(11,14,16,.15) 100%)}
@media(max-width:820px){.scrollmation .stage::after{background:linear-gradient(180deg,rgba(11,14,16,.55),rgba(11,14,16,.88))}}
.scrollmation .panels{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.panel{min-height:100svh;display:flex;align-items:center;padding:12vh var(--gut)}
.panel .card{max-width:42ch;background:rgba(11,14,16,.34);backdrop-filter:blur(2px);
  padding:clamp(24px,3vw,44px);border-left:1px solid var(--brass)}
@media(max-width:820px){.panel .card{max-width:100%;background:rgba(11,14,16,.5)}}

/* ───────────────────────── quote ───────────────────────── */
.quote{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.quote .bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform}
.quote .veil{position:absolute;inset:0;background:rgba(11,14,16,.68)}
.quote blockquote{position:relative;margin:0;padding:0 var(--gut);max-width:26ch;
  font-family:var(--disp);font-weight:400;font-size:clamp(23px,3.02vw + 11.7px,60px);line-height:1.1;font-style:italic}
.quote .attr{position:relative;margin-top:2.4em;font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.quote.small blockquote{max-width:30ch;font-size:clamp(20px,2.12vw + 12.1px,46px)}

/* ───────────────────────── reveal frame ───────────────────────── */
.revealer{position:relative;height:220vh;background:var(--noir)}
.revealer .stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.revealer figure{margin:0;width:min(1400px,100%);height:100svh;position:relative;will-change:clip-path}
.js .revealer figure{clip-path:inset(22% 16% round 2px)}
.no-anim .revealer figure{clip-path:none!important}
.revealer figure img{width:100%;height:100%;object-fit:cover}
.revealer .over{position:absolute;inset:auto 0 0 0;padding:0 var(--gut) clamp(40px,7vh,80px);
  display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,80px);justify-content:center;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(11,14,16,.85))}
.stat b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.27vw + 13.7px,66px);line-height:1;color:var(--linen)}
.stat span{font-family:var(--sans);font-size:clamp(12px,.327vw + 10.8px,16px);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ───────────────────────── sticky diptych ───────────────────────── */
.diptych{display:grid;grid-template-columns:1fr 1fr;background:var(--slate)}
.diptych .media{margin:0;position:sticky;top:0;height:100svh;overflow:hidden}
.diptych .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .diptych .media img{opacity:0}
.diptych .media img:first-child{opacity:1}
.diptych .media .mcap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:clamp(48px,8vh,90px) clamp(20px,2.6vw,36px) clamp(18px,2.4vh,28px);
  background:linear-gradient(180deg,transparent,rgba(11,14,16,.78));
  font-family:var(--sans);font-size:clamp(12px,.327vw + 10.8px,16px);letter-spacing:.09em;
  text-transform:uppercase;color:rgba(245,241,233,.85);transition:opacity .4s var(--ease)}
.diptych .text{padding:0 clamp(24px,3.4vw,64px)}
.diptych .blk{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:12vh 0;border-bottom:1px solid var(--rule)}
.diptych .blk:last-child{border-bottom:0}
@media(max-width:900px){
  /* Single column: the image goes full-bleed behind and the text scrolls over it,
     same as the scrollmation chapters. Sticky-image-plus-flowing-text collides. */
  .diptych{grid-template-columns:1fr}
  .diptych .media{height:100svh}
  .diptych .media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,14,16,.42) 0%,rgba(11,14,16,.74) 42%,rgba(11,14,16,.93) 100%)}
  .diptych .media .mcap{display:none}
  .diptych .text{position:relative;z-index:2;margin-top:-100svh;padding:0 var(--gut)}
  .diptych .blk{min-height:100svh;justify-content:center;padding:14vh 0;border-bottom:0}
  .diptych .blk > *{max-width:34ch}
}

/* ───────────────────────── horizontal gallery ───────────────────────── */
#gallery{position:relative;background:var(--noir)}
#gallery .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
#gallery .track{display:flex;gap:clamp(16px,2.4vw,40px);padding:0 var(--gut);will-change:transform}
#gallery .slide{flex:0 0 auto;width:clamp(240px,34vw,560px)}
#gallery .slide.tall{width:clamp(200px,25vw,400px)}
#gallery .slide img{width:100%;height:clamp(300px,58vh,620px);object-fit:cover}
#gallery .slide.tall img{height:clamp(340px,66vh,720px)}
#gallery .head{flex:0 0 auto;width:clamp(230px,26vw,380px);align-self:center;padding-right:clamp(10px,2vw,30px)}

/* ───────────────────────── awards ───────────────────────── */
#awards{background:var(--linen);color:var(--ink);text-align:center}
.winners{margin:clamp(44px,6vh,80px) auto 0;max-width:560px}
.winners img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 32%}
.laurels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(28px,4vw,64px);
  margin-top:clamp(40px,6vh,80px);border-top:1px solid rgba(11,14,16,.14);padding-top:clamp(36px,5vh,64px)}
.laurel b{display:block;font-family:var(--disp);font-size:clamp(21px,1.39vw + 15.8px,38px);line-height:1.1;margin-bottom:.5em}
.laurel span{font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d)}

/* ───────────────────────── ledger (horizontal timeline) ───────────────────────── */
#ledger{position:relative;background:var(--slate)}
#ledger .stage{position:sticky;top:0;height:100svh;overflow:hidden}
#ledger .head{position:absolute;top:clamp(64px,11vh,110px);left:var(--gut);z-index:4;pointer-events:none}
#ledger .line{display:none}
#ledger .rail{position:absolute;top:0;left:0;height:100%;display:flex;align-items:flex-start;
  padding:26vh max(var(--gut),12vw) 0;gap:clamp(28px,5vw,90px);will-change:transform}
.yr{flex:0 0 auto;width:clamp(250px,25vw,360px);position:relative}
.yr img{width:100%;height:clamp(150px,24vh,230px);object-fit:cover;margin-bottom:22px;filter:saturate(.9)}
.yr b{display:block;font-family:var(--disp);font-size:clamp(24px,1.96vw + 16.7px,48px);line-height:1;color:var(--brass-lt);margin-bottom:.3em}
.yr h4{font-family:var(--disp);font-weight:400;font-size:clamp(17.5px,.612vw + 15.2px,25px);margin:0 0 .5em;line-height:1.15}
.yr p{font-size:clamp(15.5px,.245vw + 14.6px,18.5px);line-height:1.5;color:var(--muted);margin:0}


/* ───────────────────────── artifacts ───────────────────────── */
#artifacts{background:var(--noir)}
.arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,3.4vw,56px);
  max-width:1400px;margin:clamp(48px,7vh,90px) auto 0}
.art img{width:100%;height:clamp(220px,30vh,320px);object-fit:cover;margin-bottom:24px}
.art h3{font-size:clamp(19px,.98vw + 15.3px,31px);margin-bottom:.6em}
.art p{font-size:clamp(16.5px,.327vw + 15.3px,20.5px);color:var(--muted);line-height:1.55}

/* ───────────────────────── postcard wall ───────────────────────── */
#postcards{background:var(--oat);color:var(--ink)}
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,340px));justify-content:center;
  gap:clamp(30px,3.4vw,56px);max-width:1180px;margin:clamp(52px,8vh,100px) auto 0}
.pc{margin:0;background:#fdfbf6;padding:14px 14px 0;
  box-shadow:0 1px 2px rgba(11,14,16,.12),0 18px 36px -18px rgba(11,14,16,.4)}
.pc:nth-child(3n+1){transform:rotate(-1.1deg)}
.pc:nth-child(3n+2){transform:rotate(.7deg)}
.pc:nth-child(3n+3){transform:rotate(-.4deg)}
.pc img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:sepia(.16) contrast(1.03)}
.pc figcaption{padding:14px 2px 16px;color:var(--muted-d)}
@media(max-width:640px){.pc{transform:none!important}}

/* ───────────────────────── heritage ───────────────────────── */
#heritage{background:var(--linen);color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);max-width:1300px;margin:clamp(48px,7vh,90px) auto 0}
@media(max-width:820px){.pair{grid-template-columns:1fr}}
.man img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06);margin-bottom:26px}
.man b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(22px,1.47vw + 16.5px,40px);line-height:1.05;margin-bottom:.25em}
.man span{font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.man p{margin-top:1.2em;font-size:clamp(16.5px,.327vw + 15.3px,20.5px);color:rgba(11,14,16,.72)}
.archive{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);
  max-width:1300px;margin:clamp(40px,6vh,80px) auto 0}
.archive img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.05)}

.cta{display:inline-block;font-family:var(--sans);
  font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--linen);text-decoration:none;padding:1.15em 2.4em;
  border:1px solid rgba(245,241,233,.42);transition:background .35s var(--ease),border-color .35s var(--ease)}
.cta:hover,.cta:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--noir)}
.cta:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}

/* ───────────────────────── finale ───────────────────────── */
#finale{position:relative;min-height:110svh;display:grid;place-items:center;overflow:hidden;text-align:center}
#finale .bg{position:absolute;inset:-10% 0;background:url(../img/lake-sunset.jpg) center/cover no-repeat;will-change:transform}
#finale .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,16,.5),rgba(11,14,16,.92))}
#finale .inner{position:relative;padding:18vh var(--gut) 12vh;max-width:920px}
#finale h2{font-size:clamp(27px,4vw + 12px,76px)}
.colophon{border-top:1px solid var(--rule);margin-top:clamp(60px,10vh,120px);padding-top:36px;
  font-family:var(--sans);font-size:clamp(12.5px,.367vw + 11.1px,17px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}

@media(max-width:640px){
  /* .96 leading is right at 96px and collides with descenders at 38px */
  #cover h1,#finale h2{line-height:1.06}
  h2{line-height:1.02}
  .quote blockquote{line-height:1.14}
}
@media(max-width:820px){
  /* JS sets an inline pixel height for the pinned scroll; !important beats it so a
     narrow window can never be left with thousands of px of empty section. */
  #gallery,#ledger{height:auto!important}
  #gallery .stage,#ledger .stage{position:static;height:auto;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:9vh 0}
  #gallery .slide,#gallery .slide.tall{width:min(74vw,360px)}
  #gallery .slide img,#gallery .slide.tall img{height:min(52vh,420px)}
  #ledger .yr{width:min(74vw,340px)}
  #gallery .track,#ledger .rail{position:static;transform:none!important;height:auto;padding-inline:var(--gut)}
  #gallery .slide,#ledger .yr{scroll-snap-align:center}
  #gallery .head{width:min(78vw,340px);scroll-snap-align:center}
  #ledger .head{position:static;padding:0 var(--gut) 30px}
  #ledger .line{display:none}
  #ledger .rail{align-items:flex-start;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .words span i{transform:none!important}
  #cue::after{animation:none}
}