/*
 * 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. Utan valt tema är resultatet
   identiskt med tidigare: var(--bg)/var(--text) är just vad .inverse redan satte. */
.section--cta { background: var(--bg); color: var(--text); }

/* 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: min(88vh, 880px);
  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. Mätt mot vit botten krävs ~0.68 opacitet för att den dämpade etiketten
   (--on-scrim-muted, 82 %) ska nå AA; därför hålls det mörka bandet hela vägen upp till 55 %,
   där hjältens innehåll ligger (flex-end). Ovanför det klarnar bilden snabbare än förr. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,13,10,0.82) 0%, rgba(15,13,10,0.68) 55%, rgba(15,13,10,0.26) 100%);
}
.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(--space-xl); color: var(--on-scrim); }
.hero__eyebrow { color: var(--on-scrim-muted); 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-2); }
.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-2); }
.hero__meta .link-arrow { color: var(--on-scrim); }
/* På telefon: stapla metaraden, primärknapp i full bredd, länkar vänsterställda —
   i stället för två-och-två som trängdes mot scrimen. */
@media (max-width: 40rem) {
  .hero__inner { padding-block: var(--space-lg); }
  .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 { 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); }
.excard__dates { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.excard__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-top: var(--space-2xs); 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 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: start; max-width: none; }
.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); }
.signup__fine { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-sm); }

/* ============================== 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; }

/* ============================== Svarsmodal (nyhetsbrev) ============================== */
/* Samma fälla som lightboxen ovan: en författar-display-regel slår UA:s
   dialog:not([open]){display:none}, och den stängda dialogen blir ett osynligt lager. */
.nl-modal:not([open]) { display: none; }
.nl-modal {
  margin: auto; max-width: 30rem; width: calc(100% - var(--gutter) * 2);
  padding: var(--space-lg);
  /* Vänsterbård + upphöjd yta = samma svarsspråk som .notice och .receipt. */
  border: 0; border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lift);
}
/* color-mix i stället för en ny rgba(): scrimmet följer temats bläckton. */
.nl-modal::backdrop { background: color-mix(in srgb, var(--ink) 82%, transparent); }
/* Bården speglar utfallet. Färgen är ett tillägg — rubrikerna säger samma sak i klartext. */
.nl-modal[data-state="ok"] { border-left-color: var(--ok); }
.nl-modal[data-state="error"] { border-left-color: var(--warn); }

/* Fokus flyttas till panelen när dialogen öppnas; musanvändaren ska inte se en ram av det. */
.nl-modal__panel:focus { outline: none; }
.nl-modal__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.nl-modal__title { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); margin-bottom: var(--space-2xs); }
.nl-modal__fine { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.nl-modal a { color: var(--text-accent); }

/* Alla tre tillstånd står i markupen; site.js byter bara data-state. */
.nl-modal__state { display: none; }
.nl-modal[data-state="pending"] [data-nl-state="pending"],
.nl-modal[data-state="ok"] [data-nl-state="ok"],
.nl-modal[data-state="error"] [data-nl-state="error"] { display: block; }

/* Inget att stänga medan anropet pågår. */
.nl-modal__close { margin-top: var(--space-md); }
.nl-modal[data-state="pending"] .nl-modal__close { display: none; }

.nl-modal__spinner {
  display: block; width: 1.5rem; height: 1.5rem; margin-bottom: var(--space-sm);
  border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%;
}

/* ============================== 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 1fr; gap: var(--space-lg); align-items: start; }
/* Wordmarken bär sajtens enda varma glödaccent mot den mörka foten — brand-värme utan att bryta det monokroma. */
.site-footer__mark { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 0.9; letter-spacing: var(--tracking-tight); color: var(--text-accent); }
.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; }
.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); } }

  /* Nyhetsbrevsmodalens spinner. Snurret ligger här, inte i basregeln: under `reduce` slår
     den globala animation-duration: 0.01ms till och ringen hade ryckt i stället för att stå
     still — och där bär väntetexten beskedet på egen hand. */
  .nl-modal__spinner { animation: nl-spin 0.8s linear infinite; }
  @keyframes nl-spin { to { transform: rotate(360deg); } }
}

/* ============================== 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__inner { background: Canvas; color: CanvasText; padding-inline: var(--space-md); }
  .tag, .btn, .card, .field input, .field textarea, .field select, .lightbox__count, .nl-modal {
    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; }
}