/* DANIEL GOL — WET ARCHIVE Nº 01
   Editorial kapitler · farve-takeovers på scroll · Didot-cinematografi
   Palette trukket af koi-kampagnen: pool-turkis, koi-rust, creme, signalrød */

:root{
  --serif:"Didot","Bodoni 72","Playfair Display",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --red:#e8250e;
  --amber:#ffb648;
}

/* ── tema-motor: baggrunden skifter når kapitlet krydser midten ── */
body[data-theme="dark"]{
  --bg:#04120d; --fg:#ecdfc8; --fg-dim:rgba(236,223,200,.45);
  --acc:#e8250e; --line:rgba(236,223,200,.16); --tile:#08201a;
}
body[data-theme="pool"]{
  --bg:#0f7a5c; --fg:#f3ead6; --fg-dim:rgba(243,234,214,.55);
  --acc:#ff3d1a; --line:rgba(243,234,214,.28); --tile:#0b644c;
}
body[data-theme="cream"]{
  --bg:#ecdfc8; --fg:#2a140a; --fg-dim:rgba(42,20,10,.5);
  --acc:#b8330f; --line:rgba(42,20,10,.18); --tile:#e2d2b6;
}
body[data-theme="rust"]{
  --bg:#8f2f10; --fg:#f3ead6; --fg-dim:rgba(243,234,214,.55);
  --acc:#ffb648; --line:rgba(243,234,214,.26); --tile:#7c2708;
}
body[data-theme="grey"]{
  --bg:#b3bdc4; --fg:#1d2429; --fg-dim:rgba(29,36,41,.52);
  --acc:#e8250e; --line:rgba(29,36,41,.18); --tile:#aab4bb;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{
  font-family:var(--serif);color:var(--fg);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color 1.1s ease,color 1.1s ease;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* huset kører aldrig kursiv — emphasis er farve, ikke hældning */
em,i{font-style:normal}
::selection{background:var(--acc);color:var(--bg)}

/* korn over det hele */
body::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain .9s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-2.5%,1.5%)}66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}
}

/* ── labels: det eneste sans-element — arkivets kodesprog ── */
.label{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--fg);
  transition:color 1.1s ease;
}
.label.dim{color:var(--fg-dim)}
.label.acc,.acc{color:var(--acc)}
.acc-em{color:var(--acc);font-style:normal}
.topbar .label,.hero-foot .label,.hero-center .label,.striphead .label{white-space:nowrap}

/* ── preloader ── */
#loader{
  position:fixed;inset:0;z-index:200;background:#030d09;color:#ecdfc8;
  display:flex;align-items:center;justify-content:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
#loader.done{transform:translateY(-100%)}
#loader.ready{cursor:pointer}
#loader.ready .l-dim{color:var(--red);animation:lpulse 1.6s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.3}}
.loader-inner{text-align:center;display:grid;gap:26px}
.l-label{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.34em;color:var(--red)}
.l-dim{color:rgba(236,223,200,.45)}
.l-count{font-size:clamp(70px,14vw,150px);line-height:1;font-variant-numeric:tabular-nums}

/* ── topbar ── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px;
}
.tb-right{display:flex;gap:26px;align-items:center}
.mbtn{background:none;border:1px solid var(--line);color:var(--fg);
  padding:7px 12px;cursor:pointer;border-radius:2px;transition:color 1.1s,border-color 1.1s}
.mbtn:hover{border-color:var(--acc);color:var(--acc)}

/* ── hero (fast mørk — flash-verdenen) ── */
#hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#04120d}
.flash{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.04)}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(to bottom, rgba(3,13,9,.42), rgba(3,13,9,0) 26%, rgba(3,13,9,0) 62%, rgba(3,13,9,.6));}
.hero-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;text-align:center;padding:0 14px;
}
.hero-red{color:var(--red)!important}
.hero-center h1{
  font-size:clamp(58px,11.5vw,190px);line-height:.94;font-weight:400;
  letter-spacing:.015em;color:var(--red);
  text-shadow:0 0 60px rgba(3,13,9,.35);
}
.hero-foot{
  position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;align-items:center;padding:22px 28px;
}
.hero-foot .label{color:#ecdfc8}
.hero-foot .label.dim{color:rgba(236,223,200,.45)}
#fcount{font-variant-numeric:tabular-nums}

/* ── kapitler ── */
.chapter{padding:clamp(110px,15vw,210px) 0}
.pad{padding-left:clamp(20px,6vw,90px);padding-right:clamp(20px,6vw,90px);max-width:1560px;margin:0 auto}

/* opener — kapitlets typografiske åbning */
.opener{margin-bottom:clamp(40px,6vw,90px)}
.opener.right{text-align:right}
.o-kicker{display:block;margin-bottom:22px}
.o-title{
  font-size:clamp(46px,8.6vw,150px);line-height:.98;font-weight:400;
  letter-spacing:.005em;
}
.o-title em{color:var(--acc)}
.o-title .o-red,.o-red{color:var(--red)}

/* tekstkolonner */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);max-width:1150px;margin-left:auto}
.col .label{display:block;margin-bottom:16px}
.col p{font-size:clamp(17px,1.5vw,21px);line-height:1.68;color:var(--fg);opacity:.92}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.65;max-width:60ch;color:var(--fg);opacity:.88;margin-bottom:clamp(30px,4vw,54px)}
.lede.push{margin-left:auto;max-width:52ch}

/* ── full-bleed billede med skrift hen over ── */
.bleed{position:relative;width:100%;margin:clamp(30px,5vw,70px) 0}
.bleed img{width:100%;max-height:92vh;object-fit:cover}
.overword{
  position:absolute;left:clamp(16px,5vw,80px);bottom:-0.22em;
  font-family:var(--serif);font-size:clamp(44px,8.4vw,140px);
  line-height:1;color:var(--red);text-shadow:0 2px 40px rgba(3,13,9,.3);
  pointer-events:none;
}

/* ── editorial cluster — uens grid, spring i højder ── */
.cluster{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,2vw,26px);margin-top:clamp(50px,8vw,110px);align-items:start;
}
.cl{position:relative}
.cl img,.cl video{width:100%;height:auto;background:var(--tile)}
.cl figcaption{padding-top:10px}
.c-a{grid-column:1/8}
.c-b{grid-column:8/13;margin-top:16%}
.c-q{grid-column:2/8;align-self:center;margin:6% 0}
.c-q p{font-size:clamp(24px,2.8vw,42px);line-height:1.3;font-style:normal}
.c-q em{color:var(--acc)}
.c-c{grid-column:8/13;margin-top:-6%}
.c-d{grid-column:1/6;margin-top:4%}
.c-e{grid-column:6/11;margin-top:12%}
.c-f{grid-column:3/9;margin-top:6%}
.c-g{grid-column:9/13;margin-top:-4%}
.c-h{grid-column:2/12;margin-top:8%}

/* ── filmafspiller ── */
.player{position:relative}
.player img,.player video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.player figcaption{margin-top:14px}
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(72px,9vw,108px);height:clamp(72px,9vw,108px);border-radius:50%;border:0;cursor:pointer;
  background:var(--red);color:#ecdfc8;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.3em;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s;
}
.play:hover{transform:translate(-50%,-50%) scale(1.12);background:#ff3517}
.minirow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,22px);margin-top:clamp(26px,4vw,50px)}
.mini video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--tile)}
.mini figcaption{padding-top:8px}

/* ── commercial: én still ind → reel ud + disciplin-grid ── */
.comlead{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(14px,2.4vw,32px);
  align-items:end;margin:clamp(40px,6vw,80px) 0 clamp(26px,4vw,50px);
}
.comin img,.comhero video,.com video{width:100%;height:auto;background:var(--tile)}
.comlead figcaption,.com figcaption{padding-top:10px;display:flex;gap:14px}
.comgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,24px);align-items:start;
}
.comgrid .com:nth-child(2){margin-top:7%}
.comgrid .com:nth-child(4){margin-top:5%}
.insertshead{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:clamp(40px,6vw,70px) 0 18px;gap:14px;flex-wrap:wrap;
}
.mini figcaption{padding-top:8px}

/* ── fuldskærms-scener (Sevda-kompositioner): diptych/triptych/solo ── */
.nopadtop{padding-top:clamp(70px,9vw,130px)}
.fullscene{
  position:relative;width:100%;height:100vh;height:100svh;
  display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;
  margin-top:clamp(50px,7vw,100px);
}
.fullscene.solo{grid-template-columns:1fr}
.fullscene.triptych{grid-template-columns:1fr 1fr 1fr}
.fs-cell{position:relative;overflow:hidden}
.fs-cell img,.fs-cell video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.fs-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(3,13,9,.44), rgba(3,13,9,0) 34%);
}
.fullscene:has(.fs-state) .fs-veil{
  background:
    radial-gradient(ellipse 90% 60% at 50% 46%, rgba(3,13,9,.44), rgba(3,13,9,.1) 74%),
    linear-gradient(to top, rgba(3,13,9,.4), rgba(3,13,9,0) 30%);
}
.fs-text{
  position:absolute;left:clamp(18px,4.5vw,70px);bottom:clamp(20px,4.5vw,54px);
  z-index:2;display:grid;gap:12px;
}
.fs-text.right{left:auto;right:clamp(18px,4.5vw,70px);text-align:right;justify-items:end}
.fs-text .label{color:#ecdfc8}
.fs-word{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(52px,9vw,140px);line-height:1;color:var(--red);
  text-shadow:0 2px 34px rgba(3,13,9,.4);
}

/* ── Sevda-flow: bånd · par · fulls · pauser ── */
.band{
  display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(30px,6vw,110px);
  align-items:start;padding:clamp(100px,14vw,200px) clamp(20px,6vw,90px);
  max-width:1560px;margin:0 auto;
}
.band-name{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(42px,5.6vw,88px);line-height:.95;letter-spacing:.01em;
}
.band-txt{font-size:clamp(18px,1.7vw,24px);line-height:1.7;max-width:56ch;opacity:.92}
.band-txt em{color:var(--acc)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%;position:relative;align-items:start}
.pair,.full,.pause-media{will-change:transform;transform-origin:50% 50%}
.plabel{
  position:absolute;top:16px;left:clamp(16px,3vw,44px);z-index:3;
  color:var(--red);text-shadow:0 1px 14px rgba(3,13,9,.55);
}
/* stille filosofiske linjer hen over medierne */
.pquote{
  position:absolute;bottom:clamp(22px,4.5vw,56px);left:clamp(18px,3.5vw,54px);z-index:3;
  font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(17px,1.9vw,30px);line-height:1.5;max-width:34ch;
  color:#ecdfc8;text-shadow:0 1px 24px rgba(3,13,9,.7),0 0 60px rgba(3,13,9,.4);
  pointer-events:none;
}
.pquote.right{left:auto;right:clamp(18px,3.5vw,54px);text-align:right}
.p-cell{position:relative;overflow:hidden;margin:0}
.p-cell img,.p-cell video{
  width:100%;height:auto;display:block;
}
.p-cell:has(.ontext)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(3,13,9,.52), transparent 46%);
}
.ontext{
  position:absolute;left:clamp(18px,3.5vw,54px);bottom:clamp(20px,4vw,54px);right:12%;
  display:grid;gap:10px;z-index:2;color:#ecdfc8;text-shadow:0 1px 26px rgba(3,13,9,.55);
}
.ontext em{font-family:var(--serif);font-size:clamp(22px,2.4vw,38px);line-height:1.1}
.ontext span{font-family:var(--serif);font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:44ch}

.full{position:relative;width:100%}
.full img,.full video{width:100%;height:auto;display:block}
.fullsuite{position:relative;display:grid;gap:3px}
.full-state{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:0 clamp(16px,5vw,70px);
  background:radial-gradient(ellipse 90% 60% at 50% 50%, rgba(3,13,9,.4), rgba(3,13,9,.06) 76%);
}
.full-state .st{
  font-family:var(--serif);font-size:clamp(28px,4.8vw,74px);line-height:1.08;
  color:#ecdfc8;text-shadow:0 2px 44px rgba(3,13,9,.5);
}
.full-state .st em{color:var(--red)}
.full-state .label{color:#ecdfc8}
.stbrand{font-size:clamp(44px,9vw,140px);letter-spacing:.06em}

/* ── æstetikker: mand|kvinde dobbelt-flash ── */
.aflash{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%}
.af-cell{height:min(88vh,940px);background-size:cover;background-position:center 18%}

/* ── deck: kortene roterer til fronten på scroll ── */
.decksec{position:relative;height:300vh}
.decksec .plabel{top:24px}
.deck-sticky{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.deck{position:relative;width:min(86vw,760px);aspect-ratio:4/5;max-height:88vh}
.deck-card{position:absolute;inset:0;margin:0;will-change:transform}
.deck-card img{width:100%;height:100%;object-fit:cover;display:block}

.pause{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(90px,13vw,180px) 20px;
}
.pause-media{width:min(88vw,500px);position:relative;margin:0}
.pause-media img,.pause-media video{width:100%;height:auto;display:block}
.pause-media figcaption{margin-top:18px;display:grid;gap:10px;text-align:center;justify-items:center}
.pause-media figcaption em{font-family:var(--serif);font-size:clamp(18px,2vw,28px);line-height:1.3;color:var(--acc)}

/* ── statements hen over medier — man VED hvad det er ── */
.fs-state{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:0 clamp(16px,5vw,70px);
}
.fs-state .st{
  font-family:var(--serif);font-size:clamp(26px,4.6vw,72px);line-height:1.08;
  color:#ecdfc8;text-shadow:0 2px 44px rgba(3,13,9,.5);
}
.fs-state .st em{color:var(--red)}
.fs-state .label{color:#ecdfc8}

/* spredte bogstaver der flyver i egne hastigheder */
.scatter{position:absolute;inset:0;z-index:3;pointer-events:none}
.scatter span{
  position:absolute;font-family:var(--sans);font-weight:700;
  font-size:clamp(16px,2.4vw,32px);letter-spacing:.14em;color:var(--red);
  text-shadow:0 1px 18px rgba(3,13,9,.4);will-change:transform;
}

/* billeder der driver bag teksten */
.floatimg{position:absolute;z-index:0;margin:0;will-change:transform}
.floatimg img{width:100%;height:auto;display:block}
#intro{position:relative;overflow:hidden}
#intro .pad{position:relative;z-index:1}
.fl-a{right:3%;top:4%;width:clamp(150px,24vw,340px);opacity:.85}
.fl-b{left:2%;bottom:2%;width:clamp(110px,16vw,240px);opacity:.7}

/* kæmpe ord bag grey wall-loopsene */
#greywall{position:relative;overflow:hidden}
.gw-giant{
  position:absolute;left:50%;top:44%;transform:translateX(-50%);
  font-family:var(--serif);white-space:nowrap;
  font-size:clamp(110px,24vw,380px);line-height:1;
  color:rgba(29,36,41,.07);pointer-events:none;z-index:0;will-change:transform;
}
.gwscroll{position:relative;z-index:1}
#greywall .pad,#greywall .striphead{position:relative;z-index:1}

/* parallax-basis: fs-videoer skaleres så drift aldrig viser kanter */
.fs-cell video[data-speed]{transform:scale(1.16)}
[data-speed]{will-change:transform}

/* ── detail-strip: sportstrøjen, ét take, fem udsnit ── */
.dtscroll{gap:clamp(14px,2vw,30px);align-items:end;will-change:transform}
.dtscroll .dt{flex:0 0 auto}
.dtscroll video{height:min(62vh,680px);width:auto;display:block;background:var(--tile)}
.dtscroll figcaption{padding-top:12px;display:flex;gap:12px}

/* ── grey wall: baggrunden ER studiet — store loops i side-scroll ── */
.gwscroll{--gwh:min(86vh,940px);gap:clamp(28px,5vw,80px);align-items:end}
.gwscroll .gw{flex:0 0 auto;position:relative;width:max-content}
.gwscroll video{
  height:var(--gwh);width:auto;object-fit:contain;
  background:transparent;display:block;
}
/* feather-kant i sidens grå → klippene smelter ind i væggen */
.gwscroll .gw::after{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--gwh);
  pointer-events:none;
  box-shadow:inset 0 0 clamp(22px,3.5vw,48px) clamp(12px,2vw,26px) var(--bg);
  transition:box-shadow 1.1s ease;
}
.gwscroll figcaption{padding-top:14px;display:flex;gap:14px}

/* ── mirage filmstrimmel: sticky vandret take + burn-out exit ── */
.filmreel{position:relative;height:420vh}
.fr-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;will-change:transform;
}
.fr-head{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:86px clamp(20px,6vw,90px) 0;
}
.fr-track{
  display:flex;gap:clamp(16px,2.4vw,36px);padding:0 10vw;
  align-items:center;will-change:transform;
}
.fr-cell{position:relative;flex:0 0 auto;margin:0}
.fr-cell img{height:min(70vh,820px);width:auto;display:block;background:var(--tile)}
/* burn-out: mørket æder strimlen — matcher næste kapitels tema */
.fr-veil{position:absolute;inset:0;z-index:4;background:#04120d;opacity:0;pointer-events:none}

/* ── pool house dissolve-reel: scroll krydsfader mellem fire takes ── */
.dissolve{position:relative;height:380vh}
.dv-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dv-cell{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.dv-cell video{width:100%;height:100%;object-fit:cover;display:block}
.dv-head{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:86px clamp(20px,6vw,90px) 0;
}
#dvcount{font-variant-numeric:tabular-nums}

/* ── vertikalt motion-galleri — uens bredder, skrift hen over ── */
.vgal{display:grid;gap:clamp(90px,13vh,170px)}
.vitem{position:relative;width:100%}
.vitem video{width:100%;height:auto;background:var(--tile)}
.vitem img{width:100%;height:auto;display:block;background:var(--tile)}
.vitem.v-a{max-width:min(86vw,620px);margin-right:auto}
.vitem.v-b{max-width:min(88vw,760px);margin-left:auto}
.vitem.v-c{max-width:min(84vw,560px);margin-left:auto;margin-right:auto}
.vword{
  position:absolute;bottom:-0.24em;left:-0.06em;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(50px,8.6vw,116px);line-height:1;color:var(--red);
  pointer-events:none;text-shadow:0 2px 30px rgba(3,13,9,.35);
}
.vitem.v-b .vword{left:auto;right:-0.06em}
.vmeta{margin-top:12px;display:flex;gap:16px}

/* ── strips (horisontale gallerier) ── */
.striphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px}
.strip{
  display:flex;gap:14px;overflow-x:auto;
  padding:0 clamp(20px,6vw,90px) 26px;
  cursor:grab;scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing}
.strip figure{flex:0 0 auto}
.strip img{height:min(58vh,560px);width:auto;pointer-events:none;background:var(--tile)}
.strip figcaption{padding-top:10px;display:flex;gap:12px}
#aeststrip img{height:min(52vh,520px)}

/* ── manifest: centreret credo i hero-sproget ── */
#manifesto .opener{text-align:center;margin-bottom:clamp(50px,7vw,100px)}
.mani{display:grid;gap:clamp(28px,3.8vw,54px);max-width:980px;margin:0 auto;text-align:center}
.m-line{overflow:hidden}
.m-line span{
  display:block;font-size:clamp(22px,2.7vw,42px);line-height:1.3;
  transform:translateY(112%);transition:transform 1.05s cubic-bezier(.2,.7,.2,1);
  text-wrap:balance;
}
.m-line:first-child span,.m-line.m-last span{
  font-size:clamp(28px,3.8vw,60px);line-height:1.16;
}
.m-line.in span{transform:translateY(0)}
.m-line em{color:var(--acc)}

/* ── kontakt/footer ── */
.mail{
  display:inline-block;margin-top:10px;
  font-family:var(--sans);font-size:clamp(15px,2.4vw,30px);font-weight:700;
  letter-spacing:.18em;color:var(--acc);border-bottom:2px solid var(--acc);
  padding-bottom:8px;transition:color .3s,border-color .3s;
}
.mail:hover{color:var(--amber);border-color:var(--amber)}

/* award-links: mailen som stor serif med underlinje-sweep; about som pil-label */
.bigmail{
  display:inline-block;margin-top:6px;padding-bottom:12px;
  font-family:var(--serif);font-weight:400;letter-spacing:.01em;
  font-size:clamp(18px,4.6vw,66px);line-height:1.12;color:var(--fg);
  max-width:100%;overflow-wrap:anywhere;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat left 100% / 0% 3px;
  transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .4s ease;
}
.bigmail:hover{background-size:100% 3px;color:var(--acc)}
.contact-links{margin-top:clamp(26px,4vw,46px)}
.aboutlink{
  display:inline-flex;align-items:baseline;gap:14px;
  color:var(--fg-dim);transition:color .3s ease;
}
.aboutlink .arr{
  display:inline-block;font-family:var(--serif);font-size:1.9em;line-height:0;
  transform:translateY(2px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.aboutlink:hover{color:var(--acc)}
.aboutlink:hover .arr{transform:translateY(2px) translateX(12px)}
.pair.deal{overflow:visible}
.pair.deal .p-cell{will-change:transform}
footer{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:34px 28px;border-top:1px solid var(--line);
}

/* ── reveals ── */
.r{opacity:0;transform:translateY(30px);transition:opacity .95s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
.r.in{opacity:1;transform:none}

/* ── cursor ── */
#cursor{position:fixed;inset:0;z-index:120;pointer-events:none}
.c-dot,.c-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.c-dot{width:7px;height:7px;background:var(--acc)}
.c-ring{width:36px;height:36px;border:1px solid var(--fg-dim);transition:width .25s,height .25s,border-color .25s}
#cursor.big .c-ring{width:64px;height:64px;border-color:var(--acc)}
@media (hover:none){#cursor{display:none}}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .r,.m-line span{transition-duration:.2s}
}

/* ── responsivt ── */
@media (max-width:860px){
  .tb-mid{display:none}
  .tb-right .label:first-child{display:none}
  /* hero-typografien skal kunne ombrydes — nowrap klipper på smalle skærme */
  .hero-center .label{white-space:normal;letter-spacing:.22em;line-height:1.9}
  .hero-center h1{font-size:clamp(40px,14.5vw,120px)}
  .cols{grid-template-columns:1fr;margin-left:0}
  .minirow{grid-template-columns:1fr 1fr}
  .comlead{grid-template-columns:1fr}
  .comgrid{grid-template-columns:1fr 1fr}
  .comgrid .com:nth-child(2),.comgrid .com:nth-child(4){margin-top:0}
  .fullscene{height:auto;min-height:100svh;grid-template-columns:1fr!important;grid-auto-rows:60vh}
  .fullscene .fs-cell{min-height:60vh}
  /* kapitel-ordene må gerne fylde mere på små skærme */
  .stbrand{font-size:clamp(38px,12vw,86px)}
  .gwscroll{--gwh:60vh}
  .striphead{flex-direction:column;gap:8px}
  .striphead .label{white-space:normal}
  .band{grid-template-columns:1fr;gap:26px}
  .pair{grid-template-columns:1fr}
  .ontext{right:6%}
  .cluster{grid-template-columns:1fr;gap:40px}
  .cluster .cl{grid-column:1/-1!important;margin-top:0!important}
  .opener.right{text-align:left}
  .lede.push{margin-left:0}
  .hero-foot .label.dim{display:none}
  .strip img{height:46vh}
  /* strips: snap giver en taktil, kort-for-kort svipe-følelse på touch */
  .strip{scroll-snap-type:x proximity}
  .strip figure{scroll-snap-align:center}
  /* filmstrimlen: hvert motiv skal kunne ses helt på en telefonskærm,
     og scrubben er kortere, så tommelfingeren ikke skal arbejde dobbelt */
  .filmreel{height:340vh}
  .fr-track{gap:14px;padding:0 7vw}
  .fr-cell img{height:min(56vh,620px);max-width:90vw;object-fit:cover}
  .fr-head{padding-top:64px}
  /* dissolve-reel: samme kortere scrub */
  .dissolve{height:320vh}
  .dv-head{padding-top:64px}
  footer{flex-direction:column;gap:10px}
}