:root{--paper:#eeeae0;--ink:#23221d;--accent:#a63320;--line:#a5a091;--pad:clamp(18px,5vw,76px);--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.5 Arial,Helvetica,sans-serif}
img,video{display:block;width:100%;height:auto}
a{color:inherit;text-underline-offset:.25em}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
figure,p,h1,h2,h3{margin:0}
.frame{max-width:1530px;margin:auto;padding-inline:var(--pad)}
.kicker{font:600 .72rem/1.4 'Courier New',monospace;text-transform:uppercase;letter-spacing:.1em}
.skip{position:fixed;left:1rem;top:1rem;z-index:5;translate:0 -200%;background:white;padding:.5rem}
.skip:focus{translate:0}
.reading-line{height:3px;background:var(--accent);position:fixed;top:0;left:0;right:0;z-index:4;transform:scaleX(var(--read,0));transform-origin:left;pointer-events:none}
.mast,.mast nav,.studio{display:flex;align-items:center}
.mast{min-height:86px;justify-content:space-between}
.mast nav{gap:clamp(20px,4vw,60px)}
.mast a{font-weight:600;text-decoration:none}
.mast a,.intro a,.text-link,.back,.address{transition:color .18s,translate .22s}
.mast a:active,.intro a:active,.text-link:active,.back:active,.address:active{translate:0 2px}
.studio{gap:11px}
.studio img{width:40px;height:40px;transition:rotate .3s}
.studio:hover img,.studio:focus-visible img{rotate:-9deg}
.intro{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:28px;padding-block:clamp(46px,8vw,120px) clamp(46px,7vw,99px);align-items:end}
h1{font:400 clamp(3.7rem,10.5vw,10.3rem)/.86 var(--serif);letter-spacing:-.082em;margin-top:18px;overflow-wrap:anywhere}
h1 span{color:var(--accent)}
.intro-copy{max-width:22ch;padding-bottom:5px}
.intro-copy p{font-size:clamp(1.15rem,1.8vw,1.65rem);line-height:1.25;margin-bottom:20px}
.intro-copy a,.back,.address{font-size:.9rem}
.rule{border-top:1px solid var(--line);padding:13px 0}
.work-grid,.gallery{display:grid;gap:clamp(14px,2vw,30px);grid-template-columns:repeat(2,minmax(0,1fr))}
.work-item:first-child{grid-column:1/-1}
.work-item>a{display:block;text-decoration:none}
.work-image,.case-hero{overflow:hidden;display:grid;place-items:center;background:#dad5c8;position:relative}
.work-image{aspect-ratio:4/3}
.work-item:first-child .work-image{aspect-ratio:2/1;background:#302823}
.work-image img,.case-hero img{transition:scale .7s cubic-bezier(.2,.72,.2,1),translate .4s ease-out;translate:0 var(--shift,0px)}
.wide-open-spaces img{object-fit:cover;height:100%}
.work-item .wide-open-spaces img{height:100%}
.work-item a:is(:hover,:focus-visible) img,.case-hero:hover img{scale:1.035}
.voice-time .work-image,.case-hero.voice-time{background:#242622}
.open-tabs .work-image,.case-hero.open-tabs{background:#cbd9e4}
.darco .work-image,.case-hero.darco{background:#fff}
.work-image img{max-height:100%;object-fit:contain}
.wide-open-spaces .work-image img{object-fit:cover}
.voice-time .work-image img,.darco .work-image img{width:91%}
.work-caption{display:flex;align-items:end;justify-content:space-between;padding:16px 0 22px;border-bottom:1px solid var(--line);gap:12px}
.work-caption h3,.chapter h2,.next strong{font:400 clamp(2rem,4.1vw,4.6rem)/.96 var(--serif);letter-spacing:-.056em}
.work-caption h3{margin-top:5px}
.arrow,.next span:last-child,.mail span{display:inline-block;transition:transform .3s}
.arrow{font-size:1.8rem}
a:is(:hover,:focus-visible) .arrow,.next:is(:hover,:focus-visible) span:last-child,.mail:is(:hover,:focus-visible) span{transform:translate(4px,-4px)}
.case .back{display:inline-block;border-top:1px solid var(--line);width:100%;padding-top:15px}
.case-intro{padding:clamp(40px,7vw,94px) 0 36px}
.case h1{font-size:clamp(3.4rem,9vw,9.4rem)}
.case-lede{margin-top:25px;max-width:64ch;font-size:clamp(1.07rem,1.6vw,1.45rem)}
.case-hero img{max-height:74vh;object-fit:contain}
.case-hero.wide-open-spaces img{object-fit:cover}
.case-hero.darco img,.case-hero.voice-time img{width:min(96%,1100px)}
.chapter{margin-top:clamp(52px,9vw,130px);border-top:1px solid var(--line);padding-top:22px}
.chapter-head{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:24px}
.chapter-head p{max-width:58ch;font-size:clamp(1rem,1.5vw,1.2rem)}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chapter>figure+.gallery{margin-top:20px}
.gallery figure{min-width:0}
.art{display:grid;place-items:center;background:#e0dbd0;min-height:90px;overflow:hidden;cursor:zoom-in}
.art img{width:100%;max-height:640px;object-fit:contain;transition:transform .4s}
.art:is(:hover,:focus-visible) img{transform:scale(1.035)}
.art:active img{transform:scale(.99)}
figcaption{padding:7px 0;color:#514b42;font-size:.85rem}
.video-grid video{background:#1d1d1b;aspect-ratio:16/9}
details{margin-top:24px;border-block:1px solid var(--line)}
summary{padding:14px 0;cursor:pointer;font-weight:600;transition:color .2s}
summary:hover{color:var(--accent)}
details[open] .gallery{animation:enter .4s ease both}
.text-link{display:inline-block;font-weight:600}
.next{margin-top:clamp(60px,10vw,135px);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;border-block:1px solid var(--line);padding:18px 0;text-decoration:none}
.next .kicker{grid-column:1/-1}
.next span:last-child{font-size:2rem}
footer{margin-top:clamp(50px,8vw,100px)!important;padding-top:30px;padding-bottom:55px;border-top:1px solid var(--line)}
footer a{display:block;width:fit-content}
.mail{font:400 clamp(3rem,8vw,7rem)/1.1 var(--serif);letter-spacing:-.065em;text-decoration:none;margin-block:4px 10px}
.viewer{max-width:min(94vw,1250px);max-height:94vh;border:0;background:var(--paper);padding:12px;color:var(--ink)}
.viewer::backdrop{background:#171713e6}
.viewer[open]{animation:enter .26s ease-out both}
.viewer form{display:flex;justify-content:end;margin-bottom:8px}
.viewer button{font:inherit;padding:.25rem .6rem;border:1px solid var(--line);background:transparent;cursor:pointer}
.viewer img{width:auto;max-width:100%;max-height:76vh;object-fit:contain}
.viewer p{font-size:.85rem;margin-top:6px}
.intro>div,.case-intro{animation:enter .66s ease-out both}
.intro-copy{animation-delay:.09s!important}
[data-reveal].arrived{animation:enter .5s ease-out both}
@keyframes enter{from{opacity:.55;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){
.mast{min-height:70px}.intro,.chapter-head{grid-template-columns:1fr}.intro-copy{max-width:34ch}
.work-grid{grid-template-columns:1fr}.work-item:first-child .work-image{aspect-ratio:4/3}
.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:410px){.kicker{letter-spacing:.06em}.gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.work-image img,.case-hero img{translate:none}.reading-line{display:none}
}
