:root { --ink:#0b1014; --ink-raised:#111820; --paper:#e7e3dc; --accent:#d29462; --line:rgba(205,214,220,.23); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.022; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.site-header { position:absolute; inset:0 0 auto; padding:25px 32px; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; z-index:20; font:400 12px/1.5 DM Mono,monospace; letter-spacing:.08em; }
.mark { font:600 25px/1 Manrope,sans-serif; letter-spacing:-.1em; }
.header-center { text-align:center; }.header-center span { opacity:.55; }
.menu-toggle { justify-self:end; width:36px; height:30px; border:0; background:0; color:inherit; padding:0; cursor:pointer; position:relative; }
.menu-toggle i,.menu-toggle:after { content:""; position:absolute; right:0; bottom:17px; width:28px; height:1px; background:currentColor; transform-origin:center; transition:bottom .28s,transform .28s,width .28s; }
.menu-toggle:after { bottom:10px; width:20px; }
.menu-toggle.open i,.menu-toggle.open:after { bottom:14px; width:25px; }
.menu-toggle.open i { transform:rotate(45deg); }.menu-toggle.open:after { transform:rotate(-45deg); }
.menu { position:fixed; inset:0; background:var(--ink-raised); z-index:15; padding:120px 7vw 40px; display:flex; flex-direction:column; justify-content:center; visibility:hidden; pointer-events:none; clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s .7s; }
.menu.open { visibility:visible; pointer-events:auto; clip-path:inset(0); transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s; }
.menu a { font-size:clamp(46px,8vw,120px); line-height:.92; letter-spacing:-.065em; border-bottom:1px solid #333; padding:10px 0 18px; }
.menu a em { font:12px DM Mono; letter-spacing:0; margin-right:3vw; color:var(--accent); }
.menu-index,.menu-foot { font:12px DM Mono; letter-spacing:.1em; position:absolute; top:105px; }.menu-foot { top:auto; bottom:35px; }
.hero { height:100svh; min-height:680px; position:relative; overflow:hidden; }
.hero-media { position:absolute; inset:-4%; background:url('assets/wix/home-background.jpg') center/cover; animation:slowpush 16s ease-out forwards; }
.hero-video { width:100%; height:100%; object-fit:cover; display:block; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.08) 50%,rgba(0,0,0,.65)); }
@keyframes slowpush { to { transform:scale(1.06); } }
.hero-kicker { position:absolute; top:29%; left:32px; font:12px DM Mono; letter-spacing:.12em; }
.hero-title { position:absolute; left:3vw; right:3vw; bottom:18%; font-size:clamp(60px,10.2vw,160px); font-weight:500; line-height:.75; letter-spacing:-.075em; margin:0; }
.hero-title span { display:block; }.hero-title span:nth-child(2) { text-align:right; }.hero-title i,.statement i,.quote i,.contact-link i,.section-head i { font-family:Playfair Display,serif; font-weight:500; }
.hero-bottom { position:absolute; left:32px; right:32px; bottom:25px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font:12px/1.6 DM Mono; letter-spacing:.08em; }
.hero-bottom p { margin:0; }.hero-bottom a { align-self:end; }.hero-bottom b { color:var(--accent); font-size:18px; margin-left:20px; }
.hero-actions { display:flex; gap:26px; align-items:flex-end; }.reel-trigger { border:0; border-bottom:1px solid currentColor; background:none; color:inherit; padding:0 0 4px; font:inherit; letter-spacing:inherit; cursor:pointer; }
.frame-count { position:absolute; right:32px; top:29%; writing-mode:vertical-rl; font:12px DM Mono; letter-spacing:.12em; }
.intro { background:var(--paper); color:var(--ink); padding:130px 3vw 150px; }
.eyebrow { font:12px DM Mono; letter-spacing:.12em; }
.statement { max-width:1280px; font-size:clamp(44px,7.2vw,112px); line-height:.96; letter-spacing:-.065em; margin:90px 0; }
.intro-meta { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #aaa; padding-top:20px; font:14px/1.65 DM Mono; }
.intro-meta p { max-width:480px; grid-column:2; margin:0; }.intro-meta a { grid-column:2; margin-top:50px; text-decoration:underline; text-underline-offset:5px; }
.work { padding:110px 3vw 60px; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:90px; }
.section-head h2 { margin:0; font-size:clamp(58px,9vw,130px); line-height:.8; letter-spacing:-.075em; font-weight:500; }
.section-head div { display:flex; gap:50px; font:12px DM Mono; letter-spacing:.1em; }
.section-head .work-meta { gap:26px; opacity:.58; }
.project { margin-bottom:110px; }
.project-image { position:relative; overflow:hidden; height:70vh; min-height:520px; background-position:center; background-size:cover; filter:saturate(.82); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:3vw; }
.project-grid .project { margin-bottom:90px; }
.project-grid .project-image { height:auto; min-height:0; aspect-ratio:16/10; }
.project-image { transition:filter .45s ease,transform .55s cubic-bezier(.22,1,.36,1); }
.project:hover .project-image { filter:saturate(.95); transform:scale(.995); }
.project[role="button"] { cursor:pointer; outline:none; }.project[role="button"]:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.project-num { position:absolute; top:20px; left:20px; z-index:2; border:1px solid rgba(255,255,255,.5); border-radius:50%; width:42px; height:42px; display:grid; place-items:center; font:12px DM Mono; }
.play { position:absolute; right:16px; bottom:16px; z-index:2; padding:9px 12px; border:1px solid rgba(255,255,255,.42); background:rgba(8,8,8,.28); backdrop-filter:blur(8px); color:var(--paper); font:12px DM Mono; letter-spacing:.1em; opacity:.78; transition:opacity .3s,transform .3s; }
.project:hover .play { opacity:1; transform:translate(1px,-1px); }
.project-info { display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:baseline; padding-top:16px; border-top:1px solid var(--line); margin-top:15px; }
.project-info h3 { margin:0; font-size:clamp(28px,3vw,49px); font-weight:500; letter-spacing:-.05em; }.project-info p { font:12px DM Mono; letter-spacing:.08em; }
.project-grid .project-info { grid-template-columns:1fr auto; gap:7px 24px; padding-top:13px; margin-top:12px; }
.project-grid .project-info h3 { grid-column:1; grid-row:1; font-size:clamp(26px,2.7vw,40px); }
.project-grid .project-info p { margin:0; }
.project-grid .project-info p:nth-child(2) { grid-column:1; grid-row:2; opacity:.62; }
.project-grid .project-info p:last-child { grid-column:2; grid-row:1; }
.quote { min-height:72vh; padding:110px 3vw; background:var(--ink-raised); color:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.quote blockquote i { color:var(--accent); }
blockquote { margin:100px 0 0; text-align:center; font-size:clamp(50px,8.2vw,124px); line-height:.92; letter-spacing:-.065em; }
.contact { padding:100px 3vw 35px; min-height:92vh; display:flex; flex-direction:column; }
.contact>p { font:12px DM Mono; letter-spacing:.12em; }
.contact-link { font-size:clamp(58px,10vw,150px); line-height:.83; letter-spacing:-.075em; margin:auto 0; position:relative; }
.contact-link span { position:absolute; right:0; top:10%; color:var(--accent); font-size:.5em; }
.contact-meta { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-top:18px; font:12px/1.7 DM Mono; letter-spacing:.08em; }.contact-meta p:last-child { justify-self:end; text-align:right; }
footer { background:var(--paper); color:var(--ink); padding:25px 3vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font:12px DM Mono; letter-spacing:.08em; }footer>a:first-child { font:600 24px Manrope; }footer>a:last-child { justify-self:end; }
.menu-toggle:focus-visible,.reel-trigger:focus-visible,a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

dialog { color:var(--paper); background:var(--ink); border:1px solid var(--line); padding:0; max-width:none; max-height:none; }
dialog::backdrop { background:rgba(4,7,9,.88); backdrop-filter:blur(12px); }
.dialog-close { position:absolute; z-index:4; right:24px; top:22px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:rgba(11,16,20,.55); color:var(--paper); cursor:pointer; }
.dialog-close:before,.dialog-close:after { content:""; position:absolute; width:15px; height:1px; background:currentColor; left:10px; top:17px; transform:rotate(45deg); }.dialog-close:after { transform:rotate(-45deg); }
.project-dialog { width:min(1220px,calc(100vw - 40px)); height:min(760px,calc(100vh - 40px)); }.project-dialog-inner { height:100%; display:grid; grid-template-columns:1.25fr .75fr; }.detail-media { background:#000; min-width:0; }.detail-media video { width:100%; height:100%; object-fit:cover; }.detail-copy { padding:70px 42px 34px; overflow:auto; }.detail-kicker { margin:0 0 28px; color:var(--accent); font:12px DM Mono; letter-spacing:.1em; }.detail-copy h2 { font-size:clamp(44px,5vw,78px); line-height:.88; letter-spacing:-.065em; font-weight:500; margin:0 0 30px; }.detail-summary { font-size:16px; line-height:1.55; color:#c5c9cc; margin:0 0 36px; }.detail-copy dl { margin:0; border-top:1px solid var(--line); }.detail-copy dl div { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font:12px/1.5 DM Mono; }.detail-copy dt { opacity:.5; }.detail-copy dd { margin:0; }.external-film-link { display:inline-block; margin-top:30px; border-bottom:1px solid currentColor; padding-bottom:5px; font:12px DM Mono; letter-spacing:.1em; }
.reveal { opacity:1; transform:none; }.js .reveal { opacity:0; transform:translateY(32px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); }.js .reveal.visible { opacity:1; transform:none; }
@media (max-width:720px) {
  .site-header { padding:20px; grid-template-columns:1fr 1fr; }.header-center { display:none; }.hero-kicker { left:20px; top:24%; }.hero-title { bottom:25%; font-size:17.5vw; line-height:.82; }.hero-bottom { left:20px; right:20px; }.hero-bottom>p { display:none; }.hero-actions { width:100%; justify-content:space-between; gap:14px; }.frame-count { display:none; }
  .intro,.work,.quote,.contact { padding-left:20px; padding-right:20px; }.intro { padding-top:90px; }.statement { margin:60px 0 90px; }.intro-meta { grid-template-columns:1fr; }.intro-meta p,.intro-meta a { grid-column:1; }.project-grid { grid-template-columns:1fr; gap:0; }.project-image { height:62vh; min-height:430px; }.project-grid .project-image { height:auto; min-height:0; aspect-ratio:4/3; }.project-info { grid-template-columns:1fr auto; }.project-info p:nth-child(2) { grid-row:2; }.project-info p:last-child { grid-row:1; grid-column:2; }.section-head { display:block; }.section-head div { margin-top:35px; justify-content:space-between; }.contact-link { font-size:16vw; }.contact-meta { grid-template-columns:1fr; gap:20px; }.contact-meta p:last-child { justify-self:start; text-align:left; }footer { grid-template-columns:1fr 1fr; }footer p { display:none; }.project-dialog { width:100vw; height:100vh; }.project-dialog-inner { grid-template-columns:1fr; grid-template-rows:42vh 1fr; }.detail-copy { padding:38px 20px 30px; }.detail-copy dl div { grid-template-columns:92px 1fr; }.reel-dialog { width:100vw; height:100vh; }.reel-heading span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-media { animation:none; }.js .reveal { opacity:1; transform:none; transition:none; } }