/* ===========================================================================
   Platssamverkan Gottsunda Valsätra — designsystem
   ---------------------------------------------------------------------------
   Ett handskrivet system som ersätter Tailwind CDN. Färgerna är hämtade ur
   föreningens egen logga (teal) och ur Gottsundaslingans ljus (lampgul).
   Inga externa typsnitt laddas — det tar bort både en prestandakostnad och
   en GDPR-fråga (Google Fonts skickar besökarens IP till tredje land).
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;

  /* Ytor och text. Neutralerna har en svag grön dragning så att den
     teal accenten läser som vald, inte ärvd. */
  --paper:       #F4F7F6;
  --surface:     #FFFFFF;
  --surface-2:   #EAF0EE;
  --surface-3:   #DFE8E6;
  --ink:         #10201E;
  --ink-2:       #475956;
  --ink-3:       #74827F;
  --rule:        #DBE5E3;
  --rule-2:      #C2D2CF;

  /* Föreningens teal, fördjupad tills den bär 4.5:1 mot vitt. */
  --brand:       #0E8F8A;
  --brand-deep:  #0A6A66;
  --brand-soft:  #E2F1EF;
  --brand-line:  #9FD5D1;

  /* Lampgul — Gottsundaslingans ljus. Enda accentfärgen vid sidan av teal,
     reserverad för det som ska dra ögat: primära knappar, aktiv rad. */
  --lamp:        #B4700F;
  --lamp-bright: #E39A2B;
  --lamp-soft:   #FAF0DC;

  /* Status */
  --ok:          #1C7C46;
  --warn:        #B4700F;
  --err:         #B4362F;

  /* Form */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,32,30,.06);
  --shadow:    0 1px 2px rgba(16,32,30,.05), 0 12px 28px -18px rgba(16,32,30,.35);
  --shadow-lg: 0 2px 4px rgba(16,32,30,.05), 0 28px 60px -30px rgba(16,32,30,.45);

  /* Typografi */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --wrap:  1180px;
  --measure: 66ch;
  --header-h: 74px;

  /* Sidans bakgrundsfärg med noll alfa. Används i gradienter: skriver man
     "transparent" tolkar en del webbläsare det som genomskinligt SVART, och då
     får uttoningen en gråaktig ton i stället för att smälta in. */
  --paper-0: rgba(244, 247, 246, 0);
}

@media (max-width: 1000px) { :root { --header-h: 62px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #091312;
    --paper-0:    rgba(9, 19, 18, 0);
    --surface:    #111E1D;
    --surface-2:  #182826;
    --surface-3:  #21332F;
    --ink:        #E9F2F0;
    --ink-2:      #A2B4B1;
    --ink-3:      #72847F;
    --rule:       #22322F;
    --rule-2:     #32453F;
    --brand:      #2FC9C2;
    --brand-deep: #7FDDD8;
    --brand-soft: #0D2A28;
    --brand-line: #1E5A57;
    --lamp:       #E9AC55;
    --lamp-bright:#F3C57F;
    --lamp-soft:  #2A2113;
    --ok:         #4CB877;
    --warn:       #E9AC55;
    --err:        #E27A72;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.9);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 70px -32px rgba(0,0,0,1);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #091312;
  --paper-0:    rgba(9, 19, 18, 0);
  --surface:    #111E1D;
  --surface-2:  #182826;
  --surface-3:  #21332F;
  --ink:        #E9F2F0;
  --ink-2:      #A2B4B1;
  --ink-3:      #72847F;
  --rule:       #22322F;
  --rule-2:     #32453F;
  --brand:      #2FC9C2;
  --brand-deep: #7FDDD8;
  --brand-soft: #0D2A28;
  --brand-line: #1E5A57;
  --lamp:       #E9AC55;
  --lamp-bright:#F3C57F;
  --lamp-soft:  #2A2113;
  --ok:         #4CB877;
  --warn:       #E9AC55;
  --err:        #E27A72;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.9);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 70px -32px rgba(0,0,0,1);
}

/* ------------------------------------------------------------------ bas -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--brand-deep); text-underline-offset: 3px; }
a:hover { color: var(--brand); }

/* Temats ikoner. En inline-SVG utan mått fyller hela sin förälder, så varje
   ikon måste ha en storlek. Den följer textstorleken där den sitter. */
.ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.16em; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* Ankarhopp ska landa under headern, inte bakom den. */
section[id], [id].spine__body { scroll-margin-top: calc(var(--header-real, var(--header-h)) + 18px); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
.wrap-narrow { max-width: 780px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------- typografi -- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0;
}
.eyebrow--brand { color: var(--brand-deep); }

.display   { font-size: clamp(34px, 6vw, 62px); line-height: 1.03; }
.title-xl  { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }
.title-lg  { font-size: clamp(23px, 2.8vw, 32px); line-height: 1.16; }
.title-md  { font-size: clamp(19px, 2vw, 22px); line-height: 1.25; }

.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.prose-measure { max-width: var(--measure); }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ sektioner -- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--surface { background: var(--surface); }
.section--sunken { background: var(--surface-2); }
.section + .section--surface,
.section--surface + .section { border-top: 1px solid var(--rule); }

/* Redaktionell "spine": vänsterskena med etikett och lampprick. */
.spine { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 clamp(20px, 3.5vw, 48px); }
.spine__rail { position: relative; border-right: 1px solid var(--rule); padding-right: clamp(14px, 2vw, 26px); }
.spine__rail::after {
  content: ""; position: absolute; right: -5px; top: .55rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 18%, transparent);
}
.spine__label {
  display: block; text-align: right;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.55;
}
.spine__body { min-width: 0; }
@media (max-width: 820px) {
  .spine { grid-template-columns: 1fr; }
  .spine__rail { border-right: 0; padding: 0 0 14px; }
  .spine__rail::after { display: none; }
  .spine__label { text-align: left; }
  .spine__label::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lamp); margin-right: 9px; vertical-align: middle;
  }
}

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }

/* --------------------------------------------------------------- knappar -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow); }

.btn--lamp { background: var(--lamp); color: #fff; }
.btn--lamp:hover { background: var(--ink); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }

.btn--onDark { background: rgba(255,255,255,.1); color: #EAF4F2; border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.btn--onDark:hover { background: #fff; color: #0A1B1A; border-color: #fff; }

.btn--sm { padding: 9px 17px; font-size: 14px; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* På smala skärmar har headern ont om plats. "Interna sidor" finns ändå i
   mobilmenyn, så där tas knappen bort helt i stället för att krympas till en
   ensam hänglåsikon bredvid två andra ikonknappar. */
@media (max-width: 1180px) { .header-actions .btn--ghost span { display: none; } }
@media (max-width: 1000px) { .header-actions .btn--ghost { display: none; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--brand-deep); text-decoration: none;
}
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .link-arrow:hover svg { transform: none; } }

/* ----------------------------------------------------------------- kort -- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

.card__icon {
  width: 42px; height: 42px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-deep);
  margin-bottom: 16px;
}
.card__icon .ic { width: 21px; height: 21px; }
.card__title { font-size: 19px; line-height: 1.28; margin-bottom: 8px; }
.card__text { font-size: 15px; color: var(--ink-2); }

/* Explicita kolumnantal i stället för auto-fit. Med auto-fit bestämmer
   containerbredden hur många kolumner det blir, så .grid--2 kunde bli tre
   kolumner på en bred skärm — namnet ljög om resultatet. */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- märken -- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.pill--brand { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-line); }
.pill--lamp  { background: var(--lamp-soft); color: var(--lamp); border-color: color-mix(in srgb, var(--lamp) 35%, transparent); }

.lamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); flex: none; display: inline-block; }

/* -------------------------------------------------------------- statrad -- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.stat { background: var(--surface); padding: 22px clamp(14px, 2vw, 24px); }
.stat b { display: block; font-family: var(--mono); font-weight: 600; font-size: clamp(23px, 2.7vw, 30px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.08; }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }

/* -------------------------------------------------------- snabblänkar -- */
.quicklinks { background: var(--surface); border-bottom: 1px solid var(--rule); }
.quicklinks__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); }
@media (min-width: 780px) { .quicklinks__grid { grid-template-columns: repeat(3, 1fr); } }

.ql {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 24px clamp(16px, 2.2vw, 28px);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: background-color .2s ease;
}
.ql::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--lamp); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.ql:hover { background: var(--surface-2); }
.ql:hover::before, .ql:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ql::before { transition: none; } }

.ql__ic {
  width: 46px; height: 46px; border-radius: var(--r); flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep);
}
.ql__ic .ic { width: 22px; height: 22px; }
.ql__body { min-width: 0; }
.ql__t { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ql__s { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.ql__go { margin-left: auto; color: var(--ink-3); flex: none; transition: transform .2s ease, color .2s ease; }
.ql:hover .ql__go { color: var(--brand-deep); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ql:hover .ql__go { transform: none; } }

/* --------------------------------------------------- kontakt (eget band) -- */
.contact-band { position: relative; overflow: hidden; background: #08110F; color: #C3D6D3; }
.contact-band .wrap { position: relative; z-index: 1; }
.contact-band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .contact-band__grid { grid-template-columns: 0.85fr 1.15fr; } }
.contact-band h2 { color: #F2F8F7; }
.contact-band .eyebrow { color: #6FCBC5; }
.contact-band__intro { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: #A8C0BC; max-width: 42ch; }

.contact-list { border-top: 1px solid rgba(255,255,255,.14); }
/* Raden flyttar sitt INNEHÅLL med transform i stället för att ändra padding.
   Padding påverkar layouten, så texten bröts om på nytt vid varje hover — det
   var det som såg ryckigt ut och gjorde att raden växte. En transform ritas om
   på kompositorn och rör inte layouten alls. */
.contact-row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 24px 0 24px 22px; border-bottom: 1px solid rgba(255,255,255,.14);
  text-decoration: none; color: inherit; position: relative;
}
@media (min-width: 620px) {
  .contact-row { grid-template-columns: 1fr auto; align-items: center; gap: 6px 28px; }
}
.contact-row > span { transition: transform .28s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.contact-row::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; border-radius: 50%; background: var(--lamp);
  opacity: 0; transform: scale(.4);
  transition: opacity .28s ease, transform .28s ease;
}
.contact-row:hover > span, .contact-row:focus-visible > span { transform: translateX(10px); }
.contact-row:hover::before, .contact-row:focus-visible::before { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .contact-row > span { transition: none; }
  .contact-row:hover > span, .contact-row:focus-visible > span { transform: none; }
}
/* display: block på varje del. De är span-element och låg annars kvar som
   inline, så roll, namn och bolag flöt ihop till en enda mening som bröts
   mitt i — precis det som syntes på sidan. */
.contact-row__role,
.contact-row__name,
.contact-row__org,
.contact-row__mail { display: block; }

.contact-row__role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #6F8B87; }
.contact-row__name { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; color: #F2F8F7; line-height: 1.25; margin-top: 7px; }
.contact-row__org { font-size: 13.5px; color: #8AA5A1; margin-top: 5px; }
.contact-row__mail { font-family: var(--mono); font-size: 12.5px; color: #7FDDD8; word-break: break-word; }
@media (min-width: 620px) { .contact-row__mail { text-align: right; } }
.contact-row:hover .contact-row__mail { color: #fff; }

/* ------------------------------------------------ diskreta bakgrundsrörelser */
/* Mycket långsamt drivande ljusfläckar. De ligger bakom innehållet, tar inga
   klick och stängs av helt för den som valt reducerad rörelse. */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
  animation: ambientDrift 38s ease-in-out infinite alternate;
}
.ambient i.a1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; right: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lamp) 20%, transparent) 0%, transparent 68%);
}
.ambient i.a2 {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; bottom: -18%; left: -10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 18%, transparent) 0%, transparent 68%);
  animation-duration: 52s; animation-delay: -12s;
}
.ambient i.a3 {
  width: 26vw; height: 26vw; max-width: 340px; max-height: 340px; top: 32%; left: 42%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  animation-duration: 64s; animation-delay: -30s;
}
@keyframes ambientDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -6%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .ambient { display: none; } }

/* Sektioner behöver stapelkontext så att ljusfläckarna hamnar bakom texten. */
.section { position: relative; }
.section > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------- citat -- */
.quote { border-left: 3px solid var(--lamp); padding: 6px 0 6px 24px; max-width: 58ch; }
.quote p { font-family: var(--serif); font-size: clamp(19px, 2.3vw, 25px); line-height: 1.4; }
.quote cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------ formulär -- */
input[type=text], input[type=email], input[type=search], input[type=password], textarea, select {
  width: 100%; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 11px 14px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* ------------------------------------------------------------- tabeller -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- scroll-avslöj -- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ================================================================ HEADER == */
/* position: fixed, inte sticky. Ett sticky element ligger kvar i flödet och
   är känsligt för vad förfäderna gör; fixed lyfts ur flödet helt och beter sig
   likadant oavsett omgivning. Kroppen får i stället en topplatta lika hög som
   headern, så innehållet börjar på samma ställe som förut. */
:root { --header-top: 0px; }

.site-header {
  position: fixed;
  top: var(--header-top); left: 0; right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid transparent;
  will-change: transform;
  transition: transform .3s cubic-bezier(.2,.7,.3,1),
              border-color .2s ease, background-color .2s ease;
}
body { padding-top: var(--header-real, var(--header-h)); }

.site-header.is-stuck { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 94%, transparent); }

/* Döljs vid skroll nedåt, kommer tillbaka vid skroll uppåt. Förskjutningen är
   headerns höjd plus lite marginal, så skuggan inte tittar fram. */
.site-header.is-hidden { transform: translateY(calc(-100% - 8px)); }
.site-header.nav-open { transform: none; }

/* Inloggad i WordPress ligger adminbaren överst och skulle annars täcka
   headern. Den är 32 px bred skärm, 46 px på smal. */
body.admin-bar { --header-top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --header-top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: border-color .2s ease, background-color .2s ease; }
}

.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { height: 40px; width: auto; object-fit: contain; }
.brand__name { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name b { font-family: var(--serif); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.brand__name span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 430px) { .brand__name { display: none; } }

.nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1000px) { .nav--main { display: none; } }
.nav a {
  position: relative; padding: 8px 13px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--lamp);
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-2);
  cursor: pointer; transition: border-color .16s, color .16s, background-color .16s;
}
.icon-btn:hover { border-color: var(--rule-2); color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}
.menu-btn { display: none; }
@media (max-width: 1000px) { .menu-btn { display: inline-flex; } }

/* Mobilmeny. Utgår från headerns UPPMÄTTA höjd (--header-real, satt av
   site.js) och faller tillbaka på den skrivna. Tidigare låg menyns översta
   rad delvis bakom headern när den verkliga höjden skilde sig någon pixel. */
.mobile-nav {
  position: fixed; z-index: 55;
  top: calc(var(--header-top, 0px) + var(--header-real, var(--header-h)));
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  padding: 22px clamp(18px, 5vw, 34px) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .mobile-nav { transition: none; } }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; font-size: 19px; font-family: var(--serif); font-weight: 700;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.mobile-nav a:hover { color: var(--brand-deep); }
.mobile-nav__group { margin-top: 26px; }

/* ================================================================== HERO == */
.hero { position: relative; background: #08110F; color: #E8F2F0; overflow: hidden; isolation: isolate; }

/* Lagerordning: foto → sordin → text. Bilden får synas ordentligt; sordinen
   är en mjuk kil som är tät bara där texten står och slipper fram bilden till
   höger och nedåt. */
.hero__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: .82; filter: saturate(.9);
  animation: heroDrift 46s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(103deg,
      rgba(6,15,14,.92) 0%,
      rgba(6,15,14,.82) 26%,
      rgba(6,15,14,.5) 52%,
      rgba(6,15,14,.22) 78%,
      rgba(6,15,14,.12) 100%),
    linear-gradient(to bottom, rgba(6,15,14,.45) 0%, rgba(6,15,14,0) 30%, rgba(6,15,14,.35) 100%);
}
.hero__in { position: relative; z-index: 3; padding-block: clamp(72px, 12vw, 148px) clamp(56px, 8vw, 96px); }

/* Under 900 px står texten över hela bredden, så sordinen måste vara jämnare
   tät — annars hamnar slutet av raderna på ljus bild. */
@media (max-width: 900px) {
  .hero::after {
    background:
      linear-gradient(to right, rgba(6,15,14,.9) 0%, rgba(6,15,14,.78) 55%, rgba(6,15,14,.6) 100%),
      linear-gradient(to bottom, rgba(6,15,14,.5) 0%, rgba(6,15,14,.15) 40%, rgba(6,15,14,.5) 100%);
  }
  .hero__photo { opacity: .9; }
}

/* Texten får en mjuk skugga som håller kontrasten även där bilden är ljus. */
.hero h1, .hero__lede { text-shadow: 0 1px 22px rgba(4,12,11,.55); }

/* Mycket långsam panorering, knappt märkbar men gör bilden levande. */
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; transform: scale(1.04); }
}
.hero .eyebrow { color: #6FCBC5; }
.hero h1 { color: #F3F9F8; max-width: 16ch; margin-top: 20px; }
.hero__lede { margin-top: 24px; max-width: 54ch; font-size: clamp(17px, 1.8vw, 20.5px); color: #B4C9C6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__meta { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7E9A96; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }

/* Ljusslingan togs bort ur hero 2026-08-15 — den låg över fotot och tog mer
   uppmärksamhet än den gav. Lampmotivet lever kvar som prickar vid
   sektionsetiketter och i de drivande ljusfläckarna. */

/* Sidhuvud för undersidor */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--rule); padding-block: clamp(44px, 6vw, 76px); position: relative; overflow: hidden; }
.page-hero__in { position: relative; z-index: 1; }
.page-hero h1 { margin-top: 14px; }
.page-hero .lede { margin-top: 18px; }
.page-hero__glow {
  position: absolute; top: -140px; right: -80px; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--lamp) 16%, transparent) 0%, transparent 68%);
  animation: ambientDrift 44s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .page-hero__glow { animation: none; } }

/* =============================================================== MEDLEMMAR = */
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.member {
  display: flex; align-items: center; justify-content: center;
  height: 108px; padding: 20px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.member:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .member:hover { transform: none; } }
.member img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
.member:hover img { filter: none; opacity: 1; }
:root[data-theme="dark"] .member img { filter: grayscale(1) brightness(2.4) contrast(.75); opacity: .55; }
:root[data-theme="dark"] .member:hover img { filter: brightness(1.9) contrast(.9); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .member img { filter: grayscale(1) brightness(2.4) contrast(.75); opacity: .55; }
  :root:not([data-theme="light"]) .member:hover img { filter: brightness(1.9) contrast(.9); opacity: 1; }
}

/* ============================================================== INITIATIV = */
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.post-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .post-card:hover .post-card__media img { transform: none; } }
.post-card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.post-card__placeholder { width: 34px; height: 34px; opacity: .55; }
.post-card .link-arrow { margin-top: 4px; }
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__date { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.post-card__title { font-size: 20px; line-height: 1.25; }
.post-card:hover .post-card__title { color: var(--brand-deep); }
.post-card__excerpt { font-size: 14.5px; color: var(--ink-2); flex: 1; }

/* Horisontell svep-rad på mobil */
.swipe { display: grid; gap: 16px; }
@media (max-width: 720px) {
  .swipe {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(clamp(18px, 4vw, 44px) * -1); padding-inline: clamp(18px, 4vw, 44px);
    padding-bottom: 8px; scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82vw; scroll-snap-align: center; }
}
.swipe-hint { display: none; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
@media (max-width: 720px) { .swipe-hint { display: flex; } }

/* ============================================================== KONTAKT == */
.contact-card { display: flex; flex-direction: column; gap: 6px; }
.contact-card__role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.contact-card__name { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.contact-card__org { font-size: 14px; color: var(--ink-2); }
.contact-card a { font-size: 15px; word-break: break-word; }

/* ============================================================ JOBBPORTAL == */
.job { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.job + .job { margin-top: 12px; }
.job__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.job__trigger:hover .job__title { color: var(--brand-deep); }
.job__title { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.25; }
.job__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
.job__chev { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); transition: transform .3s ease, background-color .2s; }
.job[open] .job__chev, .job.is-open .job__chev { transform: rotate(180deg); background: var(--brand-soft); color: var(--brand-deep); }
@media (prefers-reduced-motion: reduce) { .job__chev { transition: background-color .2s; } }
.job__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.3,1); }
.job.is-open .job__panel { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .job__panel { transition: none; } }
.job__panel > div { overflow: hidden; }
.job__inner { padding: 4px 24px 24px; border-top: 1px solid var(--rule); }
.job__apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* ============================================================== ARTIKEL == */
.entry { font-size: 17px; line-height: 1.72; color: var(--ink); }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.2; margin-top: 2em; }
.entry h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.25; margin-top: 1.7em; }
.entry h4 { font-size: 18px; margin-top: 1.5em; }
.entry p, .entry ul, .entry ol { max-width: var(--measure); }
.entry ul, .entry ol { padding-left: 1.35em; }
.entry li + li { margin-top: .45em; }
.entry ul li { list-style: disc; }
.entry ol li { list-style: decimal; }
.entry ul li::marker { color: var(--lamp); }
.entry a { color: var(--brand-deep); text-decoration: underline; }
.entry blockquote { border-left: 3px solid var(--lamp); padding-left: 22px; font-family: var(--serif); font-size: 1.15em; line-height: 1.45; color: var(--ink); }
.entry img { border-radius: var(--r-lg); }
.entry hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.2em; }
.entry code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); }
.entry figure { margin: 0; }
.entry figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.entry table { font-size: 15px; }

/* ============================================================== NOTIS ==== */
.notice { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--surface-2); }
.notice__icon { flex: none; color: var(--lamp); }
.notice--brand { background: var(--brand-soft); border-color: var(--brand-line); }
.notice--brand .notice__icon { color: var(--brand-deep); }
.notice p { font-size: 15px; color: var(--ink-2); }
.notice strong { color: var(--ink); }

.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.checklist li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.checklist li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%;
  background: var(--lamp);
}

/* ====================================================== GOTTSUNDASLINGAN == */
/* Vyn går kant i kant med sidan, utan wrap. Ingen ram, ingen platta, ingen
   skugga och ingen egen bakgrund — stilen målar inget bottenlager, så sidans
   färg lyser igenom och husen står direkt på sidan. */
.slinga-sektion { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 64px); overflow: hidden; }

/* Vyn ligger först på sidan, direkt under headern. Ingen topplatta behövs
   eftersom kroppen redan har en lika hög som headern. */
.slinga-sektion--forst { padding-top: 0; }

/* Bredden är medvetet begränsad. På en bred skärm blir rutan annars 2,7:1
   medan slingan är 1,35:1 — då är höjden det som begränsar inramningen och
   modellen krymper till en liten klump med tomrum på sidorna. Uttoningen gör
   att den ändå inte läser som en avgränsad ruta. */
.slinga-vy {
  position: relative; width: 100%; max-width: 1500px;
  margin-inline: auto; background: transparent;
}

/* Kanterna tonas ut åt alla håll så att det inte finns någon synlig avgränsning.
   Uttoningen börjar sent (78 %) eftersom slingan är drygt 2,5 km och behöver
   ytan — en hårdare mask åt upp Väggen. */
.slinga-karta { width: 100%; height: clamp(480px, 78vh, 860px); position: relative; }
.slinga-karta.is-unsupported { height: auto; }

/* Uttoningen görs som ett lager OVANPÅ vyn, inte som mask-image på den.
   En CSS-mask på ett element som innehåller en WebGL-canvas är opålitlig —
   canvasen komponeras i ett eget lager och masken slår inte alltid igenom.
   Den här gradienten går från sidans exakta bakgrundsfärg till samma färg med
   noll alfa, så kanterna smälter samman med sidan i stället för att klippas. */
.slinga-vy::after {
  content: "";
  position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  /* Radierna måste vara MINDRE än halva rutan, annars hamnar kanterna innanför
     ellipsen och når aldrig full sidfärg. Med 82 % radie var vänsterkanten bara
     en tredjedel uttonad — det var därför den fortfarande såg avklippt ut.
     Nu: 60 % × 54 % radie, full sidfärg vid 90 % av ellipsen.

     De två linjära lagren ligger bara i de yttersta procenten och är helt
     genomskinliga i mitten, så de kan inte grumla bilden. */
  background:
    linear-gradient(to right,  var(--paper) 0%, var(--paper-0) 9%,  var(--paper-0) 91%, var(--paper) 100%),
    linear-gradient(to bottom, var(--paper) 0%, var(--paper-0) 8%,  var(--paper-0) 92%, var(--paper) 100%),
    radial-gradient(ellipse 60% 54% at 50% 48%,
      var(--paper-0) 44%,
      color-mix(in srgb, var(--paper) 50%, transparent) 72%,
      var(--paper) 90%);
}

/* MapLibre målar annars en egen vit/svart botten bakom canvasen. */
.slinga-karta .maplibregl-map,
.slinga-karta .maplibregl-canvas-container,
.slinga-karta .maplibregl-canvas { background: transparent !important; }

/* Skarpare kanter på husen vid uppskalning på skärmar med hög pixeltäthet. */
.slinga-karta .maplibregl-canvas { image-rendering: auto; }

/* Krediteringen står som text under objektet i stället för i ett hörn av det,
   eftersom masken hade tonat bort den. OpenStreetMaps licens kräver att den
   syns, så den får inte tas bort — bara flyttas. */
.slinga-kredit {
  margin-top: 10px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.slinga-kredit a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.slinga-kredit a:hover { color: var(--ink-2); }
.slinga-karta__laddar {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #6F8B87; pointer-events: none;
  transition: opacity .4s ease;
}
.slinga-karta.is-ready .slinga-karta__laddar { opacity: 0; }
.slinga-karta__puls { width: 12px; height: 12px; border-radius: 50%; background: var(--lamp); animation: lampaPuls 2.4s ease-in-out infinite; }
.slinga-karta.is-unsupported { height: auto; display: block; }
.slinga-karta__fallback { padding: 40px 24px; text-align: center; color: #A8C0BC; font-size: 15px; }

/* Marklampa: mjukt sken, fast kärna, namn bredvid. */
.slinga-lampa { position: relative; width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.slinga-lampa__sken {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242,182,98,.55) 0%, rgba(242,182,98,0) 68%);
  animation: lampaPuls 4.2s ease-in-out infinite;
}
.slinga-lampa__karna {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #FBD79A; box-shadow: 0 0 0 3px rgba(242,182,98,.3);
}
.slinga-lampa__namn {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); pointer-events: none;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(3px);
}
.slinga-lampa:hover .slinga-lampa__karna,
.slinga-lampa:focus-visible .slinga-lampa__karna { transform: scale(1.25); }
.slinga-lampa__karna { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .slinga-lampa__karna { transition: none; } }
.slinga-lampa.is-still .slinga-lampa__sken { animation: none; opacity: .85; }
@keyframes lampaPuls { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .slinga-lampa__sken, .slinga-karta__puls { animation: none; opacity: .85; }
}

/* Panelen följer sidans tema i stället för att alltid vara mörk. */
.slinga-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px clamp(20px, 3vw, 32px) 28px;
  color: var(--ink-2);
  transform: translateY(112%); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.slinga-panel.is-open { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .slinga-panel { transition: none; } }
@media (min-width: 880px) {
  .slinga-panel {
    left: auto; right: 0; top: 50%; bottom: auto;
    width: min(380px, 40%);
    transform: translate(24px, -50%);
  }
  .slinga-panel.is-open { transform: translate(0, -50%); }
}
.slinga-panel__stang {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.slinga-panel__stang:hover { background: var(--surface-2); color: var(--ink); }
.slinga-panel__stang svg { width: 15px; height: 15px; }
.slinga-panel__num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.slinga-panel__namn { font-family: var(--serif); font-size: clamp(23px, 2.8vw, 29px); font-weight: 700; color: var(--ink); margin-top: 8px; line-height: 1.15; }
.slinga-panel__under { font-size: 14px; color: var(--ink-3); margin-top: 6px; }
.slinga-panel__text { font-size: 15px; line-height: 1.62; margin-top: 16px; max-width: 46ch; }
/* .slinga-panel__status togs bort 2026-08-15 — projektstatus som "Dialog med
   boende" är intern information och hör inte hemma på en publik sida. */

.slinga-hjalp { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.slinga-hjalp .ic { color: var(--lamp); }

/* Platslistan — fungerar helt utan kartan */
.slinga-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.slinga-plats {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start;
  padding: 22px clamp(18px, 2.4vw, 26px);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.slinga-plats:hover, .slinga-plats.is-active { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.slinga-plats.is-active { border-left: 3px solid var(--lamp); }
@media (prefers-reduced-motion: reduce) { .slinga-plats:hover, .slinga-plats.is-active { transform: none; } }
/* Numreringen är borttagen — platserna är fyra likvärdiga punkter, inte en
   ordnad rutt. I stället en lampa som knyter an till markörerna i vyn. */
.slinga-plats__lampa {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--lamp-soft);
  display: grid; place-items: center;
  position: relative;
}
.slinga-plats__lampa::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 22%, transparent);
}
.slinga-plats__kropp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slinga-plats__namn { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.2; }
.slinga-plats__under { font-size: 13.5px; color: var(--ink-3); }
.slinga-plats__text { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.slinga-plats__kropp .pill { align-self: flex-start; margin-top: 8px; }
.slinga-plats__go { color: var(--ink-3); align-self: center; transition: transform .2s ease, color .2s ease; }
.slinga-plats:hover .slinga-plats__go { color: var(--brand-deep); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .slinga-plats:hover .slinga-plats__go { transform: none; } }
@media (max-width: 560px) {
  .slinga-plats { grid-template-columns: auto 1fr; }
  .slinga-plats__go { display: none; }
}

/* Redigeringsläget — syns bara för inloggad redaktör med ?redigera=1 */
.slinga-red {
  margin-top: 18px; padding: 20px clamp(16px, 2.4vw, 24px);
  background: var(--surface); border: 2px dashed var(--lamp); border-radius: var(--r-lg);
}
.slinga-red__rad { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.slinga-red__rad strong { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--lamp); }
.slinga-red__antal { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.slinga-red__antal b { color: var(--ink); font-variant-numeric: tabular-nums; }
.slinga-red__hjalp { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.slinga-red__knappar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.slinga-red__knappar button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--rule-2); color: var(--ink);
}
.slinga-red__knappar button:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.slinga-red__knappar .sr-primar { background: var(--lamp); border-color: var(--lamp); color: #fff; }
.slinga-red__knappar .sr-primar:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#sr-ut {
  width: 100%; height: 190px; margin-top: 14px; resize: vertical;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 12px;
}
.slinga-red__spar { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.slinga-red__spar code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); }

/* I redigeringsläget ska markören visa att kartan går att klicka i. */
.slinga-karta .maplibregl-canvas-container.maplibregl-interactive { cursor: crosshair; }

/* MapLibres egna kontroller mot mörk botten */
.maplibregl-ctrl-group { background: rgba(8,17,15,.82) !important; border: 1px solid rgba(255,255,255,.16) !important; }
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.16) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) brightness(1.6); }
.maplibregl-ctrl-attrib { background: rgba(8,17,15,.7) !important; }
.maplibregl-ctrl-attrib a { color: #A8C0BC !important; }

/* =============================================================== FOOTER == */
.site-footer { margin-top: auto; background: #08110F; color: #A9C0BC; }
.site-footer a { color: #CFE2DF; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(48px, 6vw, 72px); }
@media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: 19px; color: #F0F7F6; }
.site-footer h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6F8B87; font-weight: 600; margin-bottom: 16px; }
.site-footer p { font-size: 14.5px; line-height: 1.65; max-width: 40ch; margin-top: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.09); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #6F8B87; }
/* Loggan står på mörk botten i sidfoten. Den vita cirkelplattan ger den
   luft och gör den läsbar utan att bilden behöver en egen variant. */
.footer-logo { display: inline-block; margin-bottom: 20px; line-height: 0; }
.footer-logo img {
  width: 78px; height: 78px; object-fit: contain;
  background: #F2F7F6; border-radius: 50%; padding: 9px;
  transition: transform .25s ease;
}
.footer-logo:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .footer-logo:hover img { transform: none; } }

/* Diskret rörelse även i sidfoten. */
.site-footer { position: relative; overflow: hidden; }
.site-footer .wrap { position: relative; z-index: 1; }

/* =============================================================== UTIL ==== */
.flow > * + * { margin-top: var(--flow, 18px); }
.center { text-align: center; }
.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; }