/* ==========================================================================
   Sulforaphane — design system

   Direction: "blanched sprout and sulfur."
   Broccoli sprouts germinate in the dark and come up etiolated: pale stems,
   almost no chlorophyll until they are moved into light. The palette comes
   from that, plus the mineral yellow of the sulfur the molecule is built
   around. Deliberately NOT broccoli green, which is the obvious answer and
   reads as a vegetable brand rather than a reference work.

   Type does the heavy lifting in three voices:
     Archivo (grotesque)      — display. Signage, headlines, nav.
     Source Serif 4           — body. A scientific-publishing serif; this is a
                                monograph, so the running text is serifed.
     IBM Plex Mono            — utility. Every measured thing on the site:
                                formulas, mg/100g, doses, NCT IDs, eyebrows.
                                Monospace = "this is a quantity", sitewide.

   All fonts are self-hosted OFL, latin subset. No external requests.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Light: the greened sprout, seen on pale mineral paper. */
  --paper: #eff1e8;
  --paper-2: #e6eadd;
  --paper-3: #dce1d2;
  --ink: #161c17;
  --ink-2: #47523f;
  --ink-3: #6b7566;
  --rule: #c7ceb9;
  --sulfur: #7d6310; /* text-safe on --paper */
  --sulfur-mark: #c9a227; /* marks and fills only, not text */
  --chlorophyll: #2e6b3c;
  --shadow: 22 28 20;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale. Ratio ~1.25 at small sizes, opening up at display. */
  --t-micro: 0.72rem;
  --t-small: 0.84rem;
  --t-body: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --t-lead: clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --t-h2: clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --t-h1: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --t-hero: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);

  --wrap: 72rem;
  --wrap-narrow: 42rem;
  --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem);
  --flow: 1.15em;

  --radius: 2px; /* near-square: lab glassware and printed tables, not apps */
  --speed: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* Dark: the germination jar before the sprouts are moved into light. */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --paper: #12170f;
  --paper-2: #1a2117;
  --paper-3: #232b1f;
  --ink: #e8ece0;
  --ink-2: #b0b9a6;
  --ink-3: #8a9481;
  --rule: #333d2d;
  --sulfur: #d9b441;
  --sulfur-mark: #d9b441;
  --chlorophyll: #86b884;
  --shadow: 0 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12170f;
    --paper-2: #1a2117;
    --paper-3: #232b1f;
    --ink: #e8ece0;
    --ink-2: #b0b9a6;
    --ink-3: #8a9481;
    --rule: #333d2d;
    --sulfur: #d9b441;
    --sulfur-mark: #d9b441;
    --chlorophyll: #86b884;
    --shadow: 0 0 0;
  }
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::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-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--sulfur);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--sulfur);
  outline-offset: 3px;
  border-radius: var(--radius);
}

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

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* --- The measured voice ---------------------------------------------------
   Monospace marks every quantity on the site. If it is a number with a unit,
   an NCT ID, a formula or a label, it is set here.
   -------------------------------------------------------------------------- */

.mono,
.eyebrow,
.figure,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.75rem;
}

.figure {
  font-size: 0.92em;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
}

.brand:hover {
  color: var(--sulfur);
}

/* The brand mark carries the molecule's own notation: a sulfur atom set in the
   utility face, sitting inside the wordmark. It is the smallest possible
   version of the site's whole argument. */
.brand__s {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--sulfur);
}

.brand__tld {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72em;
  color: var(--ink-3);
  letter-spacing: 0;
}

.nav {
  display: flex;
  gap: 1.15rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--sulfur-mark);
}

.nav-toggle,
.nav-toggle__btn {
  display: none;
}

@media (max-width: 54rem) {
  .nav-toggle__btn {
    display: block;
    cursor: pointer;
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    position: absolute;
    left: 0.25rem;
    width: 1.7rem;
    height: 2px;
    background: var(--ink);
    content: "";
  }
  .nav-toggle__bars {
    top: 1.1rem;
  }
  .nav-toggle__bars::before {
    top: -0.45rem;
  }
  .nav-toggle__bars::after {
    top: 0.45rem;
  }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.75rem;
  }
  .nav a {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav-toggle:checked ~ .nav {
    display: flex;
  }
}

/* --- Hero: the conversion ------------------------------------------------
   THE SIGNATURE. The one thing everyone gets wrong about this compound is
   that it is not present in intact broccoli — glucoraphanin and myrosinase
   sit in separate compartments and only meet when the tissue is damaged.
   The homepage leads with that reaction drawn out, because it is both the
   most characteristic thing in the subject's world and the site's thesis.
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(2rem, 1rem + 4vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.hero__formula {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.75rem;
}

.hero__formula b {
  font-weight: 500;
  color: var(--sulfur);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--sulfur);
}

.hero__standfirst {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}

/* The reaction diagram itself. */
.reaction {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.reaction__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.reaction__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.reaction__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Structures draw themselves on, left to right, so the reaction reads as an
   event rather than a picture of one. Reduced-motion users get it drawn. */
.reaction__bond {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reaction__bond--sulfur {
  stroke: var(--sulfur-mark);
}

.reaction__atom {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink);
}

.reaction__atom--s {
  fill: var(--sulfur);
}

.reaction__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

.reaction__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--ink-3);
  text-transform: uppercase;
}

.reaction__enzyme {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--chlorophyll);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .reaction__draw {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    animation: draw 1.4s var(--ease) forwards;
  }
  .reaction__fade {
    opacity: 0;
    animation: fade 0.5s var(--ease) forwards;
  }
  .reaction__stage-2 {
    animation-delay: 0.9s;
  }
  .reaction__stage-3 {
    animation-delay: 1.5s;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

.reaction__caption {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.reaction__caption strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Sections ------------------------------------------------------------- */

.section {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

.section__head {
  max-width: var(--wrap-narrow);
  margin-bottom: 2.25rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.section__intro {
  margin: 0.9rem 0 0;
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- Cards ---------------------------------------------------------------- */

/* Cards carry their own 1px outline rather than bleeding a grid background
   through the gaps. The bleed trick leaves a bare slab of rule colour whenever
   a row is only partly filled, which is the normal state of a growing site. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background var(--speed) var(--ease);
}

.card:hover {
  background: var(--paper-2);
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.card:hover .card__title {
  color: var(--sulfur);
}

.card__desc {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Hub cards on the homepage carry their target keyword's scale, because the
   relative size of these clusters is real information about the topic. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background var(--speed) var(--ease);
}

.hub-card:hover {
  background: var(--paper-2);
}

.hub-card__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.hub-card:hover .hub-card__name {
  color: var(--sulfur);
}

.hub-card__desc {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Article -------------------------------------------------------------- */

.breadcrumb {
  border-bottom: 1px solid var(--rule);
  padding-block: 0.85rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--rule);
}

.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--sulfur);
}

.article {
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.article__head {
  margin-bottom: 2.25rem;
}

.article__title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.article__standfirst {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

.provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.provenance strong {
  font-weight: 400;
  color: var(--ink-3);
}

.provenance a {
  color: var(--ink-2);
}

/* Quick answer: the extractable paragraph. Sits above the first H2 on every
   article, because both the reader and the AI Overview want the answer first. */
.quick-answer {
  margin: 0 0 2.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--sulfur-mark);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.quick-answer__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}

.quick-answer__text {
  margin: 0;
  font-size: 1.04em;
  line-height: 1.55;
}

.prose > * + * {
  margin-top: var(--flow);
}

/* Hub pages sit in the wide wrap so the card grid has room, but running text
   must stay at a readable measure. Everything is narrow except the grids.
   `margin-inline: auto` centres that measure so hub text lines up with article
   text and with the breadcrumb, which is always narrow. Without it, hubs
   left-align and articles centre, and the breadcrumb visibly misses. */
.hub-body {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
}

.hub-prose > * {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
}

.hub-prose > .card-grid,
.hub-prose > .table-scroll {
  max-width: none;
}

.hub-prose > .card-grid {
  margin-top: 2.5rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin-top: 2.5em;
  margin-bottom: 0.1em;
  text-wrap: balance;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-top: 1.9em;
  margin-bottom: 0.1em;
}

.prose p {
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
}

.prose code {
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 0.12em 0.36em;
  border-radius: var(--radius);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.5em;
}

/* Data tables are a first-class citizen here — several of the site's citable
   assets ARE tables. Numerals are tabular and monospaced so columns align. */
.prose table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  margin-block: 1.5em;
}

.table-scroll {
  overflow-x: auto;
  margin-block: 1.5em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.table-scroll > table {
  margin: 0;
  border: 0;
}

.prose th,
.data-table th {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ink-3);
  white-space: nowrap;
}

.prose td,
.data-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.prose td:not(:first-child),
.data-table td:not(:first-child) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.faq__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0 0 1.25rem;
}

.faq__item {
  border-bottom: 1px solid var(--rule);
  padding-block: 0.9rem;
}

.faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--sulfur);
  flex: none;
}

.faq__item[open] .faq__q::before {
  content: "\2212";
}

.faq__a {
  margin-top: 0.7rem;
  padding-left: 1.6rem;
  color: var(--ink-2);
}

/* --- Sources -------------------------------------------------------------- */

.sources {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.sources__title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}

.sources__list {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 1.4em;
  margin: 0;
}

.sources__list li + li {
  margin-top: 0.6rem;
}

.disclaimer {
  margin-top: 2.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}

.site-footer__brand .brand {
  margin-right: 0;
}

.site-footer__brand p {
  margin: 0.9rem 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: var(--t-small);
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.site-footer__nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--sulfur);
  text-decoration: underline;
}

.site-footer__legal {
  border-top: 1px solid var(--rule);
  padding-block: 1.25rem;
}

.site-footer__legal p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-3);
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  text-align: left;
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sulfur);
  margin: 0 0 1rem;
}

/* Hero photograph on an article. Optional: most pages carry none, and the site
   ranked its first pages without any. Sized by width/height attributes in the
   layout so nothing reflows as it loads. */
.article__figure {
  margin: 0 0 1.75rem;
}
.article__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}