:root{--paper:#F2EFD8;--ink:#241F1C;--khaki:#BAB493;--orange:#C23B22;--panel-height:660px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:hover,button:hover{color:var(--orange)}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:5px}a:focus-visible{color:var(--orange)}.skip{position:absolute;left:20px;top:-100px;background:var(--paper);padding:12px;z-index:5}.skip:focus{top:10px}.site{max-width:1800px;margin:auto;padding:30px 32px 24px}.header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 0 34px}.wordmark{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-1.2px}.global-nav{display:flex;gap:26px;align-items:center;font-size:14px}.global-nav button{border:0;background:none;padding:8px 0;cursor:pointer}.global-nav a{padding:8px 0}.global-nav [aria-current]{box-shadow:inset 0 -3px var(--khaki)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.panel{height:var(--panel-height);min-width:0}.intro{padding:3px 20px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:11px;margin:0 0 22px}.intro h1{font-family:Manrope,sans-serif;font-size:clamp(36px,3vw,50px);font-weight:400;letter-spacing:-.055em;line-height:1.04;margin:0 0 16px}.subtitle{font-size:16px;margin:0 0 26px}.project-copy p{font-size:14px;line-height:1.5;margin:0 0 16px}.scope{border-top:1px solid var(--khaki);padding-top:16px;margin:23px 0 0;font-size:12px;line-height:1.8}.media-panel,.supporting-panel{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--khaki) transparent}.media-panel{background:rgba(186,180,147,.12)}.supporting-panel img{width:100%;height:auto;display:block;margin-bottom:14px}.supporting-panel img:last-child{margin:0}.video{position:relative;aspect-ratio:3018/1592;width:100%;background:var(--ink)}.video-cover{border:0;padding:0;cursor:pointer;display:block;width:100%;height:100%;position:absolute;inset:0;overflow:hidden;color:var(--paper)}.video-cover img{width:100%;height:100%;object-fit:cover;display:block}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 70%,rgba(0,0,0,.35))}.film-title{position:absolute;left:15px;right:15px;top:12%;text-align:center;font-family:'DM Sans',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.11em;font-size:11px;line-height:1.5}.play-disc{position:absolute;top:61%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--paper);border-radius:50%;background:rgba(36,31,28,.25)}.play-disc svg{width:23px;height:23px;fill:var(--paper);margin-left:3px}.video-cover:hover .play-disc{background:var(--orange);border-color:var(--orange)}.video-cover:hover{color:var(--paper)}.video-cover:focus-visible{outline-offset:-5px;z-index:2}.embed-target,.embed-target iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.embed-target:empty{pointer-events:none}.video-status{padding:15px;font-size:13px;line-height:1.5}.video-status button{display:block;margin-top:10px;padding:8px;background:var(--paper);border:1px solid var(--khaki);cursor:pointer}footer{padding-top:32px}.footer-meta{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.09em;font-size:11px;margin-bottom:16px}.project-nav{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:13px;line-height:2}.project-nav a[aria-current]{box-shadow:inset 0 -4px var(--khaki)}.project-nav span{color:#68614e}.preview-note{font-size:11px;margin:20px 0 0;color:#68614e}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--khaki);padding:40px;max-width:640px;width:calc(100% - 32px);max-height:85vh}dialog::backdrop{background:rgba(36,31,28,.65)}dialog h2{font-family:Manrope,sans-serif;font-size:30px;font-weight:400;line-height:1.2;letter-spacing:-1px}dialog p{font-size:16px;line-height:1.65}dialog .close{display:block;margin:0 0 24px auto;border:0;background:transparent;cursor:pointer}dialog>a{border-bottom:2px solid var(--khaki)}
@media(min-width:901px) and (max-width:1150px){:root{--panel-height:760px}.site{padding:24px}.project-grid{gap:16px}.intro{padding-right:7px}.project-copy p{font-size:14px}.intro h1{font-size:38px}.subtitle{font-size:15px}}
@media(max-width:900px){.site{padding:22px}.header{padding-bottom:35px}.wordmark{font-size:25px}.global-nav{gap:18px}.project-grid{grid-template-columns:1fr;gap:28px}.panel{height:auto}.intro{padding:0;max-width:640px}.intro h1{font-size:48px}.project-copy p{font-size:16px}.media-panel,.supporting-panel{overflow:visible;overscroll-behavior:auto}.media-panel{background:none}.play-disc{width:56px;height:56px}.scope{margin-bottom:5px}.project-nav{gap:10px 20px}}
@media(max-width:420px){.header{align-items:flex-start;gap:20px;flex-wrap:wrap}.global-nav{font-size:14px}.site{padding:18px}.intro h1{font-size:43px}dialog{padding:24px}}
/* At large text settings, preserve the copy instead of clipping it. */
.project-grid.reflow{grid-template-columns:1fr}.reflow .panel{height:auto}.reflow .media-panel,.reflow .supporting-panel{overflow:visible}.reflow .intro{max-width:680px}

.video-item{margin:0 0 16px}.video-item:last-child{margin-bottom:0}.series-panel{background:transparent}

.embed-target video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink)}

.contact-page{min-height:540px;padding:45px 0 65px;max-width:850px}
.contact-page h1{font-family:Manrope,sans-serif;font-size:clamp(40px,5.5vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1.1;margin:0 0 28px}
.contact-intro{font-size:18px;line-height:1.65;max-width:640px}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin:34px 0;font-size:clamp(18px,2.2vw,25px)}
.contact-links a{box-shadow:inset 0 -2px var(--khaki);padding-bottom:5px;overflow-wrap:anywhere}
.contact-note{font-size:14px;line-height:1.6}
@media(max-width:900px){.contact-page{min-height:0;padding:20px 0 40px}.contact-intro{font-size:16px}}

/* Reserve room for navigation; fit the content to the visible browser height. */
.site{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-block:clamp(12px,3vh,30px) clamp(10px,2.4vh,24px)}
.header{padding-bottom:clamp(14px,3.4vh,34px)}
.project-grid{min-height:0;overflow:hidden}
.panel{height:100%;min-height:0}
.intro{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--khaki) transparent}
footer{padding-top:clamp(12px,3.2vh,32px)}
.footer-meta{margin-bottom:clamp(6px,1.6vh,16px)}
.contact-page{min-height:0;overflow-y:auto;width:100%;padding-block:clamp(16px,4.5vh,45px) 24px}
@media(max-width:900px){
 .project-grid{display:block;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--khaki) transparent}
 .panel{height:auto;overflow:visible;margin-bottom:28px}
 .panel:last-child{margin-bottom:0}
 .project-nav{flex-wrap:nowrap;overflow-x:auto;gap:20px;padding-bottom:5px;scrollbar-width:thin}
 .project-nav a{flex:none}
}
@media(max-height:500px){.site{padding-block:8px}.header{padding-bottom:8px}footer{padding-top:8px}.footer-meta{display:none}}

.site>main,.site>footer{min-width:0}

.column-heading{font-family:inherit;font-weight:400;line-height:normal;padding:3px 0 12px;margin:0 0 10px;background:var(--paper);position:sticky;top:0;z-index:3}

.landing-page{display:flex;align-items:center;justify-content:center;overflow-y:auto;text-align:center;padding:24px 0}
.landing-content{max-width:1000px;margin:auto;width:100%}
.landing-page .eyebrow{margin-bottom:28px}
.landing-page h1{font-family:Manrope,sans-serif;font-size:clamp(44px,6.2vw,84px);font-weight:400;letter-spacing:-.055em;line-height:1.08;margin:0 0 28px}
.landing-intro{font-size:clamp(16px,1.5vw,19px);line-height:1.65;max-width:640px;margin:0 auto 42px;text-wrap:pretty}
.landing-nav{justify-content:center;flex-wrap:wrap;overflow:visible;gap:12px 28px;font-size:14px;padding:0}
.landing-nav a{padding:5px 0;border-bottom:1px solid var(--khaki)}
.landing-footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;line-height:1.7}
@media(max-width:600px){.landing-page{padding:20px 0}.landing-intro{margin-bottom:28px}.landing-nav{gap:8px 20px}.landing-footer{flex-direction:column;gap:3px}.landing-page .eyebrow{margin-bottom:20px}}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}.project-nav{view-transition-name:project-navigation}::view-transition-group(project-navigation){animation-duration:250ms}}

/* Two-column projects: one continuous work stream, with context after the work. */
.project-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,3vw,48px)}
.work-panel{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--khaki) transparent;padding-right:8px}
.work-panel .media-panel,.work-panel .supporting-panel{overflow:visible;background:transparent}
.work-panel .column-heading{position:static}
.work-panel .supporting-panel{margin-top:40px;padding-top:24px;border-top:1px solid var(--khaki)}
.work-panel .supporting-panel img{margin-bottom:24px}
.work-panel .portrait-video{max-width:440px;margin-inline:auto}
.work-panel .video-item{margin-bottom:24px}
@media(max-width:900px){.work-panel{overflow:visible;padding-right:0}.work-panel .supporting-panel{margin-top:32px}.work-panel .portrait-video{max-width:440px}}

/* Selected project galleries share one compact row within the work stream. */
.supporting-image-row{display:flex;gap:12px;align-items:stretch}
.work-panel .supporting-image-row img{flex:1 1 0;width:0;min-width:0;aspect-ratio:3/4;object-fit:cover;object-position:center;margin:0}
@media(max-width:600px){.supporting-image-row{gap:6px}}

/* Keep media at a readable scale and a consistent left edge. */
.work-panel .video{max-width:960px;margin-left:0;margin-right:0}
.work-panel .portrait-video{max-width:440px;margin-left:0;margin-right:0}
.work-panel .supporting-panel>img{width:100%;height:auto;object-fit:contain;margin-left:0;margin-right:0}
.work-panel .supporting-image-row{max-width:960px;margin-left:0;margin-right:0}

.case-role{font-size:12px;line-height:1.6;margin:0 0 22px}
.case-figure{margin:0 0 32px;max-width:960px}.case-figure img{display:block;width:100%;height:auto}.case-figure figcaption{font-size:12px;line-height:1.6;margin-top:12px}.case-figure figcaption span{display:block}.case-link{display:inline-block;margin-top:8px;border-bottom:1px solid var(--khaki)}
.case-detail{max-width:760px;margin:32px 0;padding-top:24px;border-top:1px solid var(--khaki)}.case-detail h2:not(.eyebrow){font-family:Manrope,sans-serif;font-size:24px;font-weight:400;line-height:1.25;letter-spacing:-.03em;margin:0 0 16px}.case-detail p,.system-details{font-size:14px;line-height:1.65}.system-details{margin:0}.system-details>div{margin:0 0 20px}.system-details dt{font-weight:500;margin-bottom:4px}.system-details dd{margin:0}.repository-figure{max-width:520px}
.workflow-diagram{border:1px solid var(--khaki);padding:20px;margin:24px 0}.workflow-diagram .eyebrow{margin-bottom:18px}.workflow-diagram ol{list-style:none;padding:0;margin:0;display:flex;gap:22px;align-items:center}.workflow-diagram li{flex:1;position:relative;font-size:13px;line-height:1.4}.workflow-diagram li:not(:last-child)::after{content:'→';position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--orange)}.workflow-diagram p:last-child{font-size:12px;margin:18px 0 0}
@media(max-width:600px){.workflow-diagram ol{flex-direction:column;align-items:stretch;gap:28px}.workflow-diagram li:not(:last-child)::after{content:'↓';left:0;right:auto;top:auto;bottom:-24px;transform:none}}

/* Keep all eight homepage links together; use balanced rows at smaller widths. */
.landing-content{max-width:1400px}
.landing-nav{display:grid;grid-template-columns:repeat(8,max-content);justify-content:center;gap:12px clamp(14px,1.6vw,28px);font-size:13px}
.landing-nav a{white-space:nowrap;justify-self:center}
@media(max-width:1150px){.landing-nav{grid-template-columns:repeat(4,max-content);gap:12px 28px}}
@media(max-width:640px){.landing-nav{grid-template-columns:repeat(2,max-content);gap:10px 24px}}