/* Balanced diagonal editorial layout, 12 October 2026. */
:root{color:#484845;--muted:#696963;--line:#deded8;--space:clamp(21px,3.7vw,54px);background:#f5f5f2;color-scheme:light}
body{color:#484845}
.header{position:relative;padding-top:22px;padding-bottom:22px;max-width:1280px;margin-inline:auto}
.wordmark{font-size:27px;gap:22px;letter-spacing:.025em}
nav{font-size:13px;letter-spacing:0;gap:27px;color:var(--muted)}
nav a[aria-current]{color:#484845}
main{padding-bottom:0}
.projects,.about,.contact{max-width:1172px;margin-left:auto;margin-right:auto}
.intro{min-height:190px;margin-top:0;margin-bottom:24px;padding-top:36px;padding-bottom:36px}
.intro h1{font-size:28px;font-weight:300;letter-spacing:-.045em;line-height:1.15}
.intro-copy{max-width:1172px}
.intro-copy p{font-size:12px;letter-spacing:0;margin-top:8px}
.intro-image{opacity:.35;object-fit:cover;object-position:50% 42%}
.section-line{border-top:0;padding:0 0 24px;align-items:baseline}
.section-line h2{font-size:28px;line-height:1.15;font-weight:300;letter-spacing:-.045em}
.section-line span{font-size:12px;letter-spacing:0}
#gallery{display:grid;width:100%;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:14px;row-gap:24px;align-items:start}
#gallery .card{min-width:0;align-self:start;margin:0}
.card figcaption{display:block;padding-top:8px;font-size:13px;line-height:1.4;letter-spacing:0}
.card figcaption span:first-child{display:block;max-width:none;font-weight:400;letter-spacing:-.015em}
.card figcaption span:last-child{display:block;font-size:12px;text-align:left;line-height:1.5;margin-top:3px;letter-spacing:0;font-weight:400}
#gallery .card[data-project="les"]{grid-column:2/span 4;grid-row:1}
#gallery .card[data-project="pele"]{grid-column:8/span 4;grid-row:1;margin-top:32px;width:92%;justify-self:end}
#gallery .card[data-project="alpha"]{grid-column:2/span 3;grid-row:2;margin-top:18px}
#gallery .card[data-project="flow"]{grid-column:8/span 4;grid-row:2;width:84%;justify-self:end}
#gallery .card[data-project="parallel"]{grid-column:3/span 3;grid-row:3}
#gallery .card[data-project="night"]{grid-column:8/span 4;grid-row:3;margin-top:18px;width:84%;justify-self:end}
#gallery .card[data-project="delegate"]{grid-column:6/span 3;grid-row:4;margin-top:24px}
.gallery .brand-button>.full-image{padding:7%}
.explorations-line{margin-top:64px}
.explorations-line h2{font-size:18px}
#explorations{width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 14px}
#explorations .card{width:100%;grid-column:7/span 5;grid-row:1;justify-self:stretch}
#explorations .card:nth-child(2){grid-column:2/span 4;grid-row:1;margin-top:36px}
.about,.contact{padding-top:30px;padding-bottom:54px;gap:44px}
.about{margin-top:78px}
.about-copy p{font-size:clamp(21px,2vw,26px);line-height:1.5;color:#484845}
.contact p{font-size:28px;color:#484845}
.contact-link{font-size:14px}
.identity-stamps img{width:44px;height:60px}
footer{max-width:1280px;margin:auto;font-size:12px;gap:24px}
/* Project interiors follow the same composition, with playback retained. */
#viewer{width:100%;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;border:0;padding:22px var(--space) 28px;background:#f5f5f2;color:#484845}
#viewer::backdrop{background:#f5f5f2}
#viewer>*{max-width:1172px;margin-left:auto;margin-right:auto}
.viewer-top{margin-bottom:24px;gap:24px}
.viewer-top .wordmark{font-size:27px;font-weight:300}
#close-viewer{padding:0;min-height:44px;font-size:13px;color:#484845}
#viewer .viewer-heading{padding-left:8.2%;max-width:1172px;margin-bottom:26px}
#viewer-kind{color:var(--muted);font-size:12px;margin-bottom:12px}
#viewer-label{font-size:34px;line-height:1.15;font-weight:300;letter-spacing:-.045em;max-width:660px}
#viewer-subtitle{font-size:13px;color:var(--muted);margin-top:9px}
#viewer-content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:start}
#viewer-content>.video-choices{grid-column:7/span 6;grid-row:1;margin:0;gap:22px}
.video-choices button{font-size:13px;padding:10px 0}
#viewer-content>.project-stage{grid-column:7/span 6;grid-row:2;margin-top:16px;width:100%;min-width:0}
#viewer-content>.project-details{display:contents}
.project-copy{grid-column:2/span 4;grid-row:1/span 2;padding-top:16px;min-width:0;max-width:340px}
.project-copy .project-description{font-size:14px;line-height:1.7;letter-spacing:0;margin:0}
.project-copy .project-note{font-size:12px;line-height:1.6;margin-top:22px;color:var(--muted)}
.project-sources{grid-column:7/span 6;grid-row:3;margin-top:10px;gap:16px}
.source-card{gap:14px;min-height:60px}
.source-thumb{width:84px;height:56px;background:transparent}
.source-copy{font-size:13px;line-height:1.5}
.source-domain{font-size:12px;color:var(--muted)}
.source-brand{background:transparent}
.source-brand img{object-fit:cover}
.project-stage>.full-image{width:auto;max-width:100%;max-height:390px;margin:0}
.project-stage-brand{background:transparent;aspect-ratio:auto;justify-content:flex-start;overflow:visible}
.project-stage-brand>.full-image{width:100%;height:auto;object-fit:contain}
.youtube-surface{min-height:0;aspect-ratio:16/9;background:#000}
.youtube-poster{object-fit:contain;background:#000}
.player-fallback a{color:#fff}
.native-surface video{width:100%;max-height:440px}
#viewer .viewer-bottom{margin-top:28px;padding-top:12px;min-height:44px;border-top:1px solid var(--line);font-size:12px}
.viewer-bottom button{font-size:13px;padding:10px 0;min-height:44px}
#viewer-count{font-size:12px;color:var(--muted)}
#viewer[data-gallery="true"] #viewer-content>.project-stage{grid-column:3/span 8;grid-row:1;margin-top:0;justify-content:center}
#viewer[data-gallery="true"] .project-stage>.full-image{max-height:62dvh}
#viewer[data-gallery="true"] .image-thumbnails{grid-column:3/span 8;grid-row:2;margin-top:0;min-width:0;max-width:100%}
#viewer[data-gallery="true"] .project-copy{grid-column:2/span 5;grid-row:3;max-width:540px}
#viewer[data-gallery="true"] .project-sources{grid-column:8/span 4;grid-row:3}
#viewer[data-personal="true"] .viewer-heading{display:none}
@media(min-width:601px) and (max-width:880px){
 #gallery{column-gap:12px;row-gap:20px}
 #gallery .card[data-project="les"]{grid-column:1/span 5}
 #gallery .card[data-project="pele"]{grid-column:8/span 5}
 #gallery .card[data-project="alpha"]{grid-column:2/span 4}
 #gallery .card[data-project="flow"]{grid-column:8/span 5}
 #gallery .card[data-project="parallel"]{grid-column:2/span 4}
 #gallery .card[data-project="night"]{grid-column:7/span 5}
 #gallery .card[data-project="delegate"]{grid-column:5/span 4}
}
@media(max-width:740px){
 #viewer .viewer-heading{padding-left:0}
 #viewer-label{font-size:28px}
 .project-copy{grid-column:1/span 5}
 #viewer-content>.project-stage,#viewer-content>.video-choices,.project-sources{grid-column:7/span 6}
 #viewer[data-gallery="true"] #viewer-content>.project-stage,#viewer[data-gallery="true"] .image-thumbnails{grid-column:1/-1}
}
@media(max-width:600px){
 .header{padding:22px 21px;gap:10px;align-items:flex-start;flex-wrap:wrap}
 .header .wordmark{font-size:23px;gap:14px}
 .header nav{width:100%;justify-content:flex-start;gap:18px;font-size:13px;min-height:44px}
 .intro{min-height:160px;margin-bottom:24px}
 .intro h1{font-size:26px}
 .intro-copy p{font-size:13px;margin-top:8px}
 .section-line{padding-bottom:24px}
 .section-line h2{font-size:26px}
 .section-line>span{display:none}
 #gallery{display:flex;flex-direction:column;gap:24px;width:100%}
 #gallery .card{width:88%;max-width:340px;margin:0;align-self:flex-start}
 #gallery .card:nth-child(2n){align-self:flex-end}
 #gallery .card[data-project="pele"]{width:82%;margin-top:0;margin-left:5%}
 #gallery .card[data-project="alpha"]{margin-top:0}
 #gallery .card[data-project="flow"]{width:68%;margin-left:3%}
 #gallery .card[data-project="parallel"]{width:86%}
 #gallery .card[data-project="night"]{width:90%;margin-top:0}
 #gallery .card[data-project="delegate"]{width:68%;margin-top:24px;margin-left:0;align-self:center}
 .card figcaption{font-size:14px;overflow-wrap:anywhere}
 .card figcaption span:last-child{font-size:12px}
 .explorations-line{margin-top:48px}
 .explorations-line h2{font-size:18px}
 #explorations{display:flex;flex-direction:column;gap:30px}
 #explorations .card{width:94%}
 #explorations .card:nth-child(2){width:80%;margin-top:0;align-self:flex-end}
 .about{margin-top:54px}
 .about,.contact{gap:26px;padding-top:26px;padding-bottom:42px}
 .about-copy p{font-size:21px;font-weight:400;line-height:1.55}
 .contact p{font-size:27px}
 #viewer{padding:22px 21px}
 #viewer .viewer-top{flex-wrap:nowrap;align-items:center;margin-bottom:22px}
 .viewer-top .wordmark{font-size:23px;gap:14px}
 #viewer-label{font-size:28px;font-weight:400;overflow-wrap:anywhere}
 #viewer .viewer-heading{margin-bottom:22px}
 #viewer-content{display:flex;flex-direction:column;gap:22px}
 #viewer-content>.video-choices{order:0;width:100%}
 #viewer-content>.project-stage{order:1;width:100%;margin-top:0}
 #viewer-content>.project-details{display:contents}
 .project-copy{order:3;max-width:none;width:100%;padding-top:0}
 .project-copy .project-description{font-size:15px;line-height:1.65}
 .project-copy .project-note{font-size:13px;line-height:1.6}
 .project-sources{order:4;width:100%;margin:0}
 .source-card{min-height:60px}
 .source-copy{font-size:14px}
 #viewer[data-gallery="true"] .image-thumbnails{order:2;width:100%;margin:0}
 #viewer[data-gallery="true"] .project-copy{max-width:none}
 #viewer .viewer-bottom{flex-wrap:wrap;gap:12px;margin-top:24px}
 #viewer-count{order:3;width:100%;text-align:center}
}