/*
 * Lemonade marketing site.
 *
 * Tokens are copied verbatim from the design. Fonts are self-hosted and the
 * icons are inline SVG, so the marketing page adds no third-party requests or
 * tracking of its own. Product network boundaries are disclosed in the page.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* ----------------------------------------------------------------- tokens */

:root {
  --bg: #fbf8f1;
  --raised: #f4efe3;
  --sunk: #ece5d4;
  --wash: #fbf0d0;
  --accent: #c08a08;
  --accent-text: #8a5d00;
  --cta-bg: #8a5d00;
  --cta-fg: #fbf8f1;
  --cta-bg-hover: #6b4700;
  --ink: #211d16;
  --body: #413a2e;
  --muted: #6d6353;
  --line: rgba(33, 29, 22, 0.12);
  --line-strong: rgba(33, 29, 22, 0.22);
  --f-display: Archivo, system-ui, sans-serif;
  --f-body: Inter, system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --shell: 1160px;
  --pad: clamp(18px, 4vw, 44px);
}

/* The system preference is the default signal; the toggle stamps data-theme on
   the root and has to win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14130f;
    --raised: #1c1a14;
    --sunk: #23201a;
    --wash: #2e2713;
    --accent: #f5c542;
    --accent-text: #f7d57a;
    --cta-bg: #f5c542;
    --cta-fg: #14130f;
    --cta-bg-hover: #f7d57a;
    --ink: #f4f0e4;
    --body: #d8d2c2;
    --muted: #9b917f;
    --line: rgba(244, 240, 228, 0.13);
    --line-strong: rgba(244, 240, 228, 0.24);
  }
}

:root[data-theme='dark'] {
  --bg: #14130f;
  --raised: #1c1a14;
  --sunk: #23201a;
  --wash: #2e2713;
  --accent: #f5c542;
  --accent-text: #f7d57a;
  --cta-bg: #f5c542;
  --cta-fg: #14130f;
  --cta-bg-hover: #f7d57a;
  --ink: #f4f0e4;
  --body: #d8d2c2;
  --muted: #9b917f;
  --line: rgba(244, 240, 228, 0.13);
  --line-strong: rgba(244, 240, 228, 0.24);
}

/* ------------------------------------------------------------------- base */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  min-width: 320px;
  overflow-x: hidden;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ------------------------------------------------------------- primitives */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.band {
  border-top: 1px solid var(--line);
}

.band--raised {
  background: var(--raised);
}

.band__inner {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: '';
  width: 38px;
  height: 1px;
  background: var(--accent);
  flex: 0 0 auto;
}

.eyebrow span {
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.h2 {
  font: 600 clamp(28px, 4vw, 44px)/1.1 var(--f-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
}

.lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--filled {
  fill: currentColor;
  stroke: none;
}

/* Buttons -------------------------------------------------------------- */

.btn {
  border-radius: 8px;
  font: 500 16px/1 var(--f-body);
  padding: 16px 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  border: 1px solid var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.btn--primary:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--raised);
  color: var(--ink);
}

.btn--lg {
  font-size: 17px;
  padding: 18px 26px;
}

/* ----------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  color: var(--accent);
  display: flex;
}

.brand__name {
  font: 600 22px/1 var(--f-display);
  letter-spacing: -0.03em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  font: 500 14.5px/1 var(--f-body);
  flex-wrap: wrap;
}

.nav__links a {
  color: var(--body);
}

.nav__spacer {
  flex: 1;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.themetoggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.themetoggle:hover {
  background: var(--sunk);
  color: var(--ink);
}

/* The toggle shows the theme it switches *to*, so exactly one icon is live. */
.themetoggle__sun {
  display: none;
}

:root[data-theme='dark'] .themetoggle__sun {
  display: block;
}

:root[data-theme='dark'] .themetoggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .themetoggle__sun {
    display: block;
  }
  :root:not([data-theme='light']) .themetoggle__moon {
    display: none;
  }
}

.nav__cta {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--wash);
  color: var(--accent-text);
  font: 500 14.5px/1 var(--f-body);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav__cta:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
}

/* ------------------------------------------------------------------- hero */

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) var(--pad) clamp(44px, 6vw, 72px);
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero__copy {
  flex: 1 1 420px;
  min-width: min(100%, 320px);
}

.hero__eyebrow {
  margin-bottom: 26px;
}

.hero h1 {
  font: 600 clamp(40px, 6.6vw, 74px)/1.02 var(--f-display);
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 20ch;
}

.hero__sub {
  font: 400 clamp(17px, 1.6vw, 20px)/1.55 var(--f-body);
  color: var(--body);
  margin: 0 0 34px;
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: 400 13px/1.5 var(--f-mono);
  color: var(--muted);
}

.hero__meta .dot {
  color: var(--accent);
}

.hero__meta .price {
  color: var(--accent-text);
}

.hero__shot {
  flex: 1 1 460px;
  min-width: min(100%, 300px);
}

/* Screenshots ---------------------------------------------------------- */

.shot {
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--sunk);
  overflow: hidden;
  line-height: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* The app's own text is too small to read at card size, so each shot opens
   full size. The hint only appears on hover, and never on touch, where there
   is no hover to reveal it and tapping the image already works. */
.shot__link {
  display: block;
  position: relative;
  line-height: 0;
}

.shot__link:hover {
  text-decoration: none;
}

.shot__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.shot__link:focus-visible .shot__zoom,
.shot__link:hover .shot__zoom {
  opacity: 1;
}

@media (hover: none) {
  .shot__zoom {
    display: none;
  }
}

.shot figcaption {
  font: 400 12px/1.5 var(--f-mono);
  color: var(--muted);
  padding: 10px 14px;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* --------------------------------------------------------------- compare */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 16px;
}

.compare caption {
  text-align: left;
  padding: 18px 22px 0;
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare th[scope='col'] {
  text-align: left;
  padding: 16px 22px;
  font: 500 13px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}

/* The corner cell is an empty td, not a header: it labels nothing. */
.compare thead td {
  width: 30%;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-strong);
}

.compare th[scope='col'].is-ours {
  color: var(--accent-text);
  background: var(--wash);
}

.compare th[scope='row'] {
  text-align: left;
  padding: 15px 22px;
  font: 500 15px/1.4 var(--f-body);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare td {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}

.compare td.is-ours {
  color: var(--ink);
  background: var(--wash);
}

.compare td.is-ours.mono {
  font-family: var(--f-mono);
  font-size: 15px;
}

.compare tr:last-child th,
.compare tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------------- features */

.features__head {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--pad) clamp(20px, 3vw, 36px);
}

.features__list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.feature {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.feature--tint {
  background: var(--raised);
}

.feature__copy {
  flex: 1 1 340px;
  min-width: min(100%, 280px);
}

.feature__num {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.feature h3 {
  font: 600 clamp(21px, 2.4vw, 28px)/1.2 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 14px;
}

.feature p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
}

.feature__shot {
  flex: 1 1 380px;
  min-width: min(100%, 280px);
}

.feature__shot .shot {
  border-radius: 12px;
}

/* Capability grid ------------------------------------------------------ */

.capwrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) var(--pad) clamp(56px, 8vw, 104px);
}

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.cap {
  background: var(--bg);
  padding: clamp(22px, 2.6vw, 30px);
}

.cap__icon {
  color: var(--accent);
  display: block;
}

.cap h3 {
  font: 600 19px/1.3 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 10px;
}

.cap p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------- requirements */

.reqgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.reqgrid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-bottom: 0;
}

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}

.card--accent {
  border-color: var(--accent);
}

.card__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-strong);
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.card--accent .card__head {
  border-bottom-color: var(--accent);
  background: var(--wash);
  color: var(--accent-text);
}

.card__scroll {
  overflow-x: auto;
}

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.spec th[scope='row'] {
  text-align: left;
  padding: 14px 22px;
  font: 400 14px/1.4 var(--f-mono);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  width: 38%;
}

.spec td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 0;
}

.spec .mono {
  font-family: var(--f-mono);
  font-weight: 500;
}

.disk {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 16px;
}

.disk th[scope='row'] {
  text-align: left;
  padding: 14px 22px;
  font: 400 15px/1.4 var(--f-body);
  color: var(--body);
  border-bottom: 1px solid var(--line);
  width: auto;
}

.disk td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 15px;
  text-align: right;
}

.disk tr:last-child th,
.disk tr:last-child td {
  border-bottom: 0;
}

.vram {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 16px;
}

.vram th[scope='col'] {
  text-align: left;
  padding: 12px 22px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.vram th[scope='col']:last-child {
  text-align: right;
}

.vram th[scope='row'] {
  text-align: left;
  padding: 14px 22px;
  font: 400 14px/1.4 var(--f-mono);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  width: auto;
}

.vram td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

.vram td.total {
  color: var(--ink);
  font-family: var(--f-mono);
  text-align: right;
}

.vram tr:last-child th,
.vram tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------- privacy */

.privacy {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}

.privacy__intro {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
}

.privacy__intro h2 {
  max-width: 20ch;
}

.privacy__intro p {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}

.privacy__body {
  flex: 1 1 420px;
  min-width: min(100%, 280px);
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.6;
}

.checks li:last-child {
  border-bottom: 0;
}

.checks .icon {
  color: var(--accent);
  margin-top: 4px;
}

.note {
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--sunk);
}

.note__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.note p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------------------------- faq */

.faq {
  max-width: 840px;
  border-top: 1px solid var(--line-strong);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font: 600 clamp(17px, 1.8vw, 20px)/1.4 var(--f-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  list-style: none;
}

.faq summary::-webkit-details-marker,
.faq summary::marker {
  display: none;
  content: '';
}

.faq__plus {
  color: var(--accent);
  font: 400 24px/1 var(--f-body);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}

.faq details[open] .faq__plus {
  transform: rotate(45deg);
}

.faq p {
  margin: 0 4px 24px;
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 64ch;
}

/* -------------------------------------------------------------- download */

.download {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--pad);
}

.download__mark {
  color: var(--accent);
  display: inline-flex;
  margin-bottom: 28px;
}

.download h2 {
  font: 600 clamp(32px, 5.4vw, 60px)/1.05 var(--f-display);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 22ch;
}

.download__sub {
  margin: 0 0 34px;
  max-width: 52ch;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
}

.download__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.download__trial {
  font: 400 14px/1.5 var(--f-mono);
  color: var(--muted);
}

.download__fine {
  font: 400 13px/1.6 var(--f-mono);
  color: var(--muted);
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  background: var(--raised);
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--pad);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.footer__brand span:last-child {
  font: 600 20px/1 var(--f-display);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.footer__tag {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
}

.footer__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.footer__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
}

/* The licence facts sit under the brand tagline rather than in a column of
   their own, so they need the spacing a .footer__label would have given. */
.footer__licence {
  margin-top: 18px;
}

.footer__stack .price {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--ink);
}

.footer__stack .quiet {
  color: var(--muted);
}

.footer__stack a.mono {
  font-family: var(--f-mono);
  font-size: 14px;
  word-break: break-all;
}

.footer__stack span.mono {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--muted);
}

.footer__base {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font: 400 13px/1.6 var(--f-mono);
  color: var(--muted);
}

.footer__entity {
  color: var(--accent-text);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  z-index: 100;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

/* ------------------------------------------------------------ key recovery */

.resend {
  margin: 4px 4px 24px;
  max-width: 52ch;
}

.resend__label {
  display: block;
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.resend__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.resend__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1 var(--f-body);
}

.resend__input:focus-visible {
  border-color: var(--accent);
}

.resend__note {
  margin: 12px 0 0;
  font: 400 13.5px/1.6 var(--f-mono);
  color: var(--muted);
  min-height: 1.6em;
}

.buy-note {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font: 400 13.5px/1.6 var(--f-mono);
  color: var(--accent-text);
}

/* ------------------------------------------------------- writing surfaces */

/*
 * Everything below serves /blog and /research. The tokens, fonts and
 * primitives above are unchanged — a post is the same page furniture with a
 * measured reading column dropped into it.
 */

.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--pad) clamp(48px, 7vw, 88px);
}

.crumbs {
  font: 400 13px/1.6 var(--f-mono);
  color: var(--muted);
  margin: 0 0 26px;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--accent-text);
}

.crumbs span {
  padding: 0 8px;
  opacity: 0.55;
}

.pagehead {
  max-width: 44ch;
  margin-bottom: clamp(38px, 5vw, 60px);
}

.pagehead h1 {
  font: 600 clamp(34px, 5vw, 56px)/1.06 var(--f-display);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 20px;
}

.pagehead p {
  margin: 0;
  font-size: 18px;
  max-width: 58ch;
}

/* The index list ------------------------------------------------------- */

.postlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.postcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: clamp(26px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) {
  .postcard {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0 40px;
  }
}

.postcard__meta {
  font: 500 12px/1.7 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-content: start;
}

.postcard__kind {
  color: var(--accent-text);
}

.postcard__body h2 {
  font: 600 clamp(21px, 2.4vw, 27px)/1.22 var(--f-display);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.postcard__body h2 a {
  color: var(--ink);
}

.postcard__body h2 a:hover {
  color: var(--accent-text);
  text-decoration: none;
}

.postcard__body p {
  margin: 0 0 12px;
  max-width: 66ch;
}

.postcard__more {
  font: 500 14.5px/1 var(--f-body);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The reading column --------------------------------------------------- */

.article {
  max-width: 74ch;
}

.article__head {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(26px, 3vw, 36px);
  margin-bottom: clamp(30px, 4vw, 44px);
}

.article__head h1 {
  font: 600 clamp(32px, 4.6vw, 50px)/1.08 var(--f-display);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 18px;
}

.article__standfirst {
  font: 400 clamp(17px, 1.7vw, 20px)/1.55 var(--f-body);
  color: var(--body);
  margin: 0 0 22px;
}

.article__meta {
  font: 400 13px/1.7 var(--f-mono);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.article__meta .dot {
  opacity: 0.5;
}

/* A closing aside. Not .article__meta: that one is a flex row of discrete
   spans, and a sentence dropped into it becomes flex items with gaps in the
   middle of the prose. */
.article__note {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 66ch;
}

.article h2 {
  font: 600 clamp(23px, 2.6vw, 30px)/1.2 var(--f-display);
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 52px 0 16px;
  scroll-margin-top: 96px;
}

.article h3 {
  font: 600 19px/1.3 var(--f-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 34px 0 12px;
  scroll-margin-top: 96px;
}

.article p {
  margin: 0 0 18px;
}

.article ul,
.article ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.article li {
  margin-bottom: 9px;
}

.article li::marker {
  color: var(--accent);
}

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

.article code {
  font: 400 0.88em/1.5 var(--f-mono);
  background: var(--sunk);
  border-radius: 4px;
  padding: 2px 5px;
}

.article a code {
  background: var(--wash);
}

.article blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 18px;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

/* Links in running text are underlined rather than distinguished by colour
   alone, which is WCAG 1.4.1. Scoped to prose only: nav, buttons, cards and
   link lists are unambiguous from position and keep the design's clean look. */

.article p a,
.article li a,
.article__note a,
.callout a,
.refs a,
.facts dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.toc a,
.related a,
.flow a {
  text-decoration: none;
}

/* Contents ------------------------------------------------------------- */

.toc {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  padding: 22px 24px;
  margin: 0 0 40px;
}

.toc__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
  font-size: 15px;
}

@media (max-width: 620px) {
  .toc ol {
    columns: 1;
  }
}

.toc li {
  margin-bottom: 7px;
  break-inside: avoid;
}

/* Data tables inside prose --------------------------------------------- */

.article .tablewrap {
  margin: 0 0 26px;
  background: var(--raised);
}

.dtable {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.dtable caption {
  text-align: left;
  padding: 16px 20px 0;
  font: 500 11.5px/1.5 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.dtable th[scope='col'] {
  text-align: left;
  padding: 16px 20px 12px;
  font: 500 12px/1.4 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}

.dtable th[scope='row'] {
  text-align: left;
  padding: 13px 20px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.dtable td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: top;
}

.dtable .num {
  font-family: var(--f-mono);
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}

.dtable th.num {
  text-align: right;
}

.dtable .up {
  color: var(--accent-text);
}

.dtable tr:last-child th,
.dtable tr:last-child td {
  border-bottom: 0;
}

/* Callouts, figures, equations ----------------------------------------- */

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: var(--raised);
  padding: 20px 24px;
  margin: 0 0 26px;
}

.callout__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}

.callout p:last-child {
  margin-bottom: 0;
}

.eq {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sunk);
  padding: 22px 24px;
  margin: 0 0 26px;
  overflow-x: auto;
  font: 400 15.5px/1.9 var(--f-mono);
  color: var(--ink);
  text-align: center;
}

.eq sub {
  font-size: 0.75em;
  color: var(--muted);
}

.eq .frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  margin: 0 4px;
}

.eq .frac span:first-child {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}

.eq .frac span:last-child {
  padding-top: 2px;
}

.eq__note {
  display: block;
  margin-top: 12px;
  font: 400 12.5px/1.6 var(--f-body);
  color: var(--muted);
  text-align: left;
}

/* The two-plane architecture figure ------------------------------------ */

.planes {
  display: grid;
  gap: 16px;
  margin: 0 0 12px;
}

@media (min-width: 720px) {
  .planes {
    grid-template-columns: 1fr 1fr;
  }
}

.plane {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  padding: 20px 22px;
}

.plane__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}

.plane h3 {
  font: 600 17px/1.3 var(--f-display);
  color: var(--ink);
  margin: 0 0 14px;
}

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}

.flow li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}

.flow li::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-text);
  font: 500 11px/18px var(--f-mono);
  text-align: center;
}

.flow li:last-child {
  margin-bottom: 0;
}

.flow b {
  color: var(--ink);
  font-weight: 600;
}

figure.fig {
  margin: 0 0 26px;
}

figure.fig figcaption {
  font: 400 13px/1.6 var(--f-body);
  color: var(--muted);
  margin-top: 12px;
}

/* Footnotes and references --------------------------------------------- */

.fnref {
  font-size: 0.78em;
  vertical-align: super;
  line-height: 0;
  padding: 0 1px;
  font-family: var(--f-mono);
}

.refs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ref;
  font-size: 14.5px;
}

.refs li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  scroll-margin-top: 96px;
  color: var(--muted);
}

.refs li::before {
  counter-increment: ref;
  content: '[' counter(ref) ']';
  position: absolute;
  left: 0;
  top: 0;
  font: 400 13px/1.65 var(--f-mono);
  color: var(--accent-text);
}

.refs li:target {
  color: var(--body);
}

/* Post footer ---------------------------------------------------------- */

.artfoot {
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3.4vw, 40px);
  max-width: 74ch;
}

.artfoot h2 {
  font: 600 22px/1.25 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

.artfoot p {
  margin: 0 0 20px;
  max-width: 60ch;
}

.artfoot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.artfoot__fine {
  font: 400 13px/1.6 var(--f-mono);
  color: var(--muted);
  margin: 16px 0 0;
}

.related {
  margin-top: clamp(40px, 5vw, 60px);
  max-width: 74ch;
}

.related__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.related li {
  border-bottom: 1px solid var(--line);
}

.related a {
  display: block;
  padding: 14px 0;
  color: var(--ink);
  font: 500 16px/1.4 var(--f-body);
}

.related a:hover {
  color: var(--accent-text);
  text-decoration: none;
}

/* The plain-language fact block, quoted by readers and machines alike --- */

.facts {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: clamp(38px, 5vw, 56px);
}

.facts__label {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}

.facts dl {
  margin: 0;
  display: grid;
  gap: 0;
}

@media (min-width: 700px) {
  .facts dl {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

.facts dt {
  font: 500 12px/1.6 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 0 2px;
}

.facts dd {
  margin: 0;
  padding: 0 0 11px;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  .facts dt {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }
  .facts dd {
    padding: 13px 0;
  }
}

.facts dl > dt:last-of-type,
.facts dl > dd:last-of-type {
  border-bottom: 0;
}