/* Case studies: a shared twelve-column reading grid, independent of cover art.
   All original evidence stays in normal page flow. */
.case-reading{background:var(--paper,#f5e8ca);color:var(--ink,#181a18);overflow:visible}
.case-reading-wrap{width:min(calc(100% - 4rem),1240px);margin-inline:auto}
.case-reading-back{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin-block:1rem .5rem;font-weight:650;text-underline-offset:.25em}
.case-reading-header{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem;padding-block:1.8rem 3.5rem;border-bottom:2px solid var(--ink)}
.case-reading-heading{grid-column:1/9;min-width:0}
.case-reading-eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.85rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;margin:0 0 1.25rem}
.case-reading h1{font-size:clamp(3.4rem,6.5vw,6.8rem);line-height:.98;letter-spacing:-.045em;margin:0 0 1.25rem;max-width:13ch;text-wrap:balance;overflow-wrap:normal}
.case-reading h1.domain-name{font-size:clamp(2rem,5.6vw,5.75rem);white-space:nowrap;max-width:none;letter-spacing:-.045em}
.case-reading-deck{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:750;line-height:1.2;max-width:31ch;margin:0 0 1rem}
.case-reading-summary{font-size:1.125rem;line-height:1.65;max-width:56ch;margin:0}
.case-reading-facts{grid-column:10/13;align-self:end;min-width:0}
.case-reading-facts .facts{display:grid;grid-template-columns:1fr;gap:1.15rem;margin:0;padding:0;border:0;font-size:.95rem;line-height:1.5}
.case-reading-facts .facts>div{display:block;min-width:0}
.case-reading-facts dt{font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em;margin-bottom:.2rem}
.case-reading-facts dd{margin:0}
.case-contents{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem;padding-block:1.5rem 2rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.case-contents>p{grid-column:1/4;font-weight:750;font-size:1rem;margin:0}
.case-contents ol{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.5rem;list-style:none;padding:0;margin:0}
.case-contents li{min-width:0}
.case-contents a{display:flex;align-items:baseline;gap:.7rem;padding:.35rem 0;min-height:44px;line-height:1.35;text-decoration:none;font-size:.95rem}
.case-contents a span{font-size:.75rem;font-weight:750;opacity:.65}
.case-contents a:hover{text-decoration:underline;text-underline-offset:.2em}
.case-reading-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem;padding-block:3.5rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent);scroll-margin-top:.5rem;align-items:start}
.case-section-heading{grid-column:1/4;position:sticky;top:calc(var(--site-header-height,84px) + 1.5rem);align-self:start;min-width:0}
.case-section-number{display:block;font-size:.8rem;font-weight:750;letter-spacing:.06em;margin-bottom:.7rem}
.case-section-heading h2{font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.13;letter-spacing:-.025em;margin:0;text-wrap:balance;overflow-wrap:normal;hyphens:none}
.case-section-body{grid-column:5/13;min-width:0}
.case-section-lead{display:block}
.case-section-prose{max-width:66ch;font-size:1.075rem;line-height:1.7}
.case-section-prose p{margin:0 0 1rem}
.case-section-prose p:last-child{margin-bottom:0}
.case-reading-points{list-style:disc;padding-left:1.25rem;margin:1rem 0 0;display:grid;gap:.7rem}
.case-reading-points li{padding-left:.15rem}
.case-reading-points li::marker{color:var(--ink)}
.case-section-lead.has-illustration{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem;align-items:start}
.case-section-illustration{min-width:0;width:100%;max-width:26rem;margin:0 0 1.5rem}
.case-section-illustration .case-comic{margin:0!important;width:100%;max-width:100%;border-width:2px}
.case-section-illustration .vignette-title{font-size:1rem!important;line-height:1.3!important;padding:.7rem .8rem!important}
.case-section-illustration .balloon{font-size:1rem!important;line-height:1.25!important}
.case-reading[data-case="hough-rapid-app"] .case-section-lead.has-illustration{display:block}
.case-reading[data-case="hough-rapid-app"] .case-section-illustration{max-width:21rem}
.case-section-media{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2rem}
.case-section-media .plate{display:block;position:relative;min-width:0;width:100%;max-width:none;margin:0;padding:0;background:transparent;border:0;box-shadow:none;transform:none}
.case-section-media .plate img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;aspect-ratio:auto var(--image-ratio);background:var(--light,#fff8e8)}
.case-section-media .plate figcaption{display:block;font-size:.875rem;line-height:1.5;margin:.65rem 0 0;padding:0;max-width:66ch}
.case-section-media .plate-open{position:absolute;top:.75rem;right:.75rem;background:var(--light,#fff8e8);color:var(--ink);width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.case-section-media .plate-open:hover{background:var(--yellow,#f2c74c)}
.case-section-media.media-pair,.case-section-media.page-design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;align-items:start}
.case-section-media.page-design-grid{padding:0;overflow:visible;scroll-snap-type:none}
.case-section-media.page-design-grid .plate{flex:auto;max-width:none!important;scroll-snap-align:none}
.case-section-media.page-design-grid img{aspect-ratio:auto var(--image-ratio);object-fit:contain}
.other-projects{background:var(--ink,#181a18);color:var(--light,#fff8e8);padding-block:3.5rem 4.5rem;margin-top:1rem}
.other-projects-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.other-projects-heading p{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;margin:0 0 .6rem}
.other-projects-heading h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1;margin:0;letter-spacing:-.03em}
.other-projects-heading>a{min-height:44px;display:flex;align-items:center;gap:1rem;font-weight:650;text-underline-offset:.25em}
.other-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.other-project>a{display:block;color:var(--ink);background:var(--paper,#f5e8ca);border:2px solid var(--light);text-decoration:none;height:100%;transition:transform .2s ease}
.other-project>a:hover{transform:translateY(-4px)}
.other-project-cover{background:var(--light,#fff8e8);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink);overflow:hidden}
.other-project-cover img{display:block;width:100%;height:100%;object-fit:contain;max-width:100%}
.other-project-copy{padding:1.5rem}
.other-project-type{font-size:.8rem;text-transform:uppercase;letter-spacing:.045em;margin:0 0 .65rem;line-height:1.4}
.other-project h3{font-size:clamp(1.65rem,2.5vw,2.1rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 .75rem;overflow-wrap:normal}
.other-project-copy>p:not(.other-project-type){font-size:1rem;line-height:1.5;margin:0;max-width:48ch}
.other-project-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;padding:.7rem 1rem;margin-top:1.5rem;border:2px solid var(--ink);background:var(--orange,#db642c);color:var(--ink);font-weight:750;line-height:1.2;min-height:44px}
.case-reading a:focus-visible{outline:3px solid #31523d;outline-offset:5px}
.other-projects a:focus-visible{outline-color:var(--yellow,#f2c74c)}
@media(max-width:1100px){
 .case-reading-header{column-gap:1.5rem}.case-reading-heading{grid-column:1/9}.case-reading-facts{grid-column:9/13}
 .case-section-lead.has-illustration{display:block}.case-section-illustration{max-width:24rem}
 .case-section-heading h2{font-size:1.8rem}
}
@media(max-width:760px){
 .case-reading-wrap{width:calc(100% - 2rem)}
 .case-reading-header{grid-template-columns:repeat(8,minmax(0,1fr));padding-block:1.5rem 2rem;gap:2rem 1rem}
 .case-reading-heading,.case-reading-facts{grid-column:1/-1}
 .case-reading h1{font-size:clamp(2.7rem,8vw,4.5rem);max-width:16ch}
 .case-reading h1.domain-name{font-size:clamp(2rem,6.9vw,3.7rem);letter-spacing:-.045em}
 .case-reading-deck{font-size:1.5rem}.case-reading-summary{font-size:1.05rem}
 .case-reading-facts .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
 .case-contents{display:block;padding-block:1.5rem}.case-contents>p{margin-bottom:.8rem}
 .case-contents ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1rem}
 .case-reading-section{display:block;padding-block:2.5rem;scroll-margin-top:.5rem}
 .case-section-heading{position:static;margin-bottom:1.5rem}.case-section-heading h2{font-size:2rem;max-width:24ch;text-wrap:pretty}
 .case-section-number{margin-bottom:.5rem}.case-section-prose{font-size:1.05rem;line-height:1.65}
 .case-section-illustration{max-width:25rem}.case-section-media{gap:1.5rem;margin-top:1.5rem}
 .other-projects{padding-block:2.5rem 3rem}.other-projects-heading{align-items:start;flex-direction:column;gap:1rem}.other-project-grid{gap:1.25rem}.other-project-copy{padding:1rem}
 .other-project-cta{font-size:.9rem;gap:.75rem;padding:.65rem .75rem}
}
@media(max-width:520px){
 .case-reading-wrap{width:calc(100% - 2rem)}.case-contents ol{grid-template-columns:1fr}
 .case-section-media.media-pair,.case-section-media.page-design-grid,.other-project-grid{grid-template-columns:1fr}
 .case-reading-facts .facts{font-size:.9rem}.case-reading h1.domain-name{font-size:clamp(1.8rem,7.1vw,2.8rem)}
 .case-section-heading h2{font-size:1.85rem}.case-section-prose{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.other-project>a{transition:none}.other-project>a:hover{transform:none}}
.case-original-video{margin:0;min-width:0;width:fit-content;max-width:100%}
.case-original-video video{display:block;width:auto;height:auto;max-width:100%;max-height:65svh;background:var(--ink);border:1px solid var(--ink)}
.case-original-video figcaption{font-size:.875rem;line-height:1.5;margin-top:.65rem;max-width:66ch}
/* Narrative scenes retain a controlled maximum width; responsive composition
   and full-width evidence blocks are defined in the shared components. */
.case-section-illustration{max-width:32rem;margin-bottom:1.5rem}
@media(max-width:760px){.case-section-illustration{max-width:100%}}
/* Page previews provide a useful overview; the existing magnifier opens every
   original full-length design in the accessible image viewer. */
.case-gallery-instruction{font-size:.925rem;line-height:1.5;margin:1.5rem 0 0}
.case-gallery-instruction+.case-section-media{margin-top:1rem}
.case-section-media.page-design-grid .plate img{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:top}
.case-section-media.page-design-grid .plate figcaption{margin:0 0 .65rem;font-size:1rem;font-weight:750;line-height:1.5}
.case-section-media.page-design-grid .plate-open{top:3rem;right:.75rem}
/* Faithful original motion, kept separate from the illustrative case asides. */
.case-animation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;margin-top:1.5rem}
.case-original-animation{margin:0;min-width:0}.case-original-animation.wide{grid-column:1/-1}
.case-animation-grid>.case-original-video:only-child{grid-column:1/-1}
.original-animation-frame{position:relative;background:#fff;overflow:hidden}
.original-animation-frame>img,.original-animation-frame>[data-animation-stage]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.original-animation-frame [data-animation-stage] svg{display:block;width:100%;height:100%}
.original-animation-frame>[data-animation-stage]{visibility:hidden}
.animation-ready .original-animation-frame>[data-animation-stage]{visibility:visible}
.animation-ready .original-animation-frame>img{visibility:hidden}
.case-original-animation figcaption{padding-top:.6rem;font-size:1rem;line-height:1.5}
.case-launch-pair{grid-template-columns:repeat(2,minmax(0,18rem));align-items:start;gap:2rem}
.case-launch-pair .case-original-video{width:100%}
.case-launch-pair video{width:100%;max-height:none}
@media(max-width:640px){.case-animation-grid{grid-template-columns:1fr}.case-original-animation.wide{grid-column:auto}}
@media(max-width:640px){.case-launch-pair{grid-template-columns:minmax(0,18rem);gap:2rem}.metrics-listening dd{font-size:clamp(2rem,8vw,2.75rem)}}

.case-section-media.page-design-grid .gallery-responsive{grid-column:1/-1}.case-section-media.page-design-grid .gallery-responsive img{aspect-ratio:auto var(--image-ratio);object-fit:contain}