@font-face{font-family:Inter;src:url('./inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--canvas:#f5f3ed;--ink:#17191c;--muted:#666a6d;--accent:#c0e973;--gutter:5.4vw;--measure:72ch;--ease:cubic-bezier(.16,1,.3,1);color-scheme:light;font-family:Inter,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none;font-optical-sizing:auto}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px;scrollbar-color:#93998b var(--canvas);scrollbar-width:thin}body{margin:0}body,button,input,textarea{font-family:Inter,sans-serif}::selection{background:var(--accent);color:var(--ink)}a{color:inherit;text-decoration:none;text-underline-offset:.25em}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}button{color:inherit}img{display:block;width:100%;height:auto}svg{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.16em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.04em;text-wrap:balance}p{line-height:1.5}a:hover .link-label{text-decoration:underline}.frame{width:min(100%,1600px);margin-inline:auto;padding-inline:var(--gutter)}.skip{position:fixed;top:12px;left:12px;z-index:20;transform:translateY(-150%);padding:14px 20px;background:var(--accent)}.skip:focus{transform:none}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}.wordmark{font-size:24px;line-height:1.2;letter-spacing:-.04em;font-weight:650;display:inline-flex;align-items:center;min-height:44px}.desktop-nav{display:flex;gap:40px}.desktop-nav a,.mobile-nav summary,.mobile-nav a{display:inline-flex;align-items:center;min-height:48px;font-size:17px}.desktop-nav a:hover{text-decoration:underline}.mobile-nav{display:none}.action{background:var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:14px 18px;font-size:17px;line-height:1.2;white-space:nowrap;border-radius:1px;transition:background-color .2s var(--ease)}.action:hover{background:#b2dd64}.action svg{transition:transform .25s var(--ease)}.action:hover svg{transform:translateX(3px)}.text-link{display:inline-flex;align-items:center;gap:14px;min-height:48px;font-size:18px;line-height:1.25}.text-link:hover{text-decoration:underline}.source-crop{position:absolute;inset:0;overflow:hidden}.source-crop img{position:absolute;max-width:none;height:auto;width:var(--source-width,100%);left:var(--source-left,0);top:var(--source-top,0);transform-origin:50% 35%}.cover-scandinavian-interiors{--source-width:293.13%;--source-left:-48.1%;--source-top:-59.8%}.cover-winepark{--source-width:123.81%;--source-left:-19.05%;--source-top:-71%}.cover-omicron{--source-width:100%;--source-top:0%}.cover-tiswell{--source-width:100%;--source-top:0%}.cover-teklub{--source-width:100%;--source-top:0%}.cover-red{--source-width:100%;--source-top:0%}.cover-ecrow{--source-width:100%;--source-top:0%}.studio-section{display:grid;grid-template-columns:1.6fr .7fr;gap:clamp(48px,10vw,160px);padding-top:66px;padding-bottom:32px}.studio-statement{max-width:29ch;font-size:clamp(24px,3vw,34px);line-height:1.22;letter-spacing:-.035em}.process{margin-top:14px}.process summary{display:flex;align-items:center;gap:14px;min-height:48px;font-size:19px;list-style:none;cursor:pointer}.process summary::-webkit-details-marker,.mobile-nav summary::-webkit-details-marker{display:none}.process summary svg{width:18px}.process[open] summary svg{transform:rotate(45deg)}.process p{max-width:50ch;margin-top:10px;font-size:17px;color:var(--muted)}.feedback-slot{padding-top:4px}.feedback-slot h2{font-size:20px;line-height:1.3;letter-spacing:-.025em}.feedback-slot p{font-size:16px;color:var(--muted);margin-top:8px}.contact{border-top:1px solid #d7d8cd;padding-top:26px;padding-bottom:34px;margin-top:20px}.contact h2{font-size:clamp(34px,5.3vw,60px);line-height:1.06;letter-spacing:-.04em}.contact .contact-slot{margin-top:14px;font-size:18px;color:var(--muted)}.contact-slot span{display:block;margin-top:6px;font-size:15px}.quiet-footer{font-size:14px;color:var(--muted);padding-block:24px}.not-found{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px}.not-found h1{font-size:clamp(44px,6vw,80px)}

@media(min-width:1600px){:root{--gutter:80px}}

@media(max-width:700px){:root{--gutter:24px}.site-header{padding-top:27px;padding-bottom:0}.wordmark{font-size:21px;min-height:48px}.desktop-nav{display:none}.mobile-nav{display:flex;align-items:center;gap:24px;position:relative}.mobile-nav>a{font-size:16px;min-height:48px;display:inline-flex;align-items:center}.mobile-nav summary{font-size:16px;list-style:none;cursor:pointer}.mobile-nav details{position:relative}.mobile-menu{position:absolute;right:0;top:52px;z-index:5;min-width:170px;background:var(--canvas);border:1px solid #d7d8cd;padding:10px 18px}.mobile-menu a{display:flex;font-size:16px;min-height:48px}.project,.project:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:0}.studio-section{grid-template-columns:1fr;gap:38px;padding-top:54px;padding-bottom:28px}.studio-statement{font-size:27px;line-height:1.25;max-width:27ch}.process summary{font-size:18px}.feedback-slot h2{font-size:20px}.contact{margin-top:12px;padding-top:26px;padding-bottom:36px}.contact h2{font-size:38px;line-height:1.08;max-width:13ch}.contact .contact-slot{font-size:17px}.quiet-footer{font-size:13px}.source-crop img{transition:none}}

@media(max-width:360px){:root{--gutter:20px}.mobile-nav{gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* A separate opening, supplied proof, then comparable work. */
.landing-hero{min-height:calc(100svh - 88px);display:grid;align-items:center;padding-block:48px 64px;position:relative;z-index:0;isolation:isolate}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:20px}
.hero-message{min-width:0;position:relative;z-index:2;background:transparent}
body:has(.hero-orbit) :is(.site-header,.proof,.selected-work,.studio-section,.contact){position:relative;z-index:2}
html:has(.hero-orbit),body:has(.hero-orbit){overflow-x:clip}
.landing-hero h1{font-size:clamp(48px,6.2vw,88px);font-weight:640;line-height:1.02;letter-spacing:-.04em;max-width:14ch}
.landing-hero h1 span{display:block;white-space:normal}
.landing-hero h1 span:last-child{font-weight:420}
.hero-copy{font-size:20px;line-height:1.5;letter-spacing:-.025em;max-width:42ch;margin-top:28px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:28px}
.hero-actions .action{min-height:52px;padding-inline:22px}
.hero-actions .text-link{font-size:17px;min-height:52px}
.hero-orbit{--orbit-duration:120s;--marquee-duration:104s;position:relative;width:100%;max-width:600px;aspect-ratio:1;justify-self:center;isolation:isolate;z-index:0}
.orbit-scene{position:absolute;inset:-50%;contain:layout style}
.orbit-canvas{position:absolute;inset:0;transform:translate(var(--preview-focus-x,0px),var(--preview-focus-y,0px))}
.hero-orbit:not(.is-motion-ready) .orbit-scene{inset:0}
.orbit-ring{position:absolute;inset:8%;transform:rotate(0deg)}
.orbit-item{position:absolute;transform:translate(-50%,-50%);z-index:var(--collage-layer)}
.orbit-upright{transform:rotate(0deg)}
.preview-link{display:block;position:relative;transform:scale(1);transition:transform .25s var(--ease);border-radius:5px}
.preview-link:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.orbit-item:focus-within{z-index:20}
.orbit-preview{position:relative;width:100%;overflow:hidden;transform:rotate(var(--screen-tilt));background:var(--canvas);border:1px solid #aeb2a5;border-radius:5px}
.preview-browser-bar{display:flex;align-items:center;gap:2.1px;height:11.2px;padding-inline:4.2px;background:#e5e7de;border-bottom:1px solid #c8ccc0}
.preview-browser-bar i{display:block;flex:none;width:2.1px;height:2.1px;background:#8b9183;border-radius:50%}
.preview-browser-bar>span{width:42%;height:3.5px;margin-left:8%;background:#cdd2c4;border-radius:1px}
.orbit-screen{position:relative;display:block;aspect-ratio:var(--screen-ratio);overflow:hidden}
.orbit-screen img{position:absolute;max-width:none;width:var(--screen-width);height:auto;left:var(--screen-left);top:var(--screen-top);transform:translateZ(0)}
.preview-mobile{border:1px solid #aeb2a5;border-radius:0}
.preview-mobile .orbit-screen,.preview-link:has(.preview-mobile){border-radius:0}
.orbit-symbol{pointer-events:none}
.collage-symbol{position:relative;display:block;aspect-ratio:1;border-radius:28%;background:#229ed9;padding:21%}
.collage-symbol>img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.brand-whatsapp{background:#25d366;padding:20%}
.brand-github{background:var(--ink);padding:20%}
.brand-figma{background:#fff;padding:0;overflow:hidden}
.brand-figma>img{position:absolute;max-width:none;width:200%;height:200%;top:-50%;left:-50%;filter:none}
.bot-badge{position:absolute;right:-5%;bottom:-5%;display:grid;place-items:center;width:43%;aspect-ratio:1;border-radius:32%;background:var(--accent);color:var(--ink);border:2px solid var(--canvas)}
.bot-badge svg{display:block;width:80%;height:80%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.orbit-marquee{display:none}
.proof{padding-block:64px 72px;border-top:1px solid #d7d8cd}
.proof h2{font-size:32px;line-height:1.2;letter-spacing:-.035em}
.proof-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:40px 0 24px}
.proof-figures>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.proof-figures dt{order:2;max-width:24ch;font-size:18px;line-height:1.4;color:var(--muted);letter-spacing:-.015em}
.proof-figures dd{order:1;margin:0;font-size:clamp(48px,5.5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.proof-figures dd span{font-size:.55em;font-weight:450;letter-spacing:-.025em}
.proof-source{font-size:14px;line-height:1.55;max-width:85ch;color:var(--muted)}
.selected-work{padding-block:64px 30px;scroll-margin-top:28px}
.work-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:32px}
.work-heading h2{font-size:clamp(34px,3.2vw,44px);line-height:1.1}
.all-work{white-space:nowrap}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
.project{min-width:0;display:block}
.project-visual{--cover-ratio:1.6;display:block;aspect-ratio:1.6;overflow:hidden;position:relative;background:#e9e6e0}
.project-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-top:18px}
.project-caption>div{min-width:0}
.project-caption h2{font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.project-caption h2 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.project-category{font-size:17px;line-height:1.4;letter-spacing:-.02em;color:var(--muted);margin-top:8px}
.project-caption .text-link{font-size:16px;min-height:48px;white-space:nowrap;gap:10px;margin-top:-8px}


@media(hover:hover) and (pointer:fine){.project-visual img{transition:transform .5s var(--ease)}.project-visual:hover img{transform:scale(1.025)}}
@media(hover:hover) and (pointer:fine){.preview-link:hover{transform:scale(1.1)}.orbit-item:hover{z-index:20}}
@media(prefers-reduced-motion:no-preference){
 .is-motion-ready .orbit-ring{animation:project-orbit var(--orbit-duration) linear infinite;animation-play-state:paused}
 .is-motion-ready .orbit-upright{animation:project-counter-orbit var(--orbit-duration) linear infinite;animation-play-state:paused}
 .is-orbit-running .orbit-ring,.is-orbit-running .orbit-upright{animation-play-state:running}
 .is-orbit-reduced .orbit-ring,.is-orbit-reduced .orbit-upright{animation:none}
 @keyframes project-orbit{to{transform:rotate(360deg)}}
 @keyframes project-counter-orbit{to{transform:rotate(-360deg)}}
}
@media(max-width:1000px) and (min-width:701px){
 .hero-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
 .landing-hero h1{font-size:clamp(42px,5.8vw,60px)}
 .hero-copy{font-size:18px}
 .hero-actions{gap:12px 20px}
 .hero-actions .action{padding-inline:16px;font-size:16px}
 .hero-actions .text-link{font-size:16px}
 .project-caption{gap:14px}
 .project-category{font-size:16px}
}
@media(max-width:700px){
 .landing-hero{min-height:calc(100svh - 75px);padding-block:24px 28px}
 .hero-layout{grid-template-columns:minmax(0,1fr);gap:8px}
 .landing-hero h1{font-size:clamp(32px,9.5vw,48px);line-height:1.06;max-width:15ch}
 .hero-copy{font-size:18px;line-height:1.45;max-width:34ch;margin-top:20px}
 .hero-actions{gap:10px 24px;margin-top:22px}
 .hero-actions .action{font-size:17px;padding-inline:18px}
 .hero-actions .text-link{font-size:17px}
 .hero-orbit{width:calc(100% + 2 * var(--gutter));max-width:none;height:400px;aspect-ratio:auto;margin-inline:calc(-1 * var(--gutter));justify-self:stretch}
 .orbit-scene{display:none}
 .orbit-marquee{display:block;position:absolute;inset:0;overflow-x:clip;overflow-y:visible}
 .marquee-track{display:flex;width:max-content;height:100%;transform:translateX(0)}
 .marquee-group{display:flex;align-items:center;flex:none;height:100%}
 .marquee-item{position:relative;flex:none;width:var(--marquee-width);margin-right:calc(-1 * var(--marquee-overlap));transform:translateY(var(--screen-offset));z-index:var(--collage-layer)}
 .marquee-item>.preview-link{z-index:1}
 .marquee-item:focus-within{z-index:20}
 .marquee-symbol{position:absolute;right:72px;top:calc(50% + var(--symbol-offset));width:78.4px;translate:0 -50%;z-index:0;pointer-events:none}
 .hero-orbit:not(.is-motion-ready) .orbit-marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
 .hero-orbit:not(.is-motion-ready) .marquee-repeat{display:none}
 .is-keyboard-browsing .orbit-marquee{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:thin}
 .is-keyboard-browsing .marquee-track{animation:none!important;transform:none}
 .is-keyboard-browsing .marquee-repeat{display:none}
.preview-browser-bar{height:12.6px;padding-inline:4.9px;gap:2.8px}
.preview-browser-bar i{width:2.8px;height:2.8px}
 .proof{padding-block:42px 48px}
 .proof h2{font-size:27px;max-width:19ch}
 .proof-figures{grid-template-columns:1fr;gap:30px;margin:30px 0 26px}
 .proof-figures>div{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:18px}
 .proof-figures dd{grid-column:1;grid-row:1;font-size:48px}
 .proof-figures dt{grid-column:2;grid-row:1;max-width:18ch;font-size:17px}
 .proof-source{font-size:14px;max-width:40ch}
 .selected-work{padding-block:46px 10px}
 .work-heading{align-items:center;margin-bottom:26px;gap:16px}
 .work-heading h2{font-size:31px}
 .all-work{font-size:16px;gap:8px}
 .project-list{grid-template-columns:minmax(0,1fr);gap:48px}
 .project.project--desktop-extra{display:none}
 .project-visual{--cover-ratio:1.414;aspect-ratio:1.414;margin-inline:calc(-1 * var(--gutter))}
 .project-caption{display:block;padding-top:22px}
 .project-caption h2{font-size:25px;line-height:1.15}
 .project-category{font-size:17px;line-height:1.35;margin-top:8px}
 .project-caption .text-link{font-size:18px;gap:14px;margin-top:12px}
}
@media(max-width:360px){
 .landing-hero h1{font-size:32px}
 .hero-copy{font-size:17px}
 .proof-figures>div{grid-template-columns:112px minmax(0,1fr);gap:16px}
 .proof-figures dd{font-size:42px}
 .proof-figures dt{font-size:16px}
 .work-heading h2{font-size:28px}
 .project-caption h2{font-size:23px}
 .project-category{font-size:16px}
}
@media(max-height:720px) and (max-width:700px){
 .landing-hero{padding-block:24px 30px}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .is-motion-ready .orbit-ring,.is-motion-ready .orbit-upright{animation:none}
 .is-motion-ready .marquee-track{animation:project-ribbon var(--marquee-duration) linear infinite;animation-play-state:paused}
 .is-orbit-running .marquee-track{animation-play-state:running}
 .is-orbit-reduced .marquee-track{animation:none}
 @keyframes project-ribbon{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
@media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-upright,.marquee-track{animation:none}.orbit-ring,.orbit-upright{transform:none}.preview-link:hover{transform:none}}
.is-orbit-reduced .preview-link:hover{transform:none}

/* Motion stays on independent layers: continuous collage, then scroll depth. */
.project-artwork{position:absolute;inset:0;display:block;transform-origin:50% 50%}
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:10;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.action{transition:background-color 200ms var(--ease),transform 160ms var(--ease)}
.action:active:not(:focus-visible){transform:scale(.97)}
.text-link svg,.next-project>svg{transition:transform 200ms var(--ease)}
@media(hover:hover) and (pointer:fine){
 .text-link:hover svg{transform:translate(2px,-2px)}
 .back-link:hover svg{translate:-3px 0}
 .next-project:hover>svg{transform:translateX(4px)}
}
@media(hover:none){.action:hover svg{transform:none}}
@media(prefers-reduced-motion:no-preference){
 .is-motion-ready .collage-symbol{animation:symbol-drift 8s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
 .is-motion-ready .brand-figma{animation-duration:9s;animation-delay:-3s}
 .is-motion-ready .brand-github{animation-duration:7s;animation-delay:-5s}
 .is-motion-ready .brand-whatsapp{animation-duration:10s;animation-delay:-2s}
 .is-orbit-running .collage-symbol{animation-play-state:running}
 .is-orbit-reduced .collage-symbol{animation:none}
 @keyframes symbol-drift{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(6px) rotate(3deg)}}
}
@media(prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 .action:active:not(:focus-visible),.text-link:hover svg,.next-project:hover>svg{transform:none}
 .back-link:hover svg{translate:none}
}







/* Cases: a compact index and a consistent editorial detail layout. */
.cases-index,.case-page{--cases-width:1280px;--case-section-gap:64px}
.cases-index>.frame,.case-frame{max-width:var(--cases-width)}
.cases-index{padding-bottom:40px}
.cases-index .page-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:32px;padding-block:48px 40px}
.cases-index .page-heading h1{font-size:clamp(48px,5vw,72px);line-height:1.05;font-weight:550}
.cases-index .page-heading p{max-width:38ch;font-size:20px;line-height:1.5;letter-spacing:-.02em}
.cases-index .project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.cases-index .project-visual{margin:0}
.cases-index .project-caption{display:flex;align-items:start;justify-content:space-between;gap:16px;padding-top:16px}
.cases-index .project-caption>div{min-width:0}
.cases-index .project-caption h2{font-size:24px;line-height:1.2;overflow-wrap:break-word}
.cases-index .project-category{font-size:16px;line-height:1.4;margin-top:8px}
.cases-index .project-caption .text-link{font-size:16px;gap:8px;min-height:44px;margin-top:-8px;white-space:nowrap}
.case-top{padding-block:24px 32px}
.case-top .back-link{font-size:16px;min-height:48px;margin-bottom:24px}
.case-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:40px}
.case-top h1{font-size:clamp(40px,5vw,72px);line-height:1.05;font-weight:550;overflow-wrap:break-word}
.case-intro{font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.025em;max-width:34ch}
.case-cover{margin:0}
.case-visual{display:grid;place-items:center;background:var(--preview-bg)}
.case-cover .project-visual{width:100%;margin:0}
.project-visual--preview{--cover-ratio:1.6666667;aspect-ratio:5/3;border-radius:16px;background:var(--preview-background);isolation:isolate}
.project-visual--preview .project-artwork>img{position:absolute;left:50%;top:50%;width:var(--preview-art-width,100%);max-width:none;height:var(--preview-art-height,auto);object-fit:cover;translate:-50% -50%;clip-path:inset(var(--preview-trim-y,0%) var(--preview-trim-x,0%))}
.case-visual:has(.project-visual--preview){background:transparent}
.case-cover--portrait .case-visual{padding:32px}
.case-cover--portrait .project-visual{--cover-ratio:.5;width:216px;max-width:100%}
.case-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:32px;margin:0;padding-block:32px;border-bottom:1px solid #d7d8cd}
.case-facts dt{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:8px}
.case-facts dd{font-size:16px;line-height:1.5;margin:0}
.case-lead,.case-story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:48px}
.case-lead{margin-block:var(--case-section-gap)}
.case-lead h2,.case-story h2,.case-gallery>h2{font-size:28px;line-height:1.2;letter-spacing:-.035em}
.case-text{min-width:0;max-width:72ch}
.case-text p{font-size:18px;line-height:1.65}
.case-text p+p{margin-top:20px}
.case-text strong{font-weight:600}
.case-story{display:grid;gap:48px}
.case-story-row{border-top:1px solid #d7d8cd;padding-top:32px}
.case-gallery{margin-block:var(--case-section-gap)}
.case-gallery>h2{margin-bottom:32px}
.screen-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:48px 32px}
.screen-figure{min-width:0;width:100%;flex:1 1 100%;margin:0}
.screen-figure--portrait,.screen-figure--compact{flex:0 1 360px;max-width:360px}
.screen-window{background:var(--screen-bg)}
.screen-window--long{max-height:min(72svh,720px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#93998b var(--screen-bg)}
.screen-window:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.screen-window img{width:100%;height:auto;cursor:zoom-in}
.case-cover [data-image-viewer]{cursor:zoom-in}
.screen-source{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;margin-top:32px;padding-top:24px;border-top:1px solid #d7d8cd}
.next-project{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #d7d8cd;margin-top:var(--case-section-gap);padding-block:32px 48px}
.next-project>div{min-width:0}
.next-project h2{font-size:clamp(28px,3vw,40px);line-height:1.15;overflow-wrap:break-word}
.next-project span{display:block;font-size:16px;line-height:1.5;color:var(--muted);margin-top:8px}
.next-project svg{width:32px;height:32px}
@media(min-width:701px) and (max-width:1100px){
 .cases-index .project-caption{display:block}
 .cases-index .project-caption .text-link{margin-top:8px}
 .case-heading{gap:32px}
 .case-lead,.case-story-row{gap:32px}
}
@media(max-width:700px){
 .cases-index,.case-page{--case-section-gap:40px}
 .cases-index .page-heading{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:32px}
 .cases-index .page-heading h1{font-size:44px}
 .cases-index .page-heading p{font-size:18px;max-width:32ch}
 .cases-index .project-list{grid-template-columns:minmax(0,1fr);gap:40px}
 .cases-index .project-caption{display:block;padding-top:16px}
 .cases-index .project-caption h2{font-size:24px}
 .cases-index .project-caption .text-link{margin-top:8px}
 .case-top{padding-block:16px 24px}
 .case-top .back-link{margin-bottom:16px}
 .case-heading{grid-template-columns:minmax(0,1fr);gap:16px}
 .case-top h1{font-size:clamp(36px,10vw,44px)}
 .case-intro{font-size:22px;max-width:32ch}
 .case-cover--portrait .case-visual{padding:24px}
 .case-cover--portrait .project-visual{--cover-ratio:.5;width:176px}
 .case-facts{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:24px}
 .case-facts dt{margin-bottom:4px}
 .case-lead,.case-story-row{grid-template-columns:minmax(0,1fr);gap:16px}
 .case-lead h2,.case-story h2,.case-gallery>h2{font-size:24px}
 .case-text p{font-size:17px;line-height:1.6}
 .case-text p+p{margin-top:16px}
 .case-story{gap:32px}
 .case-story-row{padding-top:24px}
 .case-gallery>h2{margin-bottom:24px}
 .screen-grid{gap:32px}
 .screen-figure--portrait,.screen-figure--compact{flex-basis:100%;max-width:360px}
 .screen-window--long{max-height:none;overflow:visible;overscroll-behavior:auto}
 .screen-source{display:block;padding-top:16px;margin-top:24px}
 .next-project{padding-block:24px 32px}
 .next-project h2{font-size:28px}
}

/* Native modal viewer keeps the case and its scroll position in place. */
html.is-image-viewer-open{overflow:hidden;scrollbar-gutter:stable}
.image-viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--canvas);overflow:hidden}
.image-viewer[open]{display:flex;flex-direction:column}
.image-viewer::backdrop{background:rgb(23 25 28 / .92)}
.image-viewer [hidden]{display:none}
.image-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;flex:none}
.image-viewer-toolbar p{min-width:0;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.image-viewer-controls{display:flex;gap:8px;flex:none}
.image-viewer-button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgb(245 243 237 / .35);border-radius:0;background:transparent;color:inherit;cursor:pointer}
.image-viewer-button:hover{background:rgb(245 243 237 / .12)}
.image-viewer-button:focus-visible,.image-viewer-stage:focus-visible,.image-viewer-status button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.image-viewer-button svg{width:24px;height:24px}
.is-zoomed .zoom-plus{display:none}
.image-viewer-stage{display:flex;flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px;scrollbar-width:thin;scrollbar-color:var(--canvas) transparent}
.image-viewer-image{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 128px);margin:auto;object-fit:contain;cursor:zoom-in}
.image-viewer.is-tall:not(.is-zoomed) .image-viewer-image{width:min(100%,var(--viewer-image-width));max-height:none}
.is-zoomed .image-viewer-image{width:var(--viewer-zoom-width);max-width:none;max-height:none;cursor:zoom-out}
.image-viewer-status{position:absolute;bottom:16px;left:24px;right:24px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px;background:var(--ink);color:var(--canvas);font-size:14px;line-height:1.5}
.image-viewer-status button{min-height:44px;padding:8px 12px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;cursor:pointer}
@media(max-width:700px){
 .image-viewer-toolbar{gap:16px;padding:12px 16px}
 .image-viewer-toolbar p{font-size:16px}
 .image-viewer-button{width:44px;height:44px}
 .image-viewer-stage{padding:16px}
 .image-viewer-image{max-height:calc(100dvh - 100px)}
 .image-viewer-status{left:16px;right:16px;bottom:16px;flex-wrap:wrap;gap:8px}
}