.case-page {
  --paper: #111;
  --ink: #f5f2ef;
  --accent: #efd8ae;
  background: var(--paper);
  color: var(--ink);
}
.theme-project-title-5 { --paper:#080807; --ink:#f5eee0; --accent:#ecb45a; }
.theme-project-title-1 { --paper:#efefeb; --ink:#151714; --accent:#464d42; }
.theme-project-title-3 { --paper:#080f24; --ink:#eef1fb; --accent:#afc8ff; }
.theme-project-title-4 { --paper:#293631; --ink:#f1f4ed; --accent:#c5d9c0; }
.theme-project-title-6 { --paper:#f6e6e6; --ink:#281f24; --accent:#79513e; }
.theme-them { --paper:#09090a; --ink:#e9e8e7; --accent:#e7b1a6; }
.case-page header,.case-page footer {color:#fff}
.case-study {width:min(1400px,89%);margin:auto}
.case-opening {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:center;padding:clamp(42px,6vw,100px) 0}
.case-study h1,.case-study h2,.case-study h3 {font-family:Proxima,Arial,sans-serif;line-height:1.08;letter-spacing:-.035em;font-weight:600}
.case-study h1 {font-size:clamp(44px,4.8vw,86px);margin:14px 0 24px;color:var(--accent)}
.case-meta {font:16px Din,Arial,sans-serif}
.case-study p {font-size:clamp(17px,1.28vw,21px);line-height:1.55;max-width:78ch;margin:12px 0;text-wrap:pretty}
.case-links {display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.case-links a,.paging a {text-underline-offset:5px;text-decoration-thickness:1px}
.case-links a:hover,.paging a:hover {color:var(--accent)}
.case-section {border-top:1px solid color-mix(in srgb,var(--ink) 19%,transparent);padding:clamp(42px,5vw,76px) 0}
.case-section h2 {font-size:clamp(32px,3.6vw,62px);color:var(--accent);margin:0 0 24px}
.case-section h3 {font-size:clamp(23px,2vw,34px);margin:32px 0 12px}
.art-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(14px,2vw,30px);margin:28px 0 0}
.art-grid.count-1 {display:block;max-width:950px}
.art-grid.count-3,.art-grid.photographic {grid-template-columns:repeat(3,minmax(0,1fr))}
.art-figure,.photographic .still-link {display:block;width:fit-content;max-width:100%;overflow:hidden;cursor:zoom-in}
.art-figure img,.photographic img {display:block;max-width:100%;width:auto;height:auto;max-height:80vh;margin:0}
.art-figure:focus-visible,.still-link:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
.case-study .paging {padding:32px 0 55px;border-top:1px solid color-mix(in srgb,var(--ink) 19%,transparent)}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .art-figure img,.still-link img {transition:transform 2.2s cubic-bezier(.14,.4,.09,.99)}
 .art-figure:hover img,.still-link:hover img {transform:scale(1.08)}
}
@media(max-width:760px){
 .case-study {width:89%}
 .case-opening {grid-template-columns:1fr;gap:24px}
 .opening-copy {grid-row:1}
 .art-grid,.art-grid.count-3,.art-grid.photographic {grid-template-columns:1fr}
 .case-section {padding:36px 0}
 .art-figure img,.photographic img {max-height:75svh}
}

/* The authored poster is composed of independently positioned type and artwork.
   Percentage bounds share the original board's aspect ratio at every width. */
.case-study:has(.original-layout) { width:100%; max-width:1920px; }
.project-resources { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; padding:15px clamp(16px,5vw,90px); background:#111; color:#eee; font-size:15px; }
.project-resources .case-links {margin:0;}
.project-resources .case-meta {font-size:14px; color:#ccc}
.layout-switch { margin-left:auto; width:auto; padding:5px 11px; border:1px solid #666; border-radius:20px; color:inherit; background:transparent; font-size:14px; }
.layout-switch:hover,.layout-switch[aria-pressed=true] {background:#363636}
.original-layout { position:relative; container-type:inline-size; isolation:isolate; }
.original-layout:not(.reading) { aspect-ratio:var(--sheet-ratio); }
.paper-layers { position:absolute; inset:0; pointer-events:none; }
.paper-layers img { display:block; width:100%; height:auto; }
.original-layout:not(.reading) :is(.case-opening,.case-section,.art-grid,.opening-copy) { display:contents; }
.original-layout:not(.reading) :is(h1,h2,h3,p:not(.typeset)) {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;}
.original-layout:not(.reading) .typeset { position:absolute; margin:0; padding:0; max-width:none; overflow:hidden; background-image:var(--lettering); background-size:100% 100%; color:transparent; font:var(--type-size)/1.08 Arial,sans-serif; z-index:2; }
.original-layout:not(.reading) .typeset::selection {background:#74a8d790;color:#101010}
.original-layout:not(.reading) .plate {position:absolute; display:block; margin:0; max-width:none; z-index:1;}
.original-layout:not(.reading) .plate img {width:100%;height:100%;max-height:none;max-width:none;}
.original-layout.reading,.case-study > .case-section,.case-study > .paging {width:min(1400px,89%);margin-inline:auto;}
.original-layout.reading .paper-layers { display:none; }
.original-layout.reading .plate {width:fit-content!important;height:auto!important}
.original-layout.reading .typeset {width:auto!important;height:auto!important;}
@media(max-width:700px) {
 .project-resources {gap:8px 16px;}
 .project-resources .case-links {font-size:14px;gap:8px 14px;}
}
.original-layout.reading .typeset {background-image:none!important}

/* Captioned plates retain their fixed type layer. Only individual illustrations move. */
.original-layout:not(.reading) .mixed-plate:hover > img {transform:none}
.image-window {display:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .original-layout:not(.reading) .image-window {
   display:block;position:absolute;overflow:hidden;pointer-events:none;opacity:0;
 }
 .image-window > span {
   display:block;width:100%;height:100%;background-repeat:no-repeat;
   transition:transform 2.2s cubic-bezier(.14,.4,.09,.99);
 }
 .mixed-plate:hover .image-window {opacity:1}
 .mixed-plate:hover .image-window > span {transform:scale(1.08)}
}

/* Each independently framed illustration has its own focus target and viewer asset. */
.split-plate {position:relative}
.split-plate > .plate-overview,.individual-art {position:absolute;display:block;cursor:zoom-in}
.plate-overview {inset:0}
.individual-art {overflow:hidden}
.individual-art > span {display:block;width:100%;height:100%;background-size:100% 100%;opacity:0}
.case-study .split-plate:hover > img {transform:none}
.individual-art:focus-visible,.plate-overview:focus-visible {outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .individual-art > span {transition:transform 2.2s cubic-bezier(.14,.4,.09,.99),opacity .15s}
 .individual-art:hover > span {transform:scale(1.08);opacity:1}
}
.individual-art.shared-caption:hover > span {opacity:0;transform:none}