/* ==========================================================================
   SYSTEMET — bas
   Ren CSS. Inga ramverk, ingen byggkedja, inga beroenden.

   Ett LJUST system. Det overlever inte en mork vandning: grunden,
   harlinjerna, glaset och den svarta pillerknappen forutsatter alla vit
   botten. Vill man ha morkt ar det ett annat system, inte en omfargning.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NIVA 1 — ravarden. Det enda stallet att fargas om pa.
   Kanaler utan alfa, sa rollerna nedan kan satta genomskinligheten.
   -------------------------------------------------------------------------- */
:root {
  --raw-white: 255 255 255;
  --raw-paper: 244 244 244;
  --raw-glass: 243 243 243;
  --raw-ink:     0   0   0;
  --raw-glow:  192 227 239;
}

/* --------------------------------------------------------------------------
   TYPSKALAN

   VARJE steg ar flytande, inte bara rubrikerna. En skala dar rubriken vaxer
   medan brodtexten star kvar faller isar pa en bred skarm.

   Interpolationen gar mellan 360 px och 1920 px. Den ovre granden ar satt
   dar for att en 1600-granse gor att ALLT slutar vaxa pa en vanlig stor
   skarm — och en sida som stannar i sin tillvaxt vid 1600 ser inramad ut
   pa 2560. Varje clamp ar raknad, inte gissad:

       lutning  = (max - min) / (1920 - 360)
       vw-del   = lutning * 100
       skarning = min - lutning * 360        (skrivet i rem)

   Skalan OPPNAR SIG uppat. Avstandet mellan stegen ar mindre i smatt och
   storre i stort, sa hierarkin blir tydligare precis dar det finns plats
   for den.
   -------------------------------------------------------------------------- */
:root {
  --step--1: clamp(0.875rem,  0.8389rem + 0.1603vw,  1.03125rem);  /* 14 → 16,5 */
  --step-0:  clamp(1rem,      0.9423rem + 0.2564vw,  1.25rem);     /* 16 → 20   */
  --step-1:  clamp(1.1875rem, 1.0721rem + 0.5128vw,  1.6875rem);   /* 19 → 27   */
  --step-2:  clamp(1.4375rem, 1.25rem   + 0.8333vw,  2.25rem);     /* 23 → 36   */
  --step-3:  clamp(1.75rem,   1.4327rem + 1.4103vw,  3.125rem);    /* 28 → 50   */
  --step-4:  clamp(2.125rem,  1.6346rem + 2.1795vw,  4.25rem);     /* 34 → 68   */
  --step-5:  clamp(2.5625rem, 1.8269rem + 3.2692vw,  5.75rem);     /* 41 → 92   */
  --step-6:  clamp(4rem,      1.1731rem + 12.5641vw, 16.25rem);    /* 64 → 260  */

  /* RADAVSTAND SOM FUNKTION AV STORLEK.
     Ett enda varde for hela sidan finns inte. Stor text behover tatt
     radavstand for att halla ihop som en form; lasbar text behover luft
     for att ogat ska hitta tillbaka till radborjan. */
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-title:   1.25;
  --lh-lead:    1.45;
  --lh-body:    1.6;
  --lh-fine:    1.5;
  --lh-ui:      1;

  /* TECKENAVSTAND SOM FUNKTION AV STORLEK.
     Samma logik at andra hallet: stora grader ser luftiga ut och dras ihop,
     sma grader ser tata ut och slappas isar. Noll pa allt ar inte neutralt,
     det ar bara obeslutsamt. */
  --tr-wordmark: -0.035em;
  --tr-display:  -0.028em;
  --tr-heading:  -0.02em;
  --tr-title:    -0.012em;
  --tr-lead:     -0.005em;
  --tr-body:      0em;
  --tr-fine:      0.005em;

  /* INTERS EGNA METRIK. Trimmen nedan raknas ur de har, inte ur tal
     kopierade fran ett annat typsnitt.
       upm 2816 · ascender 2728 · descender -680 · capHeight 2048
       innehallsruta = (2728 + 680) / 2816 = 1.2102em
       cap-insteg    = (2728 - 2048) / 2816 = 0.2415em  */
  --content-box: 1.2102em;
  --cap-inset:   0.2415em;
}

/* --------------------------------------------------------------------------
   MATT

   Ocksa flytande, och med rejal tillvaxt uppat. Luften mellan sektionerna
   ska vaxa med typen — annars tranger en storre rubrik ihop en sida som
   inte gett den plats.
   -------------------------------------------------------------------------- */
:root {
  --space-xs:  clamp(0.5rem,  0.4423rem + 0.2564vw, 0.75rem);   /*  8 →  12 */
  --space-sm:  clamp(0.75rem, 0.6635rem + 0.3846vw, 1.125rem);  /* 12 →  18 */
  --space-md:  clamp(1rem,    0.8846rem + 0.5128vw, 1.5rem);    /* 16 →  24 */
  --space-lg:  clamp(1.5rem,  1.2692rem + 1.0256vw, 2.5rem);    /* 24 →  40 */
  --space-xl:  clamp(2rem,    1.5385rem + 2.0513vw, 4rem);      /* 32 →  64 */
  --space-2xl: clamp(3rem,    2.1923rem + 3.5897vw, 6.5rem);    /* 48 → 104 */
  --space-3xl: clamp(4rem,    2.6154rem + 6.1538vw, 10rem);     /* 64 → 160 */

  /* Rannan ar inte en liten konstant. Pa en bred skarm ska marginalen ut
     mot kanten VARA nagot — det ar halva skillnaden mellan en sida som
     andas och en som ser inklamd ut i en for smal spalt. */
  --gutter: clamp(1.25rem, 0.3846rem + 3.8462vw, 5rem);         /* 20 →  80 */

  /* TRE BREDDER, INTE EN.
     En enda max-bredd tvingar lasbar text och ett mediarutnat att dela
     matt, och da blir antingen texten for bred eller rutnatet for smalt.
       wide  ramen: rutnat, media, sidhuvud och sidfot
       mid   sektioner som inte ska breda ut sig
       text  lasmatt, for nar en spalt star ensam */
  --w-wide: 110rem;   /* 1760 */
  --w-mid:   84rem;   /* 1344 */
  --w-text:  44rem;   /*  704 */
}

/* --------------------------------------------------------------------------
   NIVA 2 — roller. Det ar de har sidor laser, aldrig ravardena.
   -------------------------------------------------------------------------- */
:root {
  --bg:             rgb(var(--raw-white));
  --bg-alt:         rgb(var(--raw-paper));

  /* Ett material, tre anvandningar. Glas och nav ar samma 80 % over 10 px
     oskarpa men halls isar med flit — tva ytor som rakar se lika ut ska
     ga att tema om var for sig. */
  --surface:        rgb(var(--raw-glass) / 0.8);
  --surface-raised: rgb(var(--raw-white) / 0.85);
  --surface-tile:   rgb(var(--raw-paper));

  --ink:            rgb(var(--raw-ink));
  --ink-muted:      rgb(var(--raw-ink) / 0.60);
  --ink-subtle:     rgb(var(--raw-ink) / 0.1);

  --accent:         rgb(var(--raw-ink));
  --accent-ink:     rgb(var(--raw-white));
  --line:           rgb(var(--raw-ink) / 0.1);
  --glow:           rgb(var(--raw-glow));

  /* EN familj. Hierarkin ar storlek, aldrig vikt.
     Inter ar vald for att den ar den enda variabla familjen pa Google Fonts
     som gar hela vagen ner till 100. Den vikten finns bara i ordbilden och
     ar inte utbytbar mot 200 — strecken tjocknar synligt. */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --weight-hair:    100;   /* bara den overdimensionerade ordbilden */
  --weight-display: 300;   /* alla rubriker */
  --weight-body:    300;   /* all brodtext */
  --weight-base:    400;   /* bas */
  --weight-ui:      500;   /* knappar och navets ena fyllda etikett */

  /* Form. Radier 6/8/10. Skuggor finns inte. */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 10px;
  --border:    1px;

  /* Rorelse */
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 700ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Glas */
  --blur-glass: 10px;
  --blur-panel: 37.5px;
}

/* --------------------------------------------------------------------------
   GRUND

   INGEN scroll-behavior: smooth har. Den lagger en egen animation ovanpa
   anvandarens scroll, och pa en styrplatta blir resultatet att sidan
   fastnar och fjadrar tillbaka.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-x: clip;
}

/* `overflow-x: hidden` pa body gor BODY till en scrollbehallare. Da slutar
   position: sticky folja viewporten och sidhuvudet borjar fastna och hoppa.
   `clip` klipper bort det som sticker ut utan att skapa behallaren. */
@supports (overflow: clip) {
  body { overflow-x: clip }
}

img, svg, video { display: block; max-width: 100% }

a { color: inherit; text-decoration: none }

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  letter-spacing: 0;
}

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

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

/* --------------------------------------------------------------------------
   BEHALLARE
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--mid  { max-width: var(--w-mid) }
.wrap--text { max-width: var(--w-text) }

/* Full bredd, men behall rannan. For det som ska ga ut i kanten utan att
   klistra i skarmen. */
.wrap--bleed { max-width: none }

/* --------------------------------------------------------------------------
   TEXTTRIM — load-bearing, inte en finess.

   Systemet mater BLACK, inte radlador. Overskottet ovanfor versalhojden och
   under baslinjen tas bort geometriskt, sa att det som staller sig i grid
   staller sig mot bokstaven och inte mot en osynlig lada runt den.

   Vardet RAKNAS ur --lh och Inters metrik. Det ar inte ett magiskt tal:

       overskott = (innehallsruta - radavstand) / 2 + cap-insteg

   `text-box: trim-both cap alphabetic` sager samma sak i en rad, men finns
   bara i Chromium och gor INGENTING i en flexbehallare — vilket ar precis
   vad en ordvis reveal renderar i.

   Trimmen galler DISPLAY, aldrig brodtext. I lasbar text ar radavstandet
   hela poangen och ska inte atas upp.
   -------------------------------------------------------------------------- */
.trim {
  margin-block: calc(0px - ((var(--content-box) - var(--lh) * 1em) / 2 + var(--cap-inset)));
}

/* --------------------------------------------------------------------------
   TYP

   Varje roll satter fyra saker tillsammans: grad, vikt, radavstand och
   teckenavstand. De hor ihop och far aldrig plockas isar.

   RYTMEN LIGGER PA DE TRIMMADE ELEMENTEN, INTE PA GRANNARNA.

   Trimmen mats i em och vaxer alltsa med graden — 11 px vid 28 px text,
   31 px vid 92 px. Ett fast marginalvarde bredvid den ger ett gap som
   KRYMPER nar typen vaxer: vid 92 px at trimmen 31 av 40 px och nio pixlar
   blev kvar. Darfor bar rubriken sjalv sin marginal, med trimmen adderad
   tillbaka:

       marginal = onskat gap - trim

   Och gapet mats i EM AV RUBRIKEN SJALV, inte i ett globalt matt. Luften
   runt en rubrik ar en funktion av dess egen grad: 24 px over en 50 px
   rubrik ar proportionellt for lite, medan samma 24 over en 28 px rubrik
   ar lagom. Med em foljer avstandet graden hela vagen upp. Allt annat har
   margin: 0, sa ingenting kollapsar mot nagot och <p> inte drar in
   webblasarens egen em-marginal bakvagen.
   -------------------------------------------------------------------------- */
.wordmark,
.display,
.heading,
.title,
.lead,
.body,
.fine,
.eyebrow { margin: 0 }

.wordmark {
  --lh: var(--lh-display);
  --trim: calc((var(--content-box) - var(--lh) * 1em) / 2 + var(--cap-inset));
  font-size: var(--step-6);
  font-weight: var(--weight-hair);
  line-height: var(--lh);
  letter-spacing: var(--tr-wordmark);
  margin-block: calc(0px - var(--trim)) calc(0.3em - var(--trim));
}
.wordmark:last-child { margin-bottom: calc(0px - var(--trim)) }

.display {
  --lh: var(--lh-display);
  --trim: calc((var(--content-box) - var(--lh) * 1em) / 2 + var(--cap-inset));
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: var(--lh);
  letter-spacing: var(--tr-display);
  margin-block: calc(0.4em - var(--trim)) calc(0.55em - var(--trim));
  max-width: 18ch;
  text-wrap: balance;
}
.display:first-child { margin-top: calc(0px - var(--trim)) }
.display:last-child  { margin-bottom: calc(0px - var(--trim)) }

.display--sm { font-size: var(--step-4); max-width: 22ch }

.heading {
  --lh: var(--lh-heading);
  --trim: calc((var(--content-box) - var(--lh) * 1em) / 2 + var(--cap-inset));
  font-size: var(--step-3);
  font-weight: var(--weight-display);
  line-height: var(--lh);
  letter-spacing: var(--tr-heading);
  margin-block: calc(0.5em - var(--trim)) calc(0.7em - var(--trim));
  max-width: 22ch;
  text-wrap: balance;
}
.heading:first-child { margin-top: calc(0px - var(--trim)) }
.heading:last-child  { margin-bottom: calc(0px - var(--trim)) }

.title {
  font-size: var(--step-1);
  font-weight: var(--weight-display);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}

.lead {
  font-size: var(--step-1);
  font-weight: var(--weight-body);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  max-width: 46ch;
  text-wrap: pretty;
}

.body {
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  max-width: 64ch;
  text-wrap: pretty;
}

.fine {
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  letter-spacing: var(--tr-fine);
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* En rubrik dampar sin egen forsta sats sa att den andra landar.
   Systemets enda betoningsgrepp — aldrig fetstil, aldrig farg. */
.muted { color: var(--ink-muted) }

.eyebrow {
  font-size: var(--step--1);
  font-weight: var(--weight-ui);
  line-height: var(--lh-ui);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.num { font-variant-numeric: tabular-nums lining-nums }

.rule { border: 0; border-top: var(--border) solid var(--line); margin: 0 }

/* Det enda som INTE bors av en rubrik: avstandet ner till en knapprad. */
.lead + .row,
.body + .row { margin-top: var(--space-xl) }

/* --------------------------------------------------------------------------
   YTOR

   GLAS AR SKORT. En `filter` eller en `opacity` under 1 pa NAGON foralder
   till ett glaselement skapar en backdrop-rot. Oskarpan samplar da en tom
   yta, kostar full GPU-tid och renderar ingenting alls.
   -------------------------------------------------------------------------- */
.glass {
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border-radius: var(--radius-lg);
}

.panel {
  background: var(--surface-raised);
  -webkit-backdrop-filter: blur(var(--blur-panel));
  backdrop-filter: blur(var(--blur-panel));
  border-radius: var(--radius-lg);
}

.tile { background: var(--surface-tile); border-radius: var(--radius-sm) }

.card {
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg);
  background: var(--bg);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(var(--raw-glass)) }
  .panel { background: rgb(var(--raw-white)) }
}

/* --------------------------------------------------------------------------
   KNAPPEN

   Systemets enda accent: ett svart piller med en vit pilbricka i. Hovern ar
   tre saker samtidigt — ett lyft pa en pixel, tva pilar som korsar varandra,
   och en skev glans som sveper bredden pa 700 ms.

   Hojden ar last i px, inte i em. En knapp som vaxer med typskalan blir en
   annan knapp pa en stor skarm, och traffytan ska vara densamma overallt.
   -------------------------------------------------------------------------- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 48px;
  padding: 0 4px 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-ui);
  line-height: var(--lh-ui);
  letter-spacing: 0.002em;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--duration) var(--ease);
}

.pill:hover { transform: translateY(-1px) }

.pill__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-ink);
  color: var(--accent);
  overflow: hidden;
}

.pill__arrow {
  grid-area: 1 / 1;
  font-style: normal;
  line-height: 1;
  transition: transform var(--duration) var(--ease);
}

/* Forskjutningen mats i BRICKANS bredd, inte pilens. En procentsats har
   raknas pa elementet som flyttas — 160 % av en 14 px pil ar 22 px och
   racker inte ut ur en 40 px bricka, sa pilen tittar fram i kanten. */
.pill__arrow--next { transform: translateX(-2.75rem) }
.pill:hover .pill__arrow { transform: translateX(2.75rem) }
.pill:hover .pill__arrow--next { transform: translateX(0) }

.pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 36%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(var(--raw-white) / 0.18), transparent);
  transition: transform var(--duration-slow) var(--ease);
  pointer-events: none;
}
.pill:hover::after { transform: skewX(-20deg) translateX(420%) }

.pill--ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: 20px;
  box-shadow: inset 0 0 0 var(--border) var(--line);
}
.pill--ghost:hover { box-shadow: inset 0 0 0 var(--border) var(--ink) }
.pill--ghost::after { display: none }

.pill--sm { height: 40px; padding-left: 16px }
.pill--sm .pill__tile { width: 32px; height: 32px }
.pill--sm.pill--ghost { padding-inline: 16px }

/* Textlank med travande pil. Systemets tredje niva av uppmaning. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: var(--weight-ui);
  line-height: var(--lh-ui);
}
.link i { font-style: normal; transition: transform var(--duration) var(--ease) }
.link:hover i { transform: translateX(3px) }

/* --------------------------------------------------------------------------
   FALT
   -------------------------------------------------------------------------- */
.field {
  width: 100%;
  height: 48px;
  padding-inline: var(--space-md);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--lh-ui);
  transition: border-color var(--duration-fast) var(--ease);
}
textarea.field {
  height: auto;
  padding-block: 0.85rem;
  line-height: var(--lh-body);
  resize: vertical;
  min-height: 8rem;
}
.field:hover { border-color: rgb(var(--raw-ink) / 0.25) }
.field:focus { border-color: var(--ink); outline: none }
.field::placeholder { color: var(--ink-muted) }

.label {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--step--1);
  line-height: var(--lh-fine);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   ANKOMST

   Slutvardet MASTE vara blur(0rem). Skriver man `none` byter vardet typ
   mitt i interpolationen och overgangen hoppar.

   theme.js tar bort filter och clip-path helt nar overgangen spelat klart.
   Varje element med en av dem far ett eget kompositlager, och attio lager
   som ligger kvar for alltid ar vad som far en sida att hacka vid scroll.

   Fem ankomster, en per sorts innehall. De blandas aldrig inom en sektion.
   -------------------------------------------------------------------------- */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  filter: blur(0.75rem);
  transition:
    opacity var(--duration) var(--ease) var(--d, 0ms),
    transform var(--duration-slow) var(--ease) var(--d, 0ms),
    filter var(--duration-slow) var(--ease) var(--d, 0ms);
}
.motion-ready [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0rem);
}

.js [data-reveal="mask"] {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease) var(--d, 0ms);
}
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0% 0) }

.js [data-reveal="scale"] {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(0.5rem);
  transition:
    opacity var(--duration) var(--ease) var(--d, 0ms),
    transform 1100ms var(--ease) var(--d, 0ms),
    filter var(--duration-slow) var(--ease) var(--d, 0ms);
}
.js [data-reveal="scale"].is-in { opacity: 1; transform: scale(1); filter: blur(0rem) }

.js [data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease) var(--d, 0ms);
}
.js [data-reveal="line"].is-in { transform: scaleX(1) }

.js [data-reveal="side"] {
  opacity: 0;
  transform: translateX(1.25rem);
  filter: blur(0.5rem);
  transition:
    opacity var(--duration) var(--ease) var(--d, 0ms),
    transform var(--duration-slow) var(--ease) var(--d, 0ms),
    filter var(--duration-slow) var(--ease) var(--d, 0ms);
}
.js [data-reveal="side"].is-in { opacity: 1; transform: translateX(0); filter: blur(0rem) }

.motion-ready [data-stagger] > * { transition-delay: var(--d, 0ms) }

.d1 { --d: 80ms }
.d2 { --d: 160ms }
.d3 { --d: 240ms }
.d4 { --d: 320ms }

/* Dampa, ta inte bort. Sidan loser fortfarande upp sig. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] {
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity 200ms linear var(--d, 0ms) !important;
  }
  .pill, .pill__arrow, .pill::after, .link i { transition: none !important }
}

/* --------------------------------------------------------------------------
   LAYOUT

   RUTNATEN HAR LAST KOLUMNANTAL, inte auto-fit.

   `repeat(auto-fit, minmax(13rem, 1fr))` ser flexibelt ut men ar en falla:
   antalet kolumner foljer BEHALLARENS bredd. Nar ramen vaxte fran 1200 till
   1760 px blev ett fyrkolumnsrutnat atta kolumner utan att nagon bad om det.
   Ett rutnat ska ha det antal kolumner det ar ritat for, och byta antal pa
   brytpunkter man valt sjalv.

   minmax(0, 1fr) i stallet for bara 1fr: en cell med lang text eller ett
   brett barn far annars minsta-innehallsbredd som golv och spranger raden.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--space-3xl) }
.section--tight { padding-block: var(--space-2xl) }
.stack { display: grid; gap: var(--space-lg) }
.row   { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center }

.grid-2,
.grid-3,
.grid-4 { display: grid; gap: var(--space-lg) }

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }

/* Tva steg ner, inte ett. Ett fyrkolumnsrutnat som gar direkt till en
   kolumn slosar bort hela mellanlaget pa en platta. */
@media (max-width: 68rem) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 44rem) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: minmax(0, 1fr) }
}

/* Sektionshuvud: samma varje gang, sa ogat slipper leta efter var
   sektionen borjar. Bredden foljer lasmattet, inte ramen. */
.head { max-width: var(--w-text); margin-bottom: var(--space-2xl) }
.head--center { margin-inline: auto; text-align: center }
.head--center .body, .head--center .lead { margin-inline: auto }

/* Avstandet under ett sektionshuvud tillhor sektionen, inte innehallet. */
.head + * { margin-top: 0 }

/* Vaktposten for sidhuvudets tillstand. En pixel, upphavd av sin egen
   marginal — mekanik, inte form, och darfor en klass och inte en inline-stil. */
.sentinel { display: block; height: 1px; margin-bottom: -1px }


/* Shared finishing rules. Kept in the base so every version inherits them. */
[hidden] { display: none !important }
[id] { scroll-margin-top: 6.5rem }
:root { --duration-enter: 850ms }
.pill:not(:has(.pill__tile)) { padding-inline: 20px }
.pill__tile { flex: none }
.pill:active { transform: translateY(0) }
.pill:disabled { opacity: .45; cursor: not-allowed; transform: none }
.pill--ghost { box-shadow: none; border: var(--border) solid var(--line) }
.pill--ghost:hover { box-shadow: none; border-color: var(--ink) }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.link { min-height: 44px; letter-spacing: var(--tr-fine) }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: 1rem; background: var(--ink); color: var(--bg); transform: translateY(-200%) }
.skip-link:focus { transform: none }
.motion-ready [data-reveal] { transition-duration: 450ms, var(--duration-enter), var(--duration-enter) }
.motion-ready [data-reveal="mask"] { transition-duration: var(--duration-enter) }
.motion-ready [data-reveal="line"] { transition-duration: var(--duration-enter) }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important }
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important }
}

.announce :focus-visible { outline-color: var(--accent-ink) }