@charset "utf-8";
/* Suuri Leevi and the Leavings Projekti — tulossivu
 *
 * Follows the original Squarespace page closely: a wide two-column grid, Roboto
 * at REGULAR weight for headings (the original is not bold anywhere — heavy
 * headings were the single biggest thing that made an earlier pass feel wrong),
 * dense bordered data tables, and hard black boxes for the highlighted callouts.
 * Palette is straight from the compiled original CSS. No dark mode.
 */

@font-face {
  font-family: "Roboto Local";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Local";
  src: local("Roboto Medium"), local("Roboto-Medium");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Local";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:      hsl(0 0% 0%);
  --paper:    hsl(0 0% 98.04%);
  --rule:     hsl(0 0% 89%);
  --rule-mid: hsl(0 0% 80%);
  --ink-soft: hsl(0 0% 10.98%);
  --muted:    hsl(0 0% 44%);
  --head-bg:  hsl(0 0% 95.5%);

  --mark-high: hsl(103 30% 89%);
  --mark-low:  hsl(0 45% 92%);
  --mark-best: hsl(103 32% 31%);

  --font: "Roboto Local", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shell: 1330px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(2rem, 3.6vw, 3.25rem);

  --h-xl: clamp(2.25rem, 4.6vw, 3.5rem);
  --h-lg: clamp(2rem, 4vw, 3.5rem);
  --h-md: clamp(1.35rem, 2.2vw, 2.125rem);
  --h-sm: clamp(1.05rem, 1.5vw, 1.3rem);
  --body: clamp(0.95rem, 1.05vw, 1rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.45;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Regular weight. This is the defining typographic choice of the original. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h-xl { font-size: var(--h-xl); }
.h-lg { font-size: var(--h-lg); }
.h-md { font-size: var(--h-md); }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 500; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }

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

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.5rem;
}
.logo img { width: 2.25rem; height: 2.25rem; object-fit: cover; }
.site-header nav { margin-inline: auto; min-width: 0; }
.site-header ul {
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.site-header ul::-webkit-scrollbar { display: none; }
.site-header a {
  text-decoration: none; white-space: nowrap;
  font-size: .9375rem; padding-block: .3rem;
  border-bottom: 1px solid transparent;
}
.site-header a:hover { border-bottom-color: var(--ink); }
[id] { scroll-margin-top: 4.5rem; }

/* ---------------- hero ---------------- */
/* Inset, not full-bleed — the original leaves the page gutter visible either
   side, and the title sits centred on the image. */
.hero { padding-top: .25rem; }
.hero-frame { position: relative; }
.hero-frame img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: brightness(.82);
}
.hero h1 {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(100% - 2rem); text-align: center;
  color: #fff; font-size: clamp(1.6rem, 4.6vw, 4rem);
  letter-spacing: -0.03em; line-height: 1.05;
  text-shadow: 0 2px 30px rgb(0 0 0 / .45);
}
@media (max-width: 40rem) { .hero-frame img { aspect-ratio: 3 / 2; } }

/* ---------------- intro (kuva | teksti) ---------------- */
.intro { padding-block: var(--section-y); }
.intro-grid {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.intro-figure { margin: 0; }
.intro-figure img { width: 100%; }
.intro-copy { display: grid; gap: .9rem; align-content: start; }
.intro-copy .h-md { margin-bottom: .35rem; }
.intro-copy p { max-width: 46ch; }
.quote { font-style: italic; max-width: 44ch; }
@media (max-width: 52rem) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-figure img { width: min(100%, 22rem); }
}

/* ---------------- section rhythm ---------------- */
.section { padding-block: var(--section-y); }
.section > .wrap > * + * { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------------- tables layout ---------------- */
.tables { padding-block: var(--section-y); }
.tables-grid {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
.col-songs, .col-side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.col-side { gap: clamp(1.5rem, 3vw, 2.5rem); }
.col-side > div { display: grid; gap: 1.25rem; min-width: 0; }
@media (max-width: 60rem) { .tables-grid { grid-template-columns: 1fr; } }

.table-controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
.field { display: grid; gap: .25rem; }
.field label {
  font-size: .6875rem; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em;
}
.field input, .field select {
  font: inherit; font-size: .875rem; padding: .4rem .55rem;
  border: 1px solid var(--rule-mid); border-radius: 3px;
  background: #fff; color: var(--ink); min-width: 11rem;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Dense bordered grid, matching the original's table treatment. */
.grid-table {
  width: 100%; border-collapse: collapse;
  font-size: .8125rem; background: #fff;
}
.grid-table caption { text-align: left; }
.grid-table th, .grid-table td {
  border: 1px solid var(--rule); padding: .5rem .6rem;
  vertical-align: middle;
}
.grid-table thead th {
  background: var(--head-bg); padding: 0; white-space: nowrap;
}
.grid-table thead button {
  font: inherit; font-size: .75rem; font-weight: 700;
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: .5rem .6rem; width: 100%; text-align: left;
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.grid-table thead button:hover { background: var(--rule); }
.caret::after { content: "⇕"; opacity: .4; font-size: .85em; }
[aria-sort="ascending"] .caret::after  { content: "↑"; opacity: 1; }
[aria-sort="descending"] .caret::after { content: "↓"; opacity: 1; }
.grid-table tbody tr:hover td { background: hsl(0 0% 97%); }
.grid-table .num { text-align: right; font-family: var(--mono); font-size: .8125rem; }
.grid-table .rank { width: 1%; }
.grid-table .title, .grid-table .album { letter-spacing: -0.005em; }
.songs th:nth-child(4), .songs td:nth-child(4) { width: 1%; }

.empty { padding: 1.5rem 0; color: var(--muted); }

/* ---------------- pager ---------------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem; justify-content: center;
}
.pager button {
  font: inherit; font-size: .75rem; font-weight: 500;
  padding: .35rem .6rem; cursor: pointer;
  border: 1px solid var(--rule-mid); border-radius: 3px;
  background: #fff; color: var(--ink);
}
.pager button:hover:not(:disabled) { background: var(--head-bg); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager-status {
  font-size: .75rem; color: var(--muted); padding-inline: .5rem;
  font-variant-numeric: tabular-nums;
}
.pager .show-all { margin-left: .5rem; border-color: var(--ink); }
.pager .show-all[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------------- spotify + tiesitkö ---------------- */
.spotify iframe { width: 100%; height: 380px; border: 0; border-radius: 12px; display: block; }

/* Dashed box, as in the original. */
.tiesitko {
  border: 3px dashed var(--ink); padding: clamp(1rem, 2vw, 1.5rem);
  display: grid; gap: .75rem;
}
.tiesitko h2 { font-size: var(--h-sm); font-weight: 700; }
.tiesitko p { font-size: var(--body); }

/* ---------------- findings ---------------- */
.findings-grid {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
}
@media (max-width: 60rem) { .findings-grid { grid-template-columns: 1fr; } }

/* Solid black box — the loudest element on the page, and deliberately so. */
.divisive-box {
  background: var(--ink); color: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: .6rem; align-content: center;
}
.divisive-box h2 {
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 700;
  margin-bottom: .5rem;
}
.divisive-box b { font-weight: 700; }

.finding-boxes {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Thick black outline, square corners, no shadow. */
.fbox {
  border: 3px solid var(--ink); padding: clamp(1rem, 2vw, 1.4rem);
  display: grid; gap: .7rem; align-content: start;
}

/* ---------------- crosstabs ---------------- */
.crosstab-pair {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.ct-wrap { display: grid; gap: .85rem; align-content: start; min-width: 0; }
.ct-wrap h3 { font-size: var(--h-sm); font-weight: 500; }

.crosstab {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums; background: #fff;
}
.crosstab th, .crosstab td { padding: .5rem .6rem; }
.crosstab thead th {
  font-size: .75rem; font-weight: 400; text-align: right;
  vertical-align: bottom; border-bottom: 1px solid var(--rule);
  line-height: 1.15;
}
.crosstab thead th.total, .crosstab td.total { background: var(--ink-soft); color: var(--paper); }
.crosstab thead th.total { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; }
.crosstab tbody th[scope="row"] { text-align: left; font-weight: 400; white-space: nowrap; font-size: .8125rem; }
.crosstab td { text-align: right; font-size: clamp(1rem, 1.8vw, 1.5rem); }
.crosstab tbody tr + tr th, .crosstab tbody tr + tr td { border-top: 1px solid var(--rule); }
.crosstab .total-row th, .crosstab .total-row td {
  background: var(--ink-soft); color: var(--paper); font-weight: 700; border-top: 0;
}
.crosstab .total-row th { text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; }
.crosstab .mark-high { background: var(--mark-high); }
.crosstab .mark-low  { background: var(--mark-low); }
.crosstab .mark-best { background: var(--mark-best); color: #fff; }

.crosstab-blocks { display: none; }
@media (max-width: 44rem) {
  .crosstab { display: none; }
  .crosstab-blocks { display: grid; gap: 1rem; }
  .ct-block { border: 1px solid var(--rule); background: #fff; }
  .ct-block h4 {
    margin: 0; padding: .5rem .75rem; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--rule);
  }
  .ct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .75rem; }
  .ct-row + .ct-row { border-top: 1px solid var(--rule); }
  .ct-row .v { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
  .ct-row.total { background: var(--ink-soft); color: var(--paper); font-weight: 700; }
  .ct-row.total .k { text-transform: uppercase; letter-spacing: .07em; font-size: .75rem; }
  .ct-row .v.mark-high { background: var(--mark-high); color: var(--ink); }
  .ct-row .v.mark-low  { background: var(--mark-low);  color: var(--ink); }
  .ct-row .v.mark-best { background: var(--mark-best); color: #fff; }
  .ct-row .v[class*="mark-"] { padding: .05rem .4rem; }
}

/* ---------------- band ---------------- */
/* Decoration, not content.
   With a 6:1 source you cannot have both "thin strip" and "bleeds off the right"
   at the same width: bleeding requires scaling the image WIDER than the
   viewport, which makes the strip thicker. Thin means the whole width fits.
   So the two cases are split at the width where they stop conflicting (~720px,
   the point where a 7.5rem-tall strip is exactly viewport-wide):

   - wide screens: natural ratio, no crop at all. All six portraits complete,
     and at 1440px it lands ~240px tall, which reads as a thin band on that page.
   - narrow screens: fixed height, width auto, so portraits stay at a legible
     size and the remainder bleeds off the right rather than shrinking to
     six unreadable slivers. */
.band { background: var(--ink); overflow: hidden; margin-block: var(--section-y); }
.band img { display: block; width: 100%; height: auto; }

@media (max-width: 45rem) {
  .band img {
    height: 7.5rem; width: auto; max-width: none;
    object-fit: cover; object-position: left center;
  }
}

/* ---------------- raatilaiset ---------------- */
.raati-head {
  display: grid; gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
}
.raati-copy { display: grid; gap: .9rem; }
.raati-copy p { max-width: 52ch; }
.big-stat { font-size: var(--h-md); line-height: 1.15; }
.big-stat b { font-weight: 700; }
@media (max-width: 52rem) { .raati-head { grid-template-columns: 1fr; } }

/* Three-up, two rows. Six across left the legends cramped; auto-fit gave
   5 + 1 orphan at desktop width, which reads as a mistake. Subgrid keeps the
   caption / ring / legend baselines aligned across each row even though the
   titles wrap to different heights. */
.donuts {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.donut {
  margin: 0; display: grid; gap: .8rem; justify-items: start;
  grid-template-rows: subgrid; grid-row: span 3;
  align-content: start;
}
@supports not (grid-template-rows: subgrid) {
  .donut { grid-template-rows: auto auto 1fr; grid-row: auto; }
}
.donut svg { width: min(100%, 9rem); height: auto; align-self: start; }
.donut figcaption { font-size: .9375rem; font-weight: 500; line-height: 1.25; align-self: end; }
.donut-foot { width: 100%; display: grid; gap: .4rem; align-content: start; }
.donut .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; width: 100%; }
.donut .legend li {
  display: grid; grid-template-columns: .65rem 1fr auto;
  align-items: center; gap: .5rem; font-size: .8125rem;
}
.donut .sw { width: .65rem; height: .65rem; border: 1px solid hsl(0 0% 72%); }
.donut .lb { color: var(--muted); }
.donut .legend b { font-weight: 500; font-variant-numeric: tabular-nums; }
.donut-note { font-size: .6875rem; color: var(--muted); }
@media (max-width: 60rem) { .donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .donuts { grid-template-columns: 1fr; } }

/* ---------------- timing ---------------- */
.timing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.timing-col { display: grid; gap: .5rem; align-content: start; }
.timing .icon { width: clamp(2.5rem, 5vw, 3.5rem); height: auto; margin-bottom: .5rem; }
.timing-head { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.3; }
.timing-head b { font-weight: 700; }
.timing-head .sub, .timing-foot .sub { font-size: .8125rem; color: var(--muted); }
.timing-pairs { margin: .6rem 0 0; display: grid; gap: .25rem; }
.timing-pairs > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .25rem; }
.timing-pairs dt { color: var(--muted); font-size: .875rem; }
.timing-pairs dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .875rem; }
.timing-foot { display: grid; gap: .35rem; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.timing-foot b { font-weight: 700; }

/* ---------------- raakadata ---------------- */
.raakadata-grid {
  display: grid; gap: clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.raakadata-grid > div { display: grid; gap: .9rem; align-content: start; }
.raakadata-grid p { max-width: 50ch; }
@media (max-width: 52rem) { .raakadata-grid { grid-template-columns: 1fr; } }

.downloads { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.downloads li { border-bottom: 1px solid var(--rule); }
.downloads a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .65rem .25rem; text-decoration: none;
}
.downloads a:hover { background: var(--head-bg); }
.downloads .size { color: var(--muted); font-size: .75rem; }
.footnote { color: var(--muted); font-size: .8125rem; }

/* ---------------- footer ---------------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 2.5rem; color: var(--muted); font-size: .8125rem; }

@media print {
  .site-header, .table-controls, .pager, .skip, .spotify { display: none; }
  .table-scroll { overflow: visible; }
}

/* ---------------- narrow-screen table trimming ---------------- */
/* At phone widths six columns force album names onto three lines and every row
   becomes a paragraph. Vuosi and Hajonta are the least-consulted columns, so
   Albumi, Vuosi and Hajonta drop out, leaving Sija / Biisi / Keskiarvio, which
   fits on one line per row. The data is still in each row's data-* attributes,
   so sorting and filtering on the hidden columns keep working, and the album
   dropdown still covers browsing by album. */
@media (max-width: 40rem) {
  .songs th:nth-child(3), .songs td:nth-child(3),
  .songs th:nth-child(4), .songs td:nth-child(4),
  .songs th:nth-child(6), .songs td:nth-child(6) { display: none; }
  .albums th:nth-child(4), .albums td:nth-child(4) { display: none; }
  .grid-table { font-size: .78125rem; }
  .grid-table th, .grid-table td { padding: .4rem .45rem; }
  .table-controls .field { flex: 1 1 100%; }
  .field input, .field select { width: 100%; min-width: 0; }
  .pager { justify-content: flex-start; }
  .pager .show-all { margin-left: 0; flex-basis: 100%; }
}

/* the tables section follows a long intro; it does not need a full section gap */
.tables { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.intro { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* ---------------- vertical rhythm between adjacent blocks ---------------- */
/* Two stacked sections each contributed a full --section-y, so the visual gap
   was twice the intended rhythm. Halve the join. */
.section + .section { padding-top: clamp(1rem, 2vw, 1.75rem); }
.tables + .section { padding-top: clamp(1rem, 2vw, 1.75rem); }
.findings-grid { gap: clamp(1rem, 2vw, 1.75rem); }
.finding-boxes { gap: clamp(.85rem, 1.5vw, 1.25rem); }
.band { margin-block: clamp(1.5rem, 3vw, 2.5rem); }