/* ============================================================
   Kullens Fyr — stilmall
   Enkel, redigerbar CSS. Ändra färger/typsnitt i :root för att byta tema.

   Formspråket följer Figma-filen KULLENS FYR: nästan svart på nästan vitt,
   Helvetica Neue för löptext, Lustria (antikva) för ordmärket och
   startsidans rubrik, små mono-etiketter i versaler, en svart pillerknapp
   för menyn som öppnar en helskärmsmeny och en svart sidfot med stor text.
   Färgen kommer från fotografierna, inte från gränssnittet.

   Ljust och mörkt tema väljs per sida med en klass på <html>, inte av
   besökarens systeminställning:
     class="page-light"  vit bakgrund (startsidan, Om, Fakta, Kullaberg, Hitta hit, Kontakt)
     class="page-dark"   svart bakgrund (Fyrhistorier och fyrhistoriesidorna)
   Alla färger går via variablerna nedan. Ljusa värden står i :root, mörka
   i :root.page-dark. Lägg alltid till en ny färg på båda ställena.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lustria&family=Geist+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  --bg: #f8f8f8;
  --ink: #1e1e1e;
  --ink-soft: #5c5c5c;          /* sekundär text */
  --rule: #d6d6d6;              /* tunna linjer */
  --pill-bg: #e4e4e4;           /* grå pillerknapp */
  --pill-ink: #1e1e1e;
  --solid-bg: #1e1e1e;          /* svart pillerknapp */
  --solid-ink: #f8f8f8;
  --field-bg: #ffffff;
  --corner: rgba(255,255,255,0.85); /* sökarhörn på bilder */
  --footer-bg: #000;
  --footer-ink: #f8f8f8;
  --footer-soft: #9a9a9a;
  --overlay-bg: #1e1e1e;
  --success: #2f6b4f;
  --danger: #a13d2c;

  /* En accent per fyrhistoria — används bara som liten prick i etiketten */
  --accent-mannen: #8c6a4f;
  --accent-prinsessan: #a13d2c;
  --accent-flygolyckan: #5c7a8a;
  --accent-vrakplundring: #37493f;
  --accent-is: #6f97a3;
  --accent-kullamannen: #4a3b63;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Lustria", Georgia, serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  /* bakåtkompatibla alias */
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --radius-pill: 999px;
  --gutter: clamp(1.25rem, 2.5vw, 2rem);
  --max-width: 1280px;
  --text-width: 46rem;
  --text-body: 0.875rem;        /* 14 px: all brödtext */
}

/* Samma mörka färger används för en enskild svart sektion, class="section-dark" */
:root.page-dark,
.section-dark {
  color-scheme: dark;
  --bg: #121212;
  --ink: #ededed;
  --ink-soft: #a3a3a3;
  --rule: #333;
  --pill-bg: #2a2a2a;
  --pill-ink: #ededed;
  --solid-bg: #ededed;
  --solid-ink: #121212;
  --field-bg: #1b1b1b;
  --footer-bg: #000;
  --overlay-bg: #000;
  --success: #6fc59a;
  --danger: #e98a78;

  --accent-mannen: #c49a78;
  --accent-prinsessan: #e07a63;
  --accent-flygolyckan: #8fb0c0;
  --accent-vrakplundring: #7fa58d;
  --accent-is: #9cc4cf;
  --accent-kullamannen: #a593c9;
}

:root.page-light { --bg: #ffffff; }

/* ---------- Grund ---------- */

* { box-sizing: border-box; }

html {
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
}

/* Bara på body: på html skulle rem krympa och dra med sig allt annat */
body { font-size: var(--text-body); }

body { overflow-x: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-soft); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
strong { font-weight: 500; }

/* Mono-etiketter: små versaler med luft, som på above.se */
.meta-row,
.kicker,
.tag,
.pill,
.menu-toggle,
.footer-heading,
.ticker,
table.timeline td.year {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 6.75rem;
  padding: 0.5rem clamp(1rem, 6vw, 5.75rem);
  background: var(--bg); /* ingen backdrop-filter: den skulle låsa helskärmsmenyn inuti headern */
}

/* Ordmärket "KULLENS FYR" till vänster, fyrmärket i mitten */
.site-logo {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.site-logo:hover { color: var(--ink); }
.site-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 4.7vw, 67px);
  height: auto;
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 120;
  /* Formen kommer från .btn (PRIMARY) längre ner; här bara det som är unikt för menyknappen */
  cursor: pointer;
}
.menu-toggle-close { display: none; }

/* Utan JavaScript: en enkel länkrad */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.main-nav a { text-decoration: none; font-weight: 400; }
.main-nav a[aria-current="page"] { text-decoration: underline; }

/* Med JavaScript: pillerknapp och helskärmsmeny */
.has-menu .menu-toggle { display: inline-flex; }

.has-menu .main-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--overlay-bg);
  color: #f8f8f8;
  padding: 5.5rem var(--gutter) 2rem;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.has-menu .main-nav ul { display: block; }

.has-menu .main-nav li { border-top: 1px solid rgba(255,255,255,0.18); }

.has-menu .main-nav a {
  display: block;
  text-align: right;
  color: #f8f8f8;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  padding: 0.1em 0;
  transform: translateY(0.3em);
  transition: color 0.15s ease, transform 0.35s ease;
}
.has-menu .main-nav a:hover { color: #9a9a9a; }
.has-menu .main-nav a[aria-current="page"] { text-decoration: none; color: #9a9a9a; }

.menu-open .main-nav {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.menu-open .main-nav a { transform: none; }
.menu-open { overflow: hidden; }
.menu-open .menu-toggle-open { display: none; }
.menu-open .menu-toggle-close { display: inline; }

/* ---------- Ramar: tunna sökarhörn på bilder ---------- */

.frame {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--pill-bg);
}

.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Sökarhörnen syns inte i Figma-designen. Sätt content: "" för att visa dem igen. */
.frame::after {
  content: none;
  position: absolute;
  inset: 12px;
  pointer-events: none;
  --c: var(--corner);
  --l: 16px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

/* ---------- Hero ---------- */

.page-head {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem var(--gutter) 0;
}

/* Startsidan: bilden går kant i kant och rubriken ligger ovanpå, till höger */
.home-hero {
  position: relative;
  margin-top: 1.4rem;
  aspect-ratio: 1440 / 728;
  overflow: hidden;
  background: #2a2a2a;
}
.home-hero img,
.home-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.home-hero h1 {
  position: absolute;
  left: 59%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 0.6rem + 4.1vw, 4.4rem);
  line-height: 1.18;
  letter-spacing: -0.044em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25);
}

.home-meta {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 0;
}
.home-meta .meta-row { font-size: 0.875rem; padding-bottom: 0.4rem; margin: 0; }

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 1rem;
}

.page-head { padding-top: clamp(2rem, 6vw, 5rem); }
.page-head h1 { max-width: 16ch; padding-bottom: 1.5rem; }
/* Ingress direkt under rubriken, utan sidbild (Fyrhistorier) */
.page-head h1:has(+ .lede) { padding-bottom: 0; }
.page-head .lede { max-width: 708px; margin: 1rem 0 0; padding-bottom: 1.5rem; font-weight: 300; }
.page-head + main { padding-top: 2.5rem; }

.page-image {
  max-width: calc(var(--max-width) - 2 * var(--gutter));
  margin: 0 auto;
  aspect-ratio: 16 / 6;
}
@media (max-width: 1280px) {
  .page-image { margin-inline: var(--gutter); }
}

/* ---------- Layout ---------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 8vw, 7rem);
}

main > section,
main > article { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Löptext hålls till en läsbar bredd, men blocket ligger i ett rutnät
   som på above.se: rubrik till vänster, text till höger på stora skärmar */
main > section > *,
main > article > * { max-width: var(--text-width); }
main > section > .card-grid,
main > section > .section-head,
main > section.intro,
main > section > .wide-image,
main > section.plain-image > img,
main > section > .map { max-width: none; }

.home-meta + main { padding-top: 2rem; }

.lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 477fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.intro > * { min-width: 0; }
.intro-body p { font-size: var(--text-body); line-height: 1.6; margin-bottom: 0.75rem; }
.intro-body .pill { margin-top: 0.75rem; }

/* Text och kvadratisk bild sida vid sida (Om Kullaberg). .feature-reverse lägger bilden till vänster */
main > section.feature {
  display: grid;
  grid-template-columns: minmax(0, 583fr) minmax(0, 520fr);
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
main > section.feature > * { min-width: 0; max-width: none; }
main > section.feature-reverse { grid-template-columns: minmax(0, 520fr) minmax(0, 583fr); }
.feature-reverse .feature-image { order: -1; }
.feature-text h2 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 2.25rem;
}
.feature-text p { font-size: var(--text-body); line-height: 1.5; font-weight: 300; margin-bottom: 2.25rem; }
.feature-image { margin: 0; aspect-ratio: 1; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; }

.statement {
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.62rem);
  line-height: 1.134;
  letter-spacing: -0.0315em;
  font-weight: 400;
  margin: 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}
.section-head h2 { margin: 0; }
.section-head.ruled { border-top: 1px solid var(--rule); padding-top: 1.9rem; }
.section-head .statement { flex: 1 1 20ch; }

/* Svart sektion kant i kant, t.ex. Fyrhistorier på startsidan */
main > section.section-dark {
  max-width: none;
  background: var(--bg);
  color: var(--ink);
  margin-inline: calc(50% - 50vw);
  padding: clamp(2.5rem, 5vw, 4.5rem) calc(50vw - 50%);
}
main > section.section-dark > * { max-width: none; }

/* Centrerad bild med bildtext, t.ex. blyertsteckningen på startsidan */
main > section.centered-figure { max-width: none; padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.centered-figure figure { max-width: 34rem; margin: 0 auto; text-align: center; }
.centered-figure img { width: 75%; margin: 0 auto; mix-blend-mode: multiply; } /* papperstonen smälter in i bakgrunden */
.centered-figure figcaption { margin-top: 1.25rem; font-size: var(--text-body); color: var(--ink-soft); }
.centered-figure .pill { min-width: 201px; margin-top: 1.75rem; }

/* Bild i full innehållsbredd utan ram; vita kanter smälter in i den vita bakgrunden */
.plain-image img { width: 100%; mix-blend-mode: multiply; }

/* Stor bild med bildtext under (startsidan) */
.wide-image { margin: 0; }
.wide-image img { width: 100%; aspect-ratio: 1253 / 675; object-fit: cover; }
.wide-image figcaption {
  max-width: 30rem;
  margin-top: 1.4rem;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-soft);
}

blockquote {
  margin: 2rem 0;
  padding: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
}

/* ---------- Knappar och etiketter ---------- */

/* Knappar enligt Figma-sidan DESIGN SYSTEM: raka hörn, 105 × 31 px som minst.
   PRIMARY (.btn, menyknappen): fylld. SECONDARY (.pill, .btn-secondary): tunn ram. */
.pill,
.btn,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 105px;
  min-height: 31px;
  padding: 0 1.25rem;
  border: 0.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;         /* 11 px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.04px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Menyknappen visas bara med JavaScript (se .has-menu .menu-toggle) */
.menu-toggle { display: none; }

/* PRIMARY */
.btn,
.menu-toggle { background: var(--solid-bg); border-color: var(--solid-bg); color: var(--solid-ink); }
.btn:hover,
.menu-toggle:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* SECONDARY */
.pill,
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.pill:hover,
.btn-secondary:hover { background: var(--solid-bg); border-color: var(--solid-bg); color: var(--solid-ink); }

/* ON BLACK BACKGROUND (Figma DESIGN SYSTEM): tunn vit ram och vit text, gäller alla knappar
   på svarta sidor, i svarta sektioner och på menyknappen när helskärmsmenyn är öppen */
:root.page-dark .btn,
:root.page-dark .pill,
:root.page-dark .btn-secondary,
:root.page-dark .menu-toggle,
.section-dark .btn,
.section-dark .pill,
.menu-open .menu-toggle { background: transparent; border-color: #fff; color: #fff; }
:root.page-dark .btn:hover,
:root.page-dark .pill:hover,
:root.page-dark .btn-secondary:hover,
:root.page-dark .menu-toggle:hover,
.section-dark .btn:hover,
.section-dark .pill:hover,
.menu-open .menu-toggle:hover { background: #fff; border-color: #fff; color: #121212; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.6875rem;
  padding: 0.35rem 0.8rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--ink));
}

.kicker {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* ---------- Kort (fyrhistorier) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 2.5rem clamp(1rem, 2vw, 1.5rem);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--ink);
}
.card:hover { color: var(--ink); }

.card .frame { aspect-ratio: 1 / 1; }
.card .frame img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.card:hover .frame img { transform: scale(1.04); }

.card-body { display: grid; gap: 0.35rem; justify-items: start; }
.card-body h3 { font-size: 1.04rem; line-height: 1.26; }
.card-body p { margin: 0 0 0.5rem; font-size: var(--text-body); line-height: 1.5; color: var(--ink-soft); }

/* Fyra kort i rad på startsidan */
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (max-width: 1000px) { .card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card.disabled { cursor: default; }
.card.disabled .frame img { filter: grayscale(1); opacity: 0.6; }
.card.disabled:hover .frame img { transform: none; }

/* ---------- Artikel ---------- */

article h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  margin-bottom: 1.5rem;
}

article > .frame { max-width: none; aspect-ratio: 16 / 9; margin-bottom: 2rem; }
/* Stående bild som visas hel, i textspaltens bredd */
article > .frame.frame-portrait { max-width: var(--text-width); aspect-ratio: auto; }
article > p + .frame { margin-top: 2rem; }
.frame-portrait img { height: auto; }

.article-hero-img { width: 100%; }
section > .frame { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }

article p:first-of-type strong { font-weight: 400; }

.byline { font-size: var(--text-body); color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ---------- Fakta ---------- */

.fact-box { margin: 2rem 0; border-top: 2px solid var(--rule); }
.fact-box dl { margin: 0; display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; }
.fact-box dt,
.fact-box dd { margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.fact-box dt { font-weight: 500; padding-right: 1rem; }
.fact-box dd { min-width: 0; }

table.timeline { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
table.timeline td { border-top: 1px solid var(--rule); padding: 1rem 0; vertical-align: top; }
table.timeline td.year {
  font-size: 0.8125rem;
  white-space: nowrap;
  width: 6rem;
  padding-top: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.edit-note {
  border: 1px dashed var(--rule);
  padding: 0.8rem 1rem;
  font-size: var(--text-body);
  color: var(--ink-soft);
  margin: 1.5rem 0;
}

/* ---------- Faktaticker (startsidan) ---------- */

.ticker {
  margin: 0 calc(-1 * var(--gutter) / 2) clamp(3rem, 6vw, 4.5rem);
  max-width: none;
  overflow: hidden;
  border-block: 1px solid var(--rule);
  font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem);
  padding: 1.1rem 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}
.ticker-track span { padding: 0 2.5rem; white-space: nowrap; position: relative; }
.ticker-track span::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ink);
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Karta (Hitta hit) ---------- */

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  background: var(--pill-bg);
  margin: 1.5rem 0 1rem;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 700px) { .map { aspect-ratio: 16 / 7; } }

.coords { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- Formulär (Kontakt) ---------- */

.form { display: grid; gap: 1.5rem; border-top: 2px solid var(--rule); padding-top: 1.5rem; }

.field { display: grid; gap: 0.4rem; }

.field label,
.form legend {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 0.6rem; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  font: 300 1.0625rem/1.4 var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.6rem 0;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.6rem - 1px); }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
}
.choices label:has(input:checked) { background: var(--solid-bg); color: var(--solid-ink); border-color: var(--solid-bg); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }

.hint { font-size: var(--text-body); color: var(--ink-soft); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; }
.form-status[data-state="ok"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--danger); }

/* ---------- Sidfot ---------- */

footer.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) 1.5rem;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  /* Fyra kolumner som i Figma: plats, öppettider, sidor, social */
  grid-template-columns: minmax(0, 377fr) minmax(0, 411fr) minmax(0, 284fr) minmax(0, 208fr);
  gap: 2rem;
}
.footer-grid p { color: var(--footer-soft); font-size: var(--text-body); line-height: 1.6; max-width: 28ch; }
.footer-grid a { color: var(--footer-ink); }
.footer-grid a:hover { color: var(--footer-soft); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.footer-grid ul a { text-decoration: none; font-size: 1.125rem; letter-spacing: -0.01em; }

.footer-grid .footer-heading { font-size: 0.9375rem; color: var(--footer-ink) !important; margin-bottom: 0.75rem; }

/* Stor text i Lustria med fyrmärket till höger */
.footer-statement-row {
  max-width: var(--max-width);
  margin: clamp(3rem, 8vw, 5.5rem) auto 1.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.footer-statement {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 0.8rem + 5vw, 5.225rem);
  line-height: 1.245;
  letter-spacing: -0.011em;
  font-weight: 400;
  text-wrap: balance;
}
.footer-mark { flex: none; width: clamp(52px, 6.2vw, 88px); height: auto; margin-right: clamp(0px, 0.6vw, 9px); }

.site-footer .meta-row {
  max-width: var(--max-width);
  margin: 0 auto;
  border-bottom: 0;
  border-top: 1px solid #333;
  padding: 1rem 0 0;
  color: var(--footer-soft);
}

/* ---------- Mobil ---------- */

@media (max-width: 760px) {
  .site-header { padding-block: 0.75rem; }
  .site-header { min-height: 4.5rem; }
  .site-logo { font-size: 1.05rem; }
  .site-mark { width: 38px; }
  .home-hero { aspect-ratio: 4 / 5; margin-top: 0.5rem; }
  .home-hero img,
  .home-hero video { object-position: 30% 50%; }
  .home-hero h1 { left: var(--gutter); top: auto; bottom: 1.5rem; transform: none; max-width: 12ch; }
  .home-hero::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  }
  .home-hero h1 { z-index: 1; color: rgba(255, 255, 255, 0.92); }
  .home-meta { padding-top: 1.5rem; }
  .home-meta .meta-row { font-size: 0.75rem; }
  .page-image { aspect-ratio: 4 / 3; }
  .intro { grid-template-columns: 1fr; }
  main > section.feature,
  main > section.feature-reverse { grid-template-columns: 1fr; }
  .feature-reverse .feature-image { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :nth-child(-n+2) { grid-column: 1 / -1; }
  .fact-box dl { grid-template-columns: 1fr; }
  .fact-box dt { border-bottom: 0; padding-bottom: 0; }
  .fact-box dd { padding-top: 0.2rem; }

  table.timeline, table.timeline tbody, table.timeline tr, table.timeline td { display: block; width: 100%; }
  table.timeline td { padding: 0 0 1rem; border-top: 0; }
  table.timeline td.year { padding-top: 1rem; padding-bottom: 0.3rem; border-top: 1px solid var(--rule); }
}

@media (max-width: 379px) {
  .site-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-video { display: none; }
  .ticker { overflow-x: auto; }
}