:root{color-scheme:dark;--paper:#171919;--ink:#f5f1e8;--muted:#bfc2bb;--line:#f5f1e82b}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.project-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border-bottom:1px solid var(--line);font-size:14px}
.project-home{font-size:20px;font-weight:600;letter-spacing:-.04em}.page-language{display:flex;gap:8px}.page-language button{border:0;background:transparent;color:var(--muted);font:inherit;padding:8px;cursor:pointer}.page-language button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.project-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - 86px)}
.project-visuals{min-width:0;padding:24px 0 24px 24px;display:flex;align-items:center;align-self:start;min-height:calc(100svh - 86px)}
figure{margin:0;width:100%}figure img{display:block;width:100%;height:auto;border-radius:4px}
.project-story{padding:clamp(40px,6vw,100px);min-width:0;align-self:start;position:sticky;top:0}
.project-story-inner{max-width:560px}.project-kicker{font-size:12px;letter-spacing:.12em;color:var(--muted);margin:0 0 30px}
h1{font-size:clamp(38px,4.5vw,76px);line-height:1.04;letter-spacing:-.055em;font-weight:500;margin:0 0 40px;overflow-wrap:anywhere}
dl{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:0 0 56px;padding-top:20px;border-top:1px solid var(--line)}dt{font-size:12px;color:var(--muted);margin-bottom:10px}dd{font-size:15px;margin:0;line-height:1.5}
h2{font-size:18px;font-weight:500;margin:0 0 14px}#project-overview{font-size:17px;line-height:1.7;color:var(--muted);margin:0}
.project-actions{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px;font-size:14px;line-height:1.5}
.project-page-footer{display:flex;justify-content:space-between;gap:24px;padding:24px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@media(max-width:800px){.project-nav{padding:18px 16px;gap:12px}.project-home{font-size:17px}.project-nav>a:nth-child(2){font-size:12px}.project-layout{grid-template-columns:1fr;min-height:auto}.project-visuals{min-height:0;padding:16px}.project-story{position:static;padding:32px 20px 48px}.project-story-inner{max-width:none}h1{font-size:clamp(38px,9vw,64px)}dl{margin-bottom:36px}.project-actions{margin-top:40px}.project-page-footer{padding:22px 20px;flex-wrap:wrap}}

/* Horizontal case-study gallery with an anchored desktop introduction. */
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.project-nav,.project-page-footer{flex:none}
.project-layout{display:flex;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper)}
.project-story{position:sticky;left:0;top:auto;z-index:2;flex:0 0 38vw;max-width:560px;height:100%;overflow-y:auto;background:var(--paper);padding:clamp(24px,3vw,52px);border-right:1px solid var(--line)}
.project-story h1{font-size:clamp(32px,3.8vw,64px);margin-bottom:28px}
.project-story dl{margin-bottom:32px}.project-actions{margin-top:32px}
.project-visuals{flex:none;width:max-content;min-height:0;height:100%;padding:24px;gap:24px;align-self:auto;align-items:stretch}
.project-visuals figure{flex:0 0 auto;width:80vw;height:100%;display:flex;align-items:center;justify-content:center}
.project-visuals figure img{width:100%;height:100%;object-fit:contain}
.project-scroll-hint{font-size:11px;color:var(--muted);white-space:nowrap}
.project-layout:focus-visible{outline:1px solid var(--muted);outline-offset:-2px}
@media(max-width:800px){
 .project-story{position:relative;left:auto;flex-basis:88vw;max-width:none;padding:24px;height:100%}
 .project-visuals{padding:16px;gap:16px}.project-visuals figure{width:90vw}
 .project-page-footer{padding:12px 16px;gap:8px 16px;font-size:10px}.project-scroll-hint{font-size:10px}
}