:root{color-scheme:dark;--bg:#111;--panel:#1b1b1b;--text:#f5f4ef;--muted:#a3a39d;--line:#30302e;--accent:#edee77;--edge:clamp(22px,3.3vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
[hidden]{display:none!important}
.shell{width:calc(100% - var(--edge)*2);max-width:1800px;margin-inline:auto}
.skip-link{position:fixed;z-index:100;top:12px;left:var(--edge);padding:12px 18px;background:var(--accent);color:var(--bg);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:91px}
.wordmark{font-size:20px;letter-spacing:-.055em;font-weight:600}
.site-header nav{display:flex;gap:clamp(20px,3vw,42px);align-items:center;font-size:14px}
.site-header nav a{padding:9px 0;transition:color .18s}
.site-header nav a:hover{color:var(--accent)}
.site-header nav span{margin-left:7px}
.intro{padding:66px 0 57px}
.eyebrow{margin:0;color:var(--muted);font-size:12px;line-height:1.5;letter-spacing:.065em}
h1{font-weight:400;letter-spacing:-.055em;font-size:clamp(62px,8.3vw,150px);line-height:1.04;margin:26px 0 37px}
h1 span{display:inline-block;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.14em}
.intro-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.intro-bottom p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}
.jump-link{display:flex;align-items:center;gap:23px;font-size:13px}
.down-arrow{display:grid;place-items:center;width:41px;height:41px;border:1px solid #555550;border-radius:50%;font-size:20px;transition:background .18s,color .18s}
.jump-link:hover .down-arrow{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.work-section{padding:0 0 93px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.project:only-child{grid-column:1/-1}
.project{min-width:0}
.project-media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border:0;border-radius:0;background:var(--panel);color:var(--text);padding:0;text-align:left}
button.project-media{cursor:pointer}
.project-media img,.project-media video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
button.project-media:hover img,button.project-media:hover video{transform:scale(1.018)}
.media-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#1b1b1b;color:#8c8c85;text-align:center;overflow:hidden}
.media-placeholder::before,.media-placeholder::after{content:"";position:absolute;width:42%;height:1px;background:#2d2d2a;top:50%;left:29%;transform:rotate(35deg)}
.media-placeholder::after{transform:rotate(-35deg)}
.placeholder-label{position:relative;z-index:1;padding:16px 22px;background:#1b1b1b;font-size:12px;letter-spacing:.06em;line-height:1.6}
.placeholder-label strong{display:block;color:#c3c3ba;font-size:16px;font-weight:400;letter-spacing:0;margin-bottom:4px}
.play-indicator{position:absolute;inset:auto 22px 22px auto;display:grid;place-items:center;width:54px;height:54px;background:var(--text);color:var(--bg);border-radius:50%;box-shadow:0 3px 24px #0003;transition:background .18s,transform .18s}
.play-indicator svg{width:18px;height:18px;margin-left:3px;fill:currentColor}
button.project-media:hover .play-indicator{background:var(--accent);transform:scale(1.06)}
.project-caption{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding-top:14px}
.project-title{font-size:17px;font-weight:400;letter-spacing:-.02em;margin:0}
.project-category{font-size:12px;color:var(--muted);margin:0;text-align:right;line-height:1.5}
.project-description{max-width:690px;font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.about-section{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:44px 0 63px;border-top:1px solid var(--line)}
.about-text{font-size:clamp(25px,3vw,43px);font-weight:400;letter-spacing:-.035em;line-height:1.2;max-width:830px;margin:0 0 23px}
.discipline-line{font-size:12px;color:var(--muted);line-height:1.7;margin:0}
.discipline-line span{padding:0 12px;color:#64645c}
.contact-section{padding:41px 0 65px;border-top:1px solid var(--line)}
.contact-link{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:18px 0 14px}
.contact-link h2{font-size:clamp(58px,8.3vw,135px);font-weight:400;letter-spacing:-.06em;line-height:1;margin:0}
.contact-link>span{font-size:clamp(42px,6vw,100px);font-weight:400;color:var(--accent);line-height:1}
.contact-link:hover h2{color:var(--accent)}
.contact-address{font-size:14px;color:var(--muted)}
.site-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0 30px;font-size:11px;color:var(--muted);line-height:1.5}
.site-footer a:hover{color:var(--text)}
.video-dialog{border:1px solid #3c3c38;padding:0;max-width:1100px;width:calc(100% - 48px);max-height:calc(100dvh - 48px);background:#151515;color:var(--text);overflow:auto}
.video-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px 12px 22px}
.dialog-bar h2{font-size:15px;font-weight:400;margin:0}
.close-video{display:grid;place-items:center;border:0;background:transparent;color:var(--text);width:42px;height:42px;cursor:pointer;font-size:31px;font-weight:300;line-height:1}
.close-video:hover{color:var(--accent)}
.player-frame{aspect-ratio:16/9;background:#000}
.player-frame video,.player-frame iframe{display:block;border:0;width:100%;height:100%;object-fit:contain}
.player-message{margin:0;padding:17px 22px;background:#25211c;color:#e7d6b8;font-size:14px;line-height:1.5}
.noscript-note{padding:30px;background:var(--panel);color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.intro{padding-top:90px;padding-bottom:65px}.project:only-child .project-media{aspect-ratio:16/8.5}}
@media(max-width:760px){.site-header{min-height:79px}.wordmark{font-size:18px}.site-header nav{font-size:12px;gap:20px}.intro{padding:54px 0 40px}h1{font-size:clamp(54px,10.5vw,80px);margin:23px 0 31px}.intro-bottom p{font-size:13px}.jump-link{gap:12px;font-size:12px}.work-grid{grid-template-columns:1fr;gap:32px}.work-section{padding-bottom:66px}.project-caption{gap:15px}.project-title{font-size:16px}.project-category{font-size:11px}.about-section{grid-template-columns:1fr;gap:23px;padding:30px 0 42px}.about-text{max-width:650px;font-size:29px}.contact-section{padding:30px 0 42px}.video-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}}
@media(max-width:430px){h1{font-size:clamp(43px,10.8vw,57px)}.site-header nav{gap:17px}.intro{padding-top:40px}.intro-bottom p{max-width:190px;font-size:12px}.jump-link>span:first-child{display:none}.down-arrow{width:36px;height:36px}.project-caption{flex-direction:column;gap:6px}.project-category{text-align:left}.play-indicator{width:44px;height:44px;right:14px;bottom:14px}.discipline-line span{padding:0 6px}.site-footer{font-size:10px}.eyebrow{font-size:11px}.about-text{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Joel's simple, work-first layout. */
:root{--accent:#dcef9c}
.site-header{min-height:83px}
.site-header .social-nav{gap:28px}
.social-nav a{display:grid;place-items:center;width:30px;height:37px;padding:4px 0}
.social-nav svg{width:24px;height:24px;fill:currentColor}
.social-nav a:last-child svg{width:28px}
.intro{padding:62px 0 65px}
h1{font-size:clamp(48px,7.15vw,128px);line-height:1.08;letter-spacing:-.05em;margin:0;font-weight:400}
h1 span{text-decoration-thickness:3px;text-underline-offset:.12em}
.project-media{border-radius:3px}
.work-section{padding-bottom:100px}
.contact-link h2{font-size:clamp(47px,6.7vw,110px)}
@media(min-width:1600px){.intro{padding-top:77px;padding-bottom:79px}}
@media(max-width:760px){.site-header{min-height:75px}.site-header .social-nav{gap:23px}.intro{padding:46px 0 47px}h1{font-size:clamp(35px,7.7vw,58px);line-height:1.15}.work-section{padding-bottom:68px}}
@media(max-width:430px){.wordmark{font-size:17px}.site-header .social-nav{gap:17px}.social-nav svg{width:22px;height:22px}.social-nav a:last-child svg{width:26px}.intro{padding:43px 0 43px}h1{font-size:clamp(30px,7.9vw,35px);letter-spacing:-.052em}.contact-link{gap:15px}.contact-link h2{font-size:clamp(35px,9vw,44px)}}
h1 span{text-decoration-skip-ink:none}

/* Silent motion previews with centered titles. */
.project-preview{pointer-events:none}
.project-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgb(0 0 0 / .48);opacity:0;transition:opacity .25s ease;pointer-events:none}
.project-overlay-title{color:#fff;font-size:clamp(28px,3.4vw,62px);font-weight:400;letter-spacing:-.035em;line-height:1.1;text-align:center;text-shadow:0 2px 18px #0003;transform:translateY(5px);transition:transform .25s ease}
.project-media:hover .project-overlay,.project-media:focus-visible .project-overlay{opacity:1}
.project-media:hover .project-overlay-title,.project-media:focus-visible .project-overlay-title{transform:translateY(0)}
@media(max-width:760px){.work-grid{gap:14px}}
@media(max-width:760px),(hover:none){.project-overlay{display:none}}