@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Tiempos Headline (Klim, licensed for newgeo.org) for serif headings: variable files, all weights. */
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos-headline.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos-headline-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

/* Tiempos Text (Klim, licensed for newgeo.org) for serif passages at reading size. */
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f7f3f1;
  --paper-deep: #efeae5;
  --white: #fbf9f6;
  --ink: #171716;
  --muted: #57544f;
  --rule: #b9b4ac;
  --rust: #b93022;
  --ochre: #e0ad1a;
  --highlighter: #f6e35a; /* the marker-pen highlight behind a word a passage turns on (Chris, 2026-09-23) */
  --navy: #14396b;
  /* Text and rules on an ink ground, as in the Uncertain by Design hero. */
  --on-ink-muted: rgba(247, 243, 241, 0.68);
  --on-ink-rule: rgba(247, 243, 241, 0.2);
  --serif: "Tiempos Headline", Georgia, serif;
  --serif-text: "Tiempos Text", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --text-large: 1.125rem;
  --reading-size: 1.125rem;
  --feature-text-size: 1.25rem;
  --feature-title-size: 1.5rem;
  --line-height-body: 1.6;
  /* Section headings (h2) breathe at 1.05: at 1.0 a three-line Tiempos heading's descenders touch the next line (Chris, 2026-09-22). */
  --heading-line-height: 1.05;
  --shell: 1380px;
  --gutter: 44px;
  /* Spacing scale. Components should prefer the semantic roles below. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --section-space: var(--space-9);
  --section-space-compact: var(--space-7);
  --reading-space: var(--space-10);
  --layout-gap: var(--space-8);
  --section-heading-gap: var(--space-7);
  --eyebrow-gap: var(--space-4);
  --heading-gap: var(--space-5);
  --heading-gap-small: var(--space-4);
  --paragraph-gap: var(--space-5);
  --subsection-space: var(--space-7);
  --reading-heading-space: var(--space-8);
  --card-space: var(--space-6);
  --action-gap: var(--space-6);
  /* Bounded motion follows the mobile's balance and settling, never the scroll position. */
  --motion-fast-ms: 180;
  --motion-reveal-ms: 900;
  --motion-reveal-delay-ms: 220;
  --motion-settle-ms: 1400;
  --motion-fast: calc(var(--motion-fast-ms) * 1ms);
  --motion-reveal: calc(var(--motion-reveal-ms) * 1ms);
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-swing: cubic-bezier(0.45, 0, 0.55, 1);
  --motion-rise: var(--space-5);
  --motion-nudge: 3px;
  --motion-press: 1px;
  --motion-pivot: -6deg;
  --motion-drift: 44s;
  --motion-plate-rust: 31s;
  --motion-plate-navy: 41s;
  --motion-book-tilt: -1.5deg;
  --surface-attention: color-mix(in srgb, var(--rust) 7%, transparent);
  --surface-sculpture: color-mix(in srgb, var(--ochre) 12%, var(--paper-deep));
  --surface-positioning: var(--paper-deep);
  --sculpture-backdrop-tilt: -12deg;
  --suspension-height: var(--space-6);
  --suspension-piece-size: var(--space-8);
  --suspension-piece-size-small: var(--space-7);
  --wire-width: 1px;
  --suspension-rule: var(--wire-width) solid var(--rule);
  --suspension-offset: calc(-1 * var(--space-5));
  --transition-attention: background-color var(--motion-fast) ease;
  --transition-balance: rotate var(--motion-reveal) var(--motion-ease);
  --transition-nudge: translate var(--motion-fast) var(--motion-ease);
  --transition-rule: scale var(--motion-reveal) var(--motion-ease);
  --radius-pivot: 50%;
  --balance-pivot-size: 6px;
  --balance-accent-length: var(--space-8);
  /* Shared action roles and interaction states. */
  --action-primary-hover: color-mix(in srgb, var(--rust) 78%, var(--ink));
  --action-focus-color: var(--navy);
  --action-focus-width: 2px;
  --action-focus-offset: var(--space-1);
  --action-line-width: 1px;
  --action-target-size: 44px;
  --action-disabled-opacity: 0.6;
  --action-icon-dark: brightness(0);
  --action-icon-light: brightness(0) invert(1);
  --action-icon-ochre: brightness(0) invert(76%) sepia(45%) saturate(600%) hue-rotate(5deg);
  --action-icon-navy: brightness(0) invert(16%) sepia(40%) saturate(1400%) hue-rotate(200deg) brightness(90%);
  --action-text-rule: var(--rust);
  --action-text-icon: var(--action-icon-dark);
  --action-transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
  --action-underline-transition: transform var(--motion-fast) var(--motion-ease);

}

@media (max-width: 980px) {
  :root {
    --layout-gap: var(--space-6);
  }
}

@media (max-width: 720px) {
  :root {
    --reading-size: 1.0625rem;
    --feature-text-size: 1.125rem;
    --feature-title-size: 1.3125rem;
    --section-space: var(--space-7);
    --section-space-compact: var(--space-6);
    --reading-space: var(--space-7);
    --layout-gap: var(--space-5);
    --section-heading-gap: var(--space-6);
    --eyebrow-gap: var(--space-3);
    --heading-gap: var(--space-4);
    --paragraph-gap: var(--space-4);
    --subsection-space: var(--space-6);
    --reading-heading-space: var(--space-7);
    --card-space: var(--space-5);
    --action-gap: var(--space-5);
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.shell {
  width: min(calc(100% - (var(--gutter) * 2)), var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 15px;
  background: var(--ink);
  color: white;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.eyebrow {
  margin: 0;
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.3;
}

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(23, 23, 22, 0.35);
}

.header-inner {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 86px;
  gap: 28px;
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.site-logo {
  display: block;
  width: 107px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 2vw, 34px);
  font-size: 1rem;
}

.desktop-nav a,
.footer-links a {
  transition: opacity 180ms ease;
}

.desktop-nav a:hover,
.footer-links a:hover {
  opacity: 0.58;
}

.header-cta {
  border-bottom: 1px solid var(--rust);
  padding: var(--space-1) 0;
  font-size: 1rem;
  font-weight: 500;
}

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.mobile-nav {
  position: fixed;
  inset: 78px 0 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--paper);
  padding: 26px var(--gutter) 42px;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 1.8rem;
}

.mobile-nav .mobile-nav-cta {
  margin-top: 18px;
  border: 1px solid var(--ink);
  padding: 15px 18px;
  font-family: var(--sans);
  font-size: 1rem;
  text-align: center;
}

.hero {
  position: relative;
  min-height: calc(100vh - 86px);
  min-height: calc(100svh - 86px);
  border-bottom: 1px solid var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(400px, 0.93fr) minmax(480px, 1.07fr);
  align-items: start;
  min-height: calc(100vh - 87px);
  min-height: calc(100svh - 87px);
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  gap: 18px;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
}

.hero h1 {
  max-width: 430px;
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: 5.25rem;
  font-weight: 400;
  line-height: 0.92;
}

.hero-underline {
  width: 180px;
  height: auto;
  margin: -8px 0 20px var(--space-3);
  object-fit: contain;
}

.heading-emphasis {
  background: url("/images/hero-underline.png") no-repeat left bottom / 100% 0.3em;
  padding-bottom: 0.2em;
  mix-blend-mode: multiply;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-intro {
  max-width: 430px;
  margin: 0;
  color: #33322f;
  font-size: 1.05rem;
  line-height: 1.65;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--action-gap);
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  padding: var(--space-3) 22px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button img,
.text-link img,
.newsletter button img {
  width: 16px;
  height: 16px;
}

.button-primary {
  background: var(--rust);
  color: white;
}

.button-primary img,
.button-dark img,
.button-light img,
.button-outline-light img {
  filter: brightness(0) invert(1);
}

.button-secondary {
  border-color: var(--ink);
}

.mobile-figure {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.mobile-stage {
  position: relative;
  width: 100%;
  height: min(660px, 70vh);
  min-height: 480px;
  overflow: visible;
}

.mobile-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

.scene-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mobile-figure figcaption {
  position: absolute;
  right: 1%;
  bottom: 5%;
  max-width: 215px;
  padding-top: 10px;
  border-top: 1px solid var(--rust);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.15;
}

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.scroll-cue span:last-child {
  color: var(--rust);
  font-size: 1.1rem;
}

.proof {
  padding: var(--section-space-compact) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  text-align: center;
}

.proof p {
  margin: 0 0 var(--space-5);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.proof-list {
  --proof-columns: 6;
  display: grid;
  grid-template-columns: repeat(var(--proof-columns), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  color: #2c2b29;
  list-style: none;
}

.proof-list-home {
  --proof-columns: 9;
}

.proof-item {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 70px;
  place-items: center;
  padding: 0;
  border: 0;
}

.proof-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  margin: auto;
  filter: grayscale(1) contrast(1.2);
}

.proof-item-badge img {
  max-height: 58px;
}

.proof-item-wide img {
  max-width: 100%;
}

.section {
  padding: var(--section-space) 0;
}

.section-heading h2,
.book-copy h2,
.final-cta h2,
.newsletter h2 {
  font-family: var(--serif);
  font-weight: 400;
}

.section-heading h2 {
  margin: var(--eyebrow-gap) 0 0;
  font-size: 4rem;
  line-height: 0.98;
}

.moments-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.6fr);
  align-items: end;
  margin-bottom: var(--section-heading-gap);
  gap: var(--heading-gap) var(--layout-gap);
}

.moments-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.moments-heading > p:last-child {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 1rem;
}

.moment-list {
  border-top: 1px solid var(--ink);
}

.moment-row {
  display: grid;
  grid-template-columns: 38px 115px minmax(200px, 0.72fr) minmax(300px, 1.1fr) 170px;
  min-height: 148px;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid var(--rule);
}

.moment-number,
.moment-situation > p,
.service-name,
.footer-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.moment-number {
  align-self: start;
  margin: 29px 0 0;
  color: var(--muted);
}

.moment-shape {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.moment-situation > p {
  margin: 0 0 9px;
  color: var(--rust);
}

.moment-situation h3 {
  max-width: 310px;
  margin: 0;
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.03;
}

.moment-service {
  border-left: 1px solid var(--rule);
  padding-left: 35px;
}

.moment-service p {
  max-width: 450px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.moment-service .service-name {
  margin-bottom: 9px;
  color: var(--ink);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  padding: 6px 0;
  font-size: 1rem;
  font-weight: 500;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--rust);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.text-link img {
  transition: transform 220ms ease;
}

/* Ways to work with Chris: the whole row is clickable (Chris, 28 Sep 2026: a hover that changes the row promises a
   click). The row's one link stretches over the row through a pseudo-element (the row is position: relative); the
   row keeps its own rust accent and background, so the link's underline goes. */
.moment-row .text-link {
  position: static;
}

.moment-row .text-link::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.moment-row .text-link::after {
  display: none;
}

.testimonial-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  padding: var(--section-space-compact) 0;
}

.testimonial-inner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 300px;
  align-items: center;
  gap: 28px;
}

.quote-mark {
  color: var(--rust);
  font-family: var(--serif);
  font-size: 6.5rem;
  line-height: 0.8;
}

.testimonial-inner blockquote {
  margin: 0;
}

.testimonial-inner blockquote > p {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-style: italic;
  line-height: 1.08;
}

.testimonial-inner footer {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: var(--space-3) 0 var(--space-3) 34px;
  border-left: 1px solid var(--rule);
  font-size: 1rem;
}

.testimonial-inner footer span {
  color: var(--muted);
}

.book-band {
  overflow: hidden;
  background: var(--paper-deep);
  padding: var(--section-space-compact) 0;
}

.book-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(330px, 0.82fr) minmax(260px, 0.62fr);
  align-items: center;
  gap: 60px;
}

.book-cover-wrap {
  position: relative;
  align-self: stretch;
  min-height: 300px;
}

.book-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  max-width: none;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 8px 9px 0 var(--ink);
}

.book-copy h2 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-size: 3.8rem;
  line-height: 0.95;
}

.book-copy h2:has(+ .book-credit) {
  margin-bottom: var(--space-3);
}

.book-copy > p:not(.eyebrow) {
  max-width: 500px;
  margin: 0 0 var(--paragraph-gap);
  color: var(--muted);
  font-size: 1rem;
}

.book-copy > p:last-of-type {
  margin-bottom: 0;
}

.book-copy > p.book-credit {
  margin: 0 0 var(--heading-gap);
  color: var(--ink);
  font-size: 1rem;
}

.book-copy > .text-link {
  margin-top: var(--space-5);
}

.button-dark {
  margin-top: 25px;
  background: var(--ink);
  color: white;
}

.book-quote {
  margin: 0;
  padding-left: 34px;
  border-left: 1px solid var(--rule);
}

.book-quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  line-height: 1.08;
}

.book-quote footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.book-quote-by {
  display: grid;
  gap: var(--space-1);
}

.book-quote-by small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: balance;
}

.book-quote-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}

.book-band-basecamp .book-quote-avatar {
  object-position: 77% 32%;
}

.book-band-age-of-discovery {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.speaking-appearances {
  padding: var(--section-space) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}

.speaking-appearances h2 {
  margin: var(--eyebrow-gap) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 5vw, 5.2rem);
  line-height: 0.94;
}

.speaking-appearances .proof-item {
  height: 76px;
}

.speaking-clients h2 {
  margin: 0;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: 1.05;
}

.speaking-clients-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--layout-gap);
  margin-top: var(--section-heading-gap);
  padding-top: var(--card-space);
  border-top: 1px solid var(--ink);
}

.speaking-clients-group h3 {
  margin: 0 0 var(--heading-gap-small);
  text-transform: uppercase;
}

.speaking-clients-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.speaking-clients-group li {
  padding: var(--space-1) 0;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .speaking-clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .speaking-clients-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.structured-section-ted {
  background: var(--paper-deep);
}

.structured-section-ted .structured-section-grid {
  align-items: center;
}

.structured-section-ted .structured-copy h2 {
  font-size: clamp(3.2rem, 5vw, 5.2rem);
}

.structured-section-ted .structured-media {
  align-self: center;
}

.field-notes {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  background: var(--white);
}

.notes-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  align-items: end;
  gap: var(--heading-gap) var(--layout-gap);
  margin-bottom: var(--section-heading-gap);
}

.notes-heading h2 {
  max-width: 850px;
  font-size: 4.3rem;
}

.notes-heading > p {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-size: 1rem;
}

.notes-all {
  margin-top: var(--space-6);
}

.featured-note {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--layout-gap);
  border-top: 1px solid var(--ink);
  padding-block: var(--card-space);
  margin-bottom: var(--space-5);
}

.featured-note-media {
  display: block;
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 4 / 3;
}

.featured-note-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-note-copy {
  min-width: 0;
}

.featured-note-copy > .content-card-meta {
  margin: 0;
}

.featured-note h3 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.04;
  text-wrap: balance;
}

.featured-note-summary {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
}

.featured-note-byline {
  margin: var(--space-5) 0;
  color: var(--muted);
}

@media (max-width: 720px) {
  .featured-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-note-media {
    aspect-ratio: 16 / 9;
  }
}

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--rust);
  color: white;
  padding: var(--section-space) 0;
}

.final-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.55fr);
  align-items: center;
  gap: 72px;
}

.final-cta .eyebrow {
  color: white;
  opacity: 0.74;
}

.final-cta h2 {
  max-width: 660px;
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-size: 3.85rem;
  line-height: 1.05;
}

.final-cta-copy {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
}

.button-light {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.button-light img {
  filter: none;
}

.button-outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: white;
}

.cta-quote {
  margin: 0;
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.48);
}

.cta-quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  line-height: 1.08;
}

.filmed-testimonial {
  padding: var(--section-space-compact) 0;
  border-bottom: 1px solid var(--rule);
}

.filmed-testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--layout-gap);
  align-items: center;
}

.filmed-testimonial .filmed-testimonial-media {
  margin: 0;
}

@media (max-width: 980px) {
  .filmed-testimonial-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A book feature's second action is a quiet link beside its button. */
@media (min-width: 721px) {
  .book-band .button + .text-link {
    margin-left: var(--space-5);
  }
}

.cta-quote footer {
  margin-top: 19px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.book-quote,
.cta-quote,
.index-quote,
.prose blockquote,
.content-source blockquote {
  position: relative;
  padding-top: 68px;
}

.book-quote::before,
.cta-quote::before,
.index-quote::before,
.prose blockquote::before,
.content-source blockquote::before {
  position: absolute;
  top: 0;
  left: 32px;
  color: var(--rust);
  content: "“";
  font-family: var(--serif);
  font-size: 6rem;
  font-style: normal;
  line-height: 0.8;
}

.cta-quote::before {
  color: rgba(255, 255, 255, 0.84);
}

.index-quote::before {
  left: 44px;
}

.site-footer {
  overflow: hidden;
  background: #102f59;
  color: white;
  padding: var(--space-8) 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(350px, 0.9fr) minmax(300px, 0.72fr);
  gap: 74px;
}

.footer-logo-link {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.footer-logo-link:focus-visible {
  outline: 2px solid white;
  outline-offset: 6px;
}

.footer-logo {
  display: block;
  width: min(100%, 300px);
  height: auto;
}

.footer-brand {
  position: relative;
  min-height: 310px;
}

.footer-brand > p {
  max-width: 300px;
  margin: var(--space-5) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 52px;
}

.footer-label {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.48);
}

.footer-links a {
  display: block;
  margin-bottom: 14px;
  font-size: 1rem;
}

.newsletter {
  padding-left: 42px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.newsletter h2 {
  margin: 0 0 13px;
  font-size: 2.3rem;
  line-height: var(--heading-line-height);
}

.newsletter > p:not(.footer-label) {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
}

.newsletter form {
  display: grid;
  grid-template-columns: 1fr 48px;
  margin-top: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.newsletter input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  padding: 13px 0;
  font-size: 1rem;
}

.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.newsletter button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.newsletter button img {
  filter: brightness(0) invert(1);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  margin-top: 66px;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.52);
  font-size: 1rem;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom > div {
  display: flex;
  gap: 22px;
}

@media (max-width: 1180px) {
  :root {
    --gutter: 30px;
  }

  .header-inner {
    grid-template-columns: 150px minmax(0, 1fr) auto;
  }

  .desktop-nav {
    gap: 15px;
    font-size: 1rem;
  }

  .hero-grid {
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
  }

  .hero h1 {
    font-size: 4.7rem;
  }

  .mobile-stage {
    height: min(580px, 66vh);
  }

  .moment-row {
    grid-template-columns: 32px 90px minmax(190px, 0.7fr) minmax(250px, 1fr) 145px;
    gap: 18px;
  }

  .moment-shape {
    width: 88px;
    height: 88px;
  }

  .moment-situation h3 {
    font-size: 1.85rem;
  }

  .book-grid,
  .footer-grid {
    gap: 36px;
  }

  .final-cta-grid {
    gap: 55px;
  }
}

@media (max-width: 980px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    min-height: 78px;
  }

  .menu-button {
    display: grid;
    place-items: center;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    gap: 20px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero h1 {
    font-size: 5rem;
  }

  .mobile-figure {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .mobile-stage {
    height: 570px;
  }

  .mobile-figure figcaption {
    right: 3%;
  }

  .proof-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }

  .moment-row {
    grid-template-columns: 34px 95px minmax(210px, 0.9fr) minmax(280px, 1.1fr);
    padding: var(--space-5) 0;
  }

  .moment-row .text-link {
    grid-column: 3 / -1;
    margin-top: -22px;
  }

  .book-grid {
    grid-template-columns: 0.8fr 1fr;
  }

  .book-grid > .book-quote {
    grid-column: 2;
  }

  .book-cover-wrap {
    grid-row: 1 / span 2;
  }

  .notes-heading,
  .final-cta-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .cta-quote {
    max-width: 620px;
  }

  .footer-grid {
    grid-template-columns: 0.75fr 1.25fr;
  }

  .newsletter {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }

  .footer-brand {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }

  .hero-grid {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .hero h1 {
    max-width: 560px;
    margin-top: 18px;
    font-size: 4rem;
  }

  .hero-intro {
    font-size: 1rem;
  }

  .button-row,
  .button {
    width: 100%;
  }

  .mobile-stage {
    height: 470px;
    min-height: 0;
  }

  .mobile-figure figcaption {
    bottom: 0;
    max-width: 180px;
    font-size: 1.1rem;
  }

  .scroll-cue {
    left: var(--gutter);
  }

  .proof-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px var(--space-5);
  }

  .proof-item img {
    max-width: 125px;
    max-height: 40px;
  }

  .proof-item-badge img {
    max-height: 52px;
  }

  .section {
    padding: var(--section-space) 0;
  }

  .section-heading h2,
  .notes-heading h2 {
    font-size: 3.2rem;
  }

  .moments-heading {
    display: block;
    margin-bottom: var(--section-heading-gap);
  }

  .moments-heading .eyebrow {
    margin-bottom: 0;
  }

  .moments-heading > p:last-child {
    margin-top: 22px;
  }

  .moment-row {
    grid-template-columns: 30px 78px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 30px 0;
  }

  .moment-number {
    margin-top: var(--space-2);
  }

  .moment-shape {
    width: 72px;
    height: 72px;
  }

  .moment-situation {
    align-self: start;
  }

  .moment-situation h3 {
    font-size: 1.75rem;
  }

  .moment-service {
    grid-column: 3;
    border-left: 0;
    padding-left: 0;
  }

  .moment-row .text-link {
    grid-column: 3;
    margin-top: 0;
  }

  .testimonial-band {
    padding: var(--section-space-compact) 0;
  }

  .testimonial-inner {
    grid-template-columns: 55px minmax(0, 1fr);
  }

  .quote-mark {
    font-size: 6.5rem;
  }

  .testimonial-inner blockquote > p {
    font-size: 2.15rem;
  }

  .book-band {
    padding: var(--section-space-compact) 0;
  }

  .book-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .book-cover-wrap {
    grid-row: auto;
    min-height: 360px;
  }

  .book-cover {
    top: 50%;
    left: 50%;
    width: 230px;
    transform: translate(-50%, -50%);
  }

  .book-copy h2 {
    font-size: 3.2rem;
  }

  .book-grid > .book-quote {
    grid-column: auto;
  }

  .field-notes {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .notes-heading {
    display: block;
    margin-bottom: var(--section-heading-gap);
  }

  .notes-heading > p {
    margin-top: var(--space-5);
  }

  .final-cta {
    padding: var(--section-space) 0;
  }

  .final-cta h2 {
    font-size: 3.65rem;
  }

  .cta-quote p {
    font-size: 1.9rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .newsletter {
    grid-row: auto;
    grid-column: auto;
  }

  .footer-brand {
    min-height: 280px;
  }

  .footer-links {
    gap: 30px;
  }

}

/* Imported content template system */
.content-page {
  background: var(--paper);
}

.content-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding: var(--section-space) 0;
}

.content-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: var(--layout-gap);
}

.content-hero-copy {
  max-width: 780px;
}

.content-hero-copy h1 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1.05;
}

.content-breadcrumb {
  margin-bottom: 22px;
  font-size: 1rem;
  font-weight: 500;
}

.content-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-breadcrumb li + li::before {
  margin-right: var(--space-2);
  color: var(--muted);
  content: "/";
}

.content-breadcrumb a {
  border-bottom: 1px solid var(--rust);
  padding-bottom: var(--space-1);
}

.content-deck {
  max-width: 660px;
  margin: 0;
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1.5;
}

.content-deck + .content-deck {
  margin-top: var(--space-3);
}

.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 1rem;
}

.content-meta > * + *::before {
  margin-right: 22px;
  color: var(--rust);
  content: "·";
}

.content-hero-media {
  position: relative;
  width: 100%;
  margin: 0;
}

.content-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.service-feature.service-feature-embed {
  aspect-ratio: 940 / 529;
  background: var(--ink);
}

.service-feature-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.editorial-feature,
.service-feature,
.general-feature {
  aspect-ratio: 4 / 3;
  border: 0;
  background: transparent;
}

.service-feature {
  border: 0;
}

.editorial-feature img {
  object-fit: cover;
  filter: saturate(0.84) contrast(0.98);
}

.content-hero-podcast,
.content-hero-team {
  background: var(--paper-deep);
}

.podcast-cover,
.team-portrait {
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: end;
  border: 0;
  background: transparent;
}

.team-portrait img {
  object-position: center top;
}

.podcast-player {
  width: min(100%, 650px);
  height: 54px;
  margin-top: 34px;
}

.article-reading-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 760px);
  justify-content: center;
  gap: 92px;
  padding-top: var(--reading-space);
  padding-bottom: var(--reading-space);
}

.article-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 38px;
}

.article-toc {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.article-toc ol {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.article-toc a {
  display: block;
  border-left: 2px solid var(--rule);
  padding: 7px 0 7px 14px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.35;
}

.article-toc a:hover,
.article-toc a[aria-current="location"] {
  border-left-color: var(--rust);
  color: var(--ink);
}

.article-toc a[aria-current="location"] {
  font-weight: 600;
}

.article-toc-level-3 a {
  padding-left: 25px;
}

.article-toc-level-4 a {
  padding-left: 36px;
}

.article-toc-mobile {
  display: none;
}

.article-aside {
  align-self: start;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.article-aside > p:not(.eyebrow) {
  margin: 15px 0 22px;
  color: var(--muted);
}

.aside-links {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

.aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--rule);
  padding: 13px 0;
}

.aside-links img {
  width: 16px;
  height: 16px;
}

.prose {
  min-width: 0;
  font-size: 1.08rem;
  line-height: 1.78;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
}

.prose h2 {
  margin: var(--reading-heading-space) 0 var(--heading-gap);
  font-size: 3rem;
  scroll-margin-top: 110px;
}

.prose h3 {
  margin: var(--subsection-space) 0 var(--heading-gap-small);
  font-size: 2.2rem;
}

.prose h4 {
  margin: var(--card-space) 0 var(--heading-gap-small);
  font-size: 1.7rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--paragraph-gap);
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose a {
  border-bottom: 1px solid var(--rust);
}

.prose blockquote {
  margin: var(--space-7) 0;
  border-left: 2px solid var(--rust);
  padding: var(--space-1) 0 var(--space-1) var(--space-8);
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
  line-height: 1.2;
}

.prose blockquote::before {
  left: 18px;
}

.prose img {
  width: auto;
  max-height: 720px;
  margin: 38px auto;
}

.prose figure {
  margin: 42px 0;
}

.prose figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 1rem;
}

.prose-lead {
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1.2;
}

.related-section,
.content-index-section {
  border-top: 1px solid var(--rule);
  background: var(--white);
  padding: var(--section-space) 0;
}

.content-hero + .content-index-section,
.content-hero + .article-toc-mobile {
  border-top: 0;
}

.related-heading,
.index-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--heading-gap) var(--layout-gap);
  margin-bottom: var(--section-heading-gap);
}

.related-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.related-heading h2,
.index-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: var(--heading-line-height);
}

.index-intro > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  border-top: 1px solid var(--ink);
}

.content-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--card-space) 0;
}

/* Rules sit in the gutter; every card keeps the same content width. */
.content-card-grid > .content-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--layout-gap) / -2);
  border-left: 1px solid var(--rule);
  content: "";
}

.content-card-grid > .content-card:nth-child(3n + 1)::before {
  display: none;
}

.content-card-copy {
  width: 100%;
  min-width: 0;
}

.content-card-copy .content-card-meta {
  margin: 0;
}

.content-card-meta {
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content-card :is(h2, h3) {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
}

.content-card :is(h2, h3) {
  margin: var(--eyebrow-gap) 0 var(--heading-gap-small);
  font-size: 2.25rem;
}

.content-card-media {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 0;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
}

.content-card-media::after {
  position: absolute;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 0 3px var(--rust);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out;
}

.content-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) contrast(0.98);
  transition: transform 120ms ease-out;
}

.content-card-media:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 4px;
}

.content-card-media:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.content-card-media:focus-visible img {
  transform: scale(1.045);
}

@media (hover: hover) and (pointer: fine) {
  .content-card-media:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .content-card-media:hover img {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-card-media::after {
    transform: none;
  }

  .content-card-media:hover img,
  .content-card-media:focus-visible img {
    transform: none;
  }
}

.content-card-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.content-card .text-link {
  margin-top: auto;
}

.content-card-grid-editorial {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-card-grid-editorial .content-card {
  padding-top: var(--card-space);
  padding-bottom: var(--card-space);
}

.content-card-grid > .content-card-article {
  border-bottom: 1px solid var(--rule);
}

.content-card-podcast .content-card-media {
  aspect-ratio: 1 / 1;
}

.content-card-list {
  border-top: 1px solid var(--ink);
}

.content-card-list > .content-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  min-height: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--card-space) 0;
}

.content-card-row .content-card-media {
  width: 100%;
}

.content-card-list .content-card .text-link {
  margin-top: 0;
}

.content-card-row :is(h2, h3) {
  margin-bottom: 0;
  font-size: 1.85rem;
}

@media (max-width: 720px) {
  .content-card-list > .content-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-4) 20px;
    align-items: start;
  }

  .content-card-row > .text-link {
    grid-column: 2;
  }
}

.content-hero-compact .content-hero-grid {
  grid-template-columns: minmax(0, 820px);
}

.content-hero-compact,
.content-hero-index {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.content-hero-index .content-hero-grid {
  align-items: end;
}

.topic-list {
  display: grid;
  border-top: 1px solid var(--ink);
}

.topic-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
  padding: 19px 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.topic-list img,
.featured-episode img + span img {
  width: 17px;
  height: 17px;
}

.featured-episode {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0;
}

.featured-episode > img {
  width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.featured-episode span {
  display: grid;
  gap: 10px;
}

.featured-episode small {
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.featured-episode strong {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
}

.index-quote {
  margin: 0;
  border-left: 1px solid var(--rule);
  padding: var(--space-4) 0 var(--space-4) 44px;
  font-family: var(--serif);
  font-size: 2.3rem;
  font-style: italic;
  line-height: 1.1;
}

.index-quote p {
  margin: 0;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px var(--space-6);
}

.people-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-group + .team-group {
  margin-top: 78px;
  border-top: 1px solid var(--rule);
  padding-top: 70px;
}

.team-group-heading {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--heading-gap) var(--layout-gap);
  margin-bottom: var(--section-heading-gap);
}

.team-group-heading .eyebrow {
  margin: 0 0 10px;
}

.team-group-heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
}

.team-group-heading > p {
  max-width: 580px;
  margin: 0;
  color: var(--muted);
}

.person-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  overflow: hidden;
  background: var(--paper-deep);
}

.person-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.78);
  transition: filter 180ms ease;
}

.person-image:hover img {
  filter: saturate(1);
}

.content-source {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.service-source > header:first-child,
.general-source > header:first-child {
  display: none;
}

.content-source section,
.content-source > div,
.content-source > header {
  border-bottom: 1px solid var(--rule);
  padding: var(--section-space-compact) 0;
}

.content-source section:first-child,
.content-source > div:first-child {
  padding-top: 0;
}

.content-source section:last-child,
.content-source > div:last-child {
  border-bottom: 0;
}

.content-source h1,
.content-source h2,
.content-source h3,
.content-source h4 {
  max-width: 920px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
}

.content-source h1 {
  font-size: 4rem;
}

.content-source h2 {
  margin: 0 0 var(--heading-gap);
  font-size: 3.35rem;
}

.content-source h3 {
  margin: var(--subsection-space) 0 var(--heading-gap-small);
  font-size: 2.15rem;
}

.content-source h4 {
  font-size: 1.55rem;
}

.content-source p,
.content-source li {
  max-width: 780px;
  font-size: 1.05rem;
  line-height: 1.72;
}

.content-source p {
  margin: 0 0 20px;
}

.content-source img {
  width: auto;
  max-height: 650px;
  margin-block: 28px;
  object-fit: contain;
}

.content-source blockquote {
  max-width: 820px;
  margin: 40px 0;
  border-left: 2px solid var(--rust);
  padding-left: 30px;
  font-family: var(--serif);
  font-size: 2rem;
  font-style: italic;
}

.content-source .button,
.content-source a[class*="button"] {
  display: inline-flex;
  width: fit-content;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  padding: 11px 20px;
  font-size: 1rem;
}

.content-source form {
  display: grid;
  max-width: 760px;
  gap: 20px;
  margin-top: 30px;
}

.content-source input,
.content-source textarea,
.content-source select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
  color: var(--ink);
  font: inherit;
}

.content-source textarea {
  min-height: 150px;
}

.content-source input:focus,
.content-source textarea:focus,
.content-source select:focus {
  outline: none;
  border-bottom-color: var(--navy);
  box-shadow: 0 2px 0 var(--navy);
}

@media (max-width: 980px) {
  .content-hero {
    padding: var(--section-space) 0;
  }

  .content-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .content-hero-copy h1 {
    max-width: 760px;
    font-size: 4.4rem;
  }

  .content-hero-media,
  .podcast-cover,
  .team-portrait {
    max-width: 680px;
    justify-self: start;
  }

  .article-reading-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .article-reading-grid {
    padding-top: var(--reading-space);
  }

  .article-sidebar {
    position: static;
  }

  .article-toc {
    display: none;
  }

  .article-toc-mobile {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
  }

  .article-toc-mobile-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .article-toc-mobile label {
    font-size: 1rem;
    font-weight: 600;
  }

  .article-toc-mobile select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    padding: 10px 36px 10px var(--space-3);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
  }

  .article-aside {
    max-width: 420px;
  }

  .content-card-grid,
  .content-card-grid-editorial,
  .people-grid,
  .people-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-card-grid > .content-card:nth-child(3n + 1)::before {
    display: block;
  }

  .content-card-grid > .content-card:nth-child(2n + 1)::before {
    display: none;
  }

}

@media (max-width: 720px) {
  .content-hero {
    padding: var(--section-space) 0;
  }

  .content-hero-copy h1 {
    font-size: 3.5rem;
  }

  .content-deck {
    font-size: 1.1875rem;
  }

  .content-meta {
    display: grid;
    gap: var(--space-2);
  }

  .content-meta > * + *::before {
    display: none;
  }

  .article-reading-grid {
    padding-top: var(--reading-space);
    padding-bottom: var(--reading-space);
  }

  .article-toc-mobile-inner {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .prose {
    font-size: 1rem;
  }

  .prose h2 {
    font-size: 2.55rem;
  }

  .prose h3 {
    font-size: 2rem;
  }

  .prose blockquote,
  .prose-lead {
    font-size: 1.75rem;
  }

  .related-section,
  .content-index-section {
    padding: var(--section-space) 0;
  }

  .related-heading,
  .index-intro,
  .team-group-heading {
    display: block;
  }

  .related-heading .eyebrow {
    margin-bottom: 0;
  }

  .related-heading h2,
  .index-intro h2 {
    font-size: 3rem;
  }

  .index-intro > p {
    margin-top: 18px;
  }

  .team-group-heading h3 {
    font-size: 3rem;
  }

  .team-group-heading > p {
    margin-top: 18px;
  }

  .team-group + .team-group {
    margin-top: 58px;
    padding-top: 54px;
  }

  .content-card-grid,
  .content-card-grid-editorial,
  .people-grid,
  .people-grid-compact {
    grid-template-columns: 1fr;
  }

  .content-card {
    min-height: 0;
    padding: var(--card-space) 0;
  }

  .content-card-grid > .content-card::before {
    content: none;
  }

  .content-card :is(h2, h3) {
    font-size: 2rem;
  }

  .content-card .text-link {
    margin-top: var(--space-3);
  }

  .featured-episode {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .featured-episode > img {
    width: 105px;
  }

  .featured-episode strong {
    font-size: 1.55rem;
  }

  .index-quote {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 28px 0 0;
    font-size: 1.85rem;
  }

  .people-grid {
    gap: 42px;
  }

  .content-source {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .content-source section,
  .content-source > div,
  .content-source > header {
    padding: var(--section-space-compact) 0;
  }

  .content-source h1 {
    font-size: 3rem;
  }

  .content-source h2 {
    font-size: 2.6rem;
  }

  .content-source h3 {
    font-size: 2rem;
  }
}

.content-page :is(p, li, a, span, time, small, label, input, textarea, select, button, h5, h6):not(.cta-quote p):not(.book-quote p):not(.book-quote small):not(.structured-copy blockquote p):not(.topic-link):not(.structured-icon-list p):not(.content-deck):not(.foresight-specimen *):not(.foresight-log *):not(.foresight-hub *):not(.rewritten-pullout):not(.rewritten-lead):not(.rewritten-lead *):not(.structured-feature-number):not(.chris-ways-row *):not(.chris-ways-pass):not(.chris-elsewhere-list *):not(.rewritten-record *):not(.archive-hero *):not(.archive-index-intro .ubd-kicker):not(.archive-year *):not(.atlas-related-list *) {
  font-size: max(1rem, 1em) !important;
}

/* Reading text on inner pages: paragraphs and list items, not labels, captions, buttons or forms. */
.content-page :is(p, li):not(.eyebrow):not(.proof p):not(.conversion-panel-form *):not(.cta-quote p):not(.book-quote p):not(.book-quote small):not(.structured-copy blockquote p):not(.topic-link):not(.structured-icon-list p):not(.content-deck):not(.foresight-specimen *):not(.foresight-log *):not(.foresight-hub *):not(.rewritten-pullout):not(.rewritten-lead):not(.rewritten-lead *):not(.structured-feature-number):not(.chris-ways-row *):not(.chris-ways-pass):not(.chris-elsewhere-list *):not(.rewritten-record *):not(.archive-hero *):not(.archive-index-intro .ubd-kicker):not(.archive-year *):not(.atlas-related-list *) {
  font-size: max(var(--reading-size), 1em) !important;
}

.article-empty {
  min-height: 360px;
  align-content: center;
}

.article-empty h2 {
  max-width: 620px;
}

.structured-section {
  border-bottom: 1px solid var(--rule);
  padding: var(--section-space) 0;
}

.structured-section-split,
.structured-section-statement,
.structured-section-cards {
  background: var(--white);
}

.structured-section-list {
  background: #eee8de;
}

.structured-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
}

.structured-section-media .structured-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
  justify-content: space-between;
  align-items: start;
}

.structured-section-media-reverse .structured-copy {
  grid-column: 2;
}

.structured-section-media-reverse .structured-image,
.structured-section-media-reverse .structured-media {
  grid-column: 1;
  grid-row: 1;
}

.structured-section-editorial .structured-copy,
.structured-section-split .structured-copy,
.structured-section-statement .structured-copy,
.structured-section-cards .structured-copy,
.structured-section-details .structured-copy,
.structured-section-phases .structured-copy,
.structured-section-timeline .structured-copy {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(340px, 1fr);
  gap: var(--heading-gap) var(--layout-gap);
  align-items: start;
}

.structured-section-cards .structured-section-grid {
  gap: 46px;
}

.content-page .structured-section-statement .structured-copy .structured-copy-body > p:first-child {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 2rem !important;
  line-height: 1.18;
}

.structured-section-list .structured-copy {
  display: grid;
  grid-template-columns: minmax(260px, 0.68fr) minmax(420px, 1fr);
  gap: var(--layout-gap);
}

.structured-copy h2 {
  max-width: 760px;
  margin: 0 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 400;
  line-height: var(--heading-line-height);
}

.structured-copy h3 {
  margin: var(--subsection-space) 0 var(--heading-gap-small);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
}

.structured-copy-body > p,
.structured-copy li {
  font-size: 1.05rem;
  line-height: 1.7;
}

.structured-copy h4 {
  margin: var(--card-space) 0 var(--heading-gap-small);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}

.structured-copy-body > p {
  margin: 0 0 var(--paragraph-gap);
}

.structured-copy strong {
  color: var(--ink);
  font-weight: 700;
}

.structured-copy em {
  color: var(--ink);
  font-family: inherit;
  font-size: 1em;
  font-style: italic;
}

.structured-copy blockquote,
.structured-feature blockquote {
  position: relative;
  margin: var(--space-6) 0;
  border-left: 2px solid var(--rust);
  padding: 58px 0 var(--space-2) var(--space-6);
}

.structured-copy blockquote::before,
.structured-feature blockquote::before {
  position: absolute;
  top: 2px;
  left: 30px;
  color: var(--rust);
  content: "“";
  font-family: var(--serif);
  font-size: 5.5rem;
  font-style: normal;
  line-height: 0.8;
}

.structured-feature blockquote {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}

.service-detail .structured-copy-body > blockquote > p,
.service-detail .structured-feature > blockquote > p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  font-style: italic;
  line-height: 1.14;
}

.icon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--rule);
}

.icon-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.icon-card-grid-3,
.icon-card-grid-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.icon-card-grid-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.icon-card-grid-5 .icon-card {
  grid-column: span 2;
}

.icon-card-grid-5 .icon-card:nth-child(n + 4) {
  grid-column: span 3;
}

.icon-card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.icon-card {
  min-width: 0;
  min-height: 250px;
  padding: var(--card-space);
  background: var(--white);
  color: var(--rust);
}

.icon-card-media {
  display: block;
  width: calc(100% + var(--card-space) * 2);
  aspect-ratio: 4 / 3;
  margin: calc(var(--card-space) * -1) calc(var(--card-space) * -1) var(--heading-gap);
  object-fit: cover;
}

.structured-section-guide-parts .icon-card-media {
  width: 100%;
  max-width: 280px;
  margin: 0 auto var(--heading-gap);
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}

.reader-testimonial-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.reader-testimonial-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reader-testimonial {
  display: flex;
  min-height: 340px;
  flex-direction: column;
  padding: 82px var(--space-6) 34px;
  border-left: 1px solid var(--rule);
}

.reader-testimonial:first-child {
  border-left: 0;
}

.reader-testimonial::before {
  top: 24px;
  left: 30px;
}

.reader-testimonial > p {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.reader-testimonial footer {
  align-items: flex-start;
  margin-top: auto;
  padding-top: 26px;
}

.reader-testimonial footer > span {
  display: grid;
  gap: 5px;
}

.reader-testimonial footer strong {
  color: var(--rust);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reader-testimonial footer small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.icon-card-red {
  background: var(--white);
  color: var(--rust);
}

.icon-card-blue {
  background: var(--white);
  color: var(--rust);
}

.icon-card-yellow {
  background: var(--white);
  color: var(--rust);
}

.icon-card-neutral {
  background: var(--white);
  color: var(--rust);
}

.icon-card-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: var(--heading-gap);
}

.icon-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.icon-card-icon svg * {
  fill: currentColor;
}

.icon-card-icon-mask {
  width: 38px;
  height: 38px;
  background: currentColor;
  -webkit-mask: var(--icon-card-mask) center / contain no-repeat;
  mask: var(--icon-card-mask) center / contain no-repeat;
}

.icon-card h3 {
  margin: 0 0 var(--heading-gap-small);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.02;
}

.icon-card p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

.structured-section-phases,
.structured-section-details,
.structured-section-timeline {
  background: var(--white);
}

.structured-section-phases .structured-section-grid {
  grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);
  gap: var(--layout-gap);
  align-items: start;
}

.structured-section-phases .structured-copy {
  grid-column: 1 / -1;
}

.phase-group-list {
  display: grid;
  grid-column: 1;
  gap: 0;
  border-top: 1px solid var(--ink);
}

.phase-group {
  border-bottom: 1px solid var(--rule);
  padding: 28px 0 30px;
}

.phase-group-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.phase-group-header > span,
.structured-detail header > span {
  color: var(--rust);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.phase-group h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
}

.phase-step-list {
  display: grid;
  gap: 0;
  margin: 22px 0 0 56px;
  padding: 0;
  list-style: none;
}

.phase-step {
  border-top: 1px solid var(--rule);
  padding: 18px 0;
}

.phase-step h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.35;
}

.phase-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.structured-section-phases .structured-media {
  position: sticky;
  top: 32px;
  grid-column: 2;
  grid-row: 2;
}

.structured-section-phases .structured-media-item img {
  max-height: none;
}

.structured-detail-list {
  border-top: 1px solid var(--ink);
}

.structured-detail {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(36px, 6vw, 92px);
  border-bottom: 1px solid var(--rule);
  padding: 34px 0 38px;
}

.structured-detail:last-child {
  border-bottom: 0;
}

.structured-detail header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.structured-detail h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.04;
}

.structured-detail-body > p {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.structured-detail-body > img {
  display: block;
  width: 100%;
  max-height: 520px;
  margin-bottom: 22px;
  object-fit: contain;
}

.structured-detail-body ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 20px;
  padding-left: 20px;
}

.structured-detail-body li {
  color: var(--muted);
  line-height: 1.5;
}

.structured-detail-body .text-link {
  margin-top: var(--space-2);
}

.story-timeline {
  --timeline-progress: 0;
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 94px;
  width: 1px;
  background: var(--rule);
  content: "";
}

.story-timeline::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 94px;
  width: 2px;
  background: var(--rust);
  content: "";
  pointer-events: none;
  transform: scaleY(var(--timeline-progress));
  transform-origin: top;
  will-change: transform;
}

.story-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
}

.story-timeline-item::before {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 88px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--rust);
  content: "";
}

.story-timeline-item > :is(time, .story-timeline-label) {
  padding: 38px 22px 0 0;
  color: var(--rust);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.story-timeline-item > article {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.22fr);
  gap: 30px;
  border-bottom: 1px solid var(--rule);
  padding: var(--space-6) 0 34px 42px;
  align-items: center;
}

.story-timeline-item-text > article {
  grid-template-columns: minmax(0, 1fr);
}

.story-timeline-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-timeline-item h3 {
  margin: 0 0 var(--heading-gap-small);
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1.02;
}

.story-timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.structured-section-feature-list .structured-copy-body > :is(h3, h4) {
  margin: var(--subsection-space) 0 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
}

.structured-section-feature-list .structured-copy-body > :is(h3, h4):first-child {
  margin-top: 0;
}

.structured-copy-body ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.structured-copy-body li {
  position: relative;
  border-top: 1px solid var(--rule);
  padding: var(--space-4) 0 var(--space-4) 28px;
}

.structured-copy-body li::before {
  position: absolute;
  top: 21px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--rust);
  content: "";
  transform: rotate(45deg);
}

.structured-image {
  width: 100%;
  max-height: 560px;
  align-self: start;
  border: 0;
  object-fit: contain;
  object-position: center;
}

.structured-media {
  display: grid;
  width: 100%;
  gap: 18px;
  align-self: start;
}

.structured-section-editorial .structured-media {
  margin-top: var(--space-7);
}

.structured-media-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.structured-media-item {
  margin: 0;
  overflow: hidden;
}

.structured-media-item picture {
  display: block;
}

.structured-media-item img,
.structured-media-item video,
.structured-video-embed {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
}

.structured-media-item img[src$="insight-is-social.png"] {
  mix-blend-mode: multiply;
}

.structured-media-gallery .structured-media-item-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.structured-media-item-video video {
  aspect-ratio: auto;
  max-height: none;
  background: var(--ink);
  object-fit: contain;
}

.structured-video-embed {
  aspect-ratio: 16 / 9;
  max-height: none;
  border: 0;
  background: var(--ink);
}

.positioning {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}

.positioning-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(440px, 1fr);
  gap: var(--layout-gap);
}

.positioning-heading h2 {
  max-width: 590px;
  margin: var(--eyebrow-gap) 0 0;
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.98;
}

.positioning-copy > p {
  max-width: 680px;
  margin: 0 0 38px;
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1.24;
}

.positioning-points {
  border-top: 1px solid var(--ink);
}

.positioning-points > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}

.positioning-points strong {
  font-weight: 600;
}

.positioning-points span {
  color: var(--muted);
  line-height: 1.55;
}

.chris-intro {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}

.chris-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--layout-gap);
}

/* A room, not a headshot: landscape, beside the pitch on wide screens and beneath it on phones. */
.chris-intro-portrait {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}

.chris-intro-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.chris-intro-copy h2 {
  max-width: 680px;
  margin: 0 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 3.7vw, 3.4rem);
  font-weight: 400;
  line-height: 1.04;
}

.chris-intro-copy > p {
  max-width: 680px;
  margin: 0 0 38px;
  font-size: var(--text-large);
  line-height: var(--line-height-body);
}

/* Without a picture the pitch runs wide from the shell's left edge, at the hero's scale. */
.chris-intro-grid:not(:has(.chris-intro-portrait)) {
  grid-template-columns: minmax(0, 1fr);
}

.chris-intro-grid:not(:has(.chris-intro-portrait)) h2 {
  max-width: 900px;
  font-size: clamp(2.3rem, 5.8vw, 4.2rem);
}

@media (max-width: 980px) {
  .chris-intro-grid {
    grid-template-columns: 1fr;
  }

  .chris-intro-copy h2,
  .chris-intro-copy > p {
    max-width: none;
  }

  .chris-intro-copy h2 {
    font-size: clamp(2.3rem, 5.8vw, 3.4rem);
  }
}

@media (max-width: 980px) {

  .positioning-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }
}

@media (max-width: 720px) {

  .positioning-heading h2 {
    font-size: 3rem;
  }

  .positioning-copy > p {
    font-size: 1.65rem;
  }

  .positioning-points > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.conversion-panel {
  scroll-margin-top: var(--space-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: var(--section-space) 0;
}

.conversion-panel-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(480px, 1fr);
  gap: var(--layout-gap);
  align-items: start;
}

.conversion-panel-copy h2 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.98;
}

.conversion-panel-copy > p:last-child {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.conversion-panel-form {
  border-left: 1px solid var(--rule);
  padding-left: clamp(42px, 6vw, 84px);
}

.conversion-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px var(--space-5);
}

.conversion-field {
  display: grid;
  gap: var(--space-2);
}

.conversion-field-full,
.conversion-submit,
.conversion-check,
.conversion-form > .form-status {
  grid-column: 1 / -1;
}

.conversion-field label,
.conversion-check {
  font-weight: 500;
}

.conversion-field label span {
  color: var(--muted);
  font-weight: 400;
}

.conversion-field input,
.conversion-field textarea,
.conversion-field select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: var(--space-3) 0 14px;
  color: var(--ink);
  font-family: var(--sans);
}

.conversion-field textarea {
  min-height: 128px;
  resize: vertical;
}

/* A short box asks for a short answer. */
.conversion-field textarea.conversion-textarea-short {
  min-height: 72px;
}

.conversion-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 8px) 52%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
}

.conversion-field input:focus,
.conversion-field textarea:focus,
.conversion-field select:focus {
  outline: none;
  border-bottom-color: var(--navy);
  box-shadow: 0 2px 0 var(--navy);
}

.conversion-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.55;
}

.conversion-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 3px 0 0;
  accent-color: var(--rust);
}

.conversion-check input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.conversion-submit {
  width: fit-content;
  margin-top: var(--space-1);
}

.conversion-form button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.form-status {
  min-height: 1.5em;
  margin: -8px 0 0;
  color: var(--muted);
}

.conversion-form[data-state="error"] .form-status {
  color: var(--rust);
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter .conversion-form-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 0;
  margin-top: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.newsletter .conversion-form-compact .conversion-field {
  display: block;
}

.conversion-submit-compact {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 980px) {
  .structured-section-grid,
  .structured-section-media .structured-section-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: var(--layout-gap);
  }

  .structured-section-editorial .structured-copy,
  .structured-section-split .structured-copy,
  .structured-section-statement .structured-copy,
  .structured-section-list .structured-copy,
  .structured-section-cards .structured-copy,
  .structured-section-details .structured-copy,
  .structured-section-phases .structured-copy,
  .structured-section-timeline .structured-copy {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .structured-section-phases .structured-section-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .phase-group-list,
  .structured-section-phases .structured-media {
    grid-column: 1;
    grid-row: auto;
  }

  .structured-section-phases .structured-media {
    position: static;
    width: min(100%, 720px);
    margin-top: 0;
  }

  .icon-card-grid,
  .icon-card-grid-3,
  .icon-card-grid-4,
  .icon-card-grid-5,
  .icon-card-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .icon-card-grid-5 .icon-card,
  .icon-card-grid-5 .icon-card:nth-child(n + 4) {
    grid-column: auto;
  }

  .icon-card-grid-5 .icon-card:last-child {
    grid-column: 1 / -1;
  }

  .reader-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .reader-testimonial,
  .reader-testimonial:first-child {
    min-height: 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .reader-testimonial:first-child {
    border-top: 0;
  }

  .structured-section-media-reverse .structured-copy {
    grid-column: 1;
  }

  .structured-image,
  .structured-media {
    grid-column: 1;
    width: min(100%, 620px);
    margin-top: 22px;
  }

  .structured-section-media-reverse .structured-image,
  .structured-section-media-reverse .structured-media {
    grid-column: 1;
    grid-row: auto;
  }

  .conversion-panel-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .conversion-panel-form {
    border-top: 1px solid var(--rule);
    border-left: 0;
    padding-top: 42px;
    padding-left: 0;
  }

}

@media (max-width: 720px) {
  .speaking-appearances {
    padding: var(--section-space) 0;
  }

  .speaking-appearances h2 {
    font-size: 3.05rem;
  }

  .structured-section {
    padding: var(--section-space) 0;
  }

  .structured-section-grid,
  .structured-section-media .structured-section-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .structured-image {
    grid-column: 1;
  }

  .structured-media,
  .structured-media-gallery {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .structured-section-media-reverse .structured-copy,
  .structured-section-media-reverse .structured-image,
  .structured-section-media-reverse .structured-media {
    grid-column: 1;
  }

  .structured-copy h2 {
    font-size: 2.7rem;
  }

  .structured-copy-body ul {
    grid-template-columns: 1fr;
  }

  .icon-card-grid,
  .icon-card-grid-2,
  .icon-card-grid-3,
  .icon-card-grid-4,
  .icon-card-grid-5,
  .icon-card-grid-6 {
    grid-template-columns: 1fr;
  }

  .icon-card-grid-5 .icon-card,
  .icon-card-grid-5 .icon-card:nth-child(n + 4),
  .icon-card-grid-5 .icon-card:last-child {
    grid-column: auto;
  }

  .icon-card {
    min-height: 0;
    padding: var(--card-space);
  }

  .icon-card-media {
    width: calc(100% + var(--card-space) * 2);
    margin: calc(var(--card-space) * -1) calc(var(--card-space) * -1) var(--heading-gap);
  }

  .icon-card-icon {
    margin-bottom: var(--heading-gap);
  }

  .reader-testimonial {
    padding: 76px var(--space-5) 30px;
  }

  .reader-testimonial::before {
    top: 22px;
    left: 22px;
  }

  .phase-group-header {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .phase-group h3 {
    font-size: 2rem;
  }

  .phase-step-list {
    margin-left: 50px;
  }

  .structured-detail {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .structured-detail h3 {
    font-size: 1.9rem;
  }

  .story-timeline::before {
    left: 18px;
  }

  .story-timeline::after {
    left: 18px;
  }

  .story-timeline-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .story-timeline-item::before {
    top: 37px;
    left: 12px;
  }

  .story-timeline-item > :is(time, .story-timeline-label) {
    writing-mode: vertical-rl;
    padding: 34px 0 0;
  }

  .story-timeline-item > article {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0 var(--space-6) 20px;
  }

  .story-timeline-item h3 {
    font-size: 2rem;
  }

  .content-page .structured-section-statement .structured-copy .structured-copy-body > p:first-child {
    font-size: 1.65rem !important;
  }

  .conversion-panel {
    padding: var(--section-space) 0;
  }

  .conversion-panel-copy h2 {
    font-size: 3rem;
  }

  .conversion-form {
    grid-template-columns: 1fr;
  }

  .conversion-field-half,
  .conversion-field-full,
  .conversion-submit,
  .conversion-check,
  .conversion-form > .form-status {
    grid-column: 1;
  }
}

@media (max-width: 450px) {
  .hero h1 {
    font-size: 3.35rem;
  }

  .mobile-stage {
    height: 390px;
  }

  .section-heading h2,
  .notes-heading h2,
  .final-cta h2 {
    font-size: 2.85rem;
  }

  .moment-row {
    grid-template-columns: 25px 62px minmax(0, 1fr);
    gap: 10px;
  }

  .moment-shape {
    width: 60px;
    height: 60px;
  }

  .moment-service p {
    font-size: 1rem;
  }

  .testimonial-inner {
    grid-template-columns: 1fr;
  }

  .quote-mark {
    height: 36px;
  }

  .book-cover-wrap {
    min-height: 334px;
  }

  .book-cover {
    width: 210px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Uncertain by Design living book */
.ubd-page {
  --ubd-reading: 760px;
  background: var(--paper);
}

.ubd-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
}

.ubd-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.ubd-kicker,
.ubd-aside-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

.ubd-hero {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.ubd-hero-grid {
  display: grid;
  grid-template-columns: minmax(480px, 1.12fr) minmax(400px, 0.88fr);
  min-height: 720px;
  gap: var(--layout-gap);
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.ubd-hero-title {
  align-self: start;
}

.ubd-hero-title .ubd-kicker {
  color: var(--ochre);
}

.ubd-hero h1 {
  margin: 58px 0 0;
  font-family: var(--serif);
  font-size: clamp(6rem, 9.1vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.84;
}

.ubd-hero h1 em {
  display: inline-block;
  margin-left: 0.43em;
  color: var(--paper-deep);
  font-weight: 400;
}

.ubd-hero-intro {
  align-self: end;
  padding-bottom: 2px;
}

.ubd-hero-intro > p {
  max-width: 520px;
  margin: 0;
  color: rgba(247, 243, 241, 0.64);
  line-height: 1.7;
}

/* The book heroes' lead is a reading passage (five to seven lines), so it takes the reading face, Tiempos Text, at the
   same size and leading (Chris, 27 Sep 2026: "B, and do both", /ubd/ and the essay collection). */
.ubd-hero-intro .ubd-hero-lead {
  margin-bottom: 22px;
  color: var(--paper);
  font-family: var(--serif-text);
  font-size: 2rem;
  line-height: 1.3;
}

/* The hero's one quiet line (Chris, 26 Sep 2026): the channels the essays go out on, as on the homepage's New thinking band. */
.ubd-actions {
  margin-top: 34px;
  border-top: 1px solid rgba(247, 243, 241, 0.28);
  padding-top: 22px;
}

.ubd-hero .notes-channels a {
  color: var(--ochre);
}

.ubd-hero .notes-channels a img {
  filter: var(--action-icon-ochre);
}

.ubd-hero .notes-channels > span {
  color: var(--on-ink-muted);
}

.ubd-map {
  border-bottom: 1px solid var(--ink);
  background: var(--white);
  padding: var(--section-space) 0;
}

.ubd-map-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.62fr) minmax(620px, 1.38fr);
  align-items: start;
  gap: var(--layout-gap);
}

.ubd-map-intro {
  position: sticky;
  top: 28px;
}

.ubd-map-intro .ubd-kicker,
.ubd-reading-heading .ubd-kicker,
.ubd-subscribe .ubd-kicker,
.ubd-essay-header .ubd-kicker {
  color: var(--navy);
}

.ubd-map-intro h2,
.ubd-reading-heading h2,
.ubd-subscribe h2 {
  margin: 18px 0 var(--space-5);
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.06;
}

.ubd-map-intro > p:not(.ubd-kicker) {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.ubd-contents {
  margin: 0;
  border-top: 1px solid var(--ink);
  padding: 0;
  list-style: none;
}

.ubd-contents-item > a,
.ubd-contents-item > span {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 22px;
  border-bottom: 1px solid var(--rule);
  padding: 17px 0;
}

.ubd-contents-item b {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Index entries read at the inner pages' reading size, on /ubd/ and the essay collection alike (Chris, 27 Sep 2026). */
.ubd-contents-title {
  font-family: var(--sans);
  font-size: var(--reading-size);
  font-weight: 500;
  line-height: 1.4;
}

.ubd-contents-item small {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ubd-contents-item small img {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  vertical-align: -1px;
  filter: var(--action-icon-navy);
}

.ubd-contents-item:not(.is-published) > span {
  color: rgba(23, 23, 22, 0.46);
}

.ubd-contents-item.is-published > a {
  position: relative;
  color: var(--ink);
}

.ubd-contents-item.is-published > a::before {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  content: "";
  transform: translateY(-50%);
}

.ubd-contents-item.is-published small {
  color: var(--navy);
  font-weight: 600;
}

.ubd-contents-item.is-published > a:hover .ubd-contents-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.ubd-contents-item.ubd-depth-1 > span,
.ubd-contents-item.ubd-depth-1 > a {
  padding-top: var(--space-6);
}

/* A section's number is set as its heading is (Chris, 26 Sep 2026): same face, same size, same colour. */
.ubd-contents-item.ubd-depth-1 b,
.ubd-contents-item.ubd-depth-1 .ubd-contents-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}

.ubd-contents-item.ubd-depth-1 b {
  color: inherit;
}

.ubd-contents-item.ubd-depth-2 > span,
.ubd-contents-item.ubd-depth-2 > a {
  padding-left: 38px;
}

.ubd-contents-item.ubd-depth-3 > span,
.ubd-contents-item.ubd-depth-3 > a {
  padding-left: 78px;
}

.ubd-reading {
  padding: var(--reading-space) 0;
}

.ubd-reading-heading {
  display: grid;
  grid-template-columns: 240px minmax(380px, var(--ubd-reading));
  justify-content: center;
  gap: var(--heading-gap) var(--layout-gap);
  margin-bottom: var(--section-heading-gap);
}

.ubd-reading-heading .ubd-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.ubd-reading-heading h2 {
  margin: 0;
}

.ubd-reading-heading > p:last-child {
  align-self: end;
  max-width: 570px;
  margin: 0 0 5px;
  color: var(--muted);
  line-height: 1.7;
}

.ubd-reading-grid {
  display: grid;
  grid-template-columns: 240px minmax(380px, var(--ubd-reading));
  justify-content: center;
  align-items: start;
  gap: var(--layout-gap);
}

.ubd-reading-aside {
  position: sticky;
  top: 28px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.ubd-reading-aside ol {
  display: grid;
  gap: 0;
  margin: 18px 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.ubd-reading-aside li {
  border-bottom: 1px solid var(--rule);
}

.ubd-reading-aside li a {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  padding: 14px 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
}

.ubd-reading-aside li a span {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.ubd-reading-aside li a:hover,
.ubd-reading-aside li a[aria-current="location"] {
  color: var(--ink);
}

.ubd-reading-aside li a[aria-current="location"] {
  font-weight: 600;
}

.ubd-back-link {
  border-bottom: 1px solid var(--navy);
  color: var(--navy);
  font-size: 0.76rem;
}

.ubd-essay + .ubd-essay {
  margin-top: 140px;
  border-top: 1px solid var(--ink);
  padding-top: var(--space-10);
}

.ubd-essay-header {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.ubd-essay-number {
  padding-top: 34px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.45rem;
}

.ubd-essay-header h2 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
  scroll-margin-top: 110px;
}

.ubd-essay-deck {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif-text);
  font-size: 1.65rem;
  line-height: 1.3;
}

.ubd-prose {
  font-family: var(--sans);
  font-size: 1.12rem;
  line-height: 1.78;
}

.ubd-prose > *:first-child {
  margin-top: 0;
}

.ubd-prose p,
.ubd-prose ul,
.ubd-prose ol {
  margin: 0 0 1.4em;
}

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

.ubd-prose h3,
.ubd-prose h4 {
  margin: var(--subsection-space) 0 var(--heading-gap-small);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.ubd-prose h3 {
  font-size: 1.4rem;
}

.ubd-prose h4 {
  font-size: 1.15rem;
}

.ubd-prose a {
  text-decoration: underline;
  text-decoration-color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ubd-prose blockquote {
  margin: 2.2em 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.35em 0;
  font-size: 1.55rem;
  font-style: italic;
  line-height: 1.35;
}

.ubd-prose figure {
  margin: 2.4em 0;
}

.ubd-prose figure img {
  width: 100%;
  max-height: 620px;
  background: var(--paper-deep);
  object-fit: contain;
}

.ubd-prose sup {
  font-size: 0.65em;
}

.ubd-essay-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: 68px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ubd-essay-footer a {
  color: var(--navy);
}

.ubd-subscribe {
  scroll-margin-top: var(--space-5);
  border-top: 1px solid var(--ink);
  background: var(--paper-deep);
  padding: var(--section-space) 0;
}

.ubd-subscribe-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(480px, 1fr);
  gap: var(--layout-gap);
}

.ubd-subscribe h2 {
  max-width: 570px;
}

.ubd-subscribe-grid > div:first-child > p:last-child {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.ubd-subscribe-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--rule);
  padding-left: clamp(42px, 6vw, 84px);
}

/* An Uncertain by Design essay page: the book's frame around the shared article layout (Chris, 26 Sep 2026). */
/* The essay's hero is on ink, as the hub's is (Chris, 26 Sep 2026): every door into the book opens on ink. */
.ubd-essay-page .content-hero {
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}

.ubd-essay-page .content-hero h1 {
  color: var(--paper);
}

.ubd-essay-page .content-deck {
  color: var(--on-ink-muted);
}

.ubd-essay-eyebrow {
  margin-bottom: 22px;
  color: var(--ochre);
}

.ubd-essay-eyebrow a {
  color: inherit;
}

/* The Tool Kit essay's year, as the index prints it (Chris, 27 Sep 2026: the year alone). */
.ubd-essay-year {
  margin: 18px 0 0;
  color: var(--on-ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.ubd-essay-aside > p:not(.eyebrow) cite {
  font-style: italic;
}

.ubd-essay-neighbours {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.ubd-essay-neighbours li {
  display: grid;
  gap: 4px;
}

.ubd-essay-neighbours span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ubd-essay-neighbours a {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

.ubd-essay-page + .ubd-subscribe {
  border-top: 1px solid var(--ink);
}

/* The essay reads in Tiempos Text at 20px, with Tiempos Headline roman sub-headings a step above it (Chris, 26 Sep 2026: option A;
   the imported headings arrive wrapped in <strong><em>, which the page sets aside). h3 is ready for the DOCX-era second level. */
.ubd-essay-page .prose {
  font-family: var(--serif-text);
  font-size: var(--feature-text-size);
  line-height: 1.6;
}

/* The Webflow import maps Substack's sub-headings to h2 on one essay and h4 on another (1.1.2 and 1.1.1, Chris,
   28 Sep 2026): an essay's top level reads the same whichever tag arrived. The Markdown path Kam is setting up
   brings the levels right. */
.ubd-essay-page .prose h2,
.ubd-essay-page .prose h3,
.ubd-essay-page .prose h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
}

.ubd-essay-page .prose h2,
.ubd-essay-page .prose h4 {
  margin: 2.2em 0 0.6em;
  font-size: 1.75rem;
}

.ubd-essay-page .prose h3 {
  margin: 1.8em 0 0.5em;
  font-size: 1.4rem;
}

.ubd-essay-page .prose > :first-child {
  margin-top: 0;
}

.ubd-essay-page .prose h2 em,
.ubd-essay-page .prose h2 strong,
.ubd-essay-page .prose h3 em,
.ubd-essay-page .prose h3 strong,
.ubd-essay-page .prose h4 em,
.ubd-essay-page .prose h4 strong {
  font-style: normal;
  font-weight: inherit;
}

.ubd-subscribe-grid > div:first-child > p a {
  border-bottom: 1px solid var(--navy);
  color: var(--navy);
}

/* Where the columns stack, Previous / Next follow the essay rather than precede it (Chris, 26 Sep 2026). */
@media (max-width: 980px) {
  .ubd-essay-page .article-sidebar {
    order: 2;
  }
}

/* The page's Field Notes close (Chris, 26 Sep 2026): the footer's one-field form on paper. */
.ubd-subscribe .conversion-form-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}

.ubd-subscribe .conversion-form-compact .conversion-field {
  display: block;
}

.ubd-subscribe .conversion-submit-compact {
  min-height: var(--action-target-size);
}

@media (max-width: 980px) {
  .ubd-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: var(--layout-gap);
  }

  .ubd-hero h1 {
    max-width: 720px;
  }

  .ubd-hero-intro {
    max-width: 660px;
    margin-top: 16px;
  }

  .ubd-map-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .ubd-map-intro,
  .ubd-reading-aside {
    position: static;
  }

  .ubd-map-intro > p:not(.ubd-kicker) {
    max-width: 620px;
  }

  .ubd-reading-heading,
  .ubd-reading-grid {
    grid-template-columns: minmax(0, var(--ubd-reading));
    gap: 38px;
  }

  .ubd-reading-heading .ubd-kicker {
    grid-column: 1;
    margin-bottom: 0;
  }

  .ubd-reading-aside {
    display: none;
  }

  .ubd-subscribe-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
  }

  .ubd-subscribe-form {
    border-top: 1px solid var(--rule);
    border-left: 0;
    padding-top: 42px;
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .ubd-hero-grid {
    gap: var(--layout-gap);
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .ubd-hero h1 {
    margin-top: 42px;
    font-size: clamp(4.2rem, 19vw, 5.6rem);
    line-height: 0.86;
  }

  .ubd-hero h1 em {
    margin-left: 0.18em;
  }

  .ubd-hero-intro .ubd-hero-lead {
    font-size: 1.65rem;
  }

  .ubd-map,
  .ubd-reading,
  .ubd-subscribe {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .ubd-map-intro h2,
  .ubd-reading-heading h2,
  .ubd-subscribe h2 {
    font-size: 3.15rem;
  }

  .ubd-contents-item > a,
  .ubd-contents-item > span {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: var(--space-3);
    padding: 15px 0;
  }

  .ubd-contents-item small {
    grid-column: 2;
  }

  .ubd-contents-item.ubd-depth-1 b,
  .ubd-contents-item.ubd-depth-1 .ubd-contents-title {
    font-size: 1.65rem;
  }

  .ubd-contents-item.ubd-depth-2 > span,
  .ubd-contents-item.ubd-depth-2 > a {
    padding-left: 18px;
  }

  .ubd-contents-item.ubd-depth-3 > span,
  .ubd-contents-item.ubd-depth-3 > a {
    padding-left: 36px;
  }

  .ubd-contents-item.is-published > a::before {
    left: -7px;
  }

  .ubd-reading-heading {
    margin-bottom: var(--section-heading-gap);
  }

  .ubd-essay-header {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .ubd-essay-number {
    padding-top: 0;
    font-size: 1rem;
  }

  .ubd-essay-header h2 {
    font-size: 3.2rem;
  }

  .ubd-essay-deck {
    font-size: 1.4rem;
  }

  .ubd-prose {
    font-size: 1.05rem;
    line-height: 1.72;
  }

  .ubd-essay + .ubd-essay {
    margin-top: 94px;
    padding-top: 70px;
  }

  .ubd-essay-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  .site-header,
  .site-footer,
  .ubd-progress,
  .ubd-actions,
  .ubd-subscribe,
  .ubd-reading-aside {
    display: none !important;
  }

  .ubd-hero {
    background: white;
    color: black;
  }

  .ubd-hero-grid,
  .ubd-map-grid,
  .ubd-reading-heading,
  .ubd-reading-grid {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ubd-hero h1,
  .ubd-hero h1 em,
  .ubd-hero-intro .ubd-hero-lead,
  .ubd-hero-intro > p {
    color: black;
  }

  .ubd-hero-intro {
    margin-top: var(--space-7);
  }

  .ubd-map,
  .ubd-reading {
    border: 0;
    padding: 40px 0;
  }

  .ubd-map-intro {
    position: static;
    margin-bottom: 30px;
  }

  .ubd-essay {
    break-before: page;
  }

  .ubd-prose figure img {
    max-height: 60vh;
  }
}

/* Approved comp fidelity pass */
@media (min-width: 981px) {
  :root {
    --shell: 1280px;
  }

  .header-inner {
    grid-template-columns: 160px minmax(0, 1fr) auto;
    min-height: 102px;
  }

  .header-cta {
    border: 1px solid var(--rust);
    background: var(--rust);
    color: white;
    padding: 13px var(--space-5);
  }

  .hero,
  .hero-grid {
    min-height: 780px;
  }

  .hero-grid {
    grid-template-columns: minmax(560px, 0.96fr) minmax(570px, 1.04fr);
    align-items: center;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    gap: 20px;
  }

  .hero-copy {
    align-self: center;
    padding-bottom: 18px;
  }

  .hero h1 {
    max-width: 500px;
    margin: var(--eyebrow-gap) 0 var(--heading-gap);
    font-size: 5.4rem;
    line-height: 0.93;
  }

  .hero-intro {
    max-width: 440px;
    line-height: 1.58;
  }

  .mobile-stage {
    height: 650px;
    min-height: 0;
  }

  .mobile-figure figcaption {
    right: 11%;
    bottom: 3%;
    max-width: 460px;
    border: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.4;
  }

  .scroll-cue {
    display: none;
  }

  .proof {
    padding: var(--section-space-compact) 0;
  }

  .proof p {
    margin-bottom: var(--space-6);
    font-size: 1.18rem;
  }

  .proof-item img {
    max-height: 46px;
  }

  .proof-item-badge img {
    max-height: 62px;
  }

  .moments {
    padding: var(--section-space) 0;
  }

  .moments-heading {
    display: block;
    margin-bottom: var(--section-heading-gap);
  }

  .section-heading h2 {
    margin: var(--eyebrow-gap) 0 0;
    font-size: 3.45rem;
    line-height: var(--heading-line-height);
  }

  .moment-row {
    grid-template-columns: 120px minmax(0, 1fr) 215px;
    min-height: 120px;
    gap: 34px;
  }

  .moment-shape {
    width: 92px;
    height: 92px;
  }

  .moment-situation h3 {
    max-width: none;
    font-size: 2rem;
    line-height: 1.08;
  }

  .moment-situation > p {
    max-width: 620px;
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
  }

  .moment-row > .text-link {
    justify-self: start;
  }

  .testimonial-band {
    background: var(--paper);
    padding: var(--section-space-compact) 0;
  }

  .testimonial-inner {
    grid-template-columns: 80px minmax(0, 1fr) 320px;
    gap: 34px;
  }

  .quote-mark {
    font-size: 7.2rem;
  }

  .testimonial-inner blockquote > p {
    max-width: 760px;
    font-size: 2.45rem;
    font-style: normal;
  }

  .book-band {
    padding: var(--section-space-compact) 0;
  }

  .book-grid {
    grid-template-columns: minmax(260px, 0.68fr) minmax(350px, 0.88fr) minmax(300px, 0.72fr);
    min-height: 360px;
    gap: 56px;
  }

  .book-cover-wrap {
    min-height: 360px;
  }

  .book-cover {
    top: 50%;
    left: 50%;
    width: 235px;
  }

  .book-copy h2 {
    font-size: 3.3rem;
  }

  .book-quote p {
    font-size: 1.85rem;
  }

  .field-notes {
    padding: var(--section-space) 0;
  }

  .notes-heading {
    grid-template-columns: auto minmax(300px, 1fr) auto;
    align-items: center;
    gap: var(--heading-gap) var(--layout-gap);
    margin-bottom: var(--section-heading-gap);
  }

  .notes-heading h2 {
    font-size: 3.25rem;
    white-space: nowrap;
  }

  .notes-heading > p {
    margin: 0;
  }

  .notes-all {
    margin: 0;
  }

  .final-cta {
    padding: var(--section-space) 0;
  }

  .final-cta-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(340px, 0.62fr);
    min-height: 0;
    gap: 90px;
  }

  .final-cta h2 {
    max-width: 500px;
    font-size: 3.25rem;
  }

  .final-cta-copy {
    max-width: 580px;
  }

  .site-footer {
    padding: 26px 0 var(--space-4);
  }

  .footer-grid {
    grid-template-columns: minmax(250px, 0.7fr) minmax(390px, 1fr) minmax(320px, 0.8fr);
    gap: 56px;
  }

  .footer-brand {
    min-height: 130px;
  }

  .footer-brand > p {
    margin-top: var(--space-4);
  }

  .footer-label {
    margin-bottom: 14px;
  }

  .footer-links a {
    margin-bottom: var(--space-2);
  }

  .newsletter {
    padding-left: 34px;
  }

  .newsletter h2 {
    font-size: 2rem;
  }

  .newsletter form {
    margin-top: var(--space-4);
  }

  .footer-bottom {
    margin-top: 18px;
    padding-top: var(--space-3);
  }

  .cta-quote p {
    font-size: 2.25rem !important;
  }

  .footer-brand > p,
  .newsletter > p:not(.footer-label) {
    line-height: 1.4;
  }
}

@media (max-width: 980px) {
  .moment-row {
    grid-template-columns: 95px minmax(0, 1fr) 170px;
  }

  .moment-row .text-link {
    grid-column: auto;
    margin-top: 0;
  }

  .moment-situation > p {
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0;
  }

  .notes-heading {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .notes-heading > p {
    grid-column: 1 / -1;
  }

  .notes-all {
    margin: 0;
  }
}

@media (max-width: 720px) {
  .moment-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .moment-row .text-link {
    grid-column: 2;
  }

  .notes-heading {
    display: block;
  }

  .notes-heading .notes-all {
    margin-top: var(--space-5);
  }

}

/* Grouped navigation and homepage discovery sections */
.nav-group {
  position: relative;
}

.nav-group summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary img {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.nav-group[open] summary img {
  transform: rotate(180deg);
}

.nav-group-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  width: max-content;
  min-width: 260px;
  transform: translateX(-50%);
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: var(--space-3) 20px;
  box-shadow: 5px 5px 0 rgba(23, 23, 22, 0.14);
}

.nav-group-menu::before {
  position: absolute;
  top: -13px;
  right: 0;
  left: 0;
  height: 13px;
  content: "";
}

.nav-group-menu a {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3) 0;
}

.nav-group-menu a:last-child {
  border-bottom: 0;
}

.mobile-nav {
  overflow-y: auto;
}

.mobile-nav-group {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 var(--space-3);
}

.mobile-nav-group > p {
  margin: 0 0 var(--space-2);
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mobile-nav-group a {
  display: block;
  border-bottom: 0;
  padding: var(--space-2) 0;
  font-size: 1.45rem;
}

.mobile-nav .mobile-nav-direct {
  padding: 20px 0;
  font-size: 1.45rem; /* the same size as the items inside the groups (Chris, 30 Sep 2026) */
}

.podcast-feature-copy h2 {
  margin: var(--eyebrow-gap) 0 0;
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.98;
}

.thinking-path {
  min-width: 0;
}

.thinking-path-feature {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(280px, 1fr);
  align-items: center;
  gap: 38px;
  border-right: 1px solid var(--rule);
  padding: 40px 46px 40px 0;
}

.thinking-path-feature figure {
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--white);
}

.thinking-path-feature figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thinking-path h3 {
  margin: var(--space-3) 0;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
}

.thinking-path > div > p:not(.eyebrow),
.thinking-path-compact > p:not(.eyebrow) {
  margin: 0 0 22px;
  color: var(--muted);
}

.thinking-path-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 0 40px 46px;
}

.thinking-path-compact:first-child {
  border-bottom: 1px solid var(--rule);
}

.thinking-path-compact h3 {
  font-size: 2.55rem;
}

.thinking-path .text-link {
  margin-top: auto;
}

.podcast-feature {
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: var(--section-space) 0;
}

.podcast-feature-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(420px, 1fr);
  align-items: center;
  gap: var(--layout-gap);
}

.podcast-feature-media {
  width: min(100%, 450px);
  aspect-ratio: 1 / 1;
  margin: 0;
  justify-self: center;
  overflow: hidden;
  background: var(--white);
}

.podcast-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-feature-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: var(--heading-gap) 0 var(--paragraph-gap);
  color: var(--muted);
}

.podcast-feature-latest {
  max-width: 720px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 var(--space-5);
}

.podcast-feature-latest p {
  margin: 0 0 var(--space-2);
  color: var(--rust);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.podcast-feature-latest h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.35rem;
  font-weight: 400;
  line-height: 1.05;
}

.podcast-feature .button-row {
  align-items: center;
  margin-top: var(--action-gap);
}

@media (max-width: 1180px) {
  .thinking-path-feature {
    grid-template-columns: minmax(190px, 0.65fr) minmax(250px, 1fr);
    gap: 28px;
    padding-right: 34px;
  }

  .thinking-path-compact {
    padding-left: 34px;
  }

  .podcast-feature-grid {
    gap: var(--layout-gap);
  }
}

@media (max-width: 980px) {

  .podcast-feature-grid {
    grid-template-columns: 1fr;
  }

  .thinking-path-feature {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
  }

  .thinking-path-compact {
    padding: 36px 0;
  }

  .podcast-feature-media {
    width: min(100%, 560px);
    justify-self: start;
  }
}

@media (max-width: 720px) {

  .podcast-feature-copy h2 {
    font-size: 3.2rem;
  }

  .thinking-path-feature {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }

  .thinking-path-feature figure {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .thinking-path h3 {
    font-size: 2.55rem;
  }

  .podcast-feature {
    padding: var(--section-space) 0;
  }

  .podcast-feature-grid {
    gap: var(--layout-gap);
  }

  .podcast-feature-latest h3 {
    font-size: 2rem;
  }
}

/* Chris link hub */

@media (min-width: 981px) and (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .mobile-figure,
  .mobile-stage {
    min-width: 0;
  }

  .book-grid {
    grid-template-columns: 0.8fr 1fr;
  }

  .book-cover-wrap {
    grid-row: 1 / span 2;
  }

  .book-grid > .book-quote {
    grid-column: 2;
  }

  .footer-grid {
    grid-template-columns: 0.75fr 1.25fr;
  }

  .footer-brand {
    grid-row: 1 / span 2;
  }

  .newsletter {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }

}

/* Composed service sections share a single boundary rule. */
/* .numbered-sequence is retired, but it stays in :is() because it sets this rule's specificity. */
.service-sections > :is(section, .numbered-sequence) + :is(section, .numbered-sequence) {
  border-top: 0;
}

/* Copy blocks own their internal rhythm; section padding owns the outer edge. */
.structured-copy-body > :last-child,
.prose > :last-child {
  margin-bottom: 0;
}

.structured-copy-body > :is(h3, h4):first-child {
  margin-top: 0;
}

/* A grid gap owns heading-to-copy spacing in split sections. */
.structured-section:not(.structured-section-media) .structured-copy > h2 {
  margin-bottom: 0;
}

.structured-section:not(.structured-section-media) .structured-copy {
  row-gap: var(--heading-gap);
}

/* Numbered rows put their padding inside the ruled columns, not on both layers. */

/* Founder homepage: existing type, paper and action roles; supplied portrait. */
.hero-founder,
.hero-founder .hero-grid {
  min-height: auto;
}
.hero-founder .hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--layout-gap);
}
.hero-founder h1 {
  max-width: 12ch;
}
.hero-identity {
  max-width: 42ch;
  margin-top: var(--space-5);
}
.founder-portrait {
  margin: 0;
}
.founder-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.discovery-endorsement {
  margin: 0;
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}
.discovery-endorsement figcaption small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}
.discovery-endorsement blockquote {
  margin: 0 0 var(--space-5);
  font-family: var(--serif-text);
  font-size: var(--text-large);
}
@media (max-width: 700px) {
  .hero-founder .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-founder .founder-portrait {
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .hero-founder .founder-portrait { grid-row: 1; }
  .hero-founder .founder-portrait img { aspect-ratio: 16 / 7; object-position: center 8%; }
}

.field-notes .content-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .field-notes .content-card-grid { grid-template-columns: 1fr; }
}

.positioning-copy > p {
  font-family: var(--sans);
  font-size: var(--text-large);
  line-height: var(--line-height-body);
}
/* Homepage: the remaining endorsements continue the Age of Discovery band above them. */
.book-band-age-of-discovery:has(+ .intellectual-work) { border-bottom: 0; padding-bottom: var(--space-7); }
.intellectual-work { background: var(--paper-deep); padding-top: 0; border-bottom: 1px solid var(--rule); }
.intellectual-work .content-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
:is(.intellectual-work, .in-practice-quotes) .discovery-endorsement { border-top: 0; padding-top: 0; }
:is(.intellectual-work, .in-practice-quotes) .discovery-endorsement blockquote { margin-bottom: var(--space-3); font-style: italic; }
/* Attribution: a short rust dash, then the name and title indented beneath the quotation. */
:is(.intellectual-work, .in-practice-quotes) .discovery-endorsement figcaption { position: relative; padding-left: var(--space-6); }
:is(.intellectual-work, .in-practice-quotes) .discovery-endorsement figcaption::before {
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--rust);
  content: "";
}
@media (max-width: 700px) {
  .intellectual-work .content-card-grid { grid-template-columns: 1fr; }
}

/* Keep the wider Newsreader headline balanced beside the tablet portrait. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero-founder h1 { font-size: 3.5rem; line-height: 1.06; }
}

/* Video hero: the TED loop sits full-bleed behind the founder copy on an ink surface. */
.hero-video {
  --hero-video-scrim: color-mix(in srgb, var(--ink) 74%, transparent);
  --hero-video-scrim-soft: color-mix(in srgb, var(--ink) 30%, transparent);
  --hero-video-scrim-edge: color-mix(in srgb, var(--ink) 8%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 18%, transparent);
}
.hero-video .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(calc(100svh - 87px), 860px);
  align-items: center;
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.hero-video-media,
.hero-video-media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-video-media::after {
  content: "";
  background:
    linear-gradient(to right, var(--hero-video-scrim) 0%, var(--hero-video-scrim-soft) 55%, var(--hero-video-scrim-edge) 100%),
    linear-gradient(to top, var(--hero-video-scrim) 0%, transparent 42%);
}
.hero-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-video .eyebrow {
  color: var(--ochre);
}
.hero-video h1 {
  max-width: 11ch;
  color: var(--paper);
}
.hero-video h1 {
  margin-top: 0;
}
.hero-video .hero-identity {
  color: color-mix(in srgb, var(--paper) 76%, transparent);
}
.hero-video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: 3;
  min-height: var(--action-target-size);
  padding: var(--space-2) var(--space-4);
  border: var(--action-line-width) solid color-mix(in srgb, var(--paper) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: var(--action-transition);
}
.hero-video-toggle:focus-visible {
  outline: var(--action-focus-width) solid var(--action-focus-color);
  outline-offset: var(--action-focus-offset);
}
.hero-video-toggle:is(:hover, :focus-visible) {
  border-color: var(--paper);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}
@media (max-width: 980px) {
  .hero-video h1 {
    max-width: 12ch;
  }
}
@media (max-width: 700px) {
  .hero-video .hero-grid {
    min-height: min(calc(100svh - 70px), 720px);
    padding-top: var(--space-9);
    padding-bottom: var(--space-10);
  }
  .hero-video-player {
    object-position: 24% center;
  }
  .hero-video-media::after {
    background: linear-gradient(to top, var(--hero-video-scrim) 0%, var(--hero-video-scrim-soft) 60%, var(--hero-video-scrim-edge) 100%);
  }
  .hero-video-toggle {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-toggle {
    transition: none;
  }
}

/* New thinking on the homepage takes the Uncertain by Design hero palette: paper on ink, ochre accents. */
.field-notes-dark {
  --action-focus-color: var(--ochre);
  background: var(--ink);
  color: var(--paper);
}
.field-notes-dark .notes-heading > p,
.field-notes-dark .content-card-summary {
  color: var(--on-ink-muted);
}
.field-notes-dark .content-card-meta {
  color: var(--ochre);
}
.field-notes-dark .content-card-grid {
  border-top-color: var(--on-ink-rule);
}
.field-notes-dark .content-card-grid > .content-card::before {
  border-left-color: var(--on-ink-rule);
}
.field-notes-dark .text-link::after {
  background: var(--ochre);
}
.field-notes-dark .text-link img {
  filter: var(--action-icon-light);
}
.notes-channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-bottom: 0;
  font-size: 1rem;
}
.notes-channels a {
  color: var(--ink);
}
.field-notes-dark .notes-channels a {
  color: var(--paper);
}
.field-notes-dark .notes-channels > span {
  color: var(--on-ink-muted);
}

/* In Practice on the homepage: heading, logo wall, the engagements that can't be named, then what clients say. One section in three parts. */
.in-practice { padding-bottom: 0; }
.in-practice .section-heading { margin-bottom: 0; }
.in-practice + .proof-home { border-bottom: 0; background: transparent; padding: var(--space-8) 0 var(--space-6); }
.in-practice + .proof-home p { display: none; }
.in-practice-quotes { padding-top: 0; }
.in-practice-current {
  max-width: 760px;
  margin: 0 auto var(--space-9);
  color: var(--muted);
  text-align: center;
}
.in-practice-quotes .content-card-grid { border-top: 0; }
/* Nine logos sit three by three on tablets and phones; three quotations stay three across until the phone breakpoint. */
@media (max-width: 980px) {
  .in-practice + .proof-home .proof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-practice-quotes .content-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .in-practice-quotes .content-card-grid { grid-template-columns: 1fr; }
  .in-practice + .proof-home .proof-list { gap: var(--space-6) var(--space-4); }
  .in-practice + .proof-home .proof-item img { max-width: 100%; }
}

/* About New Geo on the homepage: the 3D Calder mobile hangs on the left, the words sit on the right. */
.positioning-grid-mobile {
  grid-template-columns: minmax(280px, 0.8fr) minmax(440px, 1fr);
  align-items: center;
}
.positioning-grid-mobile .positioning-heading { margin-bottom: var(--space-7); }
.positioning .positioning-mobile {
  height: 560px;
  min-height: 0;
  aspect-ratio: auto;
}
/* The canvas runs wider than its column, out into the page margin, so the mobile has room to swing. */
.positioning .positioning-mobile canvas { inset: 0 -10% 0 -22%; width: 132%; }
@media (max-width: 980px) {
  .positioning .positioning-mobile canvas { inset: 0; width: 100%; }
}
/* No tonal wedge behind it here: the mobile hangs in clear air. */
.positioning .positioning-mobile::before { content: none; }
@media (max-width: 980px) {
  .positioning-grid-mobile { grid-template-columns: 1fr; }
  .positioning .positioning-mobile { height: 400px; order: 2; }
}
@media (max-width: 700px) {
  /* Phones: the mobile runs the full width of the screen, past the page gutters. */
  .positioning { overflow-x: clip; }
  .positioning .positioning-mobile { width: 100vw; height: 400px; margin-inline: calc(50% - 50vw); }
}

/* The homepage close speaks to the reader directly, so its sentence is larger and in full white. */
.final-cta-invitation {
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1.4;
}

/* Footer Calder motif: a band of its own closing the footer on small screens,
   the lower-left corner on wide ones. Never layered under text. */
.site-footer {
  position: relative;
}

.footer-calder {
  display: block;
  width: min(100%, 525px);
  height: auto;
  margin-top: var(--space-7);
  margin-bottom: -26px;
  pointer-events: none;
}

@media (max-width: 980px) {
  .footer-brand {
    min-height: 0;
  }
}

/* Tablet: the motif fades back into the empty brand column, behind the content. */
@media (min-width: 721px) and (max-width: 980px) {
  .site-footer > .shell {
    position: relative;
    z-index: 1;
  }

  .footer-calder {
    position: absolute;
    z-index: 0;
    top: 270px;
    left: 0;
    width: clamp(370px, 51vw, 500px);
    margin: 0;
    opacity: 0.65;
  }
}

@media (min-width: 981px) {
  .footer-calder {
    position: absolute;
    bottom: 78px;
    left: 0;
    width: clamp(300px, 28vw, 400px);
    margin: 0;
  }

  .footer-brand {
    min-height: 410px;
  }
}

/* Phone: the footer's bottom row stacks, so nothing runs off the edge. */
@media (max-width: 720px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-bottom > div {
    justify-self: start;
  }
}

/* Speaking: a deliberate rhythm of bands. Light tones alternate; the TED talk sits on the ink of
   Uncertain by Design, which it is the background to; the booking form is its own near-white place. */
[data-source-path="/speaking"] .structured-section-cards {
  background: var(--paper);
}

[data-source-path="/speaking"] .client-voices {
  padding-top: var(--section-space-compact);
  padding-bottom: var(--section-space-compact);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

[data-source-path="/speaking"] .structured-section-ted {
  --action-focus-color: var(--ochre);
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}

[data-source-path="/speaking"] .structured-section-ted .talk-feature-title {
  color: var(--on-ink-muted);
}

[data-source-path="/speaking"] .structured-section-ted a {
  color: var(--paper);
}

[data-source-path="/speaking"] .book-band-basecamp {
  border-bottom: 1px solid var(--rule);
}

[data-source-path="/speaking"] .conversion-panel-speaking {
  background: var(--white);
}

/* A rewritten card section keeps the comparison spacing: the cards layout's row gap had doubled the space under "Formats". */
.structured-section-cards.structured-section-comparison > .structured-section-grid {
  row-gap: 0;
}

/* Client quotes on Speaking read at the size of a pull quote, not a caption. */
[data-source-path="/speaking"] .client-voices .discovery-endorsement blockquote {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-source-path="/speaking"] .client-voices .discovery-endorsement figcaption {
  margin-top: var(--space-4);
}

/* A short heading that says why the books are on this page. */
.book-band-intro {
  padding: var(--section-space-compact) 0 0;
  background: var(--paper-deep);
}

.book-band-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: 1.05;
}

.book-band-intro p {
  max-width: 660px;
  margin: var(--heading-gap) 0 0;
}

@media (max-width: 720px) {
  [data-source-path="/speaking"] .client-voices .discovery-endorsement blockquote {
    font-size: 1.3125rem;
  }
}

/* Speaking: one size for every section heading (the H1 is the only larger one). The TED section, the
   booking panel, the client list and the books heading had each set their own. */
[data-source-path="/speaking"] .structured-section-ted .structured-copy h2,
[data-source-path="/speaking"] .conversion-panel-copy h2,
[data-source-path="/speaking"] .speaking-clients h2,
[data-source-path="/speaking"] .book-band-intro h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/speaking"] .structured-section-ted .structured-copy h2,
  [data-source-path="/speaking"] .conversion-panel-copy h2,
  [data-source-path="/speaking"] .speaking-clients h2,
  [data-source-path="/speaking"] .book-band-intro h2 {
    font-size: 2.7rem;
  }
}

/* Under "My books" the two titles are its children, so they sit a step below it at every width. */
[data-source-path="/speaking"] .book-copy h2 {
  font-size: 2.6rem;
}

@media (max-width: 720px) {
  [data-source-path="/speaking"] .book-copy h2 {
    font-size: 2.1rem;
  }
}

/* Foresight (/advisory): a rhythm of bands. The two sections that make the AI argument sit together on
   ink, as the TED talk does on Speaking; the rest alternate; the inquiry form is its own near-white place. */
[data-source-path="/advisory"] #the-machine-reads,
[data-source-path="/advisory"] #how-not-to-use-ai {
  --action-focus-color: var(--ochre);
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}

[data-source-path="/advisory"] #how-not-to-use-ai {
  padding-top: 0;
}

[data-source-path="/advisory"] #the-machine-reads strong {
  color: inherit;
}

[data-source-path="/advisory"] #what-it-grows-into,
[data-source-path="/advisory"] #what-you-wont-get {
  background: var(--paper-deep);
}

[data-source-path="/advisory"] .conversion-panel-advisory {
  background: var(--white);
}

/* Three movements, three columns; four refusals in one row. */
@media (min-width: 981px) {
  [data-source-path="/advisory"] #how-it-works .structured-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-source-path="/advisory"] #what-you-wont-get .structured-feature-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Foresight: one size for every section heading (the H1 is the only larger one). */
[data-source-path="/advisory"] .conversion-panel-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/advisory"] .conversion-panel-copy h2 {
    font-size: 2.7rem;
  }
}

/* Foresight hero: the instrument itself, as a typeset specimen of one month's account. Sans for the
   machine's ledger, serif for what a person wrote; rust means "moved" and nothing else. */
.foresight-specimen {
  --specimen-small: 0.8125rem;
  --specimen-tiny: 0.6875rem;
  font-family: var(--sans);
  color: var(--ink);
}

.foresight-specimen .specimen {
  padding: var(--space-5) var(--space-6) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--white);
}

.foresight-specimen .specimen-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.foresight-specimen .specimen-label {
  font-size: var(--specimen-tiny);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foresight-specimen .specimen-label-muted {
  color: var(--muted);
  font-weight: 500;
}

.foresight-specimen .specimen-gamble {
  margin: var(--space-5) 0 0;
  font-family: var(--serif-text);
  font-size: 1.25rem;
  line-height: 1.35;
}

.foresight-specimen .specimen-stem {
  margin: 0;
}

/* The fork: the stem, then its two branches on their own lines with OR between them. */
.foresight-specimen .specimen-fork {
  margin: var(--space-1) 0 0;
  padding: 0 0 0 var(--space-6);
  list-style: none;
}

.foresight-specimen .specimen-fork li {
  position: relative;
}

.foresight-specimen .specimen-branch {
  font-family: var(--sans);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.foresight-specimen .specimen-fork .specimen-branch {
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: 0.2em;
}

.foresight-specimen .specimen-or {
  margin-left: 0.2em;
  font-family: var(--sans);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* What the plans assume sits apart from the gamble, on the deeper paper, so the card's logic reads at a glance. */
.foresight-specimen .specimen-assumes {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-deep);
  font-family: var(--serif-text);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink);
}

.foresight-specimen .specimen-assumes .specimen-key {
  margin-bottom: var(--space-1);
}

.foresight-specimen .specimen-assumes .specimen-branch {
  font-style: normal;
  margin-right: 0.2em;
}

.foresight-specimen .specimen-key {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--sans);
  font-size: var(--specimen-tiny);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.foresight-specimen .specimen-ledger {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.foresight-specimen .specimen-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--specimen-small);
  line-height: 1.45;
}

.foresight-specimen .specimen-status {
  font-size: var(--specimen-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15em;
}

.foresight-specimen .specimen-row-moved .specimen-status {
  color: var(--rust);
}

.foresight-specimen .specimen-row-moved .specimen-status::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--rust);
  vertical-align: 0.05em;
}

.foresight-specimen .specimen-row-unread,
.foresight-specimen .specimen-row-unwatched {
  color: var(--muted);
}

.foresight-specimen .specimen-body {
  display: block;
}

.foresight-specimen .specimen-what {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.foresight-specimen .specimen-row-unread .specimen-what,
.foresight-specimen .specimen-row-unwatched .specimen-what {
  color: var(--muted);
}

.foresight-specimen .specimen-note {
  display: block;
  color: var(--muted);
}

.foresight-specimen .specimen-receipt {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.foresight-specimen .specimen-foot {
  margin-top: var(--space-4);
  text-align: right;
  font-family: var(--serif-text);
  font-size: var(--specimen-small);
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 720px) {
  .foresight-specimen .specimen {
    padding: var(--space-4);
  }

  .foresight-specimen .specimen-row {
    grid-template-columns: 6.5em minmax(0, 1fr);
  }
}

/* A section's pull-out: an unfinished sentence set large under its heading, with the site's drawn
   underline standing where the ending goes. Third child of the split grid, so it lands under the heading. */
.rewritten-heading h2 {
  margin-bottom: 0;
}

.rewritten-pullout {
  max-width: 440px;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--paper-deep);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
}

/* The blank is a fill-in line at the baseline, in rust. */
.rewritten-pullout-blank {
  display: inline-block;
  width: 4.5em;
  height: 0.9em;
  vertical-align: -0.1em;
  border-bottom: 2px solid var(--rust);
}

@media (max-width: 720px) {
  .rewritten-pullout {
    font-size: 1.6rem;
    max-width: none;
  }
}

/* The reading log: a paper slip on the ink band, under "The machine reads." A window six rows tall; new
   rows arrive at the top and the oldest leaves at the bottom. Same ledger type as the hero specimen. */
.foresight-log {
  --specimen-small: 0.8125rem;
  --specimen-tiny: 0.6875rem;
  --log-row: 3.1rem;
  --log-rows: 6;
  max-width: 440px;
  margin: var(--space-6) 0 0;
  font-family: var(--sans);
  color: var(--ink);
}

.foresight-log .log {
  padding: var(--space-4) var(--space-5);
  background: var(--white);
}

.foresight-log .log-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--specimen-tiny);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The live dot breathes on the log's own tempo; it holds still under reduced motion. */
.foresight-log .log-live {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--muted);
  animation: log-breathe 2800ms ease-in-out infinite;
}

@keyframes log-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.foresight-log .log-rows {
  position: relative;
  height: calc(var(--log-row) * var(--log-rows));
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.foresight-log .log-row {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding-top: 0.45rem;
  height: var(--log-row);
  border-bottom: 1px solid var(--paper-deep);
  font-size: var(--specimen-small);
  line-height: 1.3;
  color: var(--ink);
}

.foresight-log .log-row-entering {
  animation: log-enter 600ms ease-out;
}

@keyframes log-enter {
  from { opacity: 0; transform: translateY(-0.4em); }
  to { opacity: 1; transform: none; }
}

.foresight-log .log-time,
.foresight-log .log-lang,
.foresight-log .log-status {
  font-size: var(--specimen-tiny);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.foresight-log .log-signal {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.foresight-log .log-source {
  display: block;
  color: var(--muted);
  font-size: var(--specimen-tiny);
}

.foresight-log .log-source::after {
  content: " " attr(data-lang);
  letter-spacing: 0.08em;
}

.foresight-log .log-status {
  text-transform: uppercase;
  font-weight: 600;
}

.foresight-log .log-row-moved .log-status {
  color: var(--rust);
}

.foresight-log .log-row-unread {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .foresight-log .log-row-entering,
  .foresight-log .log-live {
    animation: none;
  }
}

/* On ink a pull-out has no panel: paper type, larger, with the sentence that turns set in ochre,
   the ink-band accent the homepage's New thinking band already uses. */
.rewritten-pullout-ink {
  max-width: 460px;
  padding: 0;
  background: none;
  font-size: 2.25rem;
  color: var(--paper);
}

.rewritten-pullout-ink .rewritten-pullout-turn {
  color: var(--ochre);
}

@media (max-width: 720px) {
  .rewritten-pullout-ink {
    font-size: 1.75rem;
  }
}

/* Shared by the Foresight architecture drawing (which carries the .foresight-hub class): ink type, states for a
   hovered or focused part, and the caption that says what it does. */
.foresight-hub {
  max-width: 460px;
  margin: var(--space-6) 0 0;
  color: var(--ink);
}

.foresight-hub svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.foresight-hub text {
  fill: currentColor;
  font-family: var(--sans);
}

.foresight-hub .hub-sub {
  font-size: 10px;
  fill: var(--muted);
}

.foresight-hub .hub-spoke-later {
  stroke-dasharray: 4 5;
}

.foresight-hub .hub-spoke-out,
.foresight-hub .hub-node-out {
  color: var(--rust);
}

.foresight-hub .hub-node {
  cursor: pointer;
  outline: none;
}

.foresight-hub .hub-spoke.is-active {
  stroke-width: 2.5;
}

.foresight-hub .hub-caption {
  min-height: 3.2em;
  margin: var(--space-3) 0 0;
  font-family: var(--serif-text);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}

.foresight-hub .hub-caption.is-set {
  color: var(--ink);
}

@media (max-width: 720px) {
  .foresight-hub {
    max-width: none;
  }
}

/* The architecture drawing sits in the heading column like the page's other devices, told down the page.
   Boxes are paper on the band; dashed parts arrive as it grows; the judgment box is rust, the one place a
   person decides. */
.foresight-architecture {
  max-width: 440px;
  margin-top: var(--space-6);
}

.foresight-architecture .arch-heads text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--muted);
}

.foresight-architecture .arch-box rect {
  fill: var(--white);
  stroke: currentColor;
  stroke-width: 1.25;
  transition: fill 160ms ease, stroke-width 160ms ease;
}

.foresight-architecture .arch-box .arch-rows rect {
  fill: none;
  stroke-width: 1;
}

.foresight-architecture .arch-rows .arch-later,
.foresight-architecture .hub-node-later > rect {
  stroke-dasharray: 4 3;
}

.foresight-architecture .arch-rows text {
  font-size: 11.5px;
}

.foresight-architecture .arch-later-text {
  fill: var(--muted);
}

.foresight-architecture .arch-title {
  font-size: 13px;
  font-weight: 600;
}

.foresight-architecture .arch-line {
  font-size: 11.5px;
}

.foresight-architecture .arch-notes text {
  font-size: 10px;
  fill: var(--muted);
}

.foresight-architecture .arch-loop {
  stroke-width: 1;
}

/* The two stacks: layers behind the front box, dashed, for what accrues. */
.foresight-architecture .arch-stack .arch-stack-later {
  fill: var(--white);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.foresight-architecture .hub-node-out > rect {
  stroke: var(--rust);
}

.foresight-architecture .arch-edge-extra.is-active {
  stroke-width: 2.25;
}

.foresight-architecture .hub-node-gate > rect {
  fill: var(--rust);
  stroke: var(--rust);
}

.foresight-architecture .hub-node-gate text {
  fill: var(--paper);
}

.foresight-architecture .hub-node-gate .hub-sub {
  fill: var(--on-ink-muted);
}

.foresight-architecture .hub-node:hover > rect,
.foresight-architecture .hub-node:focus-visible > rect,
.foresight-architecture .hub-node.is-active > rect {
  fill: var(--paper-deep);
  stroke-width: 2.25;
}

.foresight-architecture .hub-node-gate:hover > rect,
.foresight-architecture .hub-node-gate:focus-visible > rect,
.foresight-architecture .hub-node-gate.is-active > rect {
  fill: var(--rust);
  stroke: var(--ink);
}

.foresight-architecture .arch-edges path.is-active {
  stroke-width: 2.25;
}

.foresight-architecture .hub-caption {
  max-width: 72ch;
  min-height: 2.9em;
}

/* A numbered comparison section: a large Tiempos numeral in rust above each entry (Chris, 2026-09-22). */
.structured-feature-number {
  margin: 0 0 var(--space-2);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--rust);
}

/* A blank inside running copy, the pull-out's fill-in line at text size. */
.copy-blank {
  display: inline-block;
  width: 3.5em;
  height: 0.8em;
  vertical-align: -0.05em;
  border-bottom: 1.5px solid var(--rust);
}

/* Foresight: prose sections read at the size of the card sections (20px; 18px on phones), so the page has one
   text size from top to bottom. The container carries it; the .content-page floor lets children inherit. */
[data-source-path="/advisory"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

/* Thought partnership (/compass): the same rhythm of bands as Foresight. "The shape of a year" sits on ink;
   "The other half" and the refusals on deeper paper; the inquiry form is its own near-white place. */
[data-source-path="/compass"] #the-shape-of-a-year {
  --action-focus-color: var(--ochre);
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}

[data-source-path="/compass"] #the-other-half,
[data-source-path="/compass"] #what-you-wont-get {
  background: var(--paper-deep);
}

/* A pull-out panel on the deeper paper is set on white, so it still reads as a panel; two sentences want more
   air between the lines than Foresight's one-sentence pull-outs (1.25, Chris, 2026-09-23). */
[data-source-path="/compass"] #the-other-half .rewritten-pullout {
  background: var(--white);
  line-height: 1.25;
}

[data-source-path="/compass"] .conversion-panel-compass {
  background: var(--white);
}

/* Four refusals in one row. */
@media (min-width: 981px) {
  [data-source-path="/compass"] #what-you-wont-get .structured-feature-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Thought partnership: one size for every section heading (the H1 is the only larger one), and one text size. */
[data-source-path="/compass"] .conversion-panel-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/compass"] .conversion-panel-copy h2 {
    font-size: 2.7rem;
  }
}

[data-source-path="/compass"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

/* The shape of a year: the rhythm told down the page, in the heading column of the ink band. Paper lines on ink;
   the loop is dashed (next year, not yet), and its label is the band's ochre turn. */
.year-rhythm {
  max-width: 440px;
  margin: var(--space-6) 0 0;
  color: inherit;
}

.year-rhythm svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.year-rhythm text {
  fill: currentColor;
  font-family: var(--sans);
  font-size: 11.5px;
}

.year-rhythm .yr-title {
  font-size: 13px;
  font-weight: 600;
}

.year-rhythm .yr-cell {
  font-size: 11px;
}

.year-rhythm .yr-sub,
.year-rhythm .yr-notes text {
  font-size: 10.5px;
  fill: var(--on-ink-muted);
}

.year-rhythm .yr-boxes rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

/* The arrows between the boxes are ochre, the band's accent, so they read apart from the outlines; the loop is ochre
   too, and dashed. Arrowheads are filled by class, since a marker's fill does not follow the path it sits on. */
.year-rhythm .yr-line,
.year-rhythm .yr-edges {
  stroke: var(--ochre);
  stroke-width: 1.25;
}

.year-rhythm .yr-loop {
  stroke: var(--ochre);
}

.year-rhythm .yr-arrowhead {
  fill: currentColor;
}

.year-rhythm .yr-arrowhead-accent {
  fill: var(--ochre);
}

.year-rhythm .yr-notes .yr-turn {
  fill: var(--ochre);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .year-rhythm {
    max-width: none;
  }
}

/* A photograph or screenshot in the heading column of a rewritten section. The phone frame keeps a tall
   screenshot at a phone's width, with a hairline and the device's corners. */
.rewritten-image {
  margin: var(--space-6) 0 0;
  max-width: 440px;
}

/* A photograph in the heading column takes the column's full width at desktop (Chris, 2026-09-25); between
   721px and 980px the column stacks above the prose at the page's full width, so the photograph holds at 560px
   there rather than becoming a banner. */
.rewritten-image-photo,
.rewritten-image-drawing {
  max-width: none;
}

@media (min-width: 721px) and (max-width: 980px) {
  .rewritten-image-photo,
  .rewritten-image-drawing {
    max-width: 560px;
  }
}

.rewritten-image img {
  display: block;
  width: 100%;
  height: auto;
}

.rewritten-image-phone {
  max-width: 300px;
}

.rewritten-image-phone img {
  /* A phone's bezel: 3px of ink (Chris, 2026-09-25, chosen from a sheet of six weights; the hairline read as a card). */
  border: 3px solid var(--ink);
  border-radius: 32px;
}

/* Two phone screens staggered in the heading column: the first top right and in front, nearest the prose; the
   second below and to the left, behind it. A grid lets them overlap; the second's top margin is a share of the
   column's width, so the stagger scales with it. */
.rewritten-images-staggered {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 440px;
  margin: var(--space-6) 0 0;
}

.rewritten-images-staggered .rewritten-image {
  grid-row: 1;
  margin: 0;
  max-width: none;
}

.rewritten-images-staggered .rewritten-image:first-child {
  grid-column: 3 / 6;
  z-index: 1;
}

.rewritten-images-staggered .rewritten-image:first-child img {
  box-shadow: -14px 10px 30px rgba(23, 23, 22, 0.14);
}

.rewritten-images-staggered .rewritten-image:last-child {
  grid-column: 1 / 4;
  margin-top: 22%;
}

.rewritten-images-staggered img {
  background: var(--paper);
}

/* A section's lead: its first sentence set in the text column as a call-out, in the display serif a step above the
   prose, on a white panel with a hairline (Chris, 2026-09-23), with the sentence that answers it beneath in the sans. */
.structured-copy-body > .rewritten-lead {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--white);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
}

.structured-copy-body > .rewritten-lead .rewritten-lead-after {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--sans);
  font-size: var(--feature-text-size);
  line-height: 1.5;
}

/* The same call-out box placed in the heading column instead (leadPlacement: "heading" on the page section). */
.rewritten-heading .rewritten-lead {
  max-width: 440px;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--white);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
}

@media (max-width: 720px) {
  .structured-copy-body > .rewritten-lead,
  .rewritten-heading .rewritten-lead {
    font-size: 1.6rem;
  }

  .rewritten-heading .rewritten-lead {
    max-width: none;
  }
}

/* Conversations (/campfire/): Chris's page, rewritten wholesale (2026-09-23). Bands alternate down the page; the
   essay sits on ink with its pull-out in the band's ochre turn; four refusals in one row; one size for every
   section heading (the H1 is the only larger one) and one text size. */
[data-source-path="/campfire"] #what-happens,
[data-source-path="/campfire"] #what-you-wont-get {
  background: var(--paper-deep);
}

[data-source-path="/campfire"] #most-of-us-perform {
  --action-focus-color: var(--ochre);
  border-bottom: 0;
  background: var(--ink);
  color: var(--paper);
}

/* Emphasis in the essay on ink keeps the band's colour (.structured-copy em sets ink, which vanishes here). */
[data-source-path="/campfire"] #most-of-us-perform em {
  color: inherit;
}

@media (min-width: 981px) {
  [data-source-path="/campfire"] #what-you-wont-get .structured-feature-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

[data-source-path="/campfire"] .conversion-panel-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/campfire"] .conversion-panel-copy h2 {
    font-size: 2.7rem;
  }
}

[data-source-path="/campfire"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

/* A film in a service hero (Conversations, 2026-09-23). Full-bleed: behind the copy on ink, reusing the homepage
   hero's media, scrim and pause control (.hero-video, .hero-video-media, .hero-video-toggle). Half: in the media
   column beside the copy on paper, 16:9, with the same pause control in its corner. */
.content-hero-film-full {
  border-bottom: 0;
}

.content-hero-film-full .content-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(calc(100svh - 87px), 760px);
  align-items: center;
}

.content-hero-film-full .content-hero-copy h1 {
  max-width: 14ch;
  color: var(--paper);
}

.content-hero-film-full .content-deck {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.content-hero-film-full .eyebrow {
  color: var(--ochre);
}

.content-hero-film {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.content-hero-film-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-hero-film .hero-video-toggle {
  right: var(--space-4);
  bottom: var(--space-4);
}

/* The sound button sits in the film's other corner (half frame) or the band's other corner (full-bleed). */
.content-hero-film .hero-video-sound {
  right: auto;
  left: var(--space-4);
}

.content-hero-film-full .hero-video-sound {
  right: auto;
  left: var(--gutter);
}

@media (max-width: 700px) {
  .content-hero-film-full .content-hero-grid {
    min-height: min(calc(100svh - 70px), 640px);
  }
}

/* A marker-pen highlight behind one word: Chris's brush stroke (src/images/highlight-stroke.png, an alpha mask) filled
   with the highlighter yellow, drawn behind the text. Trusted copy marks the word with <mark class="highlight">. */
mark.highlight {
  position: relative;
  isolation: isolate;
  white-space: nowrap; /* the stroke is one box behind the phrase, so a phrase that wrapped collapsed it to a sliver (26 Sep 2026); highlights stay short */
  background: transparent;
  color: var(--ink); /* ink on the yellow wherever it sits, so a highlight on an ink band still reads */
}

mark.highlight::before {
  content: "";
  position: absolute;
  inset: -0.06em -0.18em -0.02em -0.22em;
  z-index: -1;
  background: var(--highlighter);
  -webkit-mask: url("/images/highlight-stroke.png") no-repeat center / 100% 100%;
  mask: url("/images/highlight-stroke.png") no-repeat center / 100% 100%;
}

/* A whole line or sentence under the marker: the stroke runs well past the text so its feathered tail lands
   beyond the full stop rather than on the last word, and the band is taller. */
mark.highlight-line::before {
  inset: -0.34em auto -0.28em -0.45em;
  width: calc(100% + 3em);
}

/* A lead line set plain: the ink pull-out's face and size in the text column, no panel (the ink band on
   Conversations, Chris, 2026-09-25). */
.structured-copy-body > .rewritten-lead-plain {
  padding: 0;
  border: 0;
  background: none;
  font-size: 2.25rem;
  color: inherit;
}

@media (max-width: 720px) {
  .structured-copy-body > .rewritten-lead-plain {
    font-size: 1.75rem;
  }
}

/* Who it’s for: the pull-out takes the column's full width (Chris, 2026-09-23: "W2"). */
[data-source-path="/campfire"] #who-its-for .rewritten-pullout {
  max-width: none;
}

/* Quotations in a rewritten section's text column (Conversations, "What people say", 2026-09-25): two across at
   desktop, the Speaking page's voice treatment (Tiempos, a rust dash before the name, the title beneath). */
.rewritten-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}

.rewritten-quotes .discovery-endorsement {
  border-top: 0;
  padding: 0;
}

/* The quiet treatment (Chris, 2026-09-25: "B"): no rust rule, no quotation marks. */
.rewritten-quotes .discovery-endorsement blockquote {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  font-style: italic;
}

.rewritten-quotes .discovery-endorsement::before,
.rewritten-quotes .discovery-endorsement blockquote::before,
.rewritten-quotes .discovery-endorsement blockquote p::before {
  content: none;
}

.rewritten-quotes .discovery-endorsement figcaption {
  position: relative;
  padding-left: var(--space-6);
  font-family: var(--sans);
}

.rewritten-quotes .discovery-endorsement figcaption::before {
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--rust);
  content: "";
}

@media (max-width: 720px) {
  .rewritten-quotes {
    grid-template-columns: 1fr;
  }

  .rewritten-quotes .discovery-endorsement blockquote {
    font-size: 1.3125rem;
  }
}

/* The forms on the three rewritten ways-to-work pages read at the page's text size, as their prose does (Chris,
   2026-09-25: "all forms to be 20px"). Set on the container: the .content-page size guard flattens a size declared
   on p, and children inherit through 1em. */
[data-source-path="/advisory"] .conversion-panel-copy,
[data-source-path="/compass"] .conversion-panel-copy,
[data-source-path="/campfire"] .conversion-panel-copy,
[data-source-path="/chris"] .conversion-panel-copy,
[data-source-path="/contact-us"] .conversion-panel-copy {
  font-size: var(--feature-text-size);
}

/* Chris's page (/chris/): the address on the back of his business card. */
.chris-hero-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-deep);
}

.chris-hero-photo img {
  object-fit: cover;
  object-position: center 30%;
}

/* One section-heading size on Chris's page; the form on deeper paper, as on the peer pages. */
.chris-page h2 {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 400;
  line-height: var(--heading-line-height);
}

.chris-page .conversion-panel {
  background: var(--paper-deep);
}

@media (max-width: 720px) {
  .chris-page h2 {
    font-size: 2.7rem;
  }
}

.chris-notes {
  border-bottom: 1px solid var(--rule);
  padding: var(--section-space) 0;
}

.chris-notes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  align-items: end;
  gap: var(--layout-gap);
}

.chris-notes-copy h2 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
  font-family: var(--serif);
  font-weight: 400;
}

/* One text size on the page (20px): set on a wrapper, since the .content-page floor ignores a size declared on p and would drag the eyebrow up too. */
.chris-copy {
  font-size: var(--feature-text-size);
}

.chris-notes-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
}

.chris-notes .conversion-form-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}

.chris-notes .conversion-form-compact .conversion-field {
  display: block;
}

@media (max-width: 980px) {
  .chris-notes-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.chris-writing {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}

.chris-elsewhere {
  background: var(--paper-deep);
}

.chris-writing-heading h2 {
  margin: var(--eyebrow-gap) 0 var(--heading-gap);
}

.chris-writing-heading p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 0 var(--space-6);
}

.chris-ways {
  border-bottom: 1px solid var(--rule);
}

.chris-ways-heading h2 {
  margin: var(--eyebrow-gap) 0 var(--space-6);
}

.chris-ways-list {
  border-top: 1px solid var(--ink);
}

.chris-ways-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.6fr) minmax(300px, 1.4fr) 200px;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--rule);
  padding: 30px 0;
  text-decoration: none;
  color: inherit;
}

.chris-ways-name {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.03;
}

.chris-ways-line {
  max-width: 560px;
  color: var(--muted);
  font-size: var(--feature-text-size);
  line-height: 1.45;
}

.chris-ways-cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.chris-ways-cta img {
  width: 16px;
  height: 16px;
  transition: transform 220ms ease;
}

.chris-ways-row:hover .chris-ways-cta img,
.chris-ways-row:focus-visible .chris-ways-cta img {
  transform: translateX(5px);
}

/* The homepage list's attention: the row takes a shade and a short rust rule grows from its left (Chris, 25 Sep 2026). */
.chris-ways-row {
  position: relative;
  transition: var(--transition-attention);
}

.chris-ways-row::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--balance-accent-length);
  height: var(--motion-press);
  background: var(--rust);
  content: "";
  scale: 0 1;
  transform-origin: left;
  transition: var(--transition-rule);
  pointer-events: none;
}

.chris-ways-row:focus-visible {
  background: var(--surface-attention);
}

.chris-ways-row:focus-visible::after {
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  .chris-ways-row:hover {
    background: var(--surface-attention);
  }

  .chris-ways-row:hover::after {
    scale: 1;
  }
}

.chris-ways-pass {
  max-width: 640px;
  margin: var(--space-6) 0 0;
  font-size: var(--feature-text-size);
}

.chris-ways-pass a {
  border-bottom: 1px solid var(--rust);
}

@media (max-width: 980px) {
  .chris-ways-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .chris-ways-cta {
    justify-self: start;
  }
}

.chris-elsewhere-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--layout-gap);
}

.chris-elsewhere-heading h2 {
  margin: var(--eyebrow-gap) 0 0;
}

.chris-elsewhere-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chris-elsewhere-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--feature-text-size);
  font-weight: 500;
}

.chris-elsewhere-list img {
  width: 16px;
  height: 16px;
}

@media (max-width: 980px) {
  .chris-elsewhere-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* About New Geo (/about/): Chris's page, rewritten wholesale (2026-09-26). Bands alternate down the page; the
   film sits in the hero's media half; one size for every section heading and one text size; the Field Notes
   close reuses the conversion panel with the footer's one-field form and no rust close after it. */
[data-source-path="/about"] #how-it-began {
  background: var(--paper-deep);
}

/* With "The company" gone (26 Sep), the bands run paper, deeper, paper, deeper (the book), paper (the close). */
[data-source-path="/about"] .conversion-panel {
  background: var(--white);
}

[data-source-path="/about"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

[data-source-path="/about"] .structured-copy h2,
[data-source-path="/about"] .book-band-intro h2,
[data-source-path="/about"] .book-copy h2,
[data-source-path="/about"] .conversion-panel-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/about"] .structured-copy h2,
  [data-source-path="/about"] .book-band-intro h2,
  [data-source-path="/about"] .book-copy h2,
  [data-source-path="/about"] .conversion-panel-copy h2 {
    font-size: 2.7rem;
  }
}

/* The intro band sits directly on the book feature it introduces. */
[data-source-path="/about"] .book-band-intro {
  padding-bottom: 0;
}

/* The Field Notes close: the footer's one-field form with its arrow beside the field (as on /chris/), and the
   page's text size for the copy and the book feature. */
[data-source-path="/about"] .conversion-panel-copy,
[data-source-path="/about"] .book-copy {
  font-size: var(--feature-text-size);
}

/* The one-field form sits centred on the copy beside it (Chris, 26 Sep 2026: here and on /ubd/); the panel keeps its full-height hairline. */
[data-source-path="/about"] .conversion-panel-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

[data-source-path="/about"] .conversion-form-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}

[data-source-path="/about"] .conversion-form-compact .conversion-field {
  display: block;
}

[data-source-path="/about"] .conversion-submit-compact {
  min-height: var(--action-target-size);
}

/* A dated record in the heading column (About New Geo, "Almost ten years of convening"): one line per entry,
   the year a rust Tiempos numeral, hairlines between rows, capped like every device in that column. */
.rewritten-record {
  max-width: 440px;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  color: var(--ink);
}

.rewritten-record-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}

.rewritten-record-row:last-child {
  border-bottom: 1px solid var(--rule);
}

.rewritten-record-year {
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rust);
  font-variant-numeric: lining-nums tabular-nums;
}

.rewritten-record-text {
  font-size: 0.9375rem;
  line-height: 1.45;
}

.rewritten-record-text em {
  font-style: italic;
  color: inherit;
}

@media (max-width: 720px) {
  .rewritten-record {
    max-width: none;
  }

  .rewritten-record-row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .rewritten-record-year {
    font-size: 1.3rem;
  }
}

/* How to Basecamp, /brave-new-ways-practical-guide/: the book in the reader's hands (docs/REFRAME.md, 2026-09-26).
   The hero shows the printed cover as the book features frame it: ink hairline, small radius, no drawn decoration. */
/* The hero on ink (Chris, 30 Sep 2026: "consistent with the other book projects"): every page that opens on ink is
   his writing (the two book hubs, the essays, the Atlas Project), and the jacket's yellow glows against it. The
   colours are the ink hero's: paper text, the deck at 82%, the eyebrow in ochre; the cover keeps a hairline. */
[data-source-path="/brave-new-ways-practical-guide"] .content-hero {
  --action-focus-color: var(--paper); /* the focus ring, as on the site's other ink surfaces */
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}

[data-source-path="/brave-new-ways-practical-guide"] .content-hero h1 {
  color: var(--paper);
}

[data-source-path="/brave-new-ways-practical-guide"] .content-hero .content-deck {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

[data-source-path="/brave-new-ways-practical-guide"] .content-hero .eyebrow {
  color: var(--ochre);
}

[data-source-path="/brave-new-ways-practical-guide"] .content-hero-media {
  display: flex;
  justify-content: center;
  aspect-ratio: auto; /* the shared media frame is 16:9; a portrait cover overflowed it and ran into the hero's bottom padding */
  height: auto;
}

[data-source-path="/brave-new-ways-practical-guide"] .content-hero-media img {
  width: min(100%, 400px);
  height: auto;
  margin: 0 auto; /* the <picture> wrapper is the flex item, so the image centres itself inside it */
  border: 2px solid color-mix(in srgb, var(--paper) 35%, transparent);
  border-radius: 3px;
}

/* Where the hero stacks, the cover sits centred under the copy like a product shot (Chris, 26 Sep 2026), not hung left. */
@media (max-width: 980px) {
  [data-source-path="/brave-new-ways-practical-guide"] .content-hero-media {
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 720px) {
  [data-source-path="/brave-new-ways-practical-guide"] .content-hero-media img {
    width: min(100%, 300px);
  }
}

/* Bands alternate down the page; one size for every section heading and one text size, as on the other rewritten pages. */
[data-source-path="/brave-new-ways-practical-guide"] #inside-the-guide {
  background: var(--paper-deep);
}

[data-source-path="/brave-new-ways-practical-guide"] .structured-copy h2,
[data-source-path="/brave-new-ways-practical-guide"] .conversion-panel-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/brave-new-ways-practical-guide"] .structured-copy h2,
  [data-source-path="/brave-new-ways-practical-guide"] .conversion-panel-copy h2 {
    font-size: 2.7rem;
  }
}

[data-source-path="/brave-new-ways-practical-guide"] .structured-section-rewritten .structured-copy-body,
[data-source-path="/brave-new-ways-practical-guide"] .structured-section-comparison .structured-copy-body {
  font-size: var(--feature-text-size);
}

/* A real page of the book in a feature card (rewritten-comparison.njk, `page` on a feature): the page at the card's
   width with the ink hairline the covers wear, and a quiet link that opens the full-size page in a new tab. */
.structured-feature-page {
  margin: auto 0 0;
  padding-top: var(--space-4);
}

/* The three pages sit on one line whatever the length of the copy above them. */
.structured-feature:has(.structured-feature-page) {
  display: flex;
  flex-direction: column;
}

.structured-feature-page > a {
  display: block;
}

.structured-feature-page > a img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.structured-feature-page figcaption {
  margin-top: var(--space-3);
}

/* Three parts across wherever there is room; one per row on phones. */
@media (min-width: 721px) {
  [data-source-path="/brave-new-ways-practical-guide"] #inside-the-guide .structured-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A page of the book in the heading column (`image` with frame "page"): the column's width like a drawing, the
   ink hairline the covers wear, and the quiet link to the full-size page beneath. */
.rewritten-image-page {
  max-width: none;
}

.rewritten-image-page > a {
  display: block;
}

.rewritten-image-page > a img {
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.rewritten-image-page figcaption {
  margin-top: var(--space-3);
}

.rewritten-image-page figcaption img {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

@media (min-width: 721px) and (max-width: 980px) {
  .rewritten-image-page {
    max-width: 560px;
  }
}

/* A note in a hairline box after a section's copy (`note` on a page section): the lead box's panel at the text size. */
.structured-copy-body > .rewritten-note {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--white);
}

[data-source-path="/brave-new-ways-practical-guide"] #what-readers-say {
  background: var(--paper-deep);
}

/* Readers' lines three across at desktop, longest to shortest (Chris, 26 Sep 2026). */
@media (min-width: 981px) {
  [data-source-path="/brave-new-ways-practical-guide"] #what-readers-say .rewritten-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The close's two sentences each hold one line at desktop (Chris, 26 Sep 2026: a break after "answers."). */
[data-source-path="/brave-new-ways-practical-guide"] .final-cta h2 {
  max-width: 820px;
}

/* The tent drawing under "A gateway to human help" stays small (Chris, 26 Sep 2026). */
[data-source-path="/brave-new-ways-practical-guide"] #a-gateway-to-human-help .rewritten-image-drawing {
  max-width: 300px;
}

/* The essay collection, /blog/ (docs/REFRAME.md, 2026-09-27): the hero reuses the /ubd/ hero (.ubd-hero); the index its idiom. */
.archive-index-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: var(--layout-gap);
}

.archive-index-intro .ubd-kicker {
  color: var(--navy);
}

/* The book's subtitle (Chris's line) in the italic display serif, and the years as a fact of the record, on the ink hero. */
.archive-hero .archive-subtitle {
  margin: 18px 0 0;
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--paper);
}

/* The /ubd/ hero's H1 grows to 9rem, where "Mapmaker’s" (the title's longest word) overruns its 681px column into the
   lead (Chris, 27 Sep 2026, at about 2000px wide). Capped at the size where the word still fits the column with a margin. */
.archive-hero.ubd-hero h1 {
  font-size: clamp(6rem, 9.1vw, 7.8rem);
}

.archive-hero .archive-years {
  margin: 14px 0 0;
  max-width: none;
  color: var(--on-ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.archive-index {
  background: var(--white);
  padding: var(--section-space) 0;
}

.archive-index-intro {
  position: sticky;
  top: 28px;
}

.archive-index-intro h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 400;
  line-height: var(--heading-line-height);
}

.archive-index-intro > p:not(.ubd-kicker) {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.archive-year + .archive-year {
  margin-top: var(--space-7);
}

.archive-year h3 {
  margin: 0;
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--space-4);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
}

.archive-year ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-year li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 22px;
  border-bottom: 1px solid var(--rule);
  padding: 17px 0;
  color: var(--ink);
  text-decoration: none;
}

.archive-entry-title {
  font-family: var(--sans);
  font-size: var(--reading-size);
  font-weight: 500;
  line-height: 1.4;
}

.archive-year li a:hover .archive-entry-title,
.archive-year li a:focus-visible .archive-entry-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.archive-year li small {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The Atlas Project archive (Chris, 27 Sep 2026): the index rows carry the episode's numeral in the heading's grey,
   as the /ubd/ section numerals do; the episode page's player sits in the ink hero under the date line. */
.atlas-episodes li a {
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
}

.atlas-entry-number {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.atlas-episode-page .podcast-player {
  margin-top: 26px;
}

.atlas-listen {
  margin-top: 22px;
}

/* Nearby episodes on an episode page (Chris, 30 Sep 2026): the index's rows (numeral, title, year and length) under
   the show notes, above the transcript, with the transcript's hairline and note. */
.atlas-related {
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--ink);
}

.ubd-essay-page .prose .atlas-related h2 {
  margin-top: 0;
}

.ubd-essay-page .prose .atlas-related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ubd-essay-page .prose .atlas-related-list li {
  margin: 0;
  padding: 0;
}

.atlas-related-list li a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 22px;
  border-bottom: 1px solid var(--rule);
  padding: 17px 0;
  color: var(--ink);
  text-decoration: none;
}

.atlas-related-list li a:hover .archive-entry-title,
.atlas-related-list li a:focus-visible .archive-entry-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.atlas-related-list li small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* An episode's transcript (a proposal, 27 Sep 2026): the reading face at the page's text size, the speaker's name
   as a small sans label leading each turn, a hairline above the section. */
.atlas-transcript {
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--ink);
}

.ubd-essay-page .prose .atlas-transcript h2 {
  margin-top: 0;
}

.atlas-transcript-note {
  margin: 0 0 1.4em;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--reading-size);
}

/* The speaker's name takes a fixed width on the first line of each turn, so every turn's words start at the same tab
   stop and the wrapped lines return to the margin; the name in rust small caps at the eyebrow size, to tell it from the
   transcribed words (Chris, 27 Sep 2026: C from the lettered sheet, the tab stop "for the first line of each block",
   rust). On phones the name sits above the turn to keep the reading measure. */
.atlas-transcript-speaker {
  display: inline-block;
  min-width: 6.4rem;
  color: var(--rust);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .atlas-transcript-speaker {
    display: block;
    margin-bottom: 6px;
  }
}

.atlas-listen .aside-links a {
  color: var(--ink);
}

@media (max-width: 720px) {
  .archive-year.atlas-episodes li a {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 4px 14px;
  }

  .archive-year.atlas-episodes li small,
  .atlas-related-list li small {
    grid-column: 2;
  }

  .atlas-related-list li a {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 4px 14px;
  }
}

@media (max-width: 980px) {
  .archive-index-grid {
    grid-template-columns: 1fr;
  }

  .archive-index-intro {
    position: static;
  }
}

@media (max-width: 720px) {
  /* The index h2 follows the shared close's phone size. The H1 is the /ubd/ hero's, a step smaller on phones so that
     "Mapmaker’s" fits the shell (a grid item cannot shrink below its longest word). */
  .archive-index-intro h2 {
    font-size: 3.15rem;
  }

  .archive-hero.ubd-hero h1 {
    font-size: clamp(3.6rem, 16vw, 5.6rem);
  }

  .archive-hero .ubd-hero-grid > * {
    min-width: 0;
  }

  .archive-hero .archive-subtitle {
    font-size: 1.35rem;
  }

  .archive-year li a {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .archive-year li small {
    white-space: normal;
  }
}

/* The Contact page (/contact-us/): the site's general door (docs/REFRAME.md, 2026-09-27). The signposts under the
   form reuse the card page's row idiom; their copy reads at the page text size, set on the container. */
[data-source-path="/contact-us"] .service-signposts .chris-ways-heading {
  /* Set on the container: the .content-page size floor flattens a size declared on p, and p inherits through 1em. */
  font-size: var(--feature-text-size);
}

[data-source-path="/contact-us"] .service-signposts-copy {
  /* Wide enough for the line to hold at desktop (Chris, 28 Sep 2026: an odd break after "and I" at 640px). */
  max-width: 800px;
  margin: 0 0 var(--space-6);
  color: var(--muted);
}

[data-source-path="/contact-us"] .service-signposts .chris-ways-heading h2 {
  margin-bottom: var(--space-3);
}

/* The Field Notes sign-up page (/newsletter-signup/, to become /field-notes/): the list's own address (docs/REFRAME.md,
   2026-09-28). The one-field form first, on white as About's close; the specimen note reads at the page text size;
   one section-heading size. */
[data-source-path="/newsletter-signup"] .conversion-panel {
  background: var(--white);
}

[data-source-path="/newsletter-signup"] .conversion-panel-copy,
[data-source-path="/newsletter-signup"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

/* Privacy and terms (/terms-conditions/): the one page not in Chris's voice (docs/REFRAME.md, 2026-09-28). One
   section-heading size; the text at the page text size; the mail links carry the site's rust rule. */
[data-source-path="/terms-conditions"] .structured-section-rewritten .structured-copy-body {
  font-size: var(--feature-text-size);
}

[data-source-path="/terms-conditions"] .structured-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

[data-source-path="/terms-conditions"] .structured-copy-body a {
  border-bottom: 1px solid var(--rust);
}

@media (max-width: 720px) {
  [data-source-path="/terms-conditions"] .structured-copy h2 {
    font-size: 2.7rem;
  }
}

/* The note's title starts level with the top of the drawing, not with the section heading (Chris, 28 Sep 2026: the two
   headings sat inline, "only a bit smaller"). At desktop the section heading spans both columns and the drawing and the
   note share the row beneath; tablet and phone stack as before. */
@media (min-width: 981px) {
  [data-source-path="/newsletter-signup"] #a-note .rewritten-heading {
    display: contents;
  }

  [data-source-path="/newsletter-signup"] #a-note .rewritten-heading h2 {
    grid-column: 1 / -1;
  }

  [data-source-path="/newsletter-signup"] #a-note .rewritten-heading .rewritten-image {
    grid-column: 1;
    margin-top: 0;
  }

  [data-source-path="/newsletter-signup"] #a-note .structured-copy-body {
    grid-column: 2;
  }
}

/* The note is a document reproduced, so it reads in Tiempos Text as the essay pages do (Chris, 28 Sep 2026). */
[data-source-path="/newsletter-signup"] .structured-section-rewritten .structured-copy-body p:not(.rewritten-lead) {
  font-family: var(--serif-text);
  line-height: 1.6;
}

[data-source-path="/newsletter-signup"] .conversion-panel-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

[data-source-path="/newsletter-signup"] .conversion-panel-copy h2,
[data-source-path="/newsletter-signup"] .structured-copy h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/newsletter-signup"] .conversion-panel-copy h2,
  [data-source-path="/newsletter-signup"] .structured-copy h2 {
    font-size: 2.7rem;
  }
}

/* One section-heading size on the page (the form's and the signposts' h2 drifted apart: 64px against 55px). */
[data-source-path="/contact-us"] .conversion-panel-copy h2,
[data-source-path="/contact-us"] .service-signposts h2 {
  font-size: 3.4rem;
  line-height: var(--heading-line-height);
}

@media (max-width: 720px) {
  [data-source-path="/contact-us"] .conversion-panel-copy h2,
  [data-source-path="/contact-us"] .service-signposts h2 {
    font-size: 2.7rem;
  }
}