/*
 * Käännösopas — the stylesheet.
 *
 * Literata (self-hosted, OFL) for everything a reader reads, one reading
 * column, no cards. The page is a title page: author, title, and the
 * translator's credit are the content. The colours are the identity's
 * palette (lib/plate.mjs, reference C, chosen 2026-09-16): cream paper,
 * dark green ink, a muted green, and ochre as the marker — it appears
 * where a choice is made or a thing is topical, never as paint. Rules
 * appear only where structure needs them. The plate — the work's title
 * as typography, in one of eight era faces or two genre faces — is the one picture.
 *
 * Every colour is a token on :root. The site is paper only: the owner turned
 * the dark scheme off on 2026-09-24 (it is in git history, a token swap in a
 * dark-scheme media query, should it return). Text over the ochre marker is
 * always the dark ink.
 */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-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: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-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: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Greek, for an original like Ὀδύσσεια — polytonic in the extended subset. Added when Homer arrived (2026-09-20). */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-greek-ext.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-greek-ext.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
/* Superscript figures for a footnote's mark in a sample (¹ ² ³ are in the Latin subset; ⁰ and ⁴–⁹ are not), subset by
   Google Fonts' `text=` (the owner, 2026-10-20). */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-superscripts.woff2") format("woff2"); unicode-range: U+2070, U+2074-2079; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-superscripts.woff2") format("woff2"); unicode-range: U+2070, U+2074-2079; }
/* The arrows ← → (U+2190, U+2192), for a fix's button under a sample ("' → ’"), subset the same way (the owner, 2026-10-21). */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-roman-arrows.woff2") format("woff2"); unicode-range: U+2190, U+2192; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/literata-italic-arrows.woff2") format("woff2"); unicode-range: U+2190, U+2192; }
/* The Mac's modifier keys, ⌥, ⇧ and ⌘, in the Välimerkit tables of both sample forms (lib/marks.mjs): Literata has
   none of them, and a reader's system may have none either. Three glyphs, subset by Google Fonts' `text=` (2026-10-20). */
@font-face { font-family: "Noto Sans Symbols 2"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/noto-sans-symbols-2-keys.woff2") format("woff2"); unicode-range: U+21E7, U+2318, U+2325; }
/* The plates' faces (lib/plate.mjs): one per era, and two genre faces. A page fetches only the family its plate sets. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-roman-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: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-roman-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-italic-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: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/jost-roman-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: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/jost-roman-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/jost-italic-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: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/jost-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The plates' own subsets (2026-09-23): only the characters the plates set (CHARS in scripts/plates.mjs), one file per style, the axes the plates never vary pinned. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/cinzel-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/eb-garamond-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("/fonts/eb-garamond-italic-plates.woff2") format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/old-standard-roman-400-plates.woff2") format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/old-standard-roman-700-plates.woff2") format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/old-standard-italic-400-plates.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/big-shoulders-display-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "Fjalla One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fjalla-one-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-italic-plates.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/pinyon-script-roman-plates.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-roman-plates.woff2") format("woff2"); }

:root {
  --paper: #e8dcc5;
  --ink: #103f35;
  --ink-soft: #1d4f43;
  --muted: #245d4e;
  --rule: #cdbf9c;
  --marker: #c29b45;
  --on-marker: #103f35;
  --on-marker-soft: #1d4f43;
  --marker-text: #6b4f0e;
  --field: #f2ead9;
  /* The home page's bands (the owner's design, 2026-09-24): Ajankohtaista on a tan band, Tiesitkö? on a light panel. */
  --band: #cdbf9c;
  --panel: #f2ead9;
  /* The work page's Hanki luettavaksi rows sit a shade deeper than the band, and the band's rules are drawn darker than it. */
  --band-deep: #c3b48f;
  --rule-on-band: #b3a37b;
  --ink-strong: #1f1f1f;
  --column: 42.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  color-scheme: light;
}


/* ---------------------------------------------------------------- base */

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Literata", "Noto Sans Symbols 2", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
i, em { font-style: italic; }
[hidden] { display: none !important; }

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

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 1rem; top: -100%;
  padding: 0.5rem 1rem; background: var(--marker); color: var(--on-marker);
  text-decoration: none; z-index: 10;
}
.skip:focus { top: 1rem; }

/* ----------------------------------------------------------- masthead */

/* The brand, the menu beside it, the search at the right (the owner's design, 2026-09-24). On a phone the
   brand and a "Haku" button share a row and the menu is visible on the next — no hidden menu. */
/* The masthead and the footer keep to the content's column (the owner, 2026-10-18): on a wide screen their
   edges are the column's, not the window's. --page-inset is the column's distance from the window's edge,
   a % of the body's width so a desktop scrollbar cannot push the page sideways; on a narrow screen it is
   the gutter, as before. */
:root { --page-inset: max(var(--gutter), calc((100% - var(--column)) / 2)); }
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem;
  padding: 0.875rem var(--page-inset);
  border-bottom: 1px solid var(--rule);
}
/* The logo, D3 (the owner's choice, 2026-09-27; docs/identity.md): the name in EB Garamond italic over the
   language in spaced Big Shoulders capitals, both set right. Sized in em of .brand so one rule scales it; the
   language's trailing letter-space hangs past the edge so its last letter lines up with the name's. The same
   drawing, outlined, is in design/logo/. */
.brand { display: inline-grid; justify-items: end; font-size: 1.55rem; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .l1 { font-family: "EB Garamond", Garamond, Georgia, serif; font-style: italic; font-weight: 500; padding-right: 0.04em; }
.brand .l2 {
  font-family: "Big Shoulders Display", "Oswald", sans-serif; font-weight: 700; font-size: 0.56em;
  letter-spacing: 0.12em; margin-right: -0.12em; margin-top: 0.06em; text-transform: uppercase;
}
.masthead nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; font-size: 1rem; }
.masthead nav a { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.75rem; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { text-decoration: underline; }
/* The back-office link, present only on a signed-in curator's copy of the page (server/index.mjs). */
.masthead nav a.admin-link { box-shadow: inset 0 -0.42em var(--marker); }
.site-search { margin-left: auto; }
/* The Instagram mark beside the search (layout.mjs): a 44 px target around a 24 px glyph in the ink. */
.instagram { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--ink); }
.instagram:hover { color: var(--ink-strong); }
.instagram svg { display: block; }
.masthead-social { margin-left: -1.75rem; }
.site-search input {
  font: inherit; font-size: 1rem; width: 10rem; height: 2.25rem; padding: 0 0.625rem; box-sizing: border-box;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--field); color: var(--ink);
}
.site-search input::placeholder { color: var(--muted); opacity: 1; }
.search-toggle { display: none; }
@media (max-width: 40rem) {
  .masthead { gap: 0 1rem; padding-block: 0.75rem 0; }
  .brand { font-size: 1.375rem; margin-right: auto; }
  .masthead nav { order: 3; flex-basis: 100%; gap: 0 1.375rem; font-size: 0.9375rem; }
  .site-search { order: 4; flex-basis: 100%; margin: 0 0 0.875rem; }
  .masthead-social { margin-left: -0.5rem; }
  .site-search input { width: 100%; height: 3rem; font-size: 1.0625rem; }
  .has-search-toggle .search-toggle {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem;
    font: inherit; font-size: 0.9375rem; color: var(--ink); background: none;
    border: 1px solid var(--ink); border-radius: 3px; cursor: pointer;
  }
  .has-search-toggle .search-toggle[aria-expanded="true"] { box-shadow: inset 0 -3px var(--marker); }
  .has-search-toggle:not(.search-open) .site-search { display: none; }
}

/* -------------------------------------------------------------- column */

main { max-width: var(--column); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 10vw, 7.5rem); }

.work > section, .hero, .hot, .all, .prose > section { margin-top: 4.5rem; }
.work > section > h2, .hot > h2, .all > h2 { font-size: 1.875rem; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.lede { color: var(--muted); }
.pending { color: var(--muted); }

/* ------------------------------------------------------ the title page */

.titlepage { display: flex; flex-direction: column; gap: 0.875rem; }
/* The plate: the title as typography, beside the title page on wide screens, above it on narrow. Decorative — the h1 is the name. */
.titlepage .plate-figure { margin: 0 0 0.5rem; max-width: 15rem; }
.plate { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
/* The plate's text: the era's face and the width axis by class, everything else as attributes (no style attribute under the CSP). */
.plate .f-bodoni { font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; font-variation-settings: "opsz" 96; }
.plate .f-jost { font-family: "Jost", "Futura", "Century Gothic", sans-serif; }
.plate .f-cinzel { font-family: "Cinzel", "Trajan Pro", Georgia, serif; }
.plate .f-garamond { font-family: "EB Garamond", Garamond, Georgia, serif; }
.plate .f-oldstandard { font-family: "Old Standard TT", Georgia, serif; }
.plate .f-bigshoulders { font-family: "Big Shoulders Display", "Oswald", sans-serif; }
.plate .f-fjalla { font-family: "Fjalla One", "Oswald", sans-serif; }
.plate .f-fraunces { font-family: "Fraunces", "Cooper Black", Georgia, serif; }
.plate .f-pinyon { font-family: "Pinyon Script", "Snell Roundhand", cursive; }
.plate .f-bricolage { font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif; }
.plate .colophon { font-family: "Literata", Georgia, serif; }
/* A plate is drawn in a 400-unit box and scaled down, so its text is set at a few pixels: ask for exact
   glyph placement rather than positions rounded to the pixel grid. (This was first added, 2026-09-26, as
   a guess at why Safari crowded the colophon's spaced capitals; it was not that — see lib/plate.mjs.) */
.plate text { text-rendering: geometricPrecision; }
@media (min-width: 62rem) {
  .titlepage { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; grid-auto-rows: min-content; column-gap: 2.5rem; row-gap: 0.875rem; align-items: start; }
  .titlepage > * { grid-column: 1; }
  .titlepage .plate-figure { grid-column: 2; grid-row: 1 / span 6; margin: 0.35rem 0 0; max-width: none; }
}
.titlepage .author { font-size: 1.3125rem; }
/* A long Finnish compound ("Kotiopettajattaren") must be allowed to break on a phone: hyphenate by the page's language, and as a last resort break anywhere. */
/* A title breaks between words, never inside one ("Ylpeys ja / ennakkoluulo", not "en-nakkoluulo", the owner
   2026-10-18); a word too long for a narrow screen's whole line may still break, unhyphenated, as a last resort. */
.titlepage h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); line-height: 1.05; letter-spacing: -0.02em; hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.titlepage .original { color: var(--muted); }
.titlepage .also-titled { color: var(--muted); font-size: 1rem; }
.titlepage .also-titled .details { white-space: nowrap; }
.titlepage .count { font-size: 1.25rem; text-wrap: pretty; }
.titlepage .synopsis { margin-top: 1rem; text-wrap: pretty; }
/* The desk writes the first paragraph about the work and the second about translating it; they stand apart. */
.titlepage .synopsis + .synopsis { margin-top: 1.125rem; }
.titlepage .subjects { font-size: 1rem; color: var(--muted); text-wrap: pretty; }
.titlepage .subjects .label { color: var(--muted); }
.titlepage .subjects a { color: var(--ink-soft); text-decoration: none; box-shadow: inset 0 -1px var(--rule); }
.titlepage .subjects a:hover { box-shadow: inset 0 -2px var(--ink); }

/* ------------------------------------------------- DISCOVER: the list */

.translations { list-style: none; }
.translations > li + li { margin-top: 2.25rem; }
.translation { position: relative; }
.translation .credit { display: flex; flex-direction: column; gap: 0.125rem; }
.translation .year { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.translation .who { font-size: 1.5rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.translation .imprint { font-size: 1rem; color: var(--muted); margin-top: 0.25rem; }
.translation .note { font-size: 1rem; margin-top: 0.375rem; }
.translation .description { margin-top: 0.75rem; text-wrap: pretty; }
.translation .description + .description { margin-top: 0.75rem; }
.translation .published-as { font-size: 1rem; margin-top: 0.25rem; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.5rem; font-size: 0.9375rem; }
.tags li { box-shadow: inset 0 -3px var(--marker); padding-bottom: 1px; }

/* ----------------------------------------------- masked historical language */

/*
 * A registered term shows as its first letter and a dash; the note under
 * the element says why, and its fold shows the text whole. The mask is
 * the site's display, never a change to the text — the fold is the proof.
 */
/* A masked word (`.masked`, "v—") reads in the text's own colour and spacing: no highlighting (the curator, 2026-10-03). */
.mask-note { font-size: 0.875rem; color: var(--muted); margin-top: 0.375rem; max-width: 60ch; }
.mask-note summary { cursor: pointer; text-wrap: pretty; }
.mask-note summary:hover { color: var(--ink); }
.mask-note .reveal { text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap; }
.mask-note .full { margin-top: 0.5rem; color: var(--ink); font-size: 1rem; }
.quote .mask-note { margin-top: 0.5rem; }
/* mask.js: the note as one line with a button that reveals the words in place; it looks like the fold's "Näytä". */
.mask-note button.reveal { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mask-note button.reveal:hover { color: var(--ink); }

/* ------------------------------------------------------- at a glance */

.glance { width: 100%; border-collapse: collapse; margin: 0 0 2.5rem; font-size: 0.9375rem; line-height: 1.4; }
.glance caption { text-align: left; font-size: 1rem; color: var(--muted); padding: 0 0 0.625rem; }
.glance th { text-align: left; font-weight: 500; padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.glance td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.glance td:last-child, .glance th:last-child { padding-right: 0; }
.glance .year a { font-variant-numeric: tabular-nums; text-decoration: none; box-shadow: inset 0 -1px var(--ink); }
.glance .year a:hover { box-shadow: inset 0 -2px var(--ink); }
.glance .sub { display: block; color: var(--muted); }
.glance .no-sample { color: var(--muted); }

/* Narrow screens: a compact table of three columns — Vuosi · Suomentaja · Näyte (the owner's choice C,
   2026-09-27). Publisher and character go small under the translator, an empty character is left out, and
   Saatavuus leaves the view: the year links to the translation's card, and one link under the legend leads to
   Hanki luettavaksi. The hidden columns stay in the table for screen readers, so it reads as on a desktop. */
.get-jump { display: none; }
#h-get { scroll-margin-top: 1.5rem; } /* where the link lands: the heading with a little air above it */
@media (max-width: 48rem) {
  .glance, .glance thead, .glance tbody { display: block; }
  .glance tr { display: grid; grid-template-columns: 3.5rem 1fr auto; column-gap: 0.75rem; }
  .glance th, .glance td { padding: 0; border: 0; }
  .glance thead tr { border-bottom: 1px solid var(--ink); padding-bottom: 0.4rem; }
  .glance tbody tr { row-gap: 0.1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .glance .c-publisher, .glance .c-properties, .glance .c-available { grid-column: 2; }
  .glance th.c-publisher, .glance th.c-properties, .glance .c-available, .glance .c-properties.empty {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .glance .c-year { grid-column: 1; grid-row: 1 / span 3; }
  .glance .c-translator { grid-column: 2; grid-row: 1; font-weight: 500; }
  .glance th.c-translator { font-weight: 500; }
  .glance td.c-publisher { grid-row: 2; font-size: 0.875rem; color: var(--muted); }
  .glance td.c-properties { grid-row: 3; font-size: 0.875rem; color: var(--muted); font-style: italic; }
  .glance .c-sample { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
  .glance td.c-year a { font-size: 1.0625rem; }
  .discover .legend { margin-bottom: 0; }
  .get-jump { display: block; margin: 0; font-size: 0.9375rem; }
  .get-jump a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .get-jump a::after { content: ""; border-top: 0.5em solid currentColor; border-left: 0.32em solid transparent; border-right: 0.32em solid transparent; }
}
}

.legend { margin: -1.5rem 0 2.5rem; font-size: 0.9375rem; }
.legend summary { cursor: pointer; color: var(--muted); }
.legend summary:hover { color: var(--ink); }
.legend dl { margin-top: 0.5rem; }
.legend dt { font-weight: 500; margin-top: 0.5rem; }
.legend dd { margin: 0; color: var(--muted); }

/* Wide screens: the year hangs in the margin, like a printing history. */
@media (min-width: 62rem) {
  .translation .credit { display: block; }
  .translation .year { position: absolute; left: -6.5rem; top: 0.45em; width: 5rem; text-align: right; font-size: 1.125rem; }
}

/* ------------------------------------------------ RINNAKKAIN: passages */

/*
 * The passages are one element: a row of choices, then one passage. Without
 * JS the row is jump links and the passages follow one another; with it the
 * row is tabs and one passage shows. The chosen tab carries the marker, as
 * a choice does everywhere on the site.
 */
.samples h3 { font-size: 1.4375rem; margin-top: 2.5rem; }
.passage-nav { margin-top: 1.5rem; }
.passage-nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 1rem; }
.passage-nav a { text-decoration: none; box-shadow: inset 0 -1px var(--ink); }
.passage-nav a:hover { box-shadow: inset 0 -2px var(--ink); }
.passage-tab { font: inherit; color: var(--muted); background: none; border: 0; padding: 0.125rem 0 0.25rem; cursor: pointer; box-shadow: inset 0 -1px var(--rule); }
.passage-tab:hover { color: var(--ink); }
.passage-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--marker); }
.samples.tabbed .passage { margin-top: 0.5rem; }
.samples.tabbed .passage > h3 { margin-top: 1.5rem; }
.samples.tabbed .passage > h3 .n { display: none; }
.passage > h3 .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Where the passage is in the work ("Osa 1, luku 6"), said once for every translation; with the tabs it stands first. */
.passage-where { color: var(--muted); font-size: 1rem; margin-top: 0.25rem; }
.samples.tabbed .passage-where { margin-top: 1.5rem; }
.passage .sample-missing { margin-top: 1.5rem; color: var(--muted); font-size: 1rem; }
.passage .sample-missing ul { list-style: none; margin-top: 0.25rem; }
.passage .sample-missing li { margin-top: 0.125rem; }
.comparison { margin-top: 1rem; text-wrap: pretty; }

.quote { margin: 1.125rem 0 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 1.25rem; font-style: italic; text-wrap: pretty; }
/* A sample's paragraphs as a book sets them: no space between, every one after the first indented; a line break within one is not (the owner, 2026-10-20). */
.quote blockquote p + p { text-indent: 1.5em; }
.quote figcaption { font-size: 0.9375rem; color: var(--muted); margin-top: 0.375rem; }
.quote.original blockquote p { font-style: normal; }
/* A sample is set in italic, so a word the book set in italic turns upright — the classic rule; the original is upright, so its emphasis is italic. */
.quote.sample blockquote em { font-style: normal; }
.quote.original blockquote em { font-style: italic; }
u { text-decoration: underline; text-underline-offset: 0.12em; }
.quote.original { padding-bottom: 1.125rem; border-bottom: 1px solid var(--rule); }
.legal { font-size: 0.875rem; color: var(--muted); margin-top: 1.5rem; }

/* ------------------------------------------------------------ GET IT */

.get-translation { margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--rule); }
.get-translation h3 { font-size: 1.375rem; }
.get-translation .published-as { font-size: 1rem; color: var(--muted); margin-top: 0.125rem; }
.get-translation .pending { margin-top: 0.5rem; }
.get-translation .available { margin-top: 0.375rem; }
.get-translation .available .details { color: var(--muted); }
.get-translation > .links { margin-top: 0.625rem; }
.edition .details, .printings .details { color: var(--muted); }
.printings { margin-top: 1rem; font-size: 1rem; }
.printings summary { cursor: pointer; color: var(--muted); padding: 0.25rem 0; }
.printings summary:hover { color: var(--ink); }
.printings ul { list-style: none; margin-top: 0.5rem; }
.printings li { padding: 0.25rem 0; }
.links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; margin-top: 0.5rem; font-size: 1.0625rem; }
@media (max-width: 40rem) {
  .links { flex-direction: column; gap: 0; }
  .links a { display: flex; align-items: center; min-height: 2.75rem; }
}
.disclosure { font-size: 0.9375rem; color: var(--muted); margin-top: 2rem; }

/* Alkukielellä: a small fixed element, quieter than GET IT — a rule above, a smaller heading. */
.original-read { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.work > section.original-read > h2 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.original-read .lede { color: var(--muted); }
.original-read .links { margin-top: 0.75rem; }

/* Elokuvana: the checked adaptations, each with its own short link row. */
.adaptations { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.work > section.adaptations > h2 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.adaptations .lede { color: var(--muted); }
.adaptation-list { list-style: none; margin-top: 1rem; }
.adaptation-list > li { padding: 0.5rem 0; }
.adaptation-list .details { color: var(--muted); }
.adaptation-list .links { margin-top: 0.125rem; font-size: 1rem; }

/* ---------------------------------------------- the work page as bands */

/*
 * The owner's design of 2026-09-26: the work page in full-width bands, paper and the tan band colour
 * in turn, each holding the reading column; the Hanki luettavaksi cards run from the column's left
 * edge to the window's right, like the front page's carousels. On the tan band the muted green falls
 * below AA, so the softer ink stands in for it there, and the rule is drawn a shade darker than the band.
 */
.page-work main { max-width: none; padding: 0; }
.page-work { --inset: max(var(--gutter), calc((100vw - var(--column)) / 2)); }
.work > .band { margin-top: 0; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); }
.work > .band > * { max-width: var(--column); margin-inline: auto; }
.work > .band.tan { background: var(--band); --muted: var(--ink-soft); --rule: var(--rule-on-band); }
.work > .band > h2 { font-size: 1.875rem; letter-spacing: -0.01em; margin-bottom: 1rem; color: var(--ink-strong); }
.work > .band.work-hero { padding-top: clamp(2.5rem, 7vw, 5rem); }
/* The line of facts weighs a little less than the description under it (the owner, 2026-09-28):
   the home page's own voice — italic and the softer ink — one step down in size. */
.work-hero .titlepage .original { font-style: italic; font-size: 1.0625rem; color: var(--ink-soft); padding-bottom: 1.25rem; border-bottom: 3px solid var(--marker); }
.work-hero .titlepage .original .also-titled { font-size: inherit; color: inherit; }
/* The original's title is set in italic; inside an italic line it turns upright, as in print. */
.work-hero .titlepage .original i { font-style: normal; }
/* The description runs the full width of the hero, under the plate too (the owner's markup of 2026-09-26). */
@media (min-width: 62rem) {
  .work-hero .titlepage .plate-figure { grid-row: 1 / span 4; }
  .work-hero .titlepage .synopsis { grid-column: 1 / -1; }
}
/* The hero plate is about twice a front-page card, so its shadow is scaled up to read as the same soft lift. */
.work-hero .plate { box-shadow: 0 2px 4px rgba(16, 63, 53, 0.18), 0 8px 22px rgba(16, 63, 53, 0.22); }

/* Lue lisää: a short list of articles elsewhere, each named by its writer and where it stands. */
/* Lue lisää, in the hero under the description: a smaller heading than the bands' own (the owner, 2026-10-03). */
.work-hero .reading { margin-top: 2rem; }
.work-hero .reading h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0; margin-bottom: 0.5rem; color: var(--ink-strong); }
.reading-list { list-style: none; }
.reading-list > li { padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.reading-list > li:last-child { border-bottom: 1px solid var(--rule); }
.reading-list a { font-size: 1.0625rem; text-decoration: none; box-shadow: inset 0 -3px var(--marker); }
.reading-list a:hover { text-decoration: underline; }
.reading-list .source { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 0.125rem; }

.discover .glance { margin-bottom: 1.5rem; }
.discover .glance .available a { text-decoration: none; box-shadow: inset 0 -1px var(--ink); }
.discover .glance .unknown { color: var(--muted); }
/* The folded legend is the band's last line: a smaller bottom padding keeps it from floating in empty band. */
.work > .band.discover { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.discover .legend { margin-top: 0; font-size: 0.875rem; }
.discover .legend summary { min-height: 2.75rem; display: flex; align-items: center; }
.discover .legend dt { margin-top: 0.75rem; font-weight: 600; }

/* Vertaa näytteitä: the original on the tan band colour, the translations as cards on the light panel, one in view at a time. */
.samples .passage-nav { margin-top: 0; }
/* With the tabs, the chosen tab already names the passage; its heading would say it twice (the owner, 2026-09-26). It stays for a single passage and without script. */
.samples.tabbed .passage > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.samples .quote blockquote p { font-size: 1.125rem; font-style: normal; }
.samples .quote blockquote em { font-style: italic; }
.samples .quote.original { background: var(--band); --muted: var(--ink-soft); padding: 1.25rem 1.5rem; border: 0; margin-top: 1.5rem; }
/* In the original's place, when the desk cannot find it on its own: a request for it (work.mjs asksForOriginal). */
.samples .original-wanted { background: var(--band); padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
/* The samples row and the Hanki luettavaksi row are one pair, turned together (samples.js): both run from
   window edge to window edge, the card being read lined up with the text column and its neighbours showing
   beside it (the owner, 2026-10-16 — the samples were cut at the column while the shops ran past it).
   --bleed is the distance from the column to the window's edge. It is measured on the band as a container,
   not with 100vw, which counts a desktop scrollbar and would push the page sideways. */
.work > .band.samples, .work > .band.get { container-type: inline-size; }
.page-work { --bleed: calc(var(--gutter) + (100cqw - min(var(--column), 100cqw)) / 2); }
/* A card or slide is the column's width; on a narrow screen it stops 3rem short so the next one's edge shows
   — without that hint nobody knows the row scrolls (the owner, 2026-09-28). The same in both rows. */
.page-work { --slide: min(var(--column), 100cqw - 3rem); --slide-gap: 1.5rem; }
.renderings { position: relative; list-style: none; display: flex; gap: var(--slide-gap); margin: 1.25rem calc(-1 * var(--bleed)) 0; padding-inline: var(--bleed) calc(var(--bleed) + 3rem); scroll-padding-inline: var(--bleed); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.renderings::-webkit-scrollbar { display: none; }
.renderings > .rendering { box-sizing: border-box; flex: 0 0 var(--slide); scroll-snap-align: start; background: var(--panel); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; }
.renderings .quote { margin: 0; }
/* Whose words these are comes first and is said out loud; the printing and the page follow it quietly
   (the owner, 2026-09-28 — under the text, in small print, the translator was easy to miss). */
/* Not a flex row: a flex item that wraps takes the full width, and the translator's marker ran past the
   name. Inline, the marker follows the words line by line; the printing follows on the same line when it fits. */
.samples .quote.sample figcaption { margin: 0 0 0.75rem; color: var(--ink); }
.samples .quote.sample figcaption .who { font-size: 1.0625rem; font-weight: 600; box-shadow: inset 0 -3px var(--marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; margin-right: 0.625rem; }
.samples .quote.sample figcaption .where { display: inline-block; font-size: 0.875rem; color: var(--muted); }
/* The card's neighbours: the one before on the left, the one after on the right, each named. */
.rendering-nav { margin-top: auto; padding-top: 1.5rem; font-size: 0.9375rem; display: flex; justify-content: space-between; gap: 1rem; }
.rendering-nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; }
.rendering-nav a:hover { text-decoration: underline; }
.rendering-nav a.on { margin-left: auto; text-align: right; }
/* The draft's small filled triangles, drawn: the site's typeface has neither ◂ nor ▸. */
.rendering-nav a.on::after { content: ""; border-left: 0.5em solid currentColor; border-top: 0.32em solid transparent; border-bottom: 0.32em solid transparent; }
.rendering-nav a.back::before { content: ""; border-right: 0.5em solid currentColor; border-top: 0.32em solid transparent; border-bottom: 0.32em solid transparent; }
.samples .sample-missing { display: grid; grid-template-columns: max-content 1fr; gap: 0 1rem; padding-inline: 1.5rem; }
.samples .sample-missing ul { margin: 0; }
.samples .sample-missing li:first-child { margin-top: 0; }
@media (max-width: 40rem) { .samples .sample-missing { grid-template-columns: 1fr; padding-inline: 0; } }

/* Hanki luettavaksi: a card per translation, the rows a shade deeper than the band, each channel by its logo. */
.get .lede { color: var(--ink-soft); }
/* carousel.js wraps the row in .track-wrap for its mouse edges: the full-bleed margins then go on the wrapper. */
.work > .band > .get-track, .work > .band > .track-wrap { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
.work > .band .get-track { margin-top: 1.5rem; gap: var(--slide-gap); padding-inline: var(--bleed) calc(var(--bleed) + 3rem); scroll-padding-inline: var(--bleed); }
.track-wrap > .get-track { max-width: none; margin-inline: 0; }
.get-track > li { width: var(--slide); }
/* While the other row leads, this one is moved to match it frame by frame; snapping would fight that. */
.renderings.driven, .get-track.driven { scroll-snap-type: none; }
.get-track .get-translation { margin: 0; padding: 0; border: 0; }
.get-head { font-size: 1.3125rem; font-weight: 500; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.get-translation .published-as { margin-top: 0.75rem; font-size: 0.9375rem; }
.get-translation .printings { margin-top: 0.5rem; font-size: 0.9375rem; }
.get-rows { width: 100%; border-collapse: collapse; margin-top: 0.75rem; background: var(--band-deep); }
.get-rows th { text-align: left; font-weight: 400; font-size: 0.9375rem; padding: 0.5rem 1rem; width: 12rem; vertical-align: middle; }
.get-rows td { padding: 0.25rem 1rem 0.25rem 0; }
.get-rows tr + tr > * { border-top: 1px solid var(--marker); }
.logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; }
.logos a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
/* One neutral dark tone for every brand, so the row reads as a list, not an advertisement; on hover the logo comes up to full ink. */
.logos .logo { display: block; height: 1.375rem; width: auto; max-width: 9rem; filter: grayscale(1) brightness(0.35) contrast(1.2); }
.logos a:hover .logo, .logos a:focus-visible .logo { filter: grayscale(1) brightness(0); }
/* Two logos are drawn in two lines or with a large mark, so they need more height to read at the same size as the rest. */
.logos .logo[data-channel="suomalainen"] { height: 2rem; }
/* A channel without a logo is set as a plain text logo in the site's sans, dark like the others. */
.logos .wordmark { font-family: "Jost", "Helvetica Neue", sans-serif; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.01em; color: #333; }
.logos a:hover .wordmark { text-decoration: underline; }
@media (max-width: 40rem) {
  .get-rows, .get-rows tbody, .get-rows tr, .get-rows th, .get-rows td { display: block; width: auto; }
  .get-rows th { padding: 0.75rem 1rem 0; }
  .get-rows td { padding: 0 1rem 0.5rem; }
  /* Stacked, the label and its logos are one row: only the label carries the line between rows. */
  .get-rows tr + tr > td { border-top: 0; }
}

.closing .thanks { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.closing .report { font-size: 1.0625rem; }
.closing .legal { margin-top: 1rem; }

/* -------------------------------------------------------------- home */

/*
 * The home page (the owner's design, 2026-09-24): full-width bands, each holding the reading column; the
 * carousels run from the column's left edge to the window's right. Plates carry a soft shadow here — on
 * the home page only, the owner's choice — and the white edge at night like everywhere.
 */
.page-home main { max-width: none; padding: 0; }
/* The column rules space a page's sections with a top margin; the home page's bands are flush instead. */
.page-home .hero, .page-home .all, .page-home .band { margin-top: 0; }
.page-home .band > h2 { margin-bottom: 0; }
.page-home .hero, .page-home .all, .page-home .band > h2, .page-home .pager {
  max-width: var(--column); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box;
}
/* Where the column starts, for a carousel that begins there and runs off to the right. */
.page-home { --inset: max(var(--gutter), calc((100vw - var(--column)) / 2)); }

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero h1 { font-size: clamp(2.5rem, 4vw + 1.25rem, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.hero .subtitle { font-size: 1.25rem; margin-top: 0.75rem; padding-bottom: 0.375rem; border-bottom: 3px solid var(--marker); }
.hero .intro { font-style: italic; color: var(--ink-soft); margin-top: 1.25rem; text-wrap: pretty; }
.hero .intro + .intro { margin-top: 1rem; }

/* The writings' strip under the hero (the owner, 2026-09-24): the newest three as headlines only.
   Quieter than the carousels on purpose — a rule, a label, three lines — so it reads as a different
   kind of thing from the work cards below it and takes almost no height. */
.latest { padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--rule); }
.page-home .latest { max-width: var(--column); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.latest > h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.latest ul { list-style: none; margin-top: 0.625rem; }
.latest li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.25rem 0; }
.latest time { flex: 0 0 3.25rem; font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.latest li a { font-size: 1.0625rem; text-decoration: none; box-shadow: inset 0 -3px var(--marker); }
.latest li a:hover { text-decoration: underline; }
.latest .all-writings { margin-top: 0.75rem; font-size: 0.9375rem; }

/* Tulossa pian: under the Tiesitkö? band, in the home page's own section voice (the owner, 2026-10-12) — the
   heading as the bands' headings, the titles marked like Ajankohtaisia teoksia's but plain text (a draft has
   no page to link to), and the note in the hero's italic. */
.coming { max-width: var(--column); margin-inline: auto; padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter); box-sizing: content-box; }
.coming > h2 { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-strong); }
.coming ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.25rem; padding: 0; }
.coming li { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.coming li span { box-shadow: inset 0 -3px var(--marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.coming p { margin-top: 1.5rem; font-style: italic; color: var(--ink-soft); max-width: 36rem; text-wrap: pretty; }

/* The writings: the list and one piece. */
.writings > .intro { margin-top: 0.875rem; color: var(--ink-soft); text-wrap: pretty; }
.writings > .feed-link { margin-top: 0.875rem; font-size: 0.9375rem; }
.writing-list { list-style: none; margin-top: 2rem; }
.writing-list > li { padding-block: 1.25rem; border-top: 1px solid var(--rule); }
.writing-list .when { font-size: 0.9375rem; color: var(--muted); }
.writing-list h2 { font-size: 1.5rem; font-weight: 500; margin-top: 0.125rem; }
.writing-list h2 a { text-decoration: none; box-shadow: inset 0 -3px var(--marker); }
.writing-list h2 a:hover { text-decoration: underline; }
.writing-list .lead { margin-top: 0.375rem; color: var(--ink-soft); text-wrap: pretty; }
.writing .back { font-size: 0.9375rem; margin-bottom: 1.5rem; }
.writing .byline { font-size: 0.9375rem; color: var(--muted); margin-top: 0.5rem; }
.writing .lead { font-size: 1.1875rem; font-style: italic; color: var(--ink-soft); margin-top: 1.25rem; margin-bottom: 1.75rem; text-wrap: pretty; }
.writing .about-work { float: right; width: 10rem; margin: 0.5rem 0 1rem 1.75rem; font-size: 0.9375rem; }
/* The figure's own UA margin (1em 40px) would eat half of a 10rem column. */
.writing .about-work .plate-figure { margin: 0; }
.writing .about-work p { margin-top: 0.5rem; }
.writing .post-sources { margin-top: 2.5rem; font-size: 0.9375rem; }
.writing .post-sources ul { margin-top: 0.5rem; padding-left: 1.25rem; }
@media (max-width: 34rem) {
  .writing .about-work { float: none; width: 12rem; margin: 1.5rem 0; }
}

.band { padding-block: 2.25rem 1.5rem; }
.band > h2 { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-strong); }
/* The tan band is the darkest surface in the palette, so muted text needs a darker green on it:
   #245d4e on #cdbf9c is 4.19:1, below AA. Redefined here, the token carries to every descendant
   (the home page's Ajankohtaista, the same list in the back office). */
.hot { background: var(--band); --muted: var(--ink-soft); }
.did { background: var(--panel); }
.track {
  list-style: none; display: flex; gap: 1.75rem; margin-top: 1.25rem;
  padding: 0.5rem var(--gutter) 0.75rem var(--inset); scroll-padding-left: var(--inset);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/* A slide is a positioning context: a visually hidden label inside one scrolled out of view would otherwise sit on the page and widen it. */
.track > li { scroll-snap-align: start; flex: none; position: relative; }
.track:focus-visible { outline-offset: -3px; }
.page-home .plate-figure { margin: 0; }
/* A plate that links to its work (plateFigure's href): the whole plate is the target, without a link's underline. */
.plate-link { display: block; color: inherit; text-decoration: none; }
.page-home .band .plate { box-shadow: 0 2px 6px rgba(16, 63, 53, 0.25); }

.card { width: 9.5rem; }
/* The title's marker follows the text line by line: as an inline-block, a title that wrapped ("Ylpeys ja
   ennakkoluulo") took the card's whole width and drew the line past its last word (2026-10-07). */
.card > figure { margin-bottom: 0.75rem; }
.card .t { display: inline; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; text-decoration: none; box-shadow: inset 0 -3px var(--marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.card .t:hover { text-decoration: underline; }
/* On the tan band the muted green falls to 4.2:1; the softer ink holds 5.1:1. */
.card .a { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.25rem; }
.card .r { font-size: 0.9375rem; font-style: italic; color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.4; }

.pager { display: flex; align-items: center; gap: 1.5rem; margin-top: 0.75rem; font-size: 0.9375rem; }
.pager button {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0; min-height: 2.75rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.pager button:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; opacity: 0.6; }
.pager .pos { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.all { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.all-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; }
.all-head h2 { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.01em; margin-right: auto; }
/* The heading row and the rows share one grid (the owner, 2026-09-27), so each sort button stands
   over the column it sorts and a column is as wide as the widest of the two. */
.works-table { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) max-content max-content; column-gap: 1.5rem; margin-top: 1rem; }
.works-table.with-samples { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) max-content max-content max-content; }
.sort { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding-bottom: 0.5rem; }
.sort button {
  font: inherit; font-size: 1.0625rem; color: var(--muted); background: none; border: 0; padding: 0;
  min-height: 2.75rem; cursor: pointer; box-shadow: inset 0 -1px var(--rule);
}
.sort button { text-align: left; }
/* The value columns are right-aligned, so their headings are too. */
.sort button[data-sort="count"], .sort button[data-sort="samples"] { text-align: right; }
.sort button:hover { color: var(--ink); }
.sort button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--marker); }

/* Title, author, year, count: one grid shared by every row through a subgrid, so the columns line up. */
.works { list-style: none; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.works li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.works li:last-child { border-bottom: 1px solid var(--rule); }
/* Under the sort buttons, whose own underlines already close the heading row, the first row needs no line of its
   own (the owner, 2026-10-03: two lines there looked off). A phone keeps it: there the buttons wrap. */
.sort:not([hidden]) + .works li:first-child { border-top: 0; }
.works li a { font-size: 1.1875rem; text-decoration: none; }
/* The whole row is the work's link: readers tap the count ("neljä suomennosta") expecting the
   translations (test feedback, 2026-10-11). One link per row still — the title's — stretched
   over the row, so a screen reader hears each work once, as before. */
.works li { position: relative; }
.works li a::after { content: ""; position: absolute; inset: 0; }
.works li:hover a { text-decoration: underline; }
.works li a:focus-visible { outline: none; }
.works li a:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 0; border-radius: 2px; }
.works .author, .works .year, .works .n { color: var(--muted); font-size: 1rem; }
.works .year { font-variant-numeric: tabular-nums; }
.works .n { white-space: nowrap; text-align: right; }
/* The works page (2026-09-24): the whole list, a little wider than the reading column so a fifth column fits. */
.page-works main { max-width: 60rem; }
/* The works page opens like the home page's hero (the owner, 2026-10-12): the same space above, the same
   heading and the intro's italic. The column's section margin stacked on main's padding left a gap on a phone. */
.page-works main { padding-top: clamp(2.5rem, 7vw, 5.5rem); }
.works-page { padding-block: 0; margin-top: 0; }
.works-page h1 { font-size: clamp(2.5rem, 4vw + 1.25rem, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; margin-right: auto; }
.works-page .lede { font-style: italic; color: var(--ink-soft); margin-top: 1.25rem; max-width: var(--column); text-wrap: pretty; }

.works .samples { color: var(--muted); font-size: 1rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.none { color: var(--muted); margin-top: 1rem; }
.more {
  font: inherit; font-size: 1.0625rem; color: var(--ink); background: none; border: 0; padding: 0;
  min-height: 2.75rem; margin-top: 0.5rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}

/* Tiesitkö?: one story at a time — the plate, then the text and the link beside it on a wide screen. */
.did .track { gap: var(--gutter); padding-right: var(--inset); }
.story { width: min(var(--column), calc(100vw - 2 * var(--gutter))); display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.story .text p { color: var(--ink-strong); text-wrap: pretty; }
.story .text p + p { margin-top: 1rem; }
.story .cta { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1rem; font-size: 1.25rem; }
/* On a wide screen the heading heads each story's text column, level with the plate's top (the owner's
   draft): the section's own h2 stays for assistive technology, and each slide repeats it, hidden from it. */
.story .did-heading { display: none; }
@media (min-width: 40.01rem) {
  .page-home .did > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story .did-heading { display: block; font-size: 1.875rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-strong); margin-bottom: 1.25rem; }
  .did .track { margin-top: 0; }
}
/* Once carousel.js has shown the buttons, the row's own scrollbar is only noise; without JS it stays, the way through. */
.track.has-pager { scrollbar-width: none; }
.track.has-pager::-webkit-scrollbar { display: none; }
/* The row's edges as click zones for a mouse (carousel.js): the margin beside the column, at least 2.5rem
   and at most 5rem, so a zone does not take a whole card on a wide screen. At rest only an arrow; on hover a
   fade of the band's own colour behind it. Only where a fine pointer hovers; a phone swipes, the keyboard
   has the buttons. */
.track-wrap { position: relative; }
.hot { --edge-bg: var(--band); }
.did { --edge-bg: var(--panel); }
.work > .band.tan { --edge-bg: var(--band); }
.work > .band.samples { --edge-bg: var(--paper); }
/* samples.js wraps a passage's row of cards for the same mouse edges (the owner, 2026-10-18): the row's
   full-bleed margins move to the wrapper, so an edge covers the margin beside the column as in the shops' row. */
.passage > .track-wrap { margin: 1.25rem calc(-1 * var(--bleed)) 0; }
.track-wrap > .renderings { margin: 0; }
.edge { display: none; }
@media (hover: hover) and (pointer: fine) {
  .edge {
    position: absolute; top: 0; bottom: 0; width: clamp(2.5rem, var(--inset, var(--gutter)), 5rem); z-index: 1; cursor: pointer;
    display: flex; align-items: center; font-size: 2rem; line-height: 1; color: var(--ink);
  }
  .edge[hidden] { display: none; }
  .edge.left { left: 0; justify-content: flex-start; padding-left: 0.5rem; }
  .edge.right { right: 0; justify-content: flex-end; padding-right: 0.5rem; }
  .edge::before { opacity: 0.5; transition: opacity 0.15s; }
  .edge.left::before { content: "‹"; }
  .edge.right::before { content: "›"; }
  .edge:hover::before { opacity: 1; }
  .edge.left:hover { background: linear-gradient(to right, var(--edge-bg) 40%, transparent); }
  .edge.right:hover { background: linear-gradient(to left, var(--edge-bg) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .edge::before { transition: none; } }

@media (max-width: 40rem) {
  .hero h1, .works-page h1 { font-size: 2.5rem; }
  .works-page .lede { font-size: 1rem; }
  .hero .subtitle { font-size: 1.0625rem; }
  .hero .intro { font-size: 1rem; }
  .band > h2, .all-head h2, .coming > h2 { font-size: 1.625rem; }
  .coming ul { gap: 0.625rem 1.25rem; }
  .card { width: 9.375rem; }
  .track { gap: 1rem; }
  .pager { justify-content: space-between; }
  .sort button { font-size: 1rem; }
  /* A row becomes the title, and under it author · year · count. */
  /* On a phone the rows stack, so there are no columns to head: the buttons go back to a wrapping row. */
  .works-table, .works-table.with-samples { display: block; }
  .sort { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-bottom: 0; }
  .sort button, .sort button[data-sort="count"], .sort button[data-sort="samples"] { text-align: left; }
  .works { display: block; }
  .works li { display: block; }
  .sort:not([hidden]) + .works li:first-child { border-top: 1px solid var(--rule); }
  .works li a { display: block; font-size: 1.125rem; }
  .works .author, .works .year, .works .n { font-size: 0.9375rem; }
  .works .year::before, .works .n::before { content: "· "; }
  .works .year:empty, .works .year:empty + .visually-hidden + .n::before { display: none; }
  /* The samples take a line of their own under the rest. */
  .works .samples { display: block; text-align: left; font-size: 0.9375rem; margin-top: 0.125rem; }
  .story { grid-template-columns: 1fr; gap: 1.375rem; }
  .story .plate-figure { width: 14.375rem; }
}

/* -------------------------------------------------------- prose pages */

.prose h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3rem); letter-spacing: -0.02em; }
.prose > section { margin-top: 3rem; }
.prose > section:first-of-type { margin-top: 1.5rem; }
.prose h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
/* A heading's word and the compound its hyphen opens ("suomeksi -palvelusta", page.mjs glue): one unit on a
   wide screen; on a narrow one free to wrap before the hyphen, never after it. */
.compound { white-space: nowrap; }
@media (max-width: 30rem) { .compound { white-space: normal; } }
.prose p + p { margin-top: 1rem; }
.prose p { text-wrap: pretty; }
/* Every small fold (the meaning of the property words, the printings, a masked word's note, and in the back
   office the marks, a sample's edit, a card's Hylkää…): a small chevron that points right while closed and
   down when open, the large folds' marker in miniature (the owner, 2026-10-18 — a summary styled as flex had
   lost the browser's own triangle, and the back office drew ▸ and ▾ as text). The menus' own ▾ stays. */
details:not(.fold):not(.more-nav) > summary { list-style: none; cursor: pointer; }
details:not(.fold):not(.more-nav) > summary::-webkit-details-marker { display: none; }
details:not(.fold):not(.more-nav) > summary::before {
  content: ""; display: inline-block; flex: none; width: 0.4em; height: 0.4em; margin: 0 0.6em 0.12em 0.1em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 150ms ease;
}
details[open]:not(.fold):not(.more-nav) > summary::before { transform: rotate(45deg); margin-bottom: 0.3em; }
@media (prefers-reduced-motion: reduce) { details:not(.fold):not(.more-nav) > summary::before { transition: none; } }

/* A folded section: the question is the whole row, the marker turns. The <details> does the work;
   nothing here depends on JavaScript. */
.prose.folded > section:first-of-type { margin-top: 1rem; }
.fold { border-bottom: 1px solid var(--rule); }
.prose.folded > .fold:first-of-type { border-top: 1px solid var(--rule); margin-top: 2rem; }
.fold > summary { display: flex; gap: 0.875rem; align-items: baseline; cursor: pointer; padding: 1.125rem 0; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
/* The turning marker, drawn from the palette's gold rather than the browser's triangle. */
.fold > summary::before {
  content: ""; flex: 0 0 0.5rem; width: 0.5rem; height: 0.5rem; margin-top: 0.35em;
  border-right: 2px solid var(--marker); border-bottom: 2px solid var(--marker);
  transform: rotate(-45deg); transition: transform 150ms ease;
}
.fold[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }
.fold > summary h2 { font-size: 1.25rem; font-weight: 500; margin: 0; text-wrap: pretty; }
.fold > summary:hover h2 { text-decoration: underline; }
.fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fold-body { padding: 0 0 1.5rem 1.375rem; }
.fold-body > :first-child { margin-top: 0; }

.registry { margin-top: 1rem; }
/* A prose page's last line: when the site, or the page, last changed (page.mjs updatedLine). */
.prose .updated { margin-top: 3rem; font-size: 0.875rem; color: var(--muted); }
.registry dt { font-weight: 500; margin-top: 1rem; }
.registry dd { margin: 0.125rem 0 0; color: var(--muted); }

/* -------------------------------------------------- contribution form */

.contribute-line { margin-top: 2.5rem; color: var(--muted); }
.contribute .author { color: var(--muted); }
.contribute-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.375rem; }
/* The form's fields are paragraphs, and the prose rule's 1rem between paragraphs came on top of the gap,
   leaving too much air between Teos, Viesti and Sähköposti (the owner, 2026-10-18): the gap alone spaces them. */
.prose .contribute-form p + p { margin-top: 0; }
.contribute-form .field { display: flex; flex-direction: column; gap: 0.375rem; }
/* The sample's fields as one group: the passage, what is sought, the text and its citation. */
.contribute-form .sample-fields { display: flex; flex-direction: column; gap: 1.375rem; margin: 0; padding: 0.5rem 0 1.5rem; border: 0; border-bottom: 1px solid var(--rule); }
.contribute-form legend { font-weight: 500; font-size: 1.25rem; padding: 0; margin-bottom: 0.25rem; }
.contribute-form .sought { margin: -0.5rem 0 0; }
.contribute-form .sought-label { font-size: 1rem; color: var(--muted); }
.contribute-form .sought .quote { margin-top: 0.5rem; }
.contribute-form .sought .quote blockquote p { font-size: 1.125rem; }
.contribute-form label { font-weight: 500; }
.contribute-form .hint { font-size: 0.9375rem; color: var(--muted); }
.contribute-form input[type="text"], .contribute-form input[type="email"], .contribute-form select, .contribute-form textarea {
  font: inherit; font-size: 1.0625rem; padding: 0.625rem 0.875rem;
  border: 1px solid var(--ink); border-radius: 3px;
  background: var(--field); color: var(--ink); width: 100%; box-sizing: border-box;
}
.contribute-form input.short { max-width: 8rem; }
.contribute-form textarea { resize: vertical; min-height: 5.5rem; }
/* The general form's "Mitä asia koskee?": one radio per kind, each on its own line. */
.contribute-form .kind { margin: 0; padding: 0; border: 0; gap: 0.125rem; }
.contribute-form .kind legend { font-size: 1.0625rem; }
.contribute-form .choice { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; }
.contribute-form .choice input { width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; flex: none; accent-color: var(--ink); }
.contribute-form .choice label { font-weight: 400; }
/* The permission belongs to the name above it: closer to it than the form's other fields are to each other. */
.prose .contribute-form p.credit { margin-top: -0.75rem; }
/* Välimerkit under the sample (contribute.mjs marksHelp, 2026-10-20): folded, small; each mark a button of a
   comfortable target size that types it at the cursor. */
/* The marks easily typed for another, said under the sample as it is written (lib/marks.mjs CONFUSABLES). */
.contribute-form .confusables { margin: -0.75rem 0 1rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--marker); background: var(--field); font-size: 0.9375rem; }
.contribute-form .confusables ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.contribute-form .confusables .fix { margin: 0.125rem 0 0.125rem 0.25rem; min-height: 2.75rem; padding: 0 0.625rem; font-size: 0.9375rem; }
.contribute-form .marks { margin: -0.75rem 0 0; font-size: 0.9375rem; }
.contribute-form .marks > summary { width: max-content; color: var(--muted); }
.contribute-form .marks .hint { margin: 0.5rem 0; }
.contribute-form .marks-table { border-collapse: collapse; }
.contribute-form .marks-table th, .contribute-form .marks-table td { padding: 0.2rem 0.75rem 0.2rem 0; text-align: left; vertical-align: middle; font-weight: 400; }
.contribute-form .marks-table th { color: var(--muted); }
.contribute-form .marks-table [hidden] { display: none; }
.contribute-form .marks button.mark { font-size: 1.25rem; min-width: 2.75rem; min-height: 2.75rem; line-height: 1; padding: 0 0.5rem; margin: 0; }
.contribute-form .marks kbd { font-family: inherit; white-space: nowrap; }
/* A row of several marks (the superscript figures) under its name, wrapping on a narrow screen. */
.contribute-form .marks caption { text-align: left; font-weight: 600; padding: 0.5rem 0 0.25rem; }
.contribute-form .marks .series { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
/* The general form's pointer to a work's own sample form: an always-present live region, taking no room
   (the column's gap cancelled) until a work that asks for samples is chosen. */
.contribute-form .sample-form { margin-top: -1.375rem; }
.prose .contribute-form .sample-form p { margin: 0; padding-top: 0.75rem; }
.contribute-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contribute-form button {
  font: inherit; font-size: 1.0625rem; min-height: 2.75rem; padding: 0.5rem 1.5rem;
  background: var(--marker); color: var(--on-marker);
  border: 1px solid var(--on-marker); border-radius: 3px; cursor: pointer; align-self: flex-start;
}
.contribute-form button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reasons { margin: 1rem 0 0 1.25rem; }
.reasons li { margin-top: 0.375rem; }
.reasons li:target { box-shadow: inset 0 -0.42em var(--marker); }

/* ------------------------------------------------------------ footer */

/* `footer.colophon`, not `.colophon`: the plate's own colophon text shares the class name and must not take the footer's colours.
   The brand and the site's links in three columns (two on a phone); the data line and build date small beneath. */
footer.colophon {
  margin-top: 0; padding: 2.25rem var(--page-inset) 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--muted);
}
footer.colophon .brand { color: var(--ink); }
footer.colophon ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 2rem; margin-top: 1rem; max-width: 60rem; }
footer.colophon li a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ink-soft); text-decoration: none; }
footer.colophon li a:hover { color: var(--ink); text-decoration: underline; }
footer.colophon .social { margin-top: 1rem; }
footer.colophon .social .instagram { gap: 0.6rem; color: var(--ink-soft); text-decoration: none; }
footer.colophon .social .instagram:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 40rem) {
  footer.colophon ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; gap: 0 1rem; }
  footer.colophon li a { font-size: 0.875rem; }
}

/* ------------------------------------------------------- consent (consent.js) */

/* Allow and refuse look the same, side by side: refusing must be as easy as allowing. */
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.consent-actions button {
  font: inherit; font-size: 1rem; min-height: 2.75rem; min-width: 8rem; padding: 0.5rem 1.25rem;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 3px; cursor: pointer;
}
.consent-actions button:hover { background: var(--ink); color: var(--paper); }
.consent-actions button[hidden] { display: none; }
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  background: var(--panel); border-top: 3px solid var(--marker);
  padding: 1rem var(--gutter) 1.25rem; box-shadow: 0 -0.25rem 1rem rgb(16 63 53 / 0.12);
}
.consent-banner[hidden] { display: none; }
.consent-banner p, .consent-banner .consent-actions { max-width: var(--column); margin-inline: auto; }
.consent-banner p { font-size: 0.9375rem; }
.consent-banner .consent-actions { margin-top: 0.75rem; }
.consent-dialog {
  max-width: min(32rem, calc(100vw - 2rem)); padding: 1.5rem 1.5rem 1.25rem;
  background: var(--panel); color: var(--ink); border: 1px solid var(--ink); border-top: 3px solid var(--marker); border-radius: 3px;
}
.consent-dialog::backdrop { background: rgb(16 63 53 / 0.45); }
.consent-dialog h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.consent-dialog p { font-size: 1rem; }
.consent-settings { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--panel); border-left: 3px solid var(--marker); }
.consent-settings[hidden], .consent-noscript[hidden] { display: none; }
.consent-settings .consent-actions { margin-top: 0.75rem; }

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}