/* ============================================================
   FAGARTIKLER — felles designregler + byggeklosser
   ============================================================
   IKKE en mal. Dette er designspråket: farger, typografi, mål og
   et sett klosser hver sak setter sammen fritt etter hva teksten
   trenger. To saker skal kunne se ulike ut og likevel høre sammen.

   Portert fra designhandoff «Farsund fagartikkel» (aug 2026) —
   verdiene under er designets, komposisjonen er sakens.
   ============================================================ */

.ar-side {
  --ar-blekk: var(--color-midnight);
  --ar-marine: var(--surface-utility);
  --ar-brod: var(--color-stein);
  --ar-terrakotta: var(--color-gold);
  --ar-rust: var(--color-gold-mork);
  --ar-aurora: var(--color-aurora);
  --ar-papir: var(--color-warm-white);
  --ar-krem: var(--color-cream);
  --ar-gra: #7A8794;
  --ar-sand: #9A917F;

  --ar-bredde: 1160px;
  --ar-marg: clamp(20px, 3vw, 44px);
  /* Halvert 7. okt 2026: Marion syntes de hvite feltene ble for store. */
  --ar-luft: clamp(40px, 4.5vw, 64px);

  /* TYPOGRAFISK SKALA — fire trinn, ingen unntak utenom sitatbruddet.
   * Hvert trinn har én jobb. Trenger du en stoerrelse som ikke finnes
   * her, er det som regel rollen som er uklar, ikke skalaen. Etikettene
   * (krediteringer, domener, eyebrows, piller) bruker etikettbaandet i
   * styles.css; --ar-mikro (11 px) og --ar-etikett (12 px) var tall i et
   * lokalt token og er fjernet (mobilgjennomgang, okt 2026). */
  --ar-brod: 17px;                       /* all broedtekst og bildetekst */
  --ar-serif-s: 21px;                    /* faktaverdi, kildenavn, nummer */
  --ar-h2: clamp(30px, 3.2vw, 44px);     /* seksjons- og kortoverskrifter */
  --ar-h1: clamp(44px, 5.6vw, 84px);     /* artikkeltittel */

  background: var(--ar-papir);
}
/* Penne-saken: aksenten er helleristningenes røde, i tekst, streker og
 * rammer. Et spill på motivet som hører hjemme i den saken og ingen andre
 * (Tom 7. okt 2026). Strekene og rammene er blandet av --ar-rust, så de
 * følger med. */
.ar-side.ar-side--helleristning { --ar-rust: var(--color-helleristning); }
/* Typografi og lenkefarger gjelder KUN artikkelinnholdet — header og
 * footer er felleskomponenter og skal se ut som overalt ellers. */
.ar-side main {
  color: var(--ar-marine);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.ar-side main a { color: var(--ar-rust); text-decoration: none; }
.ar-side main a:hover { color: var(--ar-terrakotta); }

.ar-flyt { display: flex; flex-direction: column; gap: var(--ar-luft); padding-top: var(--ar-luft); }
/* Lys hero har egen bunnpadding + fargeskifte som allerede skiller —
 * full flyt-padding oppaa den ble nesten 200px. Moerk hero slutter
 * flush i bildekanten og beholder full luft. */
.ar-hero--lys + .ar-flyt { padding-top: clamp(20px, 2vw, 32px); }
.ar-inner { max-width: var(--ar-bredde); margin: 0 auto; }
.ar-blokk { padding: 0 var(--ar-marg); }

/* --- Felles typografi ------------------------------------- */
.ar-eyebrow {
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
}
.ar-tittel {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--linje-hero);
  margin: 0;
  color: var(--ar-blekk);
  text-wrap: balance;
}
.ar-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--ar-h2);
  line-height: var(--linje-display);
  margin: 0;
  color: var(--ar-blekk);
  text-wrap: balance;
}
.ar-brodtekst { display: flex; flex-direction: column; gap: 18px; }
.ar-brodtekst p {
  margin: 0;
  font-size: var(--brod);
  line-height: var(--linje-brod-luftig);
  color: var(--ar-brod);
  text-wrap: pretty;
}
/* Brødskriften har ingen kursiv; vi bestemmer vinkelen selv. */
.ar-brodtekst em { font-style: oblique 14deg; }
/* Lenker inne i broedtekst trenger understreking — farge alene er for
 * svakt naar de staar midt i et avsnitt. */
.ar-side main .ar-brodtekst a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ar-rust) 45%, transparent);
}
.ar-side main .ar-brodtekst a:hover { text-decoration-color: var(--ar-terrakotta); }
.ar-strek { width: 56px; height: 1px; background: color-mix(in srgb, var(--ar-rust) 50%, transparent); }
.ar-kreditt {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--ar-rust);
}
/* Lenkene i krediteringen (Commons og lisensen) har krediteringens farge,
 * også på mørk hero, og understrek så de leses som lenker. */
.ar-side main .ar-kreditt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ar-bildetekst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod-liten);
  color: var(--ar-marine);
}

/* --- Hero: lys masthead ------------------------------------ */
/* Headeren ligger fast oppå, så luften over regnes fra under den. Uten
   --nav-height forsvant etiketten delvis bak headeren (Svindal, 5. okt 2026). */
.ar-hero--lys { background: var(--ar-krem); padding: calc(var(--nav-height) + clamp(32px, 4vw, 56px)) var(--ar-marg) clamp(48px, 5vw, 72px); }
/* Etiketten kan lenke til stedet og kommunen saken handler om. */
.ar-side main .ar-eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ar-rust) 35%, transparent); text-underline-offset: 4px; }
.ar-side main .ar-eyebrow a:hover { text-decoration-color: currentColor; }
.ar-hero--lys .ar-hero__inner {
  max-width: var(--ar-bredde);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 52px);
}
.ar-hero__topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
}
.ar-hero__topp span { color: var(--ar-sand); }
.ar-hero__stabel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}
.ar-hero--lys .ar-tittel { font-size: var(--ar-h1); }
/* Ingressen: brødskriften, ett hakk over brødteksten (--brod-loft, husets
 * rolle for anslag), ikke fet. I Cormorant kursiv på brødtekstens grad så
 * den mindre ut enn teksten under, fordi x-høyden er lavere (Marion, 7. okt
 * 2026). Størrelsen skiller den fra brødteksten, ikke vekten (Tom, samme
 * dag). */
.ar-hero__ingress {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--brod-loft);
  line-height: var(--linje-brod-tett);
  color: var(--ar-marine);
  max-width: 54ch;
}
/* Mørk hero: ingressen i egen blokk under bildet, i tekstspaltens bredde. */
.ar-ingress { padding-top: clamp(32px, 4vw, 56px); }
/* Spalta måles i ch på blokkens grad, som brødtekstspalta, så ingressen
 * og teksten under starter i samme kant. */
.ar-ingress__spalte { width: min(74ch, 100%); }
.ar-ingress .ar-hero__ingress { max-width: none; }
/* Tett på teksten under, så ingressen leses som innledningen til den og
 * ikke som en egen blokk: rundt 55 px (78 px var løsrevet, 34 for tett;
 * Tom 7. okt 2026). */
.ar-ingress + .ar-flyt { padding-top: clamp(24px, 3vw, 40px); }
/* Begynner flyten med tekst, står tekstspalta for luften selv. */
.ar-ingress + .ar-flyt:has(> .ar-seksjon--sentrert:first-child) { padding-top: 0; }
.ar-ingress + .ar-flyt > .ar-seksjon--sentrert:first-child .ar-brodtekst { margin-top: clamp(36px, 4vw, 56px); }
.ar-hero__ramme { border: 1px solid color-mix(in srgb, var(--ar-rust) 35%, transparent); border-radius: 14px; padding: 10px; }
.ar-hero__ramme img {
  width: 100%;
  aspect-ratio: 21 / 9.5;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.ar-hero__figur { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ar-hero__figur figcaption { text-align: center; letter-spacing: var(--sperring-lg); }

/* --- Hero: mørk fullbredde --------------------------------- */
.ar-hero--mork {
  position: relative;
  height: clamp(560px, 94vh, 900px);
  overflow: hidden;
  background: var(--ar-blekk);
}
/* Hele skjermhøyden, uten tak, når bildet bærer det (Lista fyr og Surfing, Tom 7. okt
 * 2026). svh, så mobilens adresselinje ikke skyver bunnen ut av bildet. */
.ar-hero--mork.ar-hero--full { height: 100vh; height: 100svh; min-height: 560px; }
.ar-hero--mork img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ar-hero-kb 3s ease-out both;
}
@keyframes ar-hero-kb { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ar-hero--mork img { animation: none; }
}
.ar-hero--mork .ar-hero__slor {
  position: absolute;
  inset: 0;
  /* Bare bak tittelen nederst; ingressen står ikke lenger på bildet. */
  background: linear-gradient(180deg, transparent 45%, rgba(10, 22, 40, 0.75) 100%);
}
.ar-hero--mork .ar-hero__topp {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  padding: 0 var(--ar-marg);
}
.ar-hero--mork .ar-hero__topp > div { max-width: var(--ar-bredde); margin: 0 auto; }
.ar-hero__pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(251, 249, 246, 0.45);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ar-papir);
  background: rgba(10, 22, 40, 0.3);
  backdrop-filter: blur(6px);
}
.ar-hero__pille:hover { background: rgba(10, 22, 40, 0.6); color: var(--ar-papir); }
.ar-hero--mork .ar-hero__bunn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--ar-marg) clamp(36px, 5vw, 60px);
}
.ar-hero--mork .ar-hero__bunn > div {
  max-width: var(--ar-bredde);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
.ar-hero--mork .ar-eyebrow { color: var(--ar-papir); }
.ar-hero--mork .ar-tittel {

  /* typografi-unntak: arver var(--font-display) fra .ar-tittel, der 300-700 er en ekte variabel akse. */
  font-weight: 300;
  font-size: var(--ar-h1);
  line-height: var(--linje-tett);
  color: var(--ar-papir);
}
/* Krediteringen i nedre høyre hjørne, liten og i vanlig skrift: under
   tittelen, i versaler og sperret, ble den dominerende (Marion, 10. okt
   2026, Lista fyr). __bunn er posisjonert og går til bildets nederkant. */
.ar-hero--mork .ar-kreditt {
  position: absolute;
  right: var(--ar-marg);
  bottom: 12px;
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-2xs);
  text-transform: none;
  color: var(--ar-papir);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

/* --- Seksjon: sentrert tekstspalte -------------------------- */
.ar-seksjon__hode {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.ar-seksjon__hode .ar-strek { width: 40px; background: color-mix(in srgb, var(--ar-rust) 45%, transparent); }
.ar-seksjon--sentrert .ar-brodtekst {
  width: min(74ch, 100%);
  margin: 0 auto;
}
/* Luften over teksten hører til overskriften. Uten overskrift kom de 28 px
 * i tillegg til luften mellom blokkene, og teksten havnet nærmere bildet
 * under enn bildet over (Lista fyr, Tom 7. okt 2026). */
.ar-seksjon__hode + .ar-brodtekst { margin-top: 28px; }
/* En kort tekst mellom to store bilder står midt mellom dem. Bildeteksten
 * under bildet over tar plass i luften over teksten, så like mye legges
 * under teksten: høyden på en krediteringslinje, målt til 33 px. */
.ar-bilde-full:has(figcaption) + .ar-seksjon--sentrert:has(+ .ar-bilde-full) { padding-bottom: 33px; }

/* --- Seksjon: tekst med bilde ved siden --------------------- */
.ar-med-bilde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(36px, 4vw, 72px);
  /* Toppjustert: bildet skal aldri begynne hoeyere enn overskriften. */
  align-items: start;
}
.ar-med-bilde__tekst { display: flex; flex-direction: column; gap: 18px; max-width: 660px; }
.ar-med-bilde--venstre .ar-med-bilde__tekst { order: 2; }
.ar-med-bilde--venstre .ar-med-bilde__figur { order: 1; }
.ar-med-bilde__figur { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ar-med-bilde__figur img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.ar-med-bilde__figur--staaende img { aspect-ratio: 3 / 3.4; }
.ar-med-bilde__figur--naturlig img { width: auto; max-width: 100%; height: auto; max-height: 85vh; aspect-ratio: auto; margin-inline: auto; }
/* Uten tittel: teksten midtstilles mot bildet i stedet for å henge i toppen. */
.ar-med-bilde:not(:has(.ar-h2)) { align-items: center; }
.ar-figurtekst {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.ar-figurtekst .ar-kreditt { white-space: nowrap; }

/* --- Bilde: rammet, full spaltebredde ----------------------- */
.ar-bilde-rammet { margin: 0 auto; }
.ar-bilde-rammet__ramme { border: 1px solid color-mix(in srgb, var(--ar-rust) 35%, transparent); border-radius: 14px; padding: 10px; }
.ar-bilde-rammet__ramme img {
  width: 100%;
  aspect-ratio: 21 / 10;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.ar-bilde-rammet figcaption { padding: 12px 6px 4px; }
/* Egne proporsjoner: stående bilder og små arkivfoto beskjæres ikke, og
 * vokser ikke forbi sin egen bredde. Rammen og teksten sentreres sammen. */
.ar-bilde-rammet--naturlig > * { max-width: calc(var(--naturlig) + 22px); margin-inline: auto; }
.ar-bilde-rammet--naturlig .ar-bilde-rammet__ramme img { aspect-ratio: auto; height: auto; }

/* --- Bilde: fullbredde, kant til kant ----------------------- */
.ar-bilde-full { margin: 0; }
/* Bildets egne proporsjoner, med tak på høyden. Før var høyden fast
 * (380–640 px) uansett bredde, og på en bred skjerm ble alt beskåret til
 * en smal stripe (Marion, 7. okt 2026). Stående bilder hører hjemme i
 * TekstMedBilde, ikke her. */
.ar-bilde-full img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  display: block;
}
.ar-bilde-full figcaption {
  max-width: var(--ar-bredde);
  margin: 0 auto;
  padding: 14px var(--ar-marg) 0;
}

/* --- Faktaboks «ledger» ------------------------------------ */
.ar-fakta { max-width: 840px; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--ar-rust) 45%, transparent); border-radius: 18px; padding: 11px; }
.ar-fakta__indre {
  border: 1px solid color-mix(in srgb, var(--ar-rust) 28%, transparent);
  border-radius: 10px;
  background: var(--ar-krem);
  padding: clamp(32px, 4vw, 56px);
}
.ar-fakta__tittel {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ar-h2);
  color: var(--ar-blekk);
  margin: 0 0 8px;
  text-align: center;
}
.ar-fakta__strek { width: 40px; height: 1px; background: color-mix(in srgb, var(--ar-rust) 45%, transparent); margin: 0 auto clamp(18px, 2vw, 26px); }
/* Kun ÉN strektype i boksen: den prikkede binder etikett til verdi.
 * Raddelere er fjernet — to like streker med motsatt betydning (binde
 * vs. skille) gjorde designspraaket uklart. Luft skiller radene. */
.ar-fakta__rad {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 17px 0;
}
.ar-fakta__navn {
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
  white-space: nowrap;
}
.ar-fakta__fyll {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(36, 61, 79, 0.35);
  transform: translateY(-4px);
}
.ar-fakta__verdi {
  font-family: var(--font-display);
  font-size: var(--ar-serif-s);
  line-height: var(--linje-kort);
  color: var(--ar-blekk);
  text-align: right;
  max-width: 62%;
}
/* Smal skjerm: etiketten får ikke plass ved siden av verdien (en lang
 * etikett som «Kjente surfespots på Lista» rant ut av boksen). Da står
 * verdien under etiketten, og utfyllingslinja har ingenting å binde. */
@media (max-width: 560px) {
  .ar-fakta__rad { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ar-fakta__navn { white-space: normal; }
  .ar-fakta__fyll { display: none; }
  .ar-fakta__verdi { text-align: left; max-width: none; }
}

/* --- Pustekort --------------------------------------------- */
.ar-pustekort {
  background: var(--ar-krem);
  border-radius: 18px;
  max-width: var(--ar-bredde);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 48px);
  text-align: center;
}
.ar-pustekort .ar-h2 {
  font-style: italic;
  font-size: var(--ar-h2);
}
.ar-pustekort .ar-brodtekst { max-width: 72ch; margin: 18px auto 0; }
.ar-pustekort .ar-brodtekst p { line-height: var(--linje-brod-luftig); }

/* --- Sitatbrudd -------------------------------------------- */
.ar-sitat { max-width: 900px; margin: 0 auto; text-align: center; }
.ar-sitat p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Eneste stoerrelse utenfor skalaen — sitatet SKAL foeles som et brudd. */
  font-size: clamp(28px, 1.3539rem + 1.6901vw, 46px);
  line-height: var(--linje-tittel);
  color: var(--ar-blekk);
  text-wrap: balance;
}
/* <cite> er kursiv fra nettleserens standardstil, og broedskriften har ingen
   kursiv. Vinkelen settes derfor av oss. Samme sak som .v-quote__source. */
.ar-sitat__kilde { display: block; margin-top: 18px; font-style: oblique 14deg; }

/* --- Punktliste i et kort (tilbudene ved Lista fyr) ---------- *
 * Kortet er sentrert, så punktene står sentrert under hverandre med en
 * liten prikk foran, ikke som en venstrestilt kulepunktliste i midten. */
.ar-punktliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--brod);
  line-height: var(--linje-brod-tett);
  color: var(--ar-brod);
}
.ar-punktliste li::before { content: '·'; color: var(--ar-rust); margin-right: 0.5em; }

/* --- Turstien (Farsund-kulturminnene) ----------------------- *
 * Tre stopp langs én sti, med avstanden skrevet på streken mellom dem.
 * Liggende på bred skjerm, stående på smal. Saken man leser har fylt
 * prikk; de to andre er lenker. */
.ar-tur {
  max-width: 980px;
  margin: 0 auto;
  background: var(--ar-krem);
  border-radius: 18px;
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.ar-tur__eyebrow { margin: 0 0 12px; }
.ar-tur__tittel { max-width: 24ch; margin: 0 auto clamp(32px, 4vw, 48px); }
.ar-tur__stopp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}
/* Streken går fra første til siste prikk, gjennom midten av hver kolonne. */
.ar-tur__stopp::before {
  content: '';
  position: absolute;
  top: 8px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  border-top: 1px dashed var(--ar-rust);
}
.ar-tur__punkt { position: relative; padding-top: 34px; }
.ar-tur__punkt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 17px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  border: 1px solid var(--ar-rust);
  background: var(--ar-krem);
}
.ar-tur__punkt--her::before { background: var(--ar-rust); }
/* Avstanden står på streken, midt mellom dette stoppet og det forrige. */
.ar-tur__mellom {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -2px);
  padding: 0 10px;
  background: var(--ar-krem);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xs);
  font-style: oblique 14deg;
  color: var(--ar-rust);
  white-space: nowrap;
}
.ar-tur__mal { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; }
.ar-tur__navn {
  font-family: var(--font-display);
  font-size: var(--ar-serif-s);
  line-height: var(--linje-tittel);
  color: var(--ar-blekk);
}
a.ar-tur__mal .ar-tur__navn {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ar-rust) 45%, transparent);
}
a.ar-tur__mal:hover .ar-tur__navn,
a.ar-tur__mal:focus-visible .ar-tur__navn { color: var(--ar-rust); text-decoration-color: currentColor; }
.ar-tur__tid,
.ar-tur__her {
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
}
.ar-tur__her { font-style: oblique 14deg; text-transform: none; letter-spacing: var(--sperring-xs); }
@media (max-width: 640px) {
  .ar-tur { text-align: left; }
  .ar-tur__tittel { margin-left: 0; }
  .ar-tur__stopp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ar-tur__stopp::before { top: 8px; bottom: 8px; left: 8px; right: auto; border-top: 0; border-left: 1px dashed var(--ar-rust); }
  .ar-tur__punkt { padding: 0 0 0 40px; }
  .ar-tur__punkt + .ar-tur__punkt { margin-top: 44px; }
  .ar-tur__punkt::before { left: 0; margin-left: 0; }
  .ar-tur__mellom { top: -32px; left: 40px; transform: none; padding: 0; }
  .ar-tur__mal { align-items: flex-start; }
}

/* --- Kildeliste + tilbake ---------------------------------- */
.ar-kilder { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(36, 61, 79, 0.18); padding-top: 44px; }
.ar-kilder__tittel {
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
  text-align: center;
  margin: 0 0 8px;
}
.ar-kilder__rad {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(36, 61, 79, 0.12);
  color: inherit;
}
.ar-kilder__nr {
  font-family: var(--font-display);
  font-size: var(--ar-serif-s);
  color: var(--ar-rust);
  min-width: 34px;
}
.ar-kilder__navn {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--ar-serif-s);
  color: var(--ar-blekk);
}
/* Dempet tekst skal baere kontrasten selv: --ar-gra gav 3,49 paa papir
 * (maalt da kildelista kom paa en maalt rute, 3. okt 2026). */
.ar-kilder__domene { font-size: var(--etikett-liten); letter-spacing: var(--sperring-sm); text-transform: uppercase; color: var(--tekst-dempet); white-space: nowrap; }
.ar-kilder__rad:hover .ar-kilder__navn,
.ar-kilder__rad:hover .ar-kilder__domene { color: var(--ar-rust); }

.ar-tilbake-pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--ar-rust) 45%, transparent);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
}
.ar-tilbake-pille:hover { border-color: var(--ar-terrakotta); color: var(--ar-terrakotta); }
.ar-avslutt { display: flex; justify-content: center; padding-bottom: clamp(40px, 4vw, 64px); }

/* --- Innfasing (progressiv forbedring) --------------------- */
.ar-side main [data-ar-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s ease; }
.ar-side main [data-ar-reveal].er-inne { opacity: 1; transform: none; }
html:not(.js) .ar-side main [data-ar-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ar-side main [data-ar-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Merknad: kort beskjed i tekstspalta -------------------- */
.ar-merknad {
  width: min(74ch, 100%);
  border-left: 2px solid var(--ar-rust);
  padding: 4px 0 4px clamp(16px, 2vw, 24px);
}
.ar-merknad__etikett {
  margin: 0 0 6px;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ar-rust);
}
.ar-merknad__tekst p { margin: 0; font-size: var(--brod); line-height: var(--linje-brod); }

/* Mobil: ingressen i brødtekstens grad og tettere linjer i brødteksten.
 * 24 px ingress og linjeavstand 1,85 ble for stort og luftig på en smal
 * skjerm (Marion, 10. okt 2026, Svindal gård). Ingressen skilles fortsatt
 * fra brødteksten med fargen. Står sist, så den slår reglene over. */
@media (max-width: 700px) {
  .ar-hero__ingress { font-size: var(--brod); }
  .ar-brodtekst p,
  .ar-pustekort .ar-brodtekst p { line-height: var(--linje-brod-tett); }
}