@charset "utf-8";

/* ============================================================
   Studentmållaget i Oslo — smio.no

   Fargane er henta ut av lysinga frå 1897: blekket måler #41333F
   (jarngalleblekk som har falma mot fiolett), papiret #C3C6B4
   (grågrønt, ikkje varmt krem). Resten av paletten er bokbindsfargar
   frå mellomkrigstida, då laget gav ut dei 25 klassiske bokverka.

   Skrifta er Alegreya og Alegreya Sans (SIL OFL), lagd lokalt.
   Sida hentar ingenting frå tredjepart.
   ============================================================ */

/* ---------- skrift ---------- */

@font-face {
  font-family: "Alegreya";
  src: url("../skrift/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../skrift/alegreya-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../skrift/alegreya-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- token ---------- */

:root {
  /* blekk og papir, målt i lysinga frå 1897 */
  --blekk: #221c29;
  --blekk-mjuk: #3d3447;
  --blekk-dus: #5c5468;
  --papir: #f4f3ed;
  --papir-djup: #e9e8dd;
  --lin: #c7cab6;

  /* gullpreg på bokrygg */
  --gull: #b8862f;
  --gull-lys: #d9ae58;

  /* bokbindsklede */
  --flaske: #2c4438;
  --oksblod: #6b2b2b;
  --indigo: #2a3a5c;
  --oker: #8a6a22;
  --skifer: #454c55;
  --plomme: #472a42;

  --skrift: "Alegreya", "Charter", "Bitstream Charter", Georgia, serif;
  --nyttig: "Alegreya Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --mal: 68rem;      /* lesebreidd, brei */
  --mal-smal: 40rem; /* lesebreidd, tekst */
  --luft: clamp(3.5rem, 8vw, 7rem);
}

/* ---------- botn ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font-family: var(--skrift);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.62;
  font-variant-numeric: oldstyle-num;
  text-rendering: optimizeLegibility;

  /* korte sider (404) elles slepper botnen frå seg og let papiret liggja
     naken under han */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--gull);
}

a:hover {
  text-decoration-color: currentColor;
}

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

/* ---------- delte klassar ---------- */

.mal {
  width: min(100% - 2.5rem, var(--mal));
  margin-inline: auto;
}

.mal-smal {
  width: min(100% - 2.5rem, var(--mal-smal));
  margin-inline: auto;
}

.merkelapp {
  font-family: var(--nyttig);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin: 0 0 1.4rem;
}

.merkelapp--lys {
  color: var(--gull-lys);
}

.berre-lesar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- topp ---------- */

.topp {
  background: var(--blekk);
  color: var(--papir);
}

.topp__inni {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding: 1.1rem 0;
}

.topp__namn {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gull-lys);
  margin-right: auto;
  white-space: nowrap;
}

.topp__namn:hover {
  color: var(--papir);
}

.meny {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nyttig);
  font-size: 0.86rem;
}

.meny a {
  text-decoration: none;
  color: rgb(244 243 237 / 0.78);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.meny a:hover {
  color: var(--papir);
  border-bottom-color: var(--gull);
}

.meny [aria-current="page"] {
  color: var(--papir);
  border-bottom-color: var(--gull);
}

/* ---------- tittelblad: framsidebolken ---------- */

.tittelblad {
  background: var(--blekk);
  color: var(--papir);
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

/* dei to tynne gullstrekane er bind-banda på ein bokrygg */
.tittelblad::before,
.tittelblad::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(184 134 47 / 0.45);
}

.tittelblad::before {
  top: 0.55rem;
}

.tittelblad::after {
  bottom: 0.55rem;
}

.tittelblad__inni {
  text-align: center;
}

.tittelblad__over {
  font-family: var(--nyttig);
  font-weight: 500;
  font-size: clamp(0.66rem, 1.6vw, 0.76rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gull-lys);
  margin: 0 0 1.8rem;
}

.tittelblad__namn {
  font-size: clamp(2.6rem, 8.5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}

.tittelblad__strek {
  width: 3.5rem;
  height: 1px;
  border: 0;
  background: var(--gull);
  margin: clamp(1.8rem, 4vw, 2.8rem) auto;
}

.tittelblad__foremal {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-style: italic;
  line-height: 1.42;
  margin: 0 auto;
  max-width: 34ch;
  color: rgb(244 243 237 / 0.94);
  text-wrap: balance;
}

.tittelblad__kjelde {
  font-family: var(--nyttig);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(244 243 237 / 0.66);
  margin: 1.5rem 0 0;
}

.tittelblad__kjelde a {
  text-decoration-color: rgb(184 134 47 / 0.8);
}

.tittelblad__kjelde a:hover {
  color: var(--papir);
}

.tittelblad__utfyll {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 2.6rem auto 0;
  color: rgb(244 243 237 / 0.76);
}

/* ---------- knappar ---------- */

.knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.6rem;
}

.knapp {
  font-family: var(--nyttig);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.72rem 1.6rem;
  border: 1px solid var(--gull);
  color: var(--gull-lys);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.knapp:hover {
  background: var(--gull);
  color: var(--blekk);
}

.knapp--fyll {
  background: var(--gull);
  color: var(--blekk);
}

.knapp--fyll:hover {
  background: var(--gull-lys);
  border-color: var(--gull-lys);
}

.knapp--mork {
  border-color: var(--blekk);
  color: var(--blekk);
}

.knapp--mork:hover {
  background: var(--blekk);
  color: var(--papir);
}

/* ---------- plate: arkivbilete i ramme ---------- */

.plate {
  margin: 0;
  max-width: 37rem;
}

.plate--midt {
  margin-inline: auto;
}

.plate img {
  width: 100%;
  border: 1px solid rgb(199 202 182 / 0.45);
}

.plate figcaption {
  font-family: var(--nyttig);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--blekk-dus);
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gull);
}

/* ---------- bolkar ---------- */

.bolk {
  padding: var(--luft) 0;
}

.bolk--lin {
  background: var(--papir-djup);
}

.bolk--blekk {
  background: var(--blekk);
  color: var(--papir);
}

.bolk__tittel {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.bolk__ingress {
  font-size: 1.1rem;
  max-width: 50ch;
  color: var(--blekk-dus);
  margin: 0 0 3rem;
}

.bolk--blekk .bolk__ingress {
  color: rgb(244 243 237 / 0.72);
}

/* ---------- to spalter ---------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.duo__tekst > p:first-child {
  font-size: 1.2rem;
  line-height: 1.55;
  margin-top: 0;
}

.duo__tekst p {
  margin: 0 0 1.2em;
}

.duo__tekst p:last-child {
  margin-bottom: 0;
}

@media (max-width: 46rem) {
  .duo {
    grid-template-columns: 1fr;
  }
}

/* ---------- det me gjer ---------- */

.gjer {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lin);
}

.gjer > li {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 0.3rem 2.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--lin);
}

.gjer dt,
.gjer__namn {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin: 0;
}

.gjer__om {
  margin: 0;
  color: var(--blekk-dus);
  max-width: 52ch;
}

@media (max-width: 34rem) {
  .gjer > li {
    grid-template-columns: 1fr;
  }
}

/* ---------- hylla: signaturelementet ----------
   Kvar rygg er eit band laget har gjeve ut. Høgd og breidd
   varierer som på ei ekte hylle; fargane er bokbindsklede. */

.hylle-ramme {
  position: relative;
}

.hylle {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  padding: 0 0 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gull) transparent;
}

.hylle::after {
  /* hylleplata */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  height: 3px;
  background: linear-gradient(var(--gull), rgb(184 134 47 / 0.15));
  pointer-events: none;
}

.rygg {
  --klede: var(--flaske);
  flex: 0 0 auto;
  width: 2.4rem;
  height: 15rem;
  background: var(--klede);
  border-radius: 2px 2px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  text-decoration: none;
  color: rgb(244 243 237 / 0.92);
  box-shadow: inset -6px 0 12px -6px rgb(0 0 0 / 0.55),
    inset 6px 0 8px -6px rgb(255 255 255 / 0.14);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* gullbanda oppe og nede på ryggen */
.rygg::before,
.rygg::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgb(217 174 88 / 0.75);
}

.rygg::before {
  top: 0.85rem;
}

.rygg::after {
  bottom: 0.85rem;
}

.rygg__tekst {
  writing-mode: vertical-rl;
  font-family: var(--nyttig);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100%;
}

.rygg__nr {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--nyttig);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgb(217 174 88 / 0.85);
}

.rygg:hover,
.rygg:focus-visible {
  transform: translateY(-0.7rem);
}

/* dei store banda */
.rygg--stor {
  width: 3.4rem;
  height: 18rem;
}

.rygg--stor .rygg__tekst {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.rygg--mager {
  width: 1.9rem;
  height: 13.5rem;
}

.rygg--hog {
  height: 16.5rem;
}

/* klede */
.k-flaske { --klede: var(--flaske); }
.k-oksblod { --klede: var(--oksblod); }
.k-indigo { --klede: var(--indigo); }
.k-oker { --klede: var(--oker); }
.k-skifer { --klede: var(--skifer); }
.k-plomme { --klede: var(--plomme); }

.hylle__merknad {
  font-family: var(--nyttig);
  font-size: 0.82rem;
  color: rgb(244 243 237 / 0.55);
  margin: 0.5rem 0 0;
}

.bolk--lin .hylle__merknad {
  color: var(--blekk-dus);
}

/* ---------- utgjevingskort ---------- */

.utgjeve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.utgjeve h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.15rem;
}

.utgjeve h3 a {
  text-decoration: none;
  border-bottom: 1px solid rgb(184 134 47 / 0.5);
}

.utgjeve h3 a:hover {
  border-bottom-color: var(--gull-lys);
}

.utgjeve__ar {
  font-family: var(--nyttig);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gull-lys);
  margin: 0 0 0.7rem;
}

.utgjeve p:last-child {
  margin: 0;
  color: rgb(244 243 237 / 0.72);
  font-size: 0.98rem;
}

/* ---------- bli med ---------- */

.bli-med {
  position: relative;
  background: var(--blekk);
  color: var(--papir);
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
  overflow: hidden;
}

.bli-med__bilete {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: grayscale(0.55);
}

.bli-med__inni {
  position: relative;
}

.bli-med h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.bli-med p {
  max-width: 44ch;
  margin: 0 auto;
  color: rgb(244 243 237 / 0.85);
}

/* ---------- botn ---------- */

.botn {
  background: var(--blekk);
  color: rgb(244 243 237 / 0.7);
  border-top: 1px solid rgb(184 134 47 / 0.3);
  padding: 3.5rem 0 3rem;
  font-family: var(--nyttig);
  font-size: 0.9rem;
}

.botn__inni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
}

.botn h2 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gull-lys);
  margin: 0 0 1rem;
}

.botn ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.botn li {
  margin-bottom: 0.45rem;
}

.botn a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.botn a:hover {
  color: var(--papir);
  border-bottom-color: var(--gull);
}

.botn__slutt {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(244 243 237 / 0.12);
  font-size: 0.8rem;
  color: rgb(244 243 237 / 0.45);
}

/* ---------- undersider ---------- */

.sidetopp {
  background: var(--blekk);
  color: var(--papir);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgb(184 134 47 / 0.35);
}

.sidetopp h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 20ch;
}

.sidetopp__ingress {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 42ch;
  margin: 1.3rem 0 0;
  color: rgb(244 243 237 / 0.8);
}

.brodtekst {
  padding: var(--luft) 0;
}

.brodtekst p {
  margin: 0 0 1.35em;
}

/* ingressen skal stiga over brødteksten. em, ikkje rem: brødteksten er sjølv
   flytande (clamp på body), så ein fast rem-verdi hamnar på same storleik som
   avsnittet under på breie skjermar. */
.brodtekst .mal-smal > p:first-child {
  font-size: 1.18em;
  line-height: 1.55;
  color: var(--blekk-mjuk);
}

/* Punktlister i brødtekst. Nettlesarpunktet er for tungt til papiret her;
   ein liten gullstrek ligg nærare resten av sida. */
.brodtekst ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.35em;
}

.brodtekst ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.brodtekst ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: var(--gull);
}

.brodtekst h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 2.6rem 0 0.8rem;
}

.brodtekst h3 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin: 2.6rem 0 0.7rem;
}

.brodtekst figure {
  margin: 2.6rem 0;
}

.brodtekst img {
  border: 1px solid rgb(199 202 182 / 0.5);
}

.brodtekst figcaption {
  font-family: var(--nyttig);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--blekk-dus);
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gull);
}

/* ---------- lovene ---------- */

.lov {
  padding: var(--luft) 0;
}

.lov__vedteke {
  font-family: var(--nyttig);
  font-size: 0.85rem;
  color: var(--blekk-dus);
  border-left: 2px solid var(--gull);
  padding-left: 0.9rem;
  margin: 0 0 3.5rem;
}

.lov h2 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin: 3.2rem 0 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--lin);
}

.lov h2:first-of-type {
  margin-top: 0;
}

.paragraf {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1rem;
  margin-bottom: 1.7rem;
}

.paragraf__nr {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gull);
  margin: 0;
  padding-top: 0.32em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

.paragraf p {
  margin: 0 0 0.9em;
}

.paragraf p:last-child {
  margin-bottom: 0;
}

@media (max-width: 34rem) {
  .paragraf {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ---------- boklista ---------- */

.bokliste {
  list-style: none;
  counter-reset: bok;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lin);
}

.bokliste > li {
  counter-increment: bok;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--lin);
}

.bokliste > li::before {
  content: counter(bok);
  font-family: var(--nyttig);
  font-size: 0.8rem;
  font-variant-numeric: lining-nums;
  color: var(--gull);
  padding-top: 0.4em;
}

.bok__tittel {
  font-size: 1.15rem;
  line-height: 1.3;
}

.bok__forfattar {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  display: block;
  margin-bottom: 0.2rem;
}

/* må vera minst like spesifikk som .brodtekst p, som elles legg på
   1.35em botnmarg og sprengjer radhøgda i katalogen */
.bokliste .bok__om {
  font-family: var(--nyttig);
  font-size: 0.86rem;
  color: var(--blekk-dus);
  margin: 0.25rem 0 0;
}

/* ---------- krambua ---------- */

.vare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
  padding: var(--luft) 0;
  border-bottom: 1px solid var(--lin);
}

.vare:last-of-type {
  border-bottom: 0;
}

.vare__pris {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gull);
  margin: 0 0 0.6rem;
}

.vare h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

.vare p {
  color: var(--blekk-dus);
  margin: 0 0 1rem;
}

.vare img {
  border: 1px solid rgb(199 202 182 / 0.5);
}

@media (max-width: 42rem) {
  .vare {
    grid-template-columns: 1fr;
  }
}

/* ---------- kontakt ---------- */

.kontakt-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem;
  padding: var(--luft) 0;
}

.kontakt-rad h2 {
  font-family: var(--nyttig);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blekk-dus);
  margin: 0 0 0.8rem;
}

.kontakt-rad p {
  margin: 0;
}

.epost {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  word-break: break-word;
}

/* ---------- rørsle ---------- */

@media (prefers-reduced-motion: no-preference) {
  .stig {
    animation: stig 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .tittelblad__over { animation-delay: 0.05s; }
  .tittelblad__namn { animation-delay: 0.15s; }
  .tittelblad__strek { animation-delay: 0.3s; }
  .tittelblad__foremal { animation-delay: 0.38s; }
  .tittelblad__kjelde { animation-delay: 0.46s; }
  .tittelblad__utfyll { animation-delay: 0.52s; }
  .knappar { animation-delay: 0.6s; }

  /* hylla reiser seg band for band */
  .hylle .rygg {
    animation: reis 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

@keyframes stig {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
}

@keyframes reis {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}