/* ─────────────────────────────────────────────────────────────────────────
   Verboom newsletter — shared interior styles
   Loaded AFTER ds/styles.css and assets/site.css. Extends the frozen
   homepage vocabulary (.masthead, .wordmark, .btn, .btn-split, .btn-ghost,
   .seclabel, .shell, .pagefoot) rather than restating it.

   Every colour and every type size resolves to a design-system token.
   Literals appear only for sub-24px gaps and geometry, exactly as
   site.css already does.

   FROZEN. Route agents add page-scoped <style> blocks; they do not edit
   this file or site.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Page scaffolding ───────────────────────────────────────────────────── */

/* Anchors must clear the sticky 80px masthead. Interior pages are the only
   ones with in-page jumps (#lenses, #issue, clause links in the notice). */
[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-stack-sm)); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The interior page body. Paper ground, first section clears the masthead. */
.ipage { padding-top: var(--space-stack-md); }

/* Rhythm between distinct subjects, matching the homepage's 120px tier. */
.isection { margin-top: var(--space-stack-lg); }
.isection--near { margin-top: var(--space-stack-md); }

/* Section intro: label, headline, one line of copy. */
.isection__intro { display: flex; flex-direction: column; gap: var(--space-stack-sm); }
.isection__intro .headline { max-width: 20ch; }
.isection__intro p { margin: 0; max-width: 56ch; color: var(--text-variant); }

/* Terra tone for the one eyebrow that opens a report or a legal notice. */
.seclabel--terra { color: var(--color-secondary); }

/* ── Masthead: interior state ───────────────────────────────────────────── */

/* Active nav item — Terra text plus the 2px Terra underline held open.
   site.css already draws the underline as a scaleX(0) pseudo-element and
   transitions it; the active state simply pins it at full width. */
.masthead__links a[aria-current="page"] { color: var(--color-secondary); }
.masthead__links a[aria-current="page"]::after { transform: scaleX(1); }

/* The disclosure summary can also be the current branch of the tree. */
.masthead__links .inside[data-current] > summary { color: var(--color-secondary); }
.inside__panel a[aria-current="page"] { color: var(--color-secondary); }

/* Breadcrumb trail above a report or notice title. Label-caps, last entry
   Terra and marked aria-current. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-stack-sm);
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
}
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--border-outline);
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--color-secondary); }
.crumbs [aria-current="page"] { color: var(--color-secondary); }

/* ── Interior hero: Paper, left-aligned ─────────────────────────────────── */

/* Left-aligned by default so an interior page does not open with the same
   centred silhouette the homepage already used. `--center` exists for the
   one-statement pages (thanks/), where a centred opening is the point. */
.ihero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-sm);
  padding: var(--space-stack-md) 0 var(--space-stack-lg);
}
.ihero .display { max-width: 14ch; }
.ihero__intro {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-serif);
  font-size: var(--type-serif-body-size);
  line-height: var(--type-serif-body-line);
  color: var(--text-variant);
  text-wrap: pretty;
}
.ihero__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-line);
  color: var(--text-muted);
}
.ihero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-stack-sm);
  margin-top: 8px;
}
.ihero--center {
  align-items: center;
  text-align: center;
}
.ihero--center .display,
.ihero--center .ihero__intro { margin-inline: auto; }
.ihero--center .ihero__actions { justify-content: center; }

/* Display steps for pages whose statement is not the page's largest claim. */
.display--md {
  font-size: clamp(var(--type-display-hero-mobile-size), 7vw, var(--type-display-md-size));
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-track);
}
.display--sm {
  font-size: clamp(var(--type-headline-lg-size), 6vw, var(--type-display-sm-size));
  line-height: var(--type-display-sm-line);
  letter-spacing: var(--type-display-sm-track);
}

/* ── Lens tab-nav ───────────────────────────────────────────────────────── */

/* A row of LINKS to sibling routes. Not a tablist: nothing switches on the
   page, so ARIA tab semantics would promise a control that does not exist.
   Mark the current route with aria-current="page" only.
   Bounded top and bottom by 2px ink; the row itself may scroll sideways on a
   narrow screen — the document never does. */
.lenstabs {
  display: flex;
  gap: var(--space-gutter);
  margin: 0;
  padding: 0;
  border-top: var(--border-structural);
  border-bottom: var(--border-structural);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.lenstabs a {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-stack-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--text-variant);
  white-space: nowrap;
  transition: color var(--dur-base);
}
.lenstabs a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms var(--ease-editorial);
}
.lenstabs a:hover { color: var(--color-secondary); }
.lenstabs a:hover::after { transform: scaleX(1); }
.lenstabs a[aria-current="page"] { color: var(--color-secondary); }
.lenstabs a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Lens page: theme list beside the signup aside ──────────────────────── */

.lenscol {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-gutter);
  align-items: start;
  margin-top: var(--space-stack-md);
}
.lenscol > * { min-width: 0; }

/* Theme list — the hairline-divider row idiom, with a mono index. */
.themes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-structural);
  border-bottom: var(--border-structural);
}
.theme {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-stack-sm);
  padding: var(--space-stack-sm) 0;
  border-top: var(--border-hairline);
}
.theme:first-child { border-top: none; }
.theme__index {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-muted);
}
.theme__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-headline-xs-size);
  font-weight: 400;
  line-height: var(--type-headline-xs-line);
  color: var(--text-primary);
}
.theme__note {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-variant);
}

/* Aside signup card — Stone, one step above Paper, one texture, 2px ink,
   40px editorial corners. Never Forest: the page's single Forest ground is
   reserved for the closing band or the footer. */
.aside-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  align-items: flex-start;
  padding: var(--space-gutter);
  border: var(--border-structural);
  border-radius: var(--radius-editorial);
  background-color: var(--surface-container-low);
  background-image: var(--texture-hairline);
}
.aside-card__body {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: var(--type-serif-body-size);
  line-height: var(--type-serif-body-line);
  color: var(--text-primary);
  text-wrap: pretty;
}
.aside-card__note {
  margin: 0;
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-line);
  color: var(--text-muted);
}

/* ── Skill rows ─────────────────────────────────────────────────────────── */

/* Category label + skill name in the left column, description in the right.
   Hairline dividers between rows; 2px ink closes the list top and bottom. */
.skills {
  list-style: none;
  margin: var(--space-stack-md) 0 0;
  padding: 0;
  border-top: var(--border-structural);
  border-bottom: var(--border-structural);
}
.skill {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-gutter);
  padding: var(--space-stack-sm) 0;
  border-top: var(--border-hairline);
}
.skill:first-child { border-top: none; }
.skill__kind {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--text-muted);
}
.skill__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-headline-xs-size);
  font-weight: 400;
  line-height: var(--type-headline-xs-line);
  color: var(--text-primary);
}
.skill__body {
  margin: 0;
  max-width: 62ch;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-variant);
  text-wrap: pretty;
}

/* ── Long-form reading column ───────────────────────────────────────────── */

/* 3fr rail / 9fr column, the report template's proportion. The rail is the
   sticky contents list; the column is serif reading body capped at a
   comfortable measure. */
.reading {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: var(--space-gutter);
  align-items: start;
  margin-top: var(--space-stack-md);
}
.reading > * { min-width: 0; }

.reading__rail {
  position: sticky;
  top: calc(var(--nav-height) + 32px);
  align-self: start;
  max-height: calc(100vh - var(--nav-height) - var(--space-stack-md));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.contents { margin: 0; }
.contents__title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: var(--border-hairline);
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--text-primary);
}
.contents ol,
.contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: contents;
}
.contents li { margin: 0; }
.contents a {
  display: block;
  padding: 8px 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-variant);
  transition: color var(--dur-fast);
}
.contents a:hover { color: var(--color-secondary); }
.contents a[aria-current="true"],
.contents a[aria-current="location"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* The reading column itself. */
.reading__body {
  max-width: 68ch;
  font-family: var(--font-serif);
  font-size: var(--type-serif-body-size);
  line-height: var(--type-serif-body-line);
  color: var(--text-primary);
  letter-spacing: normal;
}
.reading__body > * { min-width: 0; }
.reading__body p {
  margin: 0 0 var(--space-stack-sm);
  overflow-wrap: break-word;
}
.reading__body p:last-child { margin-bottom: 0; }

.reading__body h2 {
  margin: var(--space-stack-md) 0 var(--space-stack-sm);
  padding-top: var(--space-stack-sm);
  border-top: var(--border-structural);
  font-family: var(--font-serif);
  font-size: var(--type-headline-md-size);
  font-weight: 400;
  line-height: var(--type-headline-md-line);
  letter-spacing: normal;
  text-wrap: balance;
}
.reading__body h2:first-child { margin-top: 0; }
.reading__body h3 {
  margin: var(--space-gutter) 0 12px;
  font-family: var(--font-serif);
  font-size: var(--type-headline-xs-size);
  font-weight: 400;
  line-height: var(--type-headline-xs-line);
}

.reading__body ul,
.reading__body ol {
  margin: 0 0 var(--space-stack-sm);
  padding-left: var(--space-stack-sm);
}
.reading__body li { margin: 0 0 8px; }
.reading__body li:last-child { margin-bottom: 0; }

/* Links inside reading copy: ink text on a hairline baseline, moving to
   Terra. The base stylesheet's Forest link colour is too quiet in a serif
   measure and too close to the ink around it. */
.reading__body a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-outline);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.reading__body a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* A short functional aside inside the reading column stays in Inter. */
.reading__aside {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  letter-spacing: var(--type-body-track);
  color: var(--text-variant);
}

/* Retention / sub-processor tables. Wrap every table in .tablewrap so a wide
   table scrolls inside its own box and never the document. */
.tablewrap { overflow-x: auto; margin: 0 0 var(--space-stack-sm); }
.reading__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  letter-spacing: var(--type-body-track);
  color: var(--text-variant);
}
.reading__table th,
.reading__table td {
  padding: 14px 16px 14px 0;
  border-top: var(--border-hairline);
  text-align: left;
  vertical-align: top;
}
.reading__table thead th {
  border-top: none;
  border-bottom: var(--border-structural);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* An inline control inside running copy — "Analytics settings" in the
   notice. A real button that reads as a link. */
.inline-button {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border-outline);
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.inline-button:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* ── Closing CTA band ───────────────────────────────────────────────────── */

/* Two variants, identical markup:
     .ctaband--forest — the page's one Forest ground, full-bleed, 40px top
                        corners, 2px ink top rule, dot texture. Pair with
                        .pagefoot--stone.
     .ctaband--paper  — Stone inside a 2px ink frame with the hairline
                        texture, exactly as the homepage closing action.
                        Pair with .pagefoot--forest.
   Never both on one page: the footer counts as a ground. */
.ctaband { margin-top: var(--space-stack-lg); }
.ctaband__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-stack-sm);
}
.ctaband__inner .headline { max-width: 18ch; }
.ctaband__inner p { margin: 0; max-width: 46ch; }

.ctaband--paper .ctaband__inner {
  padding: var(--space-stack-md);
  border: var(--border-structural);
  border-radius: var(--radius-editorial);
  background-color: var(--surface-container-low);
  background-image: var(--texture-hairline);
}
.ctaband--paper .ctaband__inner p { color: var(--text-variant); }

.ctaband--forest {
  background-color: var(--surface-forest);
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
  border-top: var(--border-structural);
  border-radius: var(--radius-editorial) var(--radius-editorial) 0 0;
  padding: var(--space-stack-lg) 0;
  color: var(--on-forest);
  overflow: hidden;
}
.ctaband--forest .ctaband__inner p { color: var(--on-forest-muted); }
.ctaband--forest .seclabel { color: var(--on-forest); }

/* On Forest the split button drops its paper body: the label sits on the
   ground and only the glyph carries terracotta. Same treatment the homepage
   signup card uses. */
.ctaband--forest .btn-split {
  background: transparent;
  border-color: var(--on-forest);
}
.ctaband--forest .btn-split__label { color: var(--on-forest); }
.ctaband--forest .btn-split__glyph { border-left-color: var(--on-forest); }
.ctaband--forest .btn-ghost {
  color: var(--on-forest);
  border-bottom-color: var(--on-forest);
}
/* Terracotta itself is only 2.43:1 on Forest — under the 3:1 floor. Terra
   Pale is the Terra-family value that clears it (9.4:1), so interaction
   still moves toward the accent without dropping under contrast. */
.ctaband--forest .btn-ghost:hover {
  color: var(--terra-pale);
  border-bottom-color: var(--terra-pale);
}

/* A closing band is usually the last thing in <main>, so the footer is not its
   sibling and no combinator can reach it. When a Forest band closes the page,
   put `pagefoot--tight` on the footer so the two grounds stack directly
   instead of leaving a 120px band of Paper between them. */
.pagefoot--tight { margin-top: 0; }

/* ── Footer tones ───────────────────────────────────────────────────────── */

/* site.css already gives .pagefoot its 2px ink top rule, 120px top margin and
   64px padding. The tones add the ground and the 40px top corners that make
   the page read as a stack of printed sheets. */
.pagefoot--forest,
.pagefoot--stone {
  border-radius: var(--radius-editorial) var(--radius-editorial) 0 0;
  padding: var(--space-stack-md) 0;
}
.pagefoot--forest {
  background-color: var(--surface-forest);
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
  color: var(--on-forest);
}
.pagefoot--stone {
  background-color: var(--surface-container);
}

/* Brand column: wordmark over a tagline. */
.pagefoot__brand { display: flex; flex-direction: column; gap: 8px; }
.pagefoot__tagline {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-muted);
}
.pagefoot__links--column { flex-direction: column; gap: 12px; }

.pagefoot--forest .wordmark { color: var(--on-forest); }
.pagefoot--forest .wordmark i { color: var(--terra-pale); }
.pagefoot--forest .pagefoot__tagline { color: var(--on-forest-muted); }
.pagefoot--forest .pagefoot__links a,
.pagefoot--forest .pagefoot__links button { color: var(--on-forest-muted); }
.pagefoot--forest .pagefoot__links a:hover,
.pagefoot--forest .pagefoot__links button:hover { color: var(--terra-pale); }

/* ── Focus rings on a Forest ground ─────────────────────────────────────── */

/* site.css sets a Terra ring globally through :where(), which contributes no
   specificity — these compound selectors win, and they are later in the
   cascade regardless. Terracotta on Forest is 2.43:1; paper is 8.9:1. */
.ctaband--forest :where(a, button, input, summary):focus-visible,
.pagefoot--forest :where(a, button, input, summary):focus-visible {
  outline-color: var(--on-forest);
}

/* ── [hidden] guards ────────────────────────────────────────────────────── */

/* Every class above that sets `display` beats the user-agent [hidden] rule.
   Without these, hiding an element in markup or from script leaves it on the
   page. Page-scoped styles must add the same guard for anything new. */
.ihero[hidden],
.ihero__actions[hidden],
.crumbs[hidden],
.crumbs li[hidden],
.isection__intro[hidden],
.lenstabs[hidden],
.lenstabs a[hidden],
.lenscol[hidden],
.themes[hidden],
.theme[hidden],
.aside-card[hidden],
.skills[hidden],
.skill[hidden],
.skill__kind[hidden],
.reading[hidden],
.reading__rail[hidden],
.contents a[hidden],
.tablewrap[hidden],
.ctaband[hidden],
.ctaband__inner[hidden],
.pagefoot__brand[hidden],
.pagefoot__links--column[hidden] { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* 1000px — the width at which site.css already collapses the masthead links
   and the homepage bentos. Interior two-column modules follow it. */
@media (max-width: 1000px) {
  .lenscol { grid-template-columns: 1fr; }
  .skill { grid-template-columns: 1fr; gap: 12px; }
  .skill__body { max-width: none; }
}

/* 900px — the shell steps to calc(100% - 48px). The reading rail stops being
   sticky and becomes an index above the column: a sticky rail in a single
   column would pin a block of links over the text. */
@media (max-width: 900px) {
  .reading { grid-template-columns: 1fr; gap: var(--space-stack-sm); }
  .reading__rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-stack-sm);
    border-bottom: var(--border-structural);
  }
  .reading__body { max-width: none; }
  /* The rail now closes with its own 2px rule, so the first heading's opening
     rule would draw a second one 24px below it. */
  .reading__body > h2:first-child { border-top: none; padding-top: 0; }
}

/* 760px — the homepage's mobile tier: the 120px rhythm compresses to 72px. */
@media (max-width: 760px) {
  .ipage { padding-top: var(--space-stack-sm); }
  .isection,
  .ctaband { margin-top: 72px; }
  .ihero { padding: var(--space-stack-sm) 0 var(--space-stack-md); }
  .ihero .display { max-width: none; }
  .ihero__actions { gap: 16px; }
  .lenstabs { gap: var(--space-stack-sm); }
  .lenstabs a { padding: 20px 0; }
  .aside-card { padding: var(--space-stack-sm); }
  .ctaband--paper .ctaband__inner { padding: var(--space-stack-sm); }
  .ctaband--forest { padding: var(--space-stack-md) 0; }
  .pagefoot--forest,
  .pagefoot--stone { padding: var(--space-stack-sm) 0 var(--space-stack-md); }
  .reading__body h2 { margin-top: var(--space-gutter); font-size: var(--type-headline-sm-size); }

  /* Tables stop being tables: each row becomes a labelled block, so nothing
     needs to scroll sideways to be read. The column heading travels with the
     cell through `data-label`, which every <td> must carry — without it the
     stacked cells lose the only thing that says what they are. */
  .reading__table,
  .reading__table tbody,
  .reading__table tr,
  .reading__table th,
  .reading__table td { display: block; }
  .reading__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .reading__table tr { padding: 16px 0; border-top: var(--border-hairline); }
  .reading__table tr:first-child { border-top: none; }
  .reading__table td { padding: 0 0 16px; border-top: none; }
  .reading__table td:last-child { padding-bottom: 0; }
  .reading__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line);
    letter-spacing: var(--type-label-track);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .reading__table td:not([data-label])::before { content: none; }
}

/* 480px — the shell steps to calc(100% - 32px); the 320px floor sits inside
   it. Nothing below this point may introduce a horizontal scrollbar on the
   document, so long strings wrap rather than push. */
@media (max-width: 480px) {
  .ihero__intro,
  .aside-card__body { font-size: var(--type-body-size); line-height: var(--type-body-line); }
  .reading__body { font-size: var(--type-body-size); line-height: var(--type-body-line); font-family: var(--font-serif); }
  .theme { grid-template-columns: 1fr; gap: 8px; }
  .theme__note { grid-column: 1; }
  .ihero__actions .btn,
  .ihero__actions .btn-split { max-width: 100%; }
  .ihero__intro,
  .skill__body,
  .reading__body,
  .aside-card__body { overflow-wrap: break-word; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* base.css already stops every animation globally. Transitions are not
   animations, so the ones this sheet introduces are stopped here too. */
@media (prefers-reduced-motion: reduce) {
  .lenstabs a,
  .lenstabs a::after,
  .contents a,
  .reading__body a,
  .inline-button,
  .crumbs a { transition: none; }
}