/* Reading-quality and Core Web Vitals refinements.
   Appended after style.css so it can only add, never restyle the existing design.
   Every rule here targets a measured gap: headline widows, image layout shift,
   anchor targets hidden behind the header, and dark-mode/prefers-color-scheme. */

/* Balanced headline wrapping; `pretty` on body copy avoids single-word last lines.
   Both degrade harmlessly where unsupported. */
h1,h2,h3{text-wrap:balance}
.story-body p,.lead,.card>p{text-wrap:pretty}

/* Reserve image space so late-loading images cannot shift the article (CLS). */
figure img,img{aspect-ratio:attr(width) / attr(height)}

/* Pin the reserved box to the source dimensions once known, and stop long first
   paints from blocking interaction on article pages. */
.story-body img,figure img{height:auto}

/* Anchor targets must not hide under the header, and citations should land with
   a little breathing room rather than flush against the viewport top. */
[id]{scroll-margin-top:5rem}
.sources li{scroll-margin-top:6rem}

/* Long Finnish compounds: allow a break rather than overflowing narrow screens. */
.story-body,.card h2,.lead{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* Category eyebrow colours: give each section a stable hue so a reader can tell
   sections apart at a glance without relying on position alone. */
.eyebrow[data-category="Kotimaa"]{color:#a34422}
.eyebrow[data-category="Talous"]{color:#1d5c46}
.eyebrow[data-category="Ulkomaat"]{color:#1f4b7a}
.eyebrow[data-category="Tiede"]{color:#5b3f86}
.eyebrow[data-category="Teknologia"]{color:#0f6470}
.eyebrow[data-category="Kulttuuri"]{color:#8a3b5c}
.eyebrow[data-category="Urheilu"]{color:#3d6b1f}

/* Respect the user's system colour preference instead of forcing light paper. */
:root{color-scheme:light}
@media(prefers-color-scheme:dark){
  :root{--ink:#e8ece7;--muted:#b3bcb4;--paper:#131815;--accent:#e6a07c;--line:#2c352f;color-scheme:dark}
  .card{background:#1a201c}
  .card>p{color:var(--muted)}
  .principles p,footer{color:var(--muted)}
  a:hover{color:var(--accent)}
  dialog{background:#1a201c;color:var(--ink);border-color:#3a453d}
  .consent-settings{background:#1a201c;color:var(--ink);border-color:#3a453d}
  dialog button{background:#232b26;color:var(--ink);border-color:#3a453d}
  dialog #consent-accept{background:var(--accent);color:#131815}
}

/* Tap targets: the nav links and read-more affordance should stay comfortable
   on touch screens without changing the visual design. */
@media(max-width:620px){
  nav a{display:inline-block;padding:.35rem 0}
  .read{display:inline-block;padding:.35rem 0}
}