/* ================================================================
   VFTA05 — Grundläggande juridik med fastighetsrätt
   Tema: "Refined Parchment / Statute-Book"
   ----------------------------------------------------------------
   Lugn lagbokstyngd: varmt papper, guld-hårstreck som juridiska
   dokumentmarkörer, navy "rygg" till vänster och varje lagcitat
   som ett litet graverat monospace-piller så ögat kan skanna 349
   hänvisningar utan att tröttna.

   Typografi:
     • Fraunces        — rubriker (--head-font)
     • Hanken Grotesk  — brödtext (--body-font)
     • IBM Plex Mono   — citat, siffror, etiketter (--mono-font)
   ================================================================ */

:root {
  /* ── Yta & papper ───────────────────────────── */
  --bg:          #f7f5ee;   /* varmare laid-paper, en aning djupare */
  --surface:     #fffdf8;   /* pappersvitt, inte rent vitt */
  --topbar-bg:   #fcfbf6;   /* nära vitt papper för stickyn */

  /* ── Navy "rygg" ────────────────────────────── */
  --sidebar-bg:  #172038;   /* djupare navy rygg */
  --sidebar-txt: #e3ddd0;

  /* ── Guld (struktur / accent) ───────────────── */
  --gold:        #c19a3d;   /* UI-guld, en aning varmare */
  --gold-soft:   #e7d9a8;   /* mjuk variant för washar/ringar */

  /* ── Varm brun & blå ────────────────────────── */
  --accent:      #7a4e2d;   /* varm brun */
  --accent-dk:   #5e3b22;   /* sigill-gradientens slut */
  --accent2:     #2c5282;   /* legal blå */

  /* ── Box-accenter (avstämda mot varmt papper) ─ */
  --box-blue:    #2c5282;
  --box-gold:    #b8902f;   /* varmare, mindre neon än UI-guldet */
  --box-green:   #3f6b4d;

  /* ── Citat ──────────────────────────────────── */
  --cite-col:    #3f6b4d;   /* fördjupad grön för kontrast på papper */

  /* ── Text & linjer ──────────────────────────── */
  --txt:         #1d1b18;
  --txt-muted:   #5c574e;   /* varm grå */
  --border:      #e6e0d2;   /* varmt hårstreck */

  --head-font:   'Fraunces', Georgia, serif;
  --body-font:   'Hanken Grotesk', system-ui, sans-serif;
  --mono-font:   'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --r:           6px;

  --dd-h:        52px;      /* kapitel-dropdownens höjd (sticky överst) */
  --topbar-h:    182px;     /* topbar-höjd; scroll-margin = dd + topbar */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16.5px; scroll-behavior: smooth; }

body {
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================================================================
   KAPITEL-DROPDOWN — ligger ÖVER headern, parchment (ej navy)
   Full bredd, sticky högst upp; öppen panel svävar som overlay
   över både header och innehåll.
   ================================================================ */
.chapter-dd {
  position: sticky;
  top: 0;
  z-index: 200;                 /* över topbar (100) */
  background: var(--surface);   /* samma papper som sidan — ingen navy */
  border-bottom: 1px solid var(--border);
  /* tunt guld-hårstreck under, ekar topbarens egen linje */
  box-shadow: inset 0 -2px 0 var(--gold-soft);
  padding: .5rem 1.4rem;
}

/* Dölj hela dropdownen utanför kompendievyn */
body:not(.view-kompendium) .chapter-dd { display: none; }

.chapter-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: .85rem;
  color: var(--accent);
  background: rgba(122,78,45,.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .42rem .95rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chapter-dd-trigger:hover {
  background: rgba(122,78,45,.12);
  border-color: var(--accent);
  color: var(--accent-dk);
}
.chapter-dd-trigger:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(193,154,61,.3);
}
.cdd-ico { font-size: 1rem; line-height: 1; }
.cdd-label {
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdd-chev {
  flex: none;
  color: var(--gold);
  transition: transform .18s ease;
}
.chapter-dd.open .cdd-chev { transform: rotate(180deg); }

/* ── Panel — dropdown-overlay (gömd tills .open) ── */
.chapter-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + .35rem);
  left: 1.4rem;
  width: min(360px, calc(100vw - 2.8rem));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(35,28,15,.18),
              inset 0 0 0 1px rgba(200,168,75,.18);
  padding: .85rem .8rem 1rem;
  z-index: 250;                 /* svävar över header + innehåll */
}
.chapter-dd.open .chapter-dd-panel { display: block; }

/* I kompendievyn pinnas topbar UNDER den sticky dropdownen */
body.view-kompendium .topbar { top: var(--dd-h); }

/* ================================================================
   TOPBAR — "titelsidans överlinje" (ligger nu UNDER dropdownen)
   ================================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;                /* under .chapter-dd (200) */
  background: var(--topbar-bg);
  color: var(--txt);
  border-bottom: 1px solid var(--border);
  /* 2px guld-hårstreck direkt under bottenlinjen */
  box-shadow: inset 0 -2px 0 var(--gold-soft), 0 2px 12px rgba(35,28,15,.05);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .65rem 1.2rem;
  padding: .85rem 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

/* Graverat sigill */
.glyph {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;            /* aning fyrkantigare → graverat sigill */
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #f7eede;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  /* tunn inre guldring + varm skugga */
  box-shadow: inset 0 0 0 1px rgba(200,168,75,.5),
              0 5px 14px rgba(122,78,45,.30);
}

.brand h1 {
  font-family: var(--head-font);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--txt);
  line-height: 1.05;
}

/* Sub blir en "ärendeetikett" i mono */
.brand .sub {
  margin-top: .2rem;
  font-family: var(--mono-font);
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}

.top-right {
  display: flex;
  align-items: center;
  gap: .9rem;
  justify-self: end;
}

.hub-back {
  color: var(--accent);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(122,78,45,.07);
  border: 1px solid rgba(122,78,45,.4);
  padding: .34rem .8rem;
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.hub-back:hover { background: rgba(122,78,45,.15); border-color: var(--accent); }

/* Flikar — guld-underlinje på aktiv flik (kapitelmarkörens eko) */
.tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding-top: .6rem;
  border-top: 1px solid var(--border);   /* hårstreck skiljer från brand-raden */
}
.tab {
  position: relative;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: .9rem;
  color: var(--txt-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .42rem .95rem;
  cursor: pointer;
  transition: .14s;
}
.tab:hover { background: rgba(122,78,45,.06); color: var(--txt); }
.tab.active {
  background: var(--accent);
  color: #fff;
}
/* 2px guld-underlinje som ekar kapitellinjerna */
.tab.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -7px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

@media (max-width: 600px) {
  .topbar { grid-template-columns: 1fr; }
  .top-right { justify-self: start; flex-wrap: wrap; }
}

/* ================================================================
   VYER
   ================================================================ */
.view { display: none; }
.view.active { display: block; }
main { flex: 1; }

/* ================================================================
   ÖVERSIKT — "registerkort / kapitelflikar i en pärm"
   ================================================================ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 2.25rem 1.5rem; }
.lead {
  color: var(--txt-muted);
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem;
  /* CSS-räknare för kapitelnumrering (rör ej JS) */
  counter-reset: ovcard;
}

.ov-card {
  position: relative;                /* för numeralen i ::after */
  counter-increment: ovcard;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* OBS: sätt ej border-top shorthand — färgen kommer inline från JS */
  border-top-width: 4px;
  border-top-style: solid;
  padding: 1.25rem 1.25rem 1.15rem;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ov-card:hover {
  box-shadow: 0 8px 22px rgba(122,78,45,.12);
  transform: translateY(-3px);
}
/* Stillsam "Kap. 01"-numeral uppe till höger (ren CSS, ej klickbar) */
.ov-card::after {
  content: counter(ovcard, decimal-leading-zero);
  position: absolute;
  top: .85rem;
  right: 1.05rem;
  font-family: var(--mono-font);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(0,0,0,.18);
  pointer-events: none;
}

.ov-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  border-radius: 50%;
  background: rgba(122,78,45,.07);
  margin-bottom: .65rem;
}
.ov-card h3 {
  font-family: var(--head-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.ov-card .blurb {
  font-size: .82rem;
  color: var(--txt-muted);
  line-height: 1.55;
}
.ov-card .scount {
  margin-top: .85rem;
  display: inline-block;
  font-family: var(--mono-font);
  font-size: .66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  background: rgba(122,78,45,.07);
  border: 1px solid rgba(122,78,45,.18);
  border-radius: 999px;
  padding: .12em .55em;
}

/* ================================================================
   KOMPENDIUM — layout (full bredd; nav bor i dropdownen ovan)
   ================================================================ */
.komp-layout {
  display: block;
}

/* Sökfält i dropdown-panelen — papper, brun fokus, söklupp via bakgrund */
#komp-search {
  display: block;
  width: 100%;
  margin: 0 0 .65rem;
  padding: .5rem .7rem .5rem 1.95rem;
  background: var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c19a3d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E")
    no-repeat .65rem center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--txt);
  font-size: .82rem;
  font-family: var(--body-font);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#komp-search::placeholder {
  font-family: var(--mono-font);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--txt-muted);
  opacity: .7;
}
#komp-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(122,78,45,.18);
}

/* "INNEHÅLL"-etikett ovanför kapitelknapparna (ren CSS) */
#komp-nav {
  counter-reset: navnum;            /* numrerar kapitlen */
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
#komp-nav::before {
  content: "INNEHÅLL";
  display: block;
  font-family: var(--mono-font);
  font-weight: 600;
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--gold);
  padding: .2rem .3rem .5rem;
}

/* Kapitel = knappliknande rader på papper */
#komp-nav a {
  counter-increment: navnum;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  color: var(--txt);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: background .15s, border-color .15s, color .15s;
}
/* CSS-numeral framför varje kapitel: "01 ⚖ Avtalsrätt" */
#komp-nav a::before {
  content: counter(navnum, decimal-leading-zero);
  flex: none;
  font-family: var(--mono-font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold);
}
#komp-nav a:hover {
  background: rgba(122,78,45,.08);
  border-color: rgba(122,78,45,.3);
  color: var(--accent-dk);
}
#komp-nav a.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);     /* tydlig fylld markör för aktuellt kapitel */
}
#komp-nav a.active::before { color: var(--gold-soft); }
#komp-nav a.hidden { display: none; }   /* dolda av sökfiltret */

/* ── Läskolumn — full bredd, centrerad ─────────── */
.komp-body {
  min-width: 0;                /* tillåt krympning under min-content (nowrap-citat) */
  margin: 0 auto;
  padding: 2.25rem 1.75rem 5rem;
  max-width: 860px;
  overflow-x: hidden;
  /* kapitelräknare → driver bakgrundsnumeral + rubriknumeral */
  counter-reset: chap;
}

/* ================================================================
   KAPITEL — statute-book öppning
   ================================================================ */
.chapter {
  position: relative;
  counter-increment: chap;
  margin-bottom: 4rem;
  scroll-margin-top: calc(var(--dd-h) + var(--topbar-h) + 1rem);
}

/* Stor spöklik kapitelnumeral som vattenstämpel */
.chapter::before {
  content: counter(chap, decimal-leading-zero);
  position: absolute;
  top: -1.1rem;
  right: -.5rem;
  font-family: var(--head-font);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(23,32,56,.07);
  pointer-events: none;
  z-index: 0;
}

/* Kapitelhuvud — dubbel guldlinje (som ett kapitelbrott i tryckt kod) */
.chapter-hd {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-bottom: .6rem;
  margin-bottom: 1.7rem;
  border-bottom: 2px solid var(--gold);
}
.chapter-hd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: rgba(122,78,45,.22);     /* parad hårlinje under guldet */
}
.chapter-hd .ci {
  font-size: 1.25rem;
  line-height: 1;
  align-self: center;
}
.chapter-hd h2 {
  font-family: var(--head-font);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
/* Liten mono-numeral framför rubriken (monogram) */
.chapter-hd h2::before {
  content: counter(chap, decimal-leading-zero);
  font-family: var(--mono-font);
  font-weight: 500;
  font-size: .7em;
  color: var(--gold);
  margin-right: .6rem;
}

/* ================================================================
   AVSNITT
   ================================================================ */
.section {
  position: relative;
  z-index: 1;
  margin-bottom: 1.9rem;
}
.section h3 {
  position: relative;
  font-family: var(--head-font);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #253253;
  margin-bottom: .75rem;
  padding-bottom: .35rem;
}
/* Kort guld-understreck istället för fullbredds-linje */
.section h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* h4 — brun mono-versal etikett */
.section h4 {
  font-family: var(--mono-font);
  font-size: .76rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 1.1rem 0 .45rem;
}
.section h4 cite { letter-spacing: 0; }   /* citat i rubrik håller egen stil */

/* Brödtext optimerad för uthållig läsning */
.section p {
  font-size: .9rem;
  line-height: 1.72;
  margin-bottom: .6rem;
  text-wrap: pretty;
}
.section ul, .section ol {
  padding-left: 1.35rem;
  margin: .4rem 0 .6rem;
}
.section li {
  font-size: .9rem;
  line-height: 1.72;
  margin-bottom: .32rem;
  text-wrap: pretty;
}
/* Färgad markör på toppnivå, dämpad i nästlade listor */
.section ul > li::marker { color: var(--accent); }
.section li ul, .section li ol {
  margin-top: .22rem;
  margin-bottom: .22rem;
}
.section li ul > li, .section li ol > li {
  line-height: 1.6;
}
.section li ul > li::marker,
.section li ol > li::marker { color: rgba(122,78,45,.5); }

/* ================================================================
   LAGCITAT — signaturdetaljen: graverat grönt monospace-piller
   ================================================================ */
.section cite, cite {
  font-style: normal;
  font-family: var(--mono-font);
  font-size: .7em;
  font-weight: 500;
  line-height: 1;
  color: var(--cite-col);
  background: rgba(74,124,89,.08);
  border: 1px solid rgba(74,124,89,.22);
  border-radius: 4px;
  padding: .04em .4em;
  margin-left: .1em;                 /* hugger ordet före */
  white-space: nowrap;               /* bryts ej mitt i lagrummet */
  vertical-align: baseline;
  letter-spacing: .01em;
}

/* ================================================================
   NOTRUTOR — "marginalia / anteckningskort"
   ================================================================ */
.box {
  border-radius: 0 var(--r) var(--r) 0;
  padding: .85rem 1.1rem;
  margin: .85rem 0;
  font-size: .86rem;
  line-height: 1.6;
  /* svagt övre highlight för pappersdjup */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.box-blue  {
  background: #eef3fc;
  border: 1px solid rgba(44,82,130,.14);
  border-left: 3px solid var(--box-blue);
}
.box-gold  {
  background: #fbf4e4;
  border: 1px solid rgba(184,144,47,.16);
  border-left: 3px solid var(--box-gold);
}
.box-green {
  background: #eef5ef;
  border: 1px solid rgba(63,107,77,.16);
  border-left: 3px solid var(--box-green);
}

/* Den inledande <strong> blir en äkta caption i mono */
.box strong {
  display: block;
  font-family: var(--mono-font);
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .4rem;
}
/* Liten färgad prick + kort linje efter captionen */
.box strong::after {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1px;
  vertical-align: middle;
  margin-left: .5rem;
  background: currentColor;
  opacity: .5;
}
.box-blue  strong { color: var(--box-blue); }
.box-gold  strong { color: var(--box-gold); }
.box-green strong { color: var(--box-green); }
.box p:last-child, .box ul:last-child, .box li:last-child { margin-bottom: 0; }

/* ================================================================
   TVÅKOLUMNS-JÄMFÖRELSE — paperkort
   ================================================================ */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: .85rem 0;
}
.grid2 .col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .85rem;
}
.grid2 .col h5 {
  position: relative;
  font-family: var(--mono-font);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .55rem;
  padding-bottom: .3rem;
}
.grid2 .col h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.8rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.grid2 .col ul { padding-left: 1.1rem; }
.grid2 .col li { font-size: .82rem; line-height: 1.6; }

/* ================================================================
   STEG-LISTA — procedur med guld-på-navy chips + kopplingslinje
   ================================================================ */
.steps {
  list-style: none;
  padding: 0;
  position: relative;
  counter-reset: step;
}
/* svag vertikal hårlinje bakom chipsen → läses som ett förlopp */
.steps::before {
  content: "";
  position: absolute;
  left: .73rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 1px;
  background: rgba(23,32,56,.15);
}
.steps li {
  counter-increment: step;
  padding: .5rem .5rem .5rem 2.3rem;
  position: relative;
  margin-bottom: .3rem;
  font-size: .9rem;
  line-height: 1.65;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .45rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--sidebar-bg);
  color: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono-font);
  font-size: .72rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(200,168,75,.35);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footnote {
  background: var(--sidebar-bg);
  color: rgba(227,221,208,.4);
  text-align: center;
  font-size: .72rem;
  padding: 1rem;
  border-top: 1px solid rgba(200,168,75,.18);
}

/* ================================================================
   SCROLLBAR (dropdown-panelen)
   ================================================================ */
.chapter-dd-panel::-webkit-scrollbar { width: 7px; }
.chapter-dd-panel::-webkit-scrollbar-track { background: transparent; }
.chapter-dd-panel::-webkit-scrollbar-thumb {
  background: rgba(122,78,45,.25);
  border-radius: 4px;
}

/* ================================================================
   RESPONSIVT
   ================================================================ */
@media (max-width: 720px) {
  .komp-body { padding: 1.5rem 1.25rem 3rem; }
  .grid2 { grid-template-columns: 1fr; }

  /* Panelen blir nästan fullbredds-ark på smala skärmar */
  .chapter-dd-panel {
    left: .75rem;
    right: .75rem;
    width: auto;
  }
  .chapter-dd { padding: .5rem .9rem; }

  /* På smala skärmar får långa lagnamn bryta så pillret aldrig
     spränger läskolumnen (nowrap behålls på desktop för skanbarhet). */
  .section cite, cite {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* dämpa/dölj de stora dekorativa numeralerna på smala skärmar */
  .chapter::before {
    font-size: 2.8rem;
    top: -.4rem;
    opacity: .7;
  }
  .chapter-eyebrow { top: 0; }
}