/* One layout for every case. Content lives in work/case-system/cases/*.json. */
.flag-fi{background-image:url('assets/flag-fi.svg')}
.flag-gb{background-image:url('assets/flag-gb.svg')}
.case-page{--case-gutter:4vw;max-width:1800px;margin:auto}
.case-intro{padding:clamp(42px,6vw,90px) var(--case-gutter) 42px}
.case-back{display:inline-block;margin-bottom:36px;color:#aaa;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.case-back:hover{color:#fff}
.case-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:8vw;align-items:end}
.case-eyebrow{margin:0 0 17px;color:#bcbcb5;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase}
.case-heading h1{max-width:19ch;margin:0;font:400 clamp(3rem,5.8vw,6rem)/.98 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.case-intro-copy{max-width:39ch;margin:0;color:#c5c5be;font-size:.92rem;line-height:1.75}
.case-draft{display:flex;gap:18px;align-items:baseline;margin:0 var(--case-gutter) 28px;padding:14px 0;border-top:1px solid #333;border-bottom:1px solid #333;color:#aaa;font-size:.72rem;line-height:1.65}
.case-draft strong{flex:none;color:#e4e4da;font-size:.65rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500}
.case-draft p{margin:0}
.case-media-section{padding:0 var(--case-gutter) 48px}
.case-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 8vw;margin:0 var(--case-gutter);padding:36px 0;border-top:1px solid var(--line)}
.case-story h2{margin:0;font:400 clamp(1.9rem,3vw,3rem)/1.05 var(--serif);letter-spacing:-.02em}
.case-story p{max-width:56ch;margin:0;color:#bbb;font-size:.95rem;line-height:1.8}
.case-story+.case-media-section{padding-top:36px}
.case-section-heading{margin:0 0 20px;font:400 clamp(1.8rem,2.7vw,2.8rem)/1 var(--serif);letter-spacing:-.02em}
.case-media{margin:0;min-width:0}
.case-frame{position:relative;aspect-ratio:var(--media-ratio,16/9);overflow:hidden;background:#141414;border:1px solid #262626}
.case-frame>img,.case-frame>video{display:block;width:100%;height:100%;object-fit:contain}
.case-frame>iframe{display:block;width:100%;height:100%;border:0}
.case-frame>.case-image-link{height:100%}
.case-frame>.case-image-link img{height:100%;object-fit:contain}
.case-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#eee;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.35))}
.case-placeholder span{font:400 clamp(1.6rem,3vw,3rem)/1 var(--serif)}
.case-placeholder small{max-width:42ch;font-size:.72rem;line-height:1.7;color:#d1d1c9}
.case-media figcaption{display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;color:#aaa;font-size:.69rem;line-height:1.6}
.case-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:0;background:rgba(0,0,0,.2);color:#fff;font:400 .8rem var(--sans);cursor:pointer}
.case-play::before{content:'▶';display:grid;place-items:center;width:60px;height:60px;border:1px solid #aaa;border-radius:50%}
.case-play:hover{background:rgba(0,0,0,.35)}
.case-media-consent{position:absolute;right:18px;bottom:14px;left:18px;margin:0;color:#ddd;font-size:.65rem;line-height:1.5;pointer-events:none;text-align:center}
/* Keep older published pages usable until their HTML is regenerated. */
.case-versions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;max-width:1080px}
.case-versions .case-frame{width:100%}
.case-versions .case-media--portrait{width:100%;max-width:320px}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
.case-gallery .case-media[data-span=full]{grid-column:1/-1}
.case-strip-section{--strip-height:clamp(210px,25vw,350px);--strip-gap:20px;min-width:0}
.case-strip-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;padding-top:24px;border-top:1px solid var(--line)}
.case-strip-heading .case-section-heading{margin:0}
.case-strip-controls{display:flex;align-items:center;gap:8px;flex:none}
.case-strip-controls[hidden]{display:none}
.case-strip-count{min-width:70px;margin-right:12px;color:#aaa;font:400 .68rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.case-strip-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #555;border-radius:50%;background:none;color:#eee;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.case-strip-arrow:hover:not(:disabled){border-color:#eee;background:#eee;color:#111}
.case-strip-arrow:disabled{opacity:.25;cursor:default}
.case-strip{display:flex;gap:var(--strip-gap);align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#555 #161616;padding:0 0 18px;scroll-padding-inline:0;-webkit-overflow-scrolling:touch}
.case-strip::-webkit-scrollbar{height:3px}
.case-strip::-webkit-scrollbar-track{background:#161616}
.case-strip::-webkit-scrollbar-thumb{background:#555}
.case-strip:focus-visible{outline:1px solid #aaa;outline-offset:6px}
.case-strip>.case-media{scroll-snap-align:start;scroll-snap-stop:normal}
.case-strip--films>.case-media{flex:0 0 calc(var(--strip-height) * var(--media-width,1.7777778));width:calc(var(--strip-height) * var(--media-width,1.7777778))}
.case-strip--films .case-frame{height:var(--strip-height);width:100%}
.case-strip--films figcaption{flex-direction:column;gap:2px}
.case-strip--films figcaption>span:first-child{color:#ddd;font-size:.77rem}
.case-strip--films figcaption>span+span{color:#888;font-size:.65rem}
.case-strip--stills>.case-media{flex:0 0 auto;width:max-content}
.case-strip--stills .case-image-link{height:var(--strip-height);width:max-content}
.case-strip--stills .case-image-link img{display:block;height:100%;width:auto;max-width:none;max-height:none}
.case-strip--stills figcaption{max-width:60ch}
.case-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.case-image-link{display:block;position:relative;cursor:zoom-in;background:#121212}
.case-image-link img{height:auto;max-height:850px;object-fit:contain}
.case-image-link::after{content:none}
.case-frame--preview>video,.case-frame--preview>iframe{pointer-events:none}
.case-film-open{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;padding:0;border:0;background:linear-gradient(to top,rgba(8,8,8,.98),rgba(8,8,8,.7) 28px,transparent 82px);color:#fff;cursor:pointer}
.case-film-open-icon{display:grid;place-items:center;width:66px;height:66px;padding-left:4px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(0,0,0,.42);font-size:1rem;transition:transform .22s,background .22s}
.case-film-open-label{position:absolute;bottom:calc(50% + 43px);left:50%;transform:translateX(-50%);padding:5px 8px;border-radius:3px;background:rgba(8,8,8,.82);text-align:center;white-space:nowrap;font:400 .68rem/1.4 var(--sans);letter-spacing:.02em}
.case-film-open:hover .case-film-open-icon{transform:scale(1.12);background:rgba(255,255,255,.93);color:#111}
.case-media--selected .case-frame,.case-media--selected .case-image-link{outline:1px solid #eee;outline-offset:3px}
.case-viewer{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#eee;overflow:hidden}
.case-viewer[open]{display:grid;place-items:center}
.case-viewer::backdrop{background:rgba(0,0,0,.79);backdrop-filter:blur(8px)}
.case-viewer-shell{box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:16px;width:min(1440px,94vw);max-height:94svh;padding:20px 24px;border:1px solid #3b3b3b;background:#0f0f0f;box-shadow:0 24px 100px #0009}
.case-viewer-toolbar{display:flex;align-items:center;gap:20px;min-width:0;color:#aaa;font:400 .67rem/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.case-viewer-toolbar>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.case-viewer-count{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.case-viewer-close{flex:none;min-height:40px;padding:8px 12px;border:1px solid #555;background:none;color:#eee;font:400 .72rem var(--sans);cursor:pointer}
.case-viewer-close:hover{border-color:#eee}
.case-viewer-stage{--stage-height:min(61svh,740px);display:flex;align-items:center;justify-content:center;height:var(--stage-height);min-height:0;background:#080808}
.case-viewer-media{position:relative;flex:none;width:min(100%,calc(var(--stage-height) * var(--viewer-ratio,1.77778)));max-height:100%;aspect-ratio:var(--viewer-ratio,1.77778);transform-origin:center;background:#080808}
.case-viewer-media>img,.case-viewer-media>video,.case-viewer-media>iframe{display:block;width:100%;height:100%;margin:0;border:0;object-fit:contain}
.case-viewer-stage--image{touch-action:pan-y pinch-zoom;cursor:grab}
.case-viewer-stage--image:active{cursor:grabbing}
.case-viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.case-viewer-info{min-width:0}
.case-viewer-info h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font:400 clamp(1.15rem,2vw,1.65rem)/1.12 var(--serif);letter-spacing:-.015em}
.case-viewer-info p{margin:6px 0 0;color:#999;font:400 .67rem/1.5 var(--sans)}
.case-viewer-nav{display:flex;flex:none;gap:8px}
.case-viewer-thumbs{display:flex;position:relative;align-items:stretch;gap:10px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#555 #181818;padding:6px 0 8px;border-top:1px solid #292929}
.case-viewer-thumb{box-sizing:border-box;flex:0 0 104px;min-width:0;padding:4px;border:1px solid transparent;background:none;color:#999;font:400 .6rem/1.35 var(--sans);text-align:left;cursor:pointer;opacity:.62;transition:opacity .16s,border-color .16s}
.case-viewer-thumb:hover{opacity:1}
.case-viewer-thumb[aria-pressed=true]{border-color:#ddd;color:#eee;opacity:1}
.case-viewer-thumb-art{display:grid;place-items:center;height:54px;background:#181818}
.case-viewer-thumb-art img{display:block;width:100%;height:54px;object-fit:contain}
.case-viewer-thumb-number{color:#aaa;font:400 1.6rem/1 var(--serif)}
.case-viewer-thumb-label{display:block;overflow:hidden;margin-top:6px;text-overflow:ellipsis;white-space:nowrap}
.case-viewer :focus-visible{outline:1px solid #eee;outline-offset:3px}
.case-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:32px 8vw;margin:18px var(--case-gutter) 0;padding:46px 0;border-top:1px solid var(--line)}
.case-details h2{margin:0 0 24px;font:400 clamp(1.9rem,3vw,3rem)/1 var(--serif)}
.case-details-heading{grid-column:1/-1;min-width:0}
.case-details p{max-width:50ch;margin:0 0 26px;color:#bbb;line-height:1.8;font-size:.86rem}
.case-details .case-highlight{grid-column:1/-1;display:block;max-width:none;margin:0;color:#eee;font:400 clamp(2.6rem,5.2vw,5.7rem)/1.02 var(--serif);letter-spacing:-.045em;text-wrap:balance}
.case-highlight strong,.case-highlight span{font:inherit;letter-spacing:inherit}
.case-highlight strong{display:inline-block}
@media(min-width:1100px){.case-details .case-highlight{white-space:nowrap;text-wrap:nowrap}}
.case-facts,.case-credits{margin:0}
.case-facts>div,.case-credits>div{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);gap:16px;padding:10px 0;border-bottom:1px solid #222;font-size:.76rem;line-height:1.65}
.case-facts dt,.case-credits dt{color:#999}
.case-facts dd,.case-credits dd{margin:0;color:#ddd;overflow-wrap:anywhere}
.case-pending{display:block;color:#999;font-size:.66rem}
.case-end{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:32px var(--case-gutter) 44px;border-top:1px solid var(--line)}
.case-end a{font-size:.72rem;text-transform:uppercase;letter-spacing:.035em}
.case-end a:last-child{color:#aaa}
.case-pagination{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 var(--case-gutter);padding:28px 0;border-top:1px solid var(--line)}
.case-pagination a{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:72px;padding:8px 0;color:#ddd;transition:color .2s ease}
.case-pagination a:hover{color:#fff}
.case-pagination span{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.case-pagination strong{font:400 clamp(1.5rem,3vw,2.7rem)/1.1 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.case-pagination-next{text-align:right;align-items:flex-end}
.case-page a:focus-visible,.case-page button:focus-visible,.case-lightbox button:focus-visible{outline:1px solid #fff;outline-offset:5px}
.case-lightbox{position:fixed;inset:0;width:min(1400px,94vw);max-width:94vw;max-height:94svh;padding:54px 18px 20px;border:1px solid #444;background:#0b0b0b;color:#eee}
.case-lightbox::backdrop{background:rgba(0,0,0,.94)}
.case-lightbox img{width:100%;max-height:calc(94svh - 125px);object-fit:contain}
.case-lightbox p{margin:14px 0 0;text-align:center;color:#aaa;font-size:.75rem;line-height:1.6}
.case-lightbox button{position:absolute;right:16px;top:12px;min-height:32px;padding:5px 10px;border:1px solid #555;background:none;color:#eee;font:400 .75rem var(--sans);cursor:pointer}
.case-media-error{padding:30px;line-height:1.7;color:#ccc}
@media(max-width:760px){
 .case-page{--case-gutter:20px}
 .case-intro{padding-top:40px;padding-bottom:30px}
 .case-back{margin-bottom:28px}
 .case-heading{grid-template-columns:1fr;gap:26px}
 .case-heading h1{font-size:clamp(2.7rem,11vw,4rem)}
 .case-intro-copy{max-width:48ch;font-size:.88rem}
 .case-draft{display:block;font-size:.71rem}
 .case-draft strong{display:block;margin-bottom:5px}
 .case-media-section{padding-bottom:38px}
 .case-story{grid-template-columns:1fr;gap:20px;padding:30px 0}
 .case-media figcaption{flex-direction:column;gap:3px;font-size:.7rem}
 .case-versions{gap:24px;grid-template-columns:1fr}
 .case-versions .case-frame{max-width:100%}
 .case-versions .case-media--portrait{max-width:100%}
 .case-gallery{gap:24px;grid-template-columns:1fr}
 .case-strip-section{--strip-height:calc((100vw - 64px) * .5625);--strip-gap:12px}
 .case-strip--stills{--strip-height:clamp(180px,58vw,280px)}
 .case-strip-heading{gap:12px;margin-bottom:18px;padding-top:20px}
 .case-strip-count{min-width:53px;margin-right:4px;font-size:.62rem}
 .case-strip-controls{gap:6px}
 .case-film-open-icon{width:48px;height:48px;font-size:.8rem}
 .case-film-open-label{bottom:calc(50% + 30px);padding:3px 6px;font-size:.59rem}
 .case-viewer-shell{gap:12px;width:calc(100vw - 16px);max-height:calc(100svh - 16px);padding:12px}
 .case-viewer-toolbar{gap:12px;font-size:.58rem}
 .case-viewer-close{min-height:36px;padding:7px 10px;font-size:.65rem}
 .case-viewer-stage{--stage-height:min(55svh,600px)}
 .case-viewer-footer{gap:12px}
 .case-viewer-info h2{font-size:1.22rem}
 .case-viewer-info p{font-size:.61rem}
 .case-viewer-nav{gap:6px}
 .case-viewer-thumb{flex-basis:80px;font-size:.55rem}
 .case-viewer-thumb-art,.case-viewer-thumb-art img{height:44px}
 .case-details{grid-template-columns:1fr;align-items:start;gap:40px;padding:34px 0}
 .case-details h2{font-size:2.15rem}
 .case-facts>div,.case-credits>div{font-size:.78rem}
 .case-end{align-items:flex-start;flex-direction:column;gap:24px}
 .case-placeholder{padding:16px;gap:8px}
 .case-placeholder small{font-size:.67rem}
}
@media(max-height:560px){.case-viewer-shell{gap:8px;padding:10px 16px}.case-viewer-stage{--stage-height:min(48svh,calc(100svh - 220px))}.case-viewer-thumb-art,.case-viewer-thumb-art img{height:30px}.case-viewer-thumb-label{margin-top:3px}.case-viewer-info h2{font-size:1.1rem}.case-viewer-info p{display:none}.case-viewer-close{min-height:32px}.case-viewer-nav .case-strip-arrow{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.case-strip-arrow,.case-film-open-icon,.case-viewer-thumb{transition:none}}