:root {
  color-scheme: light dark;

  /* Each color is light-dark(light, dark), picked by color-scheme */
  --paper: light-dark(#f8f9fa, #16181c);
  --ink: light-dark(#111418, #e4e6ea);
  --muted: light-dark(#4b5160, #a0a6b1);
  --link: light-dark(#1d3b8c, #93abeb);
  --rule: light-dark(#111418, #e4e6ea);

  --font-text: "LM Roman 10", Georgia, serif;
  --font-display: "LM Roman 17", Georgia, serif;
  --font-caps: "LM Roman Caps 10", Georgia, serif;
  --font-mono: "LM Mono 10", "Courier New", monospace;

  --size-body: 1.0625rem;             /* 17px */
  --size-name: 2.25rem;               /* 36px */
  --size-title: 1.875rem;             /* 30px */
  --size-heading: 1.3125rem;          /* 21px */
  --size-abstract: 1.0625rem;         /* 17px */
  --size-abstract-heading: 0.9375rem; /* 15px */
  --size-summary: 1rem;               /* 16px */
  --size-colophon: 0.90625rem;        /* 14.5px */

  --column: 40rem;                    /* 640px */
  --gap: 4rem;                        /* 64px */
}

/* Desktop sizes, from 640px up */
@media (min-width: 40rem) {
  :root {
    --size-body: 1.1875rem;           /* 19px */
    --size-name: 3rem;                /* 48px */
    --size-title: 2.25rem;            /* 36px */
    --size-heading: 1.5rem;           /* 24px */
    --size-abstract: 1.09375rem;      /* 17.5px */
    --size-abstract-heading: 1rem;    /* 16px */
    --size-summary: 1.0625rem;        /* 17px */
    --size-colophon: 0.9375rem;       /* 15px */
  }
}

/* The theme toggle flips whatever the device prefers: its icon flips too, its hidden name doesn't */
:root {
  --show-dark: inline;
  --show-light: none;
  --name-dark: inline;
  --name-light: none;
}

:root:has(#theme-toggle:checked) {
  color-scheme: dark;
  --show-dark: none;
  --show-light: inline;
}

@media (prefers-color-scheme: dark) {
  :root {
    --show-dark: none;
    --show-light: inline;
    --name-dark: none;
    --name-light: inline;
  }

  :root:has(#theme-toggle:checked) {
    color-scheme: light;
    --show-dark: inline;
    --show-light: none;
  }
}

/* Fonts */
@font-face {
  font-family: "LM Roman 10";
  src: url("fonts/lmroman10-regular-subset.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "LM Roman 10";
  src: url("fonts/lmroman10-italic-subset.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "LM Roman 10";
  src: url("fonts/lmroman10-bold-subset.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "LM Roman 17";
  src: url("fonts/lmroman17-regular-subset.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "LM Roman Caps 10";
  src: url("fonts/lmromancaps10-regular-subset.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "LM Mono 10";
  src: url("fonts/lmmono10-regular-subset.woff2") format("woff2");
  font-display: swap;
}

/* Only the colophon font cycle uses these, so they download after a click */
@font-face {
  font-family: "LM Sans 10";
  src: url("fonts/lmsans10-regular-subset.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "CMU Concrete";
  src: url("fonts/cmunorm-subset.woff2") format("woff2");
  font-display: swap;
}

/* Base */
body {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--gap) 1.5rem;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: 1.55;
  text-wrap: pretty; /* Avoids one-word last lines */
}

h1 {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: normal;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

h2 {
  font-size: var(--size-heading);
  text-wrap: balance;
}

code {
  font-family: var(--font-mono);
}

a {
  color: var(--link);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible,
.theme input:focus-visible + label,
.font-cycle:has(input:focus-visible) label {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Hidden inputs, switched by their labels, in the theme toggle and the font cycle */
.theme input,
.font-cycle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Home link, in the same corner of every page */
.home {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

.home [aria-current="page"] {
  color: var(--muted);
  text-decoration: none;
}

/* Theme toggle, in the other corner */
.theme {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.theme label {
  display: inline-block;
  padding: 0 0.35em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: var(--link);
  cursor: pointer;
}

.theme label:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.theme svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
}

.theme .dark {
  display: var(--show-dark);
}

.theme .light {
  display: var(--show-light);
}

.theme .name-dark {
  display: var(--name-dark);
}

.theme .name-light {
  display: var(--name-light);
}

/* Names are for screen readers only */
.theme span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Section gaps */
main,
footer {
  margin-top: var(--gap);
}

main > section + section {
  margin-top: var(--gap);
}

/* Title block */
header {
  text-align: center;
}

header h1 {
  margin: 0 0 0.75rem;
}

.name {
  font-size: var(--size-name);
}

header p {
  margin: 0.25rem 0;
}

.role,
.author {
  font-family: var(--font-caps);
  letter-spacing: 0.06em;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.75rem 0 0;
}

/* Abstract */
.abstract {
  max-width: 33.75rem; /* 540px */
  margin-inline: auto;
  font-size: var(--size-abstract);
}

.abstract h2 {
  margin: 0 0 0.5rem;
  font-size: var(--size-abstract-heading);
  text-align: center;
}

.abstract p {
  margin: 0;
}

.abstract .keywords {
  margin-top: 0.75rem;
}

/* Case study list, on the home page */
.case-studies {
  padding: 0;
  list-style: none;
}

.case-studies li + li {
  margin-top: 1.25rem;
}

.case-studies p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: var(--size-summary);
}

/* Numbered sections, on case study pages */
main {
  counter-reset: section;
}

main > h2 {
  margin: 2.5rem 0 0.75rem;
}

main > h2::before {
  counter-increment: section;
  content: counter(section);
  margin-right: 1em;
}

/* Tables, booktabs style */
table {
  margin: 0.5rem auto 1.5rem;
  border-collapse: collapse;
  border-top: 1.6px solid var(--rule);
  border-bottom: 1.6px solid var(--rule);
}

th {
  border-bottom: 0.8px solid var(--rule);
  text-align: left;
}

th,
td {
  padding: 0.25rem 0.75rem;
}

/* A paragraph right above a table is its caption */
p:has(+ table) {
  margin-bottom: 0;
  text-align: center;
}

/* Next case study link */
.next {
  margin-top: var(--gap);
}

/* Colophon */
footer {
  color: var(--muted);
  font-size: var(--size-colophon);
}

/* Colophon font cycle: hidden radio buttons hold the font, and "Computer Modern" in each sentence is a label for the next one */
.font-cycle label {
  text-decoration: underline dotted 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.font-cycle span {
  display: none;
}

#font-roman:checked ~ .roman,
#font-concrete:checked ~ .concrete,
#font-sans:checked ~ .sans,
#font-typewriter:checked ~ .typewriter {
  display: inline;
}

:root:has(#font-concrete:checked) {
  --font-cycle: "CMU Concrete", Georgia, serif;
}

:root:has(#font-sans:checked) {
  --font-cycle: "LM Sans 10", sans-serif;
}

:root:has(#font-typewriter:checked) {
  --font-cycle: var(--font-mono);
}

/* Any font but the default replaces the text, title, and small caps fonts */
:root:has(#font-roman:not(:checked)) {
  --font-text: var(--font-cycle);
  --font-display: var(--font-cycle);
  --font-caps: var(--font-cycle);
}

/* The other fonts have no small caps, so the browser draws them */
:root:has(#font-roman:not(:checked)) :is(.role, .author) {
  font-variant-caps: small-caps;
}

/* Invisible 44px tall tap areas for standalone links, without moving anything */
.home a,
.theme label,
.links a,
.case-studies a,
.next a {
  position: relative;
}

.home a::after,
.theme label::after,
.links a::after,
.case-studies a::after,
.next a::after {
  content: "";
  position: absolute;
  inset: -0.625rem -0.5rem;
}