/* ==========================================================================
   rahataidot.fi — design system & components
   Yksi tiedosto koko sivustolle. Ks. CLAUDE.md "Design System" -osio ennen
   kuin lisäät uusia värejä/fontteja/komponentteja.
   ========================================================================== */

/* -------------------------------------------------------------------------
   0. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg: #F8F4EE;
  --color-surface: #FFFFFF;
  --color-ink: #2B2118;
  --color-ink-muted: #6B5D4F;
  /* --color-primary on vain suurille, ei-tekstisille pinnoille (logo, ikonit,
     graafiset korostukset) – kontrastisuhde vaaleaa taustaa vasten on n. 3,8:1,
     joka ei riitä WCAG AA:n 4,5:1-vaatimukseen leipätekstille. Linkit, napit ja
     muu pienikokoinen käyttöliittymäteksti käyttävät AINA --color-primary-dark
     (kontrasti ≥5,4:1 kermaa/valkoista vasten). */
  --color-primary: #C2622D;
  --color-primary-dark: #9C4E22;
  --color-primary-darker: #7A3D1B;
  --color-primary-tint: #F1DECE;
  --color-accent: #4E7A5E;
  --color-accent-dark: #1F2E24;
  --color-accent-tint: #E1EAE2;
  --color-line: rgba(43, 33, 24, 0.12);
  --color-focus: #1C63D6;

  /* Shadows (aina lämmin sävy) */
  --shadow-warm-sm: 0 4px 10px rgba(92, 46, 18, 0.08);
  --shadow-warm: 0 12px 24px rgba(92, 46, 18, 0.10);
  --shadow-warm-lg: 0 24px 48px rgba(92, 46, 18, 0.14);

  /* Typography — sanomalehtimäinen pari, ei "iso serif-otsikko + pyöreä
     geometrinen sans" -kaava (Fraunces+DM Sans on itsessään yleistynyt
     AI-template-oletus). --font-serif kantaa KAIKEN lukusisällön (otsikot
     JA leipäteksti, kuten oikeassa sanomalehdessä) — --font-ui on VARATTU
     navigaatiolle, napeille, badgeille ja lomakekentille, ei koskaan proosalle. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion: kaksi tarkoituksellista aika-arvoa, ei muuta. Käytetään VAIN
     aidosti interaktiivisissa elementeissä (linkit, napit) tilamuutoksen
     selittämiseen — ei automaattisia fade-in/slide-up-animaatioita millekään
     elementille. Kunnioittaa aina prefers-reduced-motion (ks. kohta 1). */
  --transition-fast: 150ms ease-out;
  --transition-base: 220ms ease-out;
}

/* -------------------------------------------------------------------------
   1. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  hyphens: auto;
}

/* UI-kromi (navigaatio, napit, badget, lomakkeet, metatiedot) on AINA
   --font-ui — ei koskaan lukusisällön fonttia. Ks. anti-ai-slop.md. */
.primary-nav, .topic-nav, .header-actions, .breadcrumbs,
.article-meta, .article-card__meta, .related-topics h3, .related-topics span,
.site-footer__bottom, .nav-toggle, .newsletter-form__fineprint,
.newsletter-form__status, .footer-links, .search-form label,
.sidebar-highlight dt, .sidebar-highlight dd {
  font-family: var(--font-ui);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* -------------------------------------------------------------------------
   2. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-10); }

.layout-split {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-split { grid-template-columns: 2fr 1fr; align-items: start; }
}

.article-single {
  max-width: 46rem;
  margin-inline: auto;
}
.article-single .article-body { max-width: none; }

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

/* -------------------------------------------------------------------------
   3. Buttons & badges
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn--primary {
  background: var(--color-primary-dark);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-darker); text-decoration: none; }
.btn--ghost {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: #fff; text-decoration: none; }
.btn--on-dark {
  background: var(--color-primary-dark);
  color: #fff;
}
.btn--on-dark:hover { background: #fff; color: var(--color-accent-dark); text-decoration: none; }
.btn__icon { width: 1em; height: 1em; flex-shrink: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: var(--color-accent-tint);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.badge--primary { color: #fff; background: var(--color-primary-dark); }

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.site-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-ink);
}
.logo:hover { text-decoration: none; }
.logo__mark { width: 32px; height: 32px; flex-shrink: 0; }

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.primary-nav__list {
  display: flex;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.primary-nav__list a { color: var(--color-ink); }
.primary-nav__list a:hover { color: var(--color-primary-dark); }

/* .social-links elää nykyään vain footerissa (header-actions poistettu) */
.social-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.social-links a {
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.social-links a:hover { color: var(--color-primary-dark); }
.social-links svg { width: 18px; height: 18px; flex-shrink: 0; }

.site-header__secondary {
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.topic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.topic-nav a { color: var(--color-ink-muted); }
.topic-nav a:hover, .topic-nav a[aria-current="page"] { color: var(--color-accent-dark); }

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  background: var(--color-bg);
}
.search-form input {
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  padding: var(--space-2);
  min-width: 12ch;
}
.search-form input:focus { outline: none; }
.search-form button {
  border: 0;
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}
.search-form svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
}

/* Mobiilissa header-actions ja aihenavi/haku piilotetaan ja avautuvat samasta
   "Valikko"-napista kuin päänavigaatio, jotta suljettu header pysyy matalana
   yhdellä rivillä (logo + nappi). JS togglaa .is-open-luokan .site-headeriin. */
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; align-items: center; }

  .primary-nav__list,
  .header-actions,
  .site-header__secondary {
    display: none;
  }

  .site-header.is-open .primary-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-basis: 100%;
    padding-top: var(--space-4);
  }

  .site-header.is-open .header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    flex-basis: 100%;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-line);
  }

  .site-header.is-open .header-actions .social-links {
    gap: var(--space-5);
  }

  .site-header.is-open .site-header__secondary {
    display: block;
  }

  .site-header.is-open .topic-nav {
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-header.is-open .search-form {
    margin-top: var(--space-4);
    width: 100%;
  }
  .site-header.is-open .search-form input {
    flex: 1;
  }
}

/* -------------------------------------------------------------------------
   5. Breadcrumbs
   ------------------------------------------------------------------------- */
.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding-left: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--color-line); }
.breadcrumbs a { color: var(--color-ink-muted); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-16);
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
}
.hero__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-6);
  max-width: 20ch;
}
.hero__lede {
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-8);
}
.hero__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary-tint);
}
.hero__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------
   7. Media placeholder (kunnes oikeat kuvat lisätään)
   ------------------------------------------------------------------------- */
.thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-accent-tint) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb--sm { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.thumb--wide { aspect-ratio: 16 / 9; }
.thumb svg { width: 32%; height: 32%; color: var(--color-accent-dark); opacity: 0.55; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   8. Topic grid (aiheet-sivu)
   ------------------------------------------------------------------------- */
.topic-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
}
.topic-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}
.topic-col__icon {
  width: 28px; height: 28px;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.topic-col__count {
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}
.topic-col__list {
  border-top: 1px solid var(--color-line);
}
.topic-col__item {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.topic-col__item .thumb { width: 64px; flex-shrink: 0; }
.topic-col__item h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  margin: var(--space-1) 0;
}
.topic-col__item time { font-size: var(--fs-xs); color: var(--color-ink-muted); }

/* -------------------------------------------------------------------------
   9. Article cards / rows
   ------------------------------------------------------------------------- */
.article-list { display: flex; flex-direction: column; gap: var(--space-8); }

.article-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .article-card { grid-template-columns: 220px 1fr; align-items: start; }
}
.article-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.article-card h3 { margin: 0; font-size: var(--fs-xl); }
.article-card h3 a { color: var(--color-ink); }
.article-card h3 a:hover { color: var(--color-primary-dark); text-decoration: none; }
.article-card__excerpt { color: var(--color-ink-muted); }
.article-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.article-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.article-row .thumb { width: 96px; flex-shrink: 0; }
.article-row h3 { font-size: var(--fs-lg); margin: var(--space-1) 0; }
.article-row h3 a { color: var(--color-ink); }
.article-row time { font-size: var(--fs-xs); color: var(--color-ink-muted); }

/* -------------------------------------------------------------------------
   10. Sidebar
   ------------------------------------------------------------------------- */
.sidebar { display: flex; flex-direction: column; gap: var(--space-8); }

.sidebar-author {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-warm-sm);
}
.sidebar-author__photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin-bottom: var(--space-4);
}
.sidebar-author h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.sidebar-author p { color: var(--color-ink-muted); font-size: var(--fs-sm); }
.sidebar-author__link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; margin-top: var(--space-3); }

.sidebar-highlight {
  background: var(--color-accent-dark);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.sidebar-highlight h3 { color: #fff; font-size: var(--fs-lg); }
.sidebar-highlight__icon { width: 28px; height: 28px; margin-bottom: var(--space-3); color: var(--color-primary); }
.sidebar-highlight dl { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.sidebar-highlight .row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: var(--space-2); font-size: var(--fs-sm); }
.sidebar-highlight dt { color: rgba(255,255,255,0.7); }
.sidebar-highlight dd { margin: 0; font-weight: 700; }
.sidebar-highlight a { color: #fff; text-decoration: underline; display: inline-flex; margin-top: var(--space-4); font-weight: 600; }
.sidebar-highlight a:hover { color: var(--color-primary-tint); }

.sidebar-highlight__progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.sidebar-highlight__progress-track {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.sidebar-highlight__progress-fill { background: var(--color-primary); height: 100%; border-radius: 999px; }
.sidebar-highlight__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   11. Newsletter band
   ------------------------------------------------------------------------- */
.newsletter-band {
  position: relative;
  background: var(--color-accent-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--container-pad);
  overflow: hidden;
}
.newsletter-band__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}
.newsletter-band__content { position: relative; z-index: 1; max-width: 640px; }
.newsletter-band h2 { color: #fff; }
.newsletter-band p { color: rgba(255,255,255,0.8); }

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-6);
}
.newsletter-form input[type="email"] {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
}
.newsletter-form__fineprint {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   12. Related topics
   ------------------------------------------------------------------------- */
.related-topics {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .related-topics { grid-template-columns: repeat(5, 1fr); }
}
.related-topics h3 { font-size: var(--fs-base); margin-bottom: var(--space-1); }
.related-topics span { font-size: var(--fs-xs); color: var(--color-ink-muted); }

/* -------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  color: #fff;
  margin-top: var(--space-16);
}
/* Aaltoraja: SVG lepää kermanvärisellä sivutaustalla (ei footerin tummalla
   taustalla), ja sen täyttö on itse footerin tumma sävy. Näin aallon
   yläpuolinen (läpinäkyvä) alue näyttää oikeasti kermaa, ei tummaa, eikä
   reunoihin jää kovaa saumaa. Tumma tausta alkaa vasta .site-footer__panelista
   heti aallon alla. */
.site-footer__wave {
  display: block;
  width: 100%;
  height: 64px;
  color: var(--color-accent-dark);
}
.site-footer__panel {
  background: var(--color-accent-dark);
}
.site-footer__inner { padding-block: var(--space-4) var(--space-16); }
.site-footer .logo { color: #fff; margin-bottom: var(--space-6); }
.site-footer__statement {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  max-width: 20ch;
  margin-bottom: var(--space-10);
}
.footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-links h3 {
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.footer-links ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a { color: rgba(255,255,255,0.75); }
.footer-links a:hover { color: #fff; }
.site-footer .social-links a { color: rgba(255,255,255,0.75); }
.site-footer .social-links a:hover { color: #fff; }
.site-footer__bottom a { color: rgba(255,255,255,0.85); }
.site-footer__bottom a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

/* -------------------------------------------------------------------------
   14. Forms (yhteydenotto, haku)
   ------------------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field label { font-weight: 600; font-size: var(--fs-sm); }
.form-field input,
.form-field textarea {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* -------------------------------------------------------------------------
   15. Article body typography
   ------------------------------------------------------------------------- */
.article-body { max-width: 68ch; }
.article-body h2 { margin-top: var(--space-10); }
.article-body h3 { margin-top: var(--space-8); }
.article-body ul, .article-body ol { padding-left: 1.25em; list-style: revert; margin-bottom: var(--space-4); }
.article-body figure { margin: var(--space-8) 0; }
.article-body figcaption { font-size: var(--fs-sm); color: var(--color-ink-muted); margin-top: var(--space-2); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------------
   16. Link list — tekstipohjainen, asymmetrinen vaihtoehto kortti-gridille
   (ks. anti-ai-slop.md 3.2: ei automaattista kolmen kortin feature-gridiä)
   ------------------------------------------------------------------------- */
.link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.link-list li { border-bottom: 1px solid var(--color-line); }
.link-list a {
  display: block;
  padding-block: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   17. Laskuri — interaktiivinen työkalu (korkoa korolle -tyyppinen).
   Ei riipu ulkoisista kirjastoista, kevyt vanilla-JS (ks. assets/js/quiz.js).
   ------------------------------------------------------------------------- */
.calculator {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-warm);
  margin-block: var(--space-10);
}
.calculator__intro { margin-bottom: var(--space-6); }
.calculator__form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  align-items: end;
}
@media (max-width: 640px) {
  .calculator__form { grid-template-columns: 1fr; }
}
.calculator__form .form-field { margin-bottom: 0; }
.calculator__form .btn { grid-column: 1 / -1; justify-self: start; }

.calculator__result {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}
.calculator__result-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.calculator__result-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calculator__result-value {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.calculator__result-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-ui);
}
.calculator__result-breakdown .row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.calculator__result-breakdown dt { color: var(--color-ink-muted); }
.calculator__result-breakdown dd { margin: 0; font-weight: 600; }
.calculator__disclaimer {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-6);
}

/* -------------------------------------------------------------------------
   18. Kuukausikatsaus-sarja: tulojen/menojen palkit, tavoiteseuranta,
   yhteenvetokaavio. Kaikki arvot ovat staattisia (server-side lasketut
   %-leveydet), ei JS:ää.
   ------------------------------------------------------------------------- */

.money-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-6);
}
.money-bars__row { display: flex; align-items: center; gap: var(--space-3); }
.money-bars__label {
  flex: 0 0 90px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}
.money-bars__track {
  flex: 1;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  height: 28px;
  overflow: hidden;
}
.money-bars__fill { height: 100%; border-radius: var(--radius-sm); }
.money-bars__fill--income { background: var(--color-accent); }
.money-bars__fill--expense { background: var(--color-primary); }
.money-bars__value {
  flex: 0 0 90px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.goal-progress {
  background: var(--color-accent-tint);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-block: var(--space-8);
}
.goal-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.goal-progress__pct {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-accent-dark);
}
.goal-progress__track {
  background: var(--color-surface);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
}
.goal-progress__fill { background: var(--color-accent-dark); height: 100%; border-radius: 999px; }
.goal-progress__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
}

.progress-chart { margin-block: var(--space-8); }
.progress-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 180px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--space-2);
}
.progress-chart__bar {
  flex: 1;
  background: var(--color-accent);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
}
.progress-chart__bar--current { background: var(--color-primary-dark); }
.progress-chart__value {
  position: absolute;
  top: -1.6em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* 9 palkkia ei mahdu kapealle näytölle täysien €-lukemien kanssa ilman
     ylivuotoa — täydet luvut pysyvät saatavilla .progress-chartin
     aria-labelissa ja alla olevassa artikkelilistassa. */
  .progress-chart__value { display: none; }
}
.progress-chart__labels {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.progress-chart__labels span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}
@media (max-width: 640px) {
  /* 9 palkkia + 9 kuukausilyhennettä on tiukka mahtumaan kapealle näytölle
     – pienempi väli ja fontti riittävät, min-width:0 sallii kutistumisen
     ilman ylivuotoa. */
  .progress-chart__bars,
  .progress-chart__labels { gap: 2px; }
  .progress-chart__labels span { font-size: 10px; }
}

.report-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.link-list a:hover { color: var(--color-primary-dark); text-decoration: none; }

/* -------------------------------------------------------------------------
   19. Announcement bar — korvaa header-actionsin "Uusi lukija?"-linkin.
   Aina skip-linkin jälkeen, ennen headeria (skip-link pysyy ensimmäisenä
   fokusoitavana elementtinä saavutettavuussyistä).
   ------------------------------------------------------------------------- */
.announcement-bar {
  background: var(--color-primary-dark);
  text-align: center;
}
.announcement-bar__inner { padding-block: var(--space-2); }
.announcement-bar a {
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.announcement-bar a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
   20. Table of contents (artikkelisivut) — avattava <details>-elementti,
   ei JS:ää, toimii sellaisenaan mobiilissa (lohkoelementti, ei omaa leveyttä).
   ------------------------------------------------------------------------- */
.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "+";
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.toc[open] summary::after { transform: rotate(45deg); }
.toc ol {
  margin: var(--space-4) 0 0;
  padding-left: 1.25em;
}
.toc li { margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.toc a { color: var(--color-primary-dark); }
.toc a:hover { text-decoration: none; }