/* ============================================================
   ATELIER — Selected Work (/works)
   The Reel (index) + The Film (project pages)
   ink · light #FAFAF8 · orange #F1613A · rectangular 10px · no pills
   Roobert 300 display / Fragment Mono labels
   Generated pages: edit works/projects.json + run tools/build-works.mjs
   ============================================================ */
@font-face{font-family:"Roobert";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/roobert/Roobert-Regular.woff2") format("woff2")}
@font-face{font-family:"Roobert";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/roobert/Roobert-Regular.woff2") format("woff2")}
@font-face{font-family:"Roobert";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/roobert/Roobert-Medium.woff2") format("woff2")}

:root{
  --light:#FAFAF8;
  --ink:#171512;
  --ink-2:#3A362F;
  --dark:#14120E;
  --dark-2:#1C1914;
  --fg-d:#EDE9E0;
  --ghost:#A8A296;
  --muted:#6E685E;
  --line:rgba(23,21,18,.14);
  --line-d:rgba(237,233,224,.14);
  --accent:#F1613A;
  --accent-l:#F4845F;
  --accent-d:#D94E2A;
  --r:2px;
  --r-box:10px;
  --gut:clamp(20px,4vw,56px);
  --max:1440px;
  --fd:"Roobert",Helvetica,Arial,sans-serif;
  --fm:"Fragment Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fd);font-weight:300;background:var(--light);color:var(--ink);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:400}
::selection{background:var(--accent);color:#fff}

h1,h2,h3{font-family:var(--fd);font-weight:300;line-height:1.0;letter-spacing:-0.015em}
.mono{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.dark-page{background:var(--dark);color:var(--fg-d)}

/* label row */
.lbl{display:flex;align-items:center;gap:14px;font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lbl .idx{color:var(--accent);border:1px solid currentColor;border-radius:var(--r);padding:3px 8px 2px}
.lbl .rule{flex:0 1 120px;height:1px;background:var(--line)}
.on-dark .lbl{color:#8F897C}
.on-dark .lbl .rule{background:var(--line-d)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--fd);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.95em 1.6em;border-radius:var(--r-box);border:1px solid var(--ink);color:var(--ink);transition:background .25s,color .25s,border-color .25s;white-space:nowrap;cursor:pointer;background:none}
.btn .arr{font-family:var(--fm);transition:transform .25s}
.btn:hover .arr{transform:translate(3px,-1px)}
.btn:hover{background:var(--ink);color:var(--light)}
.btn.fill{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.fill:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.lightline{border-color:var(--line-d);color:var(--fg-d)}
.btn.lightline:hover{background:var(--fg-d);color:var(--ink);border-color:var(--fg-d)}

/* progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:300}

/* nav — frosted glass, 10px radius */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1400px,calc(100% - 28px));z-index:200;display:flex;align-items:center;gap:20px;padding:12px 18px;border-radius:var(--r-box);transition:background .35s,box-shadow .35s}
.nav.scrolled{background:rgba(18,16,13,.46);backdrop-filter:blur(28px) saturate(118%);-webkit-backdrop-filter:blur(28px) saturate(118%);box-shadow:0 6px 26px rgba(0,0,0,.22)}
.nav .brand img{height:12px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{font-size:.66rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:.6em .8em;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--accent-l)}
.nav-links a.on{color:var(--accent-l)}
.nav-links a.cta{border:1px solid rgba(255,255,255,.4);border-radius:var(--r-box);padding:.6em 1.1em;margin-left:8px}
.nav-links a.cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:900px){.nav-links a.hm{display:none}}

/* reveal primitives */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);transition-delay:calc(var(--d,0)*110ms)}
[data-rv].in{opacity:1;transform:none}
.mask{display:block;overflow:hidden;padding:0 .14em .18em .06em;margin:0 -.14em -.18em -.06em}
.mask>span{display:block;transform:translateY(125%);transition:transform 1.05s cubic-bezier(.22,.7,.2,1);transition-delay:calc(var(--d,0)*130ms)}
.mask.in>span{transform:none}
[data-zoom] img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
[data-zoom].in img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  [data-rv],[data-rv].in{opacity:1;transform:none;transition:none}
  .mask>span,.mask.in>span{transform:none;transition:none}
  [data-zoom] img{transform:none;transition:none}
  [data-plx]{transform:none !important}
}

/* footer */
.foot{background:var(--dark);color:var(--ghost);padding:56px 0}
.foot .fx{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot a{color:var(--fg-d)}
.foot a:hover{color:var(--accent)}

/* ============================================================
   THE REEL — /works/ index
   ============================================================ */
body.reel{background:var(--dark);color:var(--fg-d)}
.reel-hero{height:100vh;min-height:600px;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.reel-hero .bgv{position:absolute;inset:-6%;overflow:hidden}
.reel-hero .bgv img,.reel-hero .bgv video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:.34;filter:saturate(.7)}
.reel-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,14,.45),rgba(20,18,14,.2) 45%,var(--dark))}
@media(prefers-reduced-motion:reduce){.reel-hero .bgv video{display:none}}
.reel-hero .inner{position:relative;z-index:2;padding:0 var(--gut);max-width:900px}
.reel-hero h1{font-size:clamp(3.2rem,8.6vw,8.2rem)}
.reel-hero .sub{max-width:560px;margin:26px auto 0;color:#B9B3A6;font-size:1.02rem;line-height:1.7}
.reel-hero .stats{display:flex;justify-content:center;gap:clamp(24px,4vw,56px);margin-top:40px;flex-wrap:wrap}
.reel-hero .stats span{font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#8F897C}
.reel-hero .stats b{display:block;font-family:var(--fd);font-weight:300;font-size:1.7rem;letter-spacing:-0.01em;color:var(--fg-d);margin-bottom:6px}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--fm);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#8F897C;display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--accent),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.35}50%{opacity:1}}

.slide{position:relative;display:flex;height:100vh;min-height:600px;overflow:hidden;align-items:flex-end;cursor:pointer}
.slide .media{position:absolute;inset:0;overflow:hidden}
.slide .media .img{position:absolute;inset:-1px;will-change:transform}
.slide .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(20,18,14,.05) 30%,rgba(20,18,14,.72) 88%);pointer-events:none}
.slide .cap{position:relative;z-index:3;width:100%;padding:0 var(--gut) clamp(48px,6vw,84px)}
.slide .cap .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.slide h2{font-size:clamp(2.6rem,6.6vw,6.2rem);color:#fff}
.slide .eyebrow{display:flex;gap:16px;align-items:center;font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:18px}
.slide .eyebrow .num{color:var(--accent-l)}
.slide .eyebrow .sep{width:34px;height:1px;background:rgba(255,255,255,.35)}
.slide .meta{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);display:flex;flex-direction:column;gap:6px;text-align:right}
.slide .meta .dn{color:#fff;font-size:.72rem}
.slide .meta .vp{color:var(--accent-l);margin-top:6px;transition:transform .3s}
.slide:hover .meta .vp{transform:translateX(4px)}
.slide .glass{position:absolute;top:calc(50% - 12px);right:var(--gut);z-index:3;background:rgba(20,18,14,.30);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-box);padding:16px 20px;max-width:300px;font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.86);display:none}
@media(min-width:1000px){.slide .glass{display:block}}
.slide .glass .pl{font-family:var(--fm);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l);margin-bottom:8px;display:block}

/* coming soon */
.soon{padding:clamp(100px,12vw,170px) 0 0;border-top:1px solid var(--line-d)}
.soon-tile{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,80px);align-items:center;padding-top:clamp(50px,6vw,80px)}
.soon-copy .loc{color:var(--accent-l);margin-bottom:20px}
.soon-copy h2{font-size:clamp(2.6rem,6vw,5.4rem);color:#fff}
.soon-copy .scopeline{margin-top:22px;color:#B9B3A6;font-size:1.02rem;line-height:1.7;max-width:38ch}
.chip-soon{display:inline-flex;align-items:center;gap:.6em;margin-top:30px;font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(237,233,224,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-box);padding:12px 18px}
.chip-soon::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent)}
.soon-media{overflow:hidden;border-radius:var(--r);max-height:82vh}
.soon-media img{width:100%;height:100%;max-height:82vh;object-fit:cover}
@media(max-width:820px){.soon-tile{grid-template-columns:1fr}.soon-media{order:-1}.soon-media img{max-height:60vh}}

.reel-outro{padding:clamp(110px,14vw,190px) 0;text-align:center}
.reel-outro h2{font-size:clamp(2.4rem,5.6vw,5rem);margin-bottom:34px}

/* ============================================================
   THE FILM — /works/<slug>/ project pages
   ============================================================ */
.cs-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background:var(--dark)}
.cs-hero .bg{position:absolute;inset:-1px;will-change:transform}
.cs-hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(190deg,rgba(20,18,14,.14) 34%,rgba(20,18,14,.74) 92%)}
.cs-hero .inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(46px,6vw,80px)}
.cs-hero h1{font-size:clamp(3rem,9vw,8.8rem)}
.cs-hero .eyebrow{font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-l);margin-bottom:20px}
.credits{border-top:1px solid rgba(255,255,255,.28);margin-top:34px;padding-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.credits div{font-family:var(--fm);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:2}
.credits div b{display:block;font-weight:400;font-size:.72rem;color:#fff}
@media(max-width:760px){.credits{grid-template-columns:1fr 1fr}}

.statement{padding:clamp(90px,11vw,160px) 0}
.statement p{font-size:clamp(1.4rem,2.9vw,2.5rem);font-weight:300;letter-spacing:-0.015em;line-height:1.28;max-width:36ch;margin-top:30px}
.statement p .dim{color:var(--ghost)}

/* scope of work strip */
.scope{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(44px,5.5vw,72px) 0}
.scope .items{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:10px;margin-top:26px}
.scope .items span{font-size:clamp(1.15rem,2.2vw,1.8rem);font-weight:300;letter-spacing:-0.01em;line-height:1.2}
.scope .items i{font-style:normal;color:var(--accent);font-size:clamp(1.15rem,2.2vw,1.8rem)}

/* gallery */
.gallery{padding-top:clamp(80px,9vw,140px)}
.pair{display:grid;grid-template-columns:7fr 5fr;gap:clamp(18px,2.4vw,34px);align-items:end;padding-bottom:clamp(80px,9vw,140px)}
.pair.flip{grid-template-columns:5fr 7fr}
.pair figure{overflow:hidden;border-radius:var(--r)}
.pair img{width:100%;height:100%;object-fit:cover}
.pair .a45{aspect-ratio:4/5}.pair .a43{aspect-ratio:4/3}.pair .a11{aspect-ratio:1/1}
.pair figcaption{padding-top:14px;font-family:var(--fm);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pair figcaption b{font-weight:400;color:var(--accent)}
@media(max-width:820px){.pair,.pair.flip{grid-template-columns:1fr}}

.solo{padding-bottom:clamp(80px,9vw,140px);display:grid;justify-content:center}
.solo figure{overflow:hidden;border-radius:var(--r);max-width:640px}
.solo img{width:100%;height:auto}
.solo figcaption{padding-top:14px;font-family:var(--fm);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}
.solo figcaption b{font-weight:400;color:var(--accent)}

.bleed{position:relative;height:88vh;min-height:520px;overflow:hidden;margin-bottom:clamp(80px,9vw,140px)}
.bleed .bg{position:absolute;inset:-1px;will-change:transform}
.bleed .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed .tag{position:absolute;left:var(--gut);bottom:40px;z-index:2;background:rgba(20,18,14,.30);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-box);padding:14px 20px;color:#fff;font-family:var(--fm);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase}
.bleed .tag b{font-weight:400;color:var(--accent-l)}

/* CTA pull */
.pull{background:var(--dark);color:var(--fg-d);padding:clamp(100px,12vw,170px) 0;position:relative;overflow:hidden}
.pull::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 60% at 24% 40%,rgba(241,97,58,.10),transparent 70%)}
.pull .wrap{position:relative}
.pull h2{font-size:clamp(2.2rem,5vw,4.4rem);margin:26px 0 34px;max-width:18ch}

/* next handoff */
.next{position:relative;height:64vh;min-height:420px;display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--dark)}
.next .bg{position:absolute;inset:0}
.next .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.next .wrap{position:relative;z-index:2;width:100%}
.next h2{font-size:clamp(2.6rem,6.4vw,5.6rem)}