@charset "utf-8";

/* ===========================================================================
   AGGREGATZUSTÄNDE / STATES OF MATTER
   Design system — tokens, grid, components.

   Colour logic: the three state colours are not decoration. Lightness encodes
   energy — the more energy a state carries, the lighter its colour. Solid sits
   deepest, gas sits highest. The single accent (--energy) is reserved for one
   meaning only: energy entering or leaving a substance. It is never used for
   navigation, emphasis or ornament.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Palette — five colours, plus ink and paper. */
  --paper:      #ECEEEF;   /* cool exhibition wall */
  --paper-high: #F6F7F7;   /* raised surface */
  --ink:        #14181B;   /* near-black */
  --solid:      #1B3E6F;   /* lowest energy  — deep, structured */
  --liquid:     #12796B;   /* middle energy  — mid-tone, flowing */
  --gas:        #8E80B8;   /* highest energy — light, dispersed */
  --energy:     #C9982A;   /* accent. means "energy", nothing else */

  /* Ink derivatives — one hue, stepped. */
  --ink-mid:    #4A5257;
  --ink-soft:   #6E777C;
  --rule:       rgba(20, 24, 27, 0.16);
  --rule-soft:  rgba(20, 24, 27, 0.08);

  /* Type families */
  --display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale — real jumps, not a flat 16px world. */
  --t-micro: 0.6875rem;                            /* 11px  mono labels     */
  --t-cap:   0.8125rem;                            /* 13px  captions        */
  --t-body:  1.0625rem;                            /* 17px  body            */
  --t-lead:  clamp(1.1875rem, 0.9rem + 0.9vw, 1.5rem);
  --t-h3:    clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-h2:    clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --t-h1:    clamp(2.75rem, 1.4rem + 5.6vw, 5.25rem);
  --t-num:   clamp(3.5rem, 2rem + 6vw, 6.5rem);    /* display numerals      */

  /* Spacing rhythm — 4px base. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Grid */
  --gutter: 1.25rem;
  --measure: 34rem;          /* comfortable reading width */
  --section-gap: var(--s-9);

  color-scheme: light;
}

@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; }
}

/* ------------------------------------------------------------ 2. FOUNDATION */

*, *::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(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd, dt { margin: 0; }
figure, figcaption { margin: 0; }   /* UA default is margin: 1em 40px */
img, svg, canvas { display: block; max-width: 100%; }

/* Components below set display on these elements, which would otherwise beat
   the user-agent rule for [hidden]. */
[hidden] { display: none !important; }

/* Language switching. Both languages ship in the markup; only one is shown.
   Without JavaScript the document stays in its authored language. */
:root[data-lang='en'] [lang='de'],
:root[data-lang='de'] [lang='en'] { display: none; }

/* SVG text carries data-lang instead of lang, so the same switch reaches
   labels inside diagrams. */
:root[data-lang='en'] [data-lang='de'],
:root[data-lang='de'] [data-lang='en'] { display: none; }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font: 500 var(--t-cap)/1 var(--mono);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* -------------------------------------------------------------- 3. TYPOGRAPHY */

.display {
  font-family: var(--display);
  font-size: var(--t-h1);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--body);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-mid);
  max-width: 40rem;
  text-wrap: pretty;
}

.body { max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: var(--s-4); }

.label {
  font: 500 var(--t-micro)/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.caption {
  font: 400 var(--t-cap)/1.5 var(--body);
  color: var(--ink-soft);
  max-width: 30rem;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

em { font-style: italic; }
strong { font-weight: 600; }

a { color: inherit; }

.link {
  text-decoration: none;
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 140ms ease, background-color 140ms ease;
  padding-bottom: 1px;
}
.link:hover { background-image: linear-gradient(var(--ink), var(--ink)); }

/* ------------------------------------------------------------------ 4. GRID */

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

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
}
/* Below the twelve-column breakpoint every child spans the full width — the
   .col-* classes only mean anything once there are twelve columns to span. */
.grid > * { grid-column: 1 / -1; }

@media (min-width: 56rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
  .start-2 { grid-column-start: 2; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
}

.section { padding-block: var(--section-gap); }
.section + .section { border-top: 1px solid var(--rule-soft); }

.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
@media (min-width: 56rem) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
  }
  .section-head > .label { grid-column: span 2; padding-top: 0.65em; }
  .section-head > .h2 { grid-column: span 6; }
  .section-head > .lead { grid-column: span 4; font-size: var(--t-body); }
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------------------------------------------------------------- 5. HEADER */

/* One navigation element for every viewport: a row on desktop, a scrollable
   rail on small screens. Never a hidden menu, never duplicated markup. */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.wordmark__mark { display: block; flex: none; }
.wordmark__text {
  font: 500 var(--t-micro)/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
}
.wordmark__sub {
  display: block;
  color: var(--ink-soft);
  letter-spacing: 0.2em;
}

.nav {
  flex-basis: 100%;
  order: 3;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.nav::-webkit-scrollbar { display: none; }
.nav ul {
  display: flex;
  list-style: none;
  gap: var(--s-5);
  width: max-content;
  min-width: 100%;
}
.nav__link {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9375rem;
  color: var(--ink-mid);
  padding-block: var(--s-3);
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav__link[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

@media (min-width: 62rem) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: 0;
    min-height: 4.25rem;
  }
  .wordmark { margin-right: 0; }
  .nav {
    flex: 1 1 auto;
    flex-basis: auto;
    order: 2;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .nav ul {
    justify-content: center;
    gap: var(--s-6);
    width: auto;
    min-width: 0;
  }
  .nav__link { padding-block: var(--s-5); }
  .lang { order: 3; }
}

/* Language toggle */
.lang {
  display: flex;
  flex: none;
  border: 1px solid var(--rule);
  padding: 2px;
  gap: 2px;
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.1em;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* Language crossfade — the only page-level motion. */
main { transition: opacity 160ms ease; }
:root.is-swapping main { opacity: 0; }

/* ------------------------------------------------------------------ 6. HERO */

.hero { padding-block: var(--s-8) var(--s-9); }

.hero__eyebrow { margin-bottom: var(--s-5); }

.hero__title { margin-bottom: var(--s-5); }
.hero__title .alt {
  display: block;
  font-style: italic;
  color: var(--ink-soft);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------- 7. PARTICLE FIGURE */

/* The recurring visual system. Same dot, same rules, every page. */
.field {
  position: relative;
  background: var(--paper-high);
  border: 1px solid var(--rule-soft);
}
.field__box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.field__box > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.field__box--wide { aspect-ratio: 16 / 9; }
.field__box--tall { aspect-ratio: 1 / 1; }

/* The label sits above the box, never on top of the particles. */
.field__tag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid currentColor;
}
.field__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* minmax(0, 1fr) stops a wide child (a scrolling diagram) from sizing the
   track to its own max-content and pushing the page sideways. */
.figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.figure figcaption { color: var(--ink-soft); font-size: var(--t-cap); line-height: 1.5; }

/* State keying — used on tags, rules and table cells. */
.is-solid  { color: var(--solid); }
.is-liquid { color: var(--liquid); }
.is-gas    { color: var(--gas); }

/* -------------------------------------------------------------- 8. STATE ROW */

.state {
  display: grid;
  gap: var(--s-5) var(--gutter);
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}
.state:first-of-type { border-top: 0; padding-top: var(--s-5); }

@media (min-width: 56rem) {
  .state {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .state__figure { grid-column: span 5; }
  .state__body { grid-column: 7 / span 6; }
}

.state__key {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.state__swatch {
  width: 1.5rem;
  height: 0.375rem;
  background: currentColor;
  flex: none;
  transform: translateY(-0.15em);
}

.state__title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}

/* Property list */
.props {
  list-style: none;
  margin-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.props li,
.props > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.props dt, .props .props__key {
  font: 400 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.props .props__val { font-size: 0.9375rem; }

/* ------------------------------------------------------------- 9. DATA TABLE */

/* min-width:0 lets these shrink inside a grid/flex parent instead of forcing
   the whole page to scroll sideways. */
.table-scroll { overflow-x: auto; min-width: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}
caption {
  text-align: left;
  font: 500 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: var(--s-4);
}
th, td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
thead th {
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
}
tbody th {
  font-weight: 400;
  font-family: var(--mono);
  font-size: var(--t-cap);
  color: var(--ink-mid);
  white-space: nowrap;
}
.th-key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* -------------------------------------------------------- 10. STATE CHANGES */

.changes__stage { position: relative; }

.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-bottom: 0;
}
@media (min-width: 48rem) {
  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: var(--s-4);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: var(--s-2);
  transition: background-color 140ms ease;
  color: var(--ink);
}
.tab:nth-child(2n) { border-right: 0; }
@media (min-width: 48rem) {
  .tab:nth-child(2n) { border-right: 1px solid var(--rule); }
  .tab:last-child { border-right: 0; }
}
.tab:hover { background: var(--paper-high); }
.tab[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
}
.tab[aria-selected='true'] .tab__num,
.tab[aria-selected='true'] .tab__flow { color: rgba(236, 238, 239, 0.62); }

.tab__num {
  font: 400 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.tab__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
}
.tab__flow {
  font: 400 var(--t-micro)/1.2 var(--mono);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.panel { border: 1px solid var(--rule); border-top: 0; }
.panel[hidden] { display: none; }

.panel__grid { display: grid; }
@media (min-width: 56rem) {
  .panel__grid { grid-template-columns: 7fr 5fr; }
}

.panel__figure {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-high);
}
@media (min-width: 56rem) {
  .panel__figure { border-bottom: 0; border-right: 1px solid var(--rule); }
}

.panel__text { padding: var(--s-6); display: grid; gap: var(--s-5); align-content: start; }

.flow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: 500 var(--t-cap)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow__arrow { color: var(--ink-soft); }

/* Energy direction marker — the only place the accent appears. */
.energy-mark {
  display: inline-flex;
  justify-self: start;   /* grid items are blockified — keep it shrink-wrapped */
  align-items: center;
  gap: var(--s-2);
  font: 500 var(--t-cap)/1 var(--mono);
  letter-spacing: 0.06em;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--energy);
}
.energy-mark--in { background: var(--energy); color: var(--ink); }
.energy-mark--out { background: transparent; color: var(--ink); }

.fact {
  display: grid;
  gap: var(--s-1);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
}
.fact__val { font-family: var(--mono); font-size: 1.125rem; }

/* Cycle diagram */
/* width:100% is load-bearing: with auto inline margins alone the box would be
   sized to its content instead of stretching, and the wide diagram would push
   the page sideways rather than scrolling inside this container. */
.cycle {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  overflow-x: auto;
  min-width: 0;
}
.cycle svg { min-width: 30rem; }
.chart__state {
  font: 500 15px/1 var(--mono);
  letter-spacing: 0.1em;
  fill: var(--ink);
}

/* ---------------------------------------------------------- 11. MODEL PAGE */

.rules { list-style: none; border-top: 1px solid var(--rule); }
.rules li,
.rules > div {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 48rem) {
  .rules li,
  .rules > div { grid-template-columns: 12rem 1fr; gap: var(--gutter); }
}
.rules .rules__term { font-weight: 600; }
.rules dd { max-width: 40rem; }

.control {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  background: var(--paper-high);
}
.control__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.readout {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.readout div { display: grid; gap: 2px; }
.readout__val {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

input[type='range'] {
  appearance: none;
  width: 100%;
  height: 2rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ink);
}
input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--ink);
}
input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--energy);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  margin-top: -0.5rem;
}
input[type='range']::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  background: var(--energy);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}

/* Chart */
.chart { width: 100%; height: auto; }

/* The heating curve carries a lot of small type. The floor keeps it legible on
   a phone (its wrapper scrolls sideways); the ceiling stops the labels from
   ballooning on a wide screen, since SVG type scales with the viewBox. */
.chart--curve {
  min-width: 46rem;
  max-width: 60rem;
  margin-inline: auto;
}
.chart__axis { stroke: var(--rule); stroke-width: 1; }
.chart__grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart__curve { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Sizes here are SVG user units, so they scale with the viewBox. */
.chart__tick {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  fill: var(--ink-soft);
}
.chart__note {
  font: 400 15px/1 var(--body);
  fill: var(--ink);
}
.chart__marker { fill: var(--energy); stroke: var(--ink); stroke-width: 1.5; }

/* Energy share bar — drawn to true scale, unlike the schematic curve above.
   The two state changes are ink, the three warming steps carry their state
   colour, so the eye separates "changing state" from "getting warmer". */
.share { display: grid; gap: var(--s-4); }
.share__bar { display: flex; width: 100%; height: 2.75rem; gap: 2px; }
.share__seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 2px;
}
.share__seg--ice    { flex: 0 1 1.69%;  background: var(--solid); }
.share__seg--fusion { flex: 0 1 10.73%; background: var(--ink); }
.share__seg--water  { flex: 0 1 13.43%; background: var(--liquid); }
.share__seg--boil   { flex: 0 1 72.54%; background: var(--ink); }
.share__seg--steam  { flex: 0 1 1.61%;  background: var(--gas); }

.share__seg span {
  font: 500 var(--t-cap)/1 var(--mono);
  color: var(--paper);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.share__key[data-key='ice']    { background: var(--solid); }
.share__key[data-key='change'] { background: var(--ink); }
.share__key[data-key='water']  { background: var(--liquid); }
.share__key[data-key='steam']  { background: var(--gas); }
.share__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  list-style: none;
}
.share__legend li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-cap);
  color: var(--ink-mid);
}
.share__key { width: 0.75rem; height: 0.75rem; flex: none; }

/* ---------------------------------------------------------- 12. CHECK PAGE */

.quiz { display: grid; gap: var(--s-6); list-style: none; }

.q {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.q__head { display: grid; gap: var(--s-2); }
.q__num { font: 400 var(--t-micro)/1 var(--mono); letter-spacing: 0.14em; color: var(--ink-soft); }
.q__text { font-size: 1.125rem; font-weight: 500; line-height: 1.4; max-width: 40rem; }

.q__options { display: grid; gap: 0; border: 1px solid var(--rule); max-width: 44rem; }
.opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-4);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  transition: background-color 120ms ease;
}
.opt:last-child { border-bottom: 0; }
.opt:hover:not([disabled]) { background: var(--paper-high); }
.opt[disabled] { cursor: default; }
.opt__key {
  font: 400 var(--t-cap)/1.4 var(--mono);
  color: var(--ink-soft);
  flex: none;
}
.opt[data-state='correct'] {
  background: var(--paper-high);
  box-shadow: inset 3px 0 0 var(--liquid);
}
.opt[data-state='correct'] .opt__key { color: var(--liquid); font-weight: 500; }
.opt[data-state='wrong'] {
  box-shadow: inset 3px 0 0 var(--ink);
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.q__feedback {
  display: none;
  gap: var(--s-2);
  max-width: 40rem;
  padding-left: var(--s-4);
  border-left: 2px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-mid);
}
.q.is-answered .q__feedback { display: grid; }
.q__verdict { font: 500 var(--t-cap)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }

.score {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-5);
  border: 1px solid var(--rule);
  background: var(--paper-high);
}
.score__val { font-family: var(--mono); font-size: 1.75rem; font-variant-numeric: tabular-nums; }

.btn {
  appearance: none;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 var(--t-cap)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------- 13. NEXT/FOOT */

.next {
  border-top: 1px solid var(--ink);
  padding-block: var(--s-7);
}
.next__link {
  display: grid;
  gap: var(--s-3);
  text-decoration: none;
  padding-block: var(--s-3);
}
.next__label { display: flex; align-items: center; gap: var(--s-3); }
.next__title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.next__arrow {
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  flex: none;
}
.next__link:hover .next__arrow { transform: translateX(0.5rem); }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6) var(--s-8);
  color: var(--ink-soft);
  font-size: var(--t-cap);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  align-items: baseline;
  justify-content: space-between;
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  list-style: none;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 14. UTILITIES */

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

.stack { display: grid; align-content: start; }
.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); }
.stack-7 { gap: var(--s-7); }

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

.cards {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  text-decoration: none;
  padding-top: var(--s-4);
  border-top: 2px solid currentColor;
}
.card__title { font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.card__text { color: var(--ink-mid); font-size: 0.9375rem; max-width: 24rem; }
a.card .card__title { transition: opacity 140ms ease; }
a.card:hover .card__title { opacity: 0.62; }

/* Numbered preview list — numbering is real here: the four changes form two
   ordered pairs. */
.change-list { list-style: none; border-top: 1px solid var(--rule); }
.change-list li { border-bottom: 1px solid var(--rule-soft); }
.change-list a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  text-decoration: none;
  transition: padding-left 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.change-list a:hover { padding-left: var(--s-3); }
/* Same rhythm, without the numbering — used where the items are not a sequence. */
.change-list--plain a { grid-template-columns: 1fr auto; }
.change-list__num { font: 400 var(--t-cap)/1.4 var(--mono); color: var(--ink-soft); }
.change-list__name { font-size: 1.125rem; font-weight: 500; }
.change-list__flow { font: 400 var(--t-micro)/1.4 var(--mono); color: var(--ink-soft); letter-spacing: 0.06em; }

/* --------------------------------------------------------- 15. REDUCED MOTION */

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

/* ------------------------------------------------------------------ 16. PRINT */

@media print {
  .site-header, .nav-rail, .next, .lang, .skip { display: none; }
  body { background: #fff; }
  .field { border: 1px solid #999; }
}