@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Instrument+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--paper:#111;--ink:#f0f0ed;--muted:#aaa;--edge:40px;font:14px/1.6 'Instrument Sans',Arial,sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100svh}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button{font:inherit;cursor:pointer}img,video{display:block;max-width:100%}figure,p,h1,h2,dl,dd{margin:0}[hidden]{display:none!important}:focus-visible{outline:2px solid #9cc7ff;outline-offset:5px}.skip-link{position:fixed;top:-80px;left:20px;background:var(--ink);color:var(--paper);padding:10px;z-index:20}.skip-link:focus{top:10px}
.project-header{display:flex;justify-content:space-between;align-items:center;padding:20px var(--edge);min-height:80px;font-size:12px;background:var(--paper)}.project-header a{min-height:44px;display:inline-flex;align-items:center}.project-return{gap:24px}.project-return span{font-size:20px}
.project-intro{padding:60px var(--edge) 88px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 24px}.project-intro h1{grid-column:1/5;font:400 clamp(22px,2.2vw,32px)/1.25 'Hedvig Letters Serif',Georgia,serif}.project-intro dl{grid-column:5/8;display:grid;gap:20px;font-size:12px;align-content:start}.project-intro dt{font-family:'Hedvig Letters Serif',Georgia,serif;margin-bottom:6px}.project-intro dd{color:var(--muted);max-width:32ch}.project-copy{grid-column:8/13;}.project-copy p+p{margin-top:20px}.project-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:12px}.project-links a{display:inline-flex;align-items:center;min-height:44px}.project-media{width:100%;}.project-image{width:100%;}.project-image img{width:100%;height:auto}.project-film{width:100%;margin:0;background:#171717;aspect-ratio:16/9;}.project-film iframe,.project-film video{width:100%;height:100%;border:0;object-fit:contain}.film-loader{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:0;background:#171717;color:var(--ink);padding:24px;font-size:12px}.film-loader>span:first-child{font-size:24px}.film-loader:hover{background:#1d1d1d}.project-subtitle{font:400 20px/1.4 'Hedvig Letters Serif',Georgia,serif;padding:72px var(--edge) 16px}.project-note{padding:0 var(--edge) 24px;max-width:800px}.project-footer{padding:40px var(--edge);display:flex;justify-content:space-between;font-size:12px}.project-footer a{min-height:44px;display:flex;align-items:center}
@media(max-width:760px){:root{--edge:20px}.project-header{padding-block:10px;min-height:64px}.project-intro{display:block;padding-top:36px;padding-bottom:48px}.project-intro h1{font-size:24px;margin-bottom:28px}.project-intro dl{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}.project-copy{font-size:14px}.project-subtitle{padding-top:40px}.project-note{font-size:14px}.project-footer{padding-block:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.project-pair{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,16fr);align-items:start;padding-block:clamp(12px,1.5vw,20px);background:#111}
@media(max-width:760px){.project-pair{grid-template-columns:1fr}}
.project-board{position:relative}.board-film{position:absolute}.project-board-crowd .board-film{left:6.976%;top:19.633%;width:86.048%;height:15.808%}.project-board-variant .board-film{left:5%;top:79.15%;width:90%}.board-film .film-loader{background:#e8e8eb;color:#111;gap:8px;font-size:12px}.board-film .film-loader:hover{background:#dedee4}
.project-return{position:fixed;top:max(20px,env(safe-area-inset-top));right:calc(var(--edge) - 10px);z-index:10;width:44px;height:44px;justify-content:center;background:transparent;color:#fff;mix-blend-mode:difference}.project-return:hover{text-decoration:none}
@media(max-width:760px){.project-return{top:max(10px,env(safe-area-inset-top))}}
.project-section-links{padding:0 var(--edge);margin-top:16px}
@media(min-width:761px) and (max-width:1000px){.project-intro h1{grid-column:1/-1}.project-intro dl{grid-column:1/5}.project-copy{grid-column:5/13}}

.project-links a{gap:7px;font-weight:500;text-decoration:none}.link-arrow{flex:none;vertical-align:-.05em}.project-links .link-arrow{box-sizing:content-box;width:10px;height:10px;padding:3px;border:1px solid #686864;transition:background-color .16s ease,color .16s ease,border-color .16s ease}.project-links a:hover .link-arrow,.project-links a:focus-visible .link-arrow{border-color:#f0f0ed;background:#f0f0ed;color:#111}

.project-pair-equal{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.project-pair-equal{grid-template-columns:1fr}}

.project-process-copy { padding: clamp(64px, 9vw, 128px) var(--edge); text-align: center; }
.project-process-copy p { max-width: 66ch; margin-inline: auto; text-wrap: pretty; line-height: 1.8; }
@media(max-width:760px) { .project-process-copy p { font-size:14px; } }

.project-return{min-width:44px;justify-content:center}
@media(max-width:760px){.project-intro dl,.project-links,.project-footer,.project-header{font-size:14px;line-height:21px}.project-links a{min-height:48px}}

@media(max-width:760px){
 .project-intro dt{margin-bottom:10px}
 .project-intro dl{margin-bottom:40px}
 .project-intro .role-term{white-space:nowrap}
 .project-return{width:48px;height:48px}
 .project-return span{font-size:28px}
}

.project-film { position:relative; overflow:hidden; padding:0; border:0; line-height:0; }
.project-film > iframe { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; background:#000; }

/* Shared project tools: match the About tool tags. */
    .project-intro .project-tools dd { max-width:220px; }
    .project-tool-tags { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; }
    .project-tool-tag { white-space:nowrap; position:relative; isolation:isolate; padding:4px 8px; background:#606060; color:#e7e7e2; font-size:11px; line-height:16px; clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px)); transition:color 180ms ease,background 180ms ease; }
    .project-tool-tag::before { content:''; position:absolute; z-index:-1; inset:1px; background:#202020; clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px)); transition:background 180ms ease; }
    @media(hover:hover) { .project-tool-tag:hover { background:#efefeb; color:#171717; } .project-tool-tag:hover::before { background:#efefeb; } }
    @media(max-width:760px) { .project-tools { grid-column:1/-1; } .project-intro .project-tools dd { max-width:none; width:100%; } .project-tool-tags { gap:8px; } .project-tool-tag { font-size:14px; line-height:21px; padding:5px 9px; } }
    @media(prefers-reduced-motion:reduce) { .project-tool-tag,.project-tool-tag::before { transition:none; } }

/* Keep metadata spacing consistent; links follow the description without stretching. */
.project-links{margin-top:16px}

/* Align the closing links on shorter introductions; long copy keeps its natural flow. */
@media(min-width:761px) {
 .project-intro-align-links dl { grid-template-rows:auto auto 1fr; align-content:normal; }
 .project-intro-align-links .project-tools { align-self:end; }
 .project-intro-align-links .project-copy { display:flex; flex-direction:column; }
 .project-intro-align-links .project-links { margin-top:auto; padding-top:16px; }
 .project-intro-align-links .project-links a { align-items:flex-end; }
}

video::-webkit-media-controls { transition:opacity .2s ease; }
video.video-ui-idle { cursor:none; }
video.video-ui-idle::-webkit-media-controls { opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { video::-webkit-media-controls { transition:none; } }

/* Keep essential playback controls; omit the optional overflow menu. */
video::-webkit-media-controls-overflow-button { display:none !important; }