/* ------------------------------------------------------------------ */
/* Layout for design.holstadvolley.com. Ingenting her er en del av     */
/* designsystemet — apper får bare det som ligger i /v1/.              */
/* ------------------------------------------------------------------ */

@layer ds.theme, ds.base, ds.components, holstad, side;

@layer side {
  body { margin: 0; background: var(--ds-color-neutral-background-default); }

  /* --- Topp og ramme ------------------------------------------------ */
  .topp {
    position: sticky; top: 0; z-index: 10;
    display: flex; flex-wrap: wrap; gap: var(--ds-size-4); align-items: center;
    padding: var(--ds-size-3) var(--ds-size-6);
    background: var(--ds-color-neutral-background-default);
    border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
  }
  .topp-merke { display: flex; align-items: center; gap: var(--ds-size-3); text-decoration: none; color: inherit; }
  .topp-merke img { height: 36px; width: auto; display: block; }
  /* Menyen står fast ved logoen; kontrollene skyves til høyre */
  .topp-nav { display: flex; gap: var(--ds-size-1); margin-right: auto; }
  .kontroller { display: flex; flex-wrap: wrap; gap: var(--ds-size-4); align-items: center; }
  .kontroller fieldset { border: 0; padding: 0; margin: 0; }

  .ramme { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1240px; margin: 0 auto; }
  .sidemeny {
    position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 72px); overflow: auto;
    padding: var(--ds-size-8) var(--ds-size-4); font-size: var(--ds-body-sm-font-size);
  }
  .sidemeny p { margin: var(--ds-size-5) 0 var(--ds-size-1); font-weight: 700; color: var(--ds-color-neutral-text-subtle); }
  .sidemeny p:first-child { margin-top: 0; }
  .sidemeny a { display: block; padding: var(--ds-size-1) 0; text-decoration: none; }
  .sidemeny a:hover { text-decoration: underline; }
  /* Seksjonen du leser nå, satt av site.js */
  .sidemeny a[aria-current] { font-weight: 700; color: var(--ds-color-accent-text-default); }
  /* Sidemenyen er en ds-details som bare foldes sammen på mobil. På
     stor skjerm er den alltid åpen, uten overskrift og ramme. */
  @media (min-width: 901px) {
    .sidemeny > .ds-details { --dsc-details-background: transparent; --dsc-details-border-color: transparent; border: 0; background: none; }
    .sidemeny > .ds-details > summary { display: none; }
    .sidemeny > .ds-details > div { margin: 0; }
  }
  main { padding: var(--ds-size-8) var(--ds-size-6) var(--ds-size-18); display: grid; gap: var(--ds-size-18); min-width: 0; align-content: start; }
  .gruppe { display: grid; gap: var(--ds-size-12); }
  .gruppe > header { display: grid; gap: var(--ds-size-2); border-bottom: 2px solid var(--ds-color-neutral-border-default); padding-bottom: var(--ds-size-4); }
  .komponent { display: grid; gap: var(--ds-size-4); scroll-margin-top: 88px; }
  .gruppe { scroll-margin-top: 88px; }
  .komponent > p, .gruppe > header > p { max-width: 65ch; }
  .komponent > p { color: var(--ds-color-neutral-text-subtle); }
  /* Demoflatene er ds-card; .scene gir bare rutenettet */
  .scene { display: grid; gap: var(--ds-size-5); }
  /* Grid-barn krymper ikke under innholdets bredde uten dette */
  main > *, .gruppe > *, .komponent > *, .scene > * { min-width: 0; }
  .rad { display: flex; flex-wrap: wrap; gap: var(--ds-size-3); align-items: center; }
  .stabel { display: grid; gap: var(--ds-size-3); }
  .kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-size-5); }
  /* ds-paragraph data-size="xs" med dempet farge */
  .merknad { color: var(--ds-color-neutral-text-subtle); margin: 0; }
  .tabell { overflow-x: auto; }
  .tabell .ds-table { min-width: 100%; }
  svg.ikon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .bunn {
    border-top: 1px solid var(--ds-color-neutral-border-subtle);
    padding: var(--ds-size-6); font-size: var(--ds-body-sm-font-size); color: var(--ds-color-neutral-text-subtle);
    display: flex; flex-wrap: wrap; gap: var(--ds-size-4); justify-content: space-between;
    max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  }

  /* --- Komponentsida ------------------------------------------------ */
  .skala { overflow-x: auto; }
  .skala table { border-collapse: separate; border-spacing: 4px; font-size: 11px; }
  .skala th { text-align: left; font-weight: 500; color: var(--ds-color-neutral-text-subtle); white-space: nowrap; }
  .skala td { width: 48px; height: 40px; border-radius: var(--ds-border-radius-sm); border: 1px solid var(--ds-color-neutral-border-subtle); }
  .typeprøve { display: grid; grid-template-columns: 120px 1fr; gap: var(--ds-size-2) var(--ds-size-5); align-items: baseline; }
  .typeprøve code { font-size: 12px; color: var(--ds-color-neutral-text-subtle); }
  .eksempel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--ds-size-6); align-items: start; }
  .fakta { display: grid; gap: var(--ds-size-2); }
  .fakta li { display: flex; gap: var(--ds-size-2); align-items: center; }

  /* --- Kom i gang --------------------------------------------------- */
  .enkel { max-width: 880px; margin: 0 auto; box-sizing: border-box; gap: var(--ds-size-12); }
  .steg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-size-5); }
  .steg-nr { font-family: var(--bebas); font-size: 72px; line-height: .85; color: var(--holstad-rod-500); min-width: 1ch; }
  .kode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-size-4); align-items: start; }
  /* URL-ene er poenget, så de brekkes heller enn å gjemmes bak rulling */
  .kode pre { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  .resultat { align-items: start; }

  /* --- Merkevaresida ------------------------------------------------ */
  /* Merkevarefargene kommer fra designsystemet som --holstad-*. De er
     faste verdier og like i lys og mørk modus. */
  .mv {
    --bebas: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
    --spectral: "Spectral", Georgia, serif;
  }

  /* --- Omslag ------------------------------------------------------ */
  /* Guidens faste fargepar: flate, tall i tone og tekst. Brukes av
     omslaget og kapittelflisene. */
  .par-rod        { --flate: var(--holstad-rod-500);    --tone: var(--holstad-rod-600);    --tekst: #fff; }
  .par-marine     { --flate: var(--holstad-bla-900); --tone: var(--holstad-bla-800); --tekst: #fff; }
  .par-arvebla    { --flate: var(--holstad-bla-600); --tone: var(--holstad-bla-700); --tekst: #fff; }
  .par-rod-lys    { --flate: var(--holstad-rod-100);    --tone: var(--holstad-rod-200);    --tekst: var(--holstad-bla-900); }
  .par-marine-lys { --flate: var(--holstad-bla-100); --tone: var(--holstad-bla-200); --tekst: var(--holstad-bla-900); }
  .par-hvit       { --flate: #fff;              --tone: var(--holstad-rod-100);    --tekst: var(--holstad-rod-500); }
  .par-svart      { --flate: var(--holstad-bla-950);      --tone: var(--holstad-bla-800); --tekst: #fff; }

  .omslag {
    max-width: 1240px; margin: 0 auto; box-sizing: border-box;
    padding: var(--ds-size-10) var(--ds-size-6) var(--ds-size-12);
    display: grid; gap: var(--ds-size-8);
  }
  .omslag-topp { display: flex; flex-wrap: wrap; gap: var(--ds-size-6); justify-content: space-between; align-items: flex-start; }
  .omslag-tittel {
    margin: 0; font-family: var(--bebas); font-weight: 400; color: var(--holstad-bla-900);
    font-size: clamp(72px, 12vw, 176px); line-height: .85;
  }
  .omslag-meta { margin: 0; text-align: right; font-weight: 500; color: var(--holstad-bla-900); }

  /* Ett foto, ett tall, én blokk — to ganger */
  .omslag-band {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    height: clamp(320px, 36vw, 460px); border-radius: var(--ds-border-radius-lg); overflow: hidden;
  }
  .omslag-foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
  .omslag-blokk {
    position: relative; overflow: hidden; display: flex; align-items: flex-end;
    padding: var(--ds-size-6); background: var(--flate); color: var(--tekst);
  }
  .omslag-blokk .tall {
    position: absolute; top: -.1em; left: -.04em; font-family: var(--bebas); line-height: 1;
    font-size: clamp(220px, 27vw, 360px); color: var(--tone);
  }
  .omslag-blokk .budskap { position: relative; margin: 0; font-family: var(--bebas); font-size: clamp(40px, 4.4vw, 64px); line-height: .9; }
  .omslag-ingress { display: flex; flex-wrap: wrap; gap: var(--ds-size-2) var(--ds-size-6); justify-content: space-between; align-items: baseline; }
  .omslag-ingress .ds-paragraph[data-size="lg"] { max-width: 48ch; margin: 0; font-weight: 500; }

  /* Kapittelflisene er ds-card-lenker i fargeparene */
  .kapitler ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-size-4); }
  .kapittel {
    --dsc-card-background: var(--flate); --dsc-card-background--hover: var(--flate); --dsc-card-color: var(--tekst);
    --dsc-card-border-color: transparent; --dsc-card-padding: var(--ds-size-5);
    position: relative; min-height: 200px; height: 100%;
    display: grid; align-content: end; gap: var(--ds-size-1);
  }
  .kapittel.par-hvit { --dsc-card-border-color: var(--ds-color-neutral-border-subtle); }
  .kapittel .tall {
    position: absolute; top: -.14em; right: -.02em; font-family: var(--bebas); line-height: 1;
    font-size: 180px; color: var(--tone); transition: transform .2s;
  }
  .kapittel:hover .tall { transform: translateY(6px); }
  .kapittel b { position: relative; font-family: var(--bebas); font-weight: 400; font-size: 40px; line-height: .95; }
  .kapittel span:not(.tall) { position: relative; font-size: var(--ds-body-sm-font-size); max-width: 30ch; }
  .par-hvit.kapittel span:not(.tall) { color: var(--holstad-bla-900); }
  @media (prefers-reduced-motion: reduce) { .kapittel .tall { transition: none; } }

  /* Fotografi: gode motiver */
  .motiver { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ds-size-4); }
  .motiver figure { margin: 0; display: grid; gap: var(--ds-size-2); align-content: start; font-size: var(--ds-body-sm-font-size); }
  .motiver img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-border-radius-md); }
  .motiver strong { display: block; }

  /* Fargeprøver */
  .prøver { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ds-size-5); }
  .prøve { display: grid; gap: var(--ds-size-3); margin: 0; align-content: start; }
  .prøve-flate {
    aspect-ratio: 4 / 3; border-radius: var(--ds-border-radius-lg); border: 1px solid rgb(0 0 0 / .08);
    display: flex; align-items: flex-end; padding: var(--ds-size-3);
  }
  .prøve figcaption { display: grid; gap: var(--ds-size-2); }
  .prøve-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--ds-size-2); }
  .prøve-navn { font-weight: 700; flex: 1 0 100%; }
  .verdier { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--ds-size-3); margin: 0; font-size: var(--ds-body-sm-font-size); }
  .verdier dt { color: var(--ds-color-neutral-text-subtle); }
  .verdier dd { margin: 0; font-variant-numeric: tabular-nums; }

  /* Faste kolonner, så en skala på ti eller elleve toner ikke ender med
     én eller to alene på siste rad */
  .toner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-size-3); }
  .tone { display: grid; gap: var(--ds-size-2); margin: 0; min-width: 0; align-content: start; font-size: var(--ds-body-xs-font-size); }
  .tone-flate {
    min-height: 112px; box-sizing: border-box; border-radius: var(--ds-border-radius-md); border: 1px solid rgb(0 0 0 / .06);
    display: grid; align-content: space-between; padding: var(--ds-size-3);
  }
  .tone-flate b { font-family: var(--bebas); font-weight: 400; font-size: 32px; line-height: 1; }
  .tone-flate span { font-size: 12px; font-weight: 500; }
  .tone figcaption { display: grid; gap: 2px; }

  .lagfarger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-size-3); }
  .lagfarge {
    margin: 0; padding: var(--ds-size-3); border: 1px solid; border-radius: var(--ds-border-radius-md);
    display: grid; gap: 2px; font-weight: 500;
  }
  .lagfarge b { font-family: var(--bebas); font-weight: 400; font-size: 32px; line-height: 1; }
  .lagfarge small { font-size: 12px; font-variant-numeric: tabular-nums; }

  /* Mørk modus vist på en lys side: kortet tar bakgrunnen fra temaet */
  .mork { --dsc-card-background: var(--ds-color-neutral-background-default); }
  .mork .tone-flate { border-color: rgb(255 255 255 / .16); }

  /* Kontrasttabellen: prøven viser paret, merket sier om det holder.
     Ti kolonner, så cellene er tettere enn i andre tabeller. */
  .kontrast { --dsc-table-padding: var(--ds-size-2) 6px; font-size: var(--ds-body-xs-font-size); }
  .kontrast td, .kontrast th { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .kontrast td b { font-weight: 700; }
  .kontrast .k-stor, .kontrast .k-nei { color: var(--ds-color-neutral-text-subtle); }
  .kontrast .k-nei b { font-weight: 400; }
  .k-prøve {
    display: inline-block; margin-right: var(--ds-size-1); padding: 2px 4px; font-weight: 700;
    border-radius: var(--ds-border-radius-sm); border: 1px solid rgb(0 0 0 / .08);
  }

  /* Skrifter */
  .skrifter { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ds-size-5); }
  .skrift { display: grid; gap: var(--ds-size-3); align-content: start; }
  .skrift-prøve { font-size: 88px; line-height: 1; color: var(--holstad-bla-900); }
  .typeskala { display: grid; }
  .typeskala > div {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--ds-size-5); align-items: baseline;
    padding: var(--ds-size-4) 0; border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
  }
  .typeskala > div:last-child { border-bottom: 0; }
  .typeskala .eks { color: var(--holstad-bla-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .typeskala .spes { font-size: var(--ds-body-xs-font-size); color: var(--ds-color-neutral-text-subtle); font-variant-numeric: tabular-nums; }
  .typeskala .spes b { color: var(--ds-color-neutral-text-default); display: block; font-size: var(--ds-body-sm-font-size); }
  .bebas { font-family: var(--bebas); font-weight: 400; }
  .spectral { font-family: var(--spectral); font-style: italic; }

  /* Regler: gjør / ikke gjør */
  .regler { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-size-5); }
  .gjor, .ikke { border-top: 4px solid; padding-top: var(--ds-size-3); display: grid; gap: var(--ds-size-3); align-content: start; }
  .gjor { border-color: var(--holstad-bla-900); }
  .ikke { border-color: var(--holstad-rod-500); }
  .gjor h3, .ikke h3 { margin: 0; }

  /* Slik skriver vi: en melding slik leseren får den */
  .eksempeltekst {
    margin: 0; padding: var(--ds-size-3) var(--ds-size-4); max-width: 60ch;
    background: var(--ds-color-neutral-background-tinted); border-radius: var(--ds-border-radius-md);
  }
  .vanskelig { align-content: start; gap: var(--ds-size-3); }
  .vanskelig > :is(h4, ul) { margin: 0; }

  /* Logo */
  .logoflater { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ds-size-4); }
  .logoflate { display: grid; gap: var(--ds-size-2); margin: 0; align-content: start; }
  .logoflate > div:not(.knapper) {
    aspect-ratio: 3 / 2; border-radius: var(--ds-border-radius-lg); display: grid; place-items: center; padding: var(--ds-size-6);
    border: 1px solid rgb(0 0 0 / .08);
  }
  .logoflate img { width: 80%; max-width: 280px; }
  .logoflate img.symbol { width: 40%; }
  .logoflate img.ordmerke { width: 60%; }
  .logoflate .knapper { display: flex; flex-wrap: wrap; gap: var(--ds-size-2); }
  .logovariant { display: grid; gap: var(--ds-size-3); padding-top: var(--ds-size-6); border-top: 1px solid var(--ds-color-neutral-border-subtle); }
  .logovariant > :is(h4, p) { margin: 0; }
  /* Faste kolonner, så en variant med én fil ikke fyller hele bredden */
  .logovariant .logoflater { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .logoflate figcaption { font-size: var(--ds-body-sm-font-size); }
  /* Visjonen er én lang linje, så flisene er brede og lave */
  .visjonsfiler { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .visjonsfiler .logoflate > div:not(.knapper) { aspect-ratio: 4 / 1; }
  .logoflate img.visjonsfil { width: 100%; max-width: 460px; height: auto; }
  .logoflate > div.mangler { border: 2px dashed var(--ds-color-neutral-border-default); color: var(--ds-color-neutral-text-subtle); text-align: center; font-size: var(--ds-body-sm-font-size); }
  .frisone { position: relative; display: inline-block; padding: 7%; background:
      repeating-linear-gradient(45deg, var(--holstad-rod-100) 0 6px, transparent 6px 12px); border-radius: 4px; }
  .frisone img { display: block; width: 280px; max-width: 100%; }

  /* Grafiske elementer: faste fargepar */
  .par { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ds-size-4); }
  .blokk {
    aspect-ratio: 4 / 5; border-radius: var(--ds-border-radius-lg); position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; padding: var(--ds-size-5); margin: 0;
  }
  .blokk .tall { position: absolute; top: -0.12em; left: -0.04em; font-family: var(--bebas); font-size: 220px; line-height: 1; }
  .blokk .budskap { position: relative; font-family: var(--bebas); font-size: 40px; line-height: .95; }
  .blokk figcaption { position: relative; font-size: 12px; font-weight: 500; margin-top: var(--ds-size-3); opacity: .85; }
  .oppskrift { counter-reset: steg; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ds-size-4); }
  .oppskrift li { counter-increment: steg; display: grid; gap: var(--ds-size-2); align-content: start; }
  .oppskrift li::before { content: counter(steg); font-family: var(--bebas); font-size: 56px; line-height: 1; color: var(--holstad-rod-500); }

  /* Klubben: visjon og verdier */
  .visjon { margin: 0 0 var(--ds-size-4); color: var(--holstad-bla-900); }
  .kjerne { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-size-3); }
  .kjerne li {
    background: var(--flate); color: var(--tekst); border-radius: var(--ds-border-radius-md);
    padding: var(--ds-size-8) var(--ds-size-4) var(--ds-size-4);
    display: grid; gap: var(--ds-size-2); align-content: start;
  }
  .kjerne b { font-family: var(--bebas); font-weight: 400; font-size: 40px; line-height: 1; }
  .kjerne span { font-size: var(--ds-body-sm-font-size); }

  /* Klubbtøy: drakt og shorts som to flater */
  .drakter { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: var(--ds-size-6); }
  .drakt { margin: 0; display: grid; justify-items: center; }
  /* Produktbildene har hvit bakgrunn og mye luft rundt plagget. Shortsen
     skyves opp under drakta, og multiply hindrer at det hvite i shortsbildet
     dekker kanten av drakta. */
  .drakt img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  .drakt .drakt-shorts { width: 78%; margin-top: -26%; }
  .drakt figcaption { margin-top: var(--ds-size-2); font-size: var(--ds-body-sm-font-size); }
  .drakt strong { display: block; }

  /* Klubbtøy: strektegning av drakta med feltene for logo */
  .plassering { display: block; width: 100%; max-width: 420px; height: auto; font-size: 12px; fill: var(--ds-color-neutral-text-default); }
  .plassering .plagg { fill: var(--holstad-rod-500); }
  .plassering .felt { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; }
  .plassering .klubb { stroke-dasharray: none; }
  .plassering text { fill: #fff; font-weight: 500; }

  .avvik { border-left: 4px solid var(--ds-color-warning-border-default); }

  @media (max-width: 900px) {
    .ramme { grid-template-columns: 1fr; }
    .sidemeny { position: static; max-height: none; padding: var(--ds-size-6) var(--ds-size-6) 0; }
    .eksempel { grid-template-columns: 1fr; }
    .omslag-band { grid-template-columns: 1fr 1fr; height: auto; }
    .omslag-foto { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
    .omslag-blokk { aspect-ratio: 1; }
    .omslag-blokk .tall { font-size: clamp(160px, 40vw, 300px); }
    .kapitler ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kjerne b { font-size: 32px; }
    .toner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .typeskala > div { grid-template-columns: 1fr; gap: var(--ds-size-1); }
  }
  @media (max-width: 640px) {
    .topp, main, .bunn, .sidemeny { padding-inline: 16px; }
    /* Toppen bryter over to rader her; sticky ville tatt for mye av skjermen */
    .topp { position: static; }
    .scene { --dsc-card-padding: var(--ds-size-4); }
    .typeprøve { grid-template-columns: 1fr; }
    .steg { grid-template-columns: 1fr; gap: var(--ds-size-2); }
    .steg-nr { font-size: 56px; }
    .kode { grid-template-columns: 1fr; }
    .omslag { padding: var(--ds-size-6) 16px var(--ds-size-8); gap: var(--ds-size-6); }
    .omslag-meta { text-align: left; }
    .omslag-blokk { padding: var(--ds-size-4); }
    .kapitler ol { grid-template-columns: 1fr; }
    .kjerne { grid-template-columns: 1fr; }
    .kjerne li { padding-top: var(--ds-size-5); }
    .kapittel { min-height: 140px; }
    .kapittel .tall { font-size: 140px; }
    .toner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lagfarger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .typeskala .eks { white-space: normal; }
  }
}