/*
  colinscotland.com site styles, brand v2.0 (November 2026)

  Loads after css/tokens.css, which is the brand's token file kept verbatim.
  Every color, size and space here comes from a token. Class names are BEM.

  1. Reset            6. Navigation        11. Sections
  2. Base             7. Footer            12. Hero
  3. Layout           8. Forms and signup  13. Homepage parts
  4. Type roles       9. Lists             14. Book island
  5. Links, buttons  10. Quote             15. Banner and cookie bar
                                           16. Motion and utilities
*/

/* ---------- Fallback metrics so the web font swap doesn't move the page ---------- */
@font-face {
  font-family: 'Piazzolla Fallback';
  src: local('Georgia');
  size-adjust: 97%;
  ascent-override: 114.4%;
  descent-override: 32%;
  line-gap-override: 0%;
}
/* Bold and italic run narrower than Georgia by a different amount, so each gets its own face.
   Without these, an essay that opens with a lot of bold reflows when Piazzolla arrives.
   size-adjust also scales the overrides, so each ascent and descent is Piazzolla's own
   (111% and 31% of the font size, measured in Chrome) divided by that face's size-adjust.
   That keeps every line the same height and the baseline in the same place. */
@font-face {
  font-family: 'Piazzolla Fallback';
  font-weight: 600 700;
  src: local('Georgia Bold'), local('Georgia-Bold');
  size-adjust: 85%;
  ascent-override: 130.6%;
  descent-override: 36.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Piazzolla Fallback';
  font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 91%;
  ascent-override: 122%;
  descent-override: 34.1%;
  line-gap-override: 0%;
}

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- 2. Base ---------- */
:root { --font-serif: 'Piazzolla', 'Piazzolla Fallback', Georgia, 'Times New Roman', serif; }
body { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-weight: 400; }
strong, b { font-weight: 600; }
:target { scroll-margin-top: var(--space-6); }

/* ---------- 3. Layout ---------- */
.container {
  width: min(100% - 2 * var(--page-margin), var(--page-max));
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.measure { max-width: var(--measure); }

/* ---------- 4. Type roles ---------- */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-8);
  line-height: 0.95;
  letter-spacing: -0.022em;
}
.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-7);
  line-height: 1;
  letter-spacing: -0.018em;
}
.heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-6);
  line-height: 1.06;
  letter-spacing: -0.014em;
  max-width: 15em;
}
.subhead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1.2;
  letter-spacing: -0.006em;
}
.display em, .page-title em, .heading em { font-style: italic; }
.lede { font-size: var(--step-4); line-height: 1.58; color: var(--text-2); }
.label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.number {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-6);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.small { font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); }
.caption { font-family: var(--font-ui); font-size: var(--step-1); line-height: 1.45; color: var(--text-3); }
.prose > * + * { margin-top: var(--space-5); }
.prose { max-width: var(--measure); color: var(--text-2); }
.prose strong { color: var(--text); }

/* ---------- 5. Links and buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 15px 26px;
  border-radius: var(--radius);
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn--block { width: 100%; }

.link-strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.link-strong:hover { text-decoration-thickness: 2px; }

/* ---------- 6. Navigation ---------- */
.nav { position: relative; z-index: 20; background: var(--bg); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
}
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav__logo img { width: 118px; }
.nav__links { display: flex; align-items: center; gap: var(--space-6); }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--text-2);
  text-decoration: none;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nav__mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__mobile-toggle span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); }
.nav__mobile-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__mobile-toggle.active span:nth-child(2) { opacity: 0; }
.nav__mobile-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__inner { padding-block: var(--space-3); }
  .nav__logo img { width: 96px; }
  .nav__mobile-toggle { display: flex; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--page-margin) var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--rule-strong);
  }
  .nav__links.active { display: flex; }
  .nav__links li { border-top: 1px solid var(--rule); }
  .nav__links a { display: flex; min-height: 52px; font-size: var(--step-3); color: var(--text); }
}

/* ---------- 7. Footer ---------- */
.footer { margin-top: var(--space-10); padding-bottom: var(--space-8); }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-strong);
}
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__logo img { width: 118px; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
.footer__links a, .footer .cookie-settings {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--text-2);
  text-decoration: none;
}
.footer__links a:hover, .footer .cookie-settings:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.footer__social { display: flex; align-items: center; gap: var(--space-1); margin-right: -12px; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-2); }
.footer__social a:hover { color: var(--text); }
.footer__legal { margin-top: var(--space-5); }
.footer__copyright, .footer__colophon { font-family: var(--font-ui); font-size: var(--step-1); line-height: 1.5; color: var(--text-3); max-width: 60rem; }
.footer__colophon { margin-top: var(--space-2); }
body:has(.build-banner--visible) .footer { padding-bottom: calc(var(--space-8) + 96px); }

@media (max-width: 860px) {
  .footer { margin-top: var(--space-8); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .footer__links li { border-top: 1px solid var(--rule); }
  .footer__links li:last-child { border-bottom: 1px solid var(--rule); }
  .footer__links a, .footer .cookie-settings { display: flex; width: 100%; min-height: 48px; }
  .footer__social { margin-left: -12px; }
  body:has(.build-banner--visible) .footer { padding-bottom: calc(var(--space-8) + 160px); }
}

/* ---------- 8. Forms and signup ---------- */
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field__label { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-2); line-height: 1.2; color: var(--text); }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--text);
  appearance: none;
}
.field__input::placeholder { color: var(--text-3); opacity: 1; }
textarea.field__input { min-height: 140px; resize: vertical; }
.field__help { font-family: var(--font-ui); font-size: var(--step-1); line-height: 1.45; color: var(--text-3); }

.signup__form { display: grid; gap: var(--space-4); }
.signup__fields { display: grid; gap: var(--space-4); }
.signup__note { font-family: var(--font-ui); font-size: var(--step-1); line-height: 1.45; color: var(--text-3); }
.signup__note a { color: inherit; }
.signup__success { display: grid; gap: var(--space-2); }
.signup__success-title { font-family: var(--font-serif); font-size: var(--step-5); line-height: 1.2; color: var(--text); }
.signup__success-text { font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); }
/* One row on wide screens: name, email, button on one baseline */
.signup--row .signup__fields { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; align-items: end; }
.signup--row .btn { min-height: 52px; }
@media (max-width: 720px) {
  .signup--row .signup__fields { grid-template-columns: 1fr; }
  .signup--row .btn { width: 100%; }
}

/* ---------- 9. Lists ---------- */
/* Reading list: date, title, reading time on one baseline. The whole row is the link. */
.reading-list { border-top: 1px solid var(--rule-strong); }
.reading-list__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 4rem;
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
}
.reading-list__date, .reading-list__time {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reading-list__time { text-align: right; }
.reading-list__title { font-family: var(--font-serif); font-size: var(--step-4); line-height: 1.3; text-wrap: balance; }
.reading-list__row:hover .reading-list__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.reading-list--compact .reading-list__row { grid-template-columns: 4rem minmax(0, 1fr); }
.reading-list--compact .reading-list__time { display: none; }
@media (max-width: 600px) {
  .reading-list__row { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
  .reading-list__date { grid-column: 1; grid-row: 1; }
  .reading-list__time { grid-column: 2; grid-row: 1; }
  .reading-list__title { grid-column: 1 / -1; grid-row: 2; }
  .reading-list--compact .reading-list__row { grid-template-columns: 1fr; }
}

/* Ruled rows: a label, a title, a line of text and one link per row. Replaces cards in rows of three. */
.rows { border-top: 1px solid var(--rule-strong); }
.rows__row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
}
.rows__title { grid-column: 1 / span 3; font-family: var(--font-serif); font-size: var(--step-5); line-height: 1.2; letter-spacing: -0.006em; }
.rows__title .label { margin-bottom: var(--space-3); }
.rows__text { grid-column: 4 / span 4; color: var(--text-2); }
.rows__link { grid-column: 8 / span 3; justify-self: end; white-space: nowrap; }
a.rows__row:hover .rows__link { text-decoration-thickness: 2px; }
@media (max-width: 860px) {
  .rows__row { grid-template-columns: 1fr; padding-block: var(--space-5); }
  .rows__title, .rows__text, .rows__link { grid-column: 1; }
  .rows__link { justify-self: start; }
}

/* Dated rows: a period at left, text at right. Used for the timeline. */
.dated { border-top: 1px solid var(--rule-strong); }
.dated__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  column-gap: var(--grid-gap);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.dated__when { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.3; font-variant-numeric: tabular-nums; }
.dated__text { color: var(--text-2); max-width: var(--measure); }
@media (max-width: 600px) {
  .dated__row { grid-template-columns: 1fr; row-gap: var(--space-2); }
}

/* Numbered rows: 01, 02, 03 with a short line. */
.numbered { border-top: 1px solid var(--rule-strong); }
.numbered__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.numbered__n { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); letter-spacing: 0.14em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.numbered__text { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.3; }

/* Statistics set as type. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-6); border-top: 1px solid var(--rule-strong); padding-top: var(--space-5); }
.stat { display: grid; gap: var(--space-3); align-content: start; }
.stat__label { font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); max-width: 16rem; text-wrap: balance; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 10. Quote ---------- */
.quote { max-width: var(--measure); border-top: 1px solid var(--rule-strong); padding-top: var(--space-5); }
.quote__text { text-indent: -0.42em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--step-5); line-height: 1.25; letter-spacing: -0.006em; text-wrap: balance; }
.quote__source { margin-top: var(--space-4); }
/* Client quotes, set as a ruled list. Where it was said sits in the left column,
   the words sit large beside it, the way the page's other lists run. */
.quotes__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-4); align-items: baseline; padding-block: var(--space-7); border-bottom: 1px solid var(--rule); }
.quotes__row:first-child { padding-top: var(--space-2); }
.quotes__row:last-child { border-bottom: 0; padding-bottom: 0; }
.quotes__source { grid-column: 1 / span 3; line-height: 1.7; }
.quotes__when { display: block; }
.quotes__text { grid-column: 4 / span 7; max-width: 27em; text-indent: -0.42em; font-family: var(--font-serif); font-style: italic; font-size: var(--step-5); line-height: 1.32; letter-spacing: -0.006em; color: var(--text); text-wrap: pretty; }
.quotes__caps { font-variant-caps: all-small-caps; letter-spacing: 0.03em; }
@media (max-width: 860px) {
  .quotes__row { grid-template-columns: 1fr; padding-block: var(--space-6); }
  .quotes__row:first-child { padding-top: 0; }
  .quotes__source, .quotes__text { grid-column: 1; }
  .quotes__source { order: 2; }
  .quotes__when { display: inline; }
  .quotes__when::before { content: "\00B7\00A0"; }
}

/* ---------- 11. Sections ---------- */
/* A section opens with one ink rule. Its label sits in the left column, its content beside it. */
.section { padding-top: var(--space-10); }
.section__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-strong);
}
.section__label { grid-column: 1 / span 2; }
.section__main { grid-column: 3 / span 6; min-width: 0; }
.section__aside { grid-column: 10 / span 3; min-width: 0; align-self: start; }
.section__wide { grid-column: 3 / span 10; min-width: 0; }
.section__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.section__more { margin-top: var(--space-5); }
@media (max-width: 1100px) {
  .section__main { grid-column: 3 / span 10; }
  .section__aside { grid-column: 3 / span 10; }
}
@media (max-width: 860px) {
  .section { padding-top: var(--space-8); }
  .section__inner { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .section__label, .section__main, .section__aside, .section__wide { grid-column: 1; }
}

/* The one dark section a page may carry. Tokens flip through .on-ink. */
.section--ink { margin-top: var(--space-10); padding-block: var(--space-10); }
.section--ink .section__inner { border-top-color: var(--rule-strong); }
main:has(> .section--ink:last-child) + .footer { margin-top: var(--space-6); }
main:has(> .section--ink:last-child) + .footer .footer__inner { border-top: 0; padding-top: 0; }
@media (max-width: 860px) { .section--ink { margin-top: var(--space-8); padding-block: var(--space-8); } }

/* ---------- 12. Hero ---------- */
/* A letterhead. One display statement beside one portrait, then one ink rule, then three columns
   under it: who he is, the Briefing signup, the latest writing. Each column runs label, then serif.
   On a phone the order is statement, lede, signup, writing, portrait. */
.hero { padding-top: var(--space-4); }
.hero__grid { align-items: end; }
.hero__head { grid-column: 1 / span 8; }
.hero__portrait { grid-column: 10 / span 3; }
.hero__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* The statement's last baseline sits on the portrait's bottom edge. */
.hero__statement { text-wrap: balance; margin-bottom: -0.075em; }
.hero__rule { grid-column: 1 / -1; margin-top: var(--space-6); border-top: 1px solid var(--rule-strong); }
.hero__about, .hero__briefing, .hero__latest { align-self: start; padding-top: var(--space-5); min-width: 0; }
.hero__about { grid-column: 1 / span 4; }
.hero__briefing { grid-column: 5 / span 4; }
.hero__latest { grid-column: 9 / span 4; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--grid-gap); }
.hero__label { margin-bottom: var(--space-3); }
.hero__label--head { display: none; }
.hero__lede { color: var(--text-2); max-width: 26rem; }
.hero__line { color: var(--text-2); }
.hero__proof { margin-top: var(--space-1); font-family: var(--font-sans); font-weight: 500; font-size: var(--step-2); line-height: 1.4; color: var(--text); font-variant-numeric: tabular-nums; }
.hero__actions { margin-top: var(--space-3); }
.hero__briefing .signup__form { margin-top: var(--space-4); }
.hero__briefing .signup__fields { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
.signup__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hero__latest > * { grid-column: 2; }
.hero__latest .reading-list { grid-column: 1 / -1; border-top: 0; }
.hero__latest .reading-list__row { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--grid-gap); padding-block: var(--space-4); }
/* First title shares a baseline with the lede and the Briefing line beside it. */
.hero__latest li:first-child .reading-list__row { padding-top: calc(var(--step-4) * 0.14); }
.hero__latest .reading-list__time { display: none; }
.hero__latest .latest__more { margin-top: var(--space-2); }

/* One entrance per page: the statement and the portrait rise 8px on first load. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero__statement, .hero__portrait { animation: rise var(--dur-3) var(--ease) both; }

@media (max-width: 1100px) {
  .hero__head { grid-column: 1 / span 9; }
  .hero__about { grid-column: 1 / span 5; }
  .hero__briefing { grid-column: 7 / span 6; }
  .hero__latest { grid-column: 1 / -1; margin-top: var(--space-6); border-top: 1px solid var(--rule-strong); }
}
@media (max-width: 860px) {
  .hero { padding-top: var(--space-2); }
  .hero__head, .hero__portrait, .hero__briefing, .hero__latest { grid-column: 1 / -1; }
  .hero__label--head { display: block; margin-bottom: var(--space-3); }
  .hero__label--cell { display: none; }
  .hero__statement { margin-bottom: 0; }
  .hero__rule { display: none; }
  .hero__about { display: contents; }
  .hero__lede { grid-column: 1 / -1; order: 2; margin-top: var(--space-3); max-width: none; }
  .hero__briefing { order: 3; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
  .hero__briefing .signup__form, .hero__briefing .signup__fields { gap: var(--space-3); }
  .hero__briefing .signup__form { margin-top: var(--space-3); }
  .hero__actions { grid-column: 1 / -1; order: 4; margin-top: var(--space-2); }
  .hero__latest { order: 5; display: block; margin-top: var(--space-6); border-top: 1px solid var(--rule-strong); }
  .hero__latest .reading-list__row { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .hero__portrait { order: 6; margin-top: var(--space-7); }
  .hero__briefing .signup__fields { grid-template-columns: 1fr; }
  .signup__go .btn { width: 100%; }
}

/* ---------- 13. Homepage parts ---------- */
.briefing__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-6); line-height: 1.06; letter-spacing: -0.014em; }
.briefing__text { margin-top: var(--space-4); color: var(--text-2); max-width: 34rem; }
.briefing__form { margin-top: var(--space-5); }
.latest__more { margin-top: var(--space-3); }
.coda { font-family: var(--font-serif); font-size: var(--step-5); line-height: 1.25; letter-spacing: -0.006em; color: var(--text); }
.aside-stat { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
.aside-stat .number { font-size: var(--step-7); }
.signoff { margin-top: var(--space-6); }
.signoff img { width: 160px; }


/* A sketch is shown as drawn: on its own ground, square corners, a caption under it. */
.sketch { margin-top: var(--space-6); }
.sketch img { width: 100%; }
.sketch .caption { margin-top: var(--space-3); }
.sketch + .section__prose { margin-top: var(--space-6); }

/* Section rhythm inside the homepage */
.section__prose { margin-top: var(--space-5); }
.section__main > .coda { margin-top: var(--space-6); }
.aside-list { margin-top: var(--space-3); }
.timeline { margin-top: var(--space-8); }
.quote__text + .quote__source { margin-top: var(--space-4); }

/* Closing signup, the page's one dark section */
.closing { row-gap: var(--space-6); align-items: start; }
.closing__copy { grid-column: 1 / span 6; display: grid; gap: var(--space-4); }
.closing__sub { max-width: 34rem; }
.closing__form { grid-column: 8 / span 5; }
.on-ink .field__input { background: transparent; }
@media (max-width: 860px) { .closing__copy, .closing__form { grid-column: 1 / -1; } }

/* ---------- 14. Book island ----------
   The Amplified Coach keeps its own look (ivory, ink, oxblood, Literata).
   It sits outside this brand's system on purpose. Values mirror theamplifiedcoach.ai. */
.book-promo { margin-top: var(--space-10); background: #F7F3EA; padding: 7rem 0; position: relative; overflow: hidden; }
.book-promo__inner { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(3rem, 6vw, 5.5rem); align-items: center; max-width: 920px; margin: 0 auto; }
.book-promo__object {
  display: flex; flex-direction: column; aspect-ratio: 5 / 7.3; padding: 2.5rem 1.75rem 2.25rem; text-align: center; text-decoration: none;
  background: linear-gradient(128deg, #8A2E3E 0%, #6E2230 48%, #551823 100%);
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 26px 60px -28px rgba(85, 24, 35, 0.55), inset -10px 0 18px -12px rgba(0, 0, 0, 0.55);
  position: relative;
}
.book-promo__object::before { content: ''; position: absolute; top: 0; bottom: 0; left: 13px; width: 1px; background: rgba(0, 0, 0, 0.3); }
.book-promo__series { font-family: 'Literata', Georgia, serif; font-size: var(--step-1); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 234, 219, 0.82); }
.book-promo__cover-title { font-family: 'Literata', Georgia, serif; font-size: var(--step-5); font-weight: 500; line-height: 1.18; letter-spacing: 0.01em; color: #C2A05A; margin: auto 0; }
.book-promo__cover-rule { display: block; width: 38px; height: 1px; margin: 0 auto 1.1rem; background: rgba(194, 160, 90, 0.55); }
.book-promo__cover-author { font-family: 'Literata', Georgia, serif; font-size: var(--step-1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #F4EADB; }
.book-promo__label { display: block; font-family: var(--font-sans); font-size: var(--step-1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #6E2230; margin-bottom: 1.25rem; }
.book-promo__heading { font-family: 'Literata', Georgia, serif; font-size: var(--step-6); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: #211E1A; margin-bottom: 1.5rem; }
.book-promo__body { font-family: 'Literata', Georgia, serif; font-size: var(--step-3); line-height: 1.7; color: #5C5447; max-width: 34em; margin-bottom: 1.4rem; }
.book-promo__cta { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; background: #6E2230; color: #F4EADB; font-family: 'Literata', Georgia, serif; font-size: var(--step-3); font-weight: 500; padding: 0.85rem 1.9rem; border-radius: 3px; text-decoration: none; margin-top: 0.5rem; transition: background-color var(--dur-1) var(--ease); }
.book-promo__cta:hover { background: #551823; }
.book-promo__note { font-family: 'Literata', Georgia, serif; font-size: var(--step-2); color: #6F685B; margin-top: 1.1rem; }
@media (max-width: 880px) {
  .book-promo { margin-top: var(--space-8); padding: 5rem 0; }
  .book-promo__inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .book-promo__object { width: min(232px, 64vw); margin: 0 auto; }
  .book-promo__body { margin-left: auto; margin-right: auto; }
}

/* ---------- 15. Banner and cookie bar ---------- */
/* Book announcement: fixed to the bottom, slides in after the first screen. js/main.js adds --visible.
   js/consent.js lifts the cookie bar above it, matching the 0.5s slide. */
.build-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #0d0d0d; border-top: 2px solid #6E2230; padding: 1rem 0;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.build-banner--visible { transform: translateY(0); }
.build-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.build-banner__content { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.build-banner__badge { border: 1px solid rgba(194, 160, 90, 0.55); color: #C2A05A; padding: 0.35rem 0.75rem; border-radius: 2px; font-family: var(--font-sans); font-size: var(--step-1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; }
.build-banner__text { color: #f2f2f2; font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.4; }
.build-banner__text strong { font-family: 'Literata', Georgia, serif; font-weight: 600; letter-spacing: 0.01em; }
.build-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.build-banner__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: #6E2230; color: #F4EADB; padding: 0 1.5rem; border-radius: 2px; text-decoration: none; font-family: var(--font-sans); font-weight: 500; font-size: var(--step-2); white-space: nowrap; transition: background-color var(--dur-1) var(--ease); }
.build-banner__cta:hover { background: #8A2E3E; }
.build-banner__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #a8a8a8; font-size: var(--step-5); line-height: 1; }
.build-banner__close:hover { color: #ffffff; }
.build-banner :focus-visible { outline-color: #f2f2f2; }
@media (max-width: 768px) {
  .build-banner { padding: 0.75rem 0; }
  .build-banner__inner { flex-direction: column; align-items: stretch; gap: 0.5rem; position: relative; }
  .build-banner__content { padding-right: 2.75rem; }
  .build-banner__badge { display: none; }
  .build-banner__cta { flex: 1; }
  .build-banner__close { position: absolute; top: -0.5rem; right: -0.5rem; }
}

/* Cookie bar. Markup is built by js/consent.js. Two choices of equal weight. */
.cookie-banner {
  --cookie-lift: 0px;
  position: fixed; left: 0; right: 0; bottom: var(--cookie-lift); z-index: 80;
  background: #0d0d0d; color: #f2f2f2;
  max-height: calc(100vh - var(--cookie-lift) - 4.5rem); overflow: auto;
  transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner--instant { transition: none; }
.cookie-banner:focus { outline: none; }
.cookie-banner__inner { width: min(100% - 2 * var(--page-margin), var(--page-max)); margin-inline: auto; padding-block: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.cookie-banner__copy { min-width: 0; font-family: var(--font-ui); font-size: var(--step-1); line-height: 1.45; color: #d4d4d4; }
.cookie-banner__title { display: inline; font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); color: #ffffff; margin-right: 0.5em; }
.cookie-banner__text { display: inline; }
.cookie-banner__text a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cookie-banner__choice { min-width: 6.75rem; min-height: 44px; padding: 0 1.15rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.7); background: transparent; color: #ffffff; font-family: var(--font-sans); font-weight: 500; font-size: var(--step-2); line-height: 1; }
.cookie-banner__choice:hover { background: #ffffff; color: #0d0d0d; }
.cookie-banner :focus-visible { outline: 2px solid #f2f2f2; outline-offset: 2px; }
@media (max-width: 720px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-block: 10px; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner__choice { min-width: 0; width: 100%; }
}

/* ---------- 17. Page head ---------- */
/* Opens a page that isn't the homepage: a label in the left column, the title and one lede beside it. */
.page-head { padding-top: var(--space-8); }
.page-head__label { grid-column: 1 / span 2; padding-top: 0.6em; }
.page-head__main { grid-column: 3 / span 8; min-width: 0; }
.page-head__sub { margin-top: var(--space-5); max-width: 34rem; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
@media (max-width: 860px) {
  .page-head { padding-top: var(--space-6); }
  .page-head__label, .page-head__main { grid-column: 1 / -1; }
  .page-head__label { padding-top: 0; margin-bottom: var(--space-4); }
}

/* ---------- 18. Essay ---------- */
/* Meta line as a label, the title, then the text on the 640px reading column.
   The right margin holds the author. The essay ends on the signature. */
.essay__header { padding-top: var(--space-8); }
.essay__back { grid-column: 1 / span 2; }
.essay__back-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-sans); font-size: var(--step-2); line-height: 1; color: var(--text-2); text-decoration: none; }
.essay__back-link:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.essay__head { grid-column: 3 / span 8; min-width: 0; }
.essay__meta { padding-top: 15px; }
.essay__title { margin-top: var(--space-5); }
.essay__figure { grid-column: 3 / span 8; margin-top: var(--space-7); }
.essay__figure img { width: 100%; }
.essay__layout { margin-top: var(--space-7); row-gap: var(--space-7); }
.essay__body { grid-column: 3 / span 6; min-width: 0; max-width: var(--measure); }
.essay__aside { grid-column: 10 / span 3; align-self: start; padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
.essay__author { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.essay__author-photo { width: 64px; height: 64px; object-fit: cover; }
.essay__author-name { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.3; }
.essay__author-role { margin-top: var(--space-1); font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); }
.essay__all { margin-top: var(--space-4); }

/* The text itself. Everything marked writes from a post's Markdown is styled here. */
.essay__body > * + * { margin-top: var(--space-5); }
.essay__body p, .essay__body li { text-wrap: pretty; }
.essay__body h2 { margin-top: var(--space-8); font-family: var(--font-sans); font-weight: 500; font-size: var(--step-5); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.essay__body h3 { margin-top: var(--space-7); font-family: var(--font-sans); font-weight: 500; font-size: var(--step-4); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.essay__body h4 { margin-top: var(--space-6); font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.3; }
.essay__body h2 + *, .essay__body h3 + *, .essay__body h4 + * { margin-top: var(--space-4); }
.essay__body ul, .essay__body ol { padding-left: 1.4em; }
.essay__body ul { list-style: disc; }
.essay__body ol { list-style: decimal; }
.essay__body li + li, .essay__body li > ul, .essay__body li > ol { margin-top: var(--space-2); }
.essay__body li::marker { color: var(--text-3); font-family: var(--font-sans); font-size: 0.85em; }
.essay__body blockquote { padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); font-style: italic; font-size: var(--step-5); line-height: 1.25; letter-spacing: -0.006em; }
.essay__body blockquote > * + * { margin-top: var(--space-4); }
.essay__body hr { height: 0; border: 0; border-top: 1px solid var(--rule); margin-block: var(--space-7); }
.essay__body img { width: auto; max-width: 100%; }
.essay__body code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--step-3); background: var(--bg-wash); padding: 0.1em 0.35em; border-radius: var(--radius); overflow-wrap: anywhere; }
.essay__body pre { background: var(--bg-wash); padding: var(--space-4) var(--space-5); border-radius: var(--radius); overflow-x: auto; font-size: var(--step-2); line-height: 1.6; }
.essay__body pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.essay__body table code, .essay__body h2 code, .essay__body h3 code, .content-note code { font-size: inherit; }
.essay__body table { display: block; max-width: 100%; overflow-x: auto; border-top: 1px solid var(--rule-strong); font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; }
.essay__body th, .essay__body td { padding: var(--space-3) var(--space-4) var(--space-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.essay__body th { font-family: var(--font-sans); font-weight: 500; color: var(--text); border-bottom-color: var(--rule-strong); white-space: nowrap; }
.essay__body td { color: var(--text-2); min-width: 9rem; }
.essay__body .video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--bg-wash); }
.essay__body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.essay__body .signoff { margin-top: var(--space-8); }
.essay__body .signoff img { width: 160px; }

/* A note the build adds under some essays (about the article, about a download). */
.content-note { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); background: var(--bg-wash); font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); }
.content-note > * + * { margin-top: var(--space-2); }

@media (max-width: 1100px) {
  .essay__body { grid-column: 3 / span 10; }
  .essay__aside { grid-column: 3 / span 10; max-width: var(--measure); }
}
@media (max-width: 860px) {
  .essay__header { padding-top: var(--space-5); }
  .essay__back, .essay__head, .essay__figure, .essay__body, .essay__aside { grid-column: 1 / -1; }
  .essay__meta { padding-top: var(--space-2); }
  .essay__figure, .essay__layout { margin-top: var(--space-6); }
  .essay__body h2 { margin-top: var(--space-7); }
}

/* ---------- 19. Blog index ---------- */
.reading-list__excerpt { display: block; margin-top: var(--space-1); font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); text-wrap: pretty; max-width: var(--measure-ui); }
.reading-list__row:hover .reading-list__excerpt { text-decoration: none; }
.reading-list--year .reading-list__row { grid-template-columns: 7.5rem minmax(0, 1fr) 4rem; }
.lead { display: block; color: var(--text); text-decoration: none; padding-bottom: var(--space-2); }
.lead__title { margin-top: var(--space-4); max-width: 18em; }
.lead:hover .lead__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.lead__excerpt { margin-top: var(--space-4); max-width: var(--measure); }
.archive__year { color: var(--text); }
.section__wide > .reading-list, .reading-list.section__wide { border-top: 0; }
.section__wide > .reading-list > li:first-child .reading-list__row, .reading-list.section__wide > li:first-child .reading-list__row { padding-top: 0; }
@media (max-width: 860px) {
  .section__wide > .reading-list > li:first-child .reading-list__row, .reading-list.section__wide > li:first-child .reading-list__row { padding-top: var(--space-2); }
}
@media (max-width: 600px) {
  .reading-list--year .reading-list__row { grid-template-columns: 1fr auto; }
}

/* Proof line beside a closing signup */
.closing__proof { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-2); line-height: 1.4; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 20. Selling pages ---------- */
.page-head--portrait .page-head__main { grid-column: 3 / span 6; }
.page-head__portrait { grid-column: 10 / span 3; }
.page-head__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.page-head__portrait { animation: rise var(--dur-3) var(--ease) both; }
.btn--ink { background: var(--text); color: var(--bg); }
.btn--ink:hover { background: var(--text-2); color: var(--bg); }
.rows__row--plain .rows__text { grid-column: 4 / span 6; }
.section__wide > .rows:first-child, .section__wide > .points:first-child { border-top: 0; }
.section__wide > .rows:first-child > .rows__row:first-child { padding-top: var(--space-2); }
.section__wide > .points:first-child > .points__row:first-child { padding-top: var(--space-1); }
.rows__n { margin-right: 0.75em; color: var(--text); font-variant-numeric: tabular-nums; }
.rows .btn.rows__link { align-self: start; }
.points { border-top: 1px solid var(--rule-strong); }
.points__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--grid-gap); align-items: baseline; padding-block: var(--space-5); border-bottom: 1px solid var(--rule); }
.points__n { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); letter-spacing: 0.14em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.points__text { max-width: var(--measure); color: var(--text-2); }
.points__text strong { color: var(--text); font-weight: 500; }
.form { display: grid; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-6); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form .btn { justify-self: start; margin-top: var(--space-2); }
.form__honeypot, .booking-form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form + .signup__success { margin-top: var(--space-6); }
.avatar { width: 96px; height: 96px; object-fit: cover; margin-bottom: var(--space-5); }
@media (max-width: 1100px) { .page-head--portrait .page-head__main { grid-column: 3 / span 7; } }
@media (max-width: 860px) {
  .page-head--portrait .page-head__main, .page-head__portrait, .rows__row--plain .rows__text { grid-column: 1 / -1; }
  .page-head__portrait { margin-top: var(--space-6); }
  .points__row { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3); }
}
@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
  .form .btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .page-head__portrait { animation: none; } }

/* ---------- 21. About ---------- */
.prose--letter { color: var(--text); }
.signoff img { width: 160px; }
.points--roman .points__n { font-size: var(--step-2); letter-spacing: 0.04em; color: var(--text); }
.points--roman .points__text { color: var(--text); }
.section__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); }
.dated__text a, .prose a, .points__text a { color: inherit; }

/* ---------- 22. Framework pages ---------- */
/* A formal framework figure is quoted from Amplify Intelligence in its light variant.
   It keeps its own figure header and mono labels. The caption under it is this brand's. */
.figure { margin: 0 0 var(--space-7); }
.figure svg { display: block; width: 100%; height: auto; }
.figure--framework .figure__wide { max-width: 54.5rem; }
.figure__narrow { display: none; }
.figure .caption { margin-top: var(--space-3); }
.figure .caption a { color: inherit; }
@media (max-width: 760px) {
  .figure__wide { display: none; }
  .figure__narrow { display: block; }
}
.aside-note { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--rule-strong); }
.section__after { margin-top: var(--space-6); }
.section__links--action { align-items: center; }
.quote__stress { font-style: normal; }

/* The Human Stack's two shapes, drawn as plain ink line diagrams. Shape, order and names are the framework's. */
.page-head__question { margin-top: var(--space-6); }
.page-head__sub--next { margin-top: var(--space-3); }
.pyramid { max-width: 37.5rem; }
.pyramid__layer, .funnel__layer {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; margin: 0 auto; padding: var(--space-3) var(--space-4);
  border: 1.25px solid var(--text); text-align: center; position: relative;
}
.pyramid__layer + .pyramid__layer, .funnel__layer + .funnel__layer { margin-top: -1.25px; }
.pyramid__layer--1 { width: 100%; }
.pyramid__layer--2 { width: 84%; }
.pyramid__layer--3 { width: 68%; }
.pyramid__layer--4 { width: 52%; }
.pyramid__layer--5 { width: 36%; }
.pyramid__label, .funnel__label { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.2; }
.funnel { max-width: 40rem; margin-right: 15rem; }
.funnel__pour { text-align: center; font-family: var(--font-sans); font-weight: 500; font-size: var(--step-3); line-height: 1.3; }
.funnel__pour span { color: var(--text-3); font-weight: 400; }
.funnel__arrows { text-align: center; color: var(--text-3); font-family: var(--font-sans); font-size: var(--step-3); letter-spacing: 3.5rem; padding-left: 3.5rem; margin: var(--space-1) 0 var(--space-3); }
.funnel__layer--5 { width: 100%; }
.funnel__layer--4 { width: 80%; }
.funnel__layer--3 { width: 60%; }
.funnel__layer--2 { width: 40%; }
.funnel__layer--1 { width: 26%; border-width: 2.5px; }
.funnel__pace { position: absolute; left: calc(100% + var(--space-4)); white-space: nowrap; font-family: var(--font-ui); font-size: var(--step-2); color: var(--text-3); }
.table-wrap { max-width: 54.5rem; margin-top: var(--space-6); overflow-x: auto; }
.table { width: 100%; border-top: 1px solid var(--rule-strong); font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; }
.table th, .table td { padding: var(--space-3) var(--space-5) var(--space-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table thead th { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--rule-strong); }
.table tbody th { font-family: var(--font-sans); font-weight: 500; color: var(--text); white-space: nowrap; }
.table td { color: var(--text-2); }
.aside-note--inline { max-width: var(--measure); margin-top: var(--space-7); }
.aside-note__title { color: var(--text); }
@media (max-width: 1100px) { .funnel { margin-right: 0; } .funnel__layer { flex-wrap: wrap; column-gap: var(--space-3); } .funnel__pace { position: static; white-space: normal; } }
@media (max-width: 860px) {
  .pyramid__layer--5 { width: 44%; } .pyramid__layer--4 { width: 58%; } .pyramid__layer--3 { width: 72%; } .pyramid__layer--2 { width: 86%; }
  .funnel__layer--4 { width: 88%; } .funnel__layer--3 { width: 76%; } .funnel__layer--2 { width: 64%; } .funnel__layer--1 { width: 52%; }
  .funnel__layer { flex-direction: column; row-gap: 2px; }
  .funnel__pace { font-size: var(--step-1); }
  .funnel__arrows { letter-spacing: 2rem; padding-left: 2rem; }
}

/* ---------- 23. Legal pages and 404 ---------- */
.page-head__updated { margin-top: var(--space-4); color: var(--text-3); }
.legal { margin-top: var(--space-8); }
.legal__body { grid-column: 3 / span 6; min-width: 0; max-width: var(--measure); }
.legal__body h2:first-child { margin-top: 0; }
.error { padding-bottom: var(--space-8); }
.error__code { color: var(--text); padding-top: 0.25em; }
.error__photo { margin-top: var(--space-7); margin-bottom: 0; }
@media (max-width: 1100px) { .legal__body { grid-column: 3 / span 10; } }
@media (max-width: 860px) { .legal { margin-top: var(--space-6); } .legal__body { grid-column: 1 / -1; } }

/* ---------- 16. Motion and utilities ---------- */
.skip-link { position: absolute; left: var(--page-margin); top: -100px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--text); color: var(--bg); font-family: var(--font-sans); font-size: var(--step-2); line-height: 1; text-decoration: none; }
.skip-link:focus { top: var(--space-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .hero__statement, .hero__portrait { animation: none; }
  .build-banner, .cookie-banner { transition: none; }
}