@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/newsreader-italic-200-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/newsreader-italic-200-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/newsreader-normal-200-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/newsreader-normal-200-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/instrument-serif-normal-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/instrument-serif-normal-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* the paper: Newsreader for text, Instrument Serif for article titles; the name is an SVG (WORDMARK in app.js) */
:root {
  --bg: #eeeae1;
  --ink: #161513;
  --ink-2: #3f3c36;     /* secondary text */
  --dim: #5f5b53;       /* captions, counts */
  --rule: #cfc8b8;      /* hairlines */
  --ink-long: #24211c;  /* long-read body text */
  --term-line: #8a8170; /* dotted underline under dictionary terms */
  --scroll: #c9c1ae;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --title: "Instrument Serif", var(--serif);
  --gutter: clamp(20px, 4vw, 48px);
  --col: 22%;           /* the left column of the reference pages */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* dark paper: set by the theme control (app.js applyTheme, and the inline script in index.html) */
:root[data-theme="dark"] {
  --bg: #161513; --ink: #ebe6db; --ink-2: #bdb6a8; --dim: #938c7f; --rule: #3a362f; --ink-long: #ddd8cc; --term-line: #7d766a; --scroll: #3a362f;
  --panel: #201e1b;     /* light boxes become dark panels */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scrollbar-color: var(--scroll) var(--bg); scrollbar-width: thin; }
body { margin: 0; font: 400 16px/1.6 var(--serif); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.arw { width: 1em; height: .62em; flex: none; } .arw.l { transform: scaleX(-1); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* for screen readers only */
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 6px 10px; z-index: 10; }
.skip:focus { left: 8px; }
.noscript { padding: 40px var(--gutter); }
main { outline: none; min-height: 70vh; }
main:focus-visible { outline: none; }   /* main takes focus after a page change; no ring around the whole page */
main [id]:not(.reel-slide) { scroll-margin-top: 88px; }
.loading, .error { max-width: 960px; margin: 0 auto; padding: 16vh var(--gutter); color: var(--dim); }

/* ================= The masthead: the header of every page =================
   .bar is its top row and sticks; .mast (name + the row of date, tagline and issue) scrolls away. Full size on the front page,
   compact (.small) on inner pages. Once the name is out of view the bar shows the small name (.past). */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; min-height: 52px; margin: 0 auto; padding: 10px var(--gutter); }
.bar::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--bg); }  /* full-width ground without clipping the control panel */
.bar::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--ink); }
.bar-l { position: relative; display: flex; align-items: center; min-width: 0; margin: 0; }
.brand { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: serif; font-size: 22px; text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.bar.past .brand { opacity: 1; pointer-events: auto; }
.wm { display: block; height: .89em; width: auto; }
.mast { max-width: 1120px; margin: 0 auto; padding: 22px var(--gutter) 0; }   /* padding, not margins: those collapsed into the bar */
.mast-name { margin: 0 0 14px; }
.mast-name a { display: block; color: var(--ink); }
.mast-name .wm { width: 100%; height: auto; }
.mast-say { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.mast-tag { margin: 0; font-style: italic; font-size: 20px; line-height: 1.35; text-align: center; }
.mast-date, .mast-issue { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mast-issue { text-align: right; }
/* inner pages: the same masthead, compact */
.mast.small { padding-top: 14px; }
.mast.small .mast-name { width: min(440px, 70%); margin: 0 auto 8px; }
.mast.small .mast-say { padding: 7px 0; }
.mast.small .mast-tag { font-size: 15px; }
.mast.small :is(.mast-date, .mast-issue) { font-size: 11px; }
@media (max-width: 640px) {
  .brand { font-size: 18px; }
  .bar-l { min-height: 22px; min-width: 110px; }
  .mast-say { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .mast-issue { display: none; } .mast-date { font-size: 10.5px; }
  .mast-tag { font-size: 16px; }
  .mast.small .mast-name { width: 78%; }
}
@media (max-width: 560px) { .bar { gap: 10px; } }
@media (max-width: 420px) { .bar { gap: 8px; } .brand { font-size: 15px; } }

/* ---------- the menu: one button, the word "Meny" ("Stäng" while open); the panel holds the links, view, language and theme ---------- */
.ctl { display: grid; place-items: center; height: 34px; padding: 0 2px; margin-right: -4px; color: var(--ink); }
.ctl-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ctl:hover .ctl-k { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ctl-panel { position: absolute; top: calc(100% - 6px); right: var(--gutter); z-index: 20; width: min(340px, calc(100vw - 32px)); padding: 16px 18px 6px;
  background: var(--bg); color: var(--ink); border: 1.5px solid var(--ink); }
.ctl-scrim { position: fixed; inset: 0; z-index: 19; background: rgba(20, 18, 15, .45); }  /* the same backdrop as the dictionary (.gl-dlg::backdrop) */
.ctl-row { padding-bottom: 14px; }
.ctl-row + .ctl-row { padding-top: 12px; border-top: 1px solid var(--rule); }
.ctl-row > p { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ctl-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 8px; border: 1.5px solid var(--ink); }
.ctl-seg button { padding: 8px 6px; font-size: 14px; line-height: 1.2; color: var(--ink); background: transparent; }
.ctl-seg button + button { border-left: 1.5px solid var(--ink); }
.ctl-seg button:hover { background: rgba(127, 120, 105, .14); }
.ctl-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.ctl-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
.ctl-nav { margin: -8px 0 4px; }
.ctl-nav a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 19px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.ctl-nav a:hover, .ctl-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ctl-nav + .ctl-row { padding-top: 14px; }
@media (max-width: 440px) { .ctl-panel { right: 12px; } }
/* a phone (the same test as app.js phone): the bar keeps only the name and the menu button (a 44px target); the panel opens
   under the bar, full width, with the links first and language and theme below them */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .ctl { min-width: 44px; height: 44px; padding: 0 4px; margin-right: -6px; }
  .ctl-panel { top: 100%; left: 0; right: 0; width: auto; max-height: calc(100svh - 60px); overflow-y: auto; padding: 4px var(--gutter) 10px; border-width: 0 0 1.5px; }
  .ctl-nav { margin: 0 0 6px; }
  .ctl-nav a { padding: 13px 0; font-size: 22px; }
  .ctl-seg button { padding: 11px 6px; font-size: 15px; }
}

/* ---------- dictionary terms ---------- */
.term { font: inherit; color: inherit; text-decoration: underline dotted; text-decoration-color: var(--term-line); text-underline-offset: .22em; text-decoration-thickness: 1.5px; cursor: help; }
.term:hover, .term[aria-expanded="true"] { text-decoration-color: var(--ink); }
.tip { position: absolute; z-index: 20; max-width: min(320px, calc(100vw - 32px)); padding: 12px 14px; background: var(--ink); color: var(--bg); font-size: 14px; line-height: 1.45; }
.tip b { display: block; font-size: 12px; margin-bottom: 3px; }
.tip a { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; }

/* ================= The intro at the top of Galleri: what the paper is, and the way into the basics =================
   The lede and what to expect on the left; "Ny här?" and the basics page beside them, behind a column rule. */
.pm-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 32px; }
.pm-intro-lede { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.4; letter-spacing: -.005em; color: var(--ink); }
.pm-intro-more { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.pm-promo { display: block; padding: 4px 0 4px 36px; border-left: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.pm-promo:focus-visible { outline-offset: 6px; }
.pm-promo-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pm-promo-t { display: block; margin-top: 12px; font-family: var(--title); font-size: clamp(27px, 2.5vw, 32px); line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.pm-promo-t .arw { width: .6em; vertical-align: .08em; transition: transform .2s var(--ease); }
.pm-promo:hover .pm-promo-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.pm-promo:hover .pm-promo-t .arw { transform: translateX(4px); }
.pm-promo-d { display: block; margin-top: 10px; font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--ink-2); }
.pm-promo-m { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 760px) {
  .pm-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 12px; }
  .pm-intro-lede { font-size: 21px; }
  .pm-intro-more { font-size: 16px; }
  .pm-promo { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--ink); }
}

/* ================= the clipping (clipHTML): a story cut out of the paper, the article card in Galleri ================= */
.clip { --clip: color-mix(in srgb, var(--tone) 38%, #faf8f3); container-type: inline-size; width: 100%; padding: 26px 30px 22px; background: var(--clip); border: 1.5px solid var(--ink); color: var(--ink); }
.clip a { text-decoration: none; color: inherit; }
.clip-fig { margin: 0 0 18px; aspect-ratio: 3 / 1.15; max-height: 30vh; width: 100%; overflow: hidden; background: var(--tone); border: 1.5px solid var(--ink); }
.clip-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip h3 { margin-top: 10px; font-family: var(--title); font-weight: 400; font-size: clamp(30px, 4.6vw, 40px); line-height: 1.04; letter-spacing: -.005em; text-align: center; }
.clip-cols { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink); columns: 1; column-gap: 28px; column-rule: 1px solid var(--rule); font-size: 15px; line-height: 1.55; text-align: left; hyphens: auto; }
@container (min-width: 560px) { .clip-cols { columns: 2; text-align: justify; } }   /* two columns only where they fit */
.clip-cols p + p { margin-top: 8px; }
/* the drop cap: initial-letter sinks it exactly three lines, top on the first line's caps and foot on the third baseline.
   Where it is unsupported (Firefox), a plain bold first letter, never a hand-nudged float that misses the lines. */
.clip-cols p:first-child::first-letter { font-weight: 700; }
@supports ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .clip-cols p:first-child::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-family: var(--title); font-weight: 400; margin-right: .18em; }
}
.clip-cols b { font-weight: 700; }
.clip-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 10px; border-top: 4px double var(--ink); font-size: 13px; color: var(--ink-2); }
.clip-foot .more { color: var(--ink); font-style: italic; border-bottom: 1px solid var(--ink); white-space: nowrap; }
@media (max-width: 640px) { .clip { padding: 20px 18px 18px; } }

/* ================= Galleri: month by month, the heading in a row above its cards ================= */
.ve { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vh, 40px) var(--gutter) 160px; }
.ve-month { padding-top: 88px; }
.ve-side { display: grid; grid-template-columns: 200px minmax(0, 62ch); gap: 48px; align-items: start; margin-bottom: 40px; padding-top: 14px; border-top: 3px double var(--ink); }
.ve-label h2 { margin-top: 8px; font-size: 17px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ve-n { margin-top: 2px; font-size: 12px; font-style: italic; color: var(--dim); }
.ve-letter { margin-top: 6px; font-size: 17px; line-height: 1.7; }
.ve-cards { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; max-width: 720px; margin-left: 248px; }
.rise { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease); }
.rise.in { opacity: 1; transform: none; }
.ve-end { margin-top: 80px; font-size: 13px; font-style: italic; color: var(--ink-2); } .ve-end a { color: var(--ink); font-weight: 600; } .ve-end .arw { vertical-align: middle; }
@media (max-width: 1000px) { .ve-cards { margin-left: 0; } }
@media (max-width: 760px) { .ve-side { grid-template-columns: 1fr; gap: 14px; } }

/* ================= The month button (Galleri, En i taget) ================= */
.mjump { position: fixed; left: 50%; bottom: 16px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.mjump-b { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 16px; background: #faf8f3; border: 1.5px solid var(--ink); color: var(--ink); font-size: 13px; white-space: nowrap; cursor: pointer; }
.mjump-b b { font-weight: 700; }
.mjump-n { color: var(--ink-2); }
.mjump-b svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.mjump-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.mjump-b:hover { background: var(--ink); color: var(--bg); } .mjump-b:hover .mjump-n { color: inherit; }
.mjump-list { order: -1; width: 240px; max-height: min(60vh, 460px); overflow-y: auto; margin-bottom: 8px; background: #faf8f3; border: 1.5px solid var(--ink); }
.mjump-list ol { list-style: none; margin: 0; padding: 6px 0; }
.mjump-list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 14px; text-decoration: none; color: var(--ink); }
.mjump-list a .num { color: var(--dim); font-size: 12px; }
.mjump-list a:hover, .mjump-list a:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
.mjump-list a.on { background: var(--ink); color: var(--bg); } .mjump-list a.on .num { color: inherit; }
.mjump-y { padding: 10px 16px 4px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }

/* ================= The story page: a centred newspaper article ================= */
.sa { max-width: 1040px; margin: 0 auto; padding: clamp(28px, 5vh, 56px) var(--gutter) 112px; color: var(--ink); }
.sa > * { max-width: 700px; margin-left: auto; margin-right: auto; }  /* the picture keeps to the text column too */
.sa a { color: inherit; }
.art-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2) !important; text-decoration: none; }
.art-back:hover { color: var(--ink) !important; text-decoration: underline; }
.sa h1 { margin-top: 36px; font-family: var(--title); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.005em; }
.art-deck { margin-top: 20px; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; font-style: italic; color: var(--ink-2); }
.art-by { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 26px; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.art-fig { margin: 40px auto 0; }
.art-img { overflow: hidden; background: var(--tone); border: 1.5px solid var(--ink); aspect-ratio: 2 / 1; }
.art-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-body { margin-top: 40px; font-size: 19px; line-height: 1.68; color: var(--ink-long); }
.art-body p + p { margin-top: 1.1em; }
.art-body > p:first-child::first-letter { font-weight: 700; }   /* a bold first letter where initial-letter is unsupported */
@supports ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .art-body > p:first-child::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-family: var(--title); font-weight: 400; margin-right: .18em; }
}
.art-why { margin-top: 44px; padding: 24px 28px 26px; border: 1.5px solid var(--ink); background: var(--tone); }
.art-why h2, .art-src h2 { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.art-why p { margin-top: 10px; font-size: 19px; line-height: 1.6; }
.art-src { margin-top: 48px; padding-top: 14px; border-top: 3px double var(--ink); }
.art-src ol { margin: 14px 0 0; padding-left: 1.4em; }
.art-src li { margin-top: 12px; font-size: 16px; line-height: 1.45; }
.art-src li::marker { font-weight: 700; color: var(--dim); }
.art-src li a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.art-src li a:hover { text-decoration-color: var(--ink); }
.art-src li span { display: block; margin-top: 2px; font-size: 13px; letter-spacing: .04em; color: var(--dim); }
.art-note { margin-top: 20px; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--ink-2); }
.art-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.art-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.art-pager a { display: block; padding: 18px 20px 20px; border: 1.5px solid var(--ink); background: #faf8f3; text-decoration: none; }
.art-pager a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em; }
.art-pager span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.art-pager b { display: block; margin-top: 8px; font-size: 19px; line-height: 1.25; }
.art-pager .older { text-align: right; } .art-pager .older span { justify-content: flex-end; }
@media (max-width: 640px) {
  .art-body, .art-why p { font-size: 17.5px; }
  .art-pager { grid-template-columns: 1fr; }
  .art-pager .older { text-align: left; }
  .art-why { padding: 20px; }
}

/* ================= Bakgrund and Om: a centred reading column, like an article ================= */
.bg { max-width: 1040px; margin: 0 auto; padding: clamp(32px, 6vh, 64px) var(--gutter) 112px; color: var(--ink); }
.bg > * { max-width: 720px; margin-left: auto; margin-right: auto; }
/* page titles in the headline face, like the stories' (not the bold text face: that outweighed the name above it) */
.bg-head h1 { font-family: var(--title); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.2rem); line-height: 1.04; letter-spacing: -.005em; }
.bg-intro { margin-top: 16px; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.5; font-style: italic; color: var(--ink-2); }
.bg-toc { margin-top: 36px; padding: 20px 24px 18px; border: 1.5px solid var(--ink); background: #faf8f3; }
.bg-toc > p { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.bg-toc ol { margin: 12px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; counter-reset: toc; }
.bg-toc li { counter-increment: toc; break-inside: avoid; display: grid; grid-template-columns: 2em minmax(0, 1fr); padding: 5px 0; font-size: 15.5px; line-height: 1.35; }
.bg-toc li::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--dim); padding-top: 3px; font-variant-numeric: tabular-nums; }
.bg-toc a { color: var(--ink); text-decoration: none; } .bg-toc a:hover { text-decoration: underline; text-underline-offset: .18em; }
.b-body { margin-top: 56px; }
.b-body section { margin-top: 72px; } .b-body section:first-child { margin-top: 0; }
.b-body h2 { margin-top: 4px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }
/* every paragraph, the section numbers (.b-n) and the closing line (.about-more) included */
.b-body p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--ink-long); }
.b-body > section > p { font-size: 18.5px; line-height: 1.66; }
.b-n { letter-spacing: .06em; }
.b-ex { margin-top: 22px; padding: 18px 22px 20px; border: 1.5px solid var(--ink); border-left-width: 4px; background: rgba(28, 26, 22, .045); }
.b-ex + .b-ex { margin-top: 14px; }
.b-ex .b-exl { margin-top: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.b-ex h3 { margin-top: 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.b-ex p:not(.b-exl) { margin-top: 6px; font-size: 17px; line-height: 1.65; }
.cite { font-size: .68em; line-height: 0; margin-left: 2px; font-variant-numeric: tabular-nums; }
.cite a { color: var(--ink-2); text-decoration: none; padding: 0 1px; } .cite a:hover { color: var(--ink); text-decoration: underline; }
.b-links { list-style: none; margin: 18px 0 0; padding: 0; }
.b-links li { border-top: 1px solid var(--rule); }
.b-links a { display: block; padding: 14px 0 16px; text-decoration: none; }
.b-links b { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.b-links a:hover b { text-decoration: underline; }
.b-links span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.b-srcs { margin: 16px 0 0; padding-left: 1.6em; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.b-srcs li { margin-top: 8px; padding: 2px 4px; }
.b-srcs li:target { background: rgba(240, 210, 90, .3); }
.b-srcs a { color: var(--ink); }
.about-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 14px; border-top: 3px double var(--ink); }
.about-more span { color: var(--ink-2); } .about-more span a { font-style: normal; color: var(--ink); }
.about-more a { font-style: italic; text-decoration: none; border-bottom: 1px solid var(--ink); }
@media (max-width: 640px) { .bg-toc ol { columns: 1; } .bg-toc { padding: 18px; } .b-body > section > p { font-size: 17.5px; } }
@media (max-width: 420px) { .b-ex { padding: 16px 16px 18px; } }

/* ================= reference pages: the dictionary and the archive ================= */
.page { max-width: 960px; margin: 0 auto; padding: clamp(36px, 7vh, 72px) var(--gutter) 96px; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); }
.page > header { grid-column: 1 / -1; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); margin-bottom: 40px; }
.page > header h1 { grid-column: 2; padding-left: 32px; font-family: var(--title); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 400; line-height: 1.05; letter-spacing: -.005em; }
.page > header p { grid-column: 2; padding-left: 32px; margin-top: 8px; max-width: 56ch; color: var(--ink-2); font-size: 14px; }
.page .col { grid-column: 2; padding-left: 32px; min-width: 0; }
.letters { grid-column: 1; text-align: right; padding-right: 28px; position: sticky; top: 72px; align-self: start; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; font-weight: 600; font-size: 13px; }
.letters a { color: var(--dim); text-decoration: none; } .letters a:hover { color: var(--ink); }
dl.gloss { margin: 0; max-width: 62ch; }
.gloss dt { font-size: 15px; font-weight: 600; padding-top: 16px; }
.gloss dt span { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.gloss dt span[id] { margin: 0; }   /* the letter's anchor */
.gloss dd { margin: 3px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
.gloss dt:target { text-decoration: underline; text-underline-offset: .2em; }
.archive { list-style: none; margin: 0; padding: 0; max-width: 70ch; border-top: 1px solid var(--rule); }
.archive li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.archive .m { font-size: 12px; color: var(--dim); }
.archive h3 { font-size: 15px; font-weight: 700; margin-top: 2px; }
.archive p { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.archive a { text-decoration-color: var(--rule); }
.btn { margin-top: 20px; font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: .22em; }
.btn[disabled] { color: var(--dim); cursor: default; }
/* phone: one column, no letter index */
@media (max-width: 760px) {
  .page, .page > header { grid-template-columns: 1fr; }
  .page > header h1, .page > header p, .page .col { grid-column: 1; padding-left: 0; }
  .letters { display: none; }
}

/* ---------- the dictionary as a modal ---------- */
.gl-dlg { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 1.5px solid var(--ink); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); }
.gl-dlg::backdrop { background: rgba(20, 18, 15, .45); }
.gl-box { display: flex; flex-direction: column; max-height: min(80vh, 760px); }
.gl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; border-bottom: 3px double var(--ink); }
.gl-top h2 { font-size: 22px; font-weight: 700; }
.gl-x { font-size: 16px; padding: 4px 8px; color: var(--ink-2); } .gl-x:hover { color: var(--ink); }
.gl-q { margin: 14px 24px 6px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff8; font: inherit; font-size: 16px; color: var(--ink); }
.gl-q:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.gl-list { margin: 0; padding: 4px 24px 8px; overflow-y: auto; }
.gl-list > div { padding: 12px 0; border-top: 1px solid var(--rule); } .gl-list > div:first-child { border-top: 0; }
.gl-list dt { font-weight: 700; font-size: 16.5px; }
.gl-list dt span { margin-left: 8px; font-weight: 400; font-style: italic; font-size: 14px; color: var(--dim); }
.gl-list dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.gl-none { padding: 8px 24px 16px; color: var(--dim); font-style: italic; }
.gl-foot { padding: 12px 24px 16px; border-top: 1px solid var(--rule); font-size: 14px; }
.gl-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
@media (max-width: 640px) { .gl-dlg { max-height: 88vh; } .gl-box { max-height: 88vh; } .gl-top, .gl-list, .gl-foot { padding-left: 18px; padding-right: 18px; } .gl-q { margin-left: 18px; margin-right: 18px; } }

/* ================= dark paper: what the colour tokens alone do not cover ================= */
:root[data-theme="dark"] :is(.bg-toc, .b-ex, .art-pager a, .gl-q, .gl-dlg, .mjump-b, .mjump-list) { background: var(--panel); }
:root[data-theme="dark"] .clip { --clip: color-mix(in srgb, var(--tone) 22%, var(--bg)); }
:root[data-theme="dark"] :is(.art-img img, .clip-fig img) { filter: brightness(.9); }   /* pictures, slightly dimmed */
:root[data-theme="dark"] .gl-dlg::backdrop, :root[data-theme="dark"] .ctl-scrim { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .b-srcs li:target { background: rgba(240, 210, 90, .18); }

/* ================= Briefen: the second look, for En i taget =================
   A calm news briefing: Hanken Grotesk on white, one column for everything, rules instead of boxes, and one teal for the month
   you are in and the "why it matters" label. Every page wears it while the reader's view is En i taget (html[data-look="brief"],
   set by app.js and, before the first paint, by index.html). The paper's rules above draw the shared parts (bar, tip, panel,
   inner pages); the rules here restyle them, and draw Briefen's own view and story page. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/static/fonts/hanken-grotesk-normal-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/static/fonts/hanken-grotesk-normal-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root[data-look="brief"] {
  --bg: #ffffff; --ink: #151514; --ink-2: #454542; --dim: #686864; --rule: #e6e5e1; --ink-long: #1f1f1d; --term-line: #9a9a94; --scroll: #d6d5d0;
  --accent: #0b6b60;    /* the month you are in, the "why it matters" label */
  --field: #f4f4f1;     /* quiet grounds: the contents box, examples, the search field, segmented controls */
  --sel: rgba(11, 107, 96, .16);
  --serif: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --title: var(--serif);
  --measure: 680px;     /* the one column every page reads in, the bar included */
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, .2);
}
:root[data-look="brief"][data-theme="dark"] {
  --bg: #121211; --ink: #ededea; --ink-2: #c4c4bf; --dim: #9a9a94; --rule: #2a2a27; --ink-long: #e2e2de; --term-line: #6f6f6a; --scroll: #2a2a27;
  --accent: #62cdbb; --field: #1c1c1a; --panel: #1c1c1a; --sel: rgba(98, 205, 187, .22);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, .6);
}
:root[data-look="brief"] body { font-size: 17px; line-height: 1.55; }
:root[data-look="brief"] ::selection { background: var(--sel); color: var(--ink); }
:root[data-look="brief"] :focus-visible { outline-color: var(--accent); }
:root[data-look="brief"] .mast { display: none; }
.br-in { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

/* the bar: the name and the links, in line with the column; it scrolls away (on the front page the month row is what sticks) */
:root[data-look="brief"] .bar { position: relative; max-width: calc(var(--measure) + 2 * var(--gutter)); min-height: 0; padding-block: 22px 0; }
:root[data-look="brief"] .bar::before, :root[data-look="brief"] .bar::after { display: none; }
:root[data-look="brief"] .brand { position: static; transform: none; opacity: 1; pointer-events: auto; font-size: 26px; line-height: 1; }   /* the wordmark, 23px tall */
:root[data-look="brief"] .bar.home .brand { display: none; }   /* the front page has it large, just below */
:root[data-look="brief"] .ctl { margin-right: -2px; color: var(--ink-2); }
:root[data-look="brief"] .ctl-k { font-size: 15px; font-weight: 550; letter-spacing: 0; text-transform: none; }
:root[data-look="brief"] .ctl:hover, :root[data-look="brief"] .ctl[aria-expanded="true"] { color: var(--ink); }
:root[data-look="brief"] .ctl:hover .ctl-k { text-decoration: none; }
/* the panel: rounded, lifted, segmented controls on a quiet ground */
:root[data-look="brief"] .ctl-panel { top: calc(100% + 8px); padding: 16px 16px 4px; border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
:root[data-look="brief"] .ctl-nav { margin: -10px 0 4px; }
:root[data-look="brief"] .ctl-nav a { padding: 11px 0; font-size: 17px; font-weight: 600; }
:root[data-look="brief"] .ctl-nav a:hover, :root[data-look="brief"] .ctl-nav a[aria-current] { color: var(--accent); text-decoration: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  :root[data-look="brief"] .ctl-panel { left: 12px; right: 12px; padding: 8px 16px 6px; }   /* clear of the screen's edges */
}
:root[data-look="brief"] .ctl-row > p { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
:root[data-look="brief"] .ctl-seg { gap: 3px; padding: 3px; border: 0; border-radius: 8px; background: var(--field); }
:root[data-look="brief"] .ctl-seg button { border: 0; border-radius: 6px; font-size: 14px; }
:root[data-look="brief"] .ctl-seg button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
:root[data-look="brief"] .ctl-seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
:root[data-look="brief"] .tip { padding: 12px 14px; border-radius: 8px; font-size: 15px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
:root[data-look="brief"] .tip b { font-size: 15px; font-weight: 650; }

/* ---------- the head, the story's points and facts ---------- */
.br { color: var(--ink); }
.br-head { padding-block: 36px 8px; }
.br-name { line-height: 0; }
.br-name .wm { width: min(100%, 440px); height: auto; }
.br-sub { margin-top: 22px; max-width: 36em; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.br-sub b { font-weight: 650; color: var(--ink); }
/* "Börja här": one line under it, the label in teal, the basics page's title, its reading time */
.br-start { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--ink); text-decoration: none; }
.br-start .k { font-weight: 650; color: var(--accent); }
.br-start b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.br-start b .arw { transition: transform .2s var(--ease); }
.br-start:hover b { color: var(--accent); } .br-start:hover b .arw { transform: translateX(3px); }
.br-start .num { color: var(--dim); }
.br-count { margin-top: 6px; font-size: 15px; color: var(--dim); }
.br-letter { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--ink-long); }
.br-bul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.br-bul li { position: relative; padding-left: 20px; font-size: 18px; line-height: 1.5; }
.br-bul li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.br-why { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.br-why b { font-weight: 650; color: var(--accent); }
.br-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--dim); font-variant-numeric: tabular-nums; }
.br-read { display: inline-flex; align-items: center; gap: 5px; }
.br-read svg { width: 13px; height: 13px; }
.br-end { margin-top: 96px; padding: 24px 0 140px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; color: var(--dim); }
.br-end a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--rule); }
.br-end a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- En i taget: a story per screen, scroll-snapped under the month row ---------- */
html:has(body[data-v="f"]) { scroll-snap-type: y mandatory; }
:root[data-look="brief"] body[data-v="f"] .bar { scroll-snap-align: start; }   /* the first stop: the top of the page, with the head */
.reel-slide { min-height: 100svh; display: grid; place-items: center; padding: 40px var(--gutter) 64px; scroll-snap-align: start; scroll-snap-stop: always; }
.reel-body { width: min(var(--measure), 100%); }
.bf figure { margin: 0 0 24px; }
.bf img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 6px; background: var(--rule); }
.bf h3 { font-size: clamp(26px, 3vw, 30px); line-height: 1.18; font-weight: 700; letter-spacing: -.022em; }
.bf h3 a { text-decoration: none; }
.bf h3 a:hover { color: var(--accent); }
.bf-text { margin-top: 16px; font-size: 18px; line-height: 1.5; }
.bf-go { margin-top: 22px; }
.bf-go a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.bf-go a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bf-go .arw { transition: transform .2s var(--ease); } .bf-go a:hover .arw { transform: translateX(3px); }
.bf-month h2 { font-size: clamp(32px, 3.8vw, 40px); line-height: 1.1; font-weight: 750; letter-spacing: -.03em; }
.reel-end .br-end { margin: 0; padding-bottom: 0; }
/* each slide comes into focus as it is scrolled in and out of it as it leaves; still and sharp while it fills the screen */
@supports (animation-timeline: view()) {
  .reel-body { animation: reelPass linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes reelPass {
    0% { opacity: 0; transform: translateY(6vh); }
    34%, 66% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-4vh); }
  }
}

/* ---------- the month button (monthJump) in Briefen's dress: a lifted pill, and a rounded list above it ---------- */
:root[data-look="brief"] .mjump { bottom: 20px; }
:root[data-look="brief"] .mjump-b { gap: 10px; height: 42px; padding: 0 14px 0 18px; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; }
:root[data-look="brief"] .mjump-b b { font-weight: 650; }
:root[data-look="brief"] .mjump-n { color: var(--dim); }
:root[data-look="brief"] .mjump-b:hover { background: var(--bg); color: var(--accent); } :root[data-look="brief"] .mjump-b:hover .mjump-n { color: var(--dim); }
:root[data-look="brief"] .mjump-list { width: 248px; margin-bottom: 10px; padding: 6px; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); }
:root[data-look="brief"] .mjump-list ol { padding: 0; }
:root[data-look="brief"] .mjump-list a { padding: 8px 12px; border-radius: 8px; font-size: 15px; }
:root[data-look="brief"] .mjump-list a .num { font-size: 13px; }
:root[data-look="brief"] .mjump-list a:hover, :root[data-look="brief"] .mjump-list a:focus-visible { background: var(--field); }
:root[data-look="brief"] .mjump-list a.on { background: var(--sel); color: var(--accent); font-weight: 600; } :root[data-look="brief"] .mjump-list a.on .num { color: var(--accent); }
:root[data-look="brief"] .mjump-y { padding: 10px 12px 4px; font-weight: 600; letter-spacing: 0; }
:root[data-look="brief"][data-theme="dark"] :is(.mjump-b, .mjump-list) { background: var(--field); }

/* ---------- the story page: the briefing's column, read top to bottom ---------- */
.bs { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 140px; color: var(--ink); }
.bs-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 52px; font-size: 15px; font-weight: 550; color: var(--ink-2); text-decoration: none; }
.bs-back svg { width: 14px; height: 14px; }
.bs-back:hover { color: var(--accent); }
.bs h1 { margin-top: 28px; font-size: clamp(32px, 4.8vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.bs-deck { margin-top: 18px; font-size: clamp(19px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-2); }
.bs > .br-meta { margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.bs-fig { margin: 32px 0 0; }
.bs-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--rule); }
.bs-body { margin-top: 32px; }
.bs-body p { margin-bottom: 1.1em; font-size: 18px; line-height: 1.65; color: var(--ink-long); }
.bs-sec { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }
.bs-sec h2 { font-size: 15px; line-height: 1.3; font-weight: 650; }
.bs-why h2 { color: var(--accent); }
.bs-why p { margin-top: 10px; font-size: 19px; line-height: 1.55; }
.bs-src { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.bs-src a { font-weight: 550; text-decoration: none; }
.bs-src a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bs-src span { display: block; margin-top: 2px; font-size: 14px; color: var(--dim); }
.bs-note { margin-top: 32px; font-size: 14px; line-height: 1.55; color: var(--dim); }
.bs-note a { color: var(--ink-2); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.bs-note a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.bs-pager a { display: block; min-width: 0; text-decoration: none; }
.bs-pager a.older { grid-column: 2; text-align: right; }
.bs-pager small { display: block; font-size: 14px; color: var(--dim); }
.bs-pager b { display: block; margin-top: 4px; font-size: 16px; line-height: 1.35; font-weight: 600; text-wrap: balance; }
.bs-pager a:hover b { color: var(--accent); }
:root[data-theme="dark"] :is(.bf img, .bs-fig img) { filter: brightness(.9); }

/* ---------- the inner pages (Grunderna, Om, the dictionary, the archive) in the briefing's column and type ---------- */
:root[data-look="brief"] :is(.bg, .page) { max-width: calc(var(--measure) + 2 * var(--gutter)); padding-top: 52px; }
:root[data-look="brief"] .bg > * { max-width: none; }
:root[data-look="brief"] :is(.bg-head h1, .page > header h1) { font-size: clamp(32px, 4.6vw, 44px); font-weight: 750; line-height: 1.08; letter-spacing: -.032em; }
:root[data-look="brief"] .bg-intro { font-size: 19px; line-height: 1.5; font-style: normal; }
:root[data-look="brief"] .bg-toc { border: 0; border-radius: 8px; background: var(--field); }
:root[data-look="brief"] .bg-toc > p { font-size: 15px; font-weight: 650; letter-spacing: 0; text-transform: none; }
:root[data-look="brief"] .bg-toc li::before { font-weight: 600; }
:root[data-look="brief"] .bg-toc a:hover { color: var(--accent); }
:root[data-look="brief"] .b-n { font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--accent); }
:root[data-look="brief"] .b-body h2 { font-size: clamp(24px, 2.8vw, 28px); font-weight: 750; letter-spacing: -.022em; }
:root[data-look="brief"] .b-body > section > p { font-size: 18px; line-height: 1.65; }
:root[data-look="brief"] .b-ex { border: 0; border-radius: 8px; background: var(--field); }
:root[data-look="brief"] .b-ex .b-exl { font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--accent); }
:root[data-look="brief"] .b-ex h3 { font-weight: 650; }
:root[data-look="brief"] .about-more { border-top: 1px solid var(--rule); }
:root[data-look="brief"] .about-more a { font-style: normal; border-bottom-color: var(--rule); }
:root[data-look="brief"] .about-more a:hover { color: var(--accent); border-bottom-color: currentColor; }
/* the dictionary and the archive: one column, the letters in a row above it */
:root[data-look="brief"] .page { display: block; }
:root[data-look="brief"] .page > header { display: block; margin-bottom: 28px; }
:root[data-look="brief"] :is(.page > header h1, .page > header p, .page .col) { padding-left: 0; }
:root[data-look="brief"] .page > header p { margin-top: 14px; font-size: 17px; line-height: 1.55; }
:root[data-look="brief"] .letters { position: static; justify-content: flex-start; gap: 4px 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rule); font-size: 15px; text-align: left; }
:root[data-look="brief"] .letters a:hover { color: var(--accent); }
:root[data-look="brief"] .gloss dt { font-size: 18px; font-weight: 650; }
:root[data-look="brief"] .gloss dt span { font-size: 14px; }
:root[data-look="brief"] .gloss dd { font-size: 17px; line-height: 1.55; }
:root[data-look="brief"] .archive h3 { font-size: 18px; font-weight: 650; }
:root[data-look="brief"] .archive p { font-size: 15px; }
:root[data-look="brief"] .archive .m { font-size: 13px; }
:root[data-look="brief"] .btn { color: var(--accent); }
:root[data-look="brief"] .gl-dlg { border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35); }
:root[data-look="brief"] .gl-top { border-bottom: 1px solid var(--rule); }
:root[data-look="brief"] .gl-q { border: 0; border-radius: 8px; background: var(--field); }
:root[data-look="brief"] .gl-q:focus { outline-color: var(--accent); }
:root[data-look="brief"] .gl-list dt { font-weight: 650; }
:root[data-look="brief"] :is(.gl-list dt span, .gl-none) { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
}