@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');
:root{
  --bg:#ffffff;
  --ink:#192723;
  --ink-soft:#54665f;
  --deep:#0f342f;
  --deep-2:#1c5a52;
  --gold:#c6b07b;
  --mist:#f4f5f2;
  --line:rgba(18,52,47,.12);
  --line-strong:rgba(18,52,47,.22);
  --shadow:0 24px 60px rgba(11,38,33,.08);
  --page:clamp(18px,4.6vw,80px);
  --content:860px;
  --gallery-pad:clamp(18px,3vw,42px);
  --radius:20px;
  --headerH:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
button{font:inherit}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--deep),var(--gold) 75%,#ddcfaa);z-index:250;box-shadow:0 0 12px rgba(198,176,123,.35)}
.topbar{position:fixed;left:0;right:0;top:0;height:var(--headerH);display:flex;align-items:center;justify-content:space-between;padding:0 var(--page);z-index:180;color:#fff;mix-blend-mode:normal;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease, color .35s ease}
.topbar.is-solid{background:rgba(255,255,255,.86);color:var(--deep);backdrop-filter:blur(16px);border-bottom:1px solid rgba(18,52,47,.08);box-shadow:0 10px 40px rgba(11,38,33,.05)}
.brand{text-decoration:none;font-weight:800;font-size:28px;letter-spacing:-.08em;line-height:.84}
.brand span{display:block;font-size:8px;letter-spacing:.26em;font-weight:700;margin-top:11px}
.topright{display:flex;gap:28px;font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.topright a{text-decoration:none;opacity:.9}
.topright a:hover{opacity:1}
.chapter-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.chapter-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 12px;text-decoration:none;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid rgba(18,52,47,.08);box-shadow:0 8px 22px rgba(11,38,33,.06);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--deep)}
.chapter-nav a:hover{background:#fff}
main{position:relative}
.hero{height:100svh;min-height:760px;position:relative;color:#fff;overflow:hidden;background:#102b27}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.03);animation:heroZoom 24s ease-out forwards}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,19,.72) 0,rgba(7,22,19,.38) 55%,rgba(7,22,19,.18) 100%),linear-gradient(180deg,rgba(7,22,19,.05),rgba(7,22,19,.72) 92%)}
.hero:after{content:'';position:absolute;left:var(--page);right:var(--page);bottom:32px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.1))}
.hero-content{position:absolute;left:var(--page);right:min(12vw,120px);bottom:92px;z-index:2;max-width:1200px}
.eyebrow,.small-kicker{display:block;font-size:11px;letter-spacing:.28em;font-weight:800;text-transform:uppercase}
.eyebrow{color:rgba(255,255,255,.86)}
.hero h1{margin:24px 0 32px;max-width:1050px;font:500 clamp(42px,6.2vw,100px)/1.03 'Playfair Display',Georgia,serif;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}
.hero h1:after{content:'';display:block;margin-top:30px;width:120px;height:3px;background:linear-gradient(90deg,var(--gold),rgba(255,255,255,.75))}
.hero-foot{display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.84)}
.scrollmark{font-size:28px;animation:float 1.9s ease-in-out infinite}
.interview-spotlight{padding:clamp(28px,5vw,64px) var(--page) 20px;position:relative;z-index:5;margin-top:-120px}
.interview-spotlight:before{content:'';position:absolute;left:0;right:0;top:0;height:220px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 70%);pointer-events:none}
.interview-spotlight>*{position:relative}
.interview-shell{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(280px,.95fr);gap:40px;align-items:end}
.interview-copy{padding-bottom:18px}
.ink-kicker{color:var(--deep-2)}
.interview-copy h2{margin:18px 0 16px;font:500 clamp(38px,5vw,72px)/1.05 'Playfair Display',Georgia,serif;color:var(--deep);letter-spacing:-.05em;text-wrap:balance}
.spotlight-sub{margin:0;max-width:34ch;font:500 14px/1.8 'DM Sans',Arial,sans-serif;letter-spacing:.1em;color:#698078;text-transform:uppercase}
.interview-photo{display:block;position:relative;padding:0;border:0;background:#edf2ef;min-height:650px;cursor:zoom-in;overflow:hidden}
.interview-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .9s cubic-bezier(.22,1,.36,1),filter .35s ease}
.interview-photo:hover img{transform:scale(1.025);filter:saturate(1.03)}
.interview-photo:after{content:'';position:absolute;inset:52% 0 0;background:linear-gradient(transparent,rgba(8,28,24,.86))}
.interview-name{position:absolute;left:0;right:0;bottom:0;padding:30px 26px;color:#fff;z-index:2;font-size:13px;letter-spacing:.18em;font-weight:800;text-transform:uppercase}
.story{display:grid;grid-template-columns:minmax(32px,1fr) minmax(0,var(--content)) minmax(32px,1fr);padding:40px 0 120px;position:relative}
.article{grid-column:2;min-width:0}
.rail{grid-column:1;grid-row:1}
.rail-inner{position:sticky;top:120px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:18px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.2em;font-weight:700;color:#82958d}
.rail-line{width:1px;height:78px;background:rgba(18,52,47,.16)}
.article-p{font:400 clamp(19px,1.48vw,22px)/1.95 Georgia,'Times New Roman',serif;letter-spacing:.002em;color:#233431;max-width:790px;margin:0 0 29px}
.article-p.intro{font:400 clamp(25px,2.2vw,34px)/1.62 'Playfair Display',Georgia,serif;color:#1f4e45;max-width:820px;margin:0 0 80px}
.article-p.intro:first-letter{float:left;font:500 4.1em/.8 'Playfair Display',Georgia,serif;color:var(--gold);margin:10px 16px 0 0}
.chapter-mark{display:flex;align-items:center;gap:14px;margin:110px 0 20px;color:var(--deep-2);font-size:10px;letter-spacing:.18em;font-weight:800;text-transform:uppercase}
.chapter-mark strong{font-size:58px;line-height:1;font-weight:700;letter-spacing:-.07em;color:#d5c5a0}
.chapter-mark i{flex:1;height:1px;background:linear-gradient(90deg,rgba(198,176,123,.45),rgba(18,52,47,.12))}
.section-title{margin:0 0 42px;max-width:900px;font:500 clamp(38px,4.3vw,66px)/1.14 'Playfair Display',Georgia,serif;letter-spacing:-.045em;color:var(--deep);text-wrap:balance}
.section-title:after{content:'';display:block;width:72px;height:3px;background:linear-gradient(90deg,var(--gold),#d7e4df);margin-top:24px}
.quote{position:relative;margin:90px calc(50% - 50vw) 100px;padding:64px var(--page) 56px;color:var(--deep);font:italic 400 clamp(25px,2.8vw,42px)/1.56 'Playfair Display',Georgia,serif;background:linear-gradient(180deg,#f7f6f1,#fff)}
.quote:before{content:'“';position:absolute;left:var(--page);top:-12px;font:120px/.85 Georgia,serif;color:rgba(198,176,123,.45)}
.quote:after{content:'';position:absolute;left:var(--page);right:var(--page);top:0;height:1px;background:linear-gradient(90deg,rgba(198,176,123,.55),rgba(198,176,123,.02));}
.story-interlude{position:relative;margin:90px calc(50% - 50vw) 90px;height:min(72vw,760px);min-height:360px;overflow:hidden}
.story-interlude img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s ease}
.story-interlude:hover img{transform:scale(1.03)}
.story-interlude figcaption{position:absolute;left:var(--page);bottom:26px;padding:10px 14px;font-size:10px;letter-spacing:.2em;font-weight:800;text-transform:uppercase;color:#fff;background:rgba(11,38,33,.35);backdrop-filter:blur(12px)}
.doc-caption{font:700 12px/1.7 'DM Sans',Arial,sans-serif;letter-spacing:.12em;color:#7a8b85;text-transform:uppercase;margin:18px 0 56px}
.doc-caption:before{content:'';display:block;width:36px;height:2px;background:var(--gold);margin-bottom:12px}
.h-gallery{position:relative;left:50%;width:100vw;margin:54px 0 12px;transform:translateX(-50%);padding:0 var(--page);--stickyTop:max(80px,12vh)}
.h-gallery-sticky{position:sticky;top:var(--stickyTop);height:84vh;min-height:540px;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;overflow:hidden}
.h-gallery-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'label controls' 'title controls' 'hint controls';gap:8px 22px;align-items:end;margin:0 auto;width:100%;max-width:1480px;padding:0 4px}
.h-gallery-intro .small-kicker{grid-area:label;color:#6d8279}
.h-gallery-intro strong{grid-area:title;display:block;color:var(--deep);font-size:clamp(20px,2.2vw,30px);line-height:1.1;letter-spacing:-.035em;font-weight:700}
.h-gallery-intro em{grid-area:hint;display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7b8d86}
.gallery-controls{grid-area:controls;display:flex;align-items:center;gap:12px;justify-self:end}
.gallery-btn{width:46px;height:46px;border-radius:999px;border:1px solid rgba(18,52,47,.14);background:rgba(255,255,255,.84);color:var(--deep);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px rgba(10,36,31,.06);backdrop-filter:blur(10px);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.gallery-btn:hover{transform:translateY(-1px);background:#fff;border-color:rgba(18,52,47,.24)}
.gallery-btn span{font-size:17px;line-height:1}
.gallery-dots{display:flex;gap:7px;align-items:center;min-width:28px;justify-content:center}
.gallery-dot{display:block;width:7px;height:7px;border-radius:50%;background:rgba(18,52,47,.16);transition:transform .3s ease,background .3s ease}
.gallery-dot.is-active{background:var(--gold);transform:scale(1.22)}
.h-gallery-track{display:flex;align-items:stretch;gap:clamp(12px,1.8vw,22px);will-change:transform;padding:0;max-width:none}
.h-card{position:relative;flex:0 0 min(72vw,760px)}
.doc-photo,.portfolio-item{display:block;position:relative;padding:0;border:0;background:#eff3f1;overflow:hidden;cursor:zoom-in;text-align:left;min-height:calc(84vh - 112px)}
.doc-photo img,.portfolio-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .35s ease}
.doc-photo:hover img,.portfolio-item:hover img{transform:scale(1.03);filter:saturate(1.04)}
.doc-photo:after,.portfolio-item:after{content:'';position:absolute;inset:58% 0 0;background:linear-gradient(transparent,rgba(8,28,24,.68));pointer-events:none}
.doc-photo:before,.portfolio-item:before{content:'+';position:absolute;right:16px;bottom:16px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--deep);font-size:21px;font-weight:500;box-shadow:0 10px 26px rgba(10,36,31,.18)}
.portfolio-item span{position:absolute;left:22px;right:20px;bottom:20px;z-index:2;color:#fff;font-size:11px;line-height:1.5;letter-spacing:.16em;font-weight:800;text-transform:uppercase}
.portfolio{padding:40px var(--page) 120px;background:#fff;position:relative}
.portfolio-head{max-width:900px;margin:0 auto 34px;text-align:center}
.portfolio h2{margin:18px 0 16px;font:500 clamp(44px,5vw,82px)/1.05 'Playfair Display',Georgia,serif;letter-spacing:-.05em;color:var(--deep)}
.portfolio-head p{max-width:740px;margin:0 auto;font-size:15px;line-height:1.85;color:#64776f}
.portfolio-count{margin-top:22px;color:var(--deep);font-size:38px;font-weight:700;letter-spacing:-.05em}
.portfolio-count small{margin-left:12px;font-size:10px;letter-spacing:.18em;font-weight:700;color:#74867f;text-transform:uppercase}
.h-gallery--portfolio{margin-top:30px}
.h-gallery--portfolio .h-card{flex-basis:min(78vw,860px)}
.h-gallery--portfolio .portfolio-item{min-height:calc(84vh - 110px)}
footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px var(--page) 38px;border-top:1px solid rgba(18,52,47,.08);color:#5b6d66;font-size:11px;line-height:1.6;text-transform:uppercase;letter-spacing:.08em}
footer a{text-decoration:none;color:var(--deep);font-weight:800}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.lightbox{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:rgba(7,22,19,.94);backdrop-filter:blur(14px);padding:58px 18px 28px}
.lightbox.open{display:flex}
.lightbox img{display:block;max-width:96vw;max-height:84vh;object-fit:contain;box-shadow:0 25px 90px rgba(0,0,0,.45)}
.close{position:absolute;right:18px;top:10px;width:52px;height:52px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:36px;cursor:pointer}
.lightbox-hint{position:absolute;bottom:14px;color:#d4ddd9;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes float{50%{transform:translateY(8px)}}
@media (max-width:1200px){
  .interview-shell{grid-template-columns:minmax(240px,1fr) minmax(280px,1fr)}
  .h-card{flex-basis:min(80vw,680px)}
}
@media (max-width:980px){
  :root{--headerH:66px}
  .chapter-nav,.rail{display:none}
  .story{grid-template-columns:18px minmax(0,1fr) 18px;padding-bottom:96px}
  .topright{gap:18px;font-size:10px}
  .interview-spotlight{margin-top:-74px}
  .interview-shell{grid-template-columns:1fr;gap:18px}
  .interview-copy{order:1}
  .interview-photo{order:2;min-height:500px}
  .h-gallery-sticky{height:76vh;min-height:480px}
  .doc-photo,.portfolio-item,.h-gallery--portfolio .portfolio-item{min-height:calc(76vh - 110px)}
  .h-card,.h-gallery--portfolio .h-card{flex-basis:min(84vw,620px)}
}
@media (max-width:680px){
  :root{--page:16px;--headerH:62px}
  .topbar{padding:0 var(--page)}
  .topright a:first-child{display:none}
  .brand{font-size:24px}
  .brand span{font-size:7px;margin-top:10px}
  .hero{min-height:620px;height:94svh}
  .hero-content{left:var(--page);right:var(--page);bottom:74px}
  .eyebrow,.small-kicker{font-size:9px;line-height:1.7}
  .hero h1{font-size:clamp(38px,11vw,58px);margin-bottom:24px}
  .hero-foot{font-size:10px}
  .interview-spotlight{padding-top:18px;margin-top:-52px}
  .interview-copy h2{font-size:40px}
  .spotlight-sub{font-size:11px;line-height:1.8}
  .interview-photo{min-height:66svh}
  .interview-name{padding:22px 16px;font-size:11px;letter-spacing:.15em}
  .article-p{font-size:18px;line-height:1.88}
  .article-p.intro{font-size:23px;line-height:1.58;margin-bottom:58px}
  .chapter-mark{margin-top:78px}
  .chapter-mark strong{font-size:44px}
  .section-title{font-size:37px;margin-bottom:34px}
  .story-interlude{height:56vh;min-height:300px;margin-top:68px;margin-bottom:70px}
  .story-interlude figcaption{left:var(--page);right:var(--page);bottom:16px;font-size:9px}
  .quote{margin-top:62px;margin-bottom:70px;padding:54px var(--page) 42px;font-size:27px}
  .quote:before{font-size:92px;top:-4px}
  .h-gallery{padding:0 var(--page);margin-top:34px}
  .h-gallery-sticky{top:max(72px,10svh);height:72svh;min-height:420px;gap:14px}
  .h-gallery-intro{grid-template-columns:1fr;grid-template-areas:'label' 'title' 'hint' 'controls';gap:8px}
  .gallery-controls{justify-self:start}
  .gallery-btn{width:42px;height:42px}
  .gallery-dots{min-width:0}
  .h-card,.h-gallery--portfolio .h-card{flex-basis:min(85vw,420px)}
  .doc-photo,.portfolio-item,.h-gallery--portfolio .portfolio-item{min-height:calc(72svh - 96px)}
  .doc-caption{font-size:11px;line-height:1.7;margin-bottom:40px}
  .portfolio{padding:24px var(--page) 88px}
  .portfolio h2{font-size:48px}
  .portfolio-head p{font-size:14px;line-height:1.8}
  footer{display:block;padding:22px var(--page) 28px}
  footer span,footer a{display:block;margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}
/* V4: full-bleed streams, never override their centering with reveal transforms. */
.h-gallery{left:auto;transform:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:0;padding-inline:var(--page);overflow:visible;}
.h-gallery-sticky{overflow:hidden;height:min(78svh,790px);min-height:480px;top:calc(var(--headerH) + 12px);gap:18px;}
.h-gallery-intro{position:relative;z-index:5;min-height:94px;align-items:center;}
.h-gallery-track{flex:1;min-height:0;align-items:stretch;gap:clamp(12px,2vw,25px);transform:translate3d(0,0,0);}
.h-card{height:100%;min-height:0;flex:0 0 min(74vw,810px);}
.doc-photo,.portfolio-item,.h-gallery--portfolio .portfolio-item{height:100%;min-height:0;}
.gallery-controls{pointer-events:auto;z-index:10;}
.gallery-btn{position:relative;z-index:10;touch-action:manipulation;}
.gallery-btn:disabled{opacity:.35;cursor:default;transform:none;}
.gallery-progress{position:absolute;left:4px;right:4px;bottom:0;height:2px;background:rgba(15,52,47,.09);overflow:hidden;}
.gallery-progress-fill{width:0;height:100%;background:var(--gold);transition:width .2s;}
@media(max-width:680px){
 .h-gallery{padding-inline:16px;margin-left:calc(50% - 50vw);}
 .h-gallery-sticky{top:calc(var(--headerH) + 8px);height:min(77svh,720px);min-height:380px;gap:12px;}
 .h-gallery-intro{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'label controls' 'title controls' 'hint hint';min-height:102px;gap:5px 8px;align-items:center;}
 .h-gallery-intro strong{font-size:21px;}
 .h-gallery-intro em{font-size:9px;letter-spacing:.06em;}
 .gallery-controls{grid-area:controls;align-self:center;justify-self:end;gap:7px;}
 .gallery-btn{width:44px;height:44px;}
 .gallery-dots{display:none;}
 .h-card,.h-gallery--portfolio .h-card{flex-basis:calc(100vw - 48px);}
 .interview-photo{min-height:480px;}
}

/* V5: full-width scroll mechanics, clean editorial surface */
.rail{display:none!important}
.story{grid-template-columns:minmax(20px,1fr) minmax(0,var(--content)) minmax(20px,1fr)}
.h-gallery{position:relative!important;left:auto!important;transform:none!important;width:100vw!important;max-width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important;padding-inline:var(--page);opacity:1!important;overflow:visible!important;}
.h-gallery-sticky{position:sticky;display:flex;flex-direction:column;top:calc(var(--headerH) + 12px);height:min(78svh,800px);min-height:440px;overflow:hidden;gap:18px;}
.h-gallery-track{display:flex;flex:1;min-height:0;width:100%;gap:clamp(12px,2vw,24px);will-change:transform;transform:translate3d(0,0,0);}
.h-gallery-track>.h-card{flex:0 0 min(72vw,760px);height:100%;min-height:0;max-width:none;}
.h-gallery--portfolio .h-gallery-track>.h-card{flex-basis:min(78vw,840px)}
.doc-photo img,.portfolio-item img{width:100%;height:100%;object-fit:cover;object-position:center;}
.gallery-controls{z-index:20;position:relative;pointer-events:auto;}
.gallery-btn{touch-action:manipulation}
.gallery-btn:disabled{opacity:.38;cursor:default}
.h-gallery-intro{flex:0 0 auto;min-height:105px;}
@media(max-width:780px){
  .h-gallery{height:auto!important;padding:0 0 0 16px!important;margin-top:44px;margin-bottom:42px;}
  .h-gallery-sticky{position:relative;top:auto;height:auto;min-height:0;gap:14px;overflow:visible;}
  .h-gallery-intro{padding:0 16px 0 0;min-height:0;grid-template-columns:1fr auto;grid-template-areas:'label controls' 'title controls' 'hint hint';}
  .h-gallery-track{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:16px;padding-bottom:4px;transform:none!important;will-change:auto;}
  .h-gallery-track::-webkit-scrollbar{display:none}
  .h-gallery-track>.h-card,.h-gallery--portfolio .h-gallery-track>.h-card{flex:0 0 calc(100vw - 46px);height:min(60svh,560px);min-height:340px;scroll-snap-align:start;}
  .gallery-controls{gap:8px}
  .gallery-btn{width:39px;height:39px}
  .gallery-dots{display:none}
  .h-gallery-intro em{letter-spacing:.04em;font-size:10px}
}
@media(max-width:400px){.h-gallery-track>.h-card,.h-gallery--portfolio .h-gallery-track>.h-card{height:50svh;min-height:280px}.h-gallery-intro strong{font-size:19px}}
