/* ============================================================
   HISTORIEN OM MOSEDE HAVN  (31. august 2026)
   ------------------------------------------------------------
   Kundens ord: der skal være historie om cafeen med en knap, og
   når man har trykket, skal der komme "en helt anden slags stil,
   end vi har kørt med — nærmest cinematisk".

   ⚠️ DET ER DERFOR DEN HAR SIT EGET ARK. Resten af huset er
   creme, rød/hvidt tern og glasknapper. Den her side er det
   modsatte med vilje: mørk som en biograf, ingen tern, ingen
   glas, ingen bestil-pille. Havde jeg lagt farverne ind i
   havnegrillen.css, ville de have kunnet sive ud på de ni andre
   sider — og hele pointen med "en anden slags" ville være væk.

   ⚠️ MESSING I STEDET FOR HUSETS RØDE. Årstallene skal læses som
   noget, der er ridset i metal, ikke som knapper. Rød betyder
   "tryk her" på hver eneste anden side i huset, og et rødt 1710
   ville se ud som et link. Kransens blå og husets røde er stadig
   logoets — mærket i toppen er urørt.

   ⚠️ INTET ANIMERER LAYOUT. Kun opacity og transform (lærepengene
   fra 120 fps-runden 31/8), og alt slukkes ved
   prefers-reduced-motion. Der er heller ingen lyttere på wheel
   eller touchmove — rullen er browserens egen.
   ============================================================ */

.hist {
  --nat: #0b0908;
  --dyb: #14100e;
  --salt: #efe7dd;
  --taage: #a89a8e;
  --messing: #d2ac6b;
  --hairline: rgba(239, 231, 221, .13);

  background: var(--nat);
  color: var(--salt);
}

/* Skærmen er sidens egen — designets .screen er creme. */
.hist .screen { background: var(--nat); }

/* ---- FILMKORNET -------------------------------------------
   En stille uro over hele fladen, så de store mørke felter ikke
   står som ren digital sort. SVG'en er få hundrede tegn og
   ligger i arket — et billede mere at hente ville være et
   billede, gæsten venter på. */
.hist .screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- TOPBJÆLKEN --------------------------------------------
   Den er husets, men på mørk grund: den lyse glasknap ville
   lyse som en lygte i en mørk sal. */
.hist .topbar {
  background: rgba(11, 9, 8, .82);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hist .topbar .g.icn.dark {
  background: rgba(239, 231, 221, .07);
  border-color: rgba(239, 231, 221, .16);
  color: var(--salt);
}
/* ⚠️ OG NÅR DEN STÅR FAST, ER DEN SIDENS SORTE — IKKE HUSETS CREME (11/10).
   `body.har-film .topbar.stuck` (havnegrillen.css, 3/10: fast flade uden
   glas på sider med film) vejer 0,3,1 og slog linjen ovenfor (0,2,0): en
   creme stribe med blæk-ordmærke hen over biografen, set på en optagelse.
   Samme regel — fast og uden glas — i sidens farve. */
.hist.har-film .topbar.stuck {
  background: var(--nat);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hist .topbar .ordmaerke { color: var(--salt); }

/* Menuknappen er fast, ikke glas (14/9) — husets regel i havnegrillen.css,
   her i sidens egne farver: mørk flade, messingkant. Uden den vandt
   linjen ovenover (samme vægt, senere ark), og knappen blev gennemsigtig
   igen på netop den side. ⚠️ Og over filmen gælder filmens egen regel
   (.hist:has(.h-hero.film) … vejer 0,8,0) — derfor linje nummer to. */
.hist .topbar .g.icn.dark.menu,
.hist:has(.h-hero.film) .topbar:not(.stuck) .g.icn.dark.menu {
  background: #1b1512;
  /* ⚠️ OG SÅ SLØRINGEN FRA  (3/10). Fladen her er HELT dækkende,
     og en sløring bag den kan ikke ses — men browseren regner den
     ud alligevel, ved hvert billede. Den stod før i
     havnegrillen.css; da menuknappen blev glas de andre steder,
     fulgte sløringen med hertil, hvor den er spild.
     Den slås fra dér, hvor fladen gøres dækkende — ikke et tredje
     sted. Målt af tests/menu-knap.spec.js. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(210, 172, 107, .45), 0 6px 16px rgba(0, 0, 0, .4);
  color: var(--salt);
}

/* ---- ÅBNINGEN ---------------------------------------------- */
.hist .h-hero {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 22px 46px;
  position: relative;
}
/* Lys nedefra, som en scene. */
.hist .h-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(210, 172, 107, .16), transparent 62%),
    radial-gradient(90% 55% at 12% 0%, rgba(42, 95, 143, .14), transparent 70%);
}
/* ⚠️ FILMEN OG KNAPPEN ER UNDTAGET. De bor i havnegrillen.css med
   position: absolute (og fixed på en telefon); en `> *` her ville
   gøre dem til en del af flowet, og filmen ville blive en stribe
   på nul pixels under teksten. */
.hist .h-hero > :not(.hero-film):not(.hero-spring) { position: relative; z-index: 1; }

/* ---- FILMEN ER ÅBNINGEN (14/9) -----------------------------
   Kundens ord: når man klikker ind på historien fra forsiden, "er
   man mødt med skrift og sort" — han ville have "noget high
   quality blæret cinematisk intro til det", som forsidens.

   Filmen går fra søslaget i 1710 til luftbilledet af ø-havnen fra
   1929 — i SORT-HVID (14/9, kundens ord: "tror bedre jeg kunne lide
   gamle … med bådene der skyder … måske sort hvid, for at det ser
   gammelt ud"). En mellemudgave med fiskerne på stranden blev
   fravalgt samme eftermiddag. Slutbilledet bliver stående bag
   overskriften.

   ⚠️ SAMME MOTOR SOM FORSIDEN, IKKE EN KOPI. js/skal/hero-film.js
   leder efter `.hero-film` og ved ikke, hvilken side den er på;
   lærredet, kornet, vignetten, "tryk for at springe over" og
   værnene er havnegrillen.css' egne regler. Det, der står her, er
   KUN det, der er anderledes på historien: teksten står nederst,
   grunden er sidens egen sorte, og tonen over slutbilledet går
   ned i siden, så filmen ikke slutter med en kant.

   ⚠️ DET ER EN STEMNINGSFILM, OG SIDEN SIGER DET (data-film i
   bunden) — ingen filmede 1710, og luftbilledet er ikke et
   arkivfoto. Samme regel som stemningsbillederne (6/9). */
.hist .h-hero.film {
  --under-linjen: max(96px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  /* Heroen trækkes op under bjælken som forsidens, så filmen
     begynder i skærmens top og ikke under en sort stribe. */
  margin-top: calc(-1 * (var(--top-luft) + 70px));
  padding-top: calc(var(--top-luft) + 190px);
  /* ⚠️ lvh OG ET FAST TILLÆG — forsidens mål (11/9, målt i iOS 26):
     Safari tegner siden ~58 punkter under lvh, bag sin svævende
     bundlinje, og ingen enhed siger det. */
  min-height: calc(100vh + var(--under-linjen));
  min-height: calc(100lvh + var(--under-linjen));
  /* ⚠️ TEKSTEN STÅR NEDERST, modsat forsiden — og derfor skal den
     holde sig over den SYNLIGE bund, ikke over heroens. Forskellen
     på lvh og svh er Safaris bjælker; i Chromium er den nul. */
  padding-bottom: calc(var(--under-linjen) + 34px);
  padding-bottom: calc(100lvh - 100svh + var(--under-linjen) + 34px);
  isolation: isolate;
  overflow: hidden;
  background: var(--nat);
}
.hist .hero-film { background: var(--nat); }
/* Tonen over slutbilledet: let foroven (bjælken), klar i midten,
   hvor havnen er, og helt ned i sidens sorte forneden, hvor teksten
   står. Den kommer MED teksten — filmen spiller ren.
   ⚠️ SET PÅ ET SKUD: med tonen først ved 70 % stod manchetten oven
   i molens sten på en telefon. Teksten fylder den nederste
   halvdel af skærmen dernede, så tonen begynder ved halvdelen. */
.hist .h-hero.film::after {
  background: linear-gradient(180deg,
    rgba(11, 9, 8, .6) 0%, rgba(11, 9, 8, 0) 22%, rgba(11, 9, 8, 0) 27%,
    rgba(11, 9, 8, .46) 40%, rgba(11, 9, 8, .72) 56%, rgba(11, 9, 8, .88) 74%,
    var(--nat) 100%);
  transition: opacity 1.2s ease;
}
/* Den lille messinglinje og manchetten står oven i havnens huse og
   sten — en skygge under bogstaverne, ikke en flade bag dem. */
.hist .h-hero.film .h-mrk,
.hist .h-hero.film .h-manchet { text-shadow: 0 1px 12px rgba(11, 9, 8, .8); }
/* ⚠️ BJÆLKEN ER GENNEMSIGTIG OVER FILMEN, TIL DEN STÅR FAST — som
   forsidens. Set på et skud af slutbilledet: sidens mørke glas (.82)
   lå som en tyk sort stribe hen over filmens top, 110 px på en
   telefon. Knapperne er stadig historiens mørke glas, og tonen
   foroven giver dem deres bund. */
.hist:has(.h-hero.film) .topbar:not(.stuck) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ⚠️ OG KNAPPERNE SKAL HAVE DERES EGEN MØRKE BUND DEROPPE. Set på
   skuddet: historiens lyse glas (.07) oven i en lys himmel var en
   bleg cirkel med et næsten hvidt tegn. Mørkere glas, samme tegn. */
.hist:has(.h-hero.film) .topbar:not(.stuck) .g.icn.dark {
  background: rgba(11, 9, 8, .38);
}
.hist .h-hero.film h1 { text-shadow: 0 2px 24px rgba(11, 9, 8, .55); }
.hist .h-hero.film > :not(.hero-film):not(.hero-spring) {
  transition: opacity .9s ease, transform .9s cubic-bezier(.24, .72, .24, 1);
}
.hist .h-hero.film > h1 { transition-delay: .12s; }
.hist .h-hero.film > .h-manchet { transition-delay: .24s; }
.hist .h-hero.film > .h-rul { transition-delay: .36s; }
html.film-aabner body.hist .h-hero.film::after { opacity: 0; }
html.film-aabner body.hist .h-hero.film > :not(.hero-film):not(.hero-spring) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
/* ⚠️ VÆRNET, SOM PÅ FORSIDEN: fejler scriptet, viser stilarket
   teksten efter 8 s af sig selv — og har scriptet taget over
   (`film-styret`), gælder dets eget værn, som tæller fra det
   øjeblik, filmen SPILLER. */
html.film-aabner body.hist .h-hero.film > :not(.hero-film):not(.hero-spring),
html.film-aabner body.hist .h-hero.film::after { animation: film-noedvis 0s 8s forwards; }
html.film-styret.film-aabner body.hist .h-hero.film > :not(.hero-film):not(.hero-spring),
html.film-styret.film-aabner body.hist .h-hero.film::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hist .h-hero.film::after,
  .hist .h-hero.film > :not(.hero-film):not(.hero-spring) { transition: none; }
}
/* ⚠️ HELE FILMENS BREDDE PÅ EN TELEFON (15/9). Kundens ord, igen og
   igen: "zoomet for meget ind … havnen kan man heller ikke se hele af".
   MÅLT på den udgivne side: heroen er 390×940 (lvh + 96 px) og filmen
   9:16, så `cover` skar 13 % af i hver side — kun 74 % af bredden stod
   på skærmen, uanset hvilken film Sjinn lavede. Nu står hele filmen i
   fuld bredde fra toppen og toner ud i sidens sorte forneden, hvor
   teksten står.
   ⚠️ KUN TELEFONER PÅ HØJKANT: en iPad på højkant er bredere end 9:16,
   og `contain` ville give den sorte kanter i siderne. */
@media (max-width: 700px) and (orientation: portrait) {
  .hist .hero-film video,
  .hist .hero-film .hero-start,
  .hist .hero-film .hero-slut {
    object-fit: contain;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100vw * 16 / 9 - 140px), transparent calc(100vw * 16 / 9));
    mask-image: linear-gradient(180deg, #000 calc(100vw * 16 / 9 - 140px), transparent calc(100vw * 16 / 9));
  }
}
/* Computerens bjælke er lavere (havnegrillen-desktop.css fra 821 px),
   og forsidens hero trækkes 90 px op under den — samme tal her. */
@media (min-width: 821px) {
  .hist .h-hero.film {
    margin-top: -90px;
    padding-top: 150px;
    padding-bottom: 76px;
    /* ⚠️ +40 OG IKKE FORSIDENS +12: historiens bjælke er lavere end
       forsidens (ingen ordmærke), så de 90 px optræk lagde toppen 21 px
       over skærmen, og med +12 sluttede filmen 9 px FØR bunden — målt
       711 mod 720, da overskriften blev mindre. */
    min-height: calc(100svh + 40px);
  }
  /* ⚠️ OVERSKRIFTEN FØLGER SKÆRMENS HØJDE, IKKE KUN BREDDEN (14/9).
     Med faktadokumentets manchet (fire linjer) stod "Rul ned" 735 px
     nede på en bærbar på 720 — målt af prøven. 104 px × tre linjer er
     for meget på en lav skærm; 12vh giver 86 px dér og 104 på en høj. */
  .hist .h-hero.film h1 { font-size: clamp(46px, 12vh, 104px); }
  /* På en bred skærm står teksten i venstre side oven i havnens huse
     — målt på et skud var den lille messinglinje over trætoppene
     svær at læse. En tone fra venstre bærer teksten; havnen til
     højre står klar. */
  .hist .h-hero.film::after {
    background:
      linear-gradient(90deg, rgba(11, 9, 8, .72) 0%, rgba(11, 9, 8, .34) 36%, rgba(11, 9, 8, 0) 62%),
      linear-gradient(180deg, rgba(11, 9, 8, .45) 0%, rgba(11, 9, 8, 0) 18%, rgba(11, 9, 8, 0) 40%,
        rgba(11, 9, 8, .7) 76%, var(--nat) 100%);
  }
}

.hist .h-mrk {
  font: 500 11.5px/1 "Host Grotesk", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--messing);
}
.hist h1 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(46px, 13.5vw, 104px);
  line-height: 1.0;
  letter-spacing: -.015em;
  margin: 16px 0 0;
  color: var(--salt);
  text-wrap: balance;
}
.hist h1 em {
  font-style: italic;
  color: var(--messing);
}
.hist .h-manchet {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--taage);
}

/* Rullehintet. ⚠️ STÅR STILLE (11/10): stregen vippede op og ned i en
   uendelig løkke — skabelonens "rul ned"-pil, og den eneste ting på siden,
   der aldrig holdt op. En stille messingstreg siger det samme. */
.hist .h-rul {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1 "Host Grotesk", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239, 231, 221, .5);
}
.hist .h-rul i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--messing), transparent);
}

/* ---- KAPITLERNE -------------------------------------------- */
.hist .kap {
  padding: 62px 22px;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.hist .kap-aar {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: clamp(40px, 11vw, 74px);
  line-height: .96;
  color: var(--messing);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hist .kap-navn {
  font: 500 11.5px/1 "Host Grotesk", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239, 231, 221, .55);
  margin-top: 12px;
}
.hist .kap h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 7.6vw, 46px);
  line-height: 1.1;
  margin: 14px 0 0;
  color: var(--salt);
  text-wrap: balance;
}
.hist .kap p {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--taage);
  max-width: 42ch;
}
.hist .kap p strong { color: var(--salt); font-weight: 600; }

/* Det ene citat pr. side — større, i seriffen, uden gåseøjne som
   grafik: teksten ER effekten. */
.hist .h-citat {
  margin: 30px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--messing);
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-style: italic;
  font-size: clamp(21px, 5.4vw, 28px);
  line-height: 1.32;
  color: var(--salt);
  max-width: 26ch;
}

/* ---- BILLEDERNE -------------------------------------------
   Fuld bredde, ud til begge kanter — det er dét, der gør den
   filmisk. Formatet står fast, så rækkerne ikke hopper, mens
   fotoet hentes. */
.hist .h-foto {
  margin: 30px -22px 0;
  position: relative;
  overflow: hidden;
  background: var(--dyb);
}
.hist .h-foto img,
.hist .h-foto .foto-felt {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Fladen, når ejeren ikke har lagt et foto op endnu — samme
   regel som resten af huset (js/skal/billedplads.js): en flade
   med et tegn lover ingenting, en stiplet grå kasse ligner en
   fejl. Her er den bare mørk. */
.hist .h-foto .foto-felt {
  display: grid;
  place-items: center;
  font-size: 34px;
  background: linear-gradient(160deg, #1b1512, #100c0a);
  color: rgba(239, 231, 221, .35);
}
.hist .h-billedtekst {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(239, 231, 221, .48);
  font-style: italic;
}

/* ---- SLUTNINGEN -------------------------------------------- */
.hist .h-slut {
  padding: 66px 22px 78px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.hist .h-slut h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 8.4vw, 52px);
  line-height: 1.08;
  margin: 0;
  color: var(--salt);
}
.hist .h-slut p {
  margin: 16px auto 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.66;
  color: var(--taage);
}
/* ⚠️ ÉN VEJ TILBAGE, OG DEN ER IKKE EN BESTIL-KNAP. Kunden bad
   udtrykkeligt om, at bestillingen ikke står i vejen, mens man
   læser. Den, der er færdig med historien, skal kunne gå tilbage
   til havnen — resten står på forsiden. */
.hist .h-tilbage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 26px;
  border: 1px solid rgba(210, 172, 107, .45);
  border-radius: 999px;
  color: var(--messing);
  text-decoration: none;
  font: 600 14px/1 "Host Grotesk", system-ui, sans-serif;
  letter-spacing: .01em;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hist .h-tilbage:hover,
.hist .h-tilbage:focus-visible {
  background: rgba(210, 172, 107, .1);
  border-color: var(--messing);
  transform: translate3d(0, -1px, 0);
}

/* ⚠️ LINKET I KILDELINJEN ER MESSING, IKKE HUSETS RØDE. Målt på
   et skud: #d62a3a på den sorte grund er en mørk plet, der er
   svær at læse — og rød betyder "bestil" alle andre steder i
   huset. Trykfladen er lodret padding (footer-arret 31/8). */
.hist .h-kilde a {
  color: var(--messing);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 0;
  display: inline-block;
}
.hist .h-kilde {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  line-height: 1.62;
  color: rgba(239, 231, 221, .45);
  text-align: left;
}

/* ---- FODEN -------------------------------------------------
   Husets footer er allerede mørk; her får den bare sidens egen
   sorte, så overgangen ikke er en kant. */
.hist footer { background: var(--nat); border-top: 1px solid var(--hairline); }

/* ---- BEVÆGELSEN  (11/10) -----------------------------------
   Mikkels ord: *"animationerne inde i historie siden er generiske og
   elendige"*. MÅLT FØR (optaget på en iPhone 13-profil, et billede pr.
   90 ms): hver overskrift, hvert afsnit og hvert citat steg 28 px op og
   tonede ind, 60 ms efter hinanden — præcis det, han kaldte skabelonens
   tegn 27/9 ("alt glider op, når man ruller"), og som forsiden blev
   renset for; historien blev glemt. Årstallet gled 34 px ind fra venstre.
   To billeder blev tørret ind fra siden med clip-path — en
   PowerPoint-overgang, og den samme klipning, der hakkede i forsidens
   #alt (10/10): den kan ikke lægges på skærmkortet, så billedet tegnes om
   hvert billede. "Rul ned" vippede i en uendelig løkke.

   Figmas egen side for en lang fortælling (LA3 Editorial, 79:312): "a
   film-like sequence … chapters where the image holds still and the story
   scrolls past it" — og om billederne (79:324): "no wipes, no slides".

   NU:
   1) TEKST OG ÅRSTAL STÅR STILLE. Det er noget, man læser.
   2) BILLEDERNE KOMMER SOM I EN FILM, hver på sin måde (kunden 14/9:
      "lad 1 af dem fade ind og de andre slide eller åbne"):
      · aabn  — LETTERBOX: to sorte bjælker trækker sig ud til top og bund,
                som filmen øverst (dens .hero-bjaelke)
      · fade  — op fra sort
      · glid  — en PANORERING: billedet glider på plads INDE i sin faste
                ramme (glid fra venstre, glid-h fra højre). Rammen står;
                det er kameraet, der bevæger sig, ikke en tørreklud
      Alle lysner op fra mørket. KUN transform og opacity — kompositoren
      flytter dem uden at tegne om. Ingen clip-path.
   3) "I DAG" GÅR FRA SORT-HVID TIL FARVE (data-farve). Fortidens billeder
      er sort-hvide; nutiden kommer i farver, når man når den (Figma 95:389:
      "image cross-fades monochrome → colour").
   4) ÅRSTALLET DÆMPES, NÅR KAPITLET ER FORBI — bundet til rullen, ikke et
      ur (Figma 71:247: "dimming past years"). Kun hvor browseren kan det;
      de andre har et årstal, der står.
   ⚠️ IntersectionObserveren i js/skal/historien.js sætter stadig .inde på
   alt med .ton — men det er kun billederne, der bruger den nu. */

/* 1) Teksten står. `.ton` er kun en krog for iagttageren. */
.hist .ton { opacity: 1; transform: none; }

/* 2) Billederne. Kun .h-foto.ton er skjult før — og kun billedet INDE i
   rammen, aldrig rammen selv: en ramme, der ikke kan ses, ser
   IntersectionObserver aldrig (målt 14/9). */
.hist .h-foto > * {
  opacity: .1;
  transition: opacity 1s cubic-bezier(.3, 0, .2, 1),
              transform 1.1s cubic-bezier(.2, .8, .2, 1),
              filter 1.6s ease .5s;
}
.hist .h-foto[data-ind="fade"] > * { opacity: 0; transition-duration: 1s; }
/* Panoreringen: billedet står 1,16 stort (8 % til overs i hver side, den
   samme faste skala som driften nedenfor), så kanten aldrig kan ses. */
.hist .h-foto[data-ind^="glid"] > * { scale: 1.16; }
.hist .h-foto[data-ind="glid"] > * { transform: translate3d(-6%, 0, 0); }
.hist .h-foto[data-ind="glid-h"] > * { transform: translate3d(6%, 0, 0); }
.hist .h-foto.inde > * { opacity: 1; transform: none; }

/* Letterbox: to bjælker i sidens sorte, 26 % hver, der trækker sig ud mod
   deres egen kant. scaleY og ikke højde: højde er layout. */
.hist .h-foto::before,
.hist .h-foto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  z-index: 1;
  background: var(--nat);
  pointer-events: none;
  transition: transform .95s cubic-bezier(.7, 0, .2, 1);
}
.hist .h-foto::before { top: 0; transform-origin: 50% 0; }
.hist .h-foto::after { bottom: 0; transform-origin: 50% 100%; }
.hist .h-foto.inde::before,
.hist .h-foto.inde::after { transform: scaleY(0); }
.hist .h-foto:not([data-ind="aabn"])::before,
.hist .h-foto:not([data-ind="aabn"])::after { display: none; }

/* 3) Nutiden i farver. */
.hist .h-foto[data-farve] > * { filter: grayscale(1); }
.hist .h-foto[data-farve].inde > * { filter: none; }

/* 4) Årstallet dæmpes, når kapitlet går ud af skærmen. Det er
   KAPITLETS tidslinje, ikke årstallets: på en computer står årstallet
   fast (sticky) og ville ellers aldrig "gå ud". Forbi = 35 %, aldrig
   væk — det skal stadig kunne læses, når man ruller tilbage. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hist .kap { view-timeline-name: --kapitel; }
    .hist .kap-aar {
      animation: h-forbi linear both;
      animation-timeline: --kapitel;
      animation-range: exit 0% exit 70%;
    }
    @keyframes h-forbi { to { opacity: .35; } }

    /* Motivet glider i rammen, mens man ruller — bundet til rullen, ikke
       til et ur. Kun hvor browseren kan det (Safari 26, Chrome 115+); de
       andre får et stillestående billede, og intet mangler. ⚠️ Skalaen er
       FAST (1,16) og animeres aldrig: det var zoomen, der var "hakkende og
       ik clean" (30/8). */
    .hist .h-foto img {
      scale: 1.16;
      animation: h-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes h-drift {
      from { translate: 0 -6.5%; }
      to   { translate: 0 6.5%; }
    }
  }
}

/* ⚠️ INTET MÅ STÅ SKJULT FOR DEN, DER HAR SLÅET BEVÆGELSE FRA (4/9-arret).
   Hver skjul-regel ovenfor har sin ophævelse her, med mindst samme vægt. */
@media (prefers-reduced-motion: reduce) {
  .hist .h-foto > *,
  .hist .h-foto[data-ind] > *,
  .hist .h-foto[data-farve] > * { opacity: 1; transform: none; filter: none; transition: none; }
  .hist .h-foto::before,
  .hist .h-foto::after { display: none; }
}

/* ---- BREDE SKÆRME -----------------------------------------
   Årstallet rykker ud i sin egen søjle og bliver stående, mens
   kapitlet ruller forbi — det er den ene ting, en stor skærm kan,
   som telefonen ikke kan. */
@media (min-width: 900px) {
  .hist .h-hero { padding: 150px 8vw 70px; min-height: 86vh; }
  .hist .kap {
    padding: 84px 8vw;
    display: grid;
    grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
    gap: 0 54px;
    align-items: start;
  }
  .hist .kap-hoved { position: sticky; top: 120px; }

  /* ⚠️ ETIKETTEN ER ET ORD, IKKE KUN ET ÅRSTAL (7/9).
     Kundens skærmbillede: "Dengang" lå hen over overskriften
     "Vaffelis, træterrasse og master lige bagved".

     MÅLT på 900, 1000, 1280 og 1600 px — og det er den samme
     fejl alle fire steder, fordi spalten har et fast loft: ved
     74 px fylder "Dengang" 301 px i en spalte på 210, altså
     91 px ud over kanten og 37 px ind over h2'en. De tre andre
     etiketter har luft til overs (I dag 164, 1710 145, Nu 99),
     og derfor kunne fejlen stå i to uger uden at nogen så den:
     den findes KUN på det ene kapitel.

     ⚠️ STØRRELSEN ER SAT EFTER DET LÆNGSTE ORD, ikke efter
     årstallet. Et årstal er fire tabular-cifre; et ord kan være
     dobbelt så bredt ved samme størrelse, og CSS kan ikke tælle
     tegn. Så enten skalerer etiketten efter det bredeste, den
     skal kunne rumme, eller også vælter den dag, nogen skriver
     "Sommeren 1985". Spalten er 260 px nu, og 58 px giver
     "Dengang" 234 — 26 px luft til kanten på alle fire bredder.

     ⚠️ OG TELEFONEN ER URØRT. Dernede er der intet grid:
     etiketten står over overskriften i fuld bredde, og
     designets clamp(40px, 11vw, 74px) er stadig den rigtige. */
  .hist .kap-aar { font-size: clamp(38px, 5.2vw, 58px); }
  .hist .h-foto { margin-inline: 0; border-radius: 4px; }
  .hist .kap p, .hist .h-citat { max-width: 46ch; }
  .hist .h-slut { padding: 96px 8vw 110px; }
  .hist .h-kilde { max-width: 62ch; margin-inline: auto; }
}