/* Kasinouutiset v2: the printed annual in Finnish blue. Paper pages for reading, blue pages for the big moments. */
:root {
  --paper: #f2f5fb;
  --paper-2: #e3e9f4;
  --paper-3: #d6dfef;
  --navy: #0a2a5e;
  --navy-2: #12357a;
  --ink: #0a1d3f;
  --muted: #45577a;
  --on-navy: #f2f5fb;
  --on-navy-muted: #b9c7e3;
  --bg: var(--paper);
  --surface: var(--paper-2);
  --accent: var(--navy);
  --accent-ink: #ffffff;
  --font-display: "Libre Franklin", system-ui, sans-serif;
  --font-text: "Source Serif 4", Georgia, serif;
  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --axis: 34%;
  --section: clamp(6rem, 11vw, 11rem);
}
body { background: var(--paper); color: var(--ink); font-family: var(--font-text); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.button { background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; min-height: 3rem; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--navy-2); } }
.button--light { background: var(--paper); color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .button--light:hover { background: #ffffff; } }
.meta { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }

/* top bar shared by inner pages */
.top { display: grid; grid-template-columns: var(--axis) 1fr; column-gap: var(--gutter); align-items: center; padding: 1.1rem var(--margin); background: var(--paper); }
.top__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; text-decoration: none; color: var(--navy); }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem clamp(1rem, 2vw, 1.75rem); font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.top nav a { text-decoration: none; color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--navy); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.top nav .menu { display: none; }

/* footer: columns above, wordmark below, inverted */
.foot { background: var(--navy); color: var(--on-navy); padding: 2.5rem var(--margin) 1.25rem; display: grid; grid-template-rows: auto auto auto; gap: 4rem; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); }
.foot__cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 1rem; color: var(--on-navy-muted); }
.foot__cols li:first-child { color: var(--on-navy); font-family: var(--font-display); font-weight: 600; }
.foot__cols a { text-decoration: none; }
.foot__mark { display: block; width: 100%; height: auto; fill: var(--on-navy); }
.foot__legal { font-size: 1rem; line-height: 1.5; color: var(--on-navy-muted); max-width: 75ch; margin-top: -2.5rem; }
.foot__legal a { color: var(--on-navy); }

@media (max-width: 760px) {
  :root { --axis: 100%; --section: 5rem; }
  .top { grid-template-columns: 1fr auto; }
  .top nav a:not(.menu) { display: none; }
  .top nav .menu { display: inline; }
  .foot__cols { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
}