/* ──────────────────────────────────────────────────────────────
   matthewkantor.com — v7

   An editorial site. The writing is the product; the page gets
   out of its way.

   SIZE DOES THE HIERARCHY. One typeface, one width, and almost one
   weight. The big statements run at wght 400, not 600: enormous type
   set light and wide reads as established, where enormous type set
   bold and condensed reads as an agency shouting. Tracking tightens
   as size grows (-0.03em on a statement, -0.011em on body copy).

   The width axis is spent in exactly one place: figures, at wdth 122,
   tabular, so a number reads as measured rather than typed.

   TWO LEFT EDGES. Matt's voice starts at the page edge; evidence,
   meta and numbers start inset. Nothing is centred, ever.

   TERRITORIES. The site has three, and a page belongs to exactly one.
   The territory sets the hero panel and every mark on the page, via a
   class on <body>. A reader learns the code in two pages.

     the engagement   steel  #2E6B7A   home, about, next version,
                                       pricing, let's talk
     the writing      coral  #C9483A   thinking, and every essay
     the record       deep   #13303A   work, and every case study
                             steel     (marks stay steel: evidence is sober)

   Steel and coral are both the brand's own, out of the field guide and
   the 62-page booklet. brand/README.md had them as unreconciled with
   the site; both are reconciled now.

   AMBER IS NOT A TERRITORY. #A87422 means money and only money:
   figures, on any page. It never becomes a link or a panel.

   EVERY PAGE OPENS ON ITS DOOR. The hero is a full-bleed panel in the
   territory colour, light type on it, on every page of the site.

   THEN SECTIONS ALTERNATE. Ground, wash, ground, wash down the page,
   wash being the territory's own tint. The surface change is the
   section boundary, so no hairline is drawn where the colour turns.
   The deep field is punctuation, not part of the alternation.

   NO CARDS. NO ICONS. NO EYEBROWS. NO SCROLL MOTION.
   Rules appear once, between peers in a list. Never around things.
   ─────────────────────────────────────────────────────────── */

:root {
  --ground: #eceeec;         /* the base surface */
  --wash: #e1e9ea;           /* the alternate surface, tinted per territory */
  --ink: #171a19;
  --ink-2: #5a6462;
  --ink-3: #87918f;
  --rule: #d0d7d6;

  --field: #13303a;          /* the one deep block: steel, not black */
  --field-ink: #e9ece8;
  --field-ink-2: #9aabae;
  --field-rule: #2c4a54;
  --field-link: #8fbcc6;     /* steel, lifted to read on the deep field */

  --steel: #2e6b7a;
  --steel-deep: #1f4e5a;
  --coral: #c9483a;
  --coral-deep: #a63527;     /* the value that passes AA as text on ground */
  --amber: #a87422;          /* the money: figures only, never a link */
  --amber-lit: #d8a24a;      /* figures on the deep field */

  /* the territory. overridden per page type on <body>; default is the
     engagement, which is most of the site. */
  --door: var(--steel);            /* the hero panel fill */
  --territory: var(--steel);       /* underlines and marks */
  --territory-ink: var(--steel-deep); /* text and hover, AA on ground */

  --accent: var(--territory);
  --accent-lit: var(--amber-lit);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --page: 1240px;
  --inset: clamp(0rem, 7vw, 8rem);   /* the second left edge */
  --measure: 64ch;
  --air: clamp(4.5rem, 11vw, 9.5rem); /* between thoughts */
}

body.t-writing {
  --door: var(--coral);
  --territory: var(--coral);
  --territory-ink: var(--coral-deep);
  --wash: #f0e7e5;           /* warm paper: the writing reads on this */
  --rule: #ded1ce;
}
body.t-record {
  --door: var(--field);
  --territory: var(--steel);
  --territory-ink: var(--steel-deep);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ol, ul, dl, dd, dt, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--ground); }

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

/* ── the three physiques ────────────────────────────────────── */

/* statement: the enormous condensed voice. hero and section openers. */
.statement, .hook {
  font-size: clamp(2.6rem, 7.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  font-variation-settings: "wdth" 100, "wght" 400;
  max-width: 19ch;
  text-wrap: balance;
}

/* thesis: a statement that belongs to a piece of writing, not to the offer */
.thesis {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-variation-settings: "wdth" 100, "wght" 400;
  max-width: 23ch;
  text-wrap: balance;
}

.t-head {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 100, "wght" 450;
  max-width: 26ch;
  text-wrap: balance;
}

.display-sm {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-variation-settings: "wdth" 100, "wght" 500;
}

/* read: the argument */
.lede, .hook__sub, .t-sub {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.38;
  letter-spacing: -0.008em;
  font-variation-settings: "wdth" 100, "wght" 400;
  color: var(--ink);
  max-width: 46ch;
}

.hook__sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.t-body, .body-sm, .summary {
  font-size: 1.1875rem;
  line-height: 1.6;
  letter-spacing: -0.011em;
  max-width: var(--measure);
  color: var(--ink-2);
}
.t-body strong, .summary strong { font-variation-settings: "wdth" 100, "wght" 600; color: var(--ink); }
.t-body + .t-body { margin-top: 1.15em; }
.measure { max-width: var(--measure); }

/* meta: sentence case, no tracking, no caps. it labels; it does not announce. */
.label {
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.008em;
  font-variation-settings: "wdth" 108, "wght" 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.label--ink { color: var(--ink-2); }

.note { margin-top: 2.5rem; font-size: 0.9375rem; color: var(--ink-3); max-width: 60ch; }

/* figure: the evidence. extended and tabular so numbers read as measured,
   and amber, because a number on this site is always about money. */
.figure {
  color: var(--amber);
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 122, "wght" 600;
  font-variant-numeric: tabular-nums;
}

/* ── links ──────────────────────────────────────────────────── */

.tlink, .link {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 160ms, border-color 160ms;
}
.tlink:hover, .link:hover { color: var(--territory-ink); }

/* "Read the essay →" — the arrow is the brief's, kept here and nowhere else */
.readlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-variation-settings: "wdth" 100, "wght" 500;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.readlink .arrow { transition: transform 180ms; }
.readlink:hover { color: var(--territory-ink); }
.readlink:hover .arrow { transform: translateX(3px); }

.btn {
  display: inline-block;
  background: var(--territory);
  color: #fff;
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
  font-variation-settings: "wdth" 100, "wght" 500;
  border: 1px solid var(--territory);
  transition: background-color 160ms, border-color 160ms;
}
.btn:hover { background: var(--territory-ink); border-color: var(--territory-ink); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; color: var(--territory-ink); border-color: var(--territory); }

.hero__act { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.terms { font-size: 1.0625rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── nav: five words and a hairline. not sticky. ────────────── */

.nav { border-bottom: 1px solid var(--rule); }
.nav__in {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.75rem 2rem;
  padding-block: 1.6rem 1.4rem;
}
.nav__brand {
  font-size: 1.0625rem;
  font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(1.1rem, 3vw, 2.5rem); font-size: 1.0625rem; }
.nav__links a { color: var(--ink-2); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ── sections: one thought each, a lot of air ───────────────── */

.sec { padding-block: var(--air); }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.sec__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* the alternate band. ground, wash, ground, wash down the page. */
.sec--alt, .sec--wash { background: var(--wash); }

.sec--field {
  background: var(--field);
  color: var(--field-ink);
  border-top: 0;
}
.sec--field .t-body, .sec--field .summary { color: var(--field-ink-2); }
.sec--field .t-head, .sec--field .thesis, .sec--field .t-body strong { color: var(--field-ink); }
.sec--field .label { color: var(--field-ink-2); }
.sec--field .figure { color: var(--accent-lit); }
.sec--field .tlink, .sec--field .readlink { color: var(--field-ink); border-bottom-color: var(--field-link); }
.sec--field .tlink:hover, .sec--field .readlink:hover { color: var(--field-link); }

/* where the surface turns, the colour is the boundary. no hairline. */
.sec.sec--alt, .sec.sec--wash, .sec.sec--field,
.sec--alt + .sec, .sec--wash + .sec, .sec--field + .sec { border-top: 0; }
.sec--alt .rows, .sec--alt .weeks, .sec--alt .archive { border-top-color: color-mix(in srgb, var(--ink) 14%, var(--wash)); }
.sec--alt .rows li, .sec--alt .weeks li, .sec--alt .archive li { border-bottom-color: color-mix(in srgb, var(--ink) 14%, var(--wash)); }

/* the second left edge */
.inset { margin-left: var(--inset); }

/* ── hero ───────────────────────────────────────────────────── */

.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem) var(--air); }

/* the hero is a full-bleed colour panel: one saturated field, white type,
   and everything after it goes quiet */
.hero--panel {
  background: var(--door);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6.5rem);
}
.hero--panel .statement, .hero--panel .hook, .hero--panel .t-head,
.hero--panel .display, .hero--panel h1 { color: #fff; }
.hero--panel .t-body, .hero--panel .t-sub { color: rgba(255, 255, 255, 0.82); }
.hero--panel .tlink { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }
.hero--panel .tlink:hover { color: #fff; border-bottom-color: #fff; }
.hero--panel .terms { color: rgba(255, 255, 255, 0.82); }
.hero--panel .btn--quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero--panel .btn--quiet:hover { color: #fff; border-color: #fff; }
.hero--panel .who { border-top-color: rgba(255, 255, 255, 0.28); }
.hero--panel .who__name { color: #fff; }
.hero--panel .lede, .hero--panel .hook__sub { color: rgba(255, 255, 255, 0.88); }
.hero--panel .label { color: rgba(255, 255, 255, 0.72); }
.hero--panel .btn { background: #fff; color: var(--territory-ink); border-color: #fff; }
.hero--panel .btn:hover { background: var(--field); color: #fff; border-color: var(--field); }
.hero--panel + .sec { border-top: 0; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: end; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.hero .lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* in colour, pulled slightly toward the palette so the jacket sits with
   the steel instead of shouting over it */
.portrait img { width: 100%; filter: saturate(0.82) contrast(1.03); }
.portrait figcaption { margin-top: 1rem; }

/* ── the dominant thesis ────────────────────────────────────── */

.tblock { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.tblock .t-body { max-width: 56ch; }
.tblock__act { margin-top: 0.5rem; }

/* ── thinking: article titles as campaign headlines ─────────── */

.archive { border-top: 1px solid var(--rule); }
.sec--field .archive { border-top-color: var(--field-rule); }
.archive li { border-bottom: 1px solid var(--rule); }
.sec--field .archive li { border-bottom-color: var(--field-rule); }
.archive a {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 820px) {
  .archive a {
    grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem;
    gap: 2.5rem;
    align-items: baseline;
  }
  .archive .time { text-align: right; }
}
.archive .num, .archive .entry, .archive .time { grid-column: auto; }
.archive .entry { display: grid; gap: 0.7rem; }
.archive .display-sm { transition: color 160ms; }
.archive .summary { max-width: 52ch; }
.archive a:hover .display-sm { color: var(--territory-ink); }
.sec--field .archive a:hover .display-sm { color: var(--accent-lit); }

/* ── proof: a number, what it measures, a hundred words ─────── */

/* the number gets the full width so it never breaks across lines */
.readout { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.readout .figure { white-space: nowrap; }
.proof__of {
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  font-variation-settings: "wdth" 104, "wght" 500;
  max-width: 48ch;
}
.proof { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.proof > *, .instr > *, .withimg > * { min-width: 0; }
@media (min-width: 880px) {
  .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
}
.proof .t-head { max-width: 20ch; }
.proof__story .t-body { max-width: 56ch; }
.proof__act { margin-top: 2rem; }

/* ── a run of short statements (experience, how I work) ─────── */

.rows { border-top: 1px solid var(--rule); }
.rows li { padding-block: 1.5rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.6rem; }
@media (min-width: 760px) { .rows li { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; align-items: baseline; } }
.rows b { font-variation-settings: "wdth" 100, "wght" 500; font-size: 1.1875rem; }
.rows span { color: var(--ink-2); font-size: 1.1875rem; line-height: 1.55; max-width: 58ch; }
.rows span strong, .qs span strong { font-variation-settings: "wdth" 100, "wght" 600; color: var(--ink); }
.sec--field .rows { border-top-color: var(--field-rule); }
.sec--field .rows li { border-bottom-color: var(--field-rule); }
.sec--field .rows span { color: var(--field-ink-2); }
.sec--field .rows span strong { color: var(--field-ink); }

.weeks { border-top: 1px solid var(--rule); counter-reset: wk; }
.weeks li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
.weeks li::before {
  counter-increment: wk; content: counter(wk, decimal-leading-zero);
  font-size: 0.9375rem; color: var(--territory); font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 108, "wght" 500; padding-top: 0.3rem;
}
.weeks b { grid-column: 2; font-size: 1.1875rem; font-variation-settings: "wdth" 100, "wght" 500; }
.weeks span { grid-column: 2; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }

.qs { border-top: 1px solid var(--field-rule); }
.qs li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1.25rem;
  padding-block: clamp(1.4rem, 2.8vw, 2rem);
  border-bottom: 1px solid var(--field-rule);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 100, "wght" 400;
}
.qs li > i {
  font-style: normal; font-size: 0.9375rem; color: var(--field-ink-2);
  font-variant-numeric: tabular-nums; padding-top: 0.55em;
  font-variation-settings: "wdth" 108, "wght" 500;
}

/* ── two columns of prose, or prose beside a list ───────────── */

.instr { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 880px) { .instr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── the four, converging. the mark, re-cut as the argument. ── */

.venn { max-width: 34rem; }
.venn svg { width: 100%; height: auto; overflow: visible; }
.venn circle { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.3; }
.venn__l { fill: var(--ink); font-size: 19px; text-anchor: middle; font-variation-settings: "wdth" 92, "wght" 500; }
.venn__c { fill: var(--accent); font-size: 21px; text-anchor: middle; font-variation-settings: "wdth" 118, "wght" 600; }

/* ── hand-drawn plates ──────────────────────────────────────────
   The same sketch system the case pages use. Static here: the homepage
   has no motion, and a diagram that needs JS to become visible is a
   diagram that sometimes isn't. */

/* the drawing keeps a legible minimum and scrolls inside its own box on a
   phone, so the page never scrolls sideways */
.plate { position: relative; overflow-x: auto; max-width: 100%; background: transparent; }
.sketch { min-width: var(--mw, 0); padding-block: 0.5rem; }
.sketch svg { display: block; width: 100%; height: auto; }

.sketch path, .sketch circle, .sketch ellipse, .sketch line, .sketch polyline {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sketch .pen { stroke: var(--amber); stroke-width: 1.9; }
.sketch .thin { stroke-width: 1.1; }
.sketch .dashed { stroke-dasharray: 4 3; }
.sketch text { font-size: 12px; fill: var(--ink-2); font-variation-settings: "wdth" 100, "wght" 400; }
.sketch text.pen-text { fill: var(--amber); font-size: 13px; font-variation-settings: "wdth" 100, "wght" 500; }
.plate__tag { display: none; }
figcaption.label { display: block; margin-top: 0.9rem; }
@media (min-width: 640px) { .sketch { min-width: 0; } }

/* ── photograph bands ───────────────────────────────────────────
   One image, edge to edge, no caption furniture. See CLAUDE.md for
   the filenames and sizes these expect. */

.band { margin: 0; }
.band img { width: 100%; height: clamp(15rem, 34vw, 30rem); object-fit: cover; }
.band figcaption { margin-top: 0.9rem; }
.band figcaption.label { max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }

.withimg { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .withimg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.withimg img { width: 100%; filter: saturate(0.82) contrast(1.03); }

/* ── about / portrait beside prose ──────────────────────────── */

.about { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 840px) { .about { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; } }
.about img { filter: saturate(0.82) contrast(1.03); }

/* ── offers (pricing page) ──────────────────────────────────── */

.offers { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 840px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer { border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.offer > span { display: block; margin-bottom: 0.75rem; font-size: 0.9375rem; color: var(--ink-3); }
.offer h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.12; letter-spacing: -0.022em; font-variation-settings: "wdth" 100, "wght" 500; }
.offer .terms { display: block; margin-top: 0.7rem; margin-bottom: 1.25rem; color: var(--ink); }
.offer .t-body + .t-body { margin-top: 0.9em; }
.faq h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; font-variation-settings: "wdth" 96, "wght" 600; margin-top: 2.75rem; }
.faq h3:first-child { margin-top: 0; }
.faq p { margin-top: 0.8rem; }

/* ── hero supporting blocks still used by subpages ──────────── */

.amp { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .amp { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.who { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.who__name { font-variation-settings: "wdth" 100, "wght" 500; color: var(--ink); }

/* ── footer ─────────────────────────────────────────────────── */

.foot {
  background: var(--field);
  color: var(--field-ink-2);
  border-top: 0;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5rem);
}
.foot__in { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; } }
.foot__mark { display: flex; align-items: center; gap: 0.85rem; }
.foot__mark img { width: 34px; }
.foot__mark span { font-size: 0.9375rem; color: var(--field-ink-2); line-height: 1.45; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.9rem 2rem; font-size: 0.9375rem; }
.foot__links a { color: var(--field-ink-2); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot__links a:hover { color: var(--field-ink); border-bottom-color: var(--field-link); }

/* ── small screens ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .nav__in { padding-block: 1.1rem 1rem; }
  .nav__links { gap: 1rem; font-size: 0.9375rem; }
  .statement, .hook { max-width: none; }
  .btn { width: 100%; text-align: center; }
  .terms { width: 100%; }
  .archive .time { display: none; }
  /* the delta is set nowrap so it never breaks across lines; on a phone it
     has to come down to fit the column instead */
  .readout .figure { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .weeks li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
  .qs li { grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem; }
}

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

/* Ghost editor (Koenig) card widths, required by themes */
.kg-width-wide { width: min(100vw - 2 * var(--gut), var(--page)); margin-inline: auto; position: relative; left: 50%; transform: translateX(-50%); }
.kg-width-full { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.kg-width-full img, .kg-width-wide img { width: 100%; }