.project-link{display:block}.project-link:focus-visible{outline-offset:8px}
.case-main{margin:0 var(--gutter)}
.case-intro{padding-top:42px;padding-bottom:82px}
.case-meta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.case-meta .eyebrow,.back-link{font-size:11px;letter-spacing:2px}
.case-meta p{color:var(--muted)}
.back-link{display:inline-block;transition:color .2s}.back-link:hover{color:#b96985}
.case-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:60px}
.case-title-row h1{font-size:clamp(65px,10.6vw,170px);font-weight:800;letter-spacing:-.08em;line-height:.9;margin-left:-.035em;white-space:nowrap}
.case-type{flex-shrink:0;line-height:1.6;font-size:11px;letter-spacing:2px;padding-bottom:7px}
.film-heading{max-width:1100px;margin:44px auto 17px}.film-heading .eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}
.film-placeholder{max-width:1100px;margin:auto;aspect-ratio:4/3;background:#edeae7;border:1px solid var(--line)}
.case-section{padding:62px 0 74px;border-top:1px solid var(--ink)}
.case-section-heading{display:flex;align-items:baseline;gap:23px}
.section-index{color:#bf748e;letter-spacing:1px;font-size:12px;font-weight:700;flex-shrink:0}
.case-section h2{font-size:clamp(33px,4.9vw,76px);line-height:1;letter-spacing:-.065em;font-weight:800}
.concept-description{font-size:clamp(17px,1.7vw,25px);line-height:1.65;max-width:860px;margin:30px 0 43px;padding-left:41px;letter-spacing:-.2px}
.reference-heading{display:flex;justify-content:space-between;margin-bottom:17px}.reference-heading .eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}
.reference-strip{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/7);gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:10px}
.reference-strip:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
.reference{display:block;scroll-snap-align:start;background:#ece9e5;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in}
.reference img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .2s}.reference:hover img{opacity:.84}
.frames-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:37px}
.frame{display:block;position:relative;background:#eae7e2;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.frame-portrait img{object-fit:contain}
.frame:hover img{transform:scale(1.015)}
.frame-caption{position:absolute;left:18px;bottom:16px;color:#fff;text-shadow:0 1px 5px #0008;font-size:11px}
.frame-expand{position:absolute;right:16px;bottom:13px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:19px;opacity:0;transition:opacity .2s}
.frame:hover .frame-expand,.frame:focus-visible .frame-expand{opacity:1}
.production-table{border-collapse:collapse;width:100%;margin-top:37px;table-layout:fixed;font-size:clamp(15px,1.5vw,22px);line-height:1.5}
.production-table th,.production-table td{text-align:left;padding:20px 0;border-bottom:1px solid var(--line);vertical-align:top}
.production-table thead th{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700;padding-top:0;padding-bottom:17px;text-transform:uppercase}
.production-table th:first-child{width:62%;padding-right:24px}
.production-table tbody th{font-weight:400}.production-table td{letter-spacing:-.3px}
.case-back{margin-top:48px}
.lightbox{border:1px solid var(--line);background:var(--paper);color:var(--ink);width:calc(100% - 40px);max-width:1450px;max-height:calc(100svh - 40px);padding:20px 24px;overflow:auto}
.lightbox::backdrop{background:#181816d9;backdrop-filter:blur(6px)}
.lightbox-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:10px}
.lightbox-toolbar .eyebrow{font-size:10px;letter-spacing:2px}
.lightbox button{background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;min-width:40px;min-height:40px;padding:0}
.lightbox button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lightbox .lightbox-close{font-size:32px;line-height:1}
.lightbox-image{display:block;width:100%;height:calc(100svh - 210px);object-fit:contain}
.lightbox-navigation{display:flex;justify-content:center;gap:36px;margin-top:12px}
.lightbox-navigation button{font-size:28px}
@media(max-width:1000px){.case-type{font-size:9px;letter-spacing:1.4px}.case-section-heading{gap:17px}.concept-description{padding-left:35px}.reference-strip{grid-auto-columns:calc((100% - 36px)/4)}.frames-grid{gap:18px}.case-intro{padding-bottom:60px}.case-section{padding:46px 0 55px}}
@media(max-width:600px){.case-intro{padding-top:27px;padding-bottom:42px}.case-meta{gap:12px}.case-meta .eyebrow{font-size:8px;letter-spacing:1.2px}.case-title-row{margin-top:38px;display:block}.case-title-row h1{font-size:13vw}.case-type{margin-top:17px;font-size:9px;padding:0;letter-spacing:2px}.case-type br{display:none}.case-type br::after{content:' '}.film-heading{margin-top:29px;margin-bottom:12px}.film-placeholder{aspect-ratio:4/3}.case-section{padding:34px 0 40px}.case-section-heading{gap:13px}.section-index{font-size:10px}.case-section h2{font-size:clamp(25px,6.5vw,39px)}.concept-description{font-size:17px;margin:23px 0 29px;padding-left:0}.reference-strip{grid-auto-columns:calc((100% - 24px)/2.25);gap:12px}.reference-heading{margin-bottom:13px}.reference{aspect-ratio:3/4}.frames-grid{grid-template-columns:1fr;gap:16px;margin-top:26px}.frame-expand{opacity:1}.production-table{font-size:14px;margin-top:27px}.production-table th:first-child{width:60%;padding-right:15px}.production-table th,.production-table td{padding-top:16px;padding-bottom:16px}.production-table thead th{font-size:9px;letter-spacing:1.4px}.production-table td{overflow-wrap:anywhere}.case-back{font-size:10px;margin-top:32px;letter-spacing:1.7px}.lightbox{width:calc(100% - 20px);max-height:calc(100svh - 20px);padding:12px}.lightbox-image{height:calc(100svh - 185px)}}
@media(prefers-reduced-motion:reduce){.case-page *{transition:none!important}}
.case-type{max-width:112px}
@media(max-width:600px){.case-type{max-width:none}}

/* Skyscrapers shares the case layout, with five visual references. */
.case-skyscrapers .reference-strip{grid-auto-columns:calc((100% - 48px)/5)}
.frame-placeholder{background:#edeae7;border:1px solid var(--line);cursor:default}
.frame-placeholder .frame-caption{color:var(--muted);text-shadow:none}
@media(max-width:1000px){.case-skyscrapers .reference-strip{grid-auto-columns:calc((100% - 36px)/4)}}
@media(max-width:600px){.case-skyscrapers .reference-strip{grid-auto-columns:calc((100% - 24px)/2.25)}}

/* Skyscrapers portrait frames form one uninterrupted row. */
.case-skyscrapers .frames-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:12px}
.frames-row:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.case-skyscrapers .frames-row .frame{aspect-ratio:1143/2048;scroll-snap-align:start}
.case-skyscrapers .frames-row img{object-fit:contain}
@media(max-width:1000px){.case-skyscrapers .frames-row{grid-auto-columns:43%;gap:16px}}
@media(max-width:600px){.case-skyscrapers .frames-row{grid-auto-columns:76%;gap:14px}}

/* Aesthetic names stay intact; the description uses the full section width. */
.concept-description{max-width:none}
.aesthetic-term{white-space:nowrap}
@media(min-width:901px){.concept-description{white-space:nowrap}}

/* Character studies live within the selected-frames section. */
.character-study{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.character-study h3{font-size:12px;letter-spacing:2.5px}
.character-grid{display:flex;align-items:flex-start;gap:22px;margin-top:22px;max-width:1050px}
.character-grid:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.character-card{flex:var(--character-ratio) 1 0%;min-width:0;margin:0}
.character-preview{display:block;aspect-ratio:var(--character-ratio);background:#f1efec;overflow:hidden;cursor:zoom-in}
.character-preview img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.character-preview:hover img{opacity:.88}
.character-card figcaption{margin-top:11px;font-size:10px;font-weight:400;letter-spacing:.6px;line-height:1.5;color:var(--muted)}
@media(max-width:600px){.character-study{margin-top:34px;padding-top:24px}.character-study h3{font-size:10px}.character-grid{gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:12px}.character-card{flex:0 0 calc(260px * var(--character-ratio));scroll-snap-align:start}.character-card figcaption{font-size:9px;letter-spacing:.4px;margin-top:9px}}

/* Compact final films, preserving the original landscape and portrait ratios. */
.film-block{width:100%;max-width:640px;margin:40px auto 0}
.film-block.film-portrait{max-width:300px}
.film-block .film-heading{max-width:none;margin:0 0 13px}
.film-player{display:block;width:100%;height:auto;background:#171717;border:1px solid var(--line)}
.film-player:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@media(max-width:600px){.film-block{margin-top:29px}.film-block .film-heading{margin-bottom:11px}}