/* Case studies reuse the portfolio's typefaces, navigation, media and palette. */
.case-page{margin:0;background:#faf9f7;color:#181818;font-family:'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased}
.case-page *{box-sizing:border-box}.case-page a{color:inherit;text-decoration:none}.case-page button{font:inherit}.case-page img{max-width:100%;display:block}.case-page figure,.case-page p,.case-page h1,.case-page h2,.case-page h3{margin:0}.case-page :focus-visible{outline:2px solid var(--case-accent);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:2000;padding:12px;background:#fff}.skip-link:focus{top:12px}
.case-layout{max-width:1536px;margin:0 auto;padding:128px 56px 0;display:grid;grid-template-columns:170px minmax(0,1fr);gap:64px}
.case-sidebar{position:sticky;top:112px;align-self:start;font-size:12px;line-height:1.5}.case-home{display:block;color:#777!important;margin-bottom:32px}.case-sidebar-title{font-size:14px;padding-bottom:18px;border-bottom:1px solid #deddd9}.case-sidebar nav{display:flex;flex-direction:column;gap:5px;padding:20px 0}.case-sidebar nav a{padding:8px 10px;margin-left:-10px;color:#777;border-radius:5px;transition:color .2s,background .2s}.case-sidebar nav a:hover,.case-sidebar nav a[aria-current]{color:var(--case-accent);background:var(--case-tint)}.case-top{display:block;margin-top:32px;color:#777!important}
.case-main{min-width:0}.case-hero,.case-section{scroll-margin-top:112px}.case-eyebrow{font-family:'Instrument Sans',sans-serif;font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#777}.case-hero>.case-eyebrow{display:flex;justify-content:space-between}.case-hero h1{font-family:Georgia,serif;font-size:clamp(52px,6.2vw,88px);font-weight:400;line-height:1.06;letter-spacing:-.05em;margin:28px 0 16px}.case-shark .case-hero h1{font-family:'Instrument Sans',sans-serif;font-weight:500;font-size:clamp(48px,5.7vw,76px)}
.case-deck{font-family:'Cooper Lt BT Light',Georgia,serif;font-size:clamp(24px,2.4vw,34px);line-height:1.25;max-width:760px;letter-spacing:-.025em}.case-intro{margin-top:24px!important;max-width:650px;color:#777;font-size:16px;line-height:1.65}.case-meta{display:grid;grid-template-columns:1fr .65fr 1.5fr;gap:24px;border-top:1px solid #deddd9;margin:40px 0 32px;padding-top:20px}.case-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#777;margin-bottom:8px}.case-meta dd{margin:0;font-size:13px;line-height:1.5}
.case-hero-media img,.case-hero-media video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:var(--case-tint);display:block}.case-hero-media figcaption{display:flex;justify-content:space-between;padding-top:12px;font-size:11px;color:#777;gap:16px}.case-hero-media figcaption a:hover{color:var(--case-accent)}
.case-section{padding-top:104px}.case-section>.case-eyebrow{padding-top:22px;border-top:1px solid #deddd9;margin-bottom:30px}.case-editorial{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.case-page h2{font-family:Georgia,serif;font-size:clamp(27px,2.6vw,38px);font-weight:400;line-height:1.17;letter-spacing:-.03em}.case-editorial p{font-family:Bitter,Georgia,serif;font-size:15px;line-height:1.8;color:#62615e}.case-statement{background:var(--case-tint);border-radius:10px;padding:48px}.case-statement .case-eyebrow{color:var(--case-accent)}.case-statement h2{max-width:650px;font-family:'Cooper Lt BT Light',Georgia,serif;font-size:clamp(32px,3.4vw,46px);margin-top:18px;line-height:1.2}
.case-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}.case-number{font-size:11px;color:var(--case-accent);font-family:'Instrument Sans',sans-serif}.case-page h3{font-size:16px;font-weight:500;line-height:1.35}.case-principle h3{margin:16px 0 10px}.case-principle p,.case-details p{font-size:14px;line-height:1.7;color:#777}.case-walkthrough{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:42px;align-items:center}.case-zoom{display:block;padding:0;border:0;background:var(--case-tint);width:100%;text-align:left;cursor:zoom-in;border-radius:10px;overflow:hidden;position:relative}.case-zoom img{width:100%;aspect-ratio:4/5;object-fit:cover}.case-zoom>span{position:absolute;bottom:14px;right:14px;background:#faf9f7ed;border:1px solid #e4e2dd;border-radius:5px;padding:8px 10px;font-size:11px}.case-walkthrough figcaption{font-size:11px;line-height:1.6;color:#777;margin-top:12px}.case-details{list-style:none;padding:0;margin:0}.case-details li{display:grid;grid-template-columns:20px 1fr;gap:14px;padding:24px 0;border-bottom:1px solid #deddd9}.case-details li:first-child{padding-top:0}.case-details h3{margin-bottom:8px}.case-sequence{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid #deddd9;border-radius:10px;overflow:hidden}.case-sequence>div{padding:24px;border-right:1px solid #deddd9}.case-sequence>div:last-child{border:0}.case-sequence p{font-size:14px;margin-top:18px}.case-text-link{display:inline-block;margin-top:24px;border-bottom:1px solid #bbb;padding-bottom:5px;font-size:13px}.case-next{display:grid;grid-template-columns:1fr 240px;gap:40px;align-items:center;border-top:1px solid #deddd9;padding:40px 0;margin-top:100px}.case-next h2{margin:14px 0}.case-next h2 span{font-family:'Instrument Sans',sans-serif;font-size:26px;color:#888}.case-next p{font-size:14px;line-height:1.6;color:#777}.case-next img{width:240px;aspect-ratio:1.55;object-fit:cover;border-radius:10px;transition:transform .25s}.case-next:hover img{transform:translateY(-4px)}
.case-footer{border-top:1px solid #deddd9;margin-top:80px;padding:28px 32px;display:flex;justify-content:space-between;gap:32px;align-items:center}.case-footer>p{font:14px/1.6 Georgia,serif}.case-footer>p span{color:#777}.case-footer>div{display:flex;gap:24px;font-size:13px}.case-lightbox{padding:56px 20px 20px;border:0;background:#faf9f7;border-radius:12px;max-width:95vw;max-height:95vh}.case-lightbox::backdrop{background:#161616d9}.case-lightbox img{max-height:80vh;max-width:85vw;object-fit:contain;margin:auto}.case-close{position:absolute;right:20px;top:16px;border:0;background:none;cursor:pointer;padding:6px}.case-lightbox[open]{display:flex}
@media(min-width:1600px){.case-layout{gap:90px}}
@media(max-width:1100px){.case-layout{padding:110px 32px 0;grid-template-columns:140px minmax(0,1fr);gap:32px}.case-editorial{gap:30px}.case-walkthrough{gap:28px}.case-statement{padding:32px}.case-next{grid-template-columns:1fr 180px}.case-next img{width:180px}}
@media(max-width:809px){.case-layout{display:block;padding:0 20px}.case-sidebar{position:sticky;top:68px;z-index:20;background:#faf9f7f5;backdrop-filter:blur(14px);margin:68px -20px 0;padding:0 20px;border-bottom:1px solid #deddd9}.case-sidebar-title,.case-home,.case-top{display:none}.case-sidebar nav{flex-direction:row;overflow-x:auto;gap:18px;padding:10px 0;scrollbar-width:none}.case-sidebar nav a{white-space:nowrap;margin:0;padding:8px 4px;font-size:11px}.case-main{padding-top:36px}.case-hero,.case-section{scroll-margin-top:150px}.case-hero h1{font-size:52px!important;margin-top:20px}.case-shark .case-hero h1{font-size:42px!important}.case-deck{font-size:25px}.case-intro{font-size:14px}.case-meta{margin-top:28px;gap:16px;grid-template-columns:1fr .55fr 1.3fr}.case-meta dd{font-size:11px}.case-hero-media img,.case-hero-media video{aspect-ratio:1.15}.case-section{padding-top:64px}.case-section>.case-eyebrow{margin-bottom:24px}.case-editorial{grid-template-columns:1fr;gap:20px}.case-editorial p{font-size:14px}.case-page h2{font-size:30px}.case-statement{padding:28px 24px}.case-statement h2{font-size:32px}.case-principles{grid-template-columns:1fr;gap:24px}.case-principle{border-bottom:1px solid #deddd9;padding-bottom:20px}.case-principle h3{margin-top:8px}.case-walkthrough{grid-template-columns:1fr;gap:32px}.case-zoom img{aspect-ratio:1.2;object-fit:cover}.case-sequence{grid-template-columns:1fr}.case-sequence>div{display:flex;align-items:center;gap:20px;border-right:0;border-bottom:1px solid #deddd9;padding:20px}.case-sequence p{margin:0}.case-next{grid-template-columns:1fr 100px;gap:18px;margin-top:64px}.case-next h2{font-size:25px}.case-next img{width:100px;aspect-ratio:1;object-fit:cover}.case-next p{font-size:12px}.case-footer{margin-top:36px;flex-direction:column;align-items:flex-start;padding:24px 20px;gap:20px}.case-footer p{font-size:13px}.case-lightbox{padding:52px 12px 12px}.case-lightbox img{max-width:86vw}}

/* Project openings follow Figma 19:50, with locally hosted native fonts. */
@font-face{font-family:'ABC Areal Mono';src:url('/media/ABCArealMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/media/InstrumentSerif-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.case-opening{width:calc(100% - 142px);max-width:999px;margin:0 auto;padding-top:133px}
.case-opening-label{display:table;padding:10px;border-radius:37px;background:#f0f0f0;font:400 12px/1.25 'ABC Areal Mono',monospace;color:#000}
.case-opening h1{max-width:786px;margin:37px 0 22px;font:400 40px/1.18 'ABC Areal Mono',monospace;letter-spacing:0;color:#000}
.case-opening-subtitle{max-width:786px;font:400 30px/1.2 'Instrument Serif',serif;color:#000}
.case-opening .case-hero-media{margin-top:52px;border-radius:82px;overflow:hidden;background:var(--case-tint)}
.case-opening .case-hero-media img,.case-opening .case-hero-media video{aspect-ratio:999/469;object-fit:contain;border-radius:0;background:var(--case-tint)}
.case-opening .case-meta{margin:40px 0 0;padding-bottom:0}
.case-layout{padding-top:64px}
.case-main>.case-section:first-child{padding-top:0}
.case-shark .case-opening h1{font:400 40px/1.18 'ABC Areal Mono',monospace;letter-spacing:0}
@media(max-width:809px){
.case-opening{width:calc(100% - 40px);padding-top:110px}
.case-opening h1,.case-shark .case-opening h1{font-size:clamp(25px,5vw,36px)!important;margin:28px 0 20px}
.case-opening-subtitle{font-size:26px}
.case-opening .case-hero-media{margin-top:32px;border-radius:clamp(28px,6.4vw,52px)}
.case-opening .case-hero-media img,.case-opening .case-hero-media video{aspect-ratio:1.3}
.case-layout{padding-top:0}.case-sidebar{margin-top:40px;background:#faf9f7f5}
}

/* Compact draggable project scroll control. */
.case-nav-reopen{display:none!important}
.case-scroll-slider{position:fixed;left:18px;z-index:1001;width:44px;height:44px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:ns-resize;touch-action:none;user-select:none}
.case-scroll-slider span{display:block;width:22px;height:2px;border-radius:2px;background:#202020;opacity:.25;pointer-events:none}
.case-scroll-slider span:nth-child(2){width:28px;opacity:.85}
.case-scroll-slider:focus-visible{outline:2px solid #0039a6;outline-offset:2px;border-radius:8px}
@media(max-width:809px){.case-scroll-slider{left:0;width:28px}.case-scroll-slider span{width:12px}.case-scroll-slider span:nth-child(2){width:18px}}

/* Floating project navigation, independent of the article layout. */
.case-layout{display:block;max-width:1141px;padding-inline:71px}
.case-sidebar{position:fixed;top:92px;left:clamp(20px,2.1vw,44px);z-index:90;width:clamp(240px,21.6vw,360px);max-height:calc(100dvh - 116px);overflow-y:auto;margin:0;padding:24px;border:1px solid rgba(255,255,255,.65);border-radius:24px;background:rgba(250,249,247,.72);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:0 12px 44px #302a2014,inset 0 1px 0 #ffffffa6;transition:opacity .24s ease,transform .24s ease,visibility .24s;font-size:13px}
.case-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #18181820;padding-bottom:16px;margin-bottom:20px}
.case-sidebar .case-home{display:block;margin:0;color:#555!important}
.case-nav-dismiss{border:0;background:transparent;color:#777;font-size:22px!important;line-height:1;cursor:pointer;padding:4px}
.case-sidebar-title{display:block;border:0;padding:0;font-size:20px;line-height:1.3}
.case-sidebar nav{display:flex;flex-direction:column;gap:2px;padding:16px 0 0;overflow:visible}
.case-sidebar nav a{font-size:14px;line-height:1.4;padding:7px 10px;margin:0 -10px;border-radius:8px;white-space:normal}
.case-sidebar nav a[aria-current]{background:#ffffff80;color:#181818}
.case-sidebar .case-top{display:block;margin-top:20px;font-size:12px}
.case-sidebar.is-hidden{opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none}
.case-nav-reopen{position:fixed;top:92px;left:clamp(20px,2.1vw,44px);z-index:89;border:1px solid #ffffffa6;border-radius:14px;padding:12px 16px;background:#faf9f7b8;backdrop-filter:blur(24px);color:#333;cursor:pointer;opacity:0;pointer-events:none}
.case-nav-reopen:focus-visible{opacity:1;pointer-events:auto}
@media(max-width:809px){.case-layout{padding:40px 20px 0}.case-main{padding-top:0}.case-sidebar{top:80px;left:16px;width:230px;padding:20px;border-radius:20px;max-height:calc(100dvh - 96px)}.case-sidebar nav{gap:0}.case-sidebar nav a{padding:6px 10px;font-size:13px}.case-nav-reopen{top:80px;left:16px}.case-sidebar-title{font-size:18px}}
@media(prefers-reduced-motion:reduce){.case-sidebar{transition:none}}

/* A centered handle opens the full menu with a gentle spring expansion. */
.case-nav-dock{position:fixed;left:18px;top:50%;width:44px;height:44px;transform:translateY(-50%);z-index:1001}
.case-nav-dock .case-scroll-slider{position:absolute;inset:0;transform:none;border:0;padding:0;background:transparent;cursor:pointer;touch-action:auto;transition:opacity .2s}
.case-nav-dock .case-sidebar{position:absolute;top:50%;left:0;width:clamp(260px,24vw,360px);max-width:calc(100vw - 36px);max-height:calc(100dvh - 48px);margin:0;transform-origin:22px center;transform:translateY(-50%) scale(.12,.09);opacity:0;visibility:hidden;pointer-events:none;border-radius:40px;transition:transform .48s cubic-bezier(.22,1.16,.36,1),opacity .18s ease,border-radius .4s ease,visibility 0s .48s}
.case-nav-dock.is-open .case-sidebar{transform:translateY(-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto;border-radius:24px;transition-delay:0s}
.case-nav-dock.is-open .case-scroll-slider{opacity:0;pointer-events:none}
@media(max-width:809px){.case-nav-dock{left:8px}.case-nav-dock .case-scroll-slider{width:44px}.case-nav-dock .case-sidebar{max-width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){.case-nav-dock .case-sidebar,.case-nav-dock .case-scroll-slider{transition:none}}

/* Project menu unfolds vertically from the Stephen pill. */
.case-sidebar.case-logo-menu{position:fixed;z-index:1002;margin:0;transform-origin:top left;transform:none;opacity:0;visibility:hidden;pointer-events:none;background:color-mix(in srgb,var(--menu-fill,#0039a6) 80%,transparent);color:var(--menu-ink,#fff59d);border:0;border-radius:24px;box-shadow:none;backdrop-filter:blur(4px) saturate(145%);transition:opacity .18s,visibility .18s}
.case-sidebar.case-logo-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.case-logo-menu a,.case-logo-menu .case-home,.case-logo-menu .case-sidebar-title,.case-logo-menu .case-nav-dismiss{color:var(--menu-ink,#fff59d)!important}
.case-logo-menu .case-nav-heading{border-color:currentColor}
.case-logo-menu.is-open>*{animation:menu-copy-in .4s .18s both}
@keyframes menu-copy-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.case-logo-menu.is-open>*{animation:none}}

/* Project navigation uses a light, 70%-transparent glass surface. */
.case-sidebar.case-logo-menu{background:rgba(216,216,216,.4);color:#202020;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.45)}
.case-logo-menu .case-nav-heading{border-color:rgba(32,32,32,.15)}

/* Project typography: Neue Montreal copy with Instrument Sans headings. */
html body.case-page,
html body.case-page *{font-family:'PP Neue Montreal',sans-serif!important}
html body.case-page :is(h1,h2,h3,h4,h5,h6),
html body.case-page :is(h1,h2,h3,h4,h5,h6) *{font-family:'Instrument Sans',sans-serif!important}

/* Neutral background for Outer’s guiding idea. */
.case-outer #direction .case-statement{background:#eeeeee}