/* ---------- Selvhostede fonter ----------
   Lastes lokalt, IKKE fra fonts.gstatic.com. Å hente dem fra Google sender
   besøkendes IP-adresse til USA uten rettslig grunnlag (GDPR art. 6 / kap. V) —
   se JURIDISK-TODO.md. Variable fonter (wght 100–900), så vektene 350 og 640
   i designet fungerer akkurat som før.
   Oppdatering: last ned på nytt fra Google og legg filene i assets/fonts/. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TYNSET KINO & KULTURHUS — designsystem
   Mørk kinosal + varmt marquee-gull. Mobil først.
   ============================================================ */

:root {
  --ink:        #0b0d10;
  --ink-2:      #12151b;
  --ink-3:      #1a1f28;
  --line:       rgba(244, 239, 231, 0.10);
  --line-2:     rgba(244, 239, 231, 0.18);
  --paper:      #f4efe7;
  --paper-dim:  rgba(244, 239, 231, 0.64);
  --paper-faint:rgba(244, 239, 231, 0.50);   /* WCAG 1.4.3: 0.42 ga 3.66:1 på --ink-3 */
  --amber:      #f0b43c;
  --amber-soft: rgba(240, 180, 60, 0.14);
  --amber-deep: #8a5c05;   /* WCAG 1.4.3: #c98a1b ga 2.57:1 på --paper */
  --rambu:      #6cd4b6;   /* Rambu: kald kontrast til amber — 10:1 på --ink-2 */
  --rambu-soft: rgba(108, 212, 182, 0.10);
  --max:        1180px;
  --r:          16px;
  --r-sm:       10px;
  --shadow:     0 18px 50px rgba(0, 0, 0, 0.55);
  --ease:       cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* ---------- kicker / section headers ---------- */
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.sec { padding: 56px 0 12px; }
@media (min-width: 720px) { .sec { padding: 84px 0 18px; } }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 26px;
}
.sec-head h2 { font-size: clamp(28px, 4.6vw, 44px); }
.sec-head .more {
  font-size: 14px; font-weight: 500; color: var(--paper-dim);
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
  white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sec-head .more:hover { color: var(--amber); border-color: var(--amber); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 13, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px 12px; min-height: 64px; padding-top: 6px; padding-bottom: 6px;
}
/* Får ikke logo og meny plass på én rad, legger menyen seg på egen rad under
   logoen i stedet for å skyve sida ut i horisontal rulling. Gjelder der hele
   menyen vises (fra 720 px; trangt fram til ~930 px) og på de smaleste
   telefonene. Mellom 360 og 719 px holdes ÉN rad — der bryter ordmerket i stedet
   (se @media under); med flex-wrap her ville menyen falt ned FØR ordmerket fikk
   krympe. Før var høyden låst til 64 px (Codex-review 07.09.2026). */
@media (min-width: 720px), (max-width: 359px) { .topbar-in { flex-wrap: wrap; } }
.topbar-in .nav { margin-left: auto; }
.logo { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.logo-mark { height: 40px; width: auto; display: block; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo .l1 {
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: 3px;
}
.logo .l2 {
  font-family: "Fraunces", serif; font-weight: 700; font-size: 19px;
  letter-spacing: 0.01em; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--paper-dim);
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--paper); background: var(--ink-3); }
.nav a.active { color: var(--paper); }
.nav .nav-cta {
  color: var(--ink); background: var(--amber); font-weight: 600;
  margin-left: 6px;
}
.nav .nav-cta:hover { background: #ffca5f; color: var(--ink); }
/* Språkvelger (English / Norsk): ghost-pille så den leses som en bryter, ikke
   som et menypunkt. Har klassen «keep» og står derfor også på mobil. */
.nav .lang { border: 1px solid var(--line-2); padding: 7px 12px; }
.nav .lang:hover { border-color: var(--paper-dim); }
@media (max-width: 719px) {
  .nav a:not(.nav-cta):not(.keep) { display: none; }
  .nav .nav-cta { padding: 8px 14px; font-size: 13px; }
  .nav .lang { padding: 7px 11px; font-size: 13px; }
  .logo { gap: 9px; }
  .logo-mark { height: 34px; width: auto; }
  /* Målt på 390 px: logo 258 + gap 12 + «Billetter» 80 = 350 — linja var full
     før språkvelgeren kom. Ordmerket får bryte til to linjer («Internasjonale /
     Filmfestival») heller enn å krympe; på brede telefoner står det fortsatt
     på én linje fordi flex bare krymper det når det må. */
  .logo .l2 { font-size: 16px; white-space: normal; line-height: 1.05; }
}
/* 360–374 px (eldre Samsung m.fl.): 4 px for lite på én rad med 16 px ordmerke. */
@media (max-width: 374px) {
  .logo .l2 { font-size: 15px; }
  .nav .lang { padding: 7px 9px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber); color: var(--ink);
  font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; border: 0;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { background: #ffca5f; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(240,180,60,.25); }
.btn-ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--ink-3); box-shadow: none; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 92svh;
  display: flex; align-items: flex-end;
}
.hero-bg, .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.18) 34%, rgba(11,13,16,.86) 74%, var(--ink) 100%),
    linear-gradient(78deg, rgba(11,13,16,.82) 0%, rgba(11,13,16,.25) 55%, rgba(11,13,16,.05) 100%);
}
.hero-in {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: 56px; padding-top: 140px;
  display: grid; gap: 36px;
}
@media (min-width: 980px) {
  .hero-in { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 48px; }
}
.hero .kicker { margin-bottom: 14px; }
.hero h1, .hero .hero-title {
  font-size: clamp(40px, 7.4vw, 84px);
  font-weight: 640;
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin-bottom: 26px; color: var(--paper-dim); font-size: 15px;
}
.hero-meta .dot { opacity: .45; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* tonight-panel */
.tonight {
  background: rgba(18, 21, 27, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 22px 22px 12px;
  box-shadow: var(--shadow);
}
.tonight h2 {
  font-size: 13px; font-family: "Outfit", sans-serif; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 6px;
}
.tonight .t-date { font-size: 13.5px; color: var(--paper-faint); margin-bottom: 14px; }
.t-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.t-row .t-time {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 20px;
  color: var(--amber); min-width: 64px;
}
.t-row .t-info { flex: 1; min-width: 0; }
.t-row .t-title {
  font-weight: 500; font-size: 15.5px; overflow-wrap: anywhere;   /* nowrap+ellipsis brøt 1.4.12 */
}
.t-row .t-hall { font-size: 12.5px; color: var(--paper-faint); letter-spacing: .06em; text-transform: uppercase; }
.t-row .btn-sm { flex-shrink: 0; }
.t-empty { padding: 16px 0 20px; color: var(--paper-dim); font-size: 15px; border-top: 1px solid var(--line); }

/* ---------- poster rail (kino) ---------- */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 200px);
  gap: 16px; overflow-x: auto; padding: 6px 20px 26px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .rail { grid-auto-columns: minmax(200px, 236px); gap: 20px; padding: 6px 32px 30px; }
}
.rail-wrap { max-width: calc(var(--max) + 0px); margin: 0 auto; }
.pcard { scroll-snap-align: start; position: relative; }
.pcard .pframe {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-sm); background: var(--ink-3);
  border: 1px solid var(--line);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover .pframe {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(240, 180, 60, 0.55);
}
.pcard .pframe img { width: 100%; height: 100%; object-fit: cover; }
.pcard .badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--amber); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.pcard .p-title { margin-top: 12px; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.pcard .p-sub { font-size: 13px; color: var(--paper-faint); margin-top: 3px; }

/* ---------- event cards (scene & kultur) ---------- */
.grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }

.ecard {
  display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ecard:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--line-2);
}
.ecard .eframe { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.ecard .eframe img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ecard:hover .eframe img { transform: scale(1.04); }
.ecard .ekind {
  position: absolute; top: 12px; left: 12px;
  background: rgba(11,13,16,.72); color: var(--paper);
  backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-2);
}
.ecard .ebody { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 18px; }
.ecard h3 { font-size: 21px; margin-bottom: 8px; }
.ecard .edate { font-size: 14px; color: var(--amber); font-weight: 500; }
.ecard .ehall { font-size: 13px; color: var(--paper-faint); margin-top: 2px; letter-spacing: .04em; }
.ecard .eactions { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }

/* ---------- program page ---------- */
.page-head { padding: 64px 0 8px; }
.page-head h1 { font-size: clamp(36px, 6vw, 64px); margin: 10px 0 14px; }
.page-head p { color: var(--paper-dim); max-width: 56ch; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 8px; position: sticky; top: 64px; z-index: 40; background: linear-gradient(180deg, var(--ink) 78%, transparent); }
.chip {
  border: 1px solid rgba(244, 239, 231, .36); background: transparent; color: var(--paper-dim);
  font-size: 13.5px; font-weight: 500; padding: 8px 16px; border-radius: 999px;
  transition: all .2s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--paper-faint); }
.chip.on { background: var(--amber); border-color: var(--amber); color: var(--ink); font-weight: 600; }

.month-h {
  line-height: 1.2;
  font-family: "Fraunces", serif; font-size: 22px; font-weight: 600;
  color: var(--paper); margin: 38px 0 16px;
  display: flex; align-items: center; gap: 14px;
}
.month-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- detail page ---------- */
.detail-hero { position: relative; overflow: hidden; padding: 120px 0 48px; }
.detail-bg {
  position: absolute; inset: -40px;
  background-size: cover; background-position: center 20%;
  filter: blur(42px) saturate(1.1) brightness(.42);
  transform: scale(1.15);
}
.detail-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,16,.25), var(--ink) 96%); }
.detail-grid {
  position: relative; z-index: 2;
  display: grid; gap: 32px; align-items: end;
}
@media (min-width: 880px) { .detail-grid { grid-template-columns: 300px 1fr; gap: 48px; } }
.detail-poster {
  width: 200px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
@media (min-width: 880px) { .detail-poster { width: 100%; } }
.detail-info .kicker { margin-bottom: 12px; }
.detail-info h1 { font-size: clamp(34px, 5.6vw, 62px); margin-bottom: 16px; text-wrap: balance; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mchip {
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 12px; color: var(--paper-dim);
}
.mchip.hl { background: var(--amber-soft); border-color: rgba(240,180,60,.4); color: var(--amber); }

.detail-body { display: grid; gap: 40px; padding: 44px 0 20px; }
@media (min-width: 880px) { .detail-body { grid-template-columns: 1.4fr 1fr; gap: 64px; } }
.prose p { margin-bottom: 1.1em; color: rgba(244,239,231,.84); font-size: 16.5px; max-width: 64ch; }
.prose .credits { font-size: 14px; color: var(--paper-faint); }

.showings { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px 10px; align-self: start; }
.showings h2 { font-size: 22px; margin-bottom: 6px; }
.showings .s-note { font-size: 13px; color: var(--paper-faint); margin-bottom: 14px; }
.s-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.s-row .s-date { flex: 1; min-width: 0; }
.s-row .s-day { font-weight: 500; font-size: 15px; }
.s-row .s-day .past { color: var(--paper-faint); }
.s-row .s-hall { font-size: 12.5px; color: var(--paper-faint); text-transform: uppercase; letter-spacing: .06em; }
.s-row .s-time { font-family: "Fraunces", serif; font-size: 19px; font-weight: 600; color: var(--amber); }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--paper-dim); font-size: 14px; font-weight: 500;
  margin-bottom: 8px; transition: color .2s;
}
.back-link:hover { color: var(--amber); }

/* ---------- praktisk info (cream band) ---------- */
.info-band { background: var(--paper); color: var(--ink); margin-top: 90px; }
.info-in { padding: 72px 0 64px; }
.info-band .kicker { color: var(--amber-deep); }
.info-band h2 { font-size: clamp(30px, 4.6vw, 46px); margin: 10px 0 36px; }
.info-grid { display: grid; gap: 34px; }
@media (min-width: 880px) { .info-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.info-grid h3 { font-size: 19px; margin-bottom: 10px; }
.info-grid p, .info-grid a { font-size: 15px; color: rgba(11,13,16,.72); line-height: 1.65; }
.info-grid a { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--amber); }
.info-grid .big-tel {
  display: inline-block; font-family: "Fraunces", serif; font-size: 26px; font-weight: 600;
  color: var(--ink); border: 0; margin: 4px 0 8px;
}

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0 60px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.foot-in .f-brand { font-family: "Fraunces", serif; font-weight: 700; font-size: 17px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-in a { font-size: 13.5px; color: var(--paper-faint); transition: color .2s; }
.foot-in a:hover { color: var(--amber); }
.f-proto { width: 100%; font-size: 12px; color: var(--paper-faint); margin-top: 10px; }

/* ---------- små detaljer ---------- */
::selection { background: var(--amber); color: var(--ink); }
.fade-in { animation: fadeUp .7s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FORSIDE — roterende hero (kino ↔ kultur)
   ============================================================ */
.hero-bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 22%;
  opacity: 0; transition: opacity 1s var(--ease);
}
.hero-bg-layer.on { opacity: 1; }
.hero-copies { position: relative; display: grid; padding-top: 22px; min-height: clamp(250px, 34vh, 350px); }   /* grid = innholdsstyrt høyde, ellers klippes teksten på 320px */
.hero-copy {
  grid-area: 1 / 1; align-self: end;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-copy.on { opacity: 1; transform: none; pointer-events: auto; }
.hero-dots { position: absolute; top: 0; left: 0; display: flex; gap: 8px; z-index: 3; }
.hdot {
  /* 4px-pille, men 28px treffflate via padding + background-clip (WCAG 2.5.8) */
  width: 26px; height: 4px; border-radius: 99px; border: 0;
  padding: 12px 0; background-clip: content-box;
  background: rgba(244, 239, 231, .55); cursor: pointer;   /* .26 ga 2.12:1, under 3:1 */
  box-shadow: inset 0 0 0 1px rgba(11, 13, 16, .55);
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hdot:hover { background: rgba(244, 239, 231, .8); }
.hdot:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
/* pauseknapp for automatisk bildeskift (WCAG 2.2.2) */
.hdot-pause {
  /* egen klasse med vilje: .hdot ville fanget den i rotator-lista og gjort den til en slide-knapp */
  border: 0; cursor: pointer; align-self: center;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(244, 239, 231, .55);
  color: var(--ink); font-size: 9px; line-height: 1.4; font-weight: 700;
  transition: background .2s var(--ease);
}
.hdot-pause:hover { background: var(--paper); }
.hdot-pause:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.hdot.on { background: var(--amber); width: 40px; }

/* ============================================================
   FORSIDE — intro + split-dører (Kino / Kulturhus)
   ============================================================ */
.intro-in { padding: 64px 0 26px; }
@media (min-width: 760px) { .intro-in { padding: 92px 0 34px; } }
.intro .kicker { margin-bottom: 14px; }
.intro h1 { font-size: clamp(34px, 6.6vw, 66px); text-wrap: balance; margin-bottom: 14px; }
.intro p { color: var(--paper-dim); font-size: clamp(16px, 2.2vw, 19px); max-width: 46ch; }

.doors { display: grid; gap: 14px; max-width: var(--max); margin: 0 auto; padding: 6px 20px 0; }
@media (min-width: 760px) { .doors { grid-template-columns: 1fr 1fr; gap: 20px; padding: 6px 32px 0; } }
.door {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line);
  min-height: 360px; display: flex; align-items: flex-end;
}
@media (min-width: 760px) { .door { min-height: clamp(420px, 40vw, 520px); } }
.door::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--door-bg); background-size: cover; background-position: center 16%;
  transform: scale(1.04); transition: transform .7s var(--ease);
}
.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,13,16,.12) 0%, rgba(11,13,16,.5) 44%, rgba(11,13,16,.95) 100%);
}
.door-kino::after  { background: linear-gradient(180deg, rgba(9,12,20,.1) 0%, rgba(9,12,20,.52) 46%, rgba(8,10,16,.96) 100%); }
.door-kultur::after{ background: linear-gradient(180deg, rgba(26,12,22,.12) 0%, rgba(24,11,22,.52) 46%, rgba(12,8,12,.96) 100%); }
.door:hover::before { transform: scale(1.1); }
.door-in { position: relative; z-index: 1; padding: 28px 26px 30px; }
.door-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
  background: var(--amber-soft); border: 1px solid rgba(240,180,60,.3); color: var(--amber);
}
.door-ico svg { width: 24px; height: 24px; }
.door .kicker { margin-bottom: 8px; }
.door h2 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 10px; }
.door p { color: var(--paper-dim); font-size: 15px; max-width: 34ch; }
.door-next {
  display: flex; flex-direction: column; margin-top: 16px; padding: 10px 14px;
  background: rgba(11,13,16,.5); border: 1px solid var(--line-2); border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.door-next strong { font-weight: 600; font-size: 15px; }
.door-next span { font-size: 12.5px; color: var(--amber); margin-top: 2px; }
.door-go {
  display: inline-block; margin-top: 18px; font-weight: 600; font-size: 15px;
  color: var(--amber); transition: gap .2s, transform .2s var(--ease);
}
.door:hover .door-go { transform: translateX(4px); }

.sec-tonight { padding: 40px 0 8px; }
@media (min-width: 760px) { .sec-tonight { padding: 56px 0 8px; } .sec-tonight .tonight { max-width: 560px; } }

.more-static { font-size: 13px; color: var(--paper-faint); white-space: nowrap; }

/* ============================================================
   TRAILER-AFFORDANSER — play-badge på plakat, play-knapp
   ============================================================ */
.pcard .pframe { appearance: none; width: 100%; display: block; text-align: left; cursor: pointer; padding: 0; }
.pcard .pframe.js-trailer:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.92);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(11,13,16,.55); border: 1.5px solid rgba(244,239,231,.85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: var(--paper);
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.play-badge svg { width: 24px; height: 24px; margin-left: 2px; }
.pcard:hover .play-badge, .dp-frame:hover .play-badge {
  transform: translate(-50%, -50%) scale(1); background: var(--amber); color: var(--ink); border-color: var(--amber);
}
.play-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: rgba(11,13,16,.78); padding: 3px 10px; border-radius: 999px;   /* scrim 0.5 ga 3.19:1 over lyse plakater */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.btn-play { gap: 9px; }
.btn-play svg { width: 17px; height: 17px; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.linklike:hover { color: var(--amber); }
.detail-ctas { margin-top: 20px; }
.dp-frame {
  appearance: none; border: 0; padding: 0; margin: 0; width: 100%; display: block; position: relative;
  cursor: pointer; background: var(--ink-3); border-radius: var(--r-sm); overflow: hidden;
}
.dp-frame img { width: 100%; }
.dp-frame:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ============================================================
   9:16 TRAILER-FEED (fullskjerm)
   ============================================================ */
body.tr-open { overflow: hidden; }
.trailer-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 6, 8, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.trailer-overlay.on { display: flex; animation: fadeOverlay .25s var(--ease) both; }
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.tr-stage {
  position: relative; overflow: hidden; background: #000;
  width: min(100vw, calc(94svh * 9 / 16)); height: 94svh; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
@media (max-width: 600px) { .tr-stage { width: 100vw; height: 100svh; border-radius: 0; } }

.tr-bg {
  position: absolute; inset: -12%; background-size: cover; background-position: center;
  filter: blur(34px) brightness(.34) saturate(1.25); transform: scale(1.25);
}
.tr-card {
  position: relative; z-index: 2; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}
.tr-video {
  width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.6); border: 1px solid rgba(244,239,231,.12);
}
.tr-video iframe, .tr-video video { width: 100%; height: 100%; display: block; border: 0; background: #000; object-fit: contain; }
.tr-meta { text-align: center; }
.tr-kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.tr-title { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(24px, 6vw, 34px); line-height: 1.08; margin-bottom: 16px; text-wrap: balance; }
.tr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.tr-close {
  position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 12px); right: 14px;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(11,13,16,.6); color: var(--paper); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tr-close:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.tr-nav {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(11,13,16,.4); color: var(--paper); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, opacity .2s;
}
.tr-nav:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.tr-prev { left: 14px; }
.tr-next { right: 14px; }
@media (max-width: 600px) { .tr-nav { width: 40px; height: 40px; background: rgba(11,13,16,.25); } }
.tr-progress {
  position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 16px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; max-width: 60vw; flex-wrap: wrap; justify-content: center;
}
.tr-progress span { width: 16px; height: 3px; border-radius: 99px; background: rgba(244,239,231,.42); transition: background .25s, width .25s; }
.tr-progress span.on { width: 26px; background: var(--amber); }

/* ============================================================
   ALVDAL KINO — venue-bryter (skjult som standard)
   ============================================================ */
[data-venue="alvdal"] { display: none; }
body.show-alvdal [data-venue="alvdal"] { display: flex; }
.venue-pill {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber);
  border: 1px solid rgba(240, 180, 60, .42); border-radius: 99px;
  padding: 1px 7px; vertical-align: middle; margin-left: 7px;
}
.venue-pill.sm { font-size: 9px; padding: 0 6px; margin-left: 4px; }

.venue-bar { display: flex; margin-top: 26px; }
.venue-bar-prog { margin: 14px 0 6px; }
.venue-switch {
  display: inline-flex; align-items: center; gap: 13px; cursor: pointer; user-select: none;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px 9px 13px;
  transition: border-color .2s var(--ease);
}
.venue-switch:hover { border-color: var(--line-2); }
.venue-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-track {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--line-2); transition: background .22s var(--ease), border-color .22s var(--ease);
}
.vs-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper-dim); transition: transform .22s var(--ease), background .22s var(--ease);
}
.venue-switch input:checked + .vs-track { background: var(--amber); border-color: var(--amber); }
.venue-switch input:checked + .vs-track .vs-thumb { transform: translateX(18px); background: var(--ink); }
.venue-switch input:focus-visible + .vs-track { outline: 2px solid var(--amber); outline-offset: 2px; }
.vs-text { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.2; }
.vs-text .vs-ico { display: flex; color: var(--amber); flex: none; }
.vs-text .vs-ico svg { width: 19px; height: 19px; }
.vs-text strong { font-weight: 600; }
.vs-text .vs-sub { display: block; font-size: 12px; color: var(--paper-faint); margin-top: 1px; }
.venue-switch.vs-compact { margin: 6px 0 16px; padding: 8px 16px 8px 12px; }

/* ============================================================
   MOBIL — bunnmeny
   ============================================================ */
.bottomnav { display: none; }
@media (max-width: 719px) {
  .bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(11, 13, 16, .92); border-top: 1px solid var(--line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 8px; color: var(--paper-faint);
    font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  }
  .bn-item svg { width: 22px; height: 22px; }
  .bn-item.on { color: var(--amber); }
  body { padding-bottom: 60px; }
  .info-band { margin-top: 64px; }
}

/* ============================================================
   TILLEGG (v2-motor, v1-design): statusmerker + versjonsnotat
   ============================================================ */
.t-row .badge, .s-row .badge, .prow .badge { position: static; flex-shrink: 0; }
.badge-hot { background: #b8402a; color: var(--paper); }   /* 4.82:1, var 4.17:1 */
.badge-mute { background: var(--ink-3); color: var(--paper-dim); border: 1px solid var(--line-2); }
.t-empty a { color: var(--amber); }
.varnote {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--paper-dim); border: 1px solid var(--line-2); border-radius: 99px;
  padding: 1px 7px; margin-left: 7px; vertical-align: middle; text-transform: none;
}
.pframe-fallback, .eframe-fallback {
  display: flex; align-items: flex-end; width: 100%; height: 100%;
  padding: 14px; font-family: "Fraunces", serif; font-weight: 600; font-size: 19px;
  line-height: 1.1; color: var(--paper-dim);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
@media (min-width: 880px) { .detail-grid.no-poster { grid-template-columns: 1fr; } }

/* ---------- Serier og festivaler (tagg-styrte inngangar) ---------- */
.strand-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .strand-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .strand-grid { grid-template-columns: repeat(3, 1fr); } }

.strand {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 46px 20px 20px; position: relative;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 14px; text-decoration: none; color: var(--paper);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.strand:hover, .strand:focus-visible {
  border-color: var(--amber); background: var(--ink-3); transform: translateY(-2px);
}
.strand::after {
  content: "→"; position: absolute; top: 20px; right: 20px;
  color: var(--paper-faint); font-size: 17px;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.strand:hover::after, .strand:focus-visible::after { color: var(--amber); transform: translateX(3px); }

.strand-navn { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.2; }
.strand-tekst { font-size: 14px; color: var(--paper-dim); line-height: 1.45; }
.strand-meta {
  margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--amber);
}

/* ---------- personvernside + bunntekst-impressum ---------- */
.prose h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 21px; line-height: 1.25;
  margin: 1.9em 0 .55em;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.1em; padding-left: 1.25em; max-width: 64ch; }
.prose li { margin-bottom: .45em; color: rgba(244, 239, 231, .84); font-size: 16.5px; }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #ffca5f; }
.prose strong { color: var(--paper); font-weight: 600; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--ink-3); padding: .1em .35em; border-radius: 3px;
}
.prose .s-note {
  border-left: 3px solid var(--amber); background: var(--amber-soft);
  padding: 12px 16px; margin: 0 0 1.4em; border-radius: 0 6px 6px 0;
  max-width: 64ch; font-size: 15px;
}

.foot-legal {
  width: 100%; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-size: 13px; color: var(--paper-dim); margin-top: 4px;
}
.foot-legal .dot { color: var(--paper-faint); }

/* ---------- Hopp til innhold (WCAG 2.4.1) ---------- */
.skip { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip:focus {
  left: 20px; top: 12px; width: auto; height: auto; z-index: 300;
  padding: 10px 18px; border-radius: 999px;
  background: var(--amber); color: var(--ink); font-weight: 600; font-size: 14px;
}

/* ---------- Filmfestival ---------- */
.fest-hero {
  padding: 96px 0 54px;
  /* Festivalgrafikken ligg bakarst, med eit mørkt slør over. Sløret er ikkje
     pynt: grafikken er lys, og krem tekst rett på kvitt ville vore uleseleg.
     0.80–0.90 gjev >5.8:1 for amber og >9:1 for krem sjølv der grafikken er
     heilkvit, altså AA i verste tilfelle — ikkje berre der biletet er mørkt.
     Rekkjefølgja gjer at ei manglande hero.jpg ikkje bryt noko: gradientane
     teiknar seg uansett, og seksjonen ser ut nøyaktig som før. */
  background-image:
    linear-gradient(180deg, rgba(240,180,60,.10), transparent 70%),
    linear-gradient(180deg, rgba(11,13,16,.80), rgba(11,13,16,.90) 62%, var(--ink) 100%);
    /* HERO-BILETET: legg festivalgrafikken i assets/hero.jpg og bytt dei tre
       linjene over/under med desse fire. Sløret er allereie målt mot heilkvitt.
         linear-gradient(180deg, rgba(11,13,16,.80), rgba(11,13,16,.90) 62%, var(--ink) 100%),
         url('hero.jpg');
       background-size: auto, auto, cover;
       background-position: center, center, center;
       Held fram utkommentert fordi ein url() som ikkje finst gjev 404 i konsollen
       på kvar sidevisning — og sida ser nøyaktig lik ut med eller utan. */
  background-size: auto, auto;
  background-position: center, center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.fest-hero h1 {
  font-size: clamp(34px, 6.2vw, 68px); font-weight: 640;
  margin: 8px 0 10px; text-wrap: balance; max-width: 16ch;
}
.fest-datoer {
  font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 18px;
}
.fest-ingress { max-width: 56ch; font-size: 17px; color: var(--paper-dim); margin-bottom: 26px; }

/* annonserte punkter (før DX er tagget) */
.fest-liste { display: flex; flex-direction: column; gap: 16px; }
.fest-item {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 22px; background: var(--ink-2);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 12px;
}
@media (min-width: 720px) { .fest-item { grid-template-columns: 210px 1fr; gap: 26px; } }
.fest-nar { display: flex; flex-direction: column; gap: 3px; }
.fest-dag-navn { font-weight: 600; font-size: 15.5px; }
.fest-tid { font-family: "Fraunces", serif; font-size: 19px; color: var(--amber); }
.fest-om h3 { font-family: "Fraunces", serif; font-size: 23px; font-weight: 700; margin: 3px 0 8px; }
.fest-om p { color: var(--paper-dim); font-size: 15.5px; max-width: 58ch; margin-bottom: 8px; }
.fest-sted { font-size: 13px; color: var(--paper-faint); letter-spacing: .06em; text-transform: uppercase; }

/* Hovedprogram — eitt kort per festivaldag (index.html #hovedprogram).
   Gjenbruker .fest-item-oppsettet frå juni-teaseren; venstre kolonne får
   stillbiletet øvst. Bileta er 960 px breie og visast maks ~300 px, altså
   ~3x for retina utan å dra 1200-versjonane frå annonsemappa. */
.hoved { display: flex; flex-direction: column; gap: 18px; }
.hoved .fest-item { gap: 16px; }
.hoved-bilde {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line-2); background: var(--ink-3);
  margin-bottom: 8px;
}
.hoved .fest-om h3 { font-size: 26px; }
.hoved .fest-om > .fest-sted { margin-bottom: 12px; }
.hoved .fest-om p { max-width: 62ch; line-height: 1.55; }
.hoved .fest-om h4 {
  font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600;
  margin: 14px 0 6px;
}
.hoved-kl { color: var(--amber); margin-right: 6px; }
.hoved .fest-om ul { list-style: none; margin: 0 0 10px; color: var(--paper-dim); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.hoved .fest-om li { position: relative; padding-left: 14px; }
.hoved .fest-om li::before { content: "·"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.hoved-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Arrangørlogo i kortet (Sjakk i Smea). SVG-en er lys utgave av klubbens svarte logo. */
.hoved-logo { display: block; height: 40px; width: auto; margin-top: 18px; opacity: .85; }
@media (min-width: 720px) { .hoved .fest-item { grid-template-columns: 250px 1fr; gap: 28px; } }
@media (min-width: 980px) { .hoved .fest-item { grid-template-columns: 300px 1fr; gap: 36px; } }

/* ekte program frå DX */
.fest-program { display: flex; flex-direction: column; gap: 30px; }
.fest-dag h3 {
  font-family: "Fraunces", serif; font-size: 21px; font-weight: 600;
  color: var(--amber); margin-bottom: 10px;
}
.fest-mer { margin-top: 24px; color: var(--paper-dim); font-size: 15px; max-width: 60ch; }
.fest-mer a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

/* spillesteder */
.sted-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sted-grid { grid-template-columns: repeat(3, 1fr); } }
.sted {
  display: flex; flex-direction: column; gap: 5px; padding: 20px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
}
.sted-navn { font-family: "Fraunces", serif; font-size: 20px; font-weight: 700; }
.sted-hvor { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.sted-om { font-size: 14.5px; color: var(--paper-dim); line-height: 1.45; }

/* Rambu — lørdagen skjer et annet sted enn resten av festivalen. Alt som hører
   til Rambu får sin egen farge (kort, dagblokk, rader, spillested) så det leses
   på avstand. Klassen «rambu» settes av oppdater-program.py på dag og rader,
   og for hånd på hovedprogram-kortet og spillested-kortet i index.html. */
.rambu .fest-tid, .rambu .fest-sted, .rambu .hoved-kl, .rambu .s-time, .rambu .s-hall,
.rambu .sted-hvor, .fest-dag.rambu h3, .rambu .fest-om li::before { color: var(--rambu); }
.fest-item.rambu {
  border-left-color: var(--rambu);
  background: linear-gradient(90deg, var(--rambu-soft), transparent 55%), var(--ink-2);
}
.fest-dag.rambu { border-left: 3px solid var(--rambu); padding-left: 16px; }
.sted.rambu { border-color: rgba(108, 212, 182, 0.45); }

/* På festivalsida er FILMEN det primære i rada — ikkje klokkeslettet slik som på
   detaljsida, der same .s-row viser datoar for éin film. */
.fest-dag .s-row .s-day {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18.5px; font-weight: 600; line-height: 1.25;
}
.fest-dag .s-row .s-hall { margin-top: 2px; }
/* Kort beskrivelse under merknaden — BESKRIVELSE i oppdater-program.py. */
.fest-dag .s-row .s-om { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--paper-dim); max-width: 62ch; }
/* Smal skjerm: teksten får hele bredden ved siden av plakaten, og klokkeslett
   + knapper går på egen linje under. Uten dette klemte fire faste elementer
   (plakat, tid, Trailer, Kjøp) tittel, merknad og beskrivelse inn i en stripe
   på ett–to ord per linje. Basis 100 % minus plakat+gap tvinger linjeskiftet
   uansett skjermbredde under 720. */
@media (max-width: 719px) {
  .fest-dag .s-row { flex-wrap: wrap; row-gap: 12px; }
  .fest-dag .s-row .s-date { flex: 1 1 calc(100% - 70px); }
  .fest-dag .s-row .s-time { margin-left: 70px; }
}

/* Filmplakat i programrada. Plakatane kjem frå DX saman med visningane — sjå
   oppdater-program.py. Ramma står att òg når plakaten manglar (kortfilm-
   programmet har ingen), elles hoppar teksten inntil kanten på berre den rada.
   aspect-ratio + object-fit gjer at plakatar som ikkje er nøyaktig 2:3 likevel
   stiller seg på same linje i staden for å gjere rada høgare enn naboen. */
.s-plakat {
  flex-shrink: 0; display: block;
  width: 56px; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--ink-2);
}
@media (min-width: 720px) { .s-plakat { width: 70px; border-radius: 8px; } }


/* --- Trailere (lagt til for filmfestivalen 2026) ---------------------------
   Denne blokka står IKKE i kino-prototypen. Kopierer du style.css derfra på
   nytt, forsvinner den — legg den inn igjen. Se README. */
.s-row .s-trailer { flex-shrink: 0; }
.trailer-dlg {
  border: 0;
  padding: 0;
  max-width: min(880px, 92vw);
  width: 100%;
  background: var(--ink-2, #151a21);
  color: var(--paper, #f4efe7);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.trailer-dlg::backdrop { background: rgba(8, 9, 11, .82); }
.trailer-topp {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.trailer-topp h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.trailer-lukk {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 239, 231, .10);
  color: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.trailer-lukk:hover { background: rgba(244, 239, 231, .20); }
.trailer-lukk:focus-visible { outline: 2px solid var(--amber, #f0b43c); outline-offset: 2px; }
/* Svart bak videoen: trailere har ulike bildeforhold, og uten dette blinker
   dialogbakgrunnen fram i letterboxen. */
.trailer-dlg video {
  display: block;
  width: 100%;
  max-height: 72vh;
  background: #000;
}
@media (max-width: 560px) {
  .trailer-topp { padding: 11px 13px; }
  .trailer-topp h2 { font-size: 16px; }
}