@font-face{font-family:"Cormorant";src:url(serif.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(serif-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(sans.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
:root{--bg:#0e0c0a;--bg2:#15120f;--ink:#efe7db;--mute:#a59a8b;--line:rgba(239,231,219,.14);--accent:#c8a27c;--pad:14px;--gap:10px;--serif:"Cormorant","Cormorant Garamond",Georgia,serif;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
.topbar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 16px) 18px 16px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;background:linear-gradient(rgba(14,12,10,.72),rgba(14,12,10,0));pointer-events:none;transition:background .4s}
.topbar>*{pointer-events:auto}
.topbar.solid{background:rgba(14,12,10,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mark{text-decoration:none;font-weight:500}
.topbar nav{display:flex;gap:18px}
.topbar nav a{text-decoration:none;color:var(--mute);transition:color .3s}
.topbar nav a:hover,.topbar nav a.on{color:var(--ink)}
@media (max-width:520px){.topbar nav{display:none}}
/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero .hero-img{position:absolute;inset:0;margin:0;aspect-ratio:auto}
.hero-img .open{display:block;width:100%;height:100%}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:heroIn 1.8s cubic-bezier(.2,.7,.2,1) both}
.hero-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 38%,rgba(10,8,6,.6) 62%,rgba(10,8,6,.93) 100%)}
.hero-img .dl{z-index:3;bottom:calc(env(safe-area-inset-bottom) + 22px)}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hero-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px calc(env(safe-area-inset-bottom) + 34px);pointer-events:none;animation:up 1.4s .35s cubic-bezier(.2,.7,.2,1) both}
.hero-text a{pointer-events:auto}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kicker{margin:0 0 6px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(84px,27vw,230px);line-height:.86;letter-spacing:.04em;margin-left:-.04em}
.sub{margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:22px;font-weight:300;color:var(--ink)}
.sub span{color:var(--accent);font-style:normal;margin:0 .2em}
.by{margin:18px 0 0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.scroll{position:absolute;right:22px;bottom:calc(env(safe-area-inset-bottom) + 38px);width:1px;height:54px;background:rgba(239,231,219,.25);overflow:hidden;display:none}
.scroll span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--ink);animation:drip 2.2s infinite cubic-bezier(.6,0,.3,1)}
@keyframes drip{to{top:110%}}
@media (min-width:900px){
 :root{--pad:4.2vw;--gap:16px}
 .topbar{padding:26px var(--pad);font-size:11px}
 .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);height:100vh;min-height:680px;background:var(--bg)}
 .hero .hero-img{position:relative;grid-column:2;grid-row:1;inset:auto;height:100%}
 .hero-img::after{background:linear-gradient(90deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,0) 30%)}
 .hero-img .dl{bottom:26px}
 .hero-text{position:relative;grid-column:1;grid-row:1;align-self:end;padding:0 var(--pad) 9vh}
 h1{font-size:clamp(110px,12.6vw,230px)}
 .sub{font-size:28px}
 .scroll{display:block;left:var(--pad);right:auto;bottom:auto;top:calc(100% - 9vh + 30px);display:none}
}
/* intro */
.intro{padding:88px 22px 72px;max-width:1100px;margin:0 auto}
.lede{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(27px,7.2vw,52px);line-height:1.18;letter-spacing:-.005em}
.index{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:flex;align-items:baseline;gap:18px;padding:15px 0;text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;transition:color .3s,padding .4s}
.index a:hover{color:var(--accent);padding-left:8px}
.index span{width:30px;font-family:var(--serif);font-size:17px;letter-spacing:0;color:var(--accent)}
@media (min-width:900px){.intro{padding:150px var(--pad) 120px}.index{display:grid;grid-template-columns:repeat(4,1fr);border:0;gap:0 28px}.index li{border-top:1px solid var(--line);border-bottom:0}}
/* chapters */
.chapter{padding:0 0 30px}
.ch-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px 16px;padding:76px 22px 30px;max-width:1500px;margin:0 auto}
.ch-num{grid-row:1/3;font-family:var(--serif);font-weight:300;font-size:68px;line-height:.8;color:var(--accent)}
.ch-head h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(44px,11vw,104px);line-height:.95;letter-spacing:.005em}
.ch-head p{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--mute)}
.ch-count{grid-column:1/-1;margin-top:20px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
@media (min-width:900px){.ch-head{padding:150px var(--pad) 54px;grid-template-columns:auto 1fr auto}.ch-num{font-size:120px}.ch-count{grid-column:3;grid-row:1/3;align-self:end;border:0;margin:0;padding:0 0 10px}}
.row{display:flex;gap:var(--gap);padding:0 var(--pad);margin:0 auto var(--gap);max-width:1700px}
.row.full{padding:0;max-width:none}
.row.solo{justify-content:center;padding:28px 18% 28px}
.ph{position:relative;margin:0;flex:var(--r) 1 0%;min-width:0;aspect-ratio:var(--r);background:var(--bg2);overflow:hidden}
.ph .open{display:block;width:100%;height:100%;cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ph img.ok,.hero-img img{opacity:1}
@media (hover:hover){.row .ph:hover img{transform:scale(1.025)}}
.row.full .ph{max-height:none}
@media (max-width:899px){.row.stack-sm{flex-direction:column}.row.stack-sm .ph{flex:none;width:100%}.row.solo{padding:18px 13%}}
@media (min-width:900px){.row.full{padding:0 0;margin-bottom:var(--gap)}.row.full .ph{max-height:none}.row.solo{padding:60px 0;}.row.solo .ph{flex:none;width:min(560px,42vw)}}
.dl{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(14,12,10,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);border:1px solid rgba(239,231,219,.18);transition:opacity .3s,background .3s}
.dl svg{width:16px;height:16px}
.dl:hover{background:rgba(14,12,10,.85)}
@media (hover:hover){.row .dl{opacity:0}.row .ph:hover .dl,.row .dl:focus-visible{opacity:1}}
/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-img img,.hero-text{animation:none}html{scroll-behavior:auto}}
/* footer */
.foot{padding:120px 22px calc(env(safe-area-inset-bottom) + 70px);text-align:center;border-top:1px solid var(--line);margin-top:70px}
.foot-title{margin:0 0 18px;font-family:var(--serif);font-weight:300;font-size:64px;letter-spacing:.06em;line-height:1}
.foot p{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);line-height:2}
.foot p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.cta{display:inline-block;margin-top:34px;padding:15px 28px;border:1px solid rgba(200,162,124,.55);color:var(--accent);text-decoration:none;font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:background .3s,color .3s}
.cta:hover{background:var(--accent);color:var(--bg)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:#080706;opacity:0;transition:opacity .3s}
.lb.show{opacity:1}
.lb[hidden]{display:none}
.lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{--t:calc(env(safe-area-inset-top) + 24px);--b:calc(env(safe-area-inset-bottom) + 78px);flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:var(--t) 0 var(--b)}
.lb-slide img{max-width:100%;max-height:calc(100vh - var(--t) - var(--b));max-height:calc(100svh - var(--t) - var(--b));width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
@media (min-width:900px){.lb-slide{--t:48px;--b:84px;padding:var(--t) 90px var(--b)}.lb-slide img{max-width:calc(100vw - 180px)}}
.lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px calc(env(safe-area-inset-bottom) + 14px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.lb-count{font-variant-numeric:tabular-nums;padding-left:6px}
.lb-actions{display:flex;gap:10px;align-items:center}
.lb-dl{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink)}
.lb-dl svg{width:15px;height:15px}
.lb-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.lb-close svg{width:18px;height:18px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:none;place-items:center;color:var(--ink);opacity:.6;transition:opacity .2s}
.lb-nav:hover{opacity:1}
.lb-nav svg{width:30px;height:30px}
.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
@media (hover:hover) and (min-width:900px){.lb-nav{display:grid}}
body.locked{overflow:hidden}
.nw{white-space:nowrap}
@media (max-width:899px){.row.solo{padding:18px 9%}.foot .dot{display:none}.foot .nw{display:block}}
@media (min-width:900px){.row:not(.full){max-width:1280px}.row.full .ph{max-height:94vh}.row.full .ph img{object-position:50% 50%}}

/* film */
.film{background:#070605;padding-bottom:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 20px}
.film-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 22px}
.film-row::-webkit-scrollbar{display:none}
.film-tile{position:relative;margin:0;flex:0 0 76vw;max-width:420px;scroll-snap-align:start}
.film-open{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;background:#000;cursor:pointer}
.film-prev{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity .6s}
@media (hover:hover){.film-tile:hover .film-prev{transform:scale(1.02)}}
.film-open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);pointer-events:none}
.film-play{position:absolute;left:14px;bottom:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(239,231,219,.45);background:rgba(14,12,10,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);transition:background .3s,border-color .3s}
.film-play svg{width:18px;height:18px;margin-left:2px}
.film-tile:hover .film-play{background:rgba(200,162,124,.85);border-color:transparent;color:var(--bg)}
.film-tile .dl{bottom:auto;top:12px;right:12px}
.film-tile figcaption{display:flex;align-items:baseline;gap:12px;padding:16px 2px 0;border-bottom:1px solid var(--line);padding-bottom:12px}
.film-no{font-family:var(--serif);font-size:24px;font-weight:300;letter-spacing:.01em}
.film-cap{flex:1;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--mute)}
.film-dur{font-size:10.5px;letter-spacing:.2em;color:var(--accent);font-variant-numeric:tabular-nums}
.film-hint{margin:26px 22px 0;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
@media (min-width:900px){
 .film{padding-bottom:110px}
 .film-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;overflow:visible;padding:0 var(--pad);max-width:1400px;margin:0 auto}
 .film-tile{max-width:none}
 .film-tile:nth-child(2){margin-top:72px}
 .film-hint{text-align:center;margin-top:56px}
 .index{grid-template-columns:repeat(5,1fr)}
}
.flb{background:#000}
.flb .lb-slide video{max-width:100%;max-height:calc(100vh - var(--t) - var(--b));max-height:calc(100svh - var(--t) - var(--b));aspect-ratio:9/16;height:100%;width:auto;background:#000;object-fit:contain}
@media (min-width:900px){.flb .lb-slide{padding:var(--t) 90px var(--b)}}

.foot-url{margin-top:22px!important}
.foot-url a{border:0!important;color:var(--mute)!important}
.row.full .ph img{transition:opacity 1.1s ease}
.film-tile.rv:nth-child(2){transition-delay:.12s}.film-tile.rv:nth-child(3){transition-delay:.24s}

.foot{padding:96px 22px calc(env(safe-area-inset-bottom) + 64px);margin-top:40px}
.foot .foot-title{margin:0 0 20px;font-family:var(--serif);font-weight:300;font-size:clamp(64px,19vw,150px);letter-spacing:.06em;line-height:.9;text-transform:none;color:var(--ink)}
.foot .cta{margin-top:38px}
.chapter#details{padding-bottom:10px}
@media (min-width:900px){.foot{padding:140px var(--pad) 90px}}
@media (max-width:899px){.foot p a.nw{display:inline-block;margin-top:2px}}