.portfolio-case-root{ color-scheme:light; --line:#d4d4d4; --muted:#737373; }.portfolio-case-root *{ box-sizing:border-box; }.portfolio-case-root{ scroll-behavior:smooth; scroll-padding-top:90px; }.portfolio-case-root{ margin:0; color:#111; background-color:#fff; background-image:linear-gradient(#eee8 1px,transparent 1px),linear-gradient(90deg,#eee8 1px,transparent 1px); background-size:10px 10px; font:18px/1.6 "Inter Display",Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }.portfolio-case-root a{ color:inherit; text-underline-offset:4px; }.portfolio-case-root a:focus-visible{ outline:2px solid #555; outline-offset:5px; }.portfolio-case-root h1,.portfolio-case-root h2,.portfolio-case-root p,.portfolio-case-root figure,.portfolio-case-root dl,.portfolio-case-root dd{ margin:0; }.portfolio-case-root h1,.portfolio-case-root h2{ font-family:"LT Superior Serif Regular",Georgia,serif; font-weight:400; letter-spacing:-.04em; line-height:1.08; }.portfolio-case-root .skip-link{ position:fixed; left:15px; top:-80px; z-index:30; padding:12px; background:white; }.portfolio-case-root .skip-link:focus{ top:10px; }.portfolio-case-root .case-header{ position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; min-height:66px; padding:10px max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); background:#fffffff2; backdrop-filter:blur(16px); font-size:16px; }.portfolio-case-root .wordmark{ font-size:21px; letter-spacing:-.8px; text-decoration:none; white-space:nowrap; }.portfolio-case-root .case-header nav{ display:flex; padding:3px; gap:2px; border:1px solid #ddd; border-radius:11px; background:linear-gradient(#eee,#fafafa); box-shadow:inset 0 1px 2px #0001; }.portfolio-case-root .case-header nav a{ padding:3px 13px; border-radius:7px; text-decoration:none; }.portfolio-case-root .case-header nav a:first-child{ background:linear-gradient(#666,#191919); color:white; box-shadow:inset 0 1px 1px #fff8,0 2px 3px #0005; }.portfolio-case-root .header-contact{ justify-self:end; }.portfolio-case-root .chrome-button{ display:inline-flex; align-items:center; width:fit-content; padding:8px 16px; border:1px solid #bcbcbc; border-radius:10px; background:linear-gradient(#fff 5%,#eee 45%,#d2d2d2 51%,#e4e4e4); color:#222; box-shadow:inset 0 1px 1px #fff,0 3px 7px #0003; font-size:16px; line-height:1.4; text-decoration:none; transition:transform .15s; }.portfolio-case-root .chrome-button:hover{ transform:translateY(-2px); }.portfolio-case-root .case-shell{ padding-top:58px; max-width:1200px; margin:auto; border-inline:1px solid var(--line); background:white; }.portfolio-case-root .case-intro{ padding:48px 48px 44px; }.portfolio-case-root .back-link{ display:inline-block; color:var(--muted); font-size:14px; text-decoration:none; margin-bottom:52px; }.portfolio-case-root .case-title{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; margin-bottom:22px; }.portfolio-case-root .case-title img{ object-fit:contain; width:44px; height:44px; }.portfolio-case-root h1{ font-size:clamp(48px,7vw,88px); max-width:100%; overflow-wrap:break-word; }.portfolio-case-root .case-summary{ max-width:720px; font-size:clamp(20px,2.4vw,28px); line-height:1.45; letter-spacing:-.5px; margin:24px 0 28px; }.portfolio-case-root .case-facts{ display:grid; grid-template-columns:1.4fr .7fr 1fr; border-block:1px solid var(--line); }.portfolio-case-root .case-facts > div{ padding:24px 32px; min-width:0; }.portfolio-case-root .case-facts > div+div{ border-left:1px solid var(--line); }.portfolio-case-root dt,.portfolio-case-root .eyebrow{ font-size:13px; letter-spacing:.02em; color:var(--muted); }.portfolio-case-root dd{ margin-top:8px; font-size:16px; overflow-wrap:anywhere; }.portfolio-case-root .case-facts a{ text-decoration:none; }.portfolio-case-root .case-media{ padding:32px; border-bottom:1px solid var(--line); }.portfolio-case-root .case-media > img{ display:block; width:100%; height:auto; max-height:760px; object-fit:contain; object-position:center; border:1px solid #ddd; border-radius:14px; background:#f7f7f7; box-shadow:0 4px 14px #0001; }.portfolio-case-root figcaption{ margin-top:14px; font-size:13px; color:var(--muted); }.portfolio-case-root .case-narrative{ display:grid; grid-template-columns:270px minmax(0,1fr); }.portfolio-case-root .case-scope{ padding:45px 32px; border-right:1px solid var(--line); }.portfolio-case-root .case-scope ul{ list-style:none; padding:0; margin:18px 0 0; font-size:15px; }.portfolio-case-root .case-scope li{ padding:11px 0; border-bottom:1px solid #eee; }.portfolio-case-root .case-chapter{ padding:44px 48px; }.portfolio-case-root .case-chapter+.case-chapter{ border-top:1px solid var(--line); }.portfolio-case-root .chapter-label{ display:flex; align-items:baseline; gap:20px; margin-bottom:24px; }.portfolio-case-root .chapter-label > span{ color:#999; font-size:12px; }.portfolio-case-root .case-chapter h2{ font-size:36px; }.portfolio-case-root .chapter-copy p+p{ margin-top:20px; }.portfolio-case-root .chapter-copy{ max-width:670px; }.portfolio-case-root .case-next{ padding:40px 48px; border-top:1px solid var(--line); }.portfolio-case-root .case-next > a{ display:flex; justify-content:space-between; align-items:center; gap:20px; text-decoration:none; margin:14px 0 8px; }.portfolio-case-root .case-next h2{ font-size:44px; }.portfolio-case-root .case-next > a > span{ font-size:34px; }.portfolio-case-root .case-next p{ font-size:14px; color:var(--muted); }.portfolio-case-root .case-footer{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr; padding:50px 48px; gap:48px; background:#080808; color:white; border:1px solid #333; }.portfolio-case-root .case-footer h2{ font-size:clamp(40px,5vw,62px); margin:18px 0 26px; }.portfolio-case-root .case-footer .eyebrow{ color:#999; }.portfolio-case-root .footer-contact{ align-self:end; color:#aaa; font-size:16px; }.portfolio-case-root .footer-contact > a{ display:block; color:#eee; margin-top:24px; }.portfolio-case-root .case-socials{ display:flex; gap:12px; margin-top:25px; }.portfolio-case-root .social-button{ width:48px; height:48px; border:1px solid #444; border-radius:11px; background:linear-gradient(135deg,#333,#111 65%,#292929); box-shadow:inset 0 2px 2px #fff4,0 3px 5px #000; }.portfolio-case-root .social-button img{ width:100%; height:100%; }.portfolio-case-root .case-next .more-work-heading{ display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.portfolio-case-root .more-work-heading h2{ margin-top:9px; }.portfolio-case-root .rail-controls{ display:flex; gap:8px; }.portfolio-case-root .rail-controls button{ width:44px; height:44px; border:1px solid #ccc; border-radius:10px; background:linear-gradient(#fff,#eee); color:#222; font-size:22px; cursor:pointer; box-shadow:inset 0 1px 0 white,0 2px 4px #0001; }.portfolio-case-root .rail-controls button:disabled{ opacity:.3; cursor:default; box-shadow:none; }.portfolio-case-root .more-work-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/3); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:2px; padding:2px 2px 14px; scrollbar-width:thin; scrollbar-color:#ccc transparent; overscroll-behavior-x:contain; }.portfolio-case-root .more-work-card{ display:block; min-width:0; scroll-snap-align:start; border:1px solid #ddd; border-radius:14px; overflow:hidden; text-decoration:none; background:white; box-shadow:0 3px 7px #0001; transition:transform .18s; }.portfolio-case-root .more-work-card:active{ transform:scale(.985); }.portfolio-case-root .more-work-cover{ aspect-ratio:1.4; overflow:hidden; background:#eee; border-bottom:1px solid #ddd; }.portfolio-case-root .more-work-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }.portfolio-case-root .more-work-copy{ display:grid; grid-template-columns:1fr auto; align-items:baseline; padding:14px; gap:6px; }.portfolio-case-root .more-work-copy h3{ font:500 17px/1.3 "Inter Display",Inter,sans-serif; margin:0; letter-spacing:-.4px; }.portfolio-case-root .more-work-copy p{ grid-column:1/-1; font-size:12px; line-height:1.5; color:var(--muted); }.portfolio-case-root .reveal-pending{ opacity:.6; transform:translateY(12px); transition:opacity .25s ease,transform .25s ease; }.portfolio-case-root .reveal-pending.is-visible{ opacity:1; transform:none; }.portfolio-case-root .case-intro h1{ animation:case-arrive .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes case-arrive {from{ opacity:.6; transform:translateY(8px); }to{ opacity:1; transform:none; } }
@media(hover:hover) {.portfolio-case-root .more-work-card:hover .more-work-cover img{ transform:scale(1.025); } }
@media(max-width:700px) {.portfolio-case-root{ font-size:17px; }.portfolio-case-root .case-header{ padding:8px 16px; grid-template-columns:1fr auto; gap:8px; min-height:56px; }.portfolio-case-root .wordmark{ font-size:19px; }.portfolio-case-root .case-header nav{ font-size:14px; }.portfolio-case-root .case-header nav a{ padding:4px 10px; }.portfolio-case-root .header-contact{ display:none; }.portfolio-case-root .case-shell,.portfolio-case-root .case-footer{ margin-inline:8px; }.portfolio-case-root .case-intro{ padding:28px 20px 30px; }.portfolio-case-root .back-link{ margin-bottom:34px; }.portfolio-case-root .case-title{ margin-bottom:18px; font-size:13px; }.portfolio-case-root h1{ font-size:48px; }.portfolio-case-root .case-summary{ font-size:22px; margin-top:18px; }.portfolio-case-root .case-facts{ grid-template-columns:.8fr 1.2fr; }.portfolio-case-root .case-facts > div{ padding:17px 20px; }.portfolio-case-root .case-facts > div:first-child{ grid-column:1/-1; }.portfolio-case-root .case-facts > div+div{ border-left:0; border-top:1px solid #eee; }.portfolio-case-root .case-facts > div:last-child{ border-left:1px solid #eee; }.portfolio-case-root .case-facts dt{ font-size:12px; }.portfolio-case-root .case-facts dd{ margin-top:4px; font-size:15px; }.portfolio-case-root .case-media{ padding:20px 12px; }.portfolio-case-root .case-media > img{ border-radius:8px; }.portfolio-case-root figcaption{ padding-inline:6px; font-size:12px; }.portfolio-case-root .case-narrative{ grid-template-columns:1fr; }.portfolio-case-root .case-scope{ padding:24px 20px; border-right:0; border-bottom:1px solid var(--line); }.portfolio-case-root .case-scope ul{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }.portfolio-case-root .case-scope li{ padding:5px 9px; border:1px solid #ddd; border-radius:6px; font-size:12px; }.portfolio-case-root .case-chapter{ padding:30px 20px; }.portfolio-case-root .case-chapter h2{ font-size:30px; }.portfolio-case-root .chapter-label{ gap:12px; margin-bottom:18px; }.portfolio-case-root .case-next{ padding:30px 20px; }.portfolio-case-root .case-next h2{ font-size:36px; }.portfolio-case-root .case-footer{ grid-template-columns:1fr; padding:34px 20px; gap:36px; }.portfolio-case-root .case-socials{ flex-wrap:wrap; gap:10px; }.portfolio-case-root .social-button{ width:44px; height:44px; }.portfolio-case-root .case-next{ padding-inline:16px; }.portfolio-case-root .more-work-rail{ grid-auto-columns:84%; gap:14px; padding-bottom:14px; }.portfolio-case-root .case-next h2{ font-size:34px; }.portfolio-case-root .more-work-cover{ aspect-ratio:1.5; }.portfolio-case-root .more-work-copy{ padding:14px; min-height:92px; }.portfolio-case-root .rail-controls button{ width:40px; height:44px; }
}
@media(prefers-reduced-motion:reduce) {.portfolio-case-root{ scroll-behavior:auto; }.portfolio-case-root .chrome-button,.portfolio-case-root .more-work-card,.portfolio-case-root .more-work-cover img,.portfolio-case-root .reveal-pending{ transition:none; }.portfolio-case-root .case-intro h1{ animation:none; }.portfolio-case-root .reveal-pending{ opacity:1; transform:none; } }
@media(max-width:360px) {.portfolio-case-root .case-socials{ gap:6px; } }

.portfolio-case-root {color:#111; font:18px/1.6 "Inter Display",Inter,Arial,sans-serif; --line:#d4d4d4; --muted:#737373;}