/* NIVEO — fælles bestanddele til case-sider.
   Scener tegnes i en 16:9-ramme (.sf) målt i u (1u = 1 % af rammens bredde). Elementer placeres med .at og --x/--y/--w/--h. */
.sf{position:absolute;left:50%;top:50%;width:calc(var(--u)*100);height:calc(var(--u)*56.25);margin:calc(var(--u)*-28.125) 0 0 calc(var(--u)*-50)}
.at{position:absolute;left:calc(var(--u)*var(--x,0));top:calc(var(--u)*var(--y,0));width:calc(var(--u)*var(--w,10));height:calc(var(--u)*var(--h,0))}
.at>img{width:100%;height:auto}
.at:not([style*="--h:"]){height:auto}
@media (orientation:landscape){.at:not([style*="--w:"]){width:max-content}}
.mp-chip,.mh-chip,.mf-facts li{white-space:nowrap}
.scrollhint{position:absolute;right:var(--g);bottom:5vh;z-index:6;display:flex;align-items:center;gap:12px;font:600 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;opacity:calc(.9*(1 - var(--o,0)))}
.scrollhint span{width:1px;height:42px;background:linear-gradient(currentColor,transparent);animation:drip 2s var(--ease-io) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* billedtekst i scenerammen */
.cap2{position:absolute;left:calc(var(--u)*6);bottom:calc(var(--u)*2.4);max-width:calc(var(--u)*62);z-index:6;pointer-events:none;opacity:calc(var(--s,1)*(1 - var(--o,0)));transform:translateY(calc((1 - var(--s,1))*var(--u)*1.4 - var(--o,0)*var(--u)*1))}
.cap2--r{left:auto;right:calc(var(--u)*6);text-align:right}
.cap2__k{font:600 calc(var(--u)*.8)/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:calc(var(--u)*.8)}
.cap2__t{font:800 calc(var(--u)*3.2)/.98 var(--display);letter-spacing:-.04em}
.cap2__t span{display:block;opacity:.5}
.cap2__c{font:600 calc(var(--u)*.8)/1 var(--text);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:calc(var(--u)*1.1)}
.cap2--w{color:#fff}

/* ---------- Portræt (telefon og tablet stående): egne kompositioner ----------
   Rammen er 100pu bred og lige så høj som skærmen. Vandret måles i pu (1pu = 1 % af bredden, begrænset af højden på tablets);
   lodret måles i procent af indholdsfeltet (mellem menuen og billedteksten), så alt tilpasser sig skærmhøjden.
   Elementer får portrætkoordinater: --px --pw (pu) og --py --ph (% af indholdsfeltet). */
@media (orientation:portrait){
  .stage{--pu:min(1vw,.62svh);--u:calc(var(--pu)*2.4);--cap:calc(var(--pu)*34);--hc:calc(100svh - var(--hdr) - var(--cap));--ps:min(var(--pu),calc(var(--hc)/166))}
  .sf{left:50%;top:0;width:calc(var(--pu)*100);height:100%;margin:0 0 0 calc(var(--pu)*-50)}
  .at{left:calc(var(--pu)*var(--px,0));top:calc(var(--hdr) + var(--hc)*var(--py,0)/100);width:calc(var(--pu)*var(--pw,10));height:calc(var(--hc)*var(--ph,0)/100)}
  .at:where([style*="--ph:0;"],[style$="--ph:0"]){height:auto}
  .cap2{left:calc(var(--pu)*6);right:auto;bottom:calc(var(--pu)*7);width:calc(var(--pu)*88);max-width:none;text-align:left}
  .cap2__k{font-size:max(10px,calc(var(--ps)*2.7));margin-bottom:calc(var(--pu)*2)}
  .cap2__t{font-size:calc(var(--ps)*7.8);line-height:.98}
  .cap2__c{font-size:max(10px,calc(var(--ps)*2.5));margin-top:calc(var(--pu)*2)}
  .scrollhint{display:none}
  .stage h1,.stage h2,.stage h3,.stage .cap2__t,.mh-lead span{text-wrap:balance}
}

/* tablet stående: mindre billedtekstfelt og højdefaktor, så typografien står i forhold til bredden */
@media (orientation:portrait) and (min-width:700px){
  .stage{--cap:calc(var(--pu)*28);--ps:min(var(--pu),calc(var(--hc)/138))}
}

/* ---------- flatview til case-sider (mobil / reduceret bevægelse) ---------- */
.fvb{--fb:#fff;--ff:#0b0d10;background:var(--fb);color:var(--ff);padding:clamp(64px,11vw,130px) 0;overflow:hidden}
.fvb__k{font:600 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:22px}
.fvb__t{font:800 clamp(34px,10vw,88px)/.95 var(--display);letter-spacing:-.045em;margin-bottom:clamp(24px,5vw,48px)}
.fvb__t span{display:block;opacity:.5}
.fvb img{height:auto}

/* ---------- case-afslutning (tilbage til forrige/næste) bruger base.css ---------- */

/* tablet stående: tags i ét spor, så der ikke står enlige piller */
@media (orientation:portrait) and (min-width:700px){
  .stage .oh-tags li,.stage .vh-tags li{font-size:max(11px,calc(var(--ps)*2.1));padding:calc(var(--ps)*1.8) calc(var(--ps)*2);letter-spacing:.04em;white-space:nowrap;flex:none}
  .stage .oh-tags{gap:calc(var(--ps)*1.2);flex-wrap:nowrap}
  .stage .vh-tags{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:calc(var(--ps)*1.4)}
}