/* Boban Chaldovich — static site. Hand-edited; tokens first. */
@font-face{font-family:Archivo;src:url(../fonts/archivo-wdth-latin.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(../fonts/archivo-wdth-latin-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
 --bg:#0c0b0a; --bg2:#151311; --line:#2a2622; --text:#efebe5; --muted:#a59e94; --dim:#6f685f;
 --accent:#e4a853; --accent-ink:#1a1206;
 --wrap:1240px; --gut:clamp(16px,4vw,48px);
 --f:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:700;font-stretch:82%;line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h3,.h3{font-size:1.25rem;font-stretch:90%}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.kicker a{text-decoration:none;color:var(--muted)} .kicker a:hover{color:var(--text)}
.kicker span{color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:#d9d3ca;max-width:40em;font-weight:300}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gut);background:linear-gradient(rgba(12,11,10,.85),rgba(12,11,10,0));transition:background .3s}
.top.scrolled{background:rgba(12,11,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.1}
.brand b{font-weight:800;font-stretch:118%;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}
.brand span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:26px;align-items:center;font-size:.86rem}
.nav a{text-decoration:none;color:#d6d0c7;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:#fff;border-color:var(--accent)}
.nav .lang{border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:.72rem;letter-spacing:.1em}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);font:600 .75rem var(--f);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:99px;cursor:pointer}
@media (max-width:860px){
 .menu-btn{display:block}
 .nav{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;gap:0;background:rgba(12,11,10,.97);padding:8px var(--gut) 20px;border-bottom:1px solid var(--line);display:none}
 .nav.open{display:flex}
 .nav a{font-size:1.1rem;padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
 .nav .lang{margin-top:14px;width:auto;border:1px solid var(--line)}
}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:99px;border:1px solid rgba(255,255,255,.28);text-decoration:none;font-weight:600;font-size:.9rem;cursor:pointer;background:rgba(0,0,0,.2);transition:background .2s,border-color .2s,transform .2s}
.btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#f0bb6c;border-color:#f0bb6c}
.btn.big{font-size:clamp(1rem,2.4vw,1.4rem);padding:16px 28px}
.tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.link{color:var(--muted);text-decoration:none;font-size:.9rem;white-space:nowrap}
.link:hover{color:var(--accent)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 clamp(48px,9vh,110px);overflow:hidden}
.slides,.slide{position:absolute;inset:0}
.slide img,.bg{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.88) 0%,rgba(12,11,10,.55) 45%,rgba(12,11,10,.1) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(12,11,10,0) 40%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{max-width:13em}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto;padding-top:28px;padding-bottom:28px;gap:24px}
.stats b{display:block;font-size:clamp(1.3rem,2.4vw,1.9rem);font-stretch:85%;font-weight:700;color:var(--text)}
.stats span{color:var(--muted);font-size:.85rem}
@media (max-width:760px){.stats ul{grid-template-columns:1fr 1fr}}

/* sections */
.section{padding:clamp(64px,10vw,120px) 0}
.section.tight{padding-top:24px}
.section.dark{background:var(--bg2)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.head h2{margin:0}
@media (max-width:640px){.head{flex-direction:column;align-items:flex-start}}

/* poster grid */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:36px 24px}
.card a{text-decoration:none;display:block}
.poster{aspect-ratio:2/3;overflow:hidden;border-radius:6px;background:#1c1916;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.poster{position:relative}
.poster::before{content:"";position:absolute;inset:-20px;background:var(--img) center/cover;filter:blur(18px) brightness(.55)}
.poster picture{position:relative;display:block;height:100%}
.poster img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.grid.feat{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.grid.feat{grid-template-columns:repeat(3,1fr)}}
.card a:hover .poster img{transform:scale(1.04)}
.meta{padding-top:12px}
.meta b{display:block;font-weight:600;line-height:1.25}
.meta span{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}
.card.hide{display:none}
@media (max-width:520px){.grid,.grid.feat{grid-template-columns:1fr 1fr;gap:28px 16px}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{background:none;border:1px solid var(--line);color:var(--muted);font:500 .82rem var(--f);padding:8px 16px;border-radius:99px;cursor:pointer}
.chip:hover{color:var(--text);border-color:#4a443d}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* reels */
.reels{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reel{text-decoration:none;display:block;cursor:pointer}
.reel .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#000}
.reel .thumb img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s,transform .5s}
.reel:hover .thumb img{opacity:1;transform:scale(1.03)}
.play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(12,11,10,.55);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.play::after{content:"";position:absolute;left:25px;top:20px;border-left:16px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.reel b{display:block;margin-top:12px;font-weight:600}
@media (max-width:760px){.reels{grid-template-columns:1fr}}

/* quotes */
.quotes{padding:clamp(64px,10vw,120px) 0}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.quote{margin:0}
.quote blockquote{margin:0 0 18px}
.quote p{font-size:1.08rem;font-weight:300;line-height:1.55;color:#ddd6cc}
.quote figcaption b{display:block;font-weight:600}
.quote figcaption span{color:var(--muted);font-size:.85rem}
@media (max-width:860px){.qgrid{grid-template-columns:1fr}}

/* beyond */
.beyond-teaser{border-top:1px solid var(--line)}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bcard{border:1px solid var(--line);border-radius:10px;padding:28px;background:linear-gradient(160deg,#1a1714,#11100e)}
.bcard h3{font-size:1.5rem}
.bcard p:last-child{color:var(--muted);margin:0}
.bgrid.big .bcard{padding:40px}
.bgrid.big .bcard h3{font-size:2rem}
@media (max-width:760px){.bgrid{grid-template-columns:1fr}}

/* contact */
.contact{padding:clamp(72px,12vw,140px) 0;background:radial-gradient(ellipse at 20% 100%,rgba(228,168,83,.12),transparent 60%),var(--bg2);border-top:1px solid var(--line)}
.contact h2{font-size:clamp(2rem,5vw,3.6rem);max-width:14em}
.contact .btn.big{word-break:break-all}

/* page heads */
.page-head{padding-top:150px;padding-bottom:16px}
.page-head.nf{min-height:70vh}

/* project page */
.proj{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 72px;overflow:hidden}
.proj-bg{position:absolute;inset:0}
.proj-bg .blur{filter:blur(40px) saturate(1.1);transform:scale(1.2);opacity:.6}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.92) 0%,rgba(12,11,10,.7) 55%,rgba(12,11,10,.35) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(12,11,10,0) 35%)}
.proj-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;width:100%}
.proj-poster img{border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6);width:100%}
.facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin:28px 0 0}
.facts dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.facts dd{margin:4px 0 0}
@media (max-width:760px){.proj-in{grid-template-columns:1fr}.proj-poster{max-width:220px}}
.next{border-top:1px solid var(--line)}
.next a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:36px;padding-bottom:36px;text-decoration:none}
.next .kicker{margin:0;color:var(--muted)}
.next b{font-size:clamp(1.2rem,3vw,2rem);font-stretch:85%;text-align:right}
.next a:hover b{color:var(--accent)}

/* about */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);padding-top:150px;padding-bottom:40px;align-items:start}
.about-img{position:sticky;top:110px}
.about-img img{border-radius:8px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%}
.prose p{font-size:1.08rem;color:#ddd6cc}
.about .h3{margin-top:2.2rem;color:var(--text)}
.services{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.services b{display:block;font-weight:600}
.services span{color:var(--muted);font-size:.92rem}
@media (max-width:760px){.about{grid-template-columns:1fr;padding-top:110px}.about-img{position:static}.about-img img{aspect-ratio:3/2}}

/* footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:28px var(--gut);border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.foot b{color:var(--text);font-weight:600}
.foot a{text-decoration:none} .foot a:hover{color:var(--accent)}

/* player */
.player{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.player[hidden]{display:none}
.player-box{position:relative;width:min(1200px,100%);aspect-ratio:16/9;max-height:85vh}
.player-frame,.player-frame iframe,.player-frame video{width:100%;height:100%;border:0;background:#000}
.player-x{position:absolute;right:0;top:-48px;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v2: typographic posters, awards, other credits, beyond media */
.poster.type{display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(160deg,#2a2017 0%,#15110d 60%,#0f0d0b 100%);border:1px solid var(--line)}
.poster.type b{font-size:1.35rem;font-weight:700;font-stretch:80%;line-height:1.05;color:var(--text)}
.poster.type .t-year{position:absolute;top:16px;left:18px;font-size:.72rem;letter-spacing:.16em;color:var(--accent)}
.poster.type .t-sub{margin-top:8px;font-size:.75rem;color:var(--muted)}
.proj-poster .poster.type{aspect-ratio:2/3;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.proj-poster .poster.type b{font-size:2rem}
.star{font-style:normal;color:var(--accent);margin-left:6px;font-size:.8em}
.awards{padding:clamp(48px,7vw,80px) 0;border-top:1px solid var(--line)}
.awards ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
@media (max-width:1100px){.awards ul{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.awards ul{grid-template-columns:1fr}}
.awards li{border-left:2px solid var(--accent);padding-left:16px}
.awards b{display:block;font-weight:600}
.awards span{display:block;color:var(--muted);font-size:.85rem;margin-top:4px;line-height:1.45}
.contact-more{color:var(--muted);margin-top:18px}
.contact-more a{text-decoration:none} .contact-more a:hover{color:var(--accent)}
.section.other{padding-top:24px}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px}
.ogrid h3{color:var(--accent);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-stretch:100%;font-weight:600}
.credits{list-style:none;margin:0;padding:0}
.credits li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.credits span{color:var(--muted);font-size:.85rem;text-align:right}
@media (max-width:760px){.ogrid{grid-template-columns:1fr}.credits li{flex-direction:column;gap:2px}.credits span{text-align:left}}
.bgrid{grid-template-columns:repeat(3,1fr)}
.bgrid.big{grid-template-columns:1fr 1fr}
.bgrid.big .bcard.has-media{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
.bcard .reel{display:block;margin:-28px -28px 24px}
.bcard .reel .thumb{border-radius:10px 10px 0 0}
.bcard .reel .thumb img{opacity:.9}
.bgrid.big .bcard.has-media .reel{margin:0}
.bgrid.big .bcard.has-media .reel .thumb{border-radius:8px}
@media (max-width:960px){.bgrid{grid-template-columns:1fr}.bgrid.big{grid-template-columns:1fr}.bgrid.big .bcard.has-media{grid-template-columns:1fr}}

/* v3: award lists */
.awards li a{text-decoration:none;display:block}
.awards li a:hover b{color:var(--accent)}
.more-aw{color:var(--muted);font-size:.9rem;margin:28px 0 0}
.awl{margin-top:26px}
.awl .kicker{margin-bottom:8px}
.awl ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.92rem;color:#d9d3ca}
.awards ul{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.awards ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.awards ul{grid-template-columns:1fr}}

/* v4: social icons */
.social{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.social a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);color:var(--text);transition:color .2s,border-color .2s,background .2s}
.social a:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.social svg{width:22px;height:22px}
.social.small{margin:0;gap:6px;display:inline-flex;vertical-align:middle;margin-left:14px}
.social.small a{width:30px;height:30px;border:0;color:var(--muted)}
.social.small a:hover{background:none;color:var(--accent)}
.social.small svg{width:18px;height:18px}
.foot-mid{display:flex;align-items:center;flex-wrap:wrap}

/* v5: consolidated layout */
.record{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0 44px}
.record .nums{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.record .nums b{display:block;font-size:clamp(1.6rem,3vw,2.4rem);font-stretch:85%;font-weight:700}
.record .nums span{color:var(--muted);font-size:.85rem}
.record .aw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px}
.record .aw li{border-left:2px solid var(--accent);padding-left:14px}
.record .aw a{text-decoration:none;display:block}
.record .aw a:hover b{color:var(--accent)}
.record .aw b{display:block;font-weight:600;font-size:.95rem}
.record .aw span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px;line-height:1.45}
.record .more-aw{margin-top:22px}
@media (max-width:860px){.record .nums{grid-template-columns:1fr 1fr}.record .aw{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.record .aw{grid-template-columns:1fr}}
.quote-band{padding:clamp(56px,9vw,110px) 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote.big{max-width:52rem}
.quote.big p{font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.45;color:var(--text)}
.beyond-line a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-top:34px;padding-bottom:34px;text-decoration:none}
.beyond-line .kicker{margin:0}
.beyond-line b{font-weight:400;font-size:1.05rem;color:#d9d3ca}
.beyond-line i{font-style:normal;font-size:1.4rem;color:var(--accent);transition:transform .2s}
.beyond-line a:hover i{transform:translateX(6px)}
.beyond-line a:hover b{color:var(--text)}
@media (max-width:640px){.beyond-line a{grid-template-columns:1fr auto}.beyond-line .kicker{grid-column:1/-1}}
.cta{padding:clamp(56px,9vw,110px) 0;background:radial-gradient(ellipse at 20% 100%,rgba(228,168,83,.12),transparent 60%),var(--bg2);border-top:1px solid var(--line)}
.cta h2{max-width:16em}
.group{margin-top:44px}
.group.empty{display:none}
.gh{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.contact.page{min-height:calc(100vh - 80px);display:flex;align-items:center;padding-top:140px;border-top:0}
.contact.page h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:13em}
.social.big{gap:16px;margin-top:34px}
.social.big a{width:64px;height:64px}
.social.big svg{width:28px;height:28px}
.avail{margin-top:40px;color:var(--muted);font-size:.9rem}
#reels .reels{margin-top:0}

/* v5: smoother hero slideshow: long crossfade, zoom never resets */
.slide{opacity:0;transition:opacity 3s cubic-bezier(.4,0,.2,1);will-change:opacity}
.slide.on{opacity:1}
.slide img{animation:drift 24s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden}
.slide:nth-child(2n) img{animation-direction:alternate-reverse}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.08)}}
.contact.page .wrap{width:100%}

/* v6: every poster fills the same 3:4 frame so the grid lines up */
.poster{aspect-ratio:3/4}
.poster img{object-fit:cover;object-position:center top}
.poster::before{display:none}
.proj-poster .poster.type{aspect-ratio:3/4}
.proj-poster .poster:not(.type){aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
.proj-poster .poster:not(.type) img{height:auto;object-fit:contain}
.section.beyond{border-top:1px solid var(--line)}
.section.beyond .bgrid{margin-top:32px}

/* v7 one-page layout (2026-10-24) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.anchor{scroll-margin-top:72px}
#work .head{margin-bottom:12px}
#work h2,.about h2{font-size:clamp(2.4rem,6vw,4.6rem)}
.lead.sub{margin:0 0 40px}
.reels-block{margin-bottom:56px}
.ogrid h4{color:var(--accent);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 .6em}
.about{padding-top:clamp(72px,10vw,120px);border-top:1px solid var(--line)}
.contact.page{min-height:auto;padding-top:clamp(72px,12vw,140px);border-top:1px solid var(--line)}
.contact.page h2{font-size:clamp(2.4rem,6vw,4.4rem);max-width:13em}
.nav a.on{color:#fff;border-color:var(--accent)}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(8,7,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:clamp(56px,8vh,96px) var(--gut)}
.sheet[hidden]{display:none}
.sheet-box{position:relative;width:min(980px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,4vw,48px);margin:auto 0}
.sheet-x{position:absolute;right:12px;top:8px;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;padding:4px 10px}
.sheet .proj-in{grid-template-columns:minmax(160px,280px) 1fr;align-items:start}
.sheet .proj-text h2{font-size:clamp(1.8rem,4vw,3rem);padding-right:32px}
@media (max-width:640px){.sheet .proj-in{grid-template-columns:1fr}.sheet .proj-poster{max-width:200px}}

/* v8 About without portrait (2026-10-24) */
#about.about{grid-template-columns:minmax(0,760px);justify-content:start}
#work .other{margin-top:clamp(96px,12vw,160px)}

/* v9 About layout (2026-10-24): heading beside bio, services grid, off-the-timeline band */
.ab2{padding:clamp(80px,11vw,140px) 0 clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.ab2-top{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(28px,6vw,96px);align-items:start}
.ab2-h h2{font-size:clamp(2.4rem,6vw,4.6rem);margin:0}
.ab2-h{position:sticky;top:110px}
.ab2-bio p{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:#e6dfd5;font-weight:300;margin:0 0 1.1em}
.ab2-bio p:first-child{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.45;color:#fff;font-weight:400}
.ab2-k{margin:clamp(56px,8vw,96px) 0 20px}
.ab2-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;counter-reset:sv}
.ab2-grid li{background:var(--bg);padding:26px 26px 30px;counter-increment:sv}
.ab2-grid li::before{content:counter(sv,decimal-leading-zero);display:block;color:var(--accent);font-size:.75rem;letter-spacing:.14em;margin-bottom:14px}
.ab2-grid b{display:block;font-size:1.15rem;font-weight:600;margin-bottom:8px}
.ab2-grid span{color:var(--muted);font-size:.95rem;line-height:1.55}
.ab2-off{margin-top:clamp(40px,6vw,64px);padding:clamp(24px,4vw,40px);border-left:3px solid var(--accent);background:linear-gradient(90deg,rgba(228,168,83,.08),transparent 70%);border-radius:0 10px 10px 0}
.ab2-off .kicker{margin:0 0 10px}
.ab2-off p{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;max-width:46em;color:#e6dfd5}
@media (max-width:960px){.ab2-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.ab2-top{grid-template-columns:1fr}.ab2-h{position:static}}
@media (max-width:560px){.ab2-grid{grid-template-columns:1fr}}

/* v10 scroll cue instead of a hero button (2026-10-24) */
.hero{position:relative}
.scroll-cue{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;opacity:.75;transition:opacity .3s}
.scroll-cue:hover{opacity:1}
.scroll-cue span{width:14px;height:14px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-8px;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0) rotate(45deg);opacity:.6}50%{transform:translateY(8px) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}

/* v11 cinematic awards band (2026-10-24): film still backdrop, gold numerals, festival laurels */
.record.cine{position:relative;overflow:hidden;border:0;padding:clamp(80px,11vw,140px) 0;text-align:center;isolation:isolate}
.cine-bg{position:absolute;inset:0;z-index:-2}
.cine-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transform:scale(1.05)}
.record.cine::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,rgba(12,11,10,.62) 0%,rgba(12,11,10,.9) 70%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 18%,rgba(12,11,10,0) 82%,var(--bg) 100%)}
.record.cine .kicker{margin-bottom:clamp(28px,4vw,44px)}
.record.cine .nums{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:0 auto clamp(56px,8vw,96px);max-width:1000px}
.record.cine .nums li{flex:1 1 0;min-width:150px;padding:6px 20px;border-left:1px solid rgba(228,168,83,.28)}
.record.cine .nums li:first-child{border-left:0}
.record.cine .nums b{font-size:clamp(2.8rem,6.5vw,5.2rem);font-weight:200;font-stretch:75%;line-height:1;letter-spacing:-.02em;background:linear-gradient(180deg,#f6dfae 0%,#e4a853 55%,#a8742c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.record.cine .nums span{display:block;margin-top:10px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#cfc6b9}
.record.cine .aw{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,5vw,56px) clamp(16px,3vw,40px);max-width:1100px;margin:0 auto}
.record.cine .aw li{border:0;padding:0}
.record.cine .aw a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#efe6d8;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.record.cine .aw a:hover{transform:translateY(-4px)}
.record.cine .aw a:hover .laurel{color:#f6dfae}
.laurel{display:flex;align-items:center;justify-content:center;gap:4px;color:#d9a65a;transition:color .3s;width:100%}
.laurel .lf{width:40px;height:100px;flex:none}
.laurel .lf.r{transform:scaleX(-1)}
.laurel .lt{display:flex;flex-direction:column;align-items:center;max-width:200px;min-height:100px;justify-content:center}
.laurel .an{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#e9c98f;line-height:1.35}
.laurel .af{display:block;font-size:.98rem;font-weight:600;font-stretch:88%;color:#fff;margin:5px 0 2px;line-height:1.2;text-wrap:balance}
.laurel .ay{font-size:.72rem;letter-spacing:.2em;color:#cfc6b9}
.record.cine .aft{display:block;margin-top:12px;font-size:.88rem;color:var(--muted);font-style:italic}
.record.cine .more-aw{margin-top:clamp(40px,6vw,64px);color:#cfc6b9;font-size:.85rem;letter-spacing:.04em}
@media (max-width:860px){.record.cine .aw{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.record.cine .nums li{flex:0 0 50%;min-width:0;border-left:0;padding:14px 8px}.record.cine .aw{grid-template-columns:1fr}}

/* v12 scroll snapping (2026-10-24): sections settle into place; proximity so long sections (Films) still scroll freely */
html{scroll-snap-type:y proximity}
.hero{scroll-snap-align:start}
.record.cine,.quote-band,.quotes,.contact.page{scroll-snap-align:center}
#work,#about,#beyond{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* v13 awards band fits one screen (2026-10-24) */
.record.cine{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(76px,10vh,110px) 0 clamp(28px,5vh,56px)}
.record.cine .wrap{width:100%}
.record.cine .kicker{margin-bottom:clamp(14px,3vh,36px)}
.record.cine .nums{margin-bottom:clamp(24px,5.5vh,72px)}
.record.cine .nums b{font-size:clamp(2.2rem,min(6vw,9vh),5rem)}
.record.cine .nums span{margin-top:clamp(4px,1vh,10px)}
.record.cine .aw{gap:clamp(14px,3.6vh,44px) clamp(16px,3vw,40px)}
.laurel .lf{width:clamp(28px,4vh,40px);height:clamp(70px,10vh,100px)}
.laurel .lt{min-height:clamp(70px,10vh,100px)}
.record.cine .aft{margin-top:clamp(4px,1vh,12px)}
.record.cine .more-aw{margin-top:clamp(18px,4vh,56px)}
@media (max-width:640px){
 .record.cine .nums li{flex:0 0 25%;padding:4px 2px}
 .record.cine .nums b{font-size:clamp(1.6rem,8vw,2.2rem)}
 .record.cine .nums span{font-size:.52rem;letter-spacing:.1em}
 .record.cine .aw{grid-template-columns:1fr 1fr;gap:14px 8px}
 .laurel{gap:0}
 .laurel .lf{width:18px;height:58px}
 .laurel .lt{min-height:58px;max-width:120px}
 .laurel .an{font-size:.5rem;letter-spacing:.1em}
 .laurel .af{font-size:.74rem;margin:3px 0 1px}
 .laurel .ay{font-size:.58rem}
 .record.cine .aft{font-size:.7rem;margin-top:4px}
 .record.cine .more-aw{font-size:.72rem}
}

/* v14 six-column grid for feature films only, so the 12 features sit in two rows (2026-10-24) */
.g-feature .grid.all{grid-template-columns:repeat(6,1fr);gap:32px 20px}
.g-feature .meta b{font-size:.92rem}
.g-feature .meta span{font-size:.78rem}
@media (max-width:1000px){.g-feature .grid.all{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.g-feature .grid.all{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.g-feature .grid.all{grid-template-columns:1fr 1fr;gap:28px 16px}}
@media (max-width:640px) and (max-height:700px){.record.cine{padding-top:64px}.record.cine .nums{margin-bottom:14px}.record.cine .aw{gap:8px}.laurel .lf{height:50px}.laurel .lt{min-height:50px}.record.cine .more-aw{margin-top:10px}}

/* v15 menu (2026-10-24): small spaced capitals with a gold underline that draws in; full-screen menu on phones */
.nav{gap:36px}
.nav a:not(.lang){position:relative;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#cfc6b9;border:0;padding:8px 0;transition:color .3s}
.nav a:not(.lang)::after{content:"";position:absolute;left:0;right:.22em;bottom:1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav a:not(.lang):hover,.nav a.on:not(.lang){color:#fff}
.nav a:not(.lang):hover::after,.nav a.on:not(.lang)::after{transform:scaleX(1);transform-origin:left}
.nav .lang{margin-left:4px;padding:5px 11px;font-size:.66rem;font-weight:600;letter-spacing:.18em;color:var(--accent);border:1px solid rgba(228,168,83,.45);transition:background .3s,color .3s}
.nav .lang:hover{background:var(--accent);color:#0c0b0a;border-color:var(--accent)}
@media (max-width:860px){
 .brand,.menu-btn{position:relative;z-index:2}
 .menu-btn[aria-expanded="true"]{font-size:0;padding:8px 14px}
 .menu-btn[aria-expanded="true"]::after{content:"✕";font-size:.85rem;letter-spacing:0}
 .nav{inset:0;height:100vh;height:100svh;z-index:1;justify-content:center;align-items:center;gap:6px;padding:0 var(--gut);background:rgba(12,11,10,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0}
 .nav a:not(.lang){width:auto;font-size:clamp(1.8rem,8vw,2.6rem);font-weight:600;font-stretch:80%;letter-spacing:.08em;padding:10px 0;border:0}
 .nav a:not(.lang)::after{bottom:6px;height:2px;right:.08em}
 .nav .lang{margin:28px 0 0;font-size:.75rem;padding:7px 16px}
}

/* v16 cinematic About (2026-10-24): film still behind, gold title, glass service cards */
.cine-about{position:relative;overflow:hidden;isolation:isolate;border-top:0}
.cine-about .cine-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.05) brightness(.8)}
.cine-about::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 20%,rgba(12,11,10,.55) 0%,rgba(12,11,10,.88) 60%),linear-gradient(var(--bg) 0%,rgba(12,11,10,.2) 22%,rgba(12,11,10,.6) 60%,var(--bg) 100%)}
.cine-about .ab2-h h2{font-size:clamp(3.2rem,8vw,6.5rem);font-weight:200;font-stretch:75%;letter-spacing:-.02em;line-height:.95;background:linear-gradient(180deg,#f6dfae 0%,#e4a853 55%,#a8742c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-about .ab2-bio p:first-child{font-size:clamp(1.4rem,2.3vw,1.85rem);font-weight:300;line-height:1.4;letter-spacing:-.005em}
.cine-about .ab2-grid{background:rgba(228,168,83,.18);border-color:rgba(228,168,83,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cine-about .ab2-grid li{background:rgba(12,11,10,.72);transition:background .4s}
.cine-about .ab2-grid li:hover{background:rgba(24,20,16,.82)}
.cine-about .ab2-off{background:linear-gradient(90deg,rgba(228,168,83,.14),rgba(12,11,10,.5) 70%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cine-about .cine-bg{bottom:auto;height:min(100%,960px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.cine-about .cine-bg img{filter:grayscale(.25) contrast(1.05) brightness(.9);object-position:20% 40%}
.cine-about::before{background:linear-gradient(90deg,rgba(12,11,10,.25) 0%,rgba(12,11,10,.55) 35%,rgba(12,11,10,.9) 60%,rgba(12,11,10,.94) 100%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 14%)}
.cine-about .ab2-top{min-height:clamp(420px,62vh,640px);align-items:center}
.cine-about .ab2-h{align-self:end;padding-bottom:8px}
.cine-about .ab2-h h2{font-weight:300}
@media (max-width:760px){.cine-about::before{background:linear-gradient(rgba(12,11,10,.35),rgba(12,11,10,.85) 40%,rgba(12,11,10,.94))}.cine-about .ab2-top{min-height:0}}
/* About heading matches the Films heading (2026-10-24) */
.cine-about .ab2-h h2{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;font-stretch:82%;letter-spacing:-.01em;line-height:1.02;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)}

/* v17 What I do, evened out (2026-10-24): four equal service cards, then a credits-style strip for tools and languages */
.ab2-grid{grid-template-columns:repeat(4,1fr)}
.ab2-grid li{display:flex;flex-direction:column;padding:28px 24px 32px}
.ab2-spec{display:grid;grid-template-columns:2fr 1fr;gap:0 clamp(24px,4vw,56px);margin:clamp(28px,4vw,40px) 0 0}
.ab2-spec div{border-top:1px solid rgba(228,168,83,.3);padding-top:16px}
.ab2-spec dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ab2-spec dd{margin:0;color:#d9d1c5;font-size:.95rem;line-height:1.6}
@media (max-width:960px){.ab2-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ab2-spec{grid-template-columns:1fr;gap:20px}}
@media (max-width:560px){.ab2-grid{grid-template-columns:1fr}}

/* v18 every section snaps to the top of the screen like the awards band; short sections fill one screen (2026-10-24) */
html{scroll-snap-type:y mandatory}
main > section,main > section.anchor{scroll-snap-align:start;scroll-margin-top:0}
.record.cine,.quote-band,.quotes,.contact.page{scroll-snap-align:start}
.quote-band,.quotes,.contact.page,.section.beyond{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:clamp(80px,10vh,120px);padding-bottom:clamp(40px,6vh,80px)}
.quote-band > .wrap,.quotes > .wrap,.contact.page > .wrap,.section.beyond > .wrap{width:100%}
#work,.ab2{padding-top:clamp(96px,12vh,140px)}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* v19 What I do as title-card rows, no boxes (2026-10-24) */
.ab2-grid,.cine-about .ab2-grid{display:block;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.ab2-grid li,.cine-about .ab2-grid li{display:grid;grid-template-columns:clamp(34px,4vw,56px) minmax(0,1.3fr) minmax(0,1fr);align-items:baseline;gap:clamp(12px,3vw,40px);background:none;padding:clamp(18px,2.6vw,30px) 0;border-top:1px solid rgba(239,235,229,.1)}
.ab2-grid li:last-child{border-bottom:1px solid rgba(239,235,229,.1)}
.ab2-grid li::before{margin:0;font-size:.8rem;letter-spacing:.2em}
.ab2-grid b{margin:0;font-size:clamp(1.9rem,4.2vw,3.6rem);font-weight:300;font-stretch:75%;letter-spacing:-.01em;line-height:1;color:#f3eee6;transition:color .4s}
.ab2-grid span{font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.55;color:#cfc6b9}
.ab2-grid li:hover b{color:var(--accent)}
.cine-about .ab2-grid li:hover{background:none}
@media (max-width:760px){.ab2-grid li,.cine-about .ab2-grid li{grid-template-columns:34px 1fr;row-gap:8px}.ab2-grid span{grid-column:2}}

/* v20 About text layout (2026-10-24): heading on top, bio in one readable column on the dark side, film image on the right */
.cine-about .ab2-top{display:block;min-height:0;max-width:820px}
.cine-about .ab2-h{position:static;align-self:auto;padding:0;margin-bottom:clamp(24px,3.5vw,40px)}
.cine-about .ab2-bio{max-width:38em}
.cine-about .ab2-bio p{font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.75;color:#ddd5ca;font-weight:400;margin:0 0 1.2em}
.cine-about .ab2-bio p:first-child{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.45;color:#fff;font-weight:300;margin-bottom:1em;max-width:30em}
.cine-about::before{background:linear-gradient(90deg,rgba(12,11,10,.95) 0%,rgba(12,11,10,.88) 45%,rgba(12,11,10,.45) 75%,rgba(12,11,10,.3) 100%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 14%)}
.cine-about .cine-bg img{object-position:75% 40%;transform:scaleX(-1)}
.ab2-grid li,.cine-about .ab2-grid li{align-items:center}
.ab2-grid span{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:#e2dbd0;max-width:28em}
@media (max-width:760px){.cine-about::before{background:linear-gradient(rgba(12,11,10,.55),rgba(12,11,10,.9) 35%,rgba(12,11,10,.95))}.ab2-grid li,.cine-about .ab2-grid li{align-items:baseline}}

/* v21 What I do beside the bio: faint titles, description below, gold on hover (2026-10-24) */
.cine-about .ab2-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);max-width:none;align-items:end}
.cine-about .ab2-what .ab2-k{margin:0 0 clamp(14px,2vw,22px);color:rgba(239,235,229,.35)}
.ab2-list{list-style:none;margin:0;padding:0;counter-reset:sv}
.ab2-list li{padding:clamp(10px,1.4vw,16px) 0;cursor:default}
.ab2-list b{display:block;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:300;font-stretch:75%;line-height:1.02;letter-spacing:-.01em;color:rgba(239,235,229,.22);transition:color .45s}
.ab2-list span{display:block;margin-top:6px;font-size:.95rem;line-height:1.5;color:rgba(239,235,229,.3);max-width:30em;transition:color .45s}
.ab2-list li:hover b{color:var(--accent)}
.ab2-list li:hover span{color:#e2dbd0}
@media (hover:none){.ab2-list b{color:rgba(239,235,229,.55)}.ab2-list span{color:rgba(239,235,229,.6)}}
@media (max-width:860px){.cine-about .ab2-top{grid-template-columns:1fr}}

/* v22 one Kind words section (2026-10-24) */
.quotes.kind{background:radial-gradient(ellipse at 15% 30%,rgba(228,168,83,.08),transparent 60%),var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quotes.kind .kicker{margin-bottom:clamp(20px,3vw,36px)}
.quotes.kind .quote.big{max-width:56rem;margin-bottom:clamp(40px,6vh,72px)}
.quotes.kind .quote.big p{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:300;line-height:1.35;color:#f3eee6}
.quotes.kind .qgrid.two{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);padding-top:clamp(24px,4vh,40px);border-top:1px solid rgba(228,168,83,.25)}
.quotes.kind .qgrid.two p{font-size:clamp(1rem,1.3vw,1.15rem)}
@media (max-width:760px){.quotes.kind .qgrid.two{grid-template-columns:1fr}}

/* v23 What I do underneath the bio, four across in one row (2026-10-24) */
.cine-about .ab2-top{grid-template-columns:1fr;align-items:start;gap:clamp(36px,6vh,64px)}
.cine-about .ab2-what{border-top:1px solid rgba(239,235,229,.08);padding-top:clamp(20px,3vh,32px)}
.ab2-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.ab2-list li{padding:0}
.ab2-list b{font-size:clamp(1.4rem,2.2vw,2.1rem)}
.ab2-list span{font-size:.9rem}
@media (max-width:980px){.ab2-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ab2-list{grid-template-columns:1fr}}

/* v24 snapping never skips content: proximity, plus stops inside tall sections (2026-10-24) */
html{scroll-snap-type:y proximity}
#work .group,#work .other,#beyond .bgrid{scroll-snap-align:start;scroll-margin-top:84px}

/* v25 stage lights over the Films heading: two warm beams from above, slow sway (2026-10-24) */
#work{position:relative;isolation:isolate;overflow:hidden}
#work::before,#work::after{content:"";position:absolute;top:-40px;width:min(70vw,900px);height:min(110vh,1000px);pointer-events:none;z-index:-1;
 background:conic-gradient(from 0deg at 50% 0,transparent 162deg,rgba(255,214,150,.16) 172deg,rgba(255,230,190,.3) 180deg,rgba(255,214,150,.16) 188deg,transparent 198deg);
 -webkit-mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.08) 6%,rgba(0,0,0,.4) 16%,#000 32%,rgba(0,0,0,.55) 60%,transparent 100%);mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.08) 6%,rgba(0,0,0,.4) 16%,#000 32%,rgba(0,0,0,.55) 60%,transparent 100%);
 filter:blur(6px);transform-origin:50% 0;mix-blend-mode:screen}
#work::before{left:-8%;transform:rotate(-16deg);animation:beamL 14s ease-in-out infinite alternate}
#work::after{right:-8%;transform:rotate(16deg);animation:beamR 17s ease-in-out infinite alternate}
#work > .wrap{position:relative}
#work > .wrap::before{content:"";position:absolute;left:50%;top:-60px;width:min(90vw,1100px);height:420px;transform:translateX(-50%);pointer-events:none;z-index:-1;
 background:radial-gradient(ellipse at 50% 40%,rgba(255,214,150,.14),transparent 65%)}
@keyframes beamL{from{transform:rotate(-20deg)}to{transform:rotate(-10deg)}}
@keyframes beamR{from{transform:rotate(18deg)}to{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){#work::before,#work::after{animation:none}}

/* v26 firm snapping again (mandatory), with a stop at every row so nothing is skipped; beams fade in from the top (2026-10-24) */
html{scroll-snap-type:y mandatory}
#work .card,#work .other .gh,#work .ocard,.ab2-what,.ab2-spec,#beyond .bcard,#beyond .bgrid > *,#work .ogrid > *{scroll-snap-align:start;scroll-margin-top:96px}
@media (max-height:760px),(max-width:760px){.quotes.kind .qgrid .quote{scroll-snap-align:start;scroll-margin-top:96px}}
#work::before,#work::after{top:-20px}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* v27 menu bar fades out instead of a hard edge (2026-10-24); beams from the name and menu tried and dropped */
.top,.top.scrolled{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.top::before{content:"";position:absolute;inset:0 0 -48px;z-index:-1;pointer-events:none;
 background:linear-gradient(rgba(12,11,10,.92) 0,rgba(12,11,10,.8) 55%,rgba(12,11,10,0) 100%);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 -webkit-mask:linear-gradient(#000 50%,transparent);mask:linear-gradient(#000 50%,transparent);opacity:.55;transition:opacity .4s}
.top.scrolled::before{opacity:1}

/* v28 portrait behind About, on the right, facing the text (2026-10-24; temporary until a newer photo) */
.cine-about .cine-bg.portrait{left:auto;right:0;width:min(62%,900px);height:min(100%,640px)}
.cine-about .cine-bg.portrait img{transform:none;object-fit:cover;object-position:70% 25%;filter:grayscale(.2) contrast(1.05) brightness(.82)}
.cine-about .cine-bg.portrait{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(#000 60%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(#000 60%,transparent);mask-composite:intersect}
.cine-about::before{background:linear-gradient(90deg,rgba(12,11,10,.9) 0%,rgba(12,11,10,.7) 40%,rgba(12,11,10,.15) 75%,rgba(12,11,10,.1) 100%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 14%)}
@media (max-width:760px){
 .cine-about .cine-bg.portrait{width:100%;height:70vw;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
 .cine-about .cine-bg.portrait img{object-position:75% 30%}
 .cine-about::before{background:linear-gradient(rgba(12,11,10,.2),rgba(12,11,10,.6) 35%,rgba(12,11,10,.94) 60%)}
 .cine-about .wrap{padding-top:40vw}
}
@media (max-width:760px){.cine-about .ab2-bio{scroll-snap-align:start;scroll-margin-top:96px}}

/* v29 About: no stops at What I do or Tools; one stop with Off the timeline at the bottom of the screen, then Beyond (2026-10-24) */
@media (min-width:761px){
 .ab2-what,.ab2-spec{scroll-snap-align:none}
 .cine-about .ab2-off{scroll-snap-align:end;scroll-margin-bottom:clamp(32px,6vh,64px)}
}

.player-msg{color:var(--text);text-align:center;padding:2rem;font-size:1.1rem}.player-msg a{color:var(--accent)}

/* v30 What I do a little brighter so it reads without hover; gold on hover stays (2026-10-24) */
.ab2-list b{color:rgba(239,235,229,.5)}
.ab2-list span{color:rgba(239,235,229,.58)}
.cine-about .ab2-what .ab2-k{color:rgba(239,235,229,.5)}
@media (hover:none){.ab2-list b{color:rgba(239,235,229,.62)}.ab2-list span{color:rgba(239,235,229,.68)}}

/* v31 Contact closes on a film still, like end credits (2026-10-24); not tcr2, which WOE uses on its contact page */
.cine-contact{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)}
.cine-contact .cine-bg img{width:100%;height:100%;object-fit:cover;object-position:80% 30%;filter:grayscale(.3) contrast(1.05) brightness(.75)}
.cine-contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(12,11,10,.94) 0%,rgba(12,11,10,.8) 40%,rgba(12,11,10,.35) 75%,rgba(12,11,10,.25) 100%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 18%,rgba(12,11,10,0) 80%,var(--bg) 100%)}
@media (max-width:760px){.cine-contact::before{background:linear-gradient(rgba(12,11,10,.55),rgba(12,11,10,.85))}}
.cine-contact .cine-bg{left:30%}
.cine-contact .cine-bg img{object-position:85% 30%;filter:grayscale(.35) contrast(1.05) brightness(.6)}
.cine-contact::before{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 30%,rgba(12,11,10,.75) 48%,rgba(12,11,10,.35) 75%,rgba(12,11,10,.3) 100%),linear-gradient(var(--bg) 0%,rgba(12,11,10,0) 18%,rgba(12,11,10,0) 75%,var(--bg) 100%)}
@media (max-width:760px){.cine-contact .cine-bg{left:0}.cine-contact::before{background:linear-gradient(rgba(12,11,10,.75),rgba(12,11,10,.92))}}
.cine-contact .cine-bg img{object-position:72% 8%;filter:grayscale(.3) contrast(1.05) brightness(.55)}

/* v32 Be a Hero has a still but no film yet; the screenplay card now sits alone, so it spans the row (2026-10-24) */
.reel.still-only{cursor:default}
.reel.still-only:hover .thumb img,.reel.still-only .thumb img{transform:none}
.bgrid.big .bcard:not(.has-media):last-child{grid-column:1/-1}