/* House of VIZN v2 · cinema + editorial.
   Black and cream carry the page, white and grays support. Display: Albert Sans 900 in capitals. Accent: Bodoni Moda italic. Labels: Space Mono. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#161616}
:root{
  --black:#161616;--black-2:#242424;--white:#FFFFFF;--gray-50:#F3F3F3;--cream:#EFE6D6;
  --gray-700:#595959;--gray-400:#A6A6A6;--rule-lt:#E0E0E0;--rule-gr:#D6D6D6;--rule-dk:#363636;
  --f-display:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --f-mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px));
  --gutter-r:max(clamp(16px,4vw,48px),env(safe-area-inset-right,0px));
  --hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bg:var(--black);--fg:var(--cream);--fg-2:var(--gray-400);--rule:var(--rule-dk);--mark-bg:var(--cream);--mark-fg:var(--black);
  color-scheme:dark;
}
.band-dark{--bg:var(--black);--fg:var(--cream);--fg-2:var(--gray-400);--rule:var(--rule-dk);--mark-bg:var(--cream);--mark-fg:var(--black);background:var(--bg);color:var(--fg);color-scheme:dark}
.band-paper{--bg:var(--cream);--fg:var(--black);--fg-2:#595959;--rule:rgba(22,22,22,.2);--mark-bg:var(--black);--mark-fg:var(--cream);background:var(--bg);color:var(--fg);color-scheme:light}
.band-white{--bg:var(--white);--fg:var(--black);--fg-2:var(--gray-700);--rule:var(--rule-lt);--mark-bg:var(--black);--mark-fg:var(--cream);background:var(--bg);color:var(--fg);color-scheme:light}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
::selection{background:var(--cream);color:var(--black)}
section[id]{scroll-margin-top:var(--hdr)}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin:0 0 18px}
h1,h2,h3{margin:0;color:var(--fg);font-family:var(--f-display);text-wrap:balance}
.display,.h-sec{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.88}
.h-sec{font-size:clamp(2.7rem,7.6vw,6.8rem)}
.h-sub{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.95}
h1 em,h2 em,h3 em,.display em,.h-sec em,.hc-sub em,.nx-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.025em;font-variation-settings:"opsz" 96}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.lede{font-size:clamp(1.04rem,1.35vw,1.16rem);line-height:1.55;color:var(--fg-2);max-width:31em;margin:0}
.mark{background:linear-gradient(var(--mark-bg),var(--mark-bg)) no-repeat 0 0/100% 100%;color:var(--mark-fg);padding:0 .12em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.display .mark{display:inline-block;line-height:.92;padding:.05em .1em .07em;margin-top:.04em}
.sec-meta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.tbd{border-bottom:1px dotted currentColor;padding:0 2px}

/* ---------- Buttons: pills and bracket links ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:transparent;border:1px solid currentColor;border-radius:999px;padding:13px 18px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.pill:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill--solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill--solid:hover{background:transparent;color:var(--fg)}
.pill--sm{padding:8px 12px}
.bracket{display:inline-flex;align-items:center;font:700 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-decoration:none;background:none;border:0;padding:12px 0;cursor:pointer;white-space:nowrap}
.bracket::before{content:"[";margin-right:.75em;transition:transform .35s var(--ease)}
.bracket::after{content:"]";margin-left:.75em;transition:transform .35s var(--ease)}
.bracket:hover::before{transform:translateX(-5px)}
.bracket:hover::after{transform:translateX(5px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:28px}

/* ---------- Header (floats over the first screen, turns solid once you scroll) ---------- */
.site{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--cream);border-bottom:1px solid transparent;transition:background-color .45s,border-color .45s}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr)}
.site.is-solid{background:rgba(22,22,22,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--rule-dk)}
.wordmark{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--cream);line-height:1;white-space:nowrap}
.wm-pre{font-family:var(--f-serif);font-style:italic;font-size:17px}
.wm-main{font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:-.03em}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a{font:700 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,230,214,.7);text-decoration:none;transition:color .25s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--cream)}
.nav a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:2px}
.site-actions{display:flex;gap:10px;align-items:center}
.site .pill{--fg:var(--cream);--bg:var(--black)}
.menu-btn{display:none}
@media (max-width:1000px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:430px){.site-actions .pill--solid{display:none}}

/* ---------- Menu overlay ---------- */
.navmenu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--black);color:var(--cream);overflow:auto;--fg:var(--cream);--bg:var(--black)}
.navmenu::backdrop{background:transparent}
.menu-in{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top,0px) var(--gutter-r) max(24px,env(safe-area-inset-bottom,0px)) var(--gutter)}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:var(--hdr)}
.menu-list{list-style:none;margin:0;padding:28px 0;align-self:center;border-bottom:1px solid var(--rule-dk)}
.menu-list a{display:grid;grid-template-columns:3em minmax(0,1fr);align-items:baseline;gap:2px 10px;padding:12px 0 14px;border-top:1px solid var(--rule-dk);text-decoration:none}
.mn-n{font:700 11px var(--f-mono);letter-spacing:.14em;color:var(--gray-400)}
.mn-name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;font-size:clamp(2.4rem,10.5vw,6rem);line-height:.92;transition:transform .45s var(--ease)}
.mn-trip{grid-column:2;font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--gray-400)}
.menu-list a:hover .mn-name{transform:translateX(12px)}
.menu-list a[aria-current="page"] .mn-n::after{content:" ●"}
.menu-foot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:20px;font:700 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.menu-foot a{color:var(--cream);text-decoration:none}

/* ---------- Draft pill (floats bottom-left while the site is in draft) ---------- */
.draftbar{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);background:rgba(243,243,243,.95);color:var(--black);border:1px solid var(--rule-gr);border-radius:999px;padding:5px 5px 5px 14px;font:11px/1.3 var(--f-mono);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.draftbar b{letter-spacing:.16em;text-transform:uppercase}
.db-txt{color:var(--gray-700)}
.db-btn{font:700 11px var(--f-mono);letter-spacing:.06em;color:var(--black);background:var(--white);border:1px solid var(--rule-gr);border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.db-btn:focus-visible{outline-color:var(--black)}
@media (max-width:700px){.db-txt{display:none}}

/* ---------- Loader: counts to 100, then lifts off the first screen ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--black);color:var(--cream);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 28px) var(--gutter);animation:ld-failsafe .01s 4.5s forwards}
@keyframes ld-failsafe{to{visibility:hidden;opacity:0}}
.ld-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:700 11px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400)}
.ld-mark{font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:-.02em;text-transform:none;color:var(--cream)}
.ld-mark em{font-family:var(--f-serif);font-weight:400;font-size:17px;letter-spacing:0;margin-right:4px}
.ld-count{align-self:end;display:flex;align-items:flex-start;font-family:var(--f-display);font-weight:900;font-size:clamp(7rem,26vw,22rem);line-height:.78;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ld-pct{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.28em;margin:.05em 0 0 .08em;letter-spacing:0}
.ld-bar{height:2px;background:var(--rule-dk);margin-top:22px;overflow:hidden}
.ld-bar i{display:block;height:100%;background:var(--cream);transform-origin:0 50%;transform:scaleX(0)}
.loader.is-done{transform:translateY(-100%);transition:transform 1s cubic-bezier(.76,0,.24,1)}

/* Headline lines rise out of a mask on load. */
.ln{display:block;overflow:hidden;padding:0 .08em .08em 0;margin-bottom:-.08em}
.ln > span{display:block}

/* ---------- Viewfinder marks and REC ---------- */
.vf{position:absolute;inset:0;pointer-events:none;z-index:3}
.vf i{position:absolute;width:22px;height:22px;border:0 solid var(--cream)}
.vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.rec-tc{display:inline-flex;align-items:center;gap:8px;font:700 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cream);animation:rec 2.4s ease-in-out infinite}
.slot-tag .rec{width:6px;height:6px;margin-right:6px;vertical-align:1px}
@keyframes rec{50%{opacity:.2}}

/* ---------- Home hero: the showreel fills the screen, framed like a viewfinder until you scroll ---------- */
.stage{position:relative}
.hero-cine{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--black);
  --k:1;--ft:calc(var(--hdr) + 12px);--fs:var(--gutter);--fb:clamp(84px,14vh,132px)}
.stage > .hero-cine{position:sticky;top:0}
.hc-media{position:absolute;inset:0;clip-path:inset(calc(var(--ft) * var(--k)) calc(var(--fs) * var(--k)) calc(var(--fb) * var(--k)) calc(var(--fs) * var(--k)) round calc(10px * var(--k)))}
.hc-media .slot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.slot--bleed .play{display:none}
.slot--bleed .slot-tag{left:auto;right:calc(var(--fs) + 14px);top:calc(var(--ft) + 14px)}
.hc-media .slot figcaption{left:auto;right:calc(var(--fs) + 14px);top:calc(var(--ft) + 46px);bottom:auto;max-width:300px;text-align:right}
.hc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(22,22,22,.5) 0%,rgba(22,22,22,0) 28%,rgba(22,22,22,.1) 50%,rgba(22,22,22,.82) 100%)}
.hc-vf{inset:auto;top:calc(var(--k) * (var(--ft) - 12px) + (1 - var(--k)) * (var(--hdr) + 10px));bottom:calc(var(--k) * (var(--fb) - 12px) + (1 - var(--k)) * 16px);left:calc(var(--k) * (var(--fs) - 12px) + (1 - var(--k)) * 16px);right:calc(var(--k) * (var(--fs) - 12px) + (1 - var(--k)) * 16px)}
.hc-inner{position:relative;z-index:4;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--ft) + 24px);padding-bottom:calc(var(--fb) + 10px)}
.hc-eyebrow{color:rgba(239,230,214,.82);margin-bottom:auto;padding-left:calc(14px * var(--k))}
.hc-title{color:var(--cream);margin:0}
.hc-pre{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(1.9rem,4.6vw,4.8rem);line-height:1;letter-spacing:-.01em;margin-left:.06em}
.hc-main{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(7rem,min(27vw,40vh),25rem);line-height:.78;letter-spacing:-.055em;margin-left:-.045em}
.hc-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:18px 48px;align-items:end;margin-top:clamp(16px,2.6vh,30px)}
.hc-sub{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,3.3rem);line-height:.95;letter-spacing:-.04em;color:var(--cream)}
.hc-side .lede{color:rgba(239,230,214,.84)}
.hc-side .cta-row{margin-top:20px}
.hc-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;height:var(--fb);display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.hc-bar .bracket{padding:14px 0}
.hc-inner a,.hc-inner button,.hc-inner p,.hc-inner h1{pointer-events:auto}
@media (max-width:860px){.hc-foot{grid-template-columns:minmax(0,1fr)}.hc-loc{display:none}}
@media (max-width:700px){.slot--bleed .slot-tag{top:calc(var(--ft) + 86px)}.hc-media .slot figcaption{top:calc(var(--ft) + 116px);max-width:210px}}
@media (max-width:700px) and (max-height:740px){.hc-media .slot figcaption{display:none}}
@media (max-height:700px) and (max-width:860px){.hc-side .lede{display:none}}

/* ---------- Room heroes: the headline beside the hero reel in a viewfinder, lit by a blur of the reel itself ---------- */
.hero-room{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;overflow:clip;display:grid;align-items:center}
.hr-ambient{position:absolute;inset:-12%;filter:blur(70px) saturate(1.1);opacity:.5;pointer-events:none}
.hero-room::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 70% 40%,rgba(22,22,22,0) 0%,rgba(22,22,22,.7) 70%,var(--black) 100%)}
.hr-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(32px,6vw,96px);align-items:center;padding-top:calc(var(--hdr) + clamp(36px,7vh,88px));padding-bottom:clamp(44px,8vh,96px)}
.hr-text{min-width:0}
.hr-title{font-size:clamp(3.4rem,8.8vw,8.6rem);margin-bottom:30px}
.hr-media{justify-self:end;width:100%;max-width:340px;display:grid;gap:14px}
.vf-wrap{position:relative;padding:14px}
.hr-media .rec-tc{padding-left:14px;color:var(--cream)}
@media (max-width:880px){.hr-grid{grid-template-columns:minmax(0,1fr)}.hr-media{justify-self:center;max-width:300px}}
.facts{list-style:none;margin:40px 0 0;padding:18px 0 0;border-top:1px solid var(--fg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.facts li{min-width:0}
.facts b{display:block;font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--fg)}
.facts span{font-size:14.5px;color:var(--fg-2);line-height:1.45;display:block}
.proof{margin:22px 0 0;font-size:14.5px;color:var(--fg-2);max-width:40em}
.proof strong{color:var(--fg);font-weight:700}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}}

/* ---------- Sections ---------- */
.section > .wrap{padding-block:clamp(76px,10vw,150px)}
.section.tight > .wrap{padding-block:clamp(44px,6vw,84px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:clamp(32px,5vw,64px)}
.sec-head > div{min-width:0}

/* ---------- Slots: placeholders that name the file that replaces them ---------- */
.slot{position:relative;display:block;margin:0;width:100%;max-width:100%;aspect-ratio:var(--ar,4/5);border-radius:4px;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,#3A3A3A,#141414);color:var(--cream)}
.slot::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(22,22,22,.88),rgba(22,22,22,0) 58%)}
.slot--reel{--ar:9/16}
.slot--wide{--ar:16/9}
.slot--photo{--ar:3/2}
.slot-tag{position:absolute;top:10px;left:10px;z-index:1;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:rgba(22,22,22,.66);padding:4px 7px;border-radius:2px;font-variant-numeric:tabular-nums}
.play{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;z-index:1;border:1px solid rgba(239,230,214,.65);border-radius:50%}
.play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--cream)}
.slot figcaption{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:grid;gap:5px}
.slot-cap{font-size:14px;line-height:1.35;color:var(--cream);font-weight:600}
.slot-cap em{font-style:normal;font-weight:400;color:var(--gray-400)}
.slot-note{font-family:var(--f-mono);font-size:10px;line-height:1.45;color:var(--cream);opacity:.8;border-top:1px dashed rgba(239,230,214,.4);padding-top:6px;overflow-wrap:anywhere}
.notes-off .slot figcaption,.notes-off .slot-tag,.notes-off .play,.notes-off .ab-note,.notes-off .rp-note{display:none}
.notes-off .slot::after{display:none}
.band-dark .slot{outline:1px solid var(--rule-dk);outline-offset:-1px}

/* ---------- Statement: one giant line, stills drifting over it ---------- */
.statement{position:relative;overflow:clip}
.statement > .wrap{padding-block:clamp(84px,12vw,170px)}
.st-stage{position:relative}
.st-giant{position:relative;z-index:1;font-size:clamp(3.3rem,11vw,11rem);line-height:.86;color:var(--black)}
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.fl{position:absolute;width:clamp(120px,15vw,230px);pointer-events:auto;box-shadow:0 24px 48px rgba(22,22,22,.28)}
.fl1{top:-16%;right:2%}
.fl2{top:34%;right:7%;width:clamp(150px,19vw,290px)}
.fl3{bottom:-58%;right:8%}
.fl4{bottom:-52%;left:4%;width:clamp(110px,12vw,190px)}
.st-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 64px;align-items:end;margin-top:clamp(120px,16vw,220px)}
.st-foot .facts{margin-top:0}
.st-foot .proof{margin:0}
@media (max-width:760px){
  .floaters{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
  .fl{position:relative;inset:auto;width:auto;box-shadow:none}
  .fl2{width:auto}
  .st-foot{grid-template-columns:minmax(0,1fr);margin-top:48px}
}

/* ---------- Rooms index: giant names, a photo follows the cursor ---------- */
.room-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.room-row{position:relative;display:grid;grid-template-columns:4.2em minmax(0,1fr) auto 1.6em;align-items:center;gap:10px 28px;padding:clamp(20px,2.8vw,34px) 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--fg);transition:opacity .4s}
.rr-n{font:700 11px var(--f-mono);letter-spacing:.14em;color:var(--fg-2);align-self:start;padding-top:.9em}
.rr-main{display:grid;gap:8px;min-width:0}
.rr-name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.5rem,8.6vw,8.2rem);line-height:.84;letter-spacing:-.05em;transition:transform .55s var(--ease)}
.rr-trip{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.2}
.rr-line{font-size:14.5px;color:var(--fg-2);max-width:34em}
.rr-meta{display:grid;gap:10px;justify-items:end;font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);text-align:right}
.rr-feat{border:1px solid var(--fg);color:var(--fg);border-radius:999px;padding:6px 10px}
.rr-arrow{font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1;transition:transform .45s var(--ease)}
.rr-cover{display:none}
@media (max-width:374px){.rr-name{font-size:2.1rem}}
@media (hover:hover) and (pointer:fine){
  .room-row:hover .rr-name{transform:translateX(18px)}
  .room-row:hover .rr-arrow{transform:translate(6px,-6px)}
  .room-list:hover .room-row:not(:hover){opacity:.3}
}
.rr-preview{position:fixed;left:0;top:0;z-index:40;width:clamp(260px,24vw,380px);aspect-ratio:16/10;border-radius:6px;overflow:hidden;pointer-events:none;opacity:0;scale:.82;transition:opacity .3s,scale .45s var(--ease);box-shadow:0 30px 60px rgba(0,0,0,.45);will-change:transform}
.rr-preview.is-on{opacity:1;scale:1}
.rr-preview > div{position:absolute;inset:0;opacity:0;transition:opacity .35s;background-color:#2a2a2a}
.rr-preview > div.is-cur{opacity:1}
.rp-note{position:absolute;left:10px;bottom:10px;font:10px var(--f-mono);letter-spacing:.06em;color:var(--cream);background:rgba(22,22,22,.66);padding:4px 7px;border-radius:2px}
@media (hover:none),(pointer:coarse),(max-width:900px){
  .room-row{grid-template-columns:2.6em minmax(0,1fr) auto}
  .rr-arrow{grid-column:3;grid-row:1;align-self:start}
  .rr-meta{grid-column:2 / -1;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center}
  .rr-cover{display:block;grid-column:2 / -1;margin-top:6px;max-width:560px}
  .rr-preview{display:none}
}

/* ---------- About: initials monogram ---------- */
.ab-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,104px);align-items:start}
@media (min-width:861px){.ab-card-col{position:sticky;top:calc(var(--hdr) + 28px)}}
.mono-card{max-width:520px}
.mc-l{position:absolute;left:50%;z-index:1;transform:translateX(-50%);font-family:var(--f-serif);font-weight:400;font-size:clamp(7rem,15vw,15rem);line-height:.8;color:var(--cream);font-variation-settings:"opsz" 96;pointer-events:none}
.mc-n{top:5%}
.mc-r{bottom:6%}
.mc-name{position:absolute;left:0;right:0;top:50%;z-index:1;transform:translateY(-50%);text-align:center;display:grid;gap:6px}
.mc-name h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(1rem,1.9vw,1.45rem);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--cream)}
.mc-sub{font-family:var(--f-serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--cream)}
.ab-note{margin:10px 0 0;font:10px/1.45 var(--f-mono);color:var(--fg-2)}
@media (max-width:860px){.ab-grid{grid-template-columns:minmax(0,1fr)}.mono-card{max-width:420px}}
.about2 p{color:var(--fg-2);margin:16px 0 0;font-size:1.04rem;max-width:36em}
.about2 p.big{color:var(--fg);font-family:var(--f-serif);font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.22;letter-spacing:-.005em;margin-top:0}
.roots{list-style:none;margin:32px 0 0;padding:16px 0 0;border-top:1px solid var(--fg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.roots li{min-width:0}
.roots b{display:block;font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:5px}
.roots span{font-size:15px;color:var(--fg-2);line-height:1.4;display:block}
@media (max-width:1000px){.roots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.story{display:grid;gap:18px;margin-top:34px}
.about2 .story p{margin:0}
.about2 .story p.philosophy{color:var(--fg);font-size:clamp(1.06rem,1.5vw,1.16rem);line-height:1.6}

/* ---------- Video grids ---------- */
.reels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1040px){.reels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reels .slot-cap{font-size:13px}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:820px){.vids{grid-template-columns:minmax(0,1fr)}}

/* ---------- Photos ---------- */
.filters{display:flex;flex-wrap:wrap;gap:4px 18px}
.chip{font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);background:none;border:0;padding:8px 0;cursor:pointer}
.chip:hover{color:var(--fg)}
.chip .n{margin-left:6px;opacity:.65;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{color:var(--fg)}
.chip[aria-pressed="true"]::before{content:"[ "}
.chip[aria-pressed="true"]::after{content:" ]"}
.photo-grid{columns:3 240px;column-gap:12px}
.photo-grid .slot{break-inside:avoid;margin-bottom:12px}
@media (max-width:560px){.photo-grid{columns:2;column-gap:8px}.photo-grid .slot{margin-bottom:8px}.photo-grid .slot-cap{font-size:13px}}

/* ---------- Before / after ---------- */
.edit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(64px,8vw,110px);padding-top:clamp(40px,5vw,60px);border-top:1px solid var(--rule)}
.edit > div{min-width:0}
.edit p{color:var(--fg-2);margin:16px 0 0;max-width:30em}
.compare{position:relative;aspect-ratio:3/2;max-width:100%;border-radius:4px;overflow:hidden;--pos:50%;background:#242424}
.compare:focus-within{outline:2px solid var(--black);outline-offset:2px}
.compare-layer{position:absolute;inset:0}
.compare-after{clip-path:inset(0 0 0 var(--pos))}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--cream);z-index:2;pointer-events:none}
.compare-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--black);font:700 13px var(--f-mono);display:grid;place-items:center;letter-spacing:-.05em}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.compare-label{position:absolute;top:12px;z-index:1;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:rgba(22,22,22,.66);padding:4px 7px;border-radius:2px}
.lb-before{left:12px}
.lb-after{right:12px}
.edit .slot-note{margin-top:10px;border-top:0;padding-top:0;color:var(--fg-2);opacity:1}
.notes-off .edit .slot-note{display:none}
@media (max-width:820px){.edit{grid-template-columns:minmax(0,1fr)}}

/* ---------- Case study ---------- */
.case{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.case-copy{min-width:0}
.case-copy p{color:var(--fg-2);max-width:34em;margin:20px 0 0}
.case-out{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.case-out li{font:700 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);border-radius:999px;padding:7px 12px;color:var(--fg)}
.case-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:36px}
.case-media .slot--reel{grid-row:span 2}
.case-media .slot--sq{--ar:9/8}
.case-media--wide .slot--wide{grid-column:1/-1}
.ticket-wrap{position:relative;filter:drop-shadow(0 18px 28px rgba(0,0,0,.2));max-width:370px}
.ticket{--s:14px;background:var(--white);color:var(--black);font-family:var(--f-mono);font-size:13px;line-height:1.65;padding:36px 26px;transform:rotate(-1.2deg);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--s) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--s) 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--s) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--s) 51% repeat-x}
.t-title{text-align:center;letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-size:11.5px}
.t-big{text-align:center;font-size:24px;font-weight:700;letter-spacing:.04em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.t-sub{text-align:center;font-size:12px;color:var(--gray-700)}
.t-rule{border:0;border-top:1px dashed #B8B8B8;margin:14px 0}
.t-row{display:flex;justify-content:space-between;gap:12px}
.t-row span:first-child{color:var(--gray-700);text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;padding-top:1px;flex:none}
.t-row span:last-child{text-align:right;min-width:0}
.t-items{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.t-items li{display:grid;grid-template-columns:3.2ch minmax(0,1fr);gap:8px;font-variant-numeric:tabular-nums}
.t-end{text-align:center;letter-spacing:.2em;font-size:12px;font-weight:700;margin-top:4px}
@media (max-width:880px){.case{grid-template-columns:minmax(0,1fr)}.ticket-wrap{justify-self:center;width:100%}}

/* ---------- Steps and menus ---------- */
.steps,.menu{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.steps li,.menu li{border-top:1px solid var(--fg);padding-top:20px;min-width:0}
.step-n{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(2.8rem,4.8vw,4.2rem);line-height:1;color:var(--fg);letter-spacing:-.02em}
.menu .step-n{font-size:clamp(1.5rem,2.2vw,2rem)}
.steps h3,.menu h3{margin:16px 0 8px;text-transform:uppercase;font-weight:900;letter-spacing:-.025em;font-size:clamp(1.3rem,2vw,1.6rem)}
.steps p,.menu p{color:var(--fg-2);font-size:15.5px;margin:0}
.menu--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.steps,.menu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps,.menu,.menu--3{grid-template-columns:minmax(0,1fr)}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px)}
@media (max-width:700px){.trio{grid-template-columns:minmax(0,1fr)}}

/* ---------- Kit ---------- */
.kit-drop summary{list-style:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;cursor:pointer}
.kit-drop summary::-webkit-details-marker{display:none}
.kit-drop summary:focus-visible{outline:2px solid var(--fg);outline-offset:6px;border-radius:4px}
.kit-title{display:block;min-width:0}
.kit-title .eyebrow{display:block}
.kit-toggle{display:inline-flex;align-items:center;gap:10px;font:700 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);border:1px solid var(--fg);border-radius:999px;padding:12px 18px;white-space:nowrap;transition:background-color .3s,color .3s}
.kit-drop summary:hover .kit-toggle{background:var(--fg);color:var(--bg)}
.kit-icon{position:relative;width:11px;height:11px}
.kit-icon::before,.kit-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.kit-icon::after{transform:rotate(90deg)}
.kit-drop[open] .kit-icon::after{display:none}
.kit-drop:not([open]) .when-open,.kit-drop[open] .when-closed{display:none}
.kit-drop > .kit{margin-top:clamp(32px,4vw,48px)}
.kit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.kit > div{min-width:0}
.specs{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:0}
.specs dt,.specs dd{padding:14px 0;border-top:1px solid var(--rule)}
.specs dt{font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);padding-right:28px;padding-top:17px}
.specs dd{margin:0;font-size:16px;font-weight:500}
.also{margin:0 0 18px;color:var(--fg-2);font-size:15.5px;max-width:30em}
.also:first-child{font-family:var(--f-serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;color:var(--fg)}
@media (max-width:820px){.kit{grid-template-columns:minmax(0,1fr)}}

/* ---------- Contact ---------- */
.ct-title{font-size:clamp(3.8rem,13.5vw,13rem);line-height:.84;margin-bottom:clamp(36px,5vw,64px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,88px);align-items:start}
.ct-grid > div{min-width:0}
.contact .lead{color:var(--fg-2);font-size:1.06rem;margin:0;max-width:30em}
.contact .lead.es{color:var(--fg);font-family:var(--f-serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;margin-top:18px}
.c-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:18px 0;border-top:1px solid var(--rule)}
.c-row:last-child{border-bottom:1px solid var(--rule)}
.c-label{font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);width:9em;flex:none}
.c-val{font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:500;min-width:0;overflow-wrap:anywhere;flex:1 1 12em}
.copy-msg{font:11px var(--f-mono);color:var(--fg-2);min-width:5em}
@media (max-width:820px){.ct-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Footer ---------- */
.site-foot > .wrap{padding-top:clamp(48px,6vw,84px);padding-bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + 56px)}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-bottom:24px;border-bottom:1px solid var(--rule-dk);font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.foot-nav a,.ft-contact a{color:var(--cream);text-decoration:none}
.foot-nav a:hover,.ft-contact a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-word{margin:clamp(28px,5vw,56px) 0 0;color:var(--cream);line-height:.8}
.ft-pre{display:block;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.7rem,5vw,5rem);margin-left:.05em}
.ft-main{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(6rem,31vw,30rem);letter-spacing:-.06em;margin-left:-.05em;line-height:.78}
.ft-legal{font:11px var(--f-mono);letter-spacing:.08em;color:var(--gray-400);margin:24px 0 0}

/* ---------- Real media: files that have replaced their placeholders ---------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slot--real{background:#1c1c1c}
.slot--real::after{background:linear-gradient(to top,rgba(22,22,22,.5),rgba(22,22,22,0) 28%)}
.slot--real:not(.slot--reel)::after{display:none}
.slot--real .slot-tag{z-index:2}
.slot--real .play{z-index:2;opacity:0}
@media (hover:hover){.slot--real:hover .play{opacity:1}}
.slot--real:focus-visible .play{opacity:1}
.notes-off .slot--real .slot-tag{display:block}
.notes-off .slot--real.slot--reel::after{display:block}
.slot[data-full]{cursor:zoom-in}

/* ---------- Selected work (home): the feature project, then three more ---------- */
.sw-feat{display:grid;grid-template-columns:minmax(0,2.667fr) minmax(0,1fr) minmax(0,1.45fr);column-gap:12px;row-gap:28px;align-items:start}
.sw-photo{display:block;min-width:0;border-radius:4px;overflow:hidden;overflow:clip}
.sw-photo .slot{border-radius:0}
.sw-photo img,.wk-media img{transition:scale 1s var(--ease)}
@media (hover:hover){.sw-photo:hover img,.wk-card:hover .wk-media img{scale:1.04}}
.sw-info{min-width:0;padding-left:clamp(8px,1.6vw,24px);display:grid;gap:14px;align-content:start}
.wk-n{font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.sw-title{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.86;font-size:clamp(2.3rem,4.4vw,4.6rem)}
.sw-title a{text-decoration:none}
.sw-line{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.2}
.sw-copy{margin:0;color:var(--fg-2);font-size:15.5px;line-height:1.55}
.sw-meta{margin:0;border-top:1px solid var(--rule)}
.sw-meta > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.sw-meta dt{font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);flex:none}
.sw-meta dd{margin:0;font-size:14.5px;text-align:right}
.sw-info .bracket{justify-self:start;padding:4px 0}
.sw-more{margin-top:clamp(56px,7vw,96px)}
@media (max-width:1000px){.sw-feat{grid-template-columns:minmax(0,2.667fr) minmax(0,1fr)}.sw-info{grid-column:1/-1;padding-left:0;max-width:44rem}}
@media (max-width:600px){
  .sw-feat{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:14px;row-gap:14px}
  .sw-photo{grid-column:1/-1}
  .sw-info{grid-column:auto;max-width:none;gap:10px}
  .sw-copy{display:none}
  .sw-title{font-size:2.1rem}
  .sw-meta > div{display:grid;gap:2px;padding:7px 0}
  .sw-meta dd{text-align:left;font-size:13.5px}
}

/* ---------- Work: poster cards ---------- */
.wk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) 12px}
.wk-item{min-width:0}
.wk-item--feat{grid-column:span 2}
.wk-card{display:grid;gap:14px;text-decoration:none;color:var(--fg);transition:opacity .4s}
.wk-media{position:relative;border-radius:4px;overflow:hidden;overflow:clip}
.wk-media .slot{--ar:4/5;border-radius:0}
.wk-item--feat .wk-media .slot{--ar:16/10}
.wk-info{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;align-items:baseline;gap:6px 10px;border-top:1px solid var(--rule);padding-top:14px}
.wk-title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(1.55rem,2.4vw,2.4rem);margin:0}
.wk-item--feat .wk-title{font-size:clamp(2rem,4vw,4rem)}
.wk-arrow{font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1;transition:transform .45s var(--ease)}
.wk-soon{font:700 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--rule);border-radius:999px;padding:5px 9px;white-space:nowrap;align-self:center}
.wk-line{grid-column:2/-1;margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.25}
.wk-meta{grid-column:2/-1;margin:0;font:700 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){
  .wk-card:hover .wk-arrow{transform:translate(5px,-5px)}
  .wk-grid:hover .wk-item:not(:hover) .wk-card{opacity:.45}
}
@media (max-width:900px){.wk-grid:not(.sw-more){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wk-grid,.wk-grid:not(.sw-more){grid-template-columns:minmax(0,1fr)}.wk-item--feat{grid-column:auto}.wk-media .slot{--ar:4/3}.wk-item--feat .wk-media .slot{--ar:3/2}}

/* ---------- Work page ---------- */
.hw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:24px 64px;align-items:end;padding-top:calc(var(--hdr) + clamp(48px,9vh,110px));padding-bottom:clamp(36px,5vw,64px)}
.hw-text,.hw-side{min-width:0}
.hw-title{font-size:clamp(4.4rem,17vw,16rem);line-height:.8;margin:0}
.hw-count{margin:18px 0 0;font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.work-index > .wrap{padding-top:0}
.wk-filters{padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:clamp(32px,4vw,56px)}
@media (max-width:820px){.hw-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Project page: a full-bleed poster, then the brief, the films and the photos ---------- */
.hero-proj{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;overflow:clip;isolation:isolate;background:var(--black)}
.hp-media{position:absolute;inset:0;z-index:-2;overflow:hidden;overflow:clip}
.hp-media picture,.hp-media img{display:block;width:100%;height:100%}
.hp-media img{object-fit:cover;object-position:50% 45%}
.hero-proj::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(22,22,22,.62) 0%,rgba(22,22,22,.12) 26%,rgba(22,22,22,.3) 52%,rgba(22,22,22,.94) 100%)}
.hp-inner{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--hdr) + 20px);padding-bottom:clamp(28px,5vh,56px)}
.hp-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin-bottom:auto;padding-bottom:24px}
.hp-top .eyebrow{color:rgba(239,230,214,.86);margin:0}
.hp-top .bracket,.hp-jump{color:var(--cream)}
.hp-title{color:var(--cream);font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.8;font-size:clamp(3.6rem,19vw,19rem);margin:0 0 0 -.04em}
.hp-pre{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:clamp(1.25rem,2.6vw,2.6rem);line-height:1.1;margin:0 0 .25em .04em;font-variation-settings:"opsz" 96}
.hp-facts{grid-template-columns:repeat(4,minmax(0,1fr));border-top-color:var(--cream);margin-top:clamp(20px,3.4vh,40px)}
.hp-facts b{color:var(--cream)}
.hp-facts span{color:rgba(239,230,214,.8)}
.hp-jump{align-self:flex-start;margin-top:10px}
@media (max-width:860px){.hp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hp-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}}
@media (max-height:700px) and (max-width:860px){.hp-jump{display:none}}
.case-media.gallery{max-width:640px}
.case-media .slot--pc,.case-media .slot--film{grid-column:1/-1}
.case-link{display:flex;width:fit-content;margin-top:6px}
.hp-title--long{font-size:clamp(3.2rem,15vw,15rem)}
.hp-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hp-media.is-looping .hp-loop{opacity:1}

/* Patrizia's: the 4:3 promo beside its notes, and a wall of postcards */
.slot--pc,.slot--film{--ar:4/3}
.promo-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.film.film--wide{max-width:none}
@media (max-width:900px){.promo-grid{grid-template-columns:minmax(0,1fr)}}
.pc-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:700px){.pc-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.pc-note{margin:clamp(24px,3vw,40px) 0 0;max-width:34em;color:var(--fg);font-family:var(--f-serif);font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.3}

/* the recaps */
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(16px,3vw,48px);align-items:start}
.film{min-width:0;width:100%;max-width:360px}
.film .vf-wrap{padding:12px}
.film-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:10px 12px 0;font:700 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.film-cap b{color:var(--fg)}
.film-copy{align-self:end;min-width:0;padding-bottom:12px}
.film-copy p{margin:16px 0 0;color:var(--fg-2);max-width:30em}
.film-copy p.big{margin:0;color:var(--fg);font-family:var(--f-serif);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.22}
@media (max-width:900px){.film-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.film{max-width:none}.film-copy{grid-column:1/-1;align-self:start}}
@media (max-width:560px){.film .vf-wrap{padding:8px}.film .vf i{width:14px;height:14px}.film-cap{flex-direction:column;margin:8px 8px 0}}

/* next */
.next-band > .wrap{padding-block:clamp(48px,7vw,96px)}
.next-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 24px;text-decoration:none;color:var(--fg)}
.next-link .eyebrow{grid-column:1/-1;margin:0}
.nx-title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.84;font-size:clamp(3.2rem,11vw,10.5rem);transition:transform .55s var(--ease)}
.nx-arrow{font-size:clamp(2.4rem,6vw,6rem);line-height:.9;transition:transform .45s var(--ease)}
@media (hover:hover){.next-link:hover .nx-title{transform:translateX(18px)}.next-link:hover .nx-arrow{transform:translate(8px,-8px)}}

/* ======================= Motion =======================
   Progressive: every element is complete without any of this, and all of it switches off for reduced motion.
   Where the browser supports scroll-linked animation, things open as they scroll in and close as they scroll out, in both directions. */

/* smooth wheel scrolling (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Hover */
.play{transition:transform .35s var(--ease),background-color .35s}
@media (hover:hover){.slot:hover .play{transform:scale(1.14);background-color:rgba(239,230,214,.16)}}
.slot{transition:clip-path 1s var(--ease),translate 1s var(--ease),transform .45s var(--ease),box-shadow .45s}
@media (hover:hover){.photo-grid .slot:hover,.reels .slot:hover,.vids .slot:hover,.trio .slot:hover,.case-media .slot:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.2)}}
.slot[role="button"]{cursor:pointer}
.slot[role="button"]:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Video placeholders drift slowly so you can see where motion will live. Real videos replace this. */
.slot--reel,.slot--wide,.lb-frame{background-size:135% 135%;animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0% 20%}to{background-position:100% 80%}}

/* Scroll progress: a thin cream line along the bottom of the header. */
.site{--progress:0}
.site::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);transform-origin:0 50%;transform:scaleX(var(--progress))}

/* Real videos: a small sound toggle appears once footage is in. */
.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sound{position:absolute;right:10px;bottom:10px;z-index:2;font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:rgba(22,22,22,.66);border:0;border-radius:999px;padding:6px 10px;cursor:pointer}

/* First screen: headline lines rise out of their masks; the rest fades up. Failsafes show everything if the script never runs. */
.js .ln > span{transform:translateY(108%);transition:transform 1.15s cubic-bezier(.16,1,.3,1);animation:ln-failsafe .01s 5s forwards}
.js.is-in .ln > span{transform:none}
.js .ln:nth-child(2) > span{transition-delay:.09s}
.js .ln:nth-child(3) > span{transition-delay:.18s}
.js .hc-sub .ln:nth-child(1) > span{transition-delay:.26s}
.js .hc-sub .ln:nth-child(2) > span{transition-delay:.34s}
@keyframes ln-failsafe{to{transform:none}}
.js .hx{opacity:0;translate:0 24px;transition:opacity .9s ease,translate 1.1s cubic-bezier(.16,1,.3,1);animation:hx-failsafe .01s 5s forwards}
.js.is-in .hx{opacity:1;translate:none}
@keyframes hx-failsafe{to{opacity:1;translate:none}}
.js:not(.is-in) .hero-room .hero-reel{clip-path:inset(42% 0 42% 0 round 4px);animation:reel-failsafe .01s 5s forwards}
@keyframes reel-failsafe{to{clip-path:inset(0 0 0 0 round 4px)}}
.js.is-in .hero-room .hero-reel{animation:drift 9s ease-in-out infinite alternate,lb-in 1.25s var(--ease) .2s both}

/* Reveal keyframes. Photos and text move with opacity, translate and scale only, which phones animate on the graphics chip, so they stay smooth.
   translate and scale are separate from transform, so hover lifts keep working on top of them. */
@keyframes rv-in{from{opacity:0;translate:0 44px}}
@keyframes rv-out{to{opacity:0;translate:0 -30px}}
@keyframes ph-in{from{opacity:0;translate:0 64px;scale:.94}}
@keyframes ph-out{to{opacity:0;translate:0 -40px;scale:.96}}
@keyframes lb-in{0%{clip-path:inset(42% 0 42% 0 round 4px)}99.9%{clip-path:inset(0 0 0 0 round 4px)}}
@keyframes lb-out{0%{clip-path:inset(0 0 0 0 round 4px)}100%{clip-path:inset(42% 0 42% 0 round 4px)}}
@keyframes mk-in{from{clip-path:inset(-15% 100% -15% 0)}to{clip-path:inset(-15% 0 -15% 0)}}
@keyframes mk-out{from{clip-path:inset(-15% 0 -15% 0)}to{clip-path:inset(-15% 0 -15% 100%)}}
@keyframes fl-float{from{translate:0 var(--py,80px)}to{translate:0 calc(var(--py,80px) * -1)}}

/* Older browsers: the same reveals, triggered when each piece enters or leaves the screen. */
.mark{transition:clip-path .9s var(--ease)}
.mark.is-primed{clip-path:inset(-15% 100% -15% 0);transition:none}
.slot.is-primed{clip-path:inset(8% 8% 8% 8% round 4px);translate:0 26px;transition:none}
.slot--reel.is-primed,.slot--wide.is-primed{clip-path:inset(36% 0 36% 0 round 4px);translate:none}
.wk-item{transition:opacity .9s var(--ease),translate 1s var(--ease)}
.wk-item.is-primed{opacity:0;translate:0 40px;transition:none}

/* Project poster: the photo fades in under the title, then drifts slower than the page as you scroll away. */
@keyframes hp-drift{to{scale:1.1;translate:0 10%}}
.js .hp-media{opacity:0;transition:opacity 1.6s ease .1s;animation:hx-failsafe .01s 5s forwards}
.js.is-in .hp-media{opacity:1}

@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .rv{animation:rv-in cubic-bezier(.22,1,.36,1) both,rv-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:view(block 90px 0px),view(block 90px 0px);animation-range:cover 0% cover 32%,exit 0% exit 100%}
  main .slot{animation:ph-in cubic-bezier(.22,1,.36,1) both,ph-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:view(block 90px 0px),view(block 90px 0px);animation-range:cover 0% cover 32%,exit 0% exit 100%}
  main .slot--reel,main .slot--wide{animation:drift 9s ease-in-out infinite alternate,lb-in cubic-bezier(.22,1,.36,1) both,lb-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:auto,view(block 90px 0px),view(block 90px 0px);animation-range:normal,cover 0% cover 32%,exit 0% exit 100%}
  .mark{animation:mk-in cubic-bezier(.22,1,.36,1) both,mk-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:view(block 90px 0px),view(block 90px 0px);animation-range:cover 4% cover 34%,exit 0% exit 100%}
  /* project cards move as one piece (photo and title together) */
  .pv{animation:ph-in cubic-bezier(.22,1,.36,1) both,ph-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:view(block 90px 0px),view(block 90px 0px);animation-range:cover 0% cover 32%,exit 0% exit 100%}
  main .wk-media .slot{animation:none}
  /* side-by-side pieces open one after another */
  .rv.d1,.pv.d1,main .slot.d1{animation-range:cover 4% cover 36%,exit 0% exit 100%}
  .rv.d2,.pv.d2,main .slot.d2{animation-range:cover 8% cover 40%,exit 0% exit 100%}
  .rv.d3,.pv.d3,main .slot.d3{animation-range:cover 12% cover 44%,exit 0% exit 100%}
  .rv.d4,.pv.d4,main .slot.d4{animation-range:cover 16% cover 48%,exit 0% exit 100%}
  .rv.d5,.pv.d5,main .slot.d5{animation-range:cover 20% cover 52%,exit 0% exit 100%}
  main .slot--reel.d1,main .slot--wide.d1{animation-range:normal,cover 4% cover 36%,exit 0% exit 100%}
  main .slot--reel.d2,main .slot--wide.d2{animation-range:normal,cover 8% cover 40%,exit 0% exit 100%}
  main .slot--reel.d3,main .slot--wide.d3{animation-range:normal,cover 12% cover 44%,exit 0% exit 100%}
  main .slot--reel.d4,main .slot--wide.d4{animation-range:normal,cover 16% cover 48%,exit 0% exit 100%}
  main .slot--reel.d5,main .slot--wide.d5{animation-range:normal,cover 20% cover 52%,exit 0% exit 100%}
  /* first screen on room pages: plays on load, then fades as you scroll away and back when you return */
  .hero-room .hx,.hero-proj .hx,.hero-work .hx{animation:hx-failsafe .01s 5s forwards,rv-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:auto,view(block 90px 0px);animation-range:normal,exit 0% exit 100%}
  .hero-room .hxo,.hero-proj .hxo,.hero-work .hxo{animation:rv-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:view(block 90px 0px);animation-range:exit 0% exit 100%}
  .hero-proj .hp-media img,.hero-proj .hp-media .hp-loop{animation:hp-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  main .hero-room .hero-reel{animation:drift 9s ease-in-out infinite alternate,lb-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:auto,view(block 90px 0px);animation-range:normal,exit 0% exit 100%}
  .js.is-in main .hero-room .hero-reel{animation:drift 9s ease-in-out infinite alternate,lb-in 1.25s var(--ease) .2s both,lb-out cubic-bezier(.64,0,.78,0) forwards;animation-timeline:auto,auto,view(block 90px 0px);animation-range:normal,normal,exit 0% exit 100%}
  /* home first screen runs its own motion (the frame opens as you scroll) */
  main .hc-media .slot{animation:drift 9s ease-in-out infinite alternate;animation-timeline:auto;animation-range:normal}
  /* stills drift over the giant line at different speeds */
  main .statement .fl{animation:fl-float linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .fl1{--py:70px}.fl2{--py:150px}.fl3{--py:100px}.fl4{--py:200px}
}}
@media (max-width:760px){main .statement .fl{--py:24px}}

/* D · Kitchen ticket: prints out of a black printer slot, line by line, then tears off at an angle. */
.ticket{transition:transform .6s var(--ease)}
.ticket-wrap::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-9px;height:16px;border-radius:8px;background:var(--black);opacity:0;transform:scaleX(.92);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.ticket-wrap.is-primed::after,.ticket-wrap.is-printing::after{opacity:1;transform:none}
.ticket-wrap.is-primed .ticket{transform:translateY(100%) rotate(0deg);clip-path:inset(0 0 100% 0);transition:none}
.ticket-wrap.is-printing .ticket{transform:translateY(0) rotate(0deg);clip-path:inset(0 0 0 0)}

/* A · Full-screen player */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,14,14,.96);color:var(--cream);overflow:hidden;font-family:var(--f-body)}
.lb::backdrop{background:transparent}
.lb-inner{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;padding:72px 88px 32px}
.lb-frame{position:relative;border-radius:6px;overflow:hidden;background-color:#1f1f1f;aspect-ratio:var(--lar,9/16);box-shadow:0 30px 80px rgba(0,0,0,.5);touch-action:pan-y}
.lb-frame.is-tall{height:min(76vh,calc((100vw - 48px) * var(--hr,1.7778)))}
.lb-frame.is-wide{width:min(calc(100vw - 200px),1100px,calc(72vh * var(--wr,1.7778)))}
.lb-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,22,22,.85),rgba(22,22,22,0) 50%);pointer-events:none}
.lb-frame video,.lb-frame img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;background:#000}
.lb-frame.is-photo{animation:none;background:#000}
.lb-frame.is-photo::after{display:none}
.lb-frame .play{width:64px;height:64px;margin:-32px 0 0 -32px}
.lb-frame .play::before{border-width:10px 0 10px 16px}
.lb-msg{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;font-size:14px;line-height:1.4;color:var(--cream)}
.lb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:center;text-align:center;max-width:min(92vw,640px)}
.lb-count{font:700 11px var(--f-mono);letter-spacing:.14em;color:var(--gray-400);font-variant-numeric:tabular-nums}
.lb-cap{font-family:var(--f-serif);font-size:20px}
.lb-cap em{font-style:italic;color:var(--gray-400);margin-left:8px;font-size:16px}
.lb-btn{position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid rgba(239,230,214,.4);background:rgba(22,22,22,.6);color:var(--cream);cursor:pointer;padding:0}
.lb-btn:hover{background:var(--cream);color:var(--black)}
.lb-btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:50%}
.lb-btn::before,.lb-btn::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.lb-close{top:16px;right:16px}
.lb-close::before,.lb-close::after{width:18px;height:1.5px;margin:-.75px 0 0 -9px;transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-prev::before,.lb-next::before{width:11px;height:11px;margin:-6px 0 0 -4px;background:none;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
.lb-next::before{margin-left:-7px;transform:rotate(-135deg)}
.lb-prev::after,.lb-next::after{display:none}
.lb.is-single .lb-prev,.lb.is-single .lb-next{display:none}
@media (max-width:700px){
  .lb-inner{padding:68px 16px 92px}
  .lb-frame.is-tall{height:min(68vh,calc((100vw - 32px) * var(--hr,1.7778)))}
  .lb-frame.is-wide{width:calc(100vw - 32px)}
  .lb-prev,.lb-next{top:auto;bottom:24px;margin:0}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
}

@media print{.slot.is-primed{clip-path:none;translate:none}.mark.is-primed{clip-path:none}.wk-item.is-primed{opacity:1;translate:none}.js .hp-media{opacity:1}.ticket-wrap.is-primed .ticket{transform:rotate(-1.2deg);clip-path:none}.loader,.draftbar{display:none}}

@media (prefers-reduced-motion:reduce){
  .rec,.slot--reel,.slot--wide,.lb-frame{animation:none}
  .mark,.slot,.play,.ticket,.room-row,.rr-name,.rr-arrow{transition:none}
  .mark.is-primed{clip-path:none}
  .slot.is-primed{clip-path:none;translate:none}
  .site::after{display:none}
  .js .ln > span{transform:none;opacity:1;translate:none;transition:none;animation:none}
  .js .hx{transform:none;translate:none;opacity:0;transition:opacity .9s ease;animation:hx-failsafe .01s 5s forwards}
  .js.is-in .hx{opacity:1}
  .js .sf{opacity:0;transition:opacity .9s ease}
  .js .sf.sf-in{opacity:1}
  .js:not(.is-in) .hero-room .hero-reel,.js.is-in .hero-room .hero-reel{clip-path:none;animation:none}
  .js .hp-media{opacity:1;transition:none;animation:none}
  .wk-item,.wk-card,.wk-arrow,.sw-photo img,.wk-media img,.nx-title,.nx-arrow{transition:none}
  .wk-item.is-primed{opacity:1;translate:none}
}

/* Shoreland: the January listing sits under the night film */
.more-grid{margin-top:clamp(28px,4vw,48px)}
/* Cosmic: six vertical edits under the film, captions under each, photo sets with their own small heads */
.ck-reels{margin-top:clamp(28px,4vw,56px)}
.ck-reel-caps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ck-reel-caps li{display:grid;gap:2px;min-width:0;font:700 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.ck-reel-caps b{color:var(--fg);font-weight:700}
@media (max-width:1000px){.ck-reel-caps{display:none}}
.ck-set+.ck-set{margin-top:clamp(36px,5vw,72px)}
.ck-set-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid currentColor;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.02em;text-transform:uppercase}
.ck-set-h span{font:700 11px var(--f-mono);letter-spacing:.14em;color:var(--fg-2)}
/* Work cards: every real cover crops to the card's own shape, so landscape and portrait covers line up */
.wk-item:not(.wk-item--feat) .wk-media .slot--real{--ar:4/5!important}
.wk-item--feat .wk-media .slot--real{--ar:16/10!important}

.hp-post{margin:.35em 0 0 .04em}

/* ---------- Book questionnaire ---------- */
.ct-cta{margin:28px 0 0}
.bk .wrap{padding-block:clamp(56px,8vw,112px)}
.bk-shell{max-width:1040px}
.bk-progress{display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 11.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.bk-restart{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.bk-bar{height:2px;background:var(--rule);margin:14px 0 0}
.bk-bar i{display:block;height:100%;background:var(--fg);transition:width .45s var(--ease)}
.bk-q{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(2.2rem,6vw,4.6rem);margin:clamp(28px,4vw,48px) 0 clamp(24px,3vw,36px);outline:none}
.bk-group+.bk-group{margin-top:28px}
.bk-label{font:700 11.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin:0 0 14px}
.bk-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.bk-group--small .bk-opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.bk-opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:96px;text-align:left;padding:20px 22px;border:1px solid var(--rule-gr);border-radius:6px;background:transparent;color:var(--fg);font:inherit;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.bk-group--small .bk-opt{min-height:0;padding:16px 18px}
.bk-opt b{font-weight:800;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em}
.bk-opt span{color:var(--fg-2);font-size:.95rem;line-height:1.4}
.bk-opt:hover{border-color:var(--fg)}
.bk-opt[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bk-opt[aria-pressed="true"] span{color:inherit;opacity:.72}
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid var(--rule)}
.bk .pill{--fg:var(--black);--bg:var(--white)}
.bk .pill:disabled{opacity:.35;cursor:not-allowed}
.bk-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.bk-field label{display:block;font:700 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:0 0 10px}
.bk-field input,.bk-field textarea{width:100%;font:inherit;font-size:1.02rem;color:var(--fg);background:var(--white);border:1px solid var(--rule-gr);border-radius:6px;padding:14px 16px;min-height:52px}
.bk-field textarea{resize:vertical;min-height:120px}
.bk-field input:focus,.bk-field textarea:focus{outline:2px solid var(--fg);outline-offset:1px;border-color:var(--fg)}
.bk-field--wide{grid-column:1/-1}
.bk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.bk-card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 28px;border:1px solid var(--fg);border-radius:6px;background:var(--white)}
.bk-card:first-child{background:var(--black);color:var(--cream);border-color:var(--black)}
.bk-card:first-child .bk-kind,.bk-card:first-child .bk-inc,.bk-card:first-child .bk-ads{color:rgba(239,230,214,.78)}
.bk-card:first-child .bk-name{color:var(--cream)}
.bk-kind{font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin:0}
.bk-name{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.5rem,2.6vw,2rem);margin:6px 0 0}
.bk-price{font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1;margin:8px 0 2px}
.bk-inc{margin:0;color:var(--fg-2);line-height:1.5}
.bk-ads{margin:0;font:700 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.bk-fine{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;color:var(--fg-2);font-size:.96rem}
.bk-fine li{padding-left:18px;position:relative}
.bk-fine li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:currentColor}
.bk-send-h{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(1.8rem,4vw,3rem);margin:clamp(44px,6vw,72px) 0 10px;padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--rule)}
.bk-send-lede{margin:0 0 24px;color:var(--fg-2)}
.bk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.bk-msg{min-height:1.6em;margin:14px 0 0;font:700 11.5px/1.5 var(--f-mono);letter-spacing:.08em;color:var(--fg)}
@media (max-width:640px){
  .bk-fields{grid-template-columns:minmax(0,1fr)}
  .bk-opt{min-height:0}
  .bk-nav .pill{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.bk-bar i{transition:none}}

/* ---------- Home v3 · Apple order: hero loop, room tiles, featured, trust, 3 steps ---------- */
.hc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tiles{position:relative;z-index:2;background:var(--black)}
.tile{position:relative;min-height:clamp(560px,94vh,940px);display:flex;align-items:flex-end;overflow:hidden;overflow:clip;border-top:1px solid var(--rule-dk)}
.tile-media{position:absolute;inset:0}
.tile-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.tile:hover .tile-media img{transform:scale(1.07)}
.tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.55) 0%,rgba(22,22,22,0) 26%,rgba(22,22,22,.12) 52%,rgba(22,22,22,.9) 100%)}
.tile-inner{position:relative;z-index:1;padding-top:calc(var(--hdr) + 40px);padding-bottom:clamp(40px,7vw,96px)}
.tile-n{color:rgba(239,230,214,.8)}
.tile-title{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.8;font-size:clamp(3.6rem,13vw,12.5rem);color:var(--cream);margin:0 0 0 -.04em}
.tile-trip{margin:14px 0 0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.1;color:var(--cream)}
.tile-trip em{font-style:italic}
.tile-line{margin:12px 0 0;max-width:34em;color:rgba(239,230,214,.84);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.55}
.tile .cta-row{margin-top:24px}
.tile .pill:not(.pill--solid){--fg:var(--cream);color:var(--cream);border-color:rgba(239,230,214,.7)}
.trust .wrap{padding-block:clamp(40px,5vw,72px)}
.trust-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0}
.trust-list li{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.25rem,2.6vw,2.2rem);line-height:1.1;color:var(--fg)}
.trust-list li:not(:last-child)::after{content:"·";font-weight:400;color:var(--fg-2);margin:0 .45em}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.how-cta{margin-top:clamp(32px,4vw,48px)}
@media (max-width:900px){.steps--3{grid-template-columns:minmax(0,1fr)}}
/* Room pages: Apple-style local menu, sticky under the header */
.subnav{position:sticky;top:var(--hdr);z-index:40;background:rgba(22,22,22,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-dk);color:var(--cream)}
.sn-in{display:flex;align-items:center;gap:12px 28px;min-height:54px;padding-block:8px}
.sn-name{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;white-space:nowrap}
.sn-links{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:4px 22px;overflow-x:auto;scrollbar-width:none}
.sn-links::-webkit-scrollbar{display:none}
.sn-links a{font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,230,214,.78);text-decoration:none;padding:12px 0;display:inline-block;white-space:nowrap}
.sn-links a:hover{color:var(--cream)}
.subnav .sn-book{--fg:var(--cream);--bg:var(--black);padding:10px 14px;flex:none}
@media (max-width:760px){
  .sn-in{flex-wrap:wrap;gap:0 16px}
  .sn-name{font-size:.95rem}
  .sn-book{margin-left:auto}
  .sn-links{order:3;flex:1 1 100%;margin:0;border-top:1px solid var(--rule-dk)}
}
@media (prefers-reduced-motion:reduce){.tile-media img{transition:none;transform:none}}
/* Room pages: their own projects, grouped (replaces the Work page) */
.room-projects .rp-set+.rp-set{margin-top:clamp(40px,5vw,72px)}
.room-projects .ck-set-h{margin-bottom:20px}

/* Sports clips (Oct 2026): reels and films with a caption under each */
.clips{display:grid;gap:26px 12px;align-items:start}
.clips+.clips{margin-top:clamp(22px,3vw,34px)}
.clips--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.clips--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.clips--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.clips--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.clips--2w{grid-template-columns:repeat(2,minmax(0,1fr))}
.clips--pair{grid-template-columns:minmax(0,1fr) minmax(0,2.67fr)}
.clip{min-width:0;display:grid;gap:10px;align-content:start}
.clip-cap{margin:0;display:grid;gap:3px;font:700 10px/1.45 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.clip-cap b{color:var(--fg);font-weight:700}
.clip-copy{grid-column:span 3;align-self:center;padding-left:clamp(0px,2vw,24px)}
.clip-copy p{margin:14px 0 0;color:var(--fg-2);max-width:30em}
.clip-copy p.big{margin:0;color:var(--fg);font-family:var(--f-serif);font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.22}
.ck-block{margin-top:clamp(40px,5vw,72px)}
.case-media .clip:only-child{grid-column:1/-1;max-width:480px}
.ath-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;margin-bottom:clamp(28px,4vw,48px)}
.ath-intro .lead{max-width:34em}
.ath-intro .facts{margin:0}
.ath-sec .ck-set-h{margin-top:clamp(40px,5vw,64px)}
.ath-sec .photo-grid.gallery{max-width:none}
@media (max-width:900px){
  .clips--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clips--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clips--3{grid-template-columns:minmax(0,1fr)}
  .clip-copy{grid-column:1/-1;padding-left:0}
  .ath-intro{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .clips--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clips--2w{grid-template-columns:minmax(0,1fr)}
  .clips--pair{grid-template-columns:minmax(0,1fr)}
  .clips{gap:22px 8px}
}

.clips--extras{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.62fr)}
.clip-stack{display:grid;gap:18px;min-width:0}
@media (max-width:900px){.clips--extras{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.clip-stack{grid-column:1/-1}}
@media (max-width:560px){.clips--pair .clip:first-child,.clips--2 .clip{max-width:none}.clips--pair .clip:first-child{width:62%}}

/* About: the real portrait (Oct 26). Shown no larger than the file supports. */
.ab-portrait{margin:0;max-width:380px}
.ab-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:var(--gray-700,#3a3a3a)}
.ab-pname{display:grid;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)}
.ab-pname h2{margin:0;font-family:var(--f-serif);font-weight:400;font-size:clamp(1rem,1.9vw,1.4rem);letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
.ab-pname .mc-sub{color:var(--fg-2)}
@media (max-width:900px){.ab-portrait{max-width:320px}}
/* before/after with real photos */
.compare-layer img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* several before/after pairs: copy stays put while the photos scroll past */
.edit--multi{align-items:start}
.compare-stack{display:grid;gap:clamp(32px,4vw,52px);min-width:0}
.compare-fig{margin:0;min-width:0}
.compare-cap{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.compare-cap span{color:var(--fg)}
@media (min-width:821px){.edit--multi > div:first-child{position:sticky;top:calc(var(--hdr) + 88px)}}
/* Real estate: the most recent listing, shown big. The photo leads; the text sits low over the lawn */
.latest-card{position:relative;display:block;border-radius:6px;overflow:hidden;color:var(--cream);text-decoration:none;isolation:isolate;background:#1c1c1c}
.latest-media{margin:0;aspect-ratio:16/9;max-height:calc(100svh - var(--hdr) - 110px);min-height:420px;width:100%}
.latest-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transition:transform 1.2s var(--ease)}
.latest-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(14,14,14,.82) 0%,rgba(14,14,14,.42) 20%,rgba(14,14,14,0) 38%)}
.latest-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3vw,40px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.latest-text{display:grid;gap:6px;min-width:0}
.latest-client{margin:0;font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,230,214,.85)}
.latest-title{margin:4px 0 0;color:var(--cream);font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;font-size:clamp(1.7rem,3.2vw,3rem)}
.latest-line{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--cream)}
.latest-meta{margin:2px 0 0;font:400 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,230,214,.75)}
.latest-cta{flex:none;--fg:var(--cream);--bg:var(--black)}
.latest-card:hover .latest-media img{transform:scale(1.035)}
.latest-card:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media (max-width:700px){
  /* phones: the photo stands alone, the text sits under it */
  .latest-card{background:transparent;overflow:visible}
  .latest-card::after{display:none}
  .latest-media{aspect-ratio:4/5;max-height:none;min-height:0;border-radius:6px;overflow:hidden}
  .latest-media img{object-position:50% 50%}
  .latest-info{position:static;padding:20px 0 0;flex-direction:column;align-items:flex-start;gap:16px}
  .latest-cta{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){.latest-media img{transition:none}.latest-card:hover .latest-media img{transform:none}}
/* Real estate walkthroughs: a 16:9 and a 3:2 film side by side, columns sized so both stand the same height */
.clips--wt{grid-template-columns:minmax(0,1.778fr) minmax(0,1.5fr)}
@media (max-width:700px){.clips--wt{grid-template-columns:minmax(0,1fr)}}
.clip-copy--1{grid-column:span 1;padding-left:clamp(0px,1vw,12px)}
/* A room hero with no reel beside it: the text keeps the width it had in the two-column layout */
.hr-grid--solo{grid-template-columns:minmax(0,1fr)}
.hr-grid--solo .hr-text{max-width:930px}
/* Real estate photos: two wide exteriors on top, then interiors three to a row */
.re-photos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.re-photos .rs-wide{grid-column:span 3}
.re-photos .rs{grid-column:span 2}
@media (max-width:700px){
  .re-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .re-photos .rs-wide{grid-column:1/-1}
  .re-photos .rs{grid-column:span 1}
}
/* Latest listing: two more photos from the same house under the big one */
.latest-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.latest-tile{display:block;border-radius:6px;overflow:hidden;aspect-ratio:3/2;background:#1c1c1c}
.latest-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.latest-tile:hover img{transform:scale(1.035)}
.latest-tile:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media (max-width:700px){.latest-more{gap:10px;margin-top:24px}}
@media (prefers-reduced-motion:reduce){.latest-tile img{transition:none}.latest-tile:hover img{transform:none}}
/* A room hero with no reel: size to its content instead of a full screen, so the menu bar follows the capture list closely */
.hero-room--solo{min-height:0}
.hero-room--solo .hr-grid{padding-bottom:clamp(40px,6vh,64px)}
/* Hospitality menu photos: one lead dish at twice the size, the rest in a tidy grid of five */
.menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.menu-grid .slot{--ar:2/3}
.menu-grid .mg-feat{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
@media (max-width:600px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .menu-grid .mg-feat{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5;height:auto}
}
/* Restaurants: the July Activation's two cuts side by side, sized so they stand the same height */
.act-lead{max-width:44em;margin:0 0 clamp(24px,3vw,36px);color:var(--fg-2)}
.act-pair{display:grid;grid-template-columns:minmax(0,1.778fr) minmax(0,.5625fr);gap:12px;align-items:start}
.act-film{min-width:0}
@media (max-width:700px){.act-pair{grid-template-columns:minmax(0,1fr);gap:28px}.act-film--v{width:62%;margin:0 auto}}
/* Restaurants: private events, six photos three to a row (two to a row on phones) */
@media (max-width:700px){.ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Brands & Events: The Flowery timelapse beside its three events */
.fl-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.fl-film{min-width:0;max-width:380px}
.fl-copy .act-lead{margin-bottom:clamp(20px,2.4vw,28px)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:6px 20px;border-top:1px solid var(--fg);padding:18px 0 22px}
.tl-when{font:700 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);padding-top:.5em}
.tl-what{margin:0 0 8px;text-transform:uppercase;font-weight:900;letter-spacing:-.025em;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.05}
.tl p{color:var(--fg-2);font-size:15.5px;margin:0;max-width:34em}
@media (max-width:820px){.fl-grid{grid-template-columns:minmax(0,1fr)}.fl-film{width:62%;max-width:none;margin:0 auto}}
@media (max-width:520px){.tl li{grid-template-columns:minmax(0,1fr)}.tl-when{padding-top:0}}
/* Portraits & Occasions: six portraits to a row */
.six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.six .slot{--ar:2/3}
@media (max-width:960px){.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
#graduations .act-lead{margin-bottom:clamp(8px,1.5vw,16px)}
/* One vertical beside two stacked wide films (Bodybuilding · Joseph) */
.mix-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);gap:12px;align-items:start;margin-bottom:clamp(32px,4vw,48px)}
.mix-wide{display:grid;gap:12px;min-width:0}
@media (max-width:700px){.mix-grid{grid-template-columns:minmax(0,1fr)}.mix-grid > .clip{width:62%;margin:0 auto}}

/* ---------- Restaurants page (Nov 5): its own feel ---------- */
/* Reel captions set like a line on a menu: dish ........ time */
.clip-cap--menu{grid-template-columns:minmax(0,max-content) minmax(10px,1fr) auto;column-gap:8px;align-items:baseline}
.clip-cap--menu b{min-width:0;overflow-wrap:anywhere}
.clip-cap--menu i{align-self:end;margin-bottom:.42em;border-bottom:1px dotted currentColor;opacity:.55}
.clip-cap--menu .cm-t{color:var(--fg);font-variant-numeric:tabular-nums}
.clip-cap--menu .cm-sub{grid-column:1/-1;font:400 12.5px/1.4 var(--f-display);letter-spacing:.01em;text-transform:none}
/* The pour: two verticals beside the pitch */
.pour-grid{display:grid;grid-template-columns:minmax(0,290px) minmax(0,290px) minmax(0,1fr);gap:22px 12px;align-items:center}
.pour-grid .film-copy{padding:0 0 34px clamp(16px,4vw,72px)}
/* The room: a 4:3 film and a 9:16 reel at the same height */
.room-pair{display:grid;grid-template-columns:minmax(0,1.3333fr) minmax(0,.5625fr);gap:22px 12px;align-items:start;max-width:1180px}
.room-copy{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,5vw,80px);padding:0}
.room-copy p{margin:0}
/* To-go: one reel beside the pitch, then the menu photos */
.side-reel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.side-reel .film-copy{padding-bottom:34px}
@media (max-width:820px){
  .pour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pour-grid .film-copy{grid-column:1/-1;grid-row:1;padding:0 0 8px}
  .room-pair{grid-template-columns:minmax(0,1fr)}
  .room-pair > .clip:last-child{width:62%;margin:0 auto}
  .room-copy{grid-template-columns:minmax(0,1fr)}
  .side-reel{grid-template-columns:minmax(0,1fr)}
  .side-reel > .clip{width:62%;max-width:300px;margin:0 auto}
  .side-reel .film-copy{padding:0;grid-row:1}
}
/* Brands & Events (Nov 5): a reel beside its pitch, flipped for Body By Thalia */
.side-reel--flip{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.side-reel--flip > .clip{order:2}
.side-reel .case-out{margin-top:22px}
@media (max-width:820px){
  .side-reel--flip{grid-template-columns:minmax(0,1fr)}
  .side-reel--flip > .clip{order:0}
}
/* Real Estate (Nov 5): a sun arc tracks the shoot day, sunrise to dusk */
.eyebrow--sun{display:flex;align-items:flex-end;gap:12px}
.sun{display:inline-block;line-height:0;flex:none}
.sun svg{display:block;color:var(--fg)}
.sun svg circle{color:var(--fg)}
.re-photos--view{margin-top:clamp(32px,4vw,56px)}
/* Restaurants (Nov 6): the table, food photography in a 4-column grid; landscapes span two */
.table-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.table-grid .tg-h{grid-column:span 2;aspect-ratio:auto}
/* The pour: three loops at one height beside the pitch, then the bar stills */
.pour-grid--3{grid-template-columns:minmax(0,.5625fr) minmax(0,.6667fr) minmax(0,.6667fr) minmax(0,1.6fr);align-items:end}
.bar-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
@media (max-width:1100px){
  .pour-grid--3{grid-template-columns:minmax(0,.5625fr) minmax(0,.6667fr) minmax(0,.6667fr)}
  .pour-grid--3 .film-copy{grid-column:1/-1;grid-row:1;padding:0 0 8px}
}
@media (max-width:700px){
  .table-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .table-grid .tg-h{aspect-ratio:3/2}
  .pour-grid--3{grid-template-columns:minmax(0,.5625fr) minmax(0,.6667fr)}
  .pour-grid--3 > .clip:nth-child(3){grid-column:1/-1;width:62%;margin:0 auto}
  .bar-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
/* Home (Nov 6): the rigatoni cover is a bright white plate, so its tile gets a deeper shade behind the type */
#tile-hospitality .tile-shade{background:linear-gradient(180deg,rgba(22,22,22,.55) 0%,rgba(22,22,22,0) 22%,rgba(22,22,22,.5) 50%,rgba(22,22,22,.92) 100%),linear-gradient(90deg,rgba(22,22,22,.3) 0%,rgba(22,22,22,0) 65%)}
@media (max-width:520px){.tile-title{font-size:12.6vw}}
/* Athletes (Nov 6): Perfect Game, one game day in four parts */
.pg-block{margin-top:clamp(40px,5vw,64px)}
.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pg-seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pg-f{position:absolute;left:8px;bottom:8px;z-index:1;font:700 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
@media (max-width:700px){
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pg-seq{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(var(--gutter-r) * -1);padding-right:var(--gutter-r)}
  .pg-seq::-webkit-scrollbar{display:none}
  .pg-seq .slot{scroll-snap-align:start}
}
/* Perfect Game (Nov 6): interviews with B-roll between them, five verticals in a row */
.int-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:700px){
  .int-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(var(--gutter-r) * -1);padding-right:var(--gutter-r)}
  .int-row::-webkit-scrollbar{display:none}
  .int-row .clip{scroll-snap-align:start}
}
/* Athletes (Nov 6): grouped by kind of shoot. Each project leads with its name and a link, then its work */
.anchor{position:relative;top:calc(var(--hdr) * -1)}
.proj + .proj{margin-top:clamp(56px,7vw,96px)}
.proj-h .proj-link{margin-left:auto;font:700 11px/1 var(--f-mono);letter-spacing:.14em;color:inherit;text-transform:uppercase;white-space:nowrap}
.proj-lead{max-width:44em;margin:0 0 clamp(18px,2.4vw,28px);color:var(--fg-2)}
.trio-v{display:grid;grid-template-columns:minmax(0,1.7778fr) minmax(0,.5625fr) minmax(0,.5625fr);gap:12px;align-items:start}
.pg-teaser{display:grid;grid-template-columns:minmax(0,.5625fr) repeat(3,minmax(0,.6667fr));gap:12px;align-items:start}
.proj-films{margin-top:12px}
.phys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.phys-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.phys-more{margin:clamp(28px,4vw,44px) 0 0}
@media (max-width:820px){
  .trio-v{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio-v > .clip:first-child{grid-column:1/-1}
  .pg-teaser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-teaser .slot{--ar:9/16!important}
  .phys-grid{grid-template-columns:minmax(0,1fr)}
}
.trio-copy{align-self:end;padding:0 0 24px clamp(4px,1vw,12px)}
.trio-copy p.big{font-size:clamp(1.15rem,1.7vw,1.5rem)}
.proj-h span:empty{display:none}
@media (max-width:820px){.trio-copy{grid-column:1/-1;padding:4px 0 0}}
/* Cross-links between a client's brand work and her own occasions */
.xlink{margin:18px 0 0}
/* Body By Thalia (Nov 6): more finished photos instead of the editing write-up */
.six-up{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:12px}
.wide-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width:700px){.six-up{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.wide-3{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}}
/* About (Nov 6): a vertical black-and-white portrait */
.ab-portrait{max-width:420px}
.ab-portrait img{aspect-ratio:4/5}
/* Book (Nov 6): estimate, how booking works, and the questions people ask */
.bk-fields--top{margin-bottom:28px}
.bk-est{margin-top:20px;padding:26px 26px 22px;border:1px solid var(--rule-gr);border-radius:6px;background:var(--white)}
.bk-lines{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;margin:14px 0 0;padding:0 0 14px;border-bottom:1px solid var(--rule)}
.bk-lines dt{margin:0;color:var(--fg-2)}
.bk-lines dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.bk-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:14px 0 0}
.bk-total span{font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.bk-total b{font-weight:900;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bk-sub-h{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.3rem,2.4vw,1.8rem);margin:clamp(40px,5vw,60px) 0 16px}
.bk-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:how}
.bk-how li{counter-increment:how;display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--fg)}
.bk-how li::before{content:"0" counter(how);font:700 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--fg-2)}
.bk-how b{font-weight:800;font-size:1.02rem}
.bk-how span{color:var(--fg-2);font-size:.95rem;line-height:1.45}
.bk-faq{border-top:1px solid var(--rule)}
.bk-faq details{border-bottom:1px solid var(--rule)}
.bk-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:800;font-size:1.04rem}
.bk-faq summary::-webkit-details-marker{display:none}
.bk-faq summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1;color:var(--fg-2)}
.bk-faq details[open] summary::after{content:"–"}
.bk-faq details p{margin:0 0 18px;color:var(--fg-2);max-width:46em;line-height:1.6}
.bk-result > .bk-group{margin-top:22px}
@media (max-width:820px){.bk-how{grid-template-columns:minmax(0,1fr)}.bk-est{padding:20px}}