@charset "UTF-8";
/* ==========================================================================
   Castorlab – Parhuset
   Designsystem: SPEC §2 + SPEC-v2 (palett efter logotypens guld). Färger, typsnitt och rutnät som tokens nedan.
   Innehåll:
     0. Tokens och grund      5. Film                 10. Kontakt
     1. Typografi             6. Kliv in (sekvens)    11. Sidfot
     2. Knappar och länkar    7. Utforska             12. Dialoger
     3. Sidhuvud              8. Färg & material,     13. Arbetsversion
     4. Öppning, Parhuset,       Ute: årstid och ljus 14. Stilla läge (reducerad rörelse)
        plattan, ingångar     9. Kunden + Om
   ========================================================================== */

/* ---------- 0. Typsnitt (egna filer i fonts/, SIL OFL 1.1 – licenserna ligger bredvid) ----------
   Statiska instanser, inte variabla typsnitt: Familjen Grotesk i de vikter sidan använder och Newsreader kursiv
   (opsz 72, vikt 300), med överlappande konturer sammanslagna – annars syns inre linjer när texten ritas som
   kontur (Om-scenens andra löptextrad, -webkit-text-stroke). Teckenurval: latin (å ä ö é ü, – ” … € m.m.).
   Byggs om med C:\CLwork\build\fonts\make_fonts.py. Lägger du till en vikt i CSS: bygg och deklarera den här. */
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-450.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic-300.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Reserv med Familjen Grotesks mått (Arial, skalad): om typsnittet kommer sent hoppar inte raderna när det byts in.
   size-adjust = Familjens genomsnittliga bredd / Arials för svensk text (uppmätt), ascent/descent = 1230/270 per 1200. */
@font-face { font-family: "Familjen Grotesk reserv"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 95.5%; ascent-override: 107.3%; descent-override: 23.6%; line-gap-override: 0%; }
@font-face { font-family: "Familjen Grotesk reserv"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 92%; ascent-override: 111.4%; descent-override: 24.5%; line-gap-override: 0%; }

/* ---------- 0. Tokens och grund ---------- */
:root {
  --fasad: #ECE9E1;       /* sidans grund – parhusets fasadfärg */
  --ljus: #F6F4EF;        /* upphöjda ytor, text på mörkt */
  --takduk: #1E1F1D;      /* kolsvart bläck, mörka sektioner */
  --grafit: #56544F;      /* sekundär text på ljust (≥ 6,8:1) */
  --plat: #C9C3B8;        /* hårlinjer */
  --guld: #C5A776;        /* logotypens guld: ytor, LAB i ordmärket, markeringar. Kolsvart text på guld = 7,2:1 */
  --guld-text: #7A5C2E;   /* guld för liten text och tunna markeringar på ljus grund (≥ 5:1 mot --fasad) */
  --guld-ljus: #DDC28E;   /* guld på mörk grund (9,6:1 mot --takduk) */
  --guld-djup: #654B24;   /* guld över öppningens himmel (LAB i menyns ordmärke): ≥ 3:1 mot himlen, uppmätt */
  --om-rad: #D8D2C6;      /* Om-scenens löptext på ljus grund (början); på kolsvart #3A3A36 + guldkontur (om.js) */
  --fel: #8A3B2B;         /* felmeddelanden i formuläret (6,3:1) */

  --text: var(--takduk);
  --text-2: var(--grafit);
  --grund: var(--fasad);
  --linje: var(--plat);
  --fokus: var(--takduk);

  /* Yttermarginal. Sidled: aldrig under skärmens säkra yta (notch/Dynamic Island i liggande läge,
     viewport-fit=cover). Höjdmått (dialogernas maxhöjd) använder --marginal-bas, så att de inte krymper. */
  --marginal-bas: clamp(16px, 4vw, 64px);
  --marginal: max(var(--marginal-bas), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ranna: clamp(12px, 1.6vw, 24px);
  --sektion: clamp(96px, 16vh, 220px);
  --nav-h: 64px;
  --kund-svep: 78vh;      /* övertagandet Kunden → Om på dator: 18vh text ut + 60vh svep (om.js, kund.js, §9/§9b) */

  --f-sans: "Familjen Grotesk", "Familjen Grotesk reserv", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --f-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-h1: clamp(2.4rem, 5.8vw, 6.75rem);
  --fs-jatte: clamp(4.5rem, 19vw, 21rem);
  --fs-h2: clamp(2rem, 3.9vw, 4.25rem);   /* h1/h2 ≈ 1,25–1,35 på dator: öppningens tes är toppen (jury J3) */
  --fs-ingress: clamp(1.35rem, 1.1rem + 0.75vw, 1.6rem);
  --fs-brod: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-mono: 11.5px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-ut: cubic-bezier(.16, 1, .3, 1);
  --ease-kvart: cubic-bezier(.25, 1, .5, 1);   /* ease-out-quart: rubrikernas rader, introt, ordmärket */
  --ease-inout: cubic-bezier(.65, 0, .35, 1); /* in-ut: växlingar som går fram och tillbaka (cirkeln i öppningen) */
  /* Rörelsespråket (SPEC-v3 §8.2): samma fyra tider överallt – CSS här, GSAP/JS i miljo.js (EASE, DUR). */
  --dur-snabb: .2s;   /* tryck, små färgbyten, följeslagaren */
  --dur-ui: .35s;     /* knappar, menyn, toningar i kontroller */
  --dur-lang: .55s;   /* större ytor: affischer, linjer som ritas fram, sidhuvudet */
  --dur-in: .9s;      /* in-rörelser: rubrikernas rader, ordmärket */

  color-scheme: light;
}
@media (max-width: 899px) { :root { --nav-h: 56px; } }

.tema-mork {
  --text: var(--ljus);
  --text-2: rgba(246, 244, 239, .72);
  --linje: rgba(246, 244, 239, .2);
  --fokus: var(--guld-ljus);
  --grund: var(--takduk);
  --fel: #F0A08A;         /* felmeddelanden på mörk grund (7,9:1) */
  color: var(--text);
  background: var(--takduk);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
  background: var(--fasad);
  /* Ingen grå/blå tryckrektangel någonstans (Android/iOS) – varje kontroll har i stället ett eget :active-läge
     (avsnitt 2) och fokusringen (:focus-visible). Ärvs av alla element. */
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fasad);
  color: var(--takduk);
  font-family: var(--f-sans);
  font-size: var(--fs-brod);
  line-height: 1.55;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol, ul, address { margin: 0; }
address { font-style: normal; }
ol, ul { padding: 0; list-style: none; }
main:focus { outline: none; }

/* Fokusring: 2 px kolsvart på ljus grund, 2 px ljust guld på mörk grund (--fokus sätts per tema). */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
/* Över fotografi (öppningen, genomskinlig meny, hopplänken högst upp): mörk ring med ljus kant – ≥ 3:1 mot allt i bilden. */
.hero :focus-visible,
.sidhuvud:not(.sidhuvud--fast) :focus-visible,
.hoppa:focus-visible {
  outline: 2px solid var(--takduk);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ljus);
}
::selection { background: var(--guld); color: var(--takduk); }

.visuellt-dold {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

.hoppa {
  position: fixed; left: var(--marginal); top: 10px; z-index: 200;
  padding: 10px 18px; border-radius: 999px;
  background: var(--takduk); color: var(--ljus); text-decoration: none; font-weight: 500;
  transform: translateY(-160%); transition: transform var(--dur-snabb) var(--ease);
}
.hoppa:focus-visible, .hoppa:focus { transform: none; }

/* 12-kolumnsrutnät. På mobil spänner allt över hela bredden. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ranna);
  padding-inline: var(--marginal);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* ---------- 1. Typografi ---------- */
.mono, .etikett {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.etikett { color: var(--text-2); display: flex; gap: 1.1em; align-items: baseline; }

.jatteord {
  font-size: var(--fs-jatte);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: .86;
  margin-left: -0.045em; /* optisk linjering av versalens sidoluft mot marginalen */
}
.rubrik-2, .hero__rubrik {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: .95;
}
.rubrik-2 { font-size: var(--fs-h2); text-wrap: balance; }
.ingress {
  font-size: var(--fs-ingress);
  line-height: 1.28;
  letter-spacing: -0.012em;
  font-weight: 450;
  text-wrap: pretty;
  max-width: 30em;
}
.brodtext, .brodtext p { max-width: 38em; text-wrap: pretty; }
.brodtext p + p { margin-top: 1em; }

.bildtext {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4em 1.4em;
  align-items: baseline;
  padding-top: 12px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--text-2);
}
.bildtext__nr { color: var(--text); }
.bildtext .mono:not(.bildtext__nr) { grid-column: 2; }

/* ---------- 2. Knappar och länkar ---------- */
.knapprad { display: flex; flex-wrap: wrap; gap: 12px; }
.knapp {
  --kh: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--kh);
  padding: 0 1.45em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-snabb) var(--ease), color var(--dur-snabb) var(--ease), border-color var(--dur-snabb) var(--ease), opacity var(--dur-ui) var(--ease), visibility var(--dur-ui), scale var(--dur-snabb) var(--ease);
}
/* Tryck (pekskärm och mus): en liten, tydlig återkoppling i stället för webbläsarens tryckrektangel.
   scale (egen egenskap) – krockar inte med magnetens transform (pekare.js). */
.knapp:active, .hero__underlag:active, .spelare__knapp:active, .hoppa:active, .arbetsbricka__knapp:active { scale: .965; }
.spelare__start:active { scale: .97; }
.chip:active .chip__yta { background-color: rgba(30, 31, 29, .08); }
.chip:active input:checked + .chip__yta { background-color: #3A3B37; }
.ingang:active { background-color: rgba(30, 31, 29, .04); }
.textlank:active, .sidhuvud__nav a:active, .sidhuvud__logga:active, .menyark a:active, .kontakt__lank:active,
.sidfot__kontakt a:active, .sidhuvud__meny:active, summary:active { opacity: .62; }
/* Pilar som pekar ut (↗): en liten knuff vid hovring/fokus */
.pil-ut { display: inline-block; transition: translate var(--dur-ui) var(--ease-ut); }
a:hover .pil-ut, a:focus-visible .pil-ut { translate: 2px -2px; }
.knapp--liten { --kh: 44px; font-size: .9375rem; padding: 0 1.2em; } /* 44 px pekyta även för de små knapparna */
/* Primär på ljus grund: kolsvart piller. På mörk grund och över öppningsbilden: guld med kolsvart text (7,2:1). */
.knapp--primar { background: var(--takduk); color: var(--ljus); }
.knapp--primar:hover { background: #3A3B37; }
.knapp--guld,
.tema-mork .knapp--primar,
.sidhuvud--mork .knapp--primar { background: var(--guld); color: var(--takduk); }
.knapp--guld:hover,
.tema-mork .knapp--primar:hover,
.sidhuvud--mork .knapp--primar:hover { background: var(--guld-ljus); }
.knapp--kontur { border-color: currentColor; color: var(--text); background: transparent; }
.knapp--kontur:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.knapp--kontur-ljus { border-color: rgba(246, 244, 239, .85); color: var(--ljus); background: rgba(30, 31, 29, .12); }
.knapp--kontur-ljus:hover { background: var(--ljus); color: var(--takduk); }
.knapp[aria-busy="true"] { cursor: progress; opacity: .7; }

/* Textlänk: tunn understrykning; vid hovring ritas en guldlinje fram från vänster över den (och den tunna tonas
   bort). --tl-pad = den osynliga utfyllnaden för en ca 44 px hög pekyta utan att layouten flyttar sig. */
.textlank {
  --tl-pad: 9px;
  --tl-guld: var(--guld-text);
  border: 0; padding: 0;
  color: var(--text); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: currentColor;
  padding-block: var(--tl-pad); margin-block: calc(-1 * var(--tl-pad));
  background: linear-gradient(var(--tl-guld), var(--tl-guld)) 0 calc(100% - var(--tl-pad) + .06em) / 0% 2px no-repeat;
  transition: background-size var(--dur-lang) var(--ease-ut), text-decoration-color var(--dur-snabb) var(--ease);
}
.textlank:hover { text-decoration-color: transparent; background-size: 100% 2px; }
.tema-mork .textlank { --tl-guld: var(--guld-ljus); }

/* ---------- 3. Sidhuvud ---------- */
.sidhuvud {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--takduk);
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), transform var(--dur-lang) var(--ease-ut);
}
/* Döljs när man scrollar nedåt, kommer tillbaka uppåt (sidhuvud.js, bara med rörelse). Alltid synlig med fokus i menyn. */
.sidhuvud--dold { transform: translateY(calc(-100% - 2px)); }
.sidhuvud--dold:focus-within { transform: none; }
.sidhuvud__rad {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding-inline: var(--marginal);
}
/* --nav-rgb (sidhuvud.js): sidans grund under menyn när den glider mellan ljust och mörkt (grund.js) – menyn har då
   samma färg som grunden. Annars (egna scener, stilla läge) de fasta färgerna. */
/* Ingen backdrop-filter: oskärpan över den levande himlen (WebGL) kostade 4–22 tappade bildrutor i första scrollen
   efter en kall laddning (motion M1). I stället en täckande grund (ingen alfa: text som scrollar under menyn skymtar
   annars igenom skarpt, utan oskärpa). */
.sidhuvud--fast {
  background: rgb(var(--nav-rgb, 236 233 225));
  box-shadow: 0 1px 0 var(--plat);
}
.sidhuvud--mork { color: var(--ljus); --fokus: var(--guld-ljus); }
.sidhuvud--mork.sidhuvud--fast { background: rgb(var(--nav-rgb, 30 31 29)); box-shadow: 0 1px 0 rgba(246, 244, 239, .14); }
/* Logotypen (samma på varje grund): den runda vita brickan med guldmärket + ordmärket CASTORLAB (vektor, spårat ur
   logotypens mask). Färgerna följer grunden under menyn – alla uppmätta ≥ 3:1:
   över öppningens himmel  CASTOR kolsvart · LAB --guld-djup (himlen är för ljus för logotypens guld)
   ljus grund (fast meny)  CASTOR kolsvart · LAB --guld-text
   mörk grund              CASTOR ljus     · LAB --guld (som i logotypen)
   mellangrå grund (--nav-rgb, t.ex. Om-scenen när den mörknar): sidhuvud.js sätter --lo-lab inline till första
   färgen som når 3:1 (--guld-djup / --guld-ljus, annars samma färg som CASTOR). */
.sidhuvud {
  --lo-castor: var(--takduk); --lo-lab: var(--guld-djup);
  --lo-h: 15px;          /* ordmärkets höjd; bredden = höjden × 8,633 (2400 / 278) */
}
.sidhuvud--fast { --lo-lab: var(--guld-text); }
.sidhuvud--mork { --lo-castor: var(--ljus); --lo-lab: var(--guld); }
/* Liggande telefon: den breda bildens himmel bakom ordmärket är ljusare (--guld-djup gav bara 2,6–2,7:1) – ett
   mörkare guld (#533C1C, ca 3,3:1 mot den uppmätta himlen). Bara den genomskinliga menyn högst upp i öppningen. */
@media (orientation: landscape) and (max-height: 520px) {
  .sidhuvud:not(.sidhuvud--fast):not(.sidhuvud--mork) { --lo-lab: #533C1C; }
}
/* Länkens ruta rymmer brickan (5 px utfyllnad, negativ marginal – samma layout): fokusringen går runt hela logotypen. */
.sidhuvud__logga {
  display: inline-flex; align-items: center;
  text-decoration: none;
  padding: 5px 8px 5px 5px; margin: -5px auto -5px -5px;
  border-radius: 999px;
}
.sidhuvud__logga img {
  box-sizing: content-box; width: 40px; height: 40px;
  padding: 5px; margin: -5px; border-radius: 999px;
  background: #FBFAF7;
  box-shadow: 0 0 0 1px rgba(30, 31, 29, .08), 0 2px 10px rgba(22, 23, 21, .08);
}
.sidhuvud--mork .sidhuvud__logga img { box-shadow: 0 0 0 1px rgba(246, 244, 239, .2); }
/* Hovring: samma understrykning som menylänkarna ritas fram under ordmärket. */
.sidhuvud__ord {
  display: block; flex: none; overflow: hidden;
  width: calc(var(--lo-h) * 8.633); margin-left: 14px; padding-block: 6px;
  background: linear-gradient(var(--lo-castor), var(--lo-castor)) 0 100% / 0 1px no-repeat;
  transition: width var(--dur-lang) var(--ease-ut), margin-left var(--dur-lang) var(--ease-ut), opacity var(--dur-ui) var(--ease), background-size var(--dur-ui) var(--ease);
}
.sidhuvud__logga:hover .sidhuvud__ord { background-size: 100% 1px; }
.sidhuvud__ordmarke { display: block; width: calc(var(--lo-h) * 8.633); height: var(--lo-h); overflow: visible; }
.sidhuvud__castor { fill: var(--lo-castor); transition: fill var(--dur-ui) var(--ease); }
.sidhuvud__lab { fill: var(--lo-lab); transition: fill var(--dur-ui) var(--ease); }
.sidhuvud__nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.sidhuvud__nav a {
  text-decoration: none; font-size: .9875rem; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-block: 4px;
  transition: background-size var(--dur-ui) var(--ease);
}
.sidhuvud__nav a:hover { background-size: 100% 1px; }
/* Pekyta 44 px hög utan att länkarna flyttar sig (ingen överlappning med grannarna eller knappen) */
.sidhuvud__nav a { position: relative; }
.sidhuvud__nav a::before { content: ""; position: absolute; inset: -8px -9px; }
/* Pekskärm (surfplatta med menyraden): länkarna själva 44 px höga; understrykningen står kvar där den stod
   (textens nederkant + 4 px). */
@media (pointer: coarse) {
  .sidhuvud__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; background-position: 0 calc(100% - 8px); }
  .sidhuvud__nav a::before { inset: 0 -9px; }
}
.sidhuvud__cta { margin-left: clamp(10px, 2vw, 28px); }
/* Medan öppningen syns: knappen döljs (öppningen har samma knapp). Likaså när Kontakt syns och därefter
   (sidhuvud--kontakt): knappen leder dit man redan är, och formuläret har sin egen knapp. Bara med JS (sidhuvud.js
   sätter klasserna). Med rörelse (dator) glider länkarna åt höger in på knappens plats så att raden slutar vid
   marginalen (--cta-plats mäts av sidhuvud.js); utan rörelse behålls platsen – inget hoppar. */
.js :is(.sidhuvud--hero, .sidhuvud--kontakt) .sidhuvud__cta { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 900px) {
  .rorelse .sidhuvud__nav { transition: transform var(--dur-ui) var(--ease); }
  /* Visas: länkarna glider först, sedan tonas knappen in. Fördröjningarna följer .knapp:s transition-lista
     (bakgrund, färg, kant, opacitet, synlighet). */
  .rorelse .sidhuvud__cta { transition-delay: 0s, 0s, 0s, .2s, .2s; }
  /* Dold: knappen tonas ut först, sedan glider länkarna ut till marginalen. */
  .rorelse :is(.sidhuvud--hero, .sidhuvud--kontakt) .sidhuvud__nav { transform: translateX(var(--cta-plats, 0px)); transition-delay: .2s; }
  .rorelse :is(.sidhuvud--hero, .sidhuvud--kontakt) .sidhuvud__cta { transition-delay: 0s; }
}
.sidhuvud__meny {
  display: none;
  align-items: center; gap: 10px;
  height: 44px; padding: 0 4px 0 10px;
  background: none; border: 0;
  font-weight: 500; font-size: .9375rem;
}
.sidhuvud__meny-streck { position: relative; width: 18px; height: 8px; }
.sidhuvud__meny-streck::before, .sidhuvud__meny-streck::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-ui) var(--ease), top var(--dur-ui) var(--ease);
}
.sidhuvud__meny-streck::before { top: 0; }
.sidhuvud__meny-streck::after { top: 6.5px; }
.sidhuvud__meny[aria-expanded="true"] .sidhuvud__meny-streck::before { top: 3.25px; transform: rotate(45deg); }
.sidhuvud__meny[aria-expanded="true"] .sidhuvud__meny-streck::after { top: 3.25px; transform: rotate(-45deg); }

.menyark {
  background: var(--fasad); color: var(--takduk);
  border-top: 1px solid var(--plat); border-bottom: 1px solid var(--plat);
  padding: 8px var(--marginal) 28px;
  --fokus: var(--takduk);
}
.menyark li { border-bottom: 1px solid var(--plat); }
.menyark a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0 14px;
  font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  text-decoration: none;
}

@media (max-width: 899px) {
  .sidhuvud__nav { display: none; }
  .sidhuvud__meny { display: inline-flex; }
  .sidhuvud__cta { margin-left: 0; }
  .sidhuvud__logga img { width: 34px; height: 34px; padding: 5px; margin: -5px; }
  /* Länken själv 44 × 44 (utfyllnad + negativ marginal: samma layout och samma märke); fokusringen följer plattan. */
  .sidhuvud__logga { padding: 5px; margin: -5px auto -5px -5px; border-radius: 999px; }
  .sidhuvud__logga:focus-visible { outline-offset: 0; }
  .sidhuvud { --lo-h: 12.5px; }
  .sidhuvud__ord { margin-left: 11px; }
  /* Knappen står ALLTID utanför flödet, till vänster om Meny (--meny-b = Meny-knappens bredd, sidhuvud.js): när den
     visas eller döljs (öppningen, Kontakt) tonas den på stället – Meny och logotypen flyttar sig aldrig (CLS 0). */
  .sidhuvud__rad { position: relative; }
  .sidhuvud__cta { position: absolute; top: 50%; translate: 0 -50%; right: calc(var(--marginal) + var(--meny-b, 88px) + 12px); z-index: 1; }
}
/* Smal mobil: logotyp, knappen och Meny ryms inte på en rad. Medan knappen syns (efter öppningen, före Kontakt)
   döljs ordmärket (brickan står kvar) – i öppningen och vid Kontakt står hela logotypen. Ordmärkets ruta står kvar
   (ingen bredd animeras – inget i raden flyttar sig); det klipps bort från höger och tonas, knappen ligger över. */
@media (max-width: 479px) {
  /* tillbaka: ordmärket ritas fram från vänster först när knappen nästan har tonats bort (ingen överlappning) */
  .sidhuvud__ord { transition: opacity var(--dur-ui) var(--ease) var(--dur-snabb), clip-path var(--dur-ui) var(--ease-ut) var(--dur-snabb), visibility 0s, background-size var(--dur-ui) var(--ease); }
  .js .sidhuvud:not(.sidhuvud--hero):not(.sidhuvud--kontakt) .sidhuvud__ord {
    opacity: 0; clip-path: inset(0 100% 0 0); visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease), clip-path var(--dur-ui) var(--ease-ut), visibility 0s linear var(--dur-ui), background-size var(--dur-ui) var(--ease);
  }
  .sidhuvud__cta { z-index: 2; }
}
@media (max-width: 360px) {
  .sidhuvud__cta { font-size: .875rem; padding: 0 1em; }
}

/* ---------- 4. Öppning ---------- */
.hero {
  position: relative; z-index: 2;
  height: 100vh; height: 100svh; min-height: 560px;
  color: var(--ljus);
  --fokus: var(--guld-ljus);
  /* Bildens geometri – används för att hålla ordmärket i himlen ovanför taket (se nedan).
     --hero-kvot = bildens bredd/höjd, --hero-tak = takets överkant som andel av bildhöjden uppifrån. */
  --hero-kvot: 1.7778;  /* hero-desktop: 3200×1800 */
  --hero-tak: 0.375;    /* uppmätt: 0,383 */
}
/* Den breda bilden (från 2:1). hero.js skriver in den exakta kvoten när bilden har laddat.
   Saknas filerna sätts .hero--utan-bred (index.html) och datorbildens värden gäller. */
@media (min-aspect-ratio: 2/1) {
  /* hero-bred: 2560×1093 (2,342:1), takets överkant uppmätt 0,346 */
  .hero:not(.hero--utan-bred) { --hero-kvot: var(--hero-bred-kvot, 2.3422); --hero-tak: 0.34; }
}
/* --hero-for: renderingens egna färger (himmel → fasad → asfalt, radmedel ur hero-desktop/-bred/-mobil) – det enda som
   syns innan bilden är avkodad (ingen grå platta, ingen mörk skugga på tom yta – se 15c). */
.hero { --hero-for: linear-gradient(#9db2c9 0%, #a9bccf 34%, #a2a19c 50%, #9c968c 60%, #6f675e 68%, #6b665f 100%); }
@media (min-aspect-ratio: 2/1) { .hero:not(.hero--utan-bred) { --hero-for: linear-gradient(#9cb2c9 0%, #abbccf 30%, #a7a7a3 44%, #847c71 58%, #7a7569 82%, #4c4744 100%); } }
@media (orientation: portrait) and (max-width: 1199px) { .hero { --hero-for: linear-gradient(#9db2ca 0%, #a6bbd0 18%, #aca499 30%, #b0a89e 46%, #8a8882 60%, #8a827a 72%, #4a4643 78%, #444341 100%); } }
.hero__ram {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--hero-for);
  clip-path: inset(0px 0px 0px 0px);
}
/* Kameran skjuts in med scrollen (hero.js, högst 1,035) med origo i bildens nederkant: marken och dörrarna står kvar. */
/* Inramningen vid scroll (hero.js): tre kanter i sidans grundfärg glider in över bildens överkant och sidor –
   transform (kompositorn), ingen clip-path som målas om per bildruta. Över bilden, skuggan och ordmärket (som en klippning). */
.hero__kant { position: absolute; z-index: 3; background: var(--fasad); pointer-events: none; will-change: transform; }
.hero--forbi .hero__kant, .hero--forbi .hero__ram::after { will-change: auto; } /* förbi öppningen: inga lager i onödan (hero.js) */
.hero__kant--topp { left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 12px); transform-origin: 50% 0; transform: scaleY(0); }
.hero__kant--v { left: 0; top: 0; bottom: 0; width: var(--marginal); transform-origin: 0 50%; transform: scaleX(0); }
.hero__kant--h { right: 0; top: 0; bottom: 0; width: var(--marginal); transform-origin: 100% 50%; transform: scaleX(0); }
/* Mobil stående: kanten nedifrån (hero.js, 12–47 % av öppningens scroll) – fasaden och dörrarna lämnar sist. */
/* 2 px under ramens nederkant (klipps bort av overflow): det skalade lagrets kantutjämnade nederkant hamnar utanför
   bilden – annars syntes bildens sista pixelrad som en mörk hårlinje (upp till 32 nivåer) tvärs över Parhuset-texten.
   Den synliga höjden är fortfarande 45 % (hero.js mäter den så: ramens höjd − kantens offsetTop). */
.hero__kant--bunn { display: none; left: 0; right: 0; bottom: -2px; height: calc(45% + 2px); transform-origin: 50% 100%; transform: scaleY(0); }
@media (max-width: 899px) and (orientation: portrait) { .hero__kant--bunn { display: block; } }
.hero__bild { position: absolute; inset: 0; transform-origin: 50% 100%;
  isolation: isolate; /* egen stapelordning: linjeritningens z-index stannar under skuggan, ordmärket och texten */ }
/* .hero__linjer = WebGL-duken (herolinjer.js): bläcket och den levande himlen (himmel.js) – genomskinlig över huset. */
.hero__bild picture, .hero__bild img, .hero__linjer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%; /* beskärs alltid uppifrån (himlen) – huset och marken syns hela */
}
/* Lokal skugga bakom undertexten och knapparna (nere till vänster) – resten av bilden behåller kvällsljuset.
   Dimensionerad för minst 4,5:1 för undertexten (uppmätt ur renderade pixlar, GUIDE.md). */
.hero__ram::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 58% at 14% 100%, rgba(22, 23, 21, .8) 0%, rgba(22, 23, 21, .66) 44%, rgba(22, 23, 21, .3) 74%, rgba(22, 23, 21, 0) 100%),
    linear-gradient(to top, rgba(22, 23, 21, .34) 0%, rgba(22, 23, 21, 0) 30%);
  pointer-events: none;
  opacity: var(--skugga, 1); /* hero.js tonar ut skuggan efter texten (borta vid 40 % av scrollen) */
  will-change: opacity; /* eget lager: toningen målar inte om bilden */
}
.hero__ingress { text-shadow: 0 1px 24px rgba(22, 23, 21, .35); }
@media (max-width: 899px) {
  .hero__ram::after {
    background: linear-gradient(to top, rgba(22, 23, 21, .86) 0%, rgba(22, 23, 21, .74) 20%, rgba(22, 23, 21, .42) 32%, rgba(22, 23, 21, 0) 45%);
  }
}
/* Ordmärkets bokstäver (avslutningen, site.css §11 och §15b): logotypens masker */
.ordmarke__del { position: absolute; inset: 0; background: var(--takduk);
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.ordmarke__del--castor { --mask: url("../media/logo/wordmark-castor-mask.png"); }
.ordmarke__del--lab { --mask: url("../media/logo/wordmark-lab-mask.png"); background: var(--guld); }

/* Kompositionen (SPEC-v4 §1): huset och rubriken bär öppningen.
   – Etiketten och rubriken står i HIMLEN mellan menyn och taket, kolsvart (≥ 6,6:1 mot himlen, uppmätt), vänsterställda
     i marginalen under logotypen. Rubrikens storlek räknas ur himlens höjd, så den aldrig når taket.
   – Undertexten och knapparna står nere till vänster över den mörka marken/carporten – aldrig över dörrarna.
   – Liggande mobil (låg skärm): himlen är för smal – allt nere till vänster.
   Takets läge på skärmen: bilden täcker ytan (cover) och är förankrad nedtill, så tak-y = skärmhöjd − (1 − tak) ×
   bildhöjd, där bildhöjd = max(skärmhöjd, skärmbredd / kvot). Mobilbilden (stående) har egna värden nedan. */
.hero {
  --bild-h: max(100svh, 100vw / var(--hero-kvot));
  --tak-y: calc(100svh - (1 - var(--hero-tak)) * var(--bild-h));
  --himmel-h: calc(var(--tak-y) - var(--nav-h));
  --ord-luft: clamp(24px, 6.5vh, 96px);   /* fri himmel under rubriken (ovanför taket) */
  --huvud-gap: 14px;
  /* Rubrikens storlek: ryms i himlen (två rader à 0,95 + nedstaplar ≈ 2,1 em, plus etiketten), högst ~5 vw,
     och de två raderna (≈ 10,1 em) tar högst 72 % av raden. */
  --h1-max: min(6.5rem, 5.1vw);
  --h1-min: 2.4rem;
  --h1-bredd: calc((100vw - 2 * var(--marginal)) * .72 / 10.1);
}
/* Mobilbilden (stående, samma villkor som <source> i index.html): 1440×2560, taket vid 0,238, utsnitt 50 % 30 %. */
@media (orientation: portrait) and (max-width: 1199px) {
  .hero {
    --bild-h: max(100svh, 100vw / .5625);
    --tak-y: calc((100svh - var(--bild-h)) * .3 + .238 * var(--bild-h));
    --ord-luft: clamp(12px, 3vh, 40px);
    --huvud-gap: 8px;
    --h1-max: 4rem;
    --h1-min: 1.6rem;
    --h1-bredd: calc((100vw - 2 * var(--marginal)) / 10.3);
  }
}

.hero__innehall {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto auto; align-items: end;
  padding-bottom: clamp(24px, 5.5vh, 64px);
  pointer-events: none; /* ytan mellan texterna tillhör bilden (bläcket, pekarens "Rör") */
}
.hero__innehall > * { pointer-events: auto; }
.hero__huvud {
  grid-row: 1; align-self: start;
  height: var(--himmel-h); margin-top: var(--nav-h);
  display: flex; flex-direction: column; justify-content: safe center; gap: var(--huvud-gap);
  padding-bottom: calc(var(--ord-luft) * .3); /* något ovanför mitten av himlen */
  color: var(--takduk);
}
.hero__etikett { color: var(--takduk); font-weight: 500; }
.hero__huvud .hero__rubrik {
  font-size: clamp(var(--h1-min), min(var(--h1-bredd), (var(--himmel-h) - var(--ord-luft) - var(--huvud-gap) - 17px) / 2.1), var(--h1-max));
}
/* Den breda bilden (från 2:1): gatans kantsten ligger vid 0,931 av bildhöjden. Bildytan sticker ut --gata-ut (4svh)
   under öppningens nederkant (ramen klipper), så att den skuggade asfalten under kantstenen mest hamnar utanför
   skärmen – annars läser den som en svart list under knapparna (och som en sockel när ramen bildas). Bildhöjden och
   takets läge räknas med den extra höjden (rubriken i himlen följer); bläcket och himlen mäter bildytan själva
   (herolinjer.js/himmel.js). Knapparna hålls 14 px ovanför kantstenen i alla breda format (även 3440×1440).
   Gäller inte liggande mobiler (max 500 px höga). */
@media (min-aspect-ratio: 2/1) and (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .hero:not(.hero--utan-bred) { --gata-ut: 4svh; --bild-h: max(100svh + var(--gata-ut), 100vw / var(--hero-kvot)); --tak-y: calc(100svh + var(--gata-ut) - (1 - var(--hero-tak)) * var(--bild-h)); }
  .hero:not(.hero--utan-bred) .hero__bild { bottom: calc(-1 * var(--gata-ut)); }
  .hero:not(.hero--utan-bred) .hero__innehall { padding-bottom: max(clamp(24px, 5.5vh, 64px), calc(.069 * var(--bild-h) - var(--gata-ut) + 14px)); }
}
.hero__text { grid-row: 3; display: grid; gap: clamp(16px, 2.2vh, 24px); }
.hero__rubrik { font-size: var(--fs-h1); text-wrap: balance; }
.hero__ingress { font-size: var(--fs-ingress); line-height: 1.3; max-width: 25em; color: rgba(246, 244, 239, .94); font-weight: 450; text-wrap: pretty; }
.hero__notiser { grid-row: 4; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero__notiser:empty { display: none; } /* annars tar den tomma raden ett radavstånd nedtill */
/* Texten tonas ut vid scroll men knapparna ligger kvar i tabbordningen: visa den direkt vid tangentbordsfokus
   (hero.js scrollar dessutom tillbaka till toppen). */
.hero__innehall:has(:focus-visible) { opacity: 1 !important; transform: none !important; }
.hero:has(.hero__innehall :focus-visible) .hero__ram { --skugga: 1 !important; } /* och skuggan bakom texten */
@media (min-width: 900px) {
  .hero__huvud { grid-column: 1 / span 10; }
  .hero__text { grid-column: 1 / span 8; }
  .hero__notiser { grid-column: 1 / -1; }
}
/* Dator: undertexten hålls smal (högst 28vw) så att den slutar före den vänstra entrédörren, som står vid
   ca 34–37 % av bredden i alla vanliga bildförhållanden (16:9: dörrens vänsterkant vid 35,3 % av bildbredden). */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .hero__ingress { font-size: clamp(1.125rem, .9rem + .45vw, 1.375rem); max-width: min(25em, 28vw); }
}
@media (max-width: 899px) {
  .hero .knapp { --kh: 46px; }
}
/* Mobilens stående rendering: justera utsnittet här när en ny bild kommer (x y, t.ex. "50% 30%").
   Påverkar bara bildens läge i höjdled när bilden är högre än skärmen (och i sidled när den är bredare). */
.hero { --hero-mobil-pos: 50% 30%; }
/* Samma villkor som de stående <source> i index.html (även stående surfplattor upp till 1199 px). */
@media (orientation: portrait) and (max-width: 1199px) {
  .hero__bild img { object-position: var(--hero-mobil-pos); }
}
/* Mobil: rubriken i himlen, undertexten och knapparna i nedre fjärdedelen över gatan – dörrarna fria mellan dem. */
@media (max-width: 767px) {
  .hero__innehall { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .hero__text { gap: 12px; }
  .hero__ingress { font-size: 1rem; line-height: 1.4; max-width: 24em; }
  .hero .knapprad { gap: 8px; padding-top: 2px; }
  .hero .knapp { --kh: 44px; flex: 1 1 auto; padding: 0 .9em; font-size: .9063rem; }
}
/* Stående surfplatta: samma komposition, större text */
@media (orientation: portrait) and (min-width: 768px) {
  .hero__ingress { font-size: 1.1875rem; max-width: 26em; }
}
/* Stående surfplatta 900–1199 px: undertexten bryts på fyra rader som slutar före ritningens ljusa del (läget
   "Visa modellen", ≥ 5,7:1 uppmätt vid 1024×1366) – skuggan och dörrarna orörda. */
@media (orientation: portrait) and (min-width: 900px) and (max-width: 1199px) {
  .hero__ingress { max-width: 21em; }
}
/* Låg stående mobil (t.ex. 320 × 568): himlen är bara ~80 px – rubriken krymper och luften under den tas bort,
   undertexten blir något mindre. */
@media (orientation: portrait) and (max-height: 620px) {
  .hero { --ord-luft: 4px; --huvud-gap: 6px; --h1-min: 1.5rem; }
  .hero__ingress { font-size: .9375rem; line-height: 1.36; }
  .hero__text { gap: 10px; }
  .hero__underlag { margin-bottom: 10px; }
  /* Knappen står på väggen MELLAN de två dörrarna (inte över den blå) – båda dörrarna syns hela (uppmätt vid 320×568). */
  .hero .hero__underlag { justify-self: center; padding: 0 .85em 0 .75em; gap: .55em; } /* .hero: före grundregeln (§4a) */
  /* Ritningen visas (ljus linjeritning): en tätare skugga bakom undertexten – ≥ 7:1 (uppmätt); bildläget oförändrat. */
  .hero:has(.hero__underlag.is-pa) .hero__ram::after { background: linear-gradient(to top, rgba(22, 23, 21, .86) 0%, rgba(22, 23, 21, .8) 28%, rgba(22, 23, 21, .7) 36%, rgba(22, 23, 21, 0) 48%); }
}
/* Knapparna sida vid sida så länge de ryms (ned till ca 340 px), annars staplade och kompakta. */
@media (max-width: 374px) {
  .hero .knapp { font-size: .875rem; padding: 0 .7em; }
}
@media (max-width: 339px) {
  .hero .knapprad { gap: 6px; }
  .hero .knapp { flex-basis: 100%; }
}
/* Liggande mobil (låg skärm): en egen komposition – etiketten, rubriken och knapparna (en rad) nere till vänster i
   ljus text, dörrarna och marken framför dem fria till höger om texten. Himlen är för smal för rubriken. Undertexten
   döljs (rubriken bär budskapet), skuggan ligger bara nere till vänster bakom texten. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero__ram::after {
    background: radial-gradient(ellipse 64% 112% at 0% 100%, rgba(22, 23, 21, .88) 0%, rgba(22, 23, 21, .78) 48%, rgba(22, 23, 21, .4) 76%, rgba(22, 23, 21, 0) 100%);
  }
  .hero__innehall { grid-template-rows: 1fr auto auto auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .hero__huvud { grid-row: 2; grid-column: 1 / -1; height: auto; margin: 0 0 12px; padding: 0; gap: 6px; color: var(--ljus); }
  .hero__etikett { color: rgba(246, 244, 239, .9); text-shadow: 0 0 12px rgba(22, 23, 21, .5); }
  .hero__huvud .hero__rubrik { font-size: clamp(1.4rem, 7.4svh, 2.1rem); text-shadow: 0 1px 24px rgba(22, 23, 21, .35); }
  .hero__text { grid-row: 3; gap: 10px; }
  /* Undertextens första led står kvar (vad Castorlab gör), andra ledet döljs: rubriken + en kort rad + knapparna. */
  .hero__ingress { display: block; font-size: .875rem; line-height: 1.35; max-width: 21em; }
  .hero__ingress-mer { display: none; }
  .hero .knapprad { flex-wrap: nowrap; gap: 8px; }
  .hero .knapp { --kh: 44px; flex: none; padding: 0 1em; font-size: .8438rem; }
}
/* Alla liggande mobiler visar den breda bilden (<source> i index.html, dörrarna vid 40–59 % av bilden): bildytan är
   125 % bred (förankrad till vänster, beskärs till höger) och bilden står mitt i höjdled – dörrarna hamnar i högra
   halvan (ca 50–75 % av skärmbredden), taket under ordmärket. Linjeritningen följer samma yta (herolinjer.js räknar
   från bildytan och bildens object-position). Saknas den breda bilden (.hero--utan-bred): datorbilden som förut. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero:not(.hero--utan-bred) .hero__bild { right: -25%; }
  .hero:not(.hero--utan-bred) :is(.hero__bild picture, .hero__bild img, .hero__linjer) { object-position: 50% 50%; }
  .hero:not(.hero--utan-bred) .hero__ram::after {
    background: radial-gradient(ellipse 62% 112% at 0% 100%, rgba(22, 23, 21, .88) 0%, rgba(22, 23, 21, .78) 48%, rgba(22, 23, 21, .4) 76%, rgba(22, 23, 21, 0) 100%);
  }
}

/* ---------- 4a. Underlaget i öppningen (herolinjer.js) ----------
   Linjeritningen ur samma kamera under bilden. Canvasen (dator: bläckmasken, knappens bläckcirkel) och
   <img> (ritningen i vila efter knappen) ligger ovanpå stillbilden och den levande himlen, men under
   skuggan bakom texten, ordmärket och texten. De placeras exakt som bilden (object-fit/object-position ovan). */
.hero__linjer, .hero__linjer-bild { z-index: 1; pointer-events: none; }
.hero__linjer[hidden] { display: none; }
.hero__linjer-bild { opacity: 0; }
.hero__linjer-bild.is-synlig { opacity: 1; }
.hero--underlag-tona .hero__linjer-bild { transition: opacity var(--dur-snabb) linear; }             /* minska rörelse: övertoning */
.hero--underlag-klipp .hero__linjer-bild { transition: clip-path var(--dur-in) var(--ease-inout); } /* utan WebGL2 */

/* Knappen (alla lägen – även dator med mus, för tangentbord och röststyrning). Mobil: till höger strax ovanför
   undertexten (rad 2 i öppningens rutnät, nederst). */
.hero__underlag {
  grid-row: 2; justify-self: end; align-self: end; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: .75em;
  min-height: 44px; padding: 0 1.15em 0 .95em;
  border-radius: 999px; border: 1px solid rgba(246, 244, 239, .72);
  background: rgba(30, 31, 29, .52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ljus);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-kvart), background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.hero__underlag[hidden] { display: none; }
.hero__underlag.is-klar { opacity: 1; }
/* Ritningen visas: knappen får ritningens papper */
.hero__underlag.is-pa { background: var(--fasad); color: var(--takduk); border-color: rgba(30, 31, 29, .4); }
@media (hover: hover) { .hero__underlag:hover { border-color: var(--ljus); } }
/* Ikonen: en cirkel i två halvor – bilden (fylld) och ritningen (kontur); vänds när ritningen visas */
.hero__underlag-ikon {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  transition: transform var(--dur-lang) var(--ease);
}
.hero__underlag.is-pa .hero__underlag-ikon { transform: rotate(180deg); }

/* Tipset (dator med mus): ingen egen kontroll – en tunn mono-rad "eller rör på musen" strax UNDER knappen (huvudvalet
   först, alternativet efter), högerställd mot knappens text. Knappen tonas in 80 ms och tipset 120 ms efter öppningens
   intro (herolinjer.js) – en del av öppningen, inte en sen ensam detalj. Visas en gång per besök, tonas bort vid första interaktionen och döljs sedan
   helt (hidden). Ingen platta och ingen loop: öppningen ska vara lugn. Läsbarheten över bilden (carportens ljusa
   stolpar på 16:9-bilden): en mjuk, fjädrad mörk skugga bakom raden (ingen kant, ca 24 px utanför tecknen) plus en
   tät gloria i text-shadow – uppmätt ≥ 4,5:1 ur renderade pixlar vid 2000×950, 1920×1080 och 2560×1080. */
.hero__tips {
  display: none; position: relative; isolation: isolate;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ljus);
  text-shadow: 0 0 1px rgba(22, 23, 21, .9), 0 0 3px rgba(22, 23, 21, .8), 0 0 10px rgba(22, 23, 21, .6);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-kvart);
  pointer-events: none;
}
.hero__tips::before {
  content: ""; position: absolute; z-index: -1; inset: -20px -44px;
  background: radial-gradient(closest-side, rgba(22, 23, 21, .46) 0%, rgba(22, 23, 21, .36) 60%, rgba(22, 23, 21, 0) 100%);
}
.hero__tips:not([hidden]) { display: block; }
.hero__tips.is-synlig { opacity: 1; }

@media (min-width: 900px) {
  .hero__underlag, .hero__tips {
    grid-column: 9 / -1; grid-row: 3; justify-self: end; align-self: end;
    margin-bottom: 2px;
  }
  /* under knappen: raden (11 px) slutar 22 px under radens nederkant – ca 10 px luft under knappen, över den mörka
     kantstenen/gatan (öppningens padding-bottom är minst 24 px). Högerkanten i linje med knappens text (padding
     1,15em + 1 px kant). */
  .hero__tips { margin: 0 calc(1.15 * 11.5px + 1px) -22px 0; position: relative; } /* skuggan (::before) följer raden */
}
/* Liggande mobil: nere till höger i höjd med knapparna (ovanför rubriken är det för trångt) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__underlag { grid-row: 3; grid-column: 1 / -1; margin-bottom: 0; }
}

/* ---------- 4b. Parhuset ---------- */
.parhuset { position: relative; z-index: 1; padding-bottom: var(--sektion); }
/* Mobil stående med rörelse (hero.js, jury J1-06): sektionen ligger bottenkantens höjd (45 % av öppningen, som
   minst 560 px hög) upp över öppningen; jätteordet och inledningen skjuts tillbaka och åker upp med kanten.
   Över öppningen (z-index) men genomskinlig för pek/klick där sektionens låda är tom – öppningens knappar går att nå. */
@media (max-width: 899px) and (orientation: portrait) {
  .parhuset--lyft { margin-top: calc(-0.45 * max(100svh, 560px)); z-index: 3; pointer-events: none; }
  .parhuset--lyft > * { pointer-events: auto; }
}
/* Jätteordet står helt på sidans grund – fritt från öppningsbildens ram. */
.parhuset__jatteord {
  padding-top: clamp(56px, 10vh, 132px);
  padding-inline: var(--marginal);
  white-space: nowrap;
}
.parhuset__intro { margin-top: clamp(36px, 7vh, 88px); row-gap: 28px; }
.parhuset__brodtext { color: var(--text); }
/* Källraden (jury J2-3): att filmen användes i försäljningen – nära brödtexten, som en bildtext (mono, --text-2). */
.parhuset__kalla { margin-top: -12px; }
@media (min-width: 900px) {
  .parhuset__etikett { grid-column: 1 / span 3; grid-row: 1; padding-top: .7em; }
  .parhuset__ingress { grid-column: 4 / span 8; grid-row: 1; }
  .parhuset__brodtext { grid-column: 4 / span 6; grid-row: 2; }
  .parhuset__kalla { grid-column: 4 / span 6; grid-row: 3; }
}
@media (min-width: 1200px) {
  .parhuset__brodtext { grid-column: 4 / span 5; }
}

/* ---------- 4c. Från ritning till färdig bild (plattan) – SPEC-v4 §2 ----------
   EN scen: rubriken, plattan och meningsparet (plattans bildtext; två spalter: vänster under ritningssidan,
   höger under bildsidan). Bild och linjeritning är beskurna lika (2256 × 1269, 16:9) så att grannkvarterets radhus
   inte är med – ingen not behövs. --svep (0–1) = hur långt renderingen har svept in från höger. 0 = bara
   linjeritningen, 1 = bara renderingen. Utan rörelse står den på 0,5: halva ritningen, halva renderingen, båda
   etiketterna. --platta-y = bildens lodräta läge när plattan är bredare än 16:9 (rörelse, dator): husen och bilarna
   står kvar, himlen och gatan beskärs. */
.platta { margin-top: clamp(72px, 12vh, 150px); }
.platta__stapel { width: calc(100% - 2 * var(--marginal)); margin-inline: auto; }
.platta__rubrik { margin-bottom: clamp(18px, 3vh, 34px); }
.gatuplatta__bild {
  --svep: .5;
  position: relative; aspect-ratio: 16 / 9; background: var(--plat); overflow: hidden;
  /* aldrig högre än fönstret under menyn (stilla läge, breda skärmar): då blir den bredare än 16:9 och beskärs
     uppe och nere, båda lagren lika. width: 100 % – annars överförs max-height via aspect-ratio till bredden. */
  width: 100%; max-height: calc(100svh - var(--nav-h) - 2 * clamp(16px, 4vh, 40px));
  /* Vid bråkdels-DPR (t.ex. 1,25) kan en hel enhetspixel inte alltid uttryckas i layoutens 1/64 px: overflow-klippet
     släppte då igenom en 1 px mörk rand av renderingen till vänster om plattan. clip-path klipper exakt vid kanten. */
  clip-path: inset(0);
}
.gatuplatta__bild > picture, .gatuplatta__bild > picture img,
.gatuplatta__linjer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% var(--platta-y, 64%);
}
.gatuplatta__linjer {
  position: absolute; inset: 0; background: var(--ljus);
  clip-path: inset(0 calc(var(--svep) * 100%) 0 0);
}
.gatuplatta__svep {
  position: absolute; top: 0; bottom: 0; left: calc((1 - var(--svep)) * 100%);
  width: 1px; margin-left: -.5px; background: var(--takduk);
  opacity: var(--svep-linje, 1); /* parhuset.js döljer linjen i vila (0 % och 100 %) */
}
/* Etiketterna åker med svepet: MODELL på ritningssidan (vänster), FÄRDIG BILD på bildsidan (höger). */
.gatuplatta__etikett {
  position: absolute; top: clamp(8px, 1.4vw, 16px);
  padding: 6px 9px 5px;
  background: var(--fasad); color: var(--takduk);
  font-size: 11px; white-space: nowrap; line-height: 1.3;
  box-shadow: 0 0 0 1px rgba(30, 31, 29, .12);
  pointer-events: none;
}
.gatuplatta__etikett--modell { right: calc(var(--svep) * 100% + 10px); }
.gatuplatta__etikett--bild { left: calc((1 - var(--svep)) * 100% + 10px); }
/* Med rörelse flyttas linjen och etiketterna med transform (parhuset.js räknar ut läget i px) – ingen
   layoutförskjutning medan svepet går. */
.rorelse .gatuplatta__svep { left: 0; transform: translateX(var(--svep-x, 0px)); }
.rorelse .gatuplatta__etikett--modell { right: auto; left: 0; transform: translateX(var(--etikett-u-x, 0px)); }
.rorelse .gatuplatta__etikett--bild { left: 0; transform: translateX(var(--etikett-e-x, 0px)); }
/* Saknas linjeritningen: bara renderingen (parhuset.js sätter klassen). */
.platta--utan-linjer .gatuplatta__linjer,
.platta--utan-linjer .gatuplatta__svep,
.platta--utan-linjer .gatuplatta__etikett { display: none; }
/* Stilla läge (ingen pixeljustering): renderingen bara där ritningen inte ligger, på papperets grund – annars lyser
   renderingens kantpixlar igenom längs ritningens kanter. Statiskt, ritas en gång. */
html:not(.rorelse) .gatuplatta__bild { background: var(--ljus); }
html:not(.rorelse) .gatuplatta__bild > picture { clip-path: inset(0 0 0 calc((1 - var(--svep)) * 100%)); }
/* Meningsparet: lugn brödtext, inga etiketter. */
.platta__par {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px var(--ranna); align-items: start;
  margin-top: clamp(14px, 2.2vh, 22px);
  font-size: var(--fs-brod); line-height: 1.45; color: var(--text);
}
.platta__par p { max-width: 34em; text-wrap: pretty; }
.platta__par .notiser { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .platta__par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .gatuplatta__etikett { padding: 5px 7px 4px; letter-spacing: .06em; } /* mono-etiketter minst 11 px */
}
/* Mobil (under 900 px): plattan i full bredd (kant till kant) – rubriken och meningsparet i marginalen. */
@media (max-width: 899px) {
  .platta__stapel { width: 100%; }
  .platta__rubrik, .platta__par { padding-inline: var(--marginal); }
}

/* Rörelse: scenen står fast (sticky) medan svepet går, ca 150vh scroll (mobil: 90vh). Svepet startar först när scenen
   har fastnat – då syns hela plattan. Scenens höjd delas: menyn, luft, rubriken, plattan, meningsparet, luft.
   --platta-fri = höjden kvar för plattan (rubriken: en rad på dator; meningsparet: högst två rader per spalt).
   Plattan tar hela innehållsbredden; räcker inte höjden till 16:9 blir den bredare än 16:9 (båda lagren beskärs
   lika uppe och nere, object-fit: cover) upp till 2,75:1 – därefter smalnar hela stapeln och står centrerad, så
   att rubriken, plattan och meningsparet alltid delar vänster- och högerkant.
   Hel pixel i sidled (parhuset.js): en layoutförskjutning (left), inte transform – webbläsaren fäster bilderna mot
   hela pixlar men inte ritningens clip-path, så bara en verklig layoutposition på en hel pixel ger en ren kant. */
.rorelse .gatuplatta__bild { --svep: 0; left: var(--snapp-x, 0px); }
.rorelse .platta:not(.platta--utan-linjer) { height: calc(100svh + 150vh); }
.rorelse .platta:not(.platta--utan-linjer) .platta__scen {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
}
.rorelse .platta:not(.platta--utan-linjer) .platta__stapel {
  --luft: clamp(12px, 3.2vh, 40px);
  --rubrik-h: calc(var(--fs-h2) * .95 + clamp(18px, 3vh, 34px));
  --par-h: calc(2 * 1.45 * var(--fs-brod) + clamp(14px, 2.2vh, 22px));
  --platta-fri: calc(100svh - var(--nav-h) - 2 * var(--luft) - var(--rubrik-h) - var(--par-h));
  width: min(100% - 2 * var(--marginal), var(--platta-fri) * 2.75);
}
/* width: 100 % – annars överförs max-height via aspect-ratio till bredden och plattan förblir 16:9. --snapp-b/-h/-y:
   parhuset.js lägger plattans kanter på hela enhetspixlar (ingen tunn rand av renderingen längs ritningens kanter). */
.rorelse .platta:not(.platta--utan-linjer) .gatuplatta__bild {
  width: var(--snapp-b, 100%); height: var(--snapp-h, auto); max-height: var(--platta-fri); top: var(--snapp-y, 0px);
}
@media (min-width: 1500px) {
  /* bred: varje mening ryms på en rad */
  .rorelse .platta:not(.platta--utan-linjer) .platta__stapel { --par-h: calc(1.45 * var(--fs-brod) + clamp(14px, 2.2vh, 22px)); }
}
@media (max-width: 899px) {
  .rorelse .platta:not(.platta--utan-linjer) { height: calc(100svh + 90vh); }
  /* mobil: rubriken på två rader, meningarna under varandra (ca sex rader) */
  .rorelse .platta:not(.platta--utan-linjer) .platta__stapel {
    --rubrik-h: calc(2 * var(--fs-h2) * .95 + clamp(18px, 3vh, 34px));
    --par-h: calc(5 * 1.45 * var(--fs-brod) + 6px + clamp(14px, 2.2vh, 22px));
    width: min(100%, max(320px, var(--platta-fri) * 2.75));
  }
}
/* Stående mobil (jury J1-07): plattan är en 16:9-remsa i telefonens bredd – en kortare fästning (55vh i stället för
   90vh) så att svepet inte står och väntar på en tom grund. Liggande mobil behåller 90vh (egen spaltlayout nedan). */
@media (max-width: 899px) and (orientation: portrait) {
  .rorelse .platta:not(.platta--utan-linjer) { height: calc(100svh + 55vh); }
}
/* Liggande mobil / låga fönster: rubriken och meningsparet i en spalt till vänster, plattan (16:9, full höjd) till
   höger – annars blir plattan en smal remsa. */
@media (orientation: landscape) and (max-height: 520px) {
  .rorelse .platta:not(.platta--utan-linjer) .platta__stapel {
    --luft: 12px;
    width: calc(100% - 2 * var(--marginal));
    display: grid; column-gap: var(--ranna); align-items: end;
    grid-template-columns: minmax(0, 1fr) min(64%, (100svh - var(--nav-h) - 2 * var(--luft)) * 16 / 9);
    grid-template-rows: auto 1fr;
  }
  .rorelse .platta:not(.platta--utan-linjer) .platta__rubrik {
    grid-column: 1; grid-row: 1; align-self: start; padding: 0; margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
  }
  .rorelse .platta:not(.platta--utan-linjer) .gatuplatta {
    grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; align-items: end;
    grid-template-columns: subgrid; grid-template-rows: subgrid;
  }
  .rorelse .platta:not(.platta--utan-linjer) .gatuplatta__bild { grid-column: 2; grid-row: 1 / span 2; max-height: none; align-self: end; }
  .rorelse .platta:not(.platta--utan-linjer) .platta__par {
    grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0;
    font-size: .9375rem; gap: 8px;
  }
}

/* ---------- 4d. Tre ingångar ---------- */
.ingangar { margin-top: clamp(72px, 12vh, 150px); padding-inline: var(--marginal); }
/* Färger via --text/--text-2/--linje: raderna byter tema med sidans grund när Film närmar sig (grund.js). */
.ingangar__lista { border-top: 1px solid var(--text); }
.ingangar__lista li { border-bottom: 1px solid var(--linje); }
.ingang {
  --media-h: clamp(64px, 7.2vw, 112px);
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ranna);
  min-height: calc(var(--media-h) + 32px);
  padding: 16px 0;
  text-decoration: none;
}
/* Ritningslinje under raden som dras ut vid hovring/fokus – raden är en länk, inte en listpunkt. */
.ingang::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-lang) var(--ease-ut);
}
.ingang__titel {
  grid-column: 1 / span 6;
  font-size: clamp(2rem, 4.6vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: .95;
  transition: transform var(--dur-lang) var(--ease-ut);
}
.ingang__text { grid-column: 7 / span 3; color: var(--text-2); font-size: 1rem; line-height: 1.4; }
.ingang__media {
  grid-column: 10 / span 2; justify-self: end;
  position: relative; height: var(--media-h); aspect-ratio: 16 / 9; overflow: hidden; background: var(--plat);
}
.ingang__media--staende { aspect-ratio: 9 / 16; }
.ingang__media img, .ingang__media video, .ingang__media picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ingang__media video { opacity: 0; transition: opacity var(--dur-ui) var(--ease); }
.ingang.is-spelar .ingang__media video { opacity: 1; }
.ingang__pil { grid-column: 12; justify-self: end; width: 48px; color: var(--text); transition: transform var(--dur-lang) var(--ease-ut), color var(--dur-ui) var(--ease); }
.ingang__pil svg { width: 48px; height: 12px; overflow: visible; }
.ingang__pil line, .ingang__pil polyline { fill: none; stroke: currentColor; stroke-width: 1.25; }
.ingang:hover::after, .ingang:focus-visible::after { transform: scaleX(1); }
.ingang:hover .ingang__pil, .ingang:focus-visible .ingang__pil, .ingang:active .ingang__pil { transform: translateX(6px); color: var(--guld-text); }
.tema-mork .ingang:hover .ingang__pil, .tema-mork .ingang:focus-visible .ingang__pil { color: var(--guld-ljus); }
.tema-mork .ingang:active { background-color: rgba(246, 244, 239, .05); }
@media (hover: hover) and (pointer: fine) {
  .ingang__media { clip-path: inset(0 0 0 100%); transition: clip-path var(--dur-lang) var(--ease-ut); }
  .ingang:hover .ingang__media, .ingang:focus-visible .ingang__media { clip-path: inset(0 0 0 0); }
  .ingang:hover .ingang__titel, .ingang:focus-visible .ingang__titel { transform: translateX(.18em); }
}
@media (max-width: 899px) {
  .ingang { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; align-items: start; --media-h: 76px; }
  .ingang__titel { grid-column: 1; grid-row: 1; font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .ingang__text { grid-column: 1; grid-row: 2; font-size: .9375rem; padding-right: 8px; }
  .ingang__media { grid-column: 2; grid-row: 1 / span 2; }
  .ingang__pil { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 4px; }
}

/* ---------- 5. Film ---------- */
.film { padding-block: var(--sektion); position: relative; }
.film__grid { row-gap: 48px; align-items: center; }
/* Bildhöjden lämnar plats för menyraden och de två kontrollraderna (ca 107 px) så att hela spelaren ryms på skärmen */
.spelare { justify-self: center; width: min(100%, calc(min(100svh - var(--nav-h) - 131px, 900px) * 9 / 16)); }
.spelare__ram {
  position: relative; aspect-ratio: 9 / 16; width: 100%;
  background: #121311; overflow: hidden;
}
.spelare__video, .spelare__affisch, .spelare__affisch img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.spelare__affisch { transition: opacity var(--dur-lang) var(--ease); }
.spelare.har-startat .spelare__affisch { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-lang) var(--ease), visibility 0s linear var(--dur-lang); }
/* Nedre tredjedelen, över den mörka asfalten – huset i affischen ska synas. */
.spelare__start {
  position: absolute; left: 50%; bottom: clamp(20px, 9%, 76px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px;
  width: max-content; white-space: nowrap; /* absolut placerad vid left:50 % – annars kapas bredden till halva spelaren och texten bryts */
  min-height: 60px; padding: 0 28px 0 12px;
  border: 1px solid rgba(246, 244, 239, .8); border-radius: 999px;
  background: rgba(30, 31, 29, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ljus); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background-color var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.spelare__start:hover { background: rgba(30, 31, 29, .62); }
.spelare__start-ikon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--guld); position: relative;
}
.spelare__start-ikon::after {
  content: ""; position: absolute; left: 15px; top: 12px;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--takduk);
}
.spelare.har-startat .spelare__start { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui); }

/* Två rader: tidslinjen över hela bredden överst, knapparna under (annars krymper tidslinjen till en prick
   på smala spelare). Knappar och tidslinje är 44 px höga (pekyta). */
.spelare__kontroller {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2px 12px;
  grid-template-areas: "tl tl tl tl" "spela tid ljud hel";
  padding-top: 4px; border-bottom: 1px solid var(--linje); padding-bottom: 12px;
  /* Smala spelare (liggande mobil, ca 150–300 px): raden får växa till 19rem, centrerad under bilden,
     och bilden behåller sin höjd (84svh). */
  margin-inline: min(0px, calc((100% - 19rem) / 2));
}
.spelare__tidslinje { grid-area: tl; }
.spelare__kontroller > [data-film-spela] { grid-area: spela; }
.spelare__tid { grid-area: tid; }
.spelare__kontroller > [data-film-ljud] { grid-area: ljud; }
.spelare__kontroller > [data-film-helskarm] { grid-area: hel; }
.spelare__knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 8px;
  background: none; border: 1px solid var(--linje); border-radius: 999px; color: var(--text);
  transition: border-color var(--dur-snabb) var(--ease), background-color var(--dur-snabb) var(--ease);
}
.spelare__knapp:hover { border-color: var(--text); }
.spelare__knapp--text { padding: 0 14px; white-space: nowrap; min-width: max-content; } /* annars pressar rutnätet ihop pillret */
.spelare__knapp[aria-pressed="true"] { background: var(--ljus); color: var(--takduk); border-color: var(--ljus); }
/* Ljudknappen: "Ljud" + läget som ikon – av: en ring med ett snedstreck, på: en fylld prick (och knappen fylld). */
.spelare__knapp--text { gap: 8px; }
.spelare__ljud-ikon { position: relative; flex: none; width: 9px; height: 9px; border: 1.25px solid currentColor; border-radius: 50%; transition: background-color var(--dur-snabb) var(--ease); }
.spelare__ljud-ikon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 1.25px; background: currentColor;
  translate: -50% -50%; rotate: -45deg; transition: scale var(--dur-snabb) var(--ease);
}
.spelare__knapp[aria-pressed="true"] .spelare__ljud-ikon { background: currentColor; }
.spelare__knapp[aria-pressed="true"] .spelare__ljud-ikon::after { scale: 0 1; }
.spelare__tid { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ikon { display: block; position: relative; width: 14px; height: 14px; }
.ikon--spela::before {
  content: ""; position: absolute; left: 2px; top: 0;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor;
}
.spelare.spelar .ikon--spela::before, .spelare.spelar .ikon--spela::after {
  content: ""; position: absolute; top: 1px; width: 4px; height: 12px; background: currentColor; border: 0; left: 2px;
}
.spelare.spelar .ikon--spela::after { left: 8px; }
.ikon--helskarm {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1.5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1.5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 5px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1.5px 5px no-repeat;
}
/* Tidslinje */
.spelare__tidslinje {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; /* spåret är fortfarande 1 px */
  --fyllt: 0%;
}
.spelare__tidslinje::-webkit-slider-runnable-track {
  height: 1px; background: linear-gradient(to right, var(--guld-ljus) var(--fyllt), var(--linje) var(--fyllt));
}
.spelare__tidslinje::-moz-range-track { height: 1px; background: var(--linje); }
.spelare__tidslinje::-moz-range-progress { height: 1px; background: var(--guld-ljus); }
.spelare__tidslinje::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--text); margin-top: -5px; border: 0;
}
.spelare__tidslinje::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--text); border: 0; }
.spelare__tidslinje:focus-visible { outline-offset: 0; }
.spelare:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 16px; }
.spelare:fullscreen .spelare__ram { flex: 1; aspect-ratio: auto; width: auto; }
.spelare:fullscreen .spelare__video { object-fit: contain; }

.film__text { display: grid; gap: 22px; align-content: center; }
.film__text .brodtext { color: var(--text-2); max-width: 30em; }
.film__publicerad { font-size: 1rem; line-height: 1.5; color: var(--text); max-width: 30em; }
.film__publicerad .textlank { white-space: nowrap; --tl-pad: 12px; } /* 44 px pekyta */
.film__kredit { font-size: 1rem; color: var(--text-2); }
.film__meta { color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--linje); }
/* Textversion av filmen (ingen speakerröst – beskrivning av det som syns) */
.film__textversion { font-size: .9375rem; line-height: 1.5; }
/* "Filmen i text": samma språk som textlänkarna (tunn understrykning; guldlinjen ritas fram vid hovring och fokus)
   och ett + i mono som vrids till × när texten är öppen – ingen webbläsartriangel (SPEC-v3 §8.4). 44 px pekyta. */
.film__textversion summary {
  --tl-guld: var(--guld-text);
  list-style: none; display: inline-flex; align-items: center; gap: .6em; min-height: 44px;
  cursor: pointer; font-weight: 500;
}
.tema-mork .film__textversion summary { --tl-guld: var(--guld-ljus); }
.film__textversion summary::-webkit-details-marker { display: none; }
.film__textversion summary > span {
  line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: currentColor;
  background: linear-gradient(var(--tl-guld), var(--tl-guld)) 0 100% / 0% 2px no-repeat;
  transition: background-size var(--dur-lang) var(--ease-ut), text-decoration-color var(--dur-snabb) var(--ease);
}
.film__textversion summary:hover > span, .film__textversion summary:focus-visible > span { text-decoration-color: transparent; background-size: 100% 2px; }
.film__textversion summary::after {
  content: "+"; font-family: var(--f-mono); font-weight: 400; line-height: 1; color: var(--tl-guld);
  transition: transform var(--dur-ui) var(--ease-ut);
}
.film__textversion[open] summary::after { transform: rotate(45deg); }
.film__textversion p { margin-top: 12px; color: var(--text-2); }
.film__textversion ol { margin-top: 10px; padding-left: 1.2em; color: var(--text-2); } /* tidskoderna räcker som numrering */
.film__textversion li + li { margin-top: 6px; }
@media (min-width: 900px) {
  .film__spelare { grid-column: 1 / span 6; grid-row: 1; }
  .film__text { grid-column: 8 / span 4; grid-row: 1; }
  /* Hopp till #film (menyn, ingångsraden): avsnittets övre luft hoppas över och spelaren (bild + kontroller)
     står centrerad i ytan under menyn. Bildförhållandet 9:16 styrs av .spelare – ingen höjd sätts här. */
  .film__grid { min-height: calc(100svh - var(--nav-h)); align-items: center; }
  #film { scroll-margin-top: calc(0px - var(--sektion)); }
}
@media (max-width: 899px) {
  #film { scroll-margin-top: calc(12px - var(--sektion)); }
}
/* Låga liggande skärmar (liggande mobil): smala spelare får en kompakt startknapp (bara ikonen; texten
   finns kvar för skärmläsare), och spelaren lägger bild och kontroller sida vid sida över hela bredden. */
.spelare__ram { container-type: inline-size; }
@container (max-width: 180px) {
  .spelare__start { width: 56px; min-height: 56px; padding: 0; justify-content: center; }
  .spelare__start-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .film__spelare, .film__text { grid-column: 1 / -1; }
  .film__text { grid-row: auto; }
  .spelare {
    width: auto; display: grid;
    grid-template-columns: calc((100svh - var(--nav-h) - 24px) * 9 / 16) 19rem; grid-template-areas: "video controls";
    column-gap: 16px; align-items: end;
  }
  .spelare__ram { grid-area: video; }
  .spelare__kontroller { grid-area: controls; margin-inline: 0; }
}

/* ---------- 6. Kliv in (sekvens) ----------
   Två lägen med rörelse:
   A. Två spalter (dator, från 900 px, liggande, minst 501 px hög): textspalt till vänster och HELA bilden
      till höger – kvadraten (kliv-in-kvadrat.mp4) eller, om den saknas, 16:9 – inpassad i
      min(100svh − meny − 48 px, 58vw) på kolsvart. Ingenting beskärs. Spalterna är ett rutnät som står
      centrerat som en grupp (ingen död yta i mitten). I slutet tonas texten ut, grunden blir varm och hela
      bilden glider till mitten av skärmen (sekvens.js).
   B. Fullbild (mobil, stående surfplatta, låga fönster): bilden fyller skärmen (9:16 resp. 16:9).
   Utan rörelse: galleri med fyra stillbilder (avsnitt längre ned). */
.sekvens { position: relative; }
.sekvens__scen { position: relative; }
.sekvens__canvas { display: none; }
.sekvens__overlager { display: none; }
.sekvens__fig { display: none; } /* slutbildens bildtext: bara dator med rörelse (A nedan) */
.skena__text { display: none; }

/* Scrollsträckan: åkningen har 282 bildrutor (med dörren, SPEC-v3 §7) – den scrollade delen är 282/220 av den gamla
   (320vh → 100 + 220 × 1,282 ≈ 382vh; mobil 260vh → 100 + 160 × 1,282 ≈ 305vh), så takten per bildruta är som förut. */
.rorelse .sekvens { height: 382vh; }
@media (max-width: 899px) { .rorelse .sekvens { height: 305vh; } }
/* Scenen fyller den stora vyhöjden (lvh): när mobilens adressfält fälls in syns ingen mörk list under bilden.
   Överlagret (etiketter, skena) hålls inom den lilla vyhöjden (svh) så att det alltid syns. */
.rorelse .sekvens__scen {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
}
.rorelse .sekvens__bild {
  position: absolute; inset: 0; background: var(--takduk);
  clip-path: inset(0px 0px 0px 0px);
}
.rorelse .sekvens__stillbilder, .rorelse .stillbild, .rorelse .stillbild figure, .rorelse .stillbild picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.rorelse .stillbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rorelse .stillbild figcaption { display: none; }
.rorelse .stillbild { opacity: 0; transition: opacity var(--dur-lang) var(--ease); }
/* Stillbild 1 är grundlagret (och standard utan JS). Medan videon laddas – eller om den inte går att spela –
   tonas stillbilden för den aktiva stationen in ovanpå (sekvens.js sätter .is-aktiv), så att bilden alltid
   stämmer med skenan. Canvasen tonas sedan in över stillbilden. */
.rorelse .stillbild[data-stillbild="1"] { opacity: 1; }
.rorelse .sekvens .stillbild.is-aktiv { opacity: 1; }
.rorelse .sekvens__canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity var(--dur-lang) var(--ease);
}
.rorelse .sekvens.is-klar .sekvens__canvas { opacity: 1; }
.rorelse .sekvens__overlager { display: block; pointer-events: none; }
.skena__station { transition: color var(--dur-ui) var(--ease); }
.skena__station .mono { font-size: 11px; }
.skena__punkt { transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.sekvens__framsteg span { position: absolute; inset: 0; background: var(--guld-ljus); }

/* --- B. Fullbild --- */
@media not all and (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  /* Skugga bakom jätterubriken "Kliv in". sekvens.js tonar --skugga 1 → 0 med scrollen i samma takt som
     rubriken, så att själva åkningen visas i full ljusstyrka (etiketterna och skenan har egna plattor). */
  .rorelse .sekvens__bild::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 66%;
    background: linear-gradient(to top, rgba(22, 23, 21, .8) 0%, rgba(22, 23, 21, .62) 42%, rgba(22, 23, 21, .3) 70%, rgba(22, 23, 21, 0) 100%);
    pointer-events: none;
    opacity: var(--skugga, 1);
  }
  .rorelse .sekvens__overlager {
    position: absolute; inset: 0 0 auto 0; height: 100%; height: 100svh;
    padding: calc(var(--nav-h) + 20px) var(--marginal) clamp(24px, 5vh, 56px);
  }
  .rorelse .sekvens__nr { position: absolute; top: calc(var(--nav-h) + 20px); left: calc(var(--marginal) - 10px); }
  .rorelse .sekvens__rubrik {
    position: absolute; left: var(--marginal); bottom: clamp(88px, 15vh, 150px);
    color: var(--ljus); white-space: nowrap; isolation: isolate;
  }
  .rorelse .sekvens__rubrik::before {
    content: ""; position: absolute; z-index: -1; inset: -45% -18% -35% calc(-1 * var(--marginal));
    background: radial-gradient(closest-side, rgba(22, 23, 21, .62) 0%, rgba(22, 23, 21, .5) 62%, rgba(22, 23, 21, 0) 100%);
    pointer-events: none;
  }
  .rorelse .sekvens__etikett {
    position: absolute; left: calc(var(--marginal) - 10px); bottom: clamp(24px, 5vh, 56px); max-width: 26em;
  }
  /* Kontrast mot den scrollstyrda videon: mörka plattor bakom de små etiketterna. */
  .rorelse .sekvens__nr, .rorelse .sekvens__etikett { background: rgba(22, 23, 21, .72); padding: 6px 10px 5px; color: var(--ljus); }
  .rorelse .sekvens__skena {
    position: absolute; right: calc(var(--marginal) - 10px); bottom: clamp(24px, 5vh, 56px); /* textens högerkant kvar vid marginalen */
    display: grid; gap: 14px; justify-items: end;
    font-size: 1rem; font-weight: 500; letter-spacing: -0.005em;
    color: rgba(246, 244, 239, .82);
    background: rgba(22, 23, 21, .72); padding: 8px 10px;
  }
  .rorelse .skena__station { display: flex; align-items: baseline; gap: 10px; }
  .rorelse .skena__punkt {
    order: 3; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; align-self: center;
  }
  .rorelse .skena__station.is-aktiv { color: var(--ljus); }
  .rorelse .skena__station.is-aktiv .skena__punkt { background: var(--guld-ljus); border-color: var(--guld-ljus); }
  .rorelse .sekvens__framsteg {
    position: absolute; right: calc(var(--marginal) + 3px); bottom: calc(clamp(24px, 5vh, 56px) + 128px);
    top: calc(var(--nav-h) + 20px); width: 1px; background: rgba(246, 244, 239, .35);
  }
  .rorelse .sekvens__framsteg span { transform-origin: 50% 0; transform: scaleY(0); }
  .rorelse .sekvens__notiser { position: absolute; top: calc(var(--nav-h) + 58px); /* under etikettplattan "Kliv in" */ left: var(--marginal); display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; }
}
@media (max-width: 899px) {
  .rorelse .sekvens__rubrik { bottom: 170px; font-size: clamp(4rem, 22vw, 7rem); } /* fri från etikettplattan */
  .rorelse .sekvens__etikett { bottom: 104px; max-width: 20em; }
  /* Plattan: 16 + 8 (nedre utfyllnad) + 10 (övre). Hårlinjen (border-top) är plattans överkant;
     framstegslinjen läggs exakt på den (se nedan). */
  .rorelse .sekvens__skena {
    left: calc(var(--marginal) - 10px); right: calc(var(--marginal) - 10px); bottom: 16px;
    grid-template-columns: repeat(3, 1fr); justify-items: start; gap: 8px; font-size: .875rem;
    border-top: 1px solid rgba(246, 244, 239, .35); padding: 10px 10px 8px;
  }
  .rorelse .skena__station { flex-direction: column; align-items: flex-start; gap: 2px; font-size: .8125rem; line-height: 1.2; position: relative; }
  .rorelse .skena__punkt { display: none; }
  /* Framstegslinjen ligger på skenans hårlinje och är lika bred: 24 + 44 = 16 + 8 (utfyllnad) + 34 (två rader) + 10 */
  .rorelse .sekvens__framsteg { left: calc(var(--marginal) - 10px); right: calc(var(--marginal) - 10px); top: auto; bottom: 24px; width: auto; height: 1px; transform: translateY(-44px); background: none; }
  .rorelse .sekvens__framsteg span { transform-origin: 0 50%; transform: scaleX(0); }
  /* Utan punkter: aktiv station markeras med en 2 px stapel över texten (ovanpå skenans hårlinje). */
  .rorelse .skena__station[aria-current="step"]::before {
    content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 2px;
    background: currentColor;
  }
}

/* --- A. Två spalter (dator) --- */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .rorelse .sekvens {
    --sek-kvot: 1.7778; /* 16:9 tills kvadraten är bekräftad (sekvens.js sätter .sekvens--kvadrat) */
  }
  .rorelse .sekvens.sekvens--kvadrat { --sek-kvot: 1; }
  /* Textspalten och bilden som en centrerad grupp i ett rutnät (safe: texten trycks aldrig förbi vänsterkanten;
     sidornas utfyllnad håller marginalen vid 900–1100 px). */
  .rorelse .sekvens__scen {
    --s-h: min(100svh - var(--nav-h) - 48px, 58vw / var(--sek-kvot)); /* bildens höjd */
    --s-b: calc(var(--s-h) * var(--sek-kvot));                        /* bildens bredd */
    --s-top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--s-h)) / 2);
    background: var(--takduk);
    display: grid;
    grid-template-columns: minmax(240px, 22rem) var(--s-b);
    grid-template-rows: var(--s-h);
    justify-content: safe center;
    align-content: start;
    column-gap: clamp(48px, 5vw, 112px);
    padding: var(--s-top) var(--marginal) 0;
  }
  .rorelse .sekvens__bild {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1;
    width: var(--s-b); height: var(--s-h);
  }
  /* Hårlinje runt bildrutan (ritas över canvasen – clip-path skulle klippa bort en yttre skugga): klippet till
     kolsvart mellan ute och inne läses som ett avsiktligt snitt i en ram, inte som en tom yta. */
  .rorelse .sekvens__bild::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(246, 244, 239, .16);
  }
  .rorelse .sekvens__overlager {
    position: relative; inset: auto;
    grid-column: 1; grid-row: 1;
    min-width: 0; height: var(--s-h);
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .rorelse .sekvens__nr { color: var(--text-2); }
  .rorelse .sekvens__rubrik {
    margin: 14px 0 0 -0.04em;
    font-size: clamp(3.5rem, 6.6vw, 8.5rem); color: var(--ljus); white-space: nowrap;
  }
  .rorelse .sekvens__stationer { position: relative; margin-block: auto; padding: 4px 0 4px 26px; max-width: 30em; }
  .rorelse .sekvens__skena { display: grid; gap: clamp(16px, 2.6vh, 28px); }
  .rorelse .skena__station {
    position: relative;
    display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline;
    color: rgba(246, 244, 239, .55); /* 5,1:1 mot kolsvart – inaktiva stationer är fortfarande läsbara */
    font-size: clamp(1.0625rem, 1.15vw, 1.35rem); line-height: 1.3;
  }
  .rorelse .skena__nr { grid-column: 1; grid-row: 1 / span 2; }
  .rorelse .skena__namn { grid-column: 2; font-weight: 600; letter-spacing: -0.01em; }
  .rorelse .skena__text { display: block; grid-column: 2; font-size: .86em; }
  .rorelse .skena__streck { display: none; }
  .rorelse .skena__punkt {
    position: absolute; left: -26px; top: .45em; width: 7px; height: 7px; margin-left: -3px;
    border: 1px solid rgba(246, 244, 239, .55); border-radius: 50%; background: var(--takduk);
  }
  .rorelse .skena__station.is-forbi .skena__punkt { background: var(--guld-ljus); border-color: var(--guld-ljus); }
  .rorelse .skena__station.is-aktiv { color: var(--ljus); }
  .rorelse .skena__station.is-aktiv .skena__punkt { background: var(--guld-ljus); border-color: var(--guld-ljus); box-shadow: 0 0 0 4px rgba(221, 194, 142, .22); }
  .rorelse .sekvens__framsteg {
    position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(246, 244, 239, .22);
  }
  .rorelse .sekvens__framsteg span { transform-origin: 50% 0; transform: scaleY(0); }
  .rorelse .sekvens__etikett { color: var(--text-2); max-width: 28em; }
  .rorelse .sekvens__notiser { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; pointer-events: auto; }
  .rorelse .sekvens__notiser:empty { display: none; }
  /* Slutbildens bildtext (sekvens.js tonar in den och flyttar den med plattan): under den till 0,9 skalade plattan,
     linjerad med dess vänsterkant. Färgen följer grunden (kolsvart → papper). */
  .rorelse .sekvens__fig {
    display: block; grid-column: 2; grid-row: 1; align-self: start; justify-self: start;
    margin: calc(var(--s-h) * .9 + 14px) 0 0; white-space: nowrap;
    color: var(--ljus); opacity: 0; pointer-events: none;
  }
  /* GSAP äger .sekvens__fig:s transform (glidet); skalningens förskjutning ligger på det inre elementet. */
  .rorelse .sekvens__fig-inre { padding: 0; color: inherit; translate: var(--fig-dx, 0px) var(--fig-dy, 0px); }
  .rorelse .sekvens__fig .bildtext__nr { color: inherit; }
  .rorelse .sekvens__fig .bildtext__text { color: inherit; opacity: .78; }
}

/* Stilla läge: galleri med stillbilder (se även avsnitt 14) */
html:not(.rorelse) .sekvens { padding-block: var(--sektion) 0; }
html:not(.rorelse) .sekvens__scen { display: flex; flex-direction: column; }
html:not(.rorelse) .sekvens__overlager {
  display: grid; gap: 18px; order: -1; margin-bottom: clamp(32px, 6vh, 64px);
  padding-inline: var(--marginal);
}
html:not(.rorelse) .sekvens__rubrik { font-size: var(--fs-h2); letter-spacing: -0.035em; line-height: .95; color: var(--ljus); }
html:not(.rorelse) .sekvens__nr { color: var(--text-2); } /* "Från gatan till köket" – inte samma ord som rubriken */
html:not(.rorelse) .sekvens__etikett { color: var(--text-2); }
html:not(.rorelse) .sekvens__stationer { display: none; } /* stationerna står i stillbildernas bildtexter */
html:not(.rorelse) .sekvens__stillbilder {
  display: grid; gap: clamp(56px, 10vh, 120px); padding-inline: var(--marginal);
}
html:not(.rorelse) .stillbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #121311; }
@media (orientation: portrait) { html:not(.rorelse) .stillbild img { aspect-ratio: 4 / 5; } }
html:not(.rorelse) .stillbild figcaption {
  display: flex; gap: 1.2em; align-items: baseline;
  padding-top: 12px; border-bottom: 1px solid var(--linje); padding-bottom: 12px;
  font-size: 1.125rem; font-weight: 500;
}
html:not(.rorelse) .stillbild figcaption .mono { color: var(--text-2); }
@media (min-width: 900px) and (orientation: landscape) {
  html:not(.rorelse) .sekvens__stillbilder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ranna); row-gap: clamp(40px, 7vh, 80px); }
}
/* Dator (samma villkor som två-spaltsläget): de kvadratiska stillbilderna (index.html) – hela bildrutan, ingen
   beskärning (SPEC-v2 §6). Varje bild högst så hög att bild och bildtext ryms under menyn. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  html:not(.rorelse) .sekvens__stillbilder {
    grid-template-columns: repeat(2, minmax(0, calc(100svh - var(--nav-h) - 128px)));
    justify-content: start; /* linjerad med rubriken till vänster */
  }
  html:not(.rorelse) .stillbild img { aspect-ratio: 1 / 1; }
}

/* ---------- 7. Utforska huset själv: maketten (maquette.js) ----------
   Text till vänster (4 kolumner), maketten till höger (8). Över ytan: väljaren "3D-modell | Planritning" och "Återställ vy".
   Ytan har ingen ram: modellen står direkt på sektionens grund (affischen är renderad på samma färg, --ljus).
   Under ytan: bildtexten ("… – inte själva husvisningen."). Knappen "Öppna husvisningen": dator i textspalten under
   brödtexten, mobil under bildtexten (samma DOM-ordning: text, maketten, knappen).
   Mobil: ytan går kant i kant (4:3) med ett tätare utsnitt (--klipp: affischen och kameran lika mycket). */
.utforska { background: var(--ljus); padding-block: var(--sektion); }
.utforska__grid { row-gap: 28px; align-items: start; }
.utforska__text { display: grid; gap: 22px; align-content: start; }
.utforska__text .brodtext { max-width: 30em; }
.utforska__vidare { display: grid; gap: 16px; justify-items: start; }
@media (min-width: 900px) {
  /* Knappen till husvisningen står i textspalten under brödtexten (synlig samtidigt som maketten); DOM-ordningen –
     och därmed läs- och tabbordningen – är fortfarande text, maketten, knappen. */
  .utforska__grid { row-gap: 0; grid-template-rows: auto 1fr; }
  .utforska__text { grid-column: 1 / span 4; grid-row: 1; padding-top: 68px; /* i höjd med ytans överkant */ }
  .maquette { grid-column: 5 / -1; grid-row: 1 / span 2; }
  .utforska__vidare { grid-column: 1 / span 4; grid-row: 2; padding-top: 30px; }
}

.maquette { margin: 0; position: relative; }
.maquette__verktyg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--plat);
}
/* Små piller i samma ordförråd som "Visa underlaget" i öppningen (mono, versaler, 44 px pekyta) */
.maquette__knapp {
  display: inline-flex; align-items: center; gap: .75em;
  min-height: 44px; padding: 0 1.15em 0 .95em;
  border-radius: 999px; border: 1px solid rgba(30, 31, 29, .3);
  background: transparent; color: var(--takduk);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), scale var(--dur-snabb) var(--ease);
}
.maquette__knapp[hidden] { display: none; }
@media (hover: hover) { .maquette__knapp:hover { border-color: var(--takduk); } }
.maquette__knapp:active, .maquette__aktivera:active { scale: .965; }
/* Väljaren "3D-modell | Planritning": två lika breda segment i ett piller (vanliga radioknappar – piltangenterna
   byter val); det valda segmentet är en kolsvart "tumme" som glider (0,45 s, ease-ut). 44 px pekyta. */
.maquette__vy {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  margin: 0; padding: 0; min-inline-size: 0;
  border: 1px solid rgba(30, 31, 29, .3); border-radius: 999px;
}
.maquette__vy::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: var(--takduk);
  transition: translate var(--dur-lang) var(--ease-ut);
}
.maquette--ritning .maquette__vy::before { translate: 100% 0; }
.maquette__vy-val { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.maquette__vy-val input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.maquette__vy-text {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.2em;
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--takduk);
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), scale var(--dur-snabb) var(--ease);
}
.maquette__vy-val input:checked + .maquette__vy-text { color: var(--ljus); }
@media (hover: hover) { .maquette__vy-val:hover input:not(:checked) + .maquette__vy-text { background-color: rgba(30, 31, 29, .07); } }
.maquette__vy-val:active .maquette__vy-text { scale: .965; }
/* Fokus: dubbel ring (ljus + kolsvart) – syns både på tummen och på papperet */
.maquette__vy-val input:focus-visible { outline: none; }
.maquette__vy-val input:focus-visible + .maquette__vy-text { box-shadow: 0 0 0 2px var(--ljus), 0 0 0 4px var(--takduk); }
.maquette__ikon-aterstall { flex: none; transition: transform var(--dur-lang) var(--ease-ut); }
@media (hover: hover) { .maquette__knapp--aterstall:hover .maquette__ikon-aterstall { transform: rotate(-90deg); } }
.maquette__knapp--aterstall:focus-visible .maquette__ikon-aterstall { transform: rotate(-90deg); }

.maquette__scen {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  --klipp: 1;
}
.maquette__scen:focus-visible { outline: 2px solid var(--takduk); outline-offset: -2px; } /* innanför ytan: ingen dubbel linje mot hårlinjerna */
/* Affischen: lika bred som ytan × klipp, centrerad (= kamerans vågräta bildvinkel). Blir ytan högre än bilden
   syns grunden ovanför och under – affischen är renderad på samma färg. */
.maquette__affisch { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--klipp)); max-width: none; translate: -50% -50%; }
.maquette__affisch img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; }
.maquette__affisch[hidden] { display: none; }
/* Stilla läge / utan WebGL2: ritningsaffischen tonas in ovanpå (0,6 s; minska rörelse: kort övertoning) */
.maquette__affisch--ritning { opacity: 0; transition: opacity var(--dur-lang) var(--ease); width: 100%; }
.maquette--ritning .maquette__affisch--ritning { opacity: 1; }
/* Live, men planritningen kunde inte laddas: ritningsaffischen över modellen */
.maquette--rit-affisch .maquette__affisch--ritning { visibility: visible; z-index: 1; }
.maquette--ritning-laddar .maquette__affisch--ritning { opacity: 0; }
html:not(.rorelse) .maquette__affisch--ritning { transition: opacity var(--dur-snabb) linear !important; transition-duration: var(--dur-snabb) !important; }

.maquette__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity var(--dur-in) var(--ease-kvart);
  touch-action: pan-y pinch-zoom; /* fingret scrollar sidan tills "Tryck för att vrida" (maquette.js) */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.maquette--live .maquette__canvas { opacity: 1; }
.maquette--vilar .maquette__affisch { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .maquette--live .maquette__canvas { cursor: grab; }
  .maquette--drar .maquette__canvas { cursor: grabbing; }
  /* Ritningen: inget att vrida – handen bara när den är inzoomad och kan flyttas */
  .maquette--live.maquette--ritning .maquette__canvas { cursor: default; }
  .maquette--live.maquette--ritning.maquette--panorera .maquette__canvas { cursor: grab; }
  .maquette--live.maquette--ritning.maquette--panorera.maquette--drar .maquette__canvas { cursor: grabbing; }
}

/* Rumsnamnen i planritningen (maquette.js, planritning.json "labels" – namnen som i A-40-1-001, utan m²): IBM Plex
   Mono versaler i grafit, minst 10 px, skalas med ritningens zoom (--rum-fs). Ett namn ritas bara där det ryms i
   rummet (annars hidden) – aldrig över pochén. ▲ = entré (som i ritningen), pekar in mot huset. JS styr opaciteten. */
.maquette__rum { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; --rum-fs: 10px; }
.maquette__rum > span { position: absolute; left: 0; top: 0; }
.maquette__rum > span[hidden] { display: none; }
.maquette__rum-namn {
  font-family: var(--f-mono); font-weight: 400; font-size: var(--rum-fs); line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--grafit);
}
.maquette__rum-entre { width: calc(var(--rum-fs) * .9); height: calc(var(--rum-fs) * .78); background: var(--takduk); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Skalstocken i planritningen (maquette.js sätter bredden = 5 m i ritningens skala): nere till höger, som vid en
   ritnings namnruta. Bara när ritningen står klar. */
.maquette__skala {
  position: absolute; right: 8px; bottom: 7px; z-index: 1;
  display: grid; gap: 6px; justify-items: start;
  padding: 7px 8px 5px; background: rgba(246, 244, 239, .9); /* inzoomad ligger den över ritningen */
  color: var(--takduk); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-lang) var(--ease);
}
.maquette--ritning.maquette--rit-live .maquette__skala { opacity: 1; }
.maquette__skala-stock { display: flex; width: 100px; height: 5px; border: 1px solid currentColor; box-sizing: border-box; }
.maquette__skala-stock i { flex: 1; }
.maquette__skala-stock i:nth-child(odd) { background: currentColor; }
.maquette__skala-tal { display: flex; justify-content: space-between; width: calc(var(--skala-b, 100px) + 1.6em); margin-left: -.3em; font-size: 10.5px; letter-spacing: .06em; text-transform: none; color: var(--grafit); }

/* Pekskärm: "Tryck för att vrida" nere i mitten; aktiv: "Klar" på samma plats (syns i samma ögonblick som man trycker)
   och en hårlinje runt ytan */
.maquette__aktivera {
  display: none;
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 2;
  align-items: center; gap: .7em;
  min-height: 44px; padding: 0 1.2em 0 1em;
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(30, 31, 29, .84); color: var(--ljus);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), scale var(--dur-snabb) var(--ease);
}
.maquette--live.maquette--pek .maquette__aktivera:not([hidden]) { display: inline-flex; }
/* Ikonen: två halva bågar – en vridning */
.maquette__aktivera-ikon {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; border-left-color: transparent; border-right-color: transparent;
  transform: rotate(-30deg);
}
.maquette--aktiv .maquette__aktivera {
  background: var(--ljus); color: var(--takduk); border-color: rgba(30, 31, 29, .3);
}
.maquette--aktiv .maquette__aktivera-ikon { border: 0; width: 10px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-radius: 0; transform: translateY(-2px) rotate(-45deg); }
.maquette__scen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(30, 31, 29, .35);
  opacity: 0; transition: opacity var(--dur-ui) var(--ease);
}
.maquette--aktiv .maquette__scen::after { opacity: 1; }

/* Tangentbordet: en tunn rad med tangenterna när ytan har fokus */
.maquette__tips {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 10px 5px; background: rgba(246, 244, 239, .9); color: var(--grafit);
  opacity: 0; transition: opacity var(--dur-ui) var(--ease); pointer-events: none;
}
.maquette__scen:focus-visible .maquette__tips { opacity: 1; }
.maquette__tips-ritning, .maquette--ritning .maquette__tips-modell { display: none; }
.maquette--ritning .maquette__tips { top: 12px; bottom: auto; } /* ritningen: uppe till vänster är tomt papper */
.maquette--ritning .maquette__tips-ritning { display: inline; }
/* Bildtexten: två texter i samma ruta (3D-modell / planritning) som tonar över i varandra */
.maquette__bildtext { border-top: 1px solid var(--plat); margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.maquette__bildtext > .bildtext__text { grid-area: 1 / 1; transition: opacity var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui); }
.maquette__bildtext-ritning, .maquette--ritning .maquette__bildtext-modell { opacity: 0; visibility: hidden; }
.maquette--ritning .maquette__bildtext-ritning { opacity: 1; visibility: visible; transition: opacity var(--dur-lang) var(--ease) .12s, visibility 0s; }

@media (max-width: 899px) {
  .maquette__scen {
    aspect-ratio: 4 / 3;
    margin-inline: calc(-1 * var(--marginal));
    --klipp: 1.15;
  }
  .maquette__verktyg { flex-wrap: wrap; }
  .maquette__affisch--ritning img { aspect-ratio: 4 / 3; } /* mobilens ritningsaffisch (poster-plan-m-*) är 4:3 som ytan */
}
/* Mobil: "Återställ vy" blir en rund ikonknapp (namnet finns kvar för skärmläsare), så att väljaren och knappen
   ryms på en rad */
@media (max-width: 599px) {
  .maquette__knapp--aterstall { width: 44px; padding: 0; justify-content: center; flex: none; }
  .maquette__aterstall-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .maquette__vy-text { padding: 0 1em; }
  .maquette__verktyg { flex-wrap: nowrap; }
  /* mitt i överkanten – i gången mellan de två husen (nedtill sitter knappen för pekskärm) */
  .maquette__skala { right: auto; bottom: auto; left: 50%; translate: -50% 0; top: 4px; padding: 5px 4px 3px; justify-items: center; }
}
/* Dator: ytan har ingen ram – modellen och dess skugga tonas ut mot sidorna (5 %) i stället för att kapas av en
   osynlig lodrät kant vid de yttersta vinklarna. Bara i sidled (över- och underkant har hårlinjer). Masken ligger på
   bilderna, inte på ytan – fokusringen och tangentraden ska inte tonas. */
@media (min-width: 900px) {
  .maquette__canvas, .maquette__affisch {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
}
/* Liggande mobil: en 4:3-yta i full bredd vore högre än skärmen (modellen, knappen och bildtexten kan aldrig synas
   samtidigt). Ytan får i stället skärmens höjd minus menyn, verktygsraden och luft; affischen passas in i höjden och
   kameran följer (maquette.js) – hela modellen, centrerad. */
@media (orientation: landscape) and (max-height: 520px) {
  .maquette__scen { aspect-ratio: auto; height: calc(100svh - var(--nav-h) - 82px); --klipp: 1; }
  .maquette__affisch { width: auto; height: 100%; }
  .maquette__affisch img { width: auto; height: 100%; }
}

/* ---------- 8. Färg & material ---------- */
.material { padding-block: var(--sektion); border-top: 1px solid var(--plat); }
/* Med rörelse glider grunden från Utforskas papper till materialets ljusa grund (grund.js) – ingen hård kant mitt i
   den sammanhängande åkningen. Stilla läge: grunderna byter hårt, hårlinjen markerar gränsen som förut. */
.rorelse .material { border-top: 0; }
.material__huvud { row-gap: 22px; margin-bottom: clamp(40px, 7vh, 88px); }
@media (min-width: 900px) {
  .material__etikett { grid-column: 1 / span 3; padding-top: .9em; }
  .material__rubrik { grid-column: 4 / -1; }
  .material__ingress { grid-column: 4 / span 6; }
}
.material__kropp { row-gap: 28px; align-items: start; }
.material__bilder {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #d8d3c9;
}
.material__lager, .material__lager img, .arstid__lager, .arstid__lager img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Övertoning: bara den nya bilden tonas in, överst. Den gamla ligger kvar helt täckande under tills
   toningen är klar (och släpps först efter --dur-lang) – ytor som inte ändras ljusnar aldrig mot bakgrunden. */
.material__lager, .arstid__lager { opacity: 0; z-index: 0; transition: opacity 0s linear var(--dur-lang); }
.material__lager.is-aktiv, .arstid__lager.is-aktiv { opacity: 1; z-index: 1; transition: opacity var(--dur-lang) var(--ease); }
.material__annotering, .material__markering, .material__notiser { z-index: 2; } /* över bildlagren */
.material__annotering { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.annotering__linje {
  fill: none; stroke: var(--ljus); stroke-width: 1;
  filter: drop-shadow(0 0 1.5px rgba(22, 23, 21, .55));
}
.annotering__punkt { fill: none; stroke: var(--ljus); stroke-width: 1; filter: drop-shadow(0 0 1.5px rgba(22, 23, 21, .55)); }
.annotering__karna { fill: var(--guld); }
.material__annotering > * { opacity: 0; transition: opacity var(--dur-ui) var(--ease); }
.material__annotering.is-synlig > * { opacity: 1; }
.material__markering {
  position: absolute; left: 0; top: 0;
  padding: 7px 10px 6px; background: var(--takduk); color: var(--ljus);
  font-size: 11px; white-space: nowrap;
  border-left: 2px solid var(--guld);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
  pointer-events: none;
}
.material__markering.is-synlig { opacity: 1; transform: none; }
.material__notiser { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.material__bildtext {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; justify-content: space-between;
  padding-top: 12px; color: var(--grafit);
}
.material__val { display: grid; gap: 26px; }

/* Valgrupper och chips (gemensamt för material och årstid). Grundform: piller. Vald: kolsvart med guldbock. */
.valgrupp { border: 0; margin: 0; padding: 0; min-width: 0; }
.valgrupp__rubrik {
  display: block; width: 100%; padding: 0 0 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--takduk);
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase;
}
.valgrupp__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 1px 3px; /* plats för fokusringen */ }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.chip__yta {
  display: inline-flex; align-items: center; gap: 0;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--plat); border-radius: 999px;
  font-size: .9688rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color var(--dur-snabb) var(--ease), border-color var(--dur-snabb) var(--ease), color var(--dur-snabb) var(--ease), padding var(--dur-snabb) var(--ease);
}
.chip:hover .chip__yta { border-color: var(--takduk); }
.chip__bock {
  width: 0; height: 9px; overflow: hidden; flex: none;
  transition: width var(--dur-snabb) var(--ease), margin var(--dur-snabb) var(--ease);
}
.chip__bock::before {
  content: ""; display: block; width: 4px; height: 8px; margin-left: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.chip input:checked + .chip__yta { background: var(--takduk); border-color: var(--takduk); color: var(--ljus); padding-left: 13px; }
.chip input:checked + .chip__yta .chip__bock { width: 12px; margin-right: 7px; color: var(--guld-ljus); }
.chip input:focus-visible + .chip__yta { outline: 2px solid var(--takduk); outline-offset: 3px; }
.chip__prov { display: none; } /* materialprovet visas bara i förteckningen (från 700 px) */
.material__not { font-size: .9375rem; line-height: 1.45; color: var(--grafit); padding-top: 14px; border-top: 1px solid var(--plat); max-width: 30em; }

/* Dator (≥ 1024 px): valen i en smal kolumn bredvid bilden. */
@media (min-width: 1024px) {
  .material__ram { grid-column: 1 / span 8; }
  .material__val { grid-column: 9 / -1; gap: 28px; }
}
/* Från 700 px: materialvalen som en förteckning – prov, namn, bock – en rad per alternativ.
   (Dator: en kolumn bredvid bilden. Surfplatta 700–1023 px: tre kolumner under bilden.) */
@media (min-width: 700px) {
  .material__val .valgrupp__rubrik { margin-bottom: 0; padding-bottom: 9px; }
  .material__val .valgrupp__chips { display: block; padding: 0; }
  .material__val .chip { display: block; border-bottom: 1px solid var(--plat); }
  .material__val .chip__yta {
    position: relative;
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; column-gap: 14px;
    min-height: 46px; padding: 3px 2px 3px 12px;
    border: 0; border-radius: 0;
    font-size: .9688rem; line-height: 1.2; white-space: normal;
    transition: background-color var(--dur-snabb) var(--ease), color var(--dur-snabb) var(--ease);
  }
  .material__val .chip__yta::before { /* markeringsstapel till vänster (guld) */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--guld); transform: scaleY(0); transition: transform var(--dur-snabb) var(--ease);
  }
  .material__val .chip__prov {
    display: block; grid-column: 1; grid-row: 1; width: 40px; height: 40px; object-fit: cover;
    outline: 1px solid rgba(30, 31, 29, .1); outline-offset: -1px; background: var(--plat);
  }
  .material__val .chip__namn { grid-column: 2; grid-row: 1; }
  .material__val .chip__bock {
    grid-column: 3; grid-row: 1; position: relative;
    width: 18px; height: 18px; margin: 0; overflow: visible; border-radius: 50%;
    transition: background-color var(--dur-snabb) var(--ease), box-shadow var(--dur-snabb) var(--ease);
  }
  .material__val .chip__bock::before {
    position: absolute; left: 6.5px; top: 3.5px; margin: 0;
    border-color: var(--guld-ljus); transform: rotate(45deg); opacity: 0; transition: opacity var(--dur-snabb) var(--ease);
  }
  .material__val .chip:hover .chip__yta { background: rgba(246, 244, 239, .8); }
  .material__val .chip:hover .chip__bock { box-shadow: inset 0 0 0 1px var(--plat); }
  .material__val .chip input:checked + .chip__yta { background: transparent; color: var(--takduk); padding-left: 12px; font-weight: 600; }
  .material__val .chip input:checked + .chip__yta::before { transform: none; }
  .material__val .chip input:checked + .chip__yta .chip__bock { width: 18px; margin: 0; background: var(--takduk); box-shadow: none; }
  .material__val .chip input:checked + .chip__yta .chip__bock::before { opacity: 1; }
  .material__val .chip input:focus-visible + .chip__yta { outline-offset: -2px; }
}
@media (min-width: 1280px) {
  .material__ram { grid-column: 1 / span 9; }
  .material__val { grid-column: 10 / -1; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .material__val { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ranna); row-gap: 22px; }
  .material__not { grid-column: 1 / -1; }
}
/* Mobil: den stående renderingen (4:5) och alla val ryms på en skärm under menyn (390×844) –
   så att man ser förändringen när man väljer. --mat-kontroller-h = höjd för bildtext + tre grupper.
   Lägre skärmar: bilden beskärs något i höjdled (object-fit: cover), linjen räknar själv om. */
@media (max-width: 699px) {
  .material { --mat-kontroller-h: 336px; }
  @media (max-width: 405px) { .material { --mat-kontroller-h: 354px; } } /* bildtexten (11 px) bryts på två rader upp till ca 402 px */
  .material__kropp { row-gap: 14px; }
  .material__bilder {
    /* Bredden anges uttryckligen: annars krymper max-height bredden via bildförhållandet. */
    width: 100%; aspect-ratio: 4 / 5; height: auto;
    max-height: max(260px, calc(100svh - var(--nav-h) - var(--mat-kontroller-h)));
  }
  .material__lager img { object-position: 50% 60%; }
  .material__val { gap: 12px; }
  .material__val .valgrupp__rubrik { padding-bottom: 6px; margin-bottom: 8px; }
  /* Tre chips på en rad inom marginalerna ned till ca 340 px skärmbredd (texten krymper något under 390 px).
     Ännu smalare: sista chipet bryts till en ny rad – aldrig en dold sidledsscroll. */
  .material__val .valgrupp__chips { gap: 8px 6px; }
  .material__val .chip { flex: none; }
  .material__val .chip__yta { padding: 0 clamp(9px, 2.9vw, 11px); font-size: clamp(13px, 3.72vw, .9063rem); }
  .material__val .chip input:checked + .chip__yta { padding-left: clamp(8px, 2.4vw, 9px); }
  .material__val .chip input:checked + .chip__yta .chip__bock { width: 10px; margin-right: 6px; }
  .chip__bock::before { margin-left: 2px; }
  .material__bildtext { gap: 4px 16px; padding-top: 8px; }
  .material__bildtext .mono { font-size: 11px; letter-spacing: .06em; text-wrap: balance; }
  .material__notiser { top: auto; bottom: 10px; left: 10px; }
  .material__not { margin-top: 6px; }
}
/* Liggande mobil / låg surfplatta (700–1023 px bred, under 540 px hög): bilden står kvar (sticky) till vänster
   och valen löper i en kolumn bredvid – så att man ser bytet när man väljer. */
@media (min-width: 700px) and (max-width: 1023px) and (max-height: 539px) and (orientation: landscape) {
  .material__ram { grid-column: 1 / span 7; position: sticky; top: calc(var(--nav-h) + 8px); }
  .material__bilder { max-height: calc(100svh - var(--nav-h) - 96px); }
  .material__val { grid-column: 8 / -1; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}

/* 8b. Ute: årstid och ljus – mindre väljare under materialväljaren, samma mönster. */
/* Hårlinjen över blocket följer rutnätet (som .sidfot__info::before) – ingen kant i full bredd mitt i sektionen.
   Avståndet linje → innehåll är detsamma som förut: marginalen + radavståndet (18 px) = clamp(28px, 4vh, 44px). */
.arstid {
  margin-top: clamp(72px, 12vh, 150px);
  row-gap: 18px; align-items: start;
}
.arstid::before {
  content: ""; grid-column: 1 / -1; grid-row: 1; height: 1px; background: var(--plat);
  margin-bottom: calc(clamp(28px, 4vh, 44px) - 18px);
}
.arstid__rubrik { font-size: clamp(1.6rem, 2.3vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.arstid__bilder { position: relative; aspect-ratio: 1600 / 754; overflow: hidden; background: var(--plat); }
.arstid__bildtext { display: grid; gap: 6px; padding-top: 12px; color: var(--grafit); font-size: .9375rem; line-height: 1.45; }
.arstid__val { display: grid; gap: 22px; align-content: start; }
.arstid__grupper { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 18px clamp(20px, 3vw, 40px); }
.arstid__grupper .valgrupp__rubrik { padding-bottom: 8px; margin-bottom: 10px; }
/* Dator: bilden till vänster, rubriken och valen i en spalt till höger. Bilden slutar exakt där
   materialramen ovanför slutar (samma kolumner som .material__ram) och valen står i materialvalens spalt –
   en gemensam högerkant, en ränna före valen. Mobil/surfplatta: rubrik, bild, val – samma ordning som
   materialväljaren. (Bildens sizes i index.html och arstid.js följer bredden: 61vw resp. 70vw.) */
@media (min-width: 1024px) {
  .arstid { grid-template-rows: auto auto 1fr; } /* rad 1 = hårlinjen (::before) */
  .arstid__ram { grid-column: 1 / span 8; grid-row: 2 / span 2; }
  .arstid__rubrik { grid-column: 9 / -1; grid-row: 2; }
  .arstid__val { grid-column: 9 / -1; grid-row: 3; padding-top: 8px; }
  .arstid__grupper { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .arstid__ram { grid-column: 1 / span 9; }
  .arstid__rubrik, .arstid__val { grid-column: 10 / -1; }
}
/* Mobil: grupperna under varandra – varje grupp får sina två val på en rad. */
@media (max-width: 699px) {
  .arstid__grupper { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- 9. Kunden – "Bilden öppnar sig" (kund.js) ----------
   Mikaels riktiga foto i parken (inget frilagt). Grundreglerna nedan ÄR slutbilden (stilla läge, utan JS):
   – mobil/stående: 4:5-fotot i full bredd, etiketten, citatet (mörk text) och attributionen under på den ljusa grunden;
   – dator (från 900 px, liggande, minst 501 px hög): fotot i helbild (21:9 från 2:1, annars 16:9), en mjuk mörk toning
     över vänstra halvan och citatet i ljus Newsreader kursiv nere till vänster över bilden, attributionen sist.
   kund.js räknar fram utsnittet (--kund-pos: Mikael i högra tredjedelen) och citatets bredd (--kund-a: fram till hans
   axel, med luft) ur hans läge i bilderna (data-attributen i index.html). Med rörelse (.kunden--rorelse) styr skriptet
   ramen (clip-path), skalan, toningen och raderna; mobil: en mjuk klippöppning och raderna när citatet kommer in. */
.kunden { position: relative; z-index: 1; background: var(--fasad); padding-block: var(--sektion); border-top: 1px solid var(--plat); }
.kunden__bild {
  position: relative; overflow: hidden;
  /* full bredd; på låga liggande skärmar högst så bred att hela 4:5-bilden ryms under menyn */
  width: min(100%, (100svh - var(--nav-h) - 32px) * .8);
  margin-inline: auto; aspect-ratio: 4 / 5;
  background: #5C564A; /* bildens medelton medan den laddas (efter omgraderingen, SPEC-v4 §5) */
}
.kunden__bild picture, .kunden__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kunden__bild img { object-fit: cover; object-position: var(--kund-pos, 50% 50%); }
.kunden__toning { display: none; }
.kunden__grid { margin-top: clamp(28px, 5vh, 48px); }
.kunden__text { display: grid; gap: clamp(16px, 2.6vh, 26px); justify-items: start; }
.citat__text p {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.9rem, 1.2rem + 3.1vw, 4.4rem);
  line-height: 1.08; letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.citat__tecken { margin-left: -.33em; } /* = framstegsbredden för ” i Newsreader kursiv: D linjerar med raderna under */
.citat__kalla {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  margin-top: clamp(24px, 4vh, 40px); padding-top: 14px;
}
/* Hårlinjen ovanför attributionen (ritas fram när attributionen kommer, --kalla-linje 0–1 sätts av kund.js) */
.citat__kalla::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--text);
  transform-origin: 0 50%; transform: scaleX(var(--kalla-linje, 1));
  max-width: 24rem;
}
.citat__namn { font-weight: 600; font-size: 1.0625rem; }
.citat__roll { color: var(--text-2); }
/* Staplat läge med rörelse (om.js): Kunden målar ingen egen grund – sidans grund blandas över gränsen till Om, och
   texten byter tema med grunden (data-grund-anpassa → .tema-mork). */
.grund-styrd .kunden--genomskinlig { background: transparent; }
.grund-styrd .om--genomskinlig .om__fast { background: transparent; }
/* Raderna (kund.js, bara med rörelse): citatet visas ur en kopia där varje ord är maskat (clip-path) och stiger
   som sin rad – samma mask som rubrikerna (§15d), men styrd av scrollen. Originalet läses upp (visuellt dolt). */
.kund-ord { display: inline-block; vertical-align: top; clip-path: inset(-.36em -.6em -.42em -.6em); }
.kund-ord__inre { display: inline-block; vertical-align: top; will-change: transform; }

/* Dator: bilden i helbild, citatet nere till vänster över toningen. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .kunden { padding: 0; border-top: 0; }
  .kunden__scen { position: relative; height: 100vh; height: 100svh; overflow: clip; }
  .kunden__bild { position: absolute; inset: 0; width: auto; margin: 0; aspect-ratio: auto; }
  .kunden__bild picture { transform-origin: var(--kund-origo, 70% 30%); }
  /* Toningen: mörk över vänstra ca 55 % (där citatet står), nästan inget över Mikael; en svag extra skugga nere till
     vänster under attributionen. Uppmätt kontrast för texten: se GUIDE.md avsnitt 12. */
  .kunden__toning {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(120% 75% at 0% 100%, rgba(14, 15, 13, .42), rgba(14, 15, 13, 0) 72%),
      linear-gradient(90deg, rgba(14, 15, 13, .74) 0%, rgba(14, 15, 13, .62) 22%, rgba(14, 15, 13, .36) 40%, rgba(14, 15, 13, .12) 50%, rgba(14, 15, 13, 0) 58%);
  }
  .kunden__grid { position: absolute; inset: auto 0 0 0; margin: 0; padding-bottom: clamp(32px, 8.5vh, 96px); color: var(--ljus); }
  .kunden__text { max-width: var(--kund-a, 44vw); }
  .kunden__etikett { color: rgba(246, 244, 239, .82); }
  .citat__text p { font-size: clamp(1.75rem, min(var(--kund-a, 44vw) / 10.5, 7svh), 4.4rem); color: var(--ljus); }
  .citat__kalla::before { background: rgba(246, 244, 239, .5); }
  .citat__roll { color: rgba(246, 244, 239, .82); }
  /* Med rörelse: scenen står fast – 180vh egen koreografi + --kund-svep (78vh) för övertagandet (om.js): först tonas
     etiketten, citatet och attributionen ut tillsammans (--kund-ut 0 → 1, ease-out-quart i om.js), sedan sveps Om-scenen
     fram från nederkanten över bilden, som viker undan något och skymmer (--kund-skymning). */
  .kunden--rorelse { height: calc(100svh + 180vh + var(--kund-svep)); }
  .kunden--rorelse .kunden__scen { position: sticky; top: 0; }
  .kunden--rorelse .kunden__text {
    opacity: calc(1 - var(--kund-ut, 0));
    transform: translate3d(0, calc(var(--kund-ut, 0) * -16px), 0);
  }
  .kunden--rorelse .kunden__scen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: #0E0F0D; opacity: var(--kund-skymning, 0);
  }
  .kunden--rorelse .kunden__bild picture { will-change: transform; }
  .kunden--rorelse .kunden__toning { will-change: opacity; }
}

/* ---------- 9b. Om Castorlab ----------
   Lager bakifrån: grunden → två rader löptext → porträttplattan (ramen, med egen ljus grund) → guldskissen
   av fasaden → rubriken. Grundreglerna nedan ÄR slutbilden (stilla läge, utan JS): inramat porträtt på
   kolsvart, skissen färdigritad, texten synlig. Med rörelse lägger om.js till .om--rorelse och styr
   variablerna nedan med scrollen (se om.js för tidslinjen):
     --om-grund        grundens färg (#ECE9E1 → #1E1F1D)
     --om-k            ramen: 0 = helbild, 1 = inramad platta (clip-path inset)
     --om-plattgrund   plattans egen ljusa grund, täckning 0–1 (döljer löptexten inne i ramen)
     --om-rad1/-rad2   löptextens färger; rad 2 blir en guldkontur (--om-rad2-linje)
     --om-bak-skala    löptextens skala (dator: 1 → 0,68 medan ramen krymper)
     --om-text         rubrikens synlighet (dator)
   Ramens mått: --ram-b × --ram-h, överkant --ram-topp (räknat i plattans ruta).
   Mobil först (staplad: stående 3:4-ram, löptexten under ramen, texten efter); dator i mediefrågan längre ned. */
.om { position: relative; background: var(--takduk); color: var(--ljus); }
.om__scen {
  --om-kvot: 0.7489; /* maged-v2: 1011 × 1350 (om.js byter till v1-värdet om v2 saknas) */
  --om-grund: var(--takduk);
  --om-k: 1;
  --om-plattgrund: 1;
  --om-rad1: #3A3A36;
  --om-rad2: rgba(58, 58, 54, 0);
  --om-rad2-linje: var(--guld);
  --om-bak-skala: 1;
  --om-text: 1;
  position: relative;
}
.om__fast {
  /* Staplad (mobil, stående surfplatta): stående 3:4-ram som ryms tillsammans med löptexten under menyn. */
  --ram-b: min(100vw - 2 * var(--marginal) - 24px, 540px, (100svh - var(--nav-h) - 200px) * .75);
  --ram-h: calc(var(--ram-b) * 4 / 3);
  --ram-topp: 0px;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "platta" "bak" "front";
  padding-top: calc(var(--nav-h) + 16px);
  overflow: hidden;
  /* Grunden målas av den fasta scenen (inte av hela .om__scen): vid övertagandet från Kunden ligger .om__scen
     över Kundens sista skärm, och bara scenen – klippt från nederkanten – får täcka Mikaels bild. */
  background: var(--om-grund);
}
.om__flytt { grid-area: platta; position: relative; height: var(--ram-h); }
.om__platta {
  position: absolute; inset: 0;
  background: rgba(236, 233, 225, var(--om-plattgrund));
  clip-path: inset(
    calc(var(--om-k) * var(--ram-topp))
    calc(var(--om-k) * (50% - var(--ram-b) / 2))
    calc(var(--om-k) * (100% - var(--ram-topp) - var(--ram-h)))
  );
  /* Eget lager: ramen klipps en gång för hela plattan – annars syns plattans ljusa grund som en tunn ljus kant
     där den mörka tröjan möter ramens kant. */
  will-change: transform;
}
/* Porträttets läge i slutbilden: lite bredare än ramen (armarna beskärs av ramens sidor), hjässan strax under
   ramens överkant, bålen fortsätter ut under ramens nederkant. Hjässan ligger 2,8 % ned i v2-bilden. */
.om__portratt, .om__portratt-mal {
  --pb: calc(var(--ram-b) * 1.16);
  --ph: calc(var(--pb) / var(--om-kvot));
  position: absolute;
  left: calc(50% - var(--pb) / 2);
  top: calc(var(--ram-topp) + var(--ram-h) * .045 - var(--ph) * .028);
  width: var(--pb); height: var(--ph);
  pointer-events: none;
}
.om__portratt-mal { visibility: hidden; }
.om__portratt picture, .om__portratt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
/* maged-* (v1, reserv) är beskuren rakt i sidorna: kanterna tonas ut. v2 har inga sidokanter. */
.om--v1 .om__portratt {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
}
/* Guldskissen av fasaden: framför ramens nedre del och lite ut över ramens kant. Linjerna ritas med
   stroke-dashoffset (om.js); --skiss-linje = linjebredden i SVG-enheter (om.js räknar fram ≈ 1,5–1,8 px). */
.om__skiss {
  position: absolute; left: 50%; bottom: calc(var(--ram-h) * -.035);
  width: calc(var(--ram-b) * 1.18); height: auto; max-height: calc(var(--ram-h) * .5);
  transform: translateX(-50%);
  overflow: visible; color: var(--guld); pointer-events: none;
}
.om__skiss :is(path, line, polyline, polygon, rect, circle, ellipse) {
  fill: none; stroke: currentColor; stroke-width: var(--skiss-linje, 3.2);
  stroke-linecap: round; stroke-linejoin: round; vector-effect: none;
}
.om__skiss :is(text, image, use) { display: none; }
.om__bak { grid-area: bak; position: relative; margin-top: 30px; pointer-events: none; user-select: none; opacity: var(--om-bak-o, 1); }
.om__bak-skala { transform: scale(var(--om-bak-skala)); transform-origin: 50% 50%; }
.om__rad {
  font-size: 13vw; font-weight: 700; line-height: .84; letter-spacing: -0.03em;
  text-transform: uppercase; white-space: nowrap;
}
.om__rad--1 { color: var(--om-rad1); }
.om__rad--2 { color: var(--om-rad2); -webkit-text-stroke: max(1.25px, .008em) var(--om-rad2-linje); }
.om__spar { display: inline-block; }
.om__spar::before { content: attr(data-text); white-space: pre; }
/* Utgångsläge (rörelse: om.js flyttar raderna åt var sitt håll med scrollen) */
.om__rad--1 .om__spar { transform: translateX(-10%); }
.om__rad--2 .om__spar { transform: translateX(-35%); }
.om__front {
  grid-area: front;
  display: grid; gap: 14px; justify-items: start;
  margin: 28px var(--marginal) 0; padding-top: 24px;
  border-top: 1px solid rgba(246, 244, 239, .2);
  opacity: var(--om-text);
  /* Egen kolsvart grund: syns inte (grunden är redan kolsvart när blocket syns), men kontrastverktyg (axe,
     Lighthouse) bortser från plattans clip-path och skulle annars mäta texten mot plattans ljusa grund. */
  background: var(--takduk);
}
.om__front .etikett { color: rgba(246, 244, 239, .72); }
.om__rubrik { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.035em; line-height: .98; text-wrap: balance; color: var(--ljus); }
.om__namn { font-size: 1.0625rem; font-weight: 600; color: var(--guld-ljus); letter-spacing: -0.005em; }

/* Biografin: kolsvart, två lugna spalter (första meningen stort, sedan styckena). */
.om__bio { padding-block: clamp(56px, 10vh, 128px) var(--sektion); row-gap: 28px; align-items: start; }
.om__lead {
  font-size: clamp(1.5rem, 1rem + 1.1vw, 2.25rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; /* under rubriken */
  text-wrap: balance; max-width: 16em; color: var(--text);
}
.om__bio { color: var(--text); }
.om__brodtext { color: var(--text); }
.om__bio.tema-mork .om__brodtext { color: rgba(246, 244, 239, .84); }
.om__notiser { grid-column: 1 / -1; }
/* Namnteckningen (signatur.js): avslutar texten i jag-form, i textspalten och linjerad mot styckenas vänsterkant
   (bläcket börjar ca 1 % in i bilden). Guld på kolsvart (--guld), --guld-text på ljus grund. Med rörelse ritas den
   fram en gång (≈ 2 s); --vantar döljer bilden medan den inbäddade versionen hämtas (platsen står kvar). */
.om__signatur { margin-top: clamp(26px, 2.2em, 44px); width: clamp(200px, 15vw, 290px); color: var(--guld-text); }
.tema-mork .om__signatur { color: var(--guld); }
.om__signatur img, .om__signatur svg { display: block; width: 100%; height: auto; aspect-ratio: 1020 / 334; overflow: visible; }
.om__signatur .signatur__yta { fill: currentColor; }
.om__signatur--vantar img { visibility: hidden; }
@media (min-width: 900px) {
  .om__lead { grid-column: 1 / span 5; }
  .om__brodtext { grid-column: 7 / span 6; }
  .om__brodtext p { max-width: 34em; }
}
/* Kontakt efter Om: tillbaka på sidans ljusa grund – färgbytet är skiljelinjen. */
.om + .kontakt { border-top: 0; }

/* Rörelse (.om--rorelse, sätts av om.js): utgångsläget innan första ritningen. Staplad: porträttet börjar
   större i den breda plattan och landar i ramen. */
.om--rorelse .om__scen {
  --om-grund: #ECE9E1; --om-k: 0; --om-plattgrund: 0;
  --om-rad1: #D8D2C6; --om-rad2: #D8D2C6; --om-rad2-linje: rgba(197, 167, 118, 0);
}
.om--rorelse .om__portratt { --pb: calc(var(--ram-b) * 1.5); transform-origin: 50% 0; will-change: transform; }
.om--rorelse .om__spar { will-change: transform; }
/* Skissen förbereds först när Om närmar sig (om.js): dold tills linjerna står på rätt ritläge. */
.om--rorelse .om__skiss:not(.is-klar) { visibility: hidden; }

/* Lagrad scen (dator, liggande; även låga liggande mobiler): ramen centrerad (4:5, ca 72 % av höjden),
   löptexten bakom ramen, rubriken nere till vänster på den mörka grunden. Samma villkor som LAGRAD i om.js. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px) {
  .om__fast {
    --ram-h: min(72svh, (100vw - 2 * (var(--marginal) + 230px)) / .8);
    --ram-b: calc(var(--ram-h) * .8);
    --ram-topp: calc(50% + var(--nav-h) / 2 - var(--ram-h) / 2);
    display: block; height: 100vh; height: 100svh; padding: 0;
  }
  .om__flytt { position: absolute; inset: 0; height: auto; }
  /* Skissen går ut över ramens kanter men aldrig in i rubrikens spalt: "Personen bakom" ≈ 6,9 em av rubrikens
     storlek (clamp nedan × 6,9) + marginal + 32 px luft på var sida. */
  .om__skiss {
    width: min(var(--ram-b) * 1.3, 100% - 2 * (var(--marginal) + clamp(13.1rem, 20vw, 24.84rem) + 32px));
    max-height: calc(var(--ram-h) * .55);
    bottom: calc(100% - var(--ram-topp) - var(--ram-h) * 1.06);
  }
  .om__bak { position: absolute; inset: var(--nav-h) 0 0 0; margin: 0; display: flex; flex-direction: column; justify-content: center; }
  .om__scen { --om-bak-skala: .68; }
  .om__rad { font-size: min(15vw, 24svh); }
  .om__front {
    position: absolute; z-index: 3; left: var(--marginal); bottom: clamp(24px, 7vh, 80px);
    margin: 0; padding: 0; border: 0;
    /* Högst fram till ramen – och fram till guldskissens vänsterkant (andra termen = .om__skiss bredd ovan,
       minus 8 px luft för parallaxen ±6 px), så att den kolsvarta grunden aldrig täcker skissen.
       Ändras skissens bredd: ändra båda. */
    max-width: min(calc(50% - var(--ram-b) / 2 - var(--marginal) - 24px),
      calc(50% - min(var(--ram-b) * 1.3, 100% - 2 * (var(--marginal) + clamp(13.1rem, 20vw, 24.84rem) + 32px)) / 2 - var(--marginal) - 8px));
    transform: translateY(calc((1 - var(--om-text)) * 18px));
  }
  .om__rubrik { font-size: clamp(1.9rem, 2.9vw, 3.6rem); }
  /* Rörelse: scenen står fast (sticky) ca 160vh. Porträttets ruta = startbilden (helbild, ansiktet ≈ 40 % av
     höjden, bålen ut under nederkanten); om.js skalar ned den till slutbildens läge (.om__portratt-mal). */
  .om--rorelse .om__scen { height: calc(100svh + 160vh); --om-text: 0; --om-bak-skala: 1; }
  .om--rorelse .om__fast { position: sticky; top: 0; }
  /* Övertagandet från Kunden (om.js sätter klassen; dator med Kundens fasta scen): Om-scenens överkant ligger där
     Kundens egen koreografi slutar (Om ligger över Kundens sista 100svh + --kund-svep), så den fasta rutan står redan
     stilla högst upp när övertagandet börjar. Först tonas Kundens text ut (18vh), sedan klipps rutan fram från
     nederkanten (clip-path inset, om.js) över Mikaels bild, som står kvar: porträttet är redan komponerat och förankrat
     i nederkanten – inget som glider upp underifrån. Scenen är --kund-svep längre (svepet + Om-koreografin, 160vh).
     #om landar där svepet är klart (början av koreografin). */
  .om--svep {
    z-index: 2; margin-top: calc(-100svh - var(--kund-svep));
    scroll-margin-top: calc(0px - var(--kund-svep) - var(--nav-h)); background: transparent;
  }
  .om--svep .om__scen { height: calc(100svh + var(--kund-svep) + 160vh); }
  /* Övriga lagrade lägen (liggande mobil, kvadratiska fönster – Kunden står då staplad): ridån. Om ligger UNDER
     Kundens sista skärm; scenen står redan stilla högst upp och avtäcks när Kunden scrollar bort (Kunden har egen
     grund och ligger över, z-index) – inget huvud som glider upp underifrån. */
  .om--rida { z-index: 0; margin-top: -100svh; scroll-margin-top: calc(-100svh - var(--nav-h)); }
  .om--rida .om__scen { height: calc(200svh + 160vh); }
  /* Kunden och Om-scenen har samma ljusa grund: Kundens nederkant får en hårlinje och en mjuk skugga, så att den läses
     som ett blad som lyfts bort från scenen under – aldrig som ett porträtt som klipps av mitt på sidan. */
  .kunden--over { box-shadow: 0 1px 0 var(--plat), 0 26px 44px -18px rgba(30, 31, 29, .28); }
  .om--rorelse .om__portratt {
    --ph: min(112svh, 1500px);
    --pb: calc(var(--ph) * var(--om-kvot));
    top: max(calc(var(--nav-h) + 1.5svh), calc(100svh - var(--ph)));
  }
  /* Startbilden: löptextens två rader står bakom huvudet (radernas mitt i höjd med munnen, ca 30 % ned i porträttet)
     i stället för mitt i skärmen – så kommer huvud, axlar och löptext tillsammans när bladet glider upp över Kunden.
     Medan ramen krymper (--om-k 0 → 1) glider raderna till mitten bakom ramen. */
  .om--rorelse .om__bak-skala {
    --om-bak-y0: calc(max(var(--nav-h) + 1.5svh, 100svh - min(112svh, 1500px)) + .3 * min(112svh, 1500px) - 50svh - var(--nav-h) / 2);
    transform: translateY(calc((1 - var(--om-k)) * var(--om-bak-y0))) scale(var(--om-bak-skala));
  }
}
/* Liggande mobil: löptexten flyttas upp bakom ramens övre del (och blir något mindre), fri från etiketten och
   rubriken nere till vänster. 50svh – inte --ram-topp, vars 50 % i padding räknas mot bredden. Taket 4svh
   håller raderna högt även på 640–667 px breda telefoner, där ramen är smalare och står lägre.
   Rubrikblocket utan egen grund här: löptexten passerar bakom texten och en kolsvart ruta skulle skära ut den. */
@media (orientation: landscape) and (max-height: 520px) {
  .om__bak { justify-content: flex-start; padding-top: clamp(0px, 50svh - var(--nav-h) / 2 - var(--ram-h) / 2, 4svh); }
  .om__rad { font-size: min(15vw, 17svh); }
  .om__front { background: none; }
  .om--rorelse .om__bak-skala { --om-bak-y0: 0px; } /* raderna har egen placering här (ovan) */
}

/* ---------- 10. Kontakt ---------- */
.kontakt { padding-block: var(--sektion); border-top: 1px solid var(--plat); }
.kontakt__grid { row-gap: clamp(36px, 6vh, 64px); align-items: start; }
.kontakt__huvud { display: grid; gap: 20px; }
.kontakt__rubrik { max-width: 13em; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--ranna); }
.formular__skicka, .formular__status, .falt--bred, .falt:first-child { grid-column: 1 / -1; }
.falt { display: grid; gap: 8px; align-content: start; }
.falt label { font-size: .9375rem; font-weight: 500; }
.falt__valfritt { color: var(--text-2); font-weight: 400; }
.falt input, .falt textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--text); border-radius: 0;
  background: transparent; padding: 10px 0 9px; font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--dur-snabb) var(--ease), background-color var(--dur-snabb) var(--ease);
}
/* Ingen webbläsarens storleksgrepp: fältet växer med texten (field-sizing; kontakt.js gör samma sak där det saknas),
   samma hårlinje nedtill som övriga fält. */
.falt textarea {
  resize: none; field-sizing: content; min-height: 9em; max-height: 24em; overflow-y: auto; display: block;
}
.falt input:hover, .falt textarea:hover { background: rgba(246, 244, 239, .6); }
.tema-mork .falt input:hover, .tema-mork .falt textarea:hover { background: rgba(246, 244, 239, .06); }
.falt [aria-invalid="true"] { border-color: var(--fel); }
.falt__fel { color: var(--fel); font-size: .9375rem; }
.falt__fel:empty { display: none; }
.falt__hjalp { color: var(--text-2); font-size: .9375rem; }
/* Fälla för robotar: utanför skärmen, inte i tabbordningen, dold för skärmläsare. */
.falla { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular__skicka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
/* Hur uppgifterna används (jury J2-6, GDPR art. 13): bredvid Skicka när det ryms, annars under. */
.formular__integritet { flex: 1 1 18em; max-width: 30em; text-wrap: pretty; }
.formular__status { font-size: 1rem; line-height: 1.5; padding: 14px 16px; background: var(--ljus); color: var(--takduk); border-left: 2px solid var(--guld); --fokus: var(--takduk); }
.formular__status:empty { display: none; }
.formular__status:focus { outline: none; }
.formular__status:focus-visible { outline: 2px solid var(--takduk); outline-offset: 3px; }
.formular__status p + p { margin-top: 6px; }
.formular__status a { font-weight: 500; }
.formular__status--ok { border-left-color: var(--takduk); }
.formular__status strong { font-weight: 600; }
.kontakt__direkt { display: grid; gap: 14px; align-content: start; }
.kontakt__lista { border-top: 1px solid var(--text); }
.kontakt__lista li { border-bottom: 1px solid var(--linje); }
.kontakt__lank, .kontakt__adress {
  display: flex; align-items: center; min-height: 52px; padding-block: 8px;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;
  text-decoration: none; overflow-wrap: anywhere;
}
.kontakt__lank { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 0 1px no-repeat; transition: background-size var(--dur-ui) var(--ease); }
.kontakt__lank:hover { background-size: 100% 1px; }
.kontakt__adress { color: var(--text-2); }
.kontakt__kopiera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 6px; font-size: .9375rem; }
.kontakt__kopiera-status { color: var(--guld-text); }
.tema-mork .kontakt__kopiera-status { color: var(--guld-ljus); }
.kontakt__kopiera .textlank { --tl-pad: 12px; }
@media (min-width: 900px) {
  .kontakt__huvud { grid-column: 1 / span 9; }
  .kontakt__formular { grid-column: 1 / span 7; }
  .kontakt__direkt { grid-column: 9 / -1; padding-top: 2px; }
}
@media (min-width: 1200px) {
  .kontakt__direkt { grid-column: 9 / span 3; }
}
@media (max-width: 599px) { .formular { grid-template-columns: 1fr; } }

/* ---------- 11. Sidfot: avslutningen ----------
   En hel skärm: en kort rad (ett eko av rubriken i öppningen: "Innan huset är byggt."), kontaktraden med
   Bildkrediter och det stora ordmärket CASTORLAB nederst (logotypens masker – CASTOR i textfärg, LAB i guld).
   Ingen knapp: formuläret står precis ovanför. Kolsvart (tema-mork); med rörelse glider sidans grund hit från Kontakt
   och texten följer grundens tema (grund.js). Mobil: ordmärket på två rader. */
.sidfot {
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  overflow: clip;
}
.sidfot__scen {
  flex: 1; display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(28px, 9vh, 120px)) 0 max(var(--marginal), env(safe-area-inset-bottom));
}
.sidfot__topp { row-gap: 28px; align-items: end; }
.sidfot__rad {
  grid-column: 1 / -1;
  font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.035em; line-height: .95; /* ekot av h1: samma storlek */
  text-wrap: balance; max-width: 11em;
}
.sidfot__info {
  margin-top: clamp(28px, 6vh, 72px); margin-bottom: clamp(40px, 9vh, 120px);
  align-items: center; row-gap: 6px;
}
.sidfot__info::before { /* hårlinje över hela rutnätet */
  content: ""; grid-column: 1 / -1; height: 1px; background: var(--linje); margin-bottom: 10px;
}
.sidfot__kontakt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; font-size: 1rem; }
.sidfot__kontakt li { display: flex; align-items: center; }
.sidfot__kontakt li + li::before { content: "·"; margin-inline: .8em; color: var(--text-2); }
.sidfot__kontakt a, .sidfot__kontakt address { display: inline-flex; align-items: center; min-height: 44px; }
.sidfot__kontakt a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 11px) / 0 1px no-repeat; transition: background-size var(--dur-ui) var(--ease-ut); }
.sidfot__kontakt a:hover { background-size: 100% 1px; }
.sidfot__kontakt address { color: var(--text-2); }
.sidfot__lankar { grid-column: 1 / -1; justify-self: start; display: flex; flex-wrap: wrap; column-gap: 1.6em; }
.sidfot__krediter, .sidfot__kakor { font-size: .9375rem; color: var(--text-2); --tl-pad: 12px; }
@media (min-width: 900px) {
  .sidfot__kontakt { grid-column: 1 / span 8; }
  .sidfot__lankar { grid-column: 9 / -1; justify-self: end; }
}
/* Ordmärket: hela bredden inom marginalerna, nederst. Nio bokstäver (som i öppningen), klippta ur maskerna. */
.sidfot__ordmarke {
  position: relative; margin: auto var(--marginal) 0;
  aspect-ratio: 2400 / 278; overflow: clip;
}
.sidfot__ordmarke .ordmarke__del--castor { background: var(--text); }
.sidfot__ordmarke .bokstav { position: absolute; inset: 0;
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
/* Mobil: CASTOR och LAB på två rader – ordmärket blir ca 50 % högre än på en rad. CASTOR (0,21–66,13 % av
   maskens bredd) fyller raden; LAB (68,17–99,75 %) flyttas till andra raden, vänsterställt. */
@media (max-width: 699px) {
  .sidfot__ordmarke {
    --M: calc((100vw - 2 * var(--marginal)) / .6592);
    --rad: calc(var(--M) * 278 / 2400);
    aspect-ratio: auto; height: calc(var(--rad) * 2.06);
  }
  .sidfot__ordmarke .bokstav { inset: auto; left: calc(var(--M) * -.0021); top: 0; width: var(--M); height: var(--rad); }
  .sidfot__ordmarke .ordmarke__del--lab { left: calc(var(--M) * -.6817); top: calc(var(--rad) * 1.06); }
  .sidfot__kontakt { flex-direction: column; align-items: flex-start; }
  .sidfot__kontakt li + li::before { content: none; }
}

/* ---------- 12. Dialoger ---------- */
.upplevelse-dialog {
  width: min(1080px, calc(100vw - 2 * var(--marginal)));
  max-height: calc(100svh - 2 * var(--marginal-bas));
  padding: 0; border: 0; border-radius: 0;
  background: var(--ljus); color: var(--takduk);
  overflow: auto;
}
.upplevelse-dialog::backdrop, .liten-dialog::backdrop { background: rgba(22, 23, 21, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.upplevelse-dialog[open], .liten-dialog[open] { animation: dialog-in .35s var(--ease-ut); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dialog__inre { display: grid; grid-template-columns: 1fr; }
.dialog__bild { background: var(--takduk); }
.dialog__bild img { aspect-ratio: 16 / 9; object-fit: cover; }
.dialog__bildtext { color: rgba(246, 244, 239, .7); padding: 10px 16px 12px; font-size: 11px; }
.dialog__text { display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); align-content: start; }
.dialog__rubrik { font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 600; letter-spacing: -0.035em; line-height: .98; }
.dialog__lista { margin-top: 10px; border-top: 1px solid var(--plat); }
.dialog__lista li { padding: 9px 0 8px 22px; border-bottom: 1px solid var(--plat); position: relative; line-height: 1.4; font-size: 1rem; }
.dialog__lista li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 10px; height: 1px; background: var(--guld-text); }
.dialog__not { margin-top: 14px; color: var(--grafit); font-size: .9688rem; }
.dialog__knappar { margin-top: 6px; }
@media (min-width: 900px) {
  .dialog__inre { grid-template-columns: 1.05fr 1fr; }
  .dialog__bild { display: flex; flex-direction: column; justify-content: flex-end; }
  .dialog__bild picture { flex: 1; position: relative; }
  .dialog__bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
/* Knappraden syns alltid där dialogen själv scrollar (mobil, låga fönster) */
@media (max-width: 899px), (max-height: 500px) {
  .dialog__knappar {
    position: sticky; bottom: 0; z-index: 1; background: var(--ljus);
    margin-inline: calc(-1 * clamp(24px, 4vw, 44px));
    padding: 12px clamp(24px, 4vw, 44px) max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--plat);
  }
}
/* Låg liggande mobil: två spalter, bilden fäst mot dialogens synliga höjd */
@media (orientation: landscape) and (max-height: 500px) {
  .dialog__inre { grid-template-columns: .8fr 1fr; }
  .dialog__bild { position: sticky; top: 0; align-self: start; height: calc(100svh - 2 * var(--marginal-bas)); display: flex; flex-direction: column; justify-content: flex-end; }
  .dialog__bild picture { flex: 1; position: relative; }
  .dialog__bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
/* Liten dialog: Bildkrediter */
.liten-dialog {
  width: min(600px, calc(100vw - 2 * var(--marginal)));
  max-height: calc(100svh - 2 * var(--marginal-bas));
  padding: 0; border: 0; border-radius: 0;
  background: var(--ljus); color: var(--takduk);
  overflow: auto;
}
.liten-dialog__inre { display: grid; gap: 12px; padding: clamp(22px, 3.4vw, 36px); font-size: .9375rem; line-height: 1.55; }
.liten-dialog__rubrik { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; }
.liten-dialog__inre a { text-underline-offset: .2em; }
/* Rubriken får fokus när dialogen öppnas (startpunkt för skärmläsare och tangentbord) – ingen ring på själva rubriken. */
.dialog__rubrik:focus-visible, .liten-dialog__rubrik:focus-visible { outline: none; box-shadow: none; }
.liten-dialog__inre strong { font-weight: 600; }
.liten-dialog--inline { position: static; display: block; margin: 0 auto 48px; }
.liten-dialog--inline .liten-dialog__knappar { display: none; }
.liten-dialog__knappar { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--plat); }
/* Knappraden syns alltid där den lilla dialogen själv scrollar (liggande mobil, små skärmar). scroll-padding:
   tabbfokuserade länkar hamnar aldrig under den fasta raden. */
@media (max-width: 899px), (max-height: 560px) {
  .liten-dialog { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .liten-dialog__knappar {
    position: sticky; bottom: 0; z-index: 1; background: var(--ljus);
    margin-inline: calc(-1 * clamp(22px, 3.4vw, 36px));
    padding: 10px clamp(22px, 3.4vw, 36px) max(10px, env(safe-area-inset-bottom));
  }
}

/* ---------- 13. Arbetsversion ---------- */
.arbetsnotis, .arbetsbricka { display: none !important; }
html[data-arbetsversion="på"] .arbetsnotis {
  display: inline-flex !important; align-items: center; gap: .6em;
  justify-self: start; align-self: start;
  padding: 6px 10px 5px;
  border: 1px dashed currentColor; color: var(--text-2);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4;
  max-width: 100%;
}
html[data-arbetsversion="på"] :is([data-arbetsnotis-plats="hero"], [data-arbetsnotis-plats="sekvens"], [data-arbetsnotis-plats="material"]) .arbetsnotis { background: rgba(30, 31, 29, .72); color: var(--ljus); border-color: rgba(246, 244, 239, .7); }
html[data-arbetsversion="på"] .arbetsbricka:not([hidden]) {
  display: block !important; position: fixed; left: 12px; bottom: 12px; z-index: 90;
  max-width: min(420px, calc(100vw - 24px));
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
}
.arbetsbricka__knapp {
  background: var(--ljus); color: var(--takduk);
  border: 1px dashed var(--takduk); border-radius: 0; padding: 7px 10px 6px;
  font-size: 11px;
}
.arbetsbricka__panel {
  margin-bottom: 6px; background: var(--ljus); color: var(--takduk);
  border: 1px dashed var(--takduk); padding: 12px 14px; max-height: 50vh; overflow: auto;
  text-transform: none; letter-spacing: .02em; line-height: 1.45;
}
.arbetsbricka__panel[hidden] { display: none; }
.arbetsbricka__panel li { padding: 6px 0; border-bottom: 1px solid var(--plat); }
.arbetsbricka__panel li:last-child { border-bottom: 0; }
.arbetsbricka__panel strong { font-weight: 500; }
.arbetsbricka__panel small { display: block; color: var(--grafit); }
.arbetsbricka { display: flex; flex-direction: column-reverse; align-items: flex-start; }
html[data-arbetsversion="på"] .arbetsbricka:not([hidden]) { display: flex !important; flex-direction: column-reverse; align-items: flex-start; }

@media (max-width: 899px) { /* mobil: brickan uppe till höger, under menyn */
  html[data-arbetsversion="på"] .arbetsbricka:not([hidden]) { left: auto; right: 8px; bottom: auto; top: calc(var(--nav-h) + 8px); flex-direction: column; align-items: flex-end; }
  .arbetsbricka__panel { margin: 6px 0 0; }
}

/* Platshållare för saknad bild (skapas av skriptet om en fil saknas) */
.notiser { display: flex; flex-wrap: wrap; gap: 8px; }
.notiser:empty { display: none; }
html.dialog-oppen { overflow: hidden; }
.saknas-bild { opacity: 0; }
.saknas { background: repeating-linear-gradient(135deg, rgba(86, 84, 79, .12) 0 1px, transparent 1px 12px), var(--plat); }

/* ---------- 14. Stilla läge / utan JS ---------- */
/* Reducerad rörelse: inga förflyttningar. Övertoningar (opacitet) i väljarna behålls – de flyttar ingenting. */
@media (prefers-reduced-motion: reduce) {
  *:not(.material__lager):not(.arstid__lager), *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.rorelse-tvingad-av *:not(.material__lager):not(.arstid__lager), .rorelse-tvingad-av *::before, .rorelse-tvingad-av *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

/* ---------- 15. Rörelse och finish (SPEC-v3 §2) ----------
   Allt här kräver .rorelse (sätts i <head> när rörelse är tillåten) eller klasser som skripten sätter – stilla
   läge och utan JS ser ut som förut. */

/* 15a. Sidans grund (grund.js): en fast färgyta bakom innehållet; sektionerna är genomskinliga och grunden glider
   mellan ljust och kolsvart med scrollen. Egna scener (öppningen, Kliv in, Om-scenen) målar sin egen bakgrund. */
.grund { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* A (från) · M (OKLab-mitten, varmgrå) · B (till): bara opaciteten ändras under en övergång – egna kompositlager,
   ingen ommålning medan man scrollar. */
.grund__lager { position: absolute; inset: 0; background: var(--fasad); will-change: opacity; }
.grund__lager + .grund__lager { opacity: 0; }
.grund-styrd body { background: transparent; }
.grund-styrd .om, .grund-styrd .utforska, .grund-styrd [data-grund-anpassa] { background-color: transparent; }
.grund-styrd.grund-mork { background: var(--takduk); } /* "studs" i över-/underkant (mus/styrplatta på Mac) */
/* Texten byter tema mitt i övergången: ärvd textfärg tonas kort (ingen hård blinkning). */
.grund-styrd [data-grund-anpassa] { transition: color var(--dur-ui) linear; }

/* 15b. Ordmärket ur nio bokstäver (öppningen och avslutningen). Varje bokstav är hela ordmärkets ruta med sin
   grupps mask (CASTOR/LAB), klippt till sin bokstav – kolumnerna är uppmätta ur maskerna (mittpunkt mellan två
   bokstäver): C 0–9,585 · A –21,98 · S –32,375 · T –42,935 · O –54,935 · R –67,15 · L –76,73 · A –89,21 · B –100 %. */
.ordmarke .bokstav { clip-path: inset(-4% calc(100% - var(--r)) -4% var(--l)); }
.ordmarke .bokstav:nth-child(1) { --l: 0%;      --r: 9.585%;  --b: 0; }
.ordmarke .bokstav:nth-child(2) { --l: 9.585%;  --r: 21.98%;  --b: 1; }
.ordmarke .bokstav:nth-child(3) { --l: 21.98%;  --r: 32.375%; --b: 2; }
.ordmarke .bokstav:nth-child(4) { --l: 32.375%; --r: 42.935%; --b: 3; }
.ordmarke .bokstav:nth-child(5) { --l: 42.935%; --r: 54.935%; --b: 4; }
.ordmarke .bokstav:nth-child(6) { --l: 54.935%; --r: 67.15%;  --b: 5; }
.ordmarke .bokstav:nth-child(7) { --l: 67.15%;  --r: 76.73%;  --b: 6; }
.ordmarke .bokstav:nth-child(8) { --l: 76.73%;  --r: 89.21%;  --b: 7; }
.ordmarke .bokstav:nth-child(9) { --l: 89.21%;  --r: 100.5%;  --b: 8; }
/* Avslutningen: bokstäverna reser sig en gång när ordmärket syns (rubriker.js). */
.bokstaver--vantar .bokstav { transform: translateY(104%); }
.bokstaver--uppe .bokstav { transform: none; transition: transform var(--dur-in) var(--ease-kvart); transition-delay: calc(var(--b) * 50ms); }

/* 15c. Öppningens intro (≤ 900 ms, blockerar varken LCP eller inmatning): bilden öppnas från ett något tätare
   utsnitt när den har laddat (onload i index.html → .hero--bild-klar; ramen växer, bilden står still), etiketten
   tonas in, sedan reser sig rubrikens två rader, och sist undertexten och knapparna. Bara transform/opacitet.
   Rubriken har alltid exakt två rader (varje rad ett eget block; blir skärmen för smal radbryts raden inuti). */
.hero__rubrik .rad { display: block; }
.hero__rubrik .rad__inre { display: inline-block; vertical-align: top; }
.rorelse .hero__etikett { animation: tona-upp .5s var(--ease-kvart) .1s backwards; }
.rorelse .hero__rubrik .rad { animation: rad-klipp .62s linear backwards; animation-delay: 180ms; }
.rorelse .hero__rubrik .rad + .rad { animation-duration: .56s; animation-delay: 260ms; }
.rorelse .hero__rubrik .rad__inre { animation: rad-upp .62s var(--ease-kvart) backwards; animation-delay: 180ms; }
.rorelse .hero__rubrik .rad + .rad .rad__inre { animation-duration: .56s; animation-delay: 260ms; }
@keyframes rad-klipp { from { clip-path: inset(-.4em -100vw -.4em -100vw); } to { clip-path: inset(-.4em -100vw -.4em -100vw); } }
@keyframes rad-upp { from { transform: translateY(calc(100% + .5em)); } }
.rorelse .hero__ingress { animation: tona-upp .45s var(--ease-kvart) .38s backwards; }
.rorelse .hero .knapprad { animation: tona-upp .4s var(--ease-kvart) .46s backwards; }
@keyframes tona-upp { from { opacity: 0; transform: translateY(12px); } }
.rorelse .hero__bild { overflow: hidden; animation: bild-ram .9s var(--ease-kvart) backwards paused; }
.rorelse .hero__bild > picture { transform-origin: 50% 100%; animation: bild-mot .9s var(--ease-kvart) backwards paused; }
.rorelse .hero--bild-klar .hero__bild, .rorelse .hero--bild-klar .hero__bild > picture { animation-play-state: running; }
.hero--bild-klar .hero__ram { background: var(--fasad); } /* ringen runt bilden under introt = sidans grund */
/* Ingen blixt av en oladdad bild (motion M2): tills bilden är avkodad (castorlabHeroIntro i index.html →
   .hero--bild-klar) täcker ett lager i renderingens egna färger (--hero-for) ramen och skuggan bakom texten är dold;
   sedan tonas lagret bort och skuggan in, samtidigt (--dur-ui). Bilden själv tonas inte (den målas direkt under
   lagret – webbläsarens LCP räknar den då som vanligt). Bara med JS – utan JS syns bilden och skuggan direkt.
   visibility (inte opacitet) för skuggan: hero.js styr dess opacitet med scrollen (--skugga); intoningen är en egen
   kort animation. Lagret ligger över bilden och skuggan men under kanterna (z-index 3) och texten. */
.js .hero__ram::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hero-for);
  transition: opacity var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui);
}
.js .hero--bild-klar .hero__ram::before { opacity: 0; visibility: hidden; }
.js .hero:not(.hero--bild-klar) .hero__ram::after { visibility: hidden; }
.js .hero--bild-klar .hero__ram::after { animation: hero-in var(--dur-ui) var(--ease) backwards; }
@keyframes hero-in { from { opacity: 0; } }
@keyframes bild-ram { from { scale: .94; } }
@keyframes bild-mot { from { scale: 1.0638; } } /* = 1 / 0,94: bilden står still medan ramen öppnas */

/* 15d. Rubriker som reser sig rad för rad (rubriker.js, data-rader). Raden maskas; innehållet stiger 100 % → 0 på
   0,9 s (ease-out-quart), 0,08 s mellan raderna (fördröjningen sätts per rad). Masken räcker en bit över och under
   raden (accenter och nedstaplar) men aldrig i sidled – inget kapas. */
.rader--delad .rad { display: block; clip-path: inset(-.34em -100vw -.36em -100vw); }
.rader--delad .rad__inre { display: inline-block; vertical-align: top; white-space: nowrap;
  transform: translateY(calc(100% + .5em)); transition: transform var(--dur-in) var(--ease-kvart); }
.rader--uppe .rad__inre { transform: none; }

/* 15e. Pekarens följeslagare (pekare.js): 8 px prick efter systemmarkören, piller med ord över vissa ytor. */
.foljare { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; opacity: 0; transition: opacity var(--dur-snabb) var(--ease); will-change: transform; }
.foljare.is-synlig { opacity: 1; }
.foljare.is-dialog { opacity: 0; }
.foljare__prick {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--takduk); box-shadow: 0 0 0 1.5px rgba(246, 244, 239, .85);
  transition: transform var(--dur-ui) var(--ease-ut);
}
.foljare--undan .foljare__prick { transform: scale(0); }
.foljare--piller .foljare__prick { transform: scale(.5); }
.foljare.is-tryck .foljare__prick { transform: scale(.65); }
.foljare__piller {
  position: absolute; left: 14px; top: -16px; height: 32px; padding: 0 14px;
  display: flex; align-items: center; border-radius: 999px;
  background: var(--takduk); color: var(--ljus); box-shadow: 0 0 0 1px rgba(246, 244, 239, .24);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transform-origin: 0 50%; transform: scale(.25); opacity: 0;
  transition: transform var(--dur-lang) var(--ease-ut), opacity var(--dur-snabb) var(--ease);
}
.foljare--piller .foljare__piller { transform: none; opacity: 1; }
.foljare--piller.is-tryck .foljare__piller { transform: scale(.94); }
@media not all and (pointer: fine) { .foljare { display: none; } }
/* Materialbilden: ytor som går att byta med ett klick (material.js) */
.material__bilder--valbar { cursor: pointer; }
.spelare:not(.har-startat) .spelare__ram { cursor: pointer; }


/* ---------- 16. Kakor (kakor.js) ----------
   Liten kolsvart ruta under menyn, till höger: täcker varken rubriken, knapparna eller dörrarna i öppningen.
   "Godkänn" och "Nej tack" är exakt lika tydliga. Mobil: hela bredden inom marginalerna. */
.kakor {
  position: fixed; z-index: 120; top: calc(var(--nav-h) + 12px); right: var(--marginal);
  width: min(400px, calc(100% - 2 * var(--marginal)));
  display: grid; gap: 10px; padding: 18px 20px 16px;
  background: var(--takduk); color: var(--text); border: 1px solid rgb(246 244 239 / .14); border-radius: 14px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .28);
  font-size: .9375rem; line-height: 1.5;
  opacity: 0; translate: 0 -8px; transition: opacity var(--dur-ui) var(--ease-ut), translate var(--dur-ui) var(--ease-ut);
}
.kakor[hidden] { display: none; }
.kakor--synlig { opacity: 1; translate: 0 0; }
.kakor__rubrik { margin: 0; }
.kakor__rubrik:focus { outline: none; }
.kakor__text { margin: 0; }
.kakor__mer summary { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; cursor: pointer; list-style: none; color: var(--text-2); }
.kakor__mer summary::-webkit-details-marker { display: none; }
.kakor__mer p { margin: 8px 0 0; color: var(--text-2); font-size: .875rem; }
.kakor__knappar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.kakor__knappar .knapp { justify-content: center; }
/* Mobil: rubriken står överst i öppningen – rutan ligger därför nederst tills besökaren har valt */
@media (max-width: 599px) {
  .kakor { top: auto; bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); padding: 16px 16px 14px; translate: 0 8px; }
  .kakor--synlig { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .kakor { transition: none; translate: 0 0; } }
html:not(.js) .sidfot__kakor { display: none; } /* utan JS finns inget att ställa in */