/* Flekkefjordbanen (/historier/flekkefjordbanen/): sakens egne stiler.
   Bygd etter designhandoffen «design_handoff_flekkefjordbanen» (okt 2026).
   Artikkelsettet gir bare skallet; komposisjonen er sakens egen og følger
   reisen: fart → strekningen → stein → dresinen → tunnelen → John → tall.

   Alle farger er palettens. Sakens aksent er KOBBER fra de rustne skinnene,
   i to utgaver etter bunnen (legges i styles.css, se PATCHES.md):
   --color-skinnekobber på mørk, --color-skinnekobber-dyp på lys.
   Aksenten brukes bare på etiketter, navn under sitater, lenker, linja og
   prikkene — aldri som utheving av ord i teksten (leverandørens ønske).

   VEKT: handoffen tegner display i 300. @font-face i styles.css tegner 300
   som 400, så her står 400 — det som faktisk vises (som i Snartemosverdet). */

.fb {
  --fb-marg: clamp(20px, 5vw, 64px);
  --fb-luft: clamp(64px, 8vw, 120px);
}
:where(.fb) p,
:where(.fb) h2,
:where(.fb) blockquote,
:where(.fb) figure,
:where(.fb) ul,
:where(.fb) ol { margin: 0; }

.fb-lys { background: var(--color-cream); color: var(--color-midnight); }
.fb-lys--varm { background: var(--color-warm-white); }
.fb-mork { background: var(--color-midnight); color: var(--color-cream); }

/* --- Brødtekst og etiketter ----------------------------------------- */
.fb-spalte { width: 100%; max-width: 800px; margin: 0 auto; }
.fb-brod { display: flex; flex-direction: column; gap: 32px; }
:where(.fb-brod) p {
  font-size: var(--brod);
  line-height: var(--linje-brod-luftig);
  text-wrap: pretty;
}

.fb-etikett {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
}
.fb-etikett--kobber { color: var(--color-skinnekobber-dyp); }
.fb-mork .fb-etikett--kobber { color: var(--color-skinnekobber); }

/* .fb foran: artikkelsidens «.ar-side main a» fjerner ellers understreken. */
.fb .fb-lenke {
  color: var(--color-skinnekobber-dyp);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.fb .fb-mork .fb-lenke { color: var(--color-skinnekobber); }
.fb .fb-lenke:hover { color: var(--color-gold-mork); }

.fb :focus-visible { outline: 2px solid var(--color-skinnekobber-dyp); outline-offset: 4px; }
.fb .fb-mork :focus-visible,
.fb .fb-tunnel :focus-visible { outline-color: var(--color-skinnekobber); }

/* --- Bilder og bildetekster ------------------------------------------ */
.fb-figur { display: flex; flex-direction: column; gap: 16px; }
.fb-figur img { display: block; width: 100%; height: auto; }
.fb-figur--staaende { width: 100%; max-width: var(--fb-maks, 480px); justify-self: center; }
.fb-figur--par img { aspect-ratio: 4 / 3; object-fit: cover; }
.fb-par__venstre img { object-position: 40% 50%; }

.fb-bildetekst {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px 12px;
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-2xs);
}
.fb-figur:not(.fb-figur--full) .fb-bildetekst { border-top: 1px solid var(--color-sand); padding-top: 14px; }
.fb-mork .fb-figur:not(.fb-figur--full) .fb-bildetekst { border-top-color: var(--surface-utility); }
.fb-figur--full .fb-bildetekst {
  box-sizing: border-box;
  width: 100%;
  max-width: 1368px;
  margin: 0 auto;
  padding: 0 var(--fb-marg);
}
.fb-bildetekst__tekst { flex: 0 1 auto; min-width: 0; color: var(--color-midnight); }
.fb-bildetekst__kreditt { flex: 0 1 auto; max-width: 100%; color: var(--tekst-dempet); }
.fb-mork .fb-bildetekst__tekst,
.fb-tunnel .fb-bildetekst__tekst { color: var(--color-sand); }
.fb-mork .fb-bildetekst__kreditt,
.fb-tunnel .fb-bildetekst__kreditt { color: var(--tekst-dempet-mork); }

/* To kolonner (sitat + bilde, bilde + fakta). Stables under ~800 px. */
.fb-to-kol {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.fb-to-kol--john {
  max-width: 1080px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(40px, 6vw, 96px);
}

/* --- Sitater (John Hansen) ------------------------------------------- */
.fb-sitat { display: flex; flex-direction: column; gap: 28px; }
.fb-sitat__tekst {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--brod-loft);
  line-height: var(--linje-kort);
  color: var(--color-midnight);
  text-wrap: pretty;
}
.fb-mork .fb-sitat__tekst { color: var(--color-warm-white); }
.fb-sitat__kilde {
  font-size: var(--text-sm);
  line-height: var(--linje-brod-tett);
  letter-spacing: var(--sperring-2xs);
  color: var(--color-stein);
}
.fb-mork .fb-sitat__kilde { color: var(--tekst-dempet-mork); }
.fb-sitat__navn {
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--color-skinnekobber-dyp);
}
.fb-mork .fb-sitat__navn { color: var(--color-skinnekobber); }

/* --- 1 · Toppbildet ---------------------------------------------------- */
.fb-hero { padding-top: var(--nav-height); }
.fb-hero__figur { display: flex; flex-direction: column; gap: 16px; }
.fb-hero__ramme {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: max(420px, 100vh - var(--nav-height));
}
@supports (height: 100svh) {
  .fb-hero__ramme { height: max(420px, 100svh - var(--nav-height)); }
}
.fb-hero__bilde {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* Pusten: sakte inn mot forsvinningspunktet i sporet foran syklisten. */
  transform-origin: 41% 22%;
  animation: fb-pust 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
@keyframes fb-pust {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.085) translate3d(0, 1.2%, 0); }
}
html.bevegelse-av .fb-hero__bilde { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fb-hero__bilde { animation: none; }
}
/* Sløret bærer tittelen: 94 % midnight nederst, borte ved 72 %. */
.fb-hero__slor {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--color-midnight) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-midnight) 80%, transparent) 32%,
    color-mix(in srgb, var(--color-midnight) 45%, transparent) 52%,
    color-mix(in srgb, var(--color-midnight) 0%, transparent) 72%);
}
.fb-hero__innhold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--fb-marg) clamp(36px, 6vh, 72px);
}
.fb-hero__eyebrow,
.fb-hero__h1 { max-width: 1240px; margin-left: auto; margin-right: auto; }
.fb-hero__eyebrow {
  margin-bottom: clamp(12px, 1.6vw, 20px);
  font-size: var(--text-eyebrow);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--color-skinnekobber);
}
.fb-hero__h1 {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 14px);
  font: inherit;
}
.fb-hero__tittel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white);
}
/* «Flekkefjordbanen» er ett ord på 16 tegn og får ikke plass på 375 px med
   --text-6xl (56 px der). Ett trinn ned på smale skjermer. */
@media (max-width: 599px) {
  .fb-hero__tittel { font-size: var(--text-5xl); }
}
.fb-hero__under {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--color-sand);
}
.fb-hero__tekst { padding: 0 clamp(20px, 3.4vw, 48px); }

/* --- 2 · Anslaget ------------------------------------------------------ */
.fb-anslag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vw, 56px);
  padding: clamp(40px, 5vw, 72px) var(--fb-marg) clamp(56px, 7vw, 104px);
}
.fb-anslag__utheving {
  max-width: 800px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--color-skinnekobber);
  text-wrap: balance;
}

/* --- 3 · Strekningen --------------------------------------------------- */
.fb-strekning { padding: var(--fb-luft) var(--fb-marg); }
.fb-strekning__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}
.fb-strekning__topp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  text-align: center;
}
.fb-tallpar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 6vw, 96px);
}
.fb-tallpar__ledd { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fb-tallpar__tall {
  font-family: var(--font-display);
  font-weight: 400;
  /* Linjetall: Cormorants gamle 7-tall stikker under linja og treffer teksten under. */
  font-variant-numeric: lining-nums;
  /* typografi-unntak: plakattall for strekningen, 80–160 px, større enn skalaens tak */
  font-size: clamp(5rem, 3.2394rem + 7.5117vw, 10rem);
  /* Under 1: tallet skal sitte tett på ordet under. */
  line-height: 0.85;
  letter-spacing: var(--sperring-tett);
  color: var(--color-midnight);
}
.fb-tallpar__tekst {
  font-size: var(--brod-kort);
  letter-spacing: var(--sperring-xs);
  color: var(--color-stein);
}
.fb-tallpar__skille {
  width: 1px;
  height: clamp(64px, 8vw, 120px);
  background: var(--color-sand);
}

/* Linja. Loddrett som standard (mobil og nettbrett), vannrett fra 1080 px.
   --fb-rt-p (0–1) settes av skriptet; uten JS 1. */
.fb-rt { --fb-rt-p: 1; position: relative; }
.fb-rt__liste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
.fb-rt__linje,
.fb-rt__fyll { position: absolute; pointer-events: none; }
.fb-rt__linje { left: 7px; top: 15px; bottom: 40px; width: 1px; background: var(--color-sand); }
.fb-rt__fyll {
  left: 7px;
  top: 15px;
  width: 1px;
  height: calc((100% - 55px) * var(--fb-rt-p));
  background: var(--color-skinnekobber-dyp);
  transition: height 0.15s linear, width 0.15s linear;
}
.fb-rt__stopp {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}
.fb-rt__prikk {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: 11px 0 0 3px;
  border-radius: 50%;
  background: var(--color-skinnekobber-dyp);
  outline: 6px solid var(--color-cream);
}
.fb-rt__stopp--ende .fb-rt__prikk { width: 15px; height: 15px; margin: 8px 0 0 0; }
.fb-rt__tekst { display: flex; flex-direction: column; gap: 8px; max-width: 240px; }
.fb-rt__navn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-hero);
  color: var(--color-midnight);
  hyphens: auto;
  overflow-wrap: anywhere;
}
.fb-rt__note {
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-stein);
  text-wrap: pretty;
}
@media (min-width: 1080px) {
  .fb-rt__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .fb-rt__linje { left: 10%; right: 10%; top: 7px; bottom: auto; width: auto; height: 1px; }
  .fb-rt__fyll { left: 10%; top: 7px; width: calc(80% * var(--fb-rt-p)); height: 1px; }
  .fb-rt__stopp { flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .fb-rt__prikk { margin: 3px 0 0; }
  .fb-rt__stopp--ende .fb-rt__prikk { margin: 0; }
}

/* --- 4 · Et mesterverk i stein ----------------------------------------- */
.fb-stein { padding: var(--fb-luft) var(--fb-marg); }

/* --- 5 · Dresinen ------------------------------------------------------ */
.fb-dresin {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
  padding-bottom: var(--fb-luft);
}
.fb-dresin__tekst { box-sizing: border-box; max-width: calc(800px + 2 * var(--fb-marg)); padding: 0 var(--fb-marg); }

/* --- 6 · Tunnelen ------------------------------------------------------- */
.fb-tunnel {
  /* farge-unntak: rommet er svart for å møte tunnelbildets helt svarte kanter; midnight ville tegnet en kant rundt bildet */
  background: #000;
  color: var(--color-cream);
  padding-bottom: var(--fb-luft);
}
.fb-tunnel__tips {
  box-sizing: border-box;
  max-width: calc(800px + 2 * var(--fb-marg));
  margin: var(--fb-luft) auto 0;
  padding: 0 var(--fb-marg);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  text-wrap: balance;
}

/* --- 7 · John Hansen ---------------------------------------------------- */
.fb-john { padding: var(--fb-luft) var(--fb-marg); }
.fb-john__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 104px);
}
.fb-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* --- 8 · Verdt å vite --------------------------------------------------- */
.fb-fakta-seksjon { padding: var(--fb-luft) var(--fb-marg); }
.fb-fakta {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--color-sand);
  padding-top: clamp(28px, 3.5vw, 40px);
}
.fb-sju { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.fb-sju__ledd { display: flex; flex-direction: column; gap: 6px; }
.fb-sju__tall {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-size: var(--text-6xl);
  /* Under 1: tallet skal sitte tett på ordet under. */
  line-height: 0.85;
  letter-spacing: var(--sperring-tett);
  color: var(--color-midnight);
}
.fb-sju__tekst { font-size: var(--brod-kort); color: var(--color-stein); }
.fb-fakta__setning,
.fb-fakta__liste li {
  font-size: var(--brod-kort);
  line-height: var(--linje-brod);
  color: var(--color-midnight);
  text-wrap: pretty;
}
.fb-fakta__liste { list-style: none; padding: 0; border-top: 1px solid var(--color-sand); }
.fb-fakta__liste li { padding: 18px 0; border-bottom: 1px solid var(--color-sand); }

/* --- 9 · Bestill -------------------------------------------------------- */
.fb-bestill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 var(--fb-marg) var(--fb-luft);
  text-align: center;
}
.fb-bestill__sporsmal {
  max-width: 800px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--color-midnight);
  text-wrap: balance;
}
.fb .fb-bestill__knapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--color-midnight);
  border-radius: 999px;
  color: var(--color-midnight);
  text-decoration: none;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.fb .fb-bestill__knapp:hover { background: var(--color-midnight); color: var(--color-cream); }
.fb-bestill__merknad {
  margin-top: -12px;
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-2xs);
  color: var(--tekst-dempet);
}

/* --- 10 · Kilder -------------------------------------------------------- */
.fb-kilder { padding: 0 var(--fb-marg) clamp(72px, 9vw, 128px); }
.fb-kilder__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--color-sand);
  padding-top: 36px;
}
.fb-kilder__tittel { color: var(--tekst-dempet); }
.fb-kilder__liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-sm);
  line-height: var(--linje-brod-tett);
}
.fb .fb-kilder__liste .fb-lenke { color: var(--color-stein); }

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .fb { --fb-luft: var(--mobil-seksjon); }
}