/* ==========================================================================
   wosh.productions — shared design system
   --------------------------------------------------------------------------
   Single source of the site's typography, colour, spacing and components.
   Lifted verbatim out of the July 2026 redesign so every page renders the
   same design without copy-pasting it 70 times. The footer already learned
   this lesson the hard way: see the header comment in /footer.css.

   LOAD ORDER — this matters and is easy to get wrong:

       <link rel="stylesheet" href="/site.css">       <- 1. tokens + components
       <link rel="stylesheet" href="/nav.css">        <- 2. nav
       <style> … page-specific rules … </style>       <- 3. page overrides
       <link rel="stylesheet" href="/footer.css">     <- 4. LAST, always

   footer.css stays last because ~12 older pages still carry stale
   `.site-footer` rules in their inline <style>; footer.css only wins over
   them by being later in the cascade. Moving it up silently changes those
   footers. site.css and nav.css go first for the opposite reason: a page's
   own <style> should be able to override them without !important.

   TOKEN NAMES are deliberately short and unusual (--ink, --paper, --wash)
   because the old pages already define --bg-color, --text-color and
   --accent-color with different values. Nothing here collides with those.
   ========================================================================== */

@font-face {
  font-family: 'Google Sans';
  src: url('/Google_Sans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000000;
  --paper: #ffffff;
  --muted: rgba(0, 0, 0, 0.58);
  --hairline: rgba(0, 0, 0, 0.12);
  --wash: #f6f6f4;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 68px;
  --font: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Gutters live on .shell, never on body — body padding is what used to
     inset the footer and force the negative-margin --footer-bleed workaround. */
}

/* Content column. Every section's inner wrapper. */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: 760px;
}

/* Scroll offset for the fixed nav is handled once, by
   html{scroll-padding-top} in nav.css — declaring it here as well would offset
   anchor jumps twice. */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-size: .9rem;
}

.skip-link:focus {
  left: 0;
}

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

.eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: 600;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted);
  max-width: 62ch;
  font-weight: 300;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  padding: .9rem 1.6rem;
  border-radius: 100px;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.4rem;
}

/* ── Bands (vertical rhythm for full-width sections) ───────────────────── */
.band {
  padding: clamp(4rem, 9vw, 8rem) 0;
}

.band--tight {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.band--wash {
  background: var(--wash);
}

.band--ink {
  background: var(--ink);
  color: var(--paper);
}

.band--ink .lede,
.band--ink .eyebrow {
  color: rgba(255, 255, 255, .6);
}

.band--ink .btn {
  border-color: var(--paper);
  color: var(--paper);
}

.band--ink .btn--solid {
  background: var(--paper);
  color: var(--ink);
}

.band--ink .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

.band__head h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  margin: .8rem 0 0;
}

.band__head .lede {
  margin-top: 1.2rem;
}

/* When a .band__head has no .lede, its h2 sat directly on whatever follows:
   .band__head h2 declares no bottom margin, and neither .prose's first child
   nor a bare list has a top margin, so the gap collapsed to 0px under a 54px
   heading. Matches the 1.2rem a .lede would have contributed. */
.band__head+.prose,
.band__head+.note,
.band__head+ul,
.band__head+ol,
.band__head+p {
  margin-top: 1.35rem;
}

/* ── Page header (the h1 block on every inner page) ────────────────────── */
/* The nav is fixed, so every page needs to clear it. Doing that here means no
   page has to remember to. */
.page-head {
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3.5rem);
}

.page-head h1 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  margin: 1rem 0 0;
  max-width: 26ch;
}

.page-head .lede {
  margin-top: 1.4rem;
}

.page-head--center {
  text-align: center;
}

.page-head--center h1,
.page-head--center .lede {
  margin-inline: auto;
}

/* The breadcrumb stays hard left even when the heading is centred: it is
   navigation, not part of the title block, and every article page already had
   it on the left. Centring it made it read as a third line of the heading. */
.page-head--center .crumbs {
  justify-content: flex-start;
}

/* Breadcrumb. Present on every inner page: it gives Google the site's shape
   and gives a visitor arriving from search a way up. */
.crumbs {
  font-size: .84rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: inherit;
  line-height: normal;
}

.crumbs li+li::before {
  content: '/';
  color: var(--hairline);
}

.crumbs a {
  text-decoration: none;
  color: var(--muted);
  transition: color .25s var(--ease);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs [aria-current="page"] {
  color: var(--ink);
}

/* ── Card grid (services, tools, blog index, projects index) ───────────── */
/* One grid primitive instead of .blog-grid + .tools-grid + .projects-grid +
   .service-grid, which were four near-identical copies. */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid--tight {
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

a.card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}

.card__kicker {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 600;
}

.card h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.card p {
  font-size: .94rem;
  color: var(--muted);
  font-weight: 300;
}

.card__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .85rem;
  color: var(--muted);
}

/* ── People ──────────────────────────────────────────────────────────────
   /o-nama/ and /en/about-us/ list the team as linked cards; each person then
   has their own page opening with a larger version of the same portrait, and
   every one of those pages ends by linking to the other three. That is ten
   pages sharing the component, which is well past the point where inlining it
   in each <style> block stops being reasonable. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1040px;
  margin-inline: auto;
}

/* .person-card is always also a .card — it takes the border, radius, padding
   and hover lift from there and only changes the layout: .card is a flex
   column, a person card puts the portrait beside the text. */
.person-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: clamp(1rem, 2.5vw, 1.4rem);
}

.person-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--wash);
  /* The card stretches to the row's height; the portrait must not, or the
     circle turns into an ellipse next to a taller neighbour. */
  align-self: start;
}

/* Flex column so .person-card__more can be pushed to the bottom — otherwise
   the "Read profile" links sit at different heights across a row whenever the
   descriptions differ by a line. */
.person-card__body {
  display: flex;
  flex-direction: column;
}

.person-card__body>*+* {
  margin-top: .4rem;
}

/* The About-us index makes each name an h2 (its section has no other
   heading); the sibling lists on the profile pages sit under an h2 of their
   own, so their names are h3. Both want the .card h3 size. */
.person-card h2,
.person-card h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

/* Written with the parent in the selector so it beats the .4rem stack rule
   above, which it would otherwise only win on source order. */
.person-card__body .person-card__more {
  margin-top: auto;
  padding-top: .9rem;
  align-self: flex-start;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Profile page header. The portrait sits in the right-hand column so the
   name, role, meta and the .lede below all share the breadcrumb's left edge —
   with the photo first, the heading was indented past everything around it.
   Lives inside .page-head, so the h1 and .lede margins come from there; a
   `> * + *` rule here would land on the same specificity and take them over. */
.profile-head {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  /* .crumbs has margin:0 — the gap under it is normally contributed by
     `.page-head h1 { margin: 1rem 0 0 }`, and here the h1 is nested. */
  margin-top: 1rem;
}

/* The portrait is first in the DOM so that it stays above the name when the
   grid collapses to one column on narrow screens. */
.profile-head__photo {
  grid-column: 2;
  grid-row: 1;
}

.profile-head__body {
  grid-column: 1;
  grid-row: 1;
}

.profile-head__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--wash);
}

.profile-head__meta {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: .9rem;
  color: var(--muted);
}

.profile-head__meta a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .person-card {
    grid-template-columns: 64px 1fr;
  }

  .profile-head {
    grid-template-columns: 1fr;
  }

  /* Undo the desktop placement, or the explicit column 2 / row 1 would keep
     the two children stacked on top of each other in a single-column grid. */
  .profile-head__photo,
  .profile-head__body {
    grid-column: 1;
    grid-row: auto;
  }

  .profile-head__photo {
    width: 116px;
  }
}

/* Bordered slab variant — the services/price grid on the homepage. Hairline
   gaps rather than gutters, so the group reads as one object. */
.slabs {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}

.slab {
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-decoration: none;
  transition: background .3s var(--ease);
}

.slab:hover {
  background: var(--wash);
}

.slab h3 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.slab p {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 300;
}

.slab__price {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Showcase (screenshot + measured outcome) ─────────────────────────── */
/* Used by the homepage's selected work and by /projekti/. Shared because a
   screenshot shows taste and the number under it shows the work did
   something; both pages need to make that same argument. */
.work {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.work__item {
  text-decoration: none;
  display: block;
}

.work__shot {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--wash);
  aspect-ratio: 16 / 10;
}

.work__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.work__item:hover .work__shot img {
  transform: scale(1.03);
}

.work__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .9rem;
  font-size: .95rem;
}

.work__label span:last-child {
  color: var(--muted);
  font-size: .85rem;
}

.work__result {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--hairline);
  font-size: .85rem;
  color: var(--muted);
  font-weight: 300;
}

.work__result strong {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Numbered steps ───────────────────────────────────────────────────── */
.steps {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  counter-reset: step;
}

.step {
  counter-increment: step;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}

.step::before {
  content: "0" counter(step);
  display: block;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .8rem;
}

.step h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.step p {
  margin-top: .55rem;
  font-size: .93rem;
  color: var(--muted);
  font-weight: 300;
}

/* ── Stat row ─────────────────────────────────────────────────────────── */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}

.stat strong {
  display: block;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: .88rem;
  color: var(--muted);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 860px;
}

.faq details {
  border-top: 1px solid var(--hairline);
  padding: 1.35rem 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  flex: none;
  transition: transform .3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin-top: .9rem;
  color: var(--muted);
  font-weight: 300;
  max-width: 68ch;
}

.faq details p+p {
  margin-top: .7rem;
}

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.close-cta {
  padding: clamp(4rem, 9vw, 8rem) 0;
  text-align: center;
}

.close-cta h2 {
  font-size: clamp(2rem, 5.4vw, 4rem);
  max-width: 24ch;
  margin-inline: auto;
}

.close-cta .lede {
  margin: 1.3rem auto 0;
  text-align: center;
}

.close-cta .btn-row {
  justify-content: center;
  margin-top: 2.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROSE — article body copy
   Article pages set their measure here rather than padding <body>, which is
   what used to inset the footer. Anything inside .prose gets readable
   long-form defaults; everything outside it keeps the tight display rhythm.
   ══════════════════════════════════════════════════════════════════════════ */
.prose {
  max-width: 72ch;
  font-size: 1.06rem;
  line-height: 1.75;
  font-weight: 300;
}

.prose>*+* {
  margin-top: 1.15em;
}

.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-top: 2.6em;
  letter-spacing: -0.02em;
}

.prose h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  margin-top: 2em;
  letter-spacing: -0.01em;
}

.prose h2+*,
.prose h3+* {
  margin-top: .8em;
}

.prose strong {
  font-weight: 500;
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color .25s var(--ease);
}

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

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li+li {
  margin-top: .5em;
}

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.4em;
  border-left: 2px solid var(--ink);
  font-size: 1.15rem;
  font-weight: 300;
}

.prose figure {
  margin: 2.2em 0;
}

.prose figcaption {
  margin-top: .7em;
  font-size: .85rem;
  color: var(--muted);
}

.prose img {
  border-radius: 12px;
}

/* Callout — the "cta-box" pattern the articles already used, unified. */
.note {
  margin: 2.2em 0;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--wash);
  font-size: .98rem;
  line-height: 1.7;
}

.note>*+* {
  margin-top: .8em;
}

.note strong {
  font-weight: 500;
}

/* ── Data tables ──────────────────────────────────────────────────────── */
/* Wrap every table in .table-scroll. A wide table is the single most common
   cause of horizontal page scroll on phones; this contains it.

   A table is not prose, so it is not held to the prose measure. These articles
   read inside .shell--narrow, which is 616px of a 1440px screen — fine for
   paragraphs, too tight for five columns of dates and hours. Measured before
   this rule existed: 22 tables were scrolling on a 1440px screen with more
   than 600px of empty page beside them, and 98 of 101 were scrolling on a
   390px phone.

   So the wrapper is sized by its content instead: fit-content takes exactly
   the width the table needs, min-width keeps it from going under the column,
   max-width keeps it off the page edge. A narrow table stays aligned with the
   paragraph above it; a wide one grows outward, evenly on both sides, and
   only scrolls once it has run out of page.

   margin-left + translateX is what centres a box wider than its parent —
   `margin-inline: auto` computes to zero as soon as the box overflows, so it
   would grow to the right only. The transform makes a stacking context, which
   is safe here: the nav sits at z-index 90 and the articles' #info-sidebar
   overlay at 1000, so both still paint above a table that grows under them. */
.table-scroll {
  --table-inset: var(--gutter);
  margin: 2em 0;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
  width: fit-content;
  min-width: 100%;
  max-width: min(1120px, calc(100vw - 2 * var(--table-inset)));
  margin-left: 50%;
  transform: translateX(-50%);
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}

.table-scroll th,
.table-scroll td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.table-scroll thead th {
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--wash);
}

.table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll td.num,
.table-scroll th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-scroll tbody tr:hover {
  background: var(--wash);
}

/* Phones. Reclaiming the gutter is worth 40px of a 390px screen, but on its
   own it is not enough — what actually forces most of these tables past the
   edge is the nowrap above, which is there so a date or a heading never breaks
   mid-phrase. On a phone that trade is the wrong way round: two lines in a
   cell beat a scrollbar. It stays on td.num, where a break inside "12,50 €"
   would be worse than a narrow column, and comes off everything else. */
@media (max-width: 720px) {
  .table-scroll {
    --table-inset: .6rem;
  }

  .table-scroll table {
    font-size: .88rem;
  }

  .table-scroll th,
  .table-scroll td {
    padding: .5rem .55rem;
    white-space: normal;
  }

  .table-scroll td.num {
    white-space: nowrap;
  }

  /* What sets the width of these tables is not the data — it is the headings
     over it. "Obračunskih dana" at .78rem with .1em of tracking is 125px of
     column that the two-digit number underneath never needed. Both are
     tightened rather than dropped, so it still reads as a tracked uppercase
     label; between them they are worth roughly 30px a column, which is the
     difference between a five-column table fitting a phone and not. */
  .table-scroll thead th {
    font-size: .72rem;
    letter-spacing: .03em;
  }
}

/* ── Article meta line ────────────────────────────────────────────────── */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.6rem;
  font-size: .85rem;
  color: var(--muted);
}

/* ── Print: articles are printed (the fond-sati tables especially) ─────── */
@media print {

  .site-nav,
  .site-footer,
  .skip-link,
  .crumbs,
  .btn-row,
  .close-cta {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .page-head {
    padding-top: 0;
  }

  /* Print has no viewport to break out of, and 100vw means nothing on paper:
     put the table back in the text column. */
  .table-scroll {
    overflow: visible;
    border-color: #999;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    transform: none;
  }

  .prose {
    max-width: none;
    font-size: 11pt;
  }

  a[href^="/"]::after,
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}