/* KUST, skiss v4. Svartvitt som loggan, på Andreas ja 2026-11-10 efter grafikerns förslag.
   Svart är handlingens färg (fylld knapp, kontur, länk, fokus), allt annat är text. All kulör
   kommer från affischerna och scenbilderna. Tokennamnen --hav* är kvar från v3 så att inget
   annat behövde röras.
   Skylttypsnittet bär bara skylten, sidans huvudrubrik och föreställningstitlarna
   (UX-granskningen 2026-11-10). Textstorlekarna följer skalan 12, 14, 16, 20, 24, 32, 48
   plus hjältens egen storlek. Alla färger är tokens här i :root, så att ett byte av
   färgschema görs på ett enda ställe. Kontrasterna står i kommentarerna. */

@font-face { font-family: "Skylt"; src: url("typsnitt/big-shoulders-display-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Skylt"; src: url("typsnitt/big-shoulders-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Skylt"; src: url("typsnitt/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("typsnitt/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("typsnitt/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("typsnitt/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --sida: #fafafa;
  --sida-rgb: 250, 250, 250;
  --yta: #f2f2f2;
  --text: #161616;          /* 17,3:1 på sida, 16,2:1 på yta */
  --text-rgb: 22, 22, 22;
  --text-2: #525252;        /* 7,5:1 på sida, 7,0:1 på yta */
  --text-3: #666666;        /* 5,5:1 på sida, 4,7:1 på tonad */
  --hav: #161616;           /* handlingens färg, loggans svart. Vit text på knappen 18,1:1 */
  --hav-mork: #353535;      /* hover. Vit text 12,3:1 */
  --hav-tonad: #e8e8e8;     /* kontur-hover, utskicket och bokningsrutan */
  --kant: #767676;          /* fältkant 4,5:1 mot vitt fält */
  --linje: #dedede;         /* bara avdelare, bär ingen mening */
  --natt: #0f0f0f;
  --natt-rgb: 15, 15, 15;
  --mork-text: #dedede;     /* ingressen på hjältens svarta botten, 15,0:1 */
  --mork-text-2: #c7c7c7;   /* små texter på mörk botten, 11,9:1 */
  --fot-text: #c7c7c7;      /* 10,7:1 på fotens svart */
  --affisch-svart: #060706; /* affischens egen svärta, hjältens botten */

  --saknas-bg: rgba(255, 64, 160, 0.10);
  --saknas-kant: #d6338a;

  --skylt: "Skylt", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spar: 0.08em;           /* den enda spärrningen för versaler */

  --bredd: 1200px;
  --marg: clamp(16px, 4vw, 40px);
  --luft: clamp(56px, 7vw, 96px);
  --radie: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

body { margin: 0; background: var(--sida); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--hav); text-underline-offset: 3px; }
a:hover { color: var(--hav-mork); }
:focus-visible { outline: 3px solid var(--hav); outline-offset: 3px; }
.hjalte :focus-visible, .ljuslada :focus-visible, .fot :focus-visible { outline-color: #fff; }
@media (max-width: 700px) { .hjalte :focus-visible { outline-color: var(--hav); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-family: var(--skylt); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1; font-size: 48px; }
h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
h3, h4 { font-size: 20px; font-weight: 600; }
@media (max-width: 600px) { h2 { font-size: 24px; } }
p { margin: 0 0 1em; }
/* Verktitlar i löptext står i fetstil och i textens egen svärta, så att de inte försvinner i den
   grå brödtexten (Andreas 2026-11-10). Gäller produktioner, akter och filmer. */
cite { font-style: normal; font-weight: 600; color: var(--text); }
.fot cite, .hjalte cite, .ljuslada cite { color: inherit; }

.hoppa { position: absolute; left: -9999px; }
.hoppa:focus { left: 16px; top: 16px; z-index: 100; background: var(--hav); color: #fff; padding: 8px 14px; }

/* Skissmarkeringar */
.skiss-band { background: #fde8f3; color: #7a1048; font-size: 14px; text-align: center; padding: 6px var(--marg); }
.saknas { background: var(--saknas-bg); outline: 1px dashed var(--saknas-kant); outline-offset: 2px; border-radius: 2px; }

.sektion-ingress, .ingress { font-size: 20px; line-height: 1.45; color: var(--text-2); max-width: 44ch; }
.smatt { font-size: 14px; color: var(--text-3); }
.liten-rubrik { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: var(--spar); text-transform: uppercase; color: var(--text-2); }

/* Knappar: en fylld per skärm, resten i kontur */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--hav); color: #fff; border: 1px solid var(--hav); border-radius: var(--radie);
  font: 600 16px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.knapp:hover { background: var(--hav-mork); border-color: var(--hav-mork); color: #fff; }
.knapp-kontur { background: transparent; color: var(--hav); border-color: var(--hav); }
.knapp-kontur:hover { background: var(--hav-tonad); color: var(--hav-mork); }
.knapp-liten { min-height: 40px; padding: 0 16px; font-size: 14px; }
.knapp-av { background: var(--yta); color: var(--text-3); border-color: var(--linje); cursor: not-allowed; }
.knapp-av:hover { background: var(--yta); color: var(--text-3); border-color: var(--linje); }
.knapprad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.lank-pil { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Sidhuvudet */
.topp { position: sticky; top: 0; z-index: 50; background: rgba(var(--sida-rgb), 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linje); }
.topp-inre { max-width: var(--bredd); margin: 0 auto; padding: 10px var(--marg); display: flex; align-items: center; gap: 28px; }
.logga { display: flex; flex-direction: column; gap: 3px; text-decoration: none; margin-right: auto; color: var(--text); }
.logga:hover { color: var(--text); }
.logga-svg { width: 150px; height: auto; display: block; }
.logga-namn { font-size: 12px; letter-spacing: var(--spar); text-transform: uppercase; color: var(--text-2); }
.meny ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.meny a { color: var(--text); text-decoration: none; font-size: 16px; font-weight: 500; }
.meny a:hover, .meny a[aria-current="page"] { color: var(--hav); text-decoration: underline; }
.meny-knapp { display: none; }

@media (max-width: 860px) {
  .meny-knapp { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: transparent; color: var(--text); border: 1px solid var(--kant); border-radius: var(--radie); font: 500 14px var(--sans); cursor: pointer; }
  /* Menyn får aldrig bli högre än skärmen, annars går de sista valen inte att nå vid zoom eller i liggande läge */
  .meny ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--sida); border-bottom: 1px solid var(--linje); padding: 4px var(--marg) 16px; box-shadow: 0 12px 24px rgba(var(--text-rgb), .08); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
  .meny ul.oppen { display: flex; }
  .meny ul a { display: block; padding: 14px 0; font-size: 20px; border-bottom: 1px solid var(--linje); }
  .topp-inre { gap: 10px; }
  .logga-svg { width: 118px; }
}

/* 1. Hjälten: aktuell föreställning. Affischen bredvid titeln (Finborough), föreställningens
   egen svärta som botten så att affischen och sidan blir en yta. */
.hjalte {
  display: grid; align-items: center; column-gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(var(--marg), 1fr) minmax(0, 640px) minmax(0, 420px) minmax(var(--marg), 1fr);
  background: var(--affisch-svart); color: #fff; padding: clamp(40px, 6vw, 80px) 0;
}
.hjalte-bild { grid-column: 3; grid-row: 1; }
.hjalte-bild img { width: 100%; height: auto; aspect-ratio: 1100 / 1555; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.hjalte-text { grid-column: 2; grid-row: 1; }
.bricka { display: inline-block; background: #fff; color: var(--text); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 2px; margin-bottom: 16px; }
.hjalte h1 { font-size: clamp(56px, 8vw, 112px); line-height: 0.98; max-width: 9ch; margin-bottom: 18px; }
.hjalte .ingress { color: var(--mork-text); max-width: 40ch; }
.hjalte .knapp { background: #fff; color: var(--hav-mork); border-color: #fff; }
.hjalte .knapp:hover { background: var(--hav-tonad); border-color: var(--hav-tonad); color: var(--hav-mork); }
.hjalte .lank-pil { color: #fff; }
.fortroende { margin: 18px 0 0; font-size: 14px; color: var(--mork-text-2); }

/* Mobil: bilden tar högst en fjärdedel av skärmen, text, datum och knapp på ljus yta under */
@media (max-width: 700px) {
  .hjalte { display: block; padding: 0; background: var(--sida); color: var(--text); }
  /* Bara sagoboken ur affischen, så att affischens egen titel inte krockar med rubriken */
  .hjalte-bild { height: 25vh; min-height: 150px; background: var(--affisch-svart); overflow: hidden; }
  .hjalte-bild picture { display: block; height: 100%; }
  .hjalte-bild img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; box-shadow: none; }
  .hjalte-text { padding: 0 var(--marg) 28px; margin-top: -18px; position: relative; }
  /* Knappen före ingressen, så att titel, datum och knapp ryms på första skärmen */
  .hjalte-text { display: flex; flex-direction: column; align-items: flex-start; }
  .hjalte-text .knapprad { order: 3; align-self: stretch; margin-top: 4px; }
  .hjalte-text .fortroende { order: 4; margin: 12px 0 18px; }
  .hjalte-text .ingress { order: 5; margin-bottom: 0; }
  /* En svart bricka mot affischens svarta kant tappar sin övre halva. Vit med svart kant håller formen. */
  .bricka { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
  .hjalte h1 { font-size: 48px; color: var(--text); margin-bottom: 12px; }
  .hjalte .ingress { color: var(--text-2); font-size: 16px; }
  .hjalte .knapp { background: var(--hav); color: #fff; border-color: var(--hav); width: 100%; }
  .hjalte .lank-pil { color: var(--hav); }
  .knapprad { margin-top: 20px; }
  .fortroende { color: var(--text-3); }
}

/* Speldatum direkt under hjälten */
.speldatum { background: var(--yta); border-bottom: 1px solid var(--linje); }
.speldatum-inre { max-width: var(--bredd); margin: 0 auto; padding: 28px var(--marg) 24px; }
.speldagar { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.speldagar li { border-left: 3px solid var(--text); padding: 2px 0 2px 14px; }
.speldag-vis { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.speldagar .nr { grid-row: 1 / 3; font-family: var(--skylt); font-weight: 800; font-size: 48px; line-height: 1; }
.speldagar .dag, .speldagar .man { font-size: 14px; color: var(--text-2); }
.speldagar .dag { font-weight: 600; text-transform: uppercase; letter-spacing: var(--spar); }
.speldagar .tid { grid-column: 1 / -1; font-size: 16px; font-weight: 600; margin-top: 4px; }
.speldagar .etikett { grid-column: 1 / -1; order: 9; font-size: 12px; font-weight: 600; color: var(--hav); text-transform: uppercase; letter-spacing: var(--spar); }
.speldatum-not { font-size: 16px; color: var(--text-2); margin: 0 0 24px; max-width: 70ch; }
.speldatum-not strong { color: var(--text); }
.speldatum .utskick { background: var(--sida); border: 1px solid var(--linje); max-width: 720px; }
@media (max-width: 700px) { .speldagar { grid-template-columns: 1fr 1fr; gap: 16px 12px; } }

/* Sektioner */
.sektion { max-width: var(--bredd); margin: 0 auto; padding: var(--luft) var(--marg) 0; }
.sektion-huvud { margin-bottom: 32px; }
.sektion-huvud h2 { margin-bottom: 12px; }
.sektion-huvud-rad { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.sektion-huvud-rad h2 { margin-bottom: 0; }
.sektion-huvud-rad .sektion-ingress { margin: 0; font-size: 16px; }

/* Akterna */
.akt-rutnat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.akt { border-top: 3px solid var(--text); padding-top: 20px; }
.akt h3 { font-size: 24px; margin-bottom: 8px; }
.akt-av { font-size: 14px; font-weight: 600; color: var(--hav); margin-bottom: 14px; }
.akt p:last-child { color: var(--text-2); margin-bottom: 0; }
.akt-knapp { margin-top: 40px; }
.akt-not { display: inline-block; margin-top: 24px; padding: 2px 6px; }
@media (max-width: 900px) { .akt-rutnat { grid-template-columns: 1fr; gap: 36px; } }

/* 2. Om KUST: skylten bär gruppens namn, underraden är avsnittets rubrik */
.skylt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 36px 20px; margin-bottom: 48px; border-top: 3px solid var(--text); border-bottom: 3px solid var(--text); }
.skylt-namn { font-family: var(--skylt); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 9vw, 112px); line-height: 0.95; letter-spacing: 0.01em; }
.skylt-under { font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.3; max-width: 30ch; }
.skylt-rad { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: var(--spar); text-transform: uppercase; color: var(--text-2); }
.om-text { max-width: 64ch; margin: 0 auto 40px; }
.om-text p { color: var(--text-2); }
.styrelse-rubrik { margin: 0 0 20px; }
.medlemmar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.medlem-bild { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; background: var(--yta); border-radius: var(--radie); margin-bottom: 18px; }
.medlem h3, .medlem h4 { font-size: 24px; margin-bottom: 4px; }
.medlem-roll { font-size: 14px; color: var(--text-2); margin-bottom: 12px; }
.medlem-text > p:not(.medlem-roll) { color: var(--text-2); }
.medlem .saknas { display: inline-block; padding: 2px 6px; }
.om-fot { margin: 48px 0 0; color: var(--text-2); max-width: 64ch; }
/* Startsidans porträtt är kvadratiska, hela formatet står i arkivet */
#om .medlem-bild { aspect-ratio: 1 / 1; }
.vilande { margin-top: 48px; }
.vilande-lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 48px; }
.vilande-lista li { display: flex; align-items: center; gap: 14px; }
.vilande-lista img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--yta); }
.vilande-lista span { font-size: 14px; color: var(--text-2); }
.vilande-lista strong { display: block; font-size: 16px; color: var(--text); }
@media (max-width: 900px) {
  .medlemmar { grid-template-columns: 1fr; gap: 28px; }
  .medlem { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
  .medlem-bild { margin: 0; }
  .medlem h3, .medlem h4 { font-size: 20px; }
}

/* Vilande medlemmar i arkivet: samma upplägg, mindre format */
.vilande-rubrik { margin: 56px 0 20px; }
.medlemmar-vilande { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.medlemmar-vilande .medlem { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; }
.medlemmar-vilande .medlem-bild { margin: 0; }
.medlemmar-vilande .medlem h4 { font-size: 20px; }
@media (max-width: 900px) { .medlemmar-vilande { grid-template-columns: 1fr; gap: 28px; } .medlemmar-vilande .medlem { grid-template-columns: 96px 1fr; gap: 16px; } }

/* 3. Produktioner: affischrutnät 2:3 */
.prod-rutnat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.prod { position: relative; }
.prod-bild { position: relative; aspect-ratio: 2 / 3; background: var(--text); border-radius: var(--radie); overflow: hidden; margin-bottom: 12px; }
.prod-bild img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prod:hover .prod-bild img { transform: scale(1.03); }
.prod-bild.kvadrat { background-size: cover; background-position: center; }
.prod-bild.kvadrat::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(16px) brightness(.75); -webkit-backdrop-filter: blur(16px) brightness(.75); }
.prod-bild.kvadrat img { position: absolute; inset: 0; z-index: 2; object-fit: contain; }
.prod-bild.kvadrat .prod-reserv { display: none; }
.prod-reserv { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; font-family: var(--skylt); font-weight: 800; text-transform: uppercase; font-size: 32px; line-height: 0.95; color: var(--sida); }
.prod h3, .prod-serie, .prod p { overflow-wrap: anywhere; hyphens: auto; }
.prod-serie { display: block; font-size: 12px; font-weight: 600; letter-spacing: var(--spar); text-transform: uppercase; color: var(--hav); margin-bottom: 4px; }
.prod h3 { font-size: 20px; margin-bottom: 4px; }
.prod p { font-size: 14px; color: var(--text-2); margin: 0; }
.prod .saknas { margin-top: 6px; display: inline-block; padding: 1px 4px; }
.prod-dessutom { margin-top: 28px; }
.prod-las { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--hav); }
.prod:hover .prod-las { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .prod-rutnat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .prod-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } .prod h3 { font-size: 16px; } .prod-reserv { font-size: 24px; padding: 10px; } }

/* Produktionskorten är klickbara: titelns knapp sträcks över hela kortet */
.prod-oppna { all: unset; cursor: pointer; }
.prod-oppna::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.prod-oppna:focus-visible { outline: none; }
.prod:has(.prod-oppna:focus-visible) { outline: 3px solid var(--hav); outline-offset: 4px; border-radius: var(--radie); }
.prod:hover h3 { color: var(--hav); text-decoration: underline; text-underline-offset: 3px; }

/* 4. Bild och film. Filmtiteln står under bilden, så att den aldrig klipps när texten förstoras (WCAG 1.4.12). */
.film-rutnat { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.film-rutnat-tva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.film { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.film-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radie); background: var(--natt); }
.film-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.film:hover .film-bild img { opacity: 1; }
.film-bild::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(var(--natt-rgb), .72); }
.film-bild::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 50%; margin: -12px 0 0 -7px; border-left: 22px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.film-titel { display: block; margin-top: 10px; font-weight: 600; font-size: 16px; line-height: 1.35; }
.film:hover .film-titel { text-decoration: underline; text-underline-offset: 3px; }
.film-spelar { aspect-ratio: 16 / 9; border-radius: var(--radie); overflow: hidden; background: var(--natt); }
.film-spelar iframe { width: 100%; height: 100%; border: 0; display: block; }
.galleri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.galleri:empty { display: none; }
.galleri-kort { margin-top: 32px; }
.galleri-bild { display: block; width: 100%; padding: 0; border: 0; background: var(--yta); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.galleri-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galleri-bild:hover img { transform: scale(1.05); }
.galleri-tom { grid-column: 1 / -1; color: var(--text-3); }
.media-not { margin-top: 12px; }
@media (max-width: 900px) { .film-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galleri { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) {
  .film-rutnat { gap: 20px 10px; }
  .film-titel { font-size: 14px; margin-top: 6px; }
  .film-bild::before { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .film-bild::after { border-left-width: 16px; border-top-width: 9px; border-bottom-width: 9px; margin: -9px 0 0 -5px; }
  .galleri { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

.ljuslada { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
.ljuslada::backdrop { background: rgba(var(--natt-rgb), .94); }
.ljuslada img { max-width: 94vw; max-height: 84vh; object-fit: contain; margin: 0 auto; }
.ljuslada-text { text-align: center; color: var(--mork-text-2); margin-top: 10px; }
.ljuslada-text a { color: #fff; }
.ljuslada-pil { position: fixed; top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(var(--natt-rgb), .6); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 32px; line-height: 1; cursor: pointer; }
.ljuslada-forra { left: 14px; }
.ljuslada-nasta { right: 14px; }
.ljuslada-stang { position: fixed; top: 14px; right: 18px; width: 48px; height: 48px; background: rgba(var(--natt-rgb), .6); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 24px; cursor: pointer; }

/* 5. Historia */
.tidslinje { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.tidslinje li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--linje); }
.tidslinje .ar { font-size: 20px; font-weight: 600; line-height: 1.3; }
.tidslinje p { margin: 0; color: var(--text-2); }
.tidslinje li.nu .ar { color: var(--hav); }
.tidslinje li.nu p { font-weight: 600; }
@media (max-width: 600px) { .tidslinje li { grid-template-columns: 1fr; gap: 6px; } }

/* 6. Besök */
.besok-rutnat { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; }
.adress { font-size: 24px; font-weight: 600; line-height: 1.3; }
.besok-plats p:not(.adress) { color: var(--text-2); }
.fragor { margin: 0; }
.fragor > div { padding: 16px 0; border-top: 1px solid var(--linje); }
.fragor > div:last-child { border-bottom: 1px solid var(--linje); }
.fragor dt { font-weight: 600; margin-bottom: 4px; }
.fragor dd { margin: 0; color: var(--text-2); width: fit-content; padding: 1px 4px; }
@media (max-width: 800px) { .besok-rutnat { grid-template-columns: 1fr; gap: 32px; } }

/* 7. Kontakt och utskick */
.kontakt-rutnat { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; max-width: 760px; }
.kontakt h2 { margin-bottom: 16px; }
.skola { color: var(--text-2); }
.epost { display: inline-block; max-width: 100%; font-size: 20px; font-weight: 600; margin-top: 4px; }
.epost a { overflow-wrap: anywhere; }
.kanaler { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kanaler a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--kant); border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500; }
.kanaler a:hover { border-color: var(--hav); color: var(--hav); }
.utskick { background: var(--hav-tonad); border-radius: var(--radie); padding: 32px; }
.utskick h3 { font-size: 24px; margin-bottom: 12px; }
.utskick p { color: var(--text-2); }
.utskick-form { display: flex; gap: 8px; margin: 18px 0 12px; padding: 4px; }
.utskick-form .falt { flex: 1; display: flex; align-items: center; min-height: 48px; padding: 0 14px; background: #fff; border: 1px solid var(--kant); border-radius: var(--radie); color: var(--text-3); }
@media (max-width: 800px) { .utskick { padding: 24px; } .utskick-form { flex-direction: column; } }

/* Publikens citat: en smal rad överst i sidfoten, ett citat i taget som tonar över (som på Fixa CV).
   Alla ligger i samma ruta, så raden har det längsta citatets höjd och sidan aldrig hoppar. */
.fot-citat { max-width: var(--bredd); margin: 0 auto; padding: 40px var(--marg) 28px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.citat-lista { list-style: none; margin: 0 auto; padding: 0; display: grid; max-width: 62ch; }
.citat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .6s, transform .6s, visibility 0s linear .6s; }
.citat.aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .6s, transform .6s; }
.citat blockquote { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; color: #fff; text-wrap: balance; }
.citat-kalla { margin: 10px 0 0; font-size: 14px; color: var(--fot-text); }
.citat-paus { margin-top: 16px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; color: var(--fot-text); font: 500 14px var(--sans); cursor: pointer; }
.citat-paus:hover { border-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .citat, .citat.aktiv { transition: none; transform: none; } }
@media (max-width: 600px) { .citat blockquote { font-size: 16px; } .fot-citat { padding-top: 32px; } }

/* Instagram i foten: en remsa som rullar långsamt. Den stannar vid pekare, fokus och pausknapp.
   Utan rullning (färre bilder än bredden, eller rörelser avstängda) bläddras den för hand. */
.fot-insta { max-width: var(--bredd); margin: 0 auto; padding: 40px var(--marg) 8px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fot-insta-huvud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; font-size: 14px; }
.fot-insta-huvud .fot-rubrik { margin: 0 auto 0 0; }
.insta-paus { min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: transparent; color: #fff; font: 500 14px var(--sans); cursor: pointer; }
.insta-paus:hover { border-color: #fff; }
.insta-band { overflow-x: auto; scrollbar-width: thin; }
.insta-band.rullar { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.insta-spar { list-style: none; margin: 0; padding: 8px; display: flex; gap: 12px; width: max-content; }
.insta-band.rullar .insta-spar { animation: insta-rull var(--tid, 60s) linear infinite; }
.insta-band.rullar:hover .insta-spar, .insta-band.rullar:focus-within .insta-spar, .insta-band.pausad .insta-spar { animation-play-state: paused; }
/* Spåret är två likadana halvor. En halva plus ett mellanrum är exakt ett varv. */
@keyframes insta-rull { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .insta-band.rullar .insta-spar { animation: none; } .insta-band.rullar { overflow-x: auto; } }
.insta { flex: none; width: 128px; }
.insta a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fot-text); position: relative; }
.insta img { width: 128px; height: 128px; object-fit: cover; border-radius: var(--radie); background: #2a2a2a; }
.insta a:hover img { opacity: .85; }
.insta a:hover .insta-datum { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.insta-film { position: absolute; top: 8px; left: 8px; background: rgba(var(--natt-rgb), .75); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 2px; }
.insta-datum { font-size: 12px; }

/* Foten, med samarbetspartnerna. De står här en gång, på båda sidorna. */
.fot { margin-top: var(--luft); background: var(--text); color: var(--fot-text); }
.fot-inre { max-width: var(--bredd); margin: 0 auto; padding: 48px var(--marg) 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; font-size: 14px; }
.fot-inre p { margin: 0; }
.fot a { color: #fff; }
.logga-fot { width: 128px; height: auto; color: #fff; margin-bottom: 14px; }
.fot-rubrik { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: var(--spar); text-transform: uppercase; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.partner-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.partner-lista li { padding: 2px 0; }
.fot .saknas { background: rgba(255, 64, 160, .22); }
@media (max-width: 900px) { .fot-inre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fot-inre { grid-template-columns: 1fr; } }

/* Små telefoner, 360 px och smalare: knappen ska fortfarande synas utan att rulla */
@media (max-width: 360px) {
  .hjalte-bild { height: 110px; min-height: 0; }
  .hjalte h1 { font-size: 40px; }
  .hjalte .ingress { font-size: 16px; }
}

/* Produktionsvyn */
.prod-lada { border: 0; padding: 0; width: min(1040px, 94vw); max-height: 92vh; border-radius: 6px; background: var(--sida); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.prod-lada::backdrop { background: rgba(var(--natt-rgb), .82); }
.prod-lada-stang { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--kant); background: var(--sida); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.prod-lada-inre { display: grid; grid-template-columns: 5fr 7fr; gap: 36px; padding: 36px; }
.prod-lada-affisch img { width: 100%; height: auto; border-radius: var(--radie); box-shadow: 0 10px 30px rgba(var(--text-rgb), .18); }
.prod-lada-text h2 { font-family: var(--skylt); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; font-size: 48px; line-height: 1; margin: 4px 0 12px; }
.prod-lada-text h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: var(--spar); text-transform: uppercase; color: var(--text-2); margin: 24px 0 8px; }
.prod-lada-fakta { font-weight: 600; color: var(--text-2); }
.prod-lada-not { font-style: italic; color: var(--text-2); }
.prod-lada-brod { line-height: 1.55; }
.prod-lada-akter { list-style: none; margin: 0; padding: 0; }
.prod-lada-akter li { padding: 10px 0; border-top: 1px solid var(--linje); }
.prod-lada-akter li:last-child { border-bottom: 1px solid var(--linje); }
.prod-lada-akter span { color: var(--text-2); }
.prod-lada-bilder { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prod-lada-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--yta); }
.prod-lada-bilder .galleri-bild { aspect-ratio: 4 / 3; }
.prod-lada-film { margin-top: 24px; max-width: 420px; }
.prod-lada .saknas { display: inline-block; margin-top: 20px; padding: 2px 6px; }
/* Bokningsrutan, i dag bara hos Jag faller */
.prod-bokning { margin: 8px 0 8px; padding: 20px; background: var(--hav-tonad); border-radius: var(--radie); }
.prod-bokning h3 { margin-top: 0; }
.prod-bokning-fakta { margin: 0 0 12px; padding-left: 20px; }
.prod-bokning-fakta li { padding: 2px 0; }
.prod-bokning .saknas { display: block; margin: 0 0 16px; }
@media (max-width: 760px) {
  .prod-lada { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .prod-lada-inre { grid-template-columns: 1fr; gap: 20px; padding: 20px var(--marg) 32px; }
  .prod-lada-affisch { max-width: 220px; }
  .prod-lada-text h2 { font-size: 32px; }
}

/* Klipp: en remsa som bläddras i sidled. Varje klipp behåller sitt eget format.
   Utfyllnaden runt remsan ger fokusringen plats (WCAG 2.4.7). */
.klipp-rubrik { margin: 56px 0 16px; }
.klipp-remsa { --hojd: 300px; list-style: none; margin: 0 0 12px; padding: 8px 8px 12px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.klipp-remsa li { flex: none; scroll-snap-align: start; }
.klipp { margin: 0; width: calc(var(--hojd, 300px) * var(--kvot, 1)); min-width: 200px; }
.klipp video { width: 100%; height: auto; aspect-ratio: var(--kvot, 1); background: var(--natt); border-radius: var(--radie); display: block; }
.klipp figcaption { font-size: 14px; color: var(--text-2); margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.klipp-titel { font-weight: 600; color: var(--text); }
.klipp-besk { line-height: 1.4; }
.prod-lada .klipp { --hojd: 320px; max-width: 100%; }
@media (max-width: 600px) { .klipp-remsa { --hojd: 230px; gap: 10px; } .prod-lada .klipp { --hojd: 260px; } }

/* Pressen */
.pressen { max-width: 760px; margin-left: auto; margin-right: auto; }
.pressen.sektion { max-width: var(--bredd); }
.press-lista { max-width: 760px; }
.press-lista, .prod-lada-press { list-style: none; margin: 0; padding: 0; }
.press-lista li, .prod-lada-press li { padding: 12px 0; border-top: 1px solid var(--linje); color: var(--text-2); }
.press-lista li:last-child, .prod-lada-press li:last-child { border-bottom: 1px solid var(--linje); }
.press-lista strong, .prod-lada-press strong { color: var(--text); }
.press-datum { color: var(--text-3); }
.prod-lada-citat { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--hav); font-size: 20px; font-style: italic; color: var(--text); }
.prod-lada-med { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: 14px; color: var(--text-2); }
.prod-lada-med li { padding: 3px 0; break-inside: avoid; }
@media (max-width: 600px) { .prod-lada-med { columns: 1; } }

/* Galleriet med filter. Knapparna bryter rad, även på mobil (WCAG 1.4.10). */
.galleri-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filterknapp { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kant); background: var(--sida); color: var(--text); font: 500 14px var(--sans); cursor: pointer; }
.filterknapp:hover { border-color: var(--hav); color: var(--hav); }
.filterknapp[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.galleri-fler { margin-top: 16px; }
.galleri-not { margin-top: 12px; }

/* Arkivet */
.arkiv-intro h1 { font-size: 48px; margin-bottom: 12px; }
.hopp { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hopp a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--kant); border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500; }
.hopp a:hover { border-color: var(--hav); color: var(--hav); }
.personer .medlem-text > p:not(.medlem-roll):not(.smatt) { font-size: 16px; }

/* Följ oss: i Kontakt och i sidfoten, på båda sidorna (Andreas 2026-11-10: folk ska stanna på sajten,
   men alla kanaler ska finnas med en uppmaning att följa) */
.folj-rubrik { margin: 32px 0 8px; }
.folj-text { color: var(--text-2); margin: 0 0 4px; }
.fot .fot-folj { margin-top: 12px; }