/* ==========================================================================
   theme.css - sajtens uttryck. Laddas sist, efter de övriga filerna.

   Beslutat 2026-09-18 efter en A/B-jämförelse. Innehåller:
     1. Fraunces som rubriktypsnitt, Libre Franklin som brödtext
     2. Ojämnt knivrutnät, så urvalet inte läser som lagerlista
     3. Brytningar i takten: helbredds bild och citat
     4. Mörka sektioner och mörk sidfot - sidans viktigaste grepp

   Ingen accentfärg. Sajten är helt neutral i tonerna, enligt handovern:
   fotografierna ska stå för färgen. En kopparton prövades och ströks
   2026-09-18.
   ========================================================================== */

:root {

  /* 3. Typografi. Fraunces är en display-serif med oregelbunden axel, som
        läser som hantverk snarare än system. Libre Franklin flyttar ner och
        bär brödtext, meta och admin i stället.                             */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

}

/* --- Typografiska följdjusteringar ---------------------------------------
   Fraunces är bredare och tyngre på samma punktstorlek än Libre Franklin,
   så skalan behöver dras tillbaka något och spärras mindre.              */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.hero__title { font-size: clamp(2.6rem, 5.5vw + 1rem, 4.75rem); line-height: 1.02; }
.hero__lede { font-family: var(--font-body); font-size: var(--text-1); max-width: 34ch; }

/* Etiketter, knappar och meta ska förbli grotesk även när rubrikerna är
   serif. Annars blir sidan sirlig i stället för hantverksmässig.         */
.eyebrow, .status, .btn, .link-arrow, .card__meta, .facts,
.field__label, .spec dt, .site-nav a, .site-footer__nav a,
.back-link, .notice, .section-head__note, .steps__num {
  font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}

/* --- 4. Ojämnt knivrutnät ------------------------------------------------
   Första kortet tar dubbel bredd. Ett urval behandlar inte alla objekt
   lika, det är hela skillnaden mot en lagerlista.                        */

@media (min-width: 900px) {
  .grid--feature {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Ett stående kort blir aldrig dubbelt brett: i 4:5 skulle det bli runt
     1000 px högt. Då blir alla kort lika stora (Peter 2026-10-06). */
  .grid--feature > .card:first-child:not(.card--portrait) {
    grid-column: span 2;
  }
  .grid--feature > .card:first-child .ph {
    --ph-ratio: 16 / 9;
  }
}

/* --- 5. Brytningar i takten ---------------------------------------------- */

/* Helbredds bild som går ut ur containern och bryter kolumnrytmen. */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.bleed .ph { border-left: 0; border-right: 0; border-radius: 0; }

/* Citat. En röst som inte är sajtens egen, och den enda platsen på sidan
   där texten är stor och centrerad. */
.pull-quote {
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.pull-quote figcaption {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ==========================================================================
   6. Den andra ytan.

   Sajten har två bakgrunder: #E6E3DD och #262320. Den mörka bär ett block
   per sida och sidfoten. Tonskiftet är det som delar upp sidan - inga
   mellanytor, inga extra nyanser.

   Rollvariablerna sätts om lokalt. Komponenterna rör vi inte, de läser
   roller och vänder därför med automatiskt.
   ========================================================================== */

.section--dark,
.site-footer--dark {
  --bg-page:      #262320;
  --bg-surface:   #262320;
  --bg-fill:      #332F2B;
  --bg-inverse:   #E6E3DD;

  --fg-default:   #E6E3DD;   /* 12,2:1 mot ytan */
  --fg-strong:    #E6E3DD;
  --fg-muted:     #BFBAB0;   /*  8,1:1 */
  --fg-inverse:   #262320;
  --fg-decor:     #4A443E;

  --line:         #3B3631;
  --line-strong:  #4A443E;
  --focus-ring:   #E6E3DD;

  background: var(--bg-page);
  color: var(--fg-default);
}

/* På mörk yta bär ljusheten. */
.section--dark .eyebrow,
.section--dark .status:not(.status--archive),
.section--dark .link-arrow { color: #E6E3DD; }
.section--dark .link-arrow { border-bottom-color: color-mix(in srgb, #E6E3DD 35%, transparent); }

.section--dark .btn--primary { background: #E6E3DD; color: #262320; }
.section--dark .btn--primary:hover { background: #BFBAB0; }

/* En mörk sektion behöver ingen linje mot nästa - tonskiftet gör jobbet. */
.section--dark.section--divided { border-top: 0; }

/* --- Sidfoten -------------------------------------------------------------
   Samma yta som de mörka sektionerna, inte en tredje nyans.            */

.site-footer--dark { border-top: 0; padding-bottom: var(--space-6); }
.site-footer--dark .site-footer__brand img { filter: invert(1) brightness(1.08); }
.site-footer--dark .site-footer__legal { border-top-color: #3B3631; }