/* input(1102,1): run-time error CSS1019: Unexpected token, found '}' */
/* Self-hostade typsnitt (woff2). Endast de vikter/stilar som faktiskt används.
 * Designsystem "modern": Instrument Serif (display), Hanken Grotesk (text/UI), Space Mono (etikett).
 * Latin-subset räcker för svenska (å/ä/ö ligger i U+0000–00FF). */

/* ---- Instrument Serif (display / ordmärke) — finns bara i vikt 400 ---- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-400-normal.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-400-italic.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}

/* ---- Hanken Grotesk (text / UI / nav) — variabel vikt 400–700 ---- */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-400-italic.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}

/* ---- Space Mono (etiketter / datum / katalognummer) ---- */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-latin-400-normal.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-latin-700-normal.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-latin-400-italic.woff2?v=SfidoBrpQQmHacqB0-IG5xkcJAw") format("woff2");
}

/*
 * Tema (skin) — luffarmuseum · designsystem "modern"
 * Allt som skiljer ett tema från ett annat bor här: färg, storlek, marginal, typsnitt.
 * Base/layout/components (site.css) refererar ENBART var(--*) — ingen hårdkodad hex.
 * Byt tema = ny theme.<namn>.css + appsetting Site:Theme.
 *
 * Tes: nästan monokromt, luftigt och redaktionellt (à la Vandalorum), med EN varm
 * glödaccent (eld/rost/tenn) som nick till luffararvet. Mörka sektioner via .inverse.
 */

:root {
  /* ---- Neutraler (bas) ---- */
  --paper:        #F5F3EC;  /* gallerivägg, varm benvit — sidbakgrund */
  --paper-2:      #ECE9DF;  /* alternerande/indragen sektion */
  --paper-3:      #E1DDCF;  /* bildplatshållare, djupare panel */
  --surface:      #FBFAF5;  /* upphöjd yta (kort, fält) */
  --ink:          #191714;  /* varmt nästan-svart — text & mörk yta */
  --ink-2:        #423E37;  /* sekundär text */
  --ink-soft:     #625D53;  /* dämpad text, etiketter — 4.81:1 mot djupaste pappret (WCAG 1.4.3) */
  --line:         #D8D3C6;  /* hårlinje */
  --line-strong:  #B8B1A0;  /* tydligare linje/ram — dekorativ, inget kontrastkrav */
  --line-control: #847F72;  /* ram runt formulärkontroller — 3.29:1 mot fält och sektion (WCAG 1.4.11) */

  /* ---- Varm accent: glöd (luffare: eld, rost, tenn) ---- */
  --ember:        #B4512B;  /* accentfyllning, markörer */
  --ember-deep:   #8E3C1E;  /* text/länk på ljust — AA */
  --ember-bright: #D9743F;  /* accent på mörk botten */
  --ember-wash:   #EFE1D4;  /* svag ton, hover-fyllning */

  /* ---- Ytor som alltid ligger mörkt, oberoende av tema (bild-scrim, lightbox, mörk panel) ---- */
  --on-scrim:        #F5F3EC;                    /* ljus text på scrim/bild */
  --on-scrim-2:      rgba(245, 243, 236, 0.92);  /* något dämpad ljus text */
  --on-scrim-muted:  rgba(245, 243, 236, 0.82);  /* etikett/eyebrow på scrim */
  --on-scrim-faint:  rgba(245, 243, 236, 0.5);   /* platshållartext på mörk yta */
  --media-shade:     #2B2620;                    /* mörk platshållare bakom hero */
  --ink-text-2:      #C9C3B5;                    /* sekundär text på mörk yta */
  --ink-text-muted:  #9C9587;                    /* dämpad text på mörk yta */

  /* Hero i två lager — rattarna för hur mörk toppbilden blir.
     --hero-scrim är en vinjett över hela bilden och finns bara för stämning.
     --hero-band är det som bär läsbarheten och täcker bara textspalten.
     0.62 ger 4.9:1 för --on-scrim mot ett helvitt foto; under 0.60 faller det ur AA
     och hjältens text måste då byta ton. Uträkningen står vid .hero__text i site.css. */
  --hero-scrim: linear-gradient(to top,
                  rgba(15, 13, 10, 0.16) 0%,
                  rgba(15, 13, 10, 0.04) 55%,
                  rgba(15, 13, 10, 0.00) 100%);
  --hero-band:       rgba(15, 13, 10, 0.62);
  --hero-band-fade:  9rem;    /* hur mjukt bandet tonar ut ovanför texten */
  --hero-band-bleed: 16rem;   /* hur långt bandet når förbi textspalten innan det tonar ut */
  --hero-band-mask:  linear-gradient(to right, #000 0 calc(100% - var(--hero-band-bleed)), transparent 100%);
  --hero-text-width: 58rem;   /* textspaltens bredd = bandets bredd */
  --hero-pad:        var(--space-xl);  /* luft över och under hjältetexten; bandet täcker den med */

  /* Datumflagga i ett kortmotivs hörn. 0.66 ger 5.7:1 för flaggans text mot ett helvitt
     foto — oskärpan bakom är stämning, inte kontrast, så nivån får bära ensam. */
  --media-flag:      rgba(15, 13, 10, 0.66);
  --media-flag-ink:  var(--on-scrim);
  --media-flag-blur: 8px;

  /* ---- Semantiska roller (ljust tema, standard) ---- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --bg-media:      var(--paper-3);
  --text:          var(--ink);
  --text-2:        var(--ink-2);
  --text-muted:    var(--ink-soft);
  --text-accent:   var(--ember-deep);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --border-control:var(--line-control);
  --accent:        var(--ember);
  --accent-deep:   var(--ember-deep);
  --accent-ink:    #FFFFFF;   /* text ovanpå accentfyllning */
  --focus:         var(--ember);
  --ok:            #3F6B3A;   /* bekräftelse (grön) */
  --warn:          var(--ember-deep);

  /* Länkfärger */
  --link:       var(--ember-deep);
  --link-hover: var(--ink);

  /* Sidfotens ordbild. I den graden blev glödaccenten för skrikig — ordbilden ligger därför
     i textens egen ton. Byt här (t.ex. var(--ember-bright)) utan att röra site.css. */
  --footer-mark: var(--text);

  /* ---- Typografi: familjer ---- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ---- Typografi: flytande skala (min → max) ---- */
  --text-2xs:     clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --text-xs:      clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --text-sm:      clamp(0.92rem, 0.88rem + 0.20vw, 1.02rem);
  --text-base:    clamp(1.02rem, 0.97rem + 0.30vw, 1.18rem);
  --text-md:      clamp(1.20rem, 1.08rem + 0.55vw, 1.55rem);
  --text-lg:      clamp(1.55rem, 1.28rem + 1.20vw, 2.35rem);
  --text-xl:      clamp(2.00rem, 1.55rem + 2.10vw, 3.40rem);
  --text-2xl:     clamp(2.60rem, 1.80rem + 3.70vw, 5.20rem);
  --text-3xl:     clamp(3.20rem, 1.90rem + 6.00vw, 7.20rem);
  --text-display: clamp(3.60rem, 1.60rem + 8.50vw, 9.50rem);

  /* ---- Rollbaserade grader: justeras här utan att röra skalan ovan ---- */
  --text-page-title: var(--text-xl);   /* h1 på inre sidor (masthead) */

  /* ---- Radhöjd ---- */
  --leading-solid:   0.95;
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.45;
  --leading-relaxed: 1.62;

  /* ---- Spårning ---- */
  --tracking-label:  0.16em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;

  /* ---- Vikter (Instrument Serif finns bara i 400) ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Rum & rytm (4px-bas, generös luft) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9.5rem;
  --space-4xl: 13rem;

  --gutter:          clamp(1.25rem, 5vw, 4.5rem);
  --maxwidth:        96rem;   /* brett redaktionellt raster */
  --maxwidth-wide:   108rem;  /* bildrutnät som får andas bredare än textspalten */
  --maxwidth-narrow: 52rem;   /* löptext */
  --maxwidth-figure: 48rem;   /* bild i brödflödet — får inte svälla ut till hela rastret */
  --maxwidth-figure-narrow: 32rem; /* smalt bildläge: detaljer, porträtt, stående motiv */
  --maxheight-figure: 80svh;  /* stående bilder ska inte äta hela skärmhöjden */
  --measure:         72ch;    /* läsbar radlängd */
  --header-h:        4.75rem;
  --hero-minheight:    min(88vh, 880px);  /* hjältebandet på desktop */
  --hero-minheight-sm: min(66svh, 520px); /* telefon: svh, inte vh — se .hero i site.css */

  /* ---- Effekter: hörn, linjer, skugga, rörelse ---- */
  --radius:       0px;    /* raka hörn = det moderna avtrycket */
  --radius-sm:    2px;    /* fält, taggar */
  --hair:         1px;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --dur:       0.25s;
  --dur-slow:  0.5s;

  /* Skuggor används sparsamt — mest hårlinjer. */
  --shadow-card: 0 1px 2px rgba(25, 23, 20, 0.04), 0 14px 34px rgba(25, 23, 20, 0.07);
  --shadow-lift: 0 22px 50px rgba(25, 23, 20, 0.14);
}

/* ---- CTA-bandet: sand som standard ----
   Bandet får inte dela ton med sektionerna runtomkring, och --paper-3 är den enda neutralen som
   är mörkare än både --paper och --paper-2. Blocket ligger före .inverse med flit: samma
   specificitet (0,1,0) på samma element, så ett band satt till "Mörk" vinner på källordning.
   Varianterna ligger efter grundregeln av samma skäl. Fler tokens behövs inte — utan .inverse
   ärver bandet --text, --text-muted, --accent, --text-accent och --accent-ink från :root, och
   de är redan rätt för ljus botten. */
.section--cta        { --bg: var(--paper-3); }
.section--cta--light { --bg: var(--paper); }
.section--cta--alt   { --bg: var(--paper-2); }

/* ---- Inverterat (mörkt) — sidfot, feature-sektioner, "montrar", felsidor ---- */
.inverse {
  --bg:            #17140F;
  --bg-alt:        #201C15;
  --bg-media:      #262119;
  --surface:       #211D16;
  --text:          var(--paper);
  --text-2:        var(--ink-text-2);
  --text-muted:    var(--ink-text-muted);
  --text-accent:   var(--ember-bright);
  --border:        #34302A;
  --border-strong: #4B463C;
  --border-control:#736C5D;  /* ≥3:1 mot mörka ytor (WCAG 1.4.11) */
  --accent:        var(--ember-bright);
  --accent-deep:   var(--ember-bright);
  --accent-ink:    #17140F;
  --focus:         var(--ember-bright);
  --ok:            #6FA863;
  --link:          var(--ember-bright);
  --link-hover:    var(--paper);
  --footer-mark:   var(--text);  /* ordbilden följer textfärgen även på mörk botten */
  background: var(--bg);
  color: var(--text);
}

/*
 * site.css — base + layout + komponenter för luffarmuseum.se · designsystem "modern".
 * Refererar ENBART var(--*) från theme/theme.<namn>.css. Ingen hårdkodad hex
 * (undantag: halvtransparenta overlays/scrim där en ren rgba behövs).
 */

/* ============================== Reset ============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* ============================== Bas ============================== */
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}
/* Sidrubrikens grad bor i temat (--text-page-title) så den är densamma över alla sidtyper.
   Hero-rubriken är medvetet större och sätter sin egen grad via .hero__title. */
h1 { font-size: var(--text-page-title); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: var(--hair); transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }

strong, b { font-weight: var(--weight-semibold); }
em, i { font-style: italic; }
hr { border: 0; border-top: var(--hair) solid var(--border); margin: var(--space-lg) 0; }
small { font-size: var(--text-xs); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--ember); color: var(--accent-ink); }

/* ============================== Layout ============================== */
.wrap {
  width: 100%;
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxwidth-narrow); }
.wrap--wide { max-width: var(--maxwidth-wide); }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--bg-alt); }
/* CTA-bandet målar alltid sin egen bakgrund, oavsett vilken variant redaktören valt. Klassen
   finns för att bandet ska gå att färgsätta separat i temat — utan den delar det .inverse med
   sidfoten och felsidan och kan aldrig skilja sig från dem. Tonen sätts i skinfilen; här bara
   målningen. Hårlinjerna använder rollen --border-strong och inte primitiven --line-strong, så
   att ett band satt till "Mörk" får en diskret mörk linje i stället för en ljusbeige mot svart. */
.section--cta { background: var(--bg); color: var(--text); border-block: var(--hair) solid var(--border-strong); }

/* Blockflödet bygger en section per segment (_BodyBlocks). Utan detta möts två hela
   paddingar mellan två segment och ger dubbla mellanrummet. */
.section + .section { padding-block-start: 0; }
/* …utom när någondera bär en egen bakgrund (ljust band .section--alt eller mörkt .inverse)
   — ett band behöver luft innanför sin egen kant. */
.section + :is(.section--alt, .inverse, .section--cta),
:is(.section--alt, .inverse, .section--cta) + .section { padding-block-start: var(--space-2xl); }
/* Sidhuvudet har redan bottenpadding och en hårlinje; full sektionspadding ovanpå gapar. */
.page-head + .section { padding-block-start: var(--space-xl); }

/* Mellanrummet mellan block i ett segment ägs av flödet, inte av blocken själva — samma
   mönster som .article__main > * + * i tvåspaltsgrenen. */
.flow > * + * { margin-top: var(--space-lg); }

/* Den generösa vertikala rytmen är fasta rem (skalar inte som typskalan). På telefon
   blir 6,5rem topp+botten mest död yta — dra ner till fortsatt luftiga men rimliga mått. */
@media (max-width: 40rem) {
  .section { padding-block: var(--space-xl); }
  .section--tight { padding-block: var(--space-lg); }
  .section + :is(.section--alt, .inverse, .section--cta),
  :is(.section--alt, .inverse, .section--cta) + .section { padding-block-start: var(--space-xl); }
  .page-head + .section { padding-block-start: var(--space-lg); }
}

/* ============================== Verktyg ============================== */
.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
}
.u-mono { font-family: var(--font-mono); }
.u-serif { font-family: var(--font-display); }
.u-muted { color: var(--text-muted); }
.u-accent { color: var(--text-accent); }
.u-measure { max-width: var(--measure); }
.pre-line { white-space: pre-line; }

.lead {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-2);
  max-width: 34ch;
}

.stack > * + * { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--space-2xs) var(--space-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

/* ============================== Prose (löptext) ============================== */
.prose { max-width: var(--measure); }
/* Full bredd: används när sidan saknar sidopanel så texten fyller spalten i stället
   för att lämna en tom högeryta. Läsbar radlängd offras medvetet för att fylla ut. */
.prose--full { max-width: none; }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-md); margin-top: var(--space-lg); }
.prose a { color: var(--text-accent); }
.prose img { margin-block: var(--space-lg); }
.prose figure { margin-block: var(--space-lg); max-width: none; }
.prose figcaption {
  margin-top: var(--space-2xs); font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--text-muted);
}
/* Inbäddade kartor/videor från WordPress-editorn: fyll spalten i stället för fasta pixelmått. */
.prose iframe {
  display: block; width: 100%; max-width: none; height: auto;
  aspect-ratio: 16 / 9; border: 0; margin-block: var(--space-lg); background: var(--bg-media);
}
.prose iframe[src*="/maps/"] { aspect-ratio: 4 / 3; }
@media (min-width: 40rem) { .prose iframe[src*="/maps/"] { aspect-ratio: 21 / 9; } }

/* ============================== Bild i brödflödet ============================== */
/* Bildblocket ligger som syskon till .prose och ärver därför inget av dess figurstil.
   Utan egen bredd fyller bilden hela --maxwidth (96rem), vilket blir orimligt stort —
   särskilt för stående motiv. Bredden kapas till bildspalten, höjden till skärmhöjden.
   OBS: håll sizes-attributet i imageBlock.cshtml i synk med --maxwidth-figure. */
.figure-block { max-width: var(--maxwidth-figure); }
/* Höjdtaket uttrycks som en BREDDgräns via bildens egna proportioner (--figure-ratio sätts
   av imageBlock.cshtml). Ett max-height på <img> hade krävt width:auto, vilket slår ut
   width/height-attributen — då reserveras ingen yta, bilden hamnar aldrig i vyporten och
   lat laddning låser sig. Saknas proportionerna faller den tillbaka på full spaltbredd. */
.figure-block figure {
  max-width: min(100%, calc(var(--maxheight-figure) * var(--figure-ratio, 100)));
}
.figure-block figcaption { margin-top: var(--space-2xs); }

/* Redaktörens breddval (ImageDisplay.cs). Bredvid en sidopanel degraderas wide/bleed redan
   i C#, så de här klasserna kan aldrig hamna inne i .article__main. */
.figure-block--narrow { max-width: var(--maxwidth-figure-narrow); }
.figure-block--wide { max-width: none; }
.figure-block--bleed { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }
/* Höjdtaket gäller bara de smala lägena — i wide/bleed har redaktören bett om stort. */
.figure-block--wide figure,
.figure-block--bleed figure { max-width: none; }
/* width-attributet på <img> är en presentationshint och håller kvar bilden på sin egen bredd,
   så utan detta ligger den kvar vänsterställd i en bredare figure. width: 100% (till skillnad
   från width: auto) behåller den reserverade ytan, eftersom höjden räknas ur width/height. */
.figure-block--wide img,
.figure-block--bleed img { width: 100%; }

/* ============================== Knappar ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  padding: 0.8rem 1.5rem;
  border: var(--hair) solid var(--text);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn--primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { filter: brightness(1.06); }
.btn--ghost { border-color: var(--border-control); color: var(--text); }
.btn--ghost:hover { background: transparent; border-color: var(--text); color: var(--text-accent); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Pil-länk (den vanligaste affordansen — "se alla →", "läs mer →") */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text); text-decoration: none;
}
/* Pilen skrivs som CSS-escape (U+2192), inte som literal tecken: en stilmall utan
   charset i svarshuvudet avkodas annars som Windows-1252 och pilen blir "â†'". */
.link-arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--text-accent); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================== Taggar ============================== */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border: var(--hair) solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-muted); background: transparent;
  text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.tag:hover { color: var(--text); border-color: var(--text); }
.tag--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag--accent { background: var(--ember-wash); color: var(--ember-deep); border-color: transparent; }

/* ============================== Sidhuvud ============================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hair) solid var(--border);
}
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-md); min-height: var(--header-h);
}
.wordmark {
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 0.9;
  letter-spacing: var(--tracking-tight); color: var(--text); text-decoration: none;
  text-align: center; white-space: nowrap;
}
.wordmark:hover { color: var(--text); opacity: 0.7; }
.site-nav { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.75rem); }
.site-nav--right { justify-content: flex-end; }
.nav-link {
  font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--text); text-decoration: none; padding: 0.35rem 0; position: relative; white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right var(--dur) var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }
.nav-link[aria-current="page"] { color: var(--text-accent); }

.nav-toggle {
  display: none; grid-column: 3; justify-self: end; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text);
}
.nav-panel, .nav-backdrop { display: none; }

@media (max-width: 60rem) {
  .site-header__inner { grid-template-columns: auto 1fr; }
  .wordmark { grid-column: 1; text-align: left; font-size: var(--text-md); }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Med JS: offcanvas-panel som glider in från höger. */
  html.js .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 13, 10, 0.55);
    opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  }
  html.js .nav-panel {
    display: flex; flex-direction: column; gap: var(--space-xs);
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: min(92vw, 22rem);
    background: var(--bg); border-left: var(--hair) solid var(--border);
    box-shadow: var(--shadow-lift);
    padding: var(--space-md) var(--gutter) var(--space-xl);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    /* visibility fördröjs tills panelen glidit ut — annars försvinner den tvärt vid stängning.
       Vid öppning slår den om direkt (se .is-nav-open nedan), så att fokus kan flyttas in
       samma ögonblick: ett element med visibility: hidden går inte att fokusera. */
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  html.js .nav-panel__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-sm); margin-bottom: var(--space-2xs); border-bottom: var(--hair) solid var(--border); }
  html.js .nav-panel__title { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: var(--tracking-tight); }
  html.js .nav-panel__close { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text); }
  html.js .nav-panel .nav-link { display: block; width: 100%; padding: var(--space-sm) 0; border-bottom: var(--hair) solid var(--border); font-size: var(--text-md); }
  html.js .nav-panel .nav-link::after { display: none; }
  /* Öppet-tillståndet ligger på <body> eftersom panel/backdrop nu är syskon till headern. */
  html.js body.is-nav-open .nav-panel {
    transform: none; visibility: visible;
    transition: transform 0.3s var(--ease), visibility 0s linear 0s;
  }
  html.js body.is-nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}

/* ============================== Hero (full-bleed bild) ============================== */
.hero {
  position: relative; min-height: var(--hero-minheight);
  display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-media);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrimen måste hålla texten läsbar över vilket foto redaktören än laddar upp — även ett
   nästan vitt — utan att svärta motivet. Den låg förr som en enda gradient över hela
   hjälten med ett procentstopp, och det kan inte fungera: textblocket fyller allt från
   57 % av hjälten (bred skärm) till hela den (telefon), så stoppet hamnade antingen mitt
   i texten eller mörkade ner allt. Nu bär .hero__text scrimen och .hero__scrim är bara en
   svag vinjett.

   Scrimen täcker därmed bara textspalten: i höjdled följer den textblockets egen höjd, och
   i sidled blöder den ut åt vänster men slutar strax efter spalten, så motivets högra del
   lämnas orörd. Höger kant tonas av --hero-band-mask; utan mask-stöd blir bandet full
   bredd igen, vilket bara är mörkare, aldrig trasigt.

   Nivån: mot vit botten ger 0.62 opacitet 4.9:1 för --on-scrim, mätt utan vinjetten
   eftersom den är noll där bandet slutar. Hjältens text går därför i full --on-scrim i
   stället för de dämpade tonerna; se .hero__eyebrow. */
.hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); }
.hero .ph { background: var(--media-shade); color: var(--on-scrim-faint); }
.hero .ph::before { opacity: 0.14; }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--hero-pad); color: var(--on-scrim); }
.hero__text { position: relative; max-width: var(--hero-text-width); }
/* ::before är bandet bakom texten, ::after tonar ut det ovanför texten — aldrig inuti, så
   hela textblocket ligger på full nivå. Båda sträcker sig ut genom .hero__inner-luften
   (--hero-pad) och ut ur bild åt vänster; .hero klipper. */
.hero__text::before,
.hero__text::after {
  content: ""; position: absolute; z-index: -1;
  left: -100vw; right: calc(var(--hero-band-bleed) * -1);
  -webkit-mask-image: var(--hero-band-mask);
          mask-image: var(--hero-band-mask);
}
.hero__text::before {
  top: calc(var(--hero-pad) * -1); bottom: calc(var(--hero-pad) * -1);
  background: var(--hero-band);
}
.hero__text::after {
  bottom: calc(100% + var(--hero-pad)); height: var(--hero-band-fade);
  background: linear-gradient(to top, var(--hero-band), transparent);
}
/* Hjältens text går i full --on-scrim, inte i de dämpade tonerna: ovanpå ett foto finns
   ingen kontrastmarginal att ge bort, och hierarkin bärs redan av grad, familj och spärrning. */
.hero__eyebrow { color: var(--on-scrim); margin-bottom: var(--space-sm); }
.hero__title { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-solid); letter-spacing: var(--tracking-tight); color: var(--on-scrim); max-width: 16ch; }
.hero__lead { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); margin-top: var(--space-md); color: var(--on-scrim); }
.hero__meta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; }
.hero__hours { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-scrim); }
.hero__meta .link-arrow { color: var(--on-scrim); }
/* På telefon staplas hjälten i stället för att lägga text ovanpå bild. Textblocket fyller
   där hela hjälten — eyebrow, rubrik, ingress, knapp och länkar — så vilken scrim som helst
   svärtar hela fotot. Bilden får i stället egen höjd och texten ligger under på papper:
   motivet syns orört och kontrasten blir sidans vanliga. Felsidans .hero--text har varken
   bild eller scrim och ska behålla sitt centrerade rutnät, därav :not(). */
@media (max-width: 40rem) {
  .hero:not(.hero--text) { display: block; min-height: 0; background: var(--bg); }
  .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .hero__scrim { display: none; }
  .hero__text::before, .hero__text::after { content: none; }
  .hero__inner { padding-block: var(--space-lg); color: var(--text); }
  .hero__text { max-width: none; }
  .hero__eyebrow, .hero__title { color: var(--text); }
  .hero__lead { color: var(--text-2); }
  .hero__hours { color: var(--text-muted); }
  .hero__meta .link-arrow { color: var(--text); }
  .hero__meta { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .hero__meta .btn { width: 100%; }
  .hero__meta .link-arrow { justify-content: flex-start; }
}

/* Textbaserad hero (felsidor) — ingen bild, fyller merparten av skärmen. */
.hero--text { min-height: 66vh; display: grid; align-items: center; background: var(--bg); }
.hero--text .hero__inner { color: var(--text); }
.hero--text .hero__title { color: var(--text); max-width: 20ch; }

/* ============================== Sektionshuvud ============================== */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-lg);
  border-bottom: var(--hair) solid var(--border);
}
.section-head__title { font-family: var(--font-display); font-size: var(--text-lg); }
.section-head__lead { color: var(--text-muted); margin-top: var(--space-2xs); }

/* ============================== Rader: utställningar (signatur) ============================== */
.exlist { display: flex; flex-direction: column; }
.exrow {
  display: grid; grid-template-columns: 13rem 1fr auto; gap: var(--space-lg);
  align-items: baseline; padding-block: var(--space-lg);
  border-top: var(--hair) solid var(--border); text-decoration: none; color: var(--text);
}
.exlist .exrow:last-child { border-bottom: var(--hair) solid var(--border); }
/* Hover markeras med färg (inte padding-förskjutning som knuffade hela raden = reflow). */
.exrow__dates { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.exrow__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); transition: color var(--dur) var(--ease); }
.exrow:hover .exrow__title { color: var(--text-accent); }
.exrow__sub { display: block; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-muted); margin-top: var(--space-2xs); }
.exrow__loc { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 52rem) {
  .exrow { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .exrow__loc { justify-self: start; }
}

/* ============================== Utställningskort (stora, vandalorum-stil) ============================== */
.excards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); }
.excards > li { display: flex; }
.excards > li > .excard { flex: 1; }
@media (max-width: 62rem) { .excards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .excards { grid-template-columns: 1fr; gap: var(--space-lg); } }

.excard { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.excard__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-media); overflow: hidden; margin-bottom: var(--space-md); }
.excard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
a.excard:hover .excard__media img, a.excard:focus-visible .excard__media img { transform: scale(1.03); }
/* Datumet ligger som flagga i motivets hörn, inte som en rad under det. Annars kryper
   titeln upp en rad på just de kort som saknar datum och raden tappar sin linje. Flaggan
   sitter utanför bildens transform, så den står still när motivet zoomar vid hover. */
.excard__flag {
  position: absolute; top: var(--space-2xs); right: var(--space-2xs); z-index: 1;
  padding: 0.26rem 0.5rem;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em;
  line-height: 1; text-transform: uppercase; white-space: nowrap;
  color: var(--media-flag-ink); background: var(--media-flag);
  /* Oskärpan är det som gör att flaggan vilar på motivet i stället för att ligga klistrad
     på det. Faller den bort syns ingen skillnad i läsbarhet — bottnen bär kontrasten. */
  -webkit-backdrop-filter: blur(var(--media-flag-blur));
          backdrop-filter: blur(var(--media-flag-blur));
}
.excard__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); transition: color var(--dur) var(--ease); }
a.excard:hover .excard__title { color: var(--text-accent); }
.excard__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }

/* ============================== Kort (puff) ============================== */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg) var(--space-md); }
.grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 62rem) { .grid-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .grid-cards--3 { grid-template-columns: 1fr; } }
.grid-cards > li { display: flex; }
.grid-cards > li > .card { flex: 1; }

.card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.card__media { aspect-ratio: 4 / 3; background: var(--bg-media); overflow: hidden; margin-bottom: var(--space-sm); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__label { color: var(--text-muted); margin-bottom: var(--space-3xs); }
.card__title { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-tight); transition: color var(--dur) var(--ease); }
.card:hover .card__title { color: var(--text-accent); }
.card__text { font-size: var(--text-sm); color: var(--text-2); margin-top: var(--space-2xs); }
.card__more { margin-top: var(--space-2xs); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-accent); }

/* ============================== Kalenderrader ============================== */
.callist { display: flex; flex-direction: column; }
.calrow {
  display: grid; grid-template-columns: 7rem 9rem 1fr auto; gap: var(--space-md) var(--space-lg);
  align-items: baseline; padding-block: var(--space-md);
  border-top: var(--hair) solid var(--border); text-decoration: none; color: var(--text);
}
.callist .calrow:last-child { border-bottom: var(--hair) solid var(--border); }
.calrow__date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
.calrow__date b { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1; letter-spacing: var(--tracking-tight); }
.calrow__type { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.calrow__title { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-tight); }
.calrow__title span { display: block; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3xs); }
.calrow__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.calrow:hover .calrow__title { color: var(--text-accent); }
/* Passerade rader tonas ned med dämpad textfärg i stället för opacity: 0.5 sänkte
   kontrasten till ~2:1 (under AA). --text-muted håller ≥4,7:1 och läses fortfarande som "förbi". */
.calrow--past { color: var(--text-muted); }
.calrow--past .calrow__date { color: var(--text-muted); }
.calrow--next { border-top-color: var(--accent); }
.calfilter { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
@media (max-width: 52rem) {
  /* Datum vänster (spänner båda raderna), typ + tid uppe till höger, titeln på raden
     under. Utan detta trycktes titeln in i den smala datumkolumnen och tiden doldes. */
  .calrow {
    grid-template-columns: 5rem 1fr auto;
    column-gap: var(--space-md); row-gap: var(--space-3xs);
    align-items: start;
  }
  .calrow__date { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .calrow__type { grid-column: 2; grid-row: 1; }
  .calrow__meta { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
  .calrow__title { grid-column: 2 / -1; grid-row: 2; }
}

/* ============================== Fält / formulär ============================== */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field + .field { margin-top: var(--space-md); }
.field label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.field input, .field textarea, .field select {
  background: var(--surface); border: var(--hair) solid var(--border-control);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text);
  transition: border-color var(--dur) var(--ease);
}
/* Behåll den synliga fokusringen (global :focus-visible) — accentbården är ett tillägg, inte en ersättning. */
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 8rem; }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Valideringsfel: rödbrun bård + meddelande i temastil (mono, --warn ≥ AA). Tomt = dolt. */
.field--error input, .field--error textarea, .field--error select { border-color: var(--warn); }
.field__error { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--warn); }
.field__error:empty { display: none; }
.formcard { max-width: 40rem; }
.formcard--panel { max-width: none; background: var(--surface); border: var(--hair) solid var(--border); padding: var(--space-lg); }

/* ============================== Notis / info ============================== */
.notice { border-left: 3px solid var(--accent); background: var(--surface); padding: var(--space-md); }
.notice__title { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-3xs); }
.notice--warning { border-left-color: var(--warn); }
.notice--ok { border-left-color: var(--ok); }

/* ============================== Kvitto (skickat formulär) ==============================
   Speglar bekräftelsemailets uppbyggnad — grön regel för "mottaget", ärendenumret i en
   indragen ruta med bärnstensregel — så att sidan och mailet känns som samma svar. */
.receipt { border-left: 3px solid var(--ok); background: var(--surface); padding: var(--space-md); }
/* Fokus flyttas hit efter inskicket; musanvändaren ska inte se en ram av det. */
.receipt:focus { outline: none; }
.receipt:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.receipt__lead { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.3; }
.receipt__case {
  display: inline-block;
  margin-block: var(--space-md);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  padding: var(--space-2xs) var(--space-sm);
}
.receipt__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
/* nowrap: ärendenumret bröts mellan "LM-" och årtalet på smala skärmar. */
.receipt__number { display: block; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; white-space: nowrap; }
.receipt__note { font-size: var(--text-sm); color: var(--text-2); }
.receipt__note + .receipt__note { margin-top: var(--space-2xs); }

/* ============================== Faktarad (öppettider, pris) ============================== */
.factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-lg); border-block: var(--hair) solid var(--border); padding-block: var(--space-lg); }
.fact__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: var(--space-2xs); }
.fact__value { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); }

/* ============================== Besökspanel (kontakt) ============================== */
.visit__status { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); }
.visit__status--open { color: var(--ok); }
.visit__status--closed { color: var(--text-muted); }
.visit__note { color: var(--text-muted); margin-top: var(--space-2xs); }

/* ============================== Kontaktsida: besöksinfo + formulär (tvåspalt) ============================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 60rem) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
/* Faktarutan staplas rakt i den smala vänsterkolumnen — utan de heltäckande hårlinjerna. */
.factbar--stack { grid-template-columns: 1fr; border: 0; padding-block: 0; gap: var(--space-lg); }
/* Formulärkortet: upphöjd yta med ram, formuläret inuti fyller kortet. */
.contact-form-col { background: var(--surface); border: var(--hair) solid var(--border); padding: clamp(var(--space-md), 3vw, var(--space-lg)); }
.contact-form-col .section-head { margin-bottom: var(--space-md); }
.contact-form-col .formcard { max-width: none; }
/* Sticky besöksinfo på desktop — den korta kolumnen följer med när formuläret är långt. */
@media (min-width: 60rem) { .contact-info { position: sticky; top: calc(var(--header-h) + var(--space-md)); } }
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3xs) var(--space-md); max-width: none; }
.hours dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.hours dd { font-variant-numeric: tabular-nums; }
.hours dt.is-today, .hours dd.is-today { color: var(--text); font-weight: var(--weight-semibold); }

/* Kontaktpersoner */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-lg); max-width: none; }
.person__role { color: var(--text-muted); }
.person__name { font-family: var(--font-display); font-size: var(--text-md); margin-top: var(--space-3xs); }
.person__lines { margin-top: var(--space-2xs); font-variant-numeric: tabular-nums; }

/* ============================== Nyhetsbrevsanmälan ============================== */
.signup__benefits { max-width: none; margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.signup__benefits li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); }
.signup__mark { color: var(--text-accent); }

/* ============================== Plåtar (mediagalleri) ============================== */
/* Jämnt kvadratiskt raster: varje ruta har samma 1:1-form (bilden är kvadratiskt beskuren,
   object-fit: cover fyller rutan). Ramens aspect-ratio reserverar ytan → inget layout-hopp. */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: none; }
.plate { display: block; text-decoration: none; color: inherit; }
.plate__frame { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-media); border: var(--hair) solid var(--border); transition: transform var(--dur) var(--ease); }
a.plate:hover .plate__frame, a.plate:focus-visible .plate__frame { transform: translateY(-3px); }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
a.plate:hover img { transform: scale(1.03); }
.plate__cap { display: flex; justify-content: space-between; gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); padding-top: var(--space-2xs); }
.plate__no { flex: none; color: var(--text-accent); }
@media (max-width: 60rem) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .plates { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } }

/* ============================== Lightbox ============================== */
/* Fyll viewporten och centrera bilden med grid — annars ligger den inline-ställda <img>
   till vänster (margin:auto centrerar inte inline-element, och dialogen klampas till 96vw). */
/* En författar-display-regel slår UA:s dialog:not([open]){display:none}, så den stängda
   dialogen blev annars ett osynligt helskärmslager vars fixed-knappar låg kvar och åt klick. */
.lightbox:not([open]) { display: none; }
.lightbox { border: 0; padding: 0; margin: 0; inset: 0; width: auto; height: auto; max-width: none; max-height: none; background: transparent; color: var(--on-scrim); display: grid; place-items: center; overflow: hidden; }
.lightbox::backdrop { background: rgba(15, 13, 10, 0.92); }
.lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; margin: auto; }
.lightbox__close, .lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(15, 13, 10, 0.6); color: var(--on-scrim);
  border: var(--hair) solid var(--border-strong);
  font-size: var(--text-lg); line-height: 1; padding: var(--space-2xs) var(--space-sm);
}
.lightbox__nav--prev { left: var(--space-sm); }
.lightbox__nav--next { right: var(--space-sm); }
.lightbox__close { top: var(--space-sm); right: var(--space-sm); transform: none; font-size: var(--text-md); }
/* "Bild N av M" — synlig position och samtidigt live-region för skärmläsare. */
.lightbox__count {
  position: fixed; left: 50%; bottom: var(--space-sm); transform: translateX(-50%);
  margin: 0; max-width: 92vw; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); color: var(--on-scrim);
  background: rgba(15, 13, 10, 0.6); padding: var(--space-3xs) var(--space-sm);
}
.lightbox__count:empty { display: none; }

/* ============================== Karta ============================== */
.map-embed { margin: 0; }
.map-embed iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: var(--bg-media); }
.map-embed__caption { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); justify-content: space-between; margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
@media (min-width: 40rem) { .map-embed iframe { aspect-ratio: 21 / 9; } }

/* ============================== Video ============================== */
.video-embed { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-media); }
.video-embed iframe { width: 100%; height: 100%; border: 0; }

/* ============================== Sidfot ============================== */
.site-footer { padding-block: var(--space-2xl) var(--space-xl); }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); align-items: start; }
/* Wordmarken håller den mörka foten i textens egen ton — i den här graden blev glödaccenten
   för skrikig. Tonen byts i --footer-mark i temat. */
.site-footer__mark { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 0.9; letter-spacing: var(--tracking-tight); color: var(--footer-mark); }
.site-footer h2 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: var(--space-sm); }
.site-footer__links { display: flex; flex-direction: column; gap: var(--space-2xs); }
.site-footer__links a { color: var(--text-2); text-decoration: none; }
.site-footer__links a:hover { color: var(--text-accent); }
.site-footer__meta { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--hair) solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); }
@media (max-width: 52rem) { .site-footer__top { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ============================== Brödsmulor ============================== */
.breadcrumbs { padding-block: var(--space-md); }
/* padding-inline: 0 — listan är klasslös och matchar därför inte resetens ul[class], ol[class];
   utan detta ärvs webbläsarens indrag och brödsmulan hamnar till höger om sidrubriken. */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-inline: 0; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.breadcrumbs li { display: flex; gap: var(--space-2xs); align-items: center; }
.breadcrumbs li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-accent); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ============================== Bildplatshållare ============================== */
.ph {
  display: grid; place-items: center; background: var(--bg-media);
  color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  position: relative; overflow: hidden; width: 100%; height: 100%;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) var(--hair), transparent var(--hair)), linear-gradient(90deg, var(--border) var(--hair), transparent var(--hair));
  background-size: 1.75rem 1.75rem; opacity: 0.5;
}
.ph > span { position: relative; z-index: 1; padding: 0.4rem 0.7rem; }

/* ============================== Inre sidhuvud (masthead) ============================== */
.masthead { padding-block: var(--space-xl) var(--space-lg); border-bottom: var(--hair) solid var(--border); }
.masthead__eyebrow { margin-bottom: var(--space-sm); }
/* Graden ärvs från h1-regeln (--text-page-title) — ingen egen storlek här, annars skulle
   masthead-rubriken kunna glida isär från sidtyper som inte använder den här partialen.
   text-wrap: pretty i stället för den globala balance: balance delar en tvåradig
   displayrubrik i två lika korta rader och lämnar halva raden tom. */
.masthead h1 { text-wrap: pretty; }
.masthead__main { min-width: 0; }

/* Faktarad under rubriken (eventsidan). Ligger i flödet i full bredd i stället för som spalt
   bredvid rubriken — en hög panel intill en kort rubrik lämnar ett par hundra pixlar tomma. */
.masthead__meta { margin-top: var(--space-lg); }
.factbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.factbar__actions {
  margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
}
.factbar__calendar {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted);
}
.factbar__calendar a { color: var(--text-accent); }
@media (max-width: 60rem) { .masthead--split { grid-template-columns: 1fr; gap: var(--space-lg); } }
.masthead__lead { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--text-2); margin-top: var(--space-md); max-width: 40ch; }

/* ============================== Feature-band (2 kolumner) ============================== */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: center; }
.feature__media { aspect-ratio: 4 / 3; }
.feature__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
@media (max-width: 52rem) { .feature { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ============================== Två-spalts prose + media ============================== */
/* minmax(0, …) och inte bara 1fr: en spalts automatiska minimum är annars min-content, och en
   bred bild spränger då rutnätet i stället för att krympa. Samma skäl som i .article. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.split .prose { max-width: none; }
/* Redaktörsval på mediaTextBlock. Bilden ligger sist i markupen (läsordning) — vänsterläget
   flyttar den bara visuellt. */
.split--media-third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.split--media-left .split__media { order: -1; }
/* order flyttar bilden till första cellen — då måste den smala spalten byta sida med. */
.split--media-third.split--media-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.split__text > * + * { margin-top: var(--space-md); }
.split__media figcaption { margin-top: var(--space-2xs); }
/* Staplat. Modifierarna räknas upp igen för att matcha specificiteten hos
   .split--media-third.split--media-left ovan — annars behåller den två spalter på mobil. */
@media (max-width: 52rem) {
  .split,
  .split--media-third,
  .split--media-third.split--media-left { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ============================== Artikel med sidopanel (asideBlock) ============================== */
/* En flödesruna med en sidopanel blir tvåspalt: läsbar text vänster (i linje med rubriken),
   panel höger (sticky på desktop, staplas under på mobil). Utan panel = enspalt. Full-bredd-
   band påverkas inte. Panelens bakgrund väljs via .aside--* (temavariabler, ingen hårdkodad hex). */
/* Textspalten tar resten av bredden i stället för att kapas vid --measure — annars slutar
   rutnätet före containerns högerkant och panelen linjerar inte med bilder och band ovanför.
   Läsbar radlängd hålls i stället av .prose, som redan kapar vid --measure. */
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: var(--space-2xl); align-items: start; }
/* Faller panelen bort finns ingen högerkolumn att reservera — annars står texten kapad
   med en tom spalt bredvid sig. */
.article--solo { grid-template-columns: minmax(0, 1fr); }
.article__main { min-width: 0; }
.article__main > * + * { margin-top: var(--space-lg); }
/* Högerkolumnen är själva grid-elementet — den (inte den inre .aside) blir sticky, annars
   finns ingen höjdrymd att glida inom. Flera paneler staplas med luft emellan. */
.article__aside { min-width: 0; }
.article__aside > * + * { margin-top: var(--space-lg); }
@media (min-width: 60rem) { .article__aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); align-self: start; } }
@media (max-width: 60rem) { .article { grid-template-columns: 1fr; gap: var(--space-lg); } }

.aside { padding: var(--space-lg); border: var(--hair) solid var(--border); }
.aside__title { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); margin-bottom: var(--space-sm); }
.aside > * + * { margin-top: var(--space-sm); }
.aside a { color: var(--text-accent); }
.aside--paper2 { background: var(--paper-2); border-color: transparent; }
.aside--paper3 { background: var(--paper-3); border-color: transparent; }
.aside--ember  { background: var(--ember-wash); border-color: transparent; }
/* Mörk panel: lokal ommappning (som .inverse) så RTE-text, länkar och dämpad text läser rätt. */
.aside--ink {
  background: var(--ink); color: var(--paper); border-color: transparent;
  --text-2: var(--ink-text-2); --text-muted: var(--ink-text-muted); --text-accent: var(--ember-bright); --link: var(--ember-bright);
}
@media (min-width: 60rem) { .aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); } }

/* ============================== Toppbild ============================== */
/* Delad av utställnings- och eventsidan: bild kant i kant i omslaget, 16:9 så ytan är reserverad
   innan bilden laddat. Höjden får ett tak — i full bredd blir 16:9 nästan en skärmhöjd och
   trycker ner brödtexten; object-fit: cover beskär i stället. display: block tar bort
   baslinjegluggen under bilden och låter marginalen kollapsa mot nästa block. */
.media-hero {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  max-height: min(60vh, 36rem);
  margin-bottom: var(--space-xl);
}

/* ============================== Utställning ============================== */
/* Bild i topp, sedan text + sticky faktapanel (återanvänder .article-rutnätet). Panelen
   fyller ytan som annars stod tom till höger om den smala lässpalten. */
.exhibition__body { margin-top: var(--space-xl); gap: var(--space-xl); }

/* ============================== Kalenderhändelse ============================== */
/* Fakta ligger i sidhuvudet, så sidan är enspaltig här nedanför: bild, brödtext, tillbakalänk. */
.event__back { margin-top: var(--space-lg); }

/* ============================== Rörelse: sidövergångar, avslöjande, hero ============================== */
/* Cross-document sidövergångar (MPA) — mjuk cross-fade utan JS-router. Namngiven wordmark
   hålls kvar över navigeringar. Rörelsen stängs av under reduced-motion längst ned. */
@view-transition { navigation: auto; }
.wordmark { view-transition-name: wordmark; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-fade-out 0.22s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-fade-in 0.34s var(--ease-out) both; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; transform: translateY(0.6rem); } }

  /* Scroll-avslöjande — endast med JS (html.js) så innehållet syns utan skript. En liten
     modul i site.js sätter .is-in när elementet skrollas in. Grupper staplar sina barn. */
  html.js [data-reveal],
  html.js [data-reveal-group] > * {
    opacity: 0; transform: translateY(1.25rem);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  html.js [data-reveal].is-in,
  html.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
  html.js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.06s; }
  html.js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.12s; }
  html.js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.18s; }
  html.js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.24s; }
  html.js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.30s; }

  /* Kvittot stiger lugnt in så att bekräftelsen läses som ett svar, inte som en ny sida.
     Ren CSS (inget html.js-krav) — kvittot måste synas även utan skript. */
  .receipt { animation: receipt-in var(--dur-slow) var(--ease-out) both; }
  @keyframes receipt-in { from { opacity: 0; transform: translateY(0.75rem); } }

  /* Hero: lugn ken-burns som landar — filmiskt anslag utan att distrahera. */
  .hero__media img { animation: hero-kenburns 16s var(--ease-out) both; }
  @keyframes hero-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } }
}

/* ============================== Rörelse av ============================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* View-transition-pseudon matchas inte av * ovan — stäng dem uttryckligen. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ============================== Förhöjd kontrast ============================== */
/* Besökare som bett om mer kontrast får den mörkare tokenuppsättningen genomgående:
   dämpad text går upp till den sekundära tonen och hårlinjer till kontrollramen. */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--ink-2);
    --border: var(--line-control);
    --border-strong: var(--line-control);
  }
  .inverse {
    --text-muted: var(--ink-text-2);
    --border: var(--border-control);
    --border-strong: var(--border-control);
  }
}

/* Windows högkontrastläge byter ut färgerna mot systemets egna. Det vi behöver göra är att
   inte stå i vägen: låt ramar och fokusring följa systemfärgerna, och se till att ytor som
   bara definieras av en bakgrund (scrim, taggar) får en synlig kant i stället. */
@media (forced-colors: active) {
  .hero__scrim { background: none; }
  .hero__text::before, .hero__text::after { content: none; }
  .hero__inner { background: Canvas; color: CanvasText; padding-inline: var(--space-md); }
  .tag, .btn, .card, .excard__flag, .field input, .field textarea, .field select, .lightbox__count {
    border: 1px solid CanvasText;
  }
  :where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid Highlight; outline-offset: 2px;
  }
  .skip-link:focus { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}