/* ==========================================================================
   Recursive
   Axes: MONO 0–1 · CASL 0–1 · wght 300–1000 · slnt -15–0 · CRSV 0/0.5/1
   https://www.recursive.design/
   ========================================================================== */

@font-face {
  font-family: "Recursive";
  src: url("fonts/recursive.woff2") format("woff2");
  font-weight: 300 1000;
  font-display: swap;
}

/* ==========================================================================
   Knobs — everything worth playing with lives here
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #8a8a8a;
  --color-link: var(--color-text);
  --color-link-underline: color-mix(in oklab, currentColor 35%, transparent);
  --color-link-hover: #000000;
  --color-selection: #ffef7a;
  --color-selection-text: var(--color-text);

  /* Type scale */
  --size-base: 14px;
  --size-name: 36px;
  --size-lede: 14px;
  --size-label: 0.8125rem;
  --size-small: 0.875rem;

  --leading: 1.6;
  --leading-tight: 1.05;
  --tracking-label: 0.08em;

  /* Default axis values (inherited; override per element below) */
  --mono: 1;
  --casl: 0;
  --wght: 400;
  --slnt: 0;
  --crsv: 0.5;

  /* Grid */
  --page-max: 72rem;
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --label-col: 14rem;   /* width of the left heading column */
  --measure: 56ch;      /* max line length of content */
  --col-gap: 3rem;

  /* Vertical rhythm */
  --space-page-top: clamp(4rem, 12vh, 9rem);
  --space-section: clamp(5rem, 14vh, 10rem);
  --space-item: 0.1rem;
  --space-block: 3rem;

  --border-size: 0;
}

/* Every element reads the axis variables, so setting e.g. --casl: 1 on any
   element (and its descendants) is enough to change it. */
* {
  font-variation-settings:
    "MONO" var(--mono),
    "CASL" var(--casl),
    "slnt" var(--slnt),
    "CRSV" var(--crsv);
  font-weight: var(--wght);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Element styles
   ========================================================================== */

.name {
  --wght: 400;
  --casl: 0.5;
  --slnt: -15;
  --mono: 1;
  font-size: var(--size-name);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.lede {
  --wght: 400;
  /* --casl: 0.5; */
  /* --slnt: -15; */
  font-size: var(--size-lede);
  line-height: 1.45;
}

.label,
.sublabel {
  --wght: 600;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sublabel {
  --wght: 500;
  color: var(--color-muted);
}

.year {
  --casl: 1;
  --slnt: -15;
  --crsv: 1;
  color: var(--color-muted);
}

a {
  --wght: 500;
}

a:hover {
  --casl: 1;
  --slnt: -7;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: white;
  color: var(--color-text);
  font-family: "Recursive", ui-monospace, monospace;
  line-height: var(--leading);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-selection);
  color: var(--color-selection-text);
}

h1, h2, h3, p, ul {
  margin: 0;
}

/* Avoid single-word last lines (falls back to normal wrapping) */
p, li {
  text-wrap: pretty;
}

/* palette.js gives each link its own --link-color */
a {
  color: var(--link-color, var(--color-link));
  text-decoration-line: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 80ms, color 80ms;
}

a:hover {
  color: var(--link-color, var(--color-link-hover));
  text-decoration-color: currentColor;
}

ul {
  list-style: none;
  padding: 0;
}

/* ==========================================================================
   Layout — a two-column internal grid: label | content
   ========================================================================== */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-page-top) var(--page-gutter) var(--space-section);
}

.row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, var(--measure));
  column-gap: var(--col-gap);
  align-items: baseline;
}

.row + .row {
  margin-top: var(--space-section);
}

.intro .name {
  grid-column: 1 / -1;
  margin-bottom: 6rem;
}

.intro .content {
  grid-column: 2;
}

.label {
  grid-column: 1;
  padding-top: 0.15em;
}

.content {
  grid-column: 2;
}

.content > * + * {
  margin-top: 1em;
}

/* .content > p + ul, */
.content > ul + .sublabel {
  margin-top: var(--space-block);
}

.content > .sublabel + ul {
  margin-top: var(--space-item);
}

ul.spaced > li + li {
  margin-top: 0.5rem;
}

.content li + li {
  margin-top: var(--space-item);
}

.description {
  --casl: 1;
  --slnt: -15;
  --crsv: 1;
  color: var(--color-muted);
}

/* ==========================================================================
   Small screens — stack the label above the content
   ========================================================================== */

@media (max-width: 52rem) {
  :root {
    --size-base: 13px;
    --size-name: 30px;
    --size-lede: 13px;
    --leading: 1.65;

    --page-gutter: 28px;
    --space-page-top: 4.5rem;
    --space-section: 5rem;
    --space-block: 2.25rem;
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
  }

  .label,
  .content,
  .intro .content {
    grid-column: 1;
  }

  .label {
    margin-bottom: 1rem;
  }

  .intro .name {
    margin-bottom: 2.5rem;
  }

  /* Hanging indent, so a wrapped line never reads as a new item */
  .content li {
    padding-left: 2ch;
    text-indent: -2ch;
  }
}