/* ==========================================================================
   TrainerPlatform - Public site
   --------------------------------------------------------------------------
   The visitor-facing surface: home, Journeys, Learn, Tools, Coaching.

   Direction: calm, intentional, premium. Mostly white space and type; one
   accent colour used sparingly; hairline borders instead of heavy shadows;
   motion only where it confirms an interaction. Every colour is a semantic
   token (tokens.css, "Public site surfaces"), so both themes are complete.

   Width rule: wide grids use the 72rem wrap; reading content uses 44rem.
   ========================================================================== */

/* Self-hosted Inter, Latin subset, variable weight. SIL OFL - wwwroot/fonts/OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

/* Source Serif 4, Latin subset, variable weight - Dalton's own words. SIL OFL - wwwroot/fonts/OFL-SourceSerif4.txt. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-italic-var.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Icon sizing used by public components
   -------------------------------------------------------------------------- */
.pub .tp-icon-sm { width: 0.9375rem; height: 0.9375rem; flex: 0 0 auto; }
.pub .tp-icon    { width: 1.125rem;  height: 1.125rem;  flex: 0 0 auto; }
.pub .tp-icon-lg { width: 1.5rem;    height: 1.5rem;    flex: 0 0 auto; }
.pub .tp-shrink-0 { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */
.pub {
  --pub-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --pub-radius: 0.625rem;
  --pub-radius-sm: 0.5rem;
  --pub-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --pub-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* No min-height: 100vh. Full-page screenshots use an oversized window, and a
     viewport-tall frame would push the footer to the bottom of it. */
  display: flex;
  flex-direction: column;
  background: var(--tp-pub-page);
  color: var(--tp-text-primary);
  font-family: "Inter", var(--tp-font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.pub-main { flex: 1 0 auto; }

.pub-wrap {
  width: 100%;
  max-width: calc(72rem + 2 * var(--pub-gutter));
  margin-inline: auto;
  padding-inline: var(--pub-gutter);
}

.pub-wrap--narrow { max-width: calc(44rem + 2 * var(--pub-gutter)); }

/* :where() keeps this at zero specificity, so any link class (.pub-btn--primary,
   .pub-arrow-link) wins without needing a heavier selector. */
:where(.pub) a { color: inherit; text-decoration: none; }

/* typography.css fixes p to body size and primary colour. On the public surface a
   paragraph takes its parent's type instead - callouts, FAQ bodies and fine print are
   all set on the container. Same specificity as the base rule; later in the cascade. */
:where(.pub) p { font-size: inherit; line-height: inherit; color: inherit; }

/* The page background must also reach past a short page's footer. */
body:has(.pub) { background: var(--tp-pub-page); }

.pub :focus-visible {
  outline: 2px solid var(--tp-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* FocusOnNavigate moves focus to the h1 so screen readers announce the new page. The h1 is
   not interactive, so it must not draw a ring - found by screenshot, invisible in markup. */
.pub h1:focus,
.pub h1:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.pub-header {
  position: sticky;
  top: 0;
  z-index: var(--tp-z-sticky);
  background: var(--tp-pub-header);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--tp-pub-hairline);
}

.pub-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tp-space-6);
  height: 3.75rem;
}

.pub-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tp-pub-ink);
  min-height: 44px;
}

.pub-brand__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-size: 0.875rem;
  font-weight: 700;
}

.pub-brand__name { font-size: 1rem; white-space: nowrap; }

.pub-nav {
  display: flex;
  gap: var(--tp-space-1);
  margin-inline: auto;
}

.pub-nav__link {
  padding: 0.5rem 0.875rem;
  border-radius: var(--tp-radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tp-text-secondary);
  transition: color var(--tp-duration-fast), background-color var(--tp-duration-fast);
}

.pub-nav__link:hover { color: var(--tp-text-primary); }

.pub-nav__link.active {
  color: var(--tp-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.pub-header__end {
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
}

.pub-header__signin {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tp-text-secondary);
  padding: 0.5rem 0.25rem;
}

.pub-header__signin:hover { color: var(--tp-text-primary); }

/* Mobile menu: native <details>, hidden on wide screens. */
.pub-menu { display: none; position: relative; }

.pub-menu__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  cursor: pointer;
  list-style: none;
  color: var(--tp-text-primary);
}

.pub-menu__button::-webkit-details-marker { display: none; }
.pub-menu[open] .pub-menu__button { background: var(--tp-pub-band); }

.pub-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.5rem;
  border-radius: var(--pub-radius);
  background: var(--tp-pub-card);
  border: 1px solid var(--tp-pub-hairline);
  box-shadow: var(--tp-shadow-xl);
  display: flex;
  flex-direction: column;
}

.pub-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 0.875rem;
  border-radius: 0.625rem;
  font-weight: 500;
}

.pub-menu__link:hover,
.pub-menu__link.active { background: var(--tp-pub-band); }

@media (max-width: 47.99rem) {
  .pub-nav,
  .pub-header__signin { display: none; }

  .pub-menu { display: block; }
  .pub-header__end { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.125rem;
  border-radius: var(--tp-radius-pill);
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--tp-duration-fast), border-color var(--tp-duration-fast),
              transform var(--tp-duration-fast) var(--pub-ease);
}


.pub-btn--lg { min-height: 52px; padding: 0 1.5rem; font-size: 1rem; }

.pub-btn--primary {
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
}

.pub-btn--primary:hover { background: color-mix(in srgb, var(--tp-pub-ink) 84%, var(--tp-pub-page)); }

.pub-btn--secondary {
  background: var(--tp-pub-card);
  border-color: var(--tp-pub-hairline-strong);
  color: var(--tp-text-primary);
}

.pub-btn--secondary:hover { border-color: var(--tp-text-muted); }

.pub-btn--quiet { color: var(--tp-text-primary); }
.pub-btn--quiet:hover { background: var(--tp-pub-band); }

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-3);
  margin-top: var(--tp-space-6);
}

.pub-actions--center { justify-content: center; }

.pub-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--tp-text-primary);
}

.pub-arrow-link .tp-icon-sm { transition: transform var(--tp-duration-base) var(--pub-ease); }
.pub-arrow-link:hover .tp-icon-sm:last-child { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */
/* One eyebrow everywhere: small, tracked capitals that say what kind of thing comes next. */
.pub-eyebrow {
  margin: 0 0 var(--tp-space-3);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

.pub-subhead {
  margin: 0 0 var(--tp-space-5);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pub-subhead--center { text-align: center; }

.pub-minihead {
  margin: 0 0 var(--tp-space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

.pub-footnote {
  margin-top: var(--tp-space-8);
  max-width: 62ch;
  font-size: 0.875rem;
  color: var(--tp-text-muted);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.pub-section { padding-block: var(--pub-section-y); }
.pub-section--band { background: var(--tp-pub-band); }
.pub-section--flush-top { padding-top: 0; }

.pub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tp-space-3) var(--tp-space-6);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.pub-head__text { max-width: 40rem; }

.pub-head--center { justify-content: center; text-align: center; }

/* Inner reading pages: section headings step down so they never compete with the h1. */
.pub-head--compact { margin-bottom: var(--tp-space-6); }
.pub-head--compact .pub-head__title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.025em; }
.pub-head--compact .pub-head__sub { font-size: 1rem; margin-top: var(--tp-space-2); }
.pub-head--center .pub-head__text { margin-inline: auto; }

.pub-head__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.pub-head__sub {
  margin: var(--tp-space-3) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pub-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 2.5rem + 9vw, 9.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  text-align: center;
  isolation: isolate;
}

.pub-hero__inner { max-width: calc(52rem + 2 * var(--pub-gutter)); }

.pub-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.038em;
  color: var(--tp-pub-ink);
}

.pub-hero__lede {
  max-width: 34rem;
  margin: var(--tp-space-6) auto 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The start: three questions, then a note from the coach (D-033)
   -------------------------------------------------------------------------- */
.pub-hero--talking { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }

.pub-ask {
  max-width: 46rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
}

.pub-hero--talking .pub-ask { margin-top: 0; }

.pub-ask__prompt {
  margin: 0 0 var(--tp-space-2);
  font-size: 1rem;
  font-weight: 550;
  color: var(--tp-brand);
}

.pub-ask__question {
  margin: 0 0 var(--tp-space-6);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--tp-pub-ink);
}

.pub-ask__question--lead {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}

.pub-choices {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

.pub-choices--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48rem) {
  .pub-choices--6,
  .pub-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pub-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  min-height: 64px;
  padding: 0.875rem 1.125rem;
  border-radius: var(--pub-radius-sm);
  background: var(--tp-pub-card);
  border: 1px solid var(--tp-pub-hairline-strong);
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.3;
  text-align: left;
  color: var(--tp-text-primary);
  transition: border-color var(--tp-duration-fast), box-shadow var(--tp-duration-base) var(--pub-ease),
              transform var(--tp-duration-fast) var(--pub-ease);
}

.pub-choice:hover {
  border-color: var(--tp-pub-ink);
}


.pub-choice__arrow {
  color: var(--tp-text-muted);
  transition: transform var(--tp-duration-base) var(--pub-ease), color var(--tp-duration-fast);
}

.pub-choice:hover .pub-choice__arrow { color: var(--tp-pub-ink); transform: translateX(3px); }

@media (max-width: 29.99rem) {
  .pub-choices--6 .pub-choice { min-height: 72px; padding: 0.75rem 0.875rem; font-size: 0.9375rem; }
  .pub-choices--6 .pub-choice__arrow { display: none; }
}

.pub-ask__aside {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: var(--tp-space-5) 0 0;
  font-size: 0.875rem;
  color: var(--tp-text-muted);
}

.pub-ask__aside a { color: var(--tp-text-primary); font-weight: 550; }

/* Links inside sentences are underlined, never coloured: hierarchy, not hue. */
.pub-ask__aside a,
.pub-note__also a,
.pub-note__links a,
.pub-ribbon a,
.pub-cta__fine a,
.pub-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

.pub-ask__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding-inline: 0.5rem;
}

.pub-ask__back-icon { transform: rotate(180deg); }

/* The coaching moment. Reads as a note, not a results panel. */
.pub-note {
  max-width: 40rem;
  margin-inline: auto;
  text-align: left;
}

.pub-note__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--tp-space-5);
}

.pub-note__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-weight: 700;
}

.pub-note__name { display: block; font-weight: 620; color: var(--tp-text-primary); }
.pub-note__role { display: block; font-size: 0.8125rem; color: var(--tp-text-muted); }

.pub-note__opening {
  margin: 0 0 var(--tp-space-5);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--tp-pub-ink);
}

.pub-note__text {
  margin: 0 0 1em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--tp-text-primary);
  text-wrap: pretty;
}

.pub-note__text:first-of-type { color: var(--tp-text-secondary); }

.pub-note__opening--small {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.12;
  text-wrap: balance;
}

/* What the coach proposes. Not a button: the visitor answers "Does this feel like you?". */
.pub-proposal {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--tp-space-6);
  padding: 1.125rem 1.25rem;
  border-radius: var(--pub-radius);
  background: var(--tp-pub-card);
  border: 1px solid var(--tp-pub-hairline-strong);
}

.pub-proposal__body { display: flex; flex-direction: column; min-width: 0; }
.pub-proposal__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--tp-pub-ink); }
.pub-proposal__promise { font-size: 0.9375rem; color: var(--tp-text-secondary); }

.pub-note__also {
  margin: var(--tp-space-4) 0 0;
  font-size: 0.9375rem;
  color: var(--tp-text-secondary);
}

.pub-note__also a { color: var(--tp-text-primary); font-weight: 600; }

.pub-ask-fit {
  margin-top: var(--tp-space-7);
  padding-top: var(--tp-space-6);
  border-top: 1px solid var(--tp-pub-hairline);
}

.pub-ask-fit__question {
  margin: 0 0 var(--tp-space-4);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pub-ask-fit__answers { display: flex; flex-wrap: wrap; gap: var(--tp-space-3); }

@media (max-width: 29.99rem) {
  .pub-ask-fit__answers .pub-btn { flex: 1 1 100%; }
}

.pub-note__subhead {
  margin: var(--tp-space-6) 0 var(--tp-space-3);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tp-text-secondary);
}

.pub-choices.pub-choices--stack { grid-template-columns: 1fr; margin-top: var(--tp-space-5); }

.pub-choices.pub-choices--goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .pub-choices.pub-choices--goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pub-choice--small { min-height: 52px; font-size: 0.9375rem; font-weight: 520; }

/* A learning path's information panel: time, difficulty, who it suits. */
.pub-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--tp-space-6) 0 0;
  border-radius: var(--pub-radius-sm);
  border: 1px solid var(--tp-pub-hairline);
  background: var(--tp-pub-band);
  overflow: clip;
}

.pub-facts div { padding: 0.875rem 1.125rem; }
.pub-facts div + div { border-top: 1px solid var(--tp-pub-hairline); }

@media (min-width: 40rem) {
  .pub-facts { grid-template-columns: 1.3fr 0.8fr 1.2fr; }
  .pub-facts div + div { border-top: 0; border-left: 1px solid var(--tp-pub-hairline); }
}

.pub-facts dt {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

.pub-facts dd {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tp-text-primary);
}

.pub-facts__then { display: block; color: var(--tp-text-secondary); }

.pub-steps__enough {
  margin: var(--tp-space-5) 0 0;
  font-size: 1rem;
  color: var(--tp-text-secondary);
  text-align: center;
}

.pub-note__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: var(--tp-space-4) 0 0;
  font-size: 0.9375rem;
}

.pub-note__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tp-text-primary);
  font-weight: 550;
}

/* On the Journey page: why the visitor is here, in the words they chose. */
.pub-ribbon {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: var(--tp-space-5) 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--tp-text-secondary);
}

.pub-ribbon p { margin: 0; }

.pub-ribbon__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-size: 0.75rem;
  font-weight: 700;
}

.pub-ribbon__chip {
  display: inline-block;
  margin: 0 0.125rem;
  padding: 0 0.5rem;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-pub-card);
  border: 1px solid var(--tp-pub-hairline-strong);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--tp-text-primary);
  white-space: nowrap;
}

.pub-ribbon a { margin-left: 0.25rem; color: var(--tp-text-primary); font-weight: 550; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Inner page intro
   -------------------------------------------------------------------------- */
.pub-intro {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 3vw, 4rem);
}

.pub-intro--center { text-align: center; }
.pub-intro--center .pub-intro__lede { margin-inline: auto; }

.pub-intro__title {
  margin: 0;
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.034em;
  color: var(--tp-pub-ink);
  text-wrap: balance;
}

.pub-intro__lede {
  max-width: 40rem;
  margin: var(--tp-space-5) 0 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}

.pub-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--tp-space-5);
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.pub-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tp-text-muted); }
.pub-crumbs li + li::before { content: "/"; color: var(--tp-pub-hairline-strong); }
.pub-crumbs a { color: var(--tp-text-secondary); }
.pub-crumbs a:hover { color: var(--tp-text-primary); }
.pub-crumbs [aria-current] { color: var(--tp-text-muted); font-weight: 450; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pub-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-5);
  margin: var(--tp-space-5) 0 0;
  font-size: 0.875rem;
  color: var(--tp-text-muted);
}

.pub-article-meta span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* --------------------------------------------------------------------------
   Grids and cards
   -------------------------------------------------------------------------- */
.pub-grid { display: grid; gap: clamp(0.875rem, 0.6rem + 1vw, 1.25rem); }
/* Explicit column counts, not auto-fit: auto-fit chose 4 columns for 6 items and 3 for 4,
   leaving orphaned last rows. Each grid divides its item counts evenly at every width. */
.pub-grid--2,
.pub-grid--3,
.pub-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .pub-grid--2,
  .pub-grid--3,
  .pub-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .pub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .pub-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pub-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }



/* Reading lists: ruled entries instead of boxed cards. Spacing and a hairline do what a
   border, radius and shadow were doing - with less noise. */
.pub-entries {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--tp-pub-hairline-strong);
}

@media (min-width: 48rem) { .pub-entries--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pub-entry {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
}

.pub-entry__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--tp-pub-ink); text-wrap: balance; }
.pub-entry__text { font-size: 0.9375rem; line-height: 1.55; color: var(--tp-text-secondary); text-wrap: pretty; }
.pub-entry__meta { font-size: 0.8125rem; color: var(--tp-text-muted); }
.pub-entry:hover .pub-entry__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* --------------------------------------------------------------------------
   Starting points - three primary, three specialized
   Type and rules do the work; no icon tiles, no lifts.
   -------------------------------------------------------------------------- */
.pub-picker__primary {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tp-pub-ink);
}

@media (min-width: 56rem) {
  .pub-picker__primary { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}

.pub-picker__label {
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
  padding-bottom: var(--tp-space-3);
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--tp-text-muted);
}

.pub-picker__specialized {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tp-pub-hairline-strong);
}

@media (min-width: 56rem) {
  .pub-picker__specialized { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}

.pub-journey {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  color: var(--tp-text-primary);
}

.pub-journey__title { font-weight: 600; letter-spacing: -0.02em; color: var(--tp-pub-ink); }
.pub-journey__promise { color: var(--tp-text-secondary); line-height: 1.5; text-wrap: pretty; }

.pub-journey__go {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: var(--tp-space-4);
  font-size: 0.9375rem;
  font-weight: 560;
}

.pub-journey__go .tp-icon-sm { transition: transform var(--tp-duration-base) var(--pub-ease); }
.pub-journey:hover .pub-journey__go .tp-icon-sm { transform: translateX(3px); }
.pub-journey:hover .pub-journey__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.pub-journey--primary { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 clamp(1.5rem, 1rem + 1vw, 2rem); border-bottom: 1px solid var(--tp-pub-hairline); }
.pub-journey--primary .pub-journey__title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.15; }
.pub-journey--primary .pub-journey__promise { font-size: 1.0625rem; }

@media (min-width: 56rem) {
  .pub-journey--primary { border-bottom: 0; min-height: 13rem; }
}

.pub-journey--specialized { padding: 1rem 0; border-bottom: 1px solid var(--tp-pub-hairline); }
.pub-journey--specialized .pub-journey__title { font-size: 1.0625rem; }
.pub-journey--specialized .pub-journey__promise { font-size: 0.9375rem; }
.pub-journey--specialized .pub-journey__go { display: none; }

@media (min-width: 56rem) {
  .pub-journey--specialized { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Topics (homepage) - a ruled index, read like a contents page
   -------------------------------------------------------------------------- */
.pub-topics {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--tp-pub-hairline-strong);
}

@media (min-width: 48rem) { .pub-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pub-topic {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.25rem 1.25rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
}

.pub-topic__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.pub-topic__summary { font-size: 0.9375rem; line-height: 1.5; color: var(--tp-text-secondary); }
.pub-topic:hover .pub-topic__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

@media (max-width: 29.99rem) {
  .pub-topic { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Principles (coaching page) - a plain two-column list
   -------------------------------------------------------------------------- */
.pub-principles-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  border-top: 1px solid var(--tp-pub-hairline-strong);
}

@media (min-width: 48rem) { .pub-principles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pub-principle { padding: 1.25rem 0; border-bottom: 1px solid var(--tp-pub-hairline); }
.pub-principle__title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.pub-principle__body { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tp-text-secondary); }

/* --------------------------------------------------------------------------
   Panel and CTA
   -------------------------------------------------------------------------- */
.pub-panel {
  max-width: 40rem;
  padding-top: var(--tp-space-6);
  border-top: 1px solid var(--tp-pub-ink);
}

.pub-panel__title { margin: 0; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.pub-panel__text { margin: var(--tp-space-3) 0 var(--tp-space-3); color: var(--tp-text-secondary); line-height: 1.6; }

.pub-cta {
  max-width: 40rem;
  margin-inline: auto;
  padding-top: var(--tp-space-7);
  border-top: 1px solid var(--tp-pub-ink);
  text-align: center;
}

.pub-cta__title { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.022em; }
.pub-cta__text { max-width: 32rem; margin: var(--tp-space-4) auto 0; color: var(--tp-text-secondary); line-height: 1.6; }
.pub-cta__fine { margin: var(--tp-space-5) 0 0; font-size: 0.875rem; color: var(--tp-text-muted); }
.pub-cta__fine a { color: var(--tp-text-primary); font-weight: 550; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.pub-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  margin: var(--tp-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pub-chips--start { justify-content: flex-start; margin-top: 0; }

/* An index of places on the page: plain words, not pills. */
.pub-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tp-text-secondary);
}

.pub-chip:hover {
  color: var(--tp-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* --------------------------------------------------------------------------
   Learn page
   -------------------------------------------------------------------------- */
.pub-topic-section { scroll-margin-top: 4rem; }

.pub-topic-head {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-4);
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

.pub-topic-head__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--tp-brand-subtle);
  color: var(--tp-brand-on-subtle);
}

.pub-topic-head__icon svg { width: 1.5rem; height: 1.5rem; }
.pub-topic-head .pub-head__sub { margin-top: 0.375rem; }

.pub-topic-body { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pub-topic-faqs { max-width: 48rem; }

@media (min-width: 72rem) {
  .pub-topic-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .pub-topic-body .pub-grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Disclosures (FAQ)
   -------------------------------------------------------------------------- */
.pub-faqs { border-top: 1px solid var(--tp-pub-hairline); }

.pub-disclosure { border-bottom: 1px solid var(--tp-pub-hairline); scroll-margin-top: 5rem; }

.pub-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-4);
  min-height: 56px;
  padding: 0.875rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.pub-disclosure__summary::-webkit-details-marker { display: none; }
.pub-disclosure__summary:hover { color: var(--tp-text-primary); }

.pub-disclosure__chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--tp-text-muted);
  transform: rotate(90deg);
  transition: transform var(--tp-duration-base) var(--pub-ease);
}

.pub-disclosure[open] > .pub-disclosure__summary .pub-disclosure__chevron { transform: rotate(-90deg); }

.pub-disclosure__body {
  padding: 0 2rem 1.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tp-text-secondary);
}

.pub-disclosure__body p { margin: 0 0 0.75rem; }
.pub-disclosure__body p:last-child { margin-bottom: 0; }

.pub-faq__short { color: var(--tp-text-primary); font-weight: 500; }

.pub-disclosure:target > .pub-disclosure__summary { color: var(--tp-text-primary); }

/* --------------------------------------------------------------------------
   Reading: Journeys and articles
   -------------------------------------------------------------------------- */
.pub-prose {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.75;
  color: var(--tp-text-primary);
}

.pub-prose p { margin: 0 0 1.25em; text-wrap: pretty; }

.pub-prose h2 {
  margin: 2.25em 0 0.75em;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

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

.pub-opening {
  margin: 0 0 var(--tp-space-7);
  padding: 0 0 0 clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-left: 3px solid var(--tp-brand);
}

.pub-opening p {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 520;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--tp-pub-ink);
  text-wrap: pretty;
}

.pub-callout {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 var(--tp-space-7);
  padding: 1rem 1.125rem;
  border-radius: var(--pub-radius-sm);
  background: var(--tp-warning-subtle);
  border: 1px solid color-mix(in srgb, var(--tp-warning) 30%, transparent);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.pub-callout .tp-icon { margin-top: 0.15rem; color: var(--tp-warning); }
.pub-callout p { margin: 0; }

.pub-journey-page { padding-bottom: var(--pub-section-y); }

.pub-steps { margin-top: var(--tp-space-9); }

.pub-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0;
}

.pub-step {
  position: relative;
  counter-increment: step;
  padding: 1.375rem 0 1.25rem 3.25rem;
  border-top: 1px solid var(--tp-pub-hairline);
}

.pub-step:first-child { border-top-color: var(--tp-pub-ink); }

/* A plain numeral, set like a page number: the order matters, the ornament doesn't. */
.pub-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-muted);
}

.pub-step__title { margin: 0; font-size: 1.1875rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.3; }
.pub-step__body { margin: 0.5rem 0 0.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--tp-text-secondary); }

@media (max-width: 29.99rem) {
  .pub-step { padding-left: 2.25rem; }
  .pub-step::before { font-size: 1.25rem; }
}

.pub-article { padding-bottom: var(--pub-section-y); }

.pub-keypoints {
  margin: 0 0 var(--tp-space-8);
  padding: 1.375rem 1.5rem;
  border-radius: var(--pub-radius);
  background: var(--tp-pub-band);
  border: 1px solid var(--tp-pub-hairline);
}

.pub-keypoints__title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

.pub-keypoints ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }

.pub-keypoints li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 1rem;
  line-height: 1.55;
}

.pub-keypoints li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--tp-brand);
}

.pub-partof {
  margin-top: var(--tp-space-8);
  padding-top: var(--tp-space-6);
  border-top: 1px solid var(--tp-pub-hairline);
}

/* --------------------------------------------------------------------------
   Tool page explanation
   -------------------------------------------------------------------------- */
.pub-explain { gap: clamp(2rem, 1.5rem + 3vw, 4rem); }

.pub-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; }

.pub-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tp-text-secondary);
}

.pub-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.375rem;
  height: 1px;
  background: var(--tp-text-muted);
}

.pub-othertools { margin-top: var(--tp-space-9); }

/* --------------------------------------------------------------------------
   Calculators
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border-radius: calc(var(--pub-radius) + 0.25rem);
  border: 1px solid var(--tp-pub-hairline);
  background: var(--tp-pub-card);
  /* clip, not hidden: hidden makes this a scroll container and silently disables the
     sticky result panel inside it. */
  overflow: clip;
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-6);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.calc__fields { display: grid; gap: var(--tp-space-5); }

.calc__submit {
  min-height: 52px;
  border: 0;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--tp-duration-fast) var(--pub-ease), background-color var(--tp-duration-fast);
}

.calc__submit:hover { background: color-mix(in srgb, var(--tp-pub-ink) 84%, var(--tp-pub-page)); }

.calc__result {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--tp-pub-band);
  border-left: 1px solid var(--tp-pub-hairline);
  scroll-margin-top: 5rem;
}

/* On wide screens the result rides alongside a long form instead of scrolling away. */
@media (min-width: 56rem) {
  .calc__sticky { position: sticky; top: 5.5rem; }
}

.calc__empty {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--tp-text-muted);
}

.calc__empty p { max-width: 22rem; margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.calc__empty .tp-icon { width: 1.5rem; height: 1.5rem; }

@media (max-width: 55.99rem) {
  .calc { grid-template-columns: 1fr; }
  .calc__result { border-left: 0; border-top: 1px solid var(--tp-pub-hairline); }
  .calc__empty { min-height: 7rem; }
}

.calc-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-group { margin: 0; padding: 0; border: 0; min-width: 0; }

.calc-field__label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--tp-text-primary);
}

.calc-group .calc-field__label { margin-bottom: 0.625rem; }
.calc-group .calc-pair .calc-field__label { font-weight: 500; font-size: 0.8125rem; color: var(--tp-text-muted); margin-bottom: 0.375rem; }

.calc-field__control { position: relative; display: flex; align-items: center; }

.calc-field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 3.25rem 0 1rem;
  border-radius: var(--pub-radius-sm);
  border: 1px solid var(--tp-pub-hairline-strong);
  background: var(--tp-pub-page);
  color: var(--tp-text-primary);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--tp-duration-fast), box-shadow var(--tp-duration-fast);
  -moz-appearance: textfield;
}

.calc-field__input::-webkit-outer-spin-button,
.calc-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc-field__input:hover { border-color: var(--tp-text-muted); }

.calc-field__input:focus {
  outline: none;
  border-color: var(--tp-brand);
  box-shadow: 0 0 0 4px var(--tp-focus-ring);
}

.calc-field__unit {
  position: absolute;
  right: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tp-text-muted);
  pointer-events: none;
}

.calc-field__hint { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--tp-text-muted); }

.calc-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tp-danger);
}

.calc-field__error .tp-icon-sm { margin-top: 0.1rem; }
.calc-field--invalid .calc-field__input { border-color: var(--tp-danger); }

.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tp-space-3); }

/* Segmented radio choice. */
.calc-choice__options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--pub-radius-sm);
  background: var(--tp-pub-band);
  border: 1px solid var(--tp-pub-hairline);
}

.calc-choice__options--stacked { grid-auto-flow: row; }

.calc-choice__option { position: relative; display: block; cursor: pointer; }

.calc-choice__option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.calc-choice__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 520;
  line-height: 1.35;
  text-align: center;
  color: var(--tp-text-secondary);
  transition: background-color var(--tp-duration-fast), color var(--tp-duration-fast), box-shadow var(--tp-duration-fast);
}

.calc-choice__options--stacked .calc-choice__option span { justify-content: flex-start; text-align: left; }

.calc-choice__option:hover span { color: var(--tp-text-primary); }

.calc-choice__option input:checked + span {
  background: var(--tp-pub-card);
  color: var(--tp-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--tp-pub-hairline-strong);
}

/* Selection must not rely on colour alone: a dot marks the chosen option. */
.calc-choice__option input:checked + span::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--tp-brand);
}

.calc-choice__option input:focus-visible + span { outline: 2px solid var(--tp-brand); outline-offset: 2px; }

/* Results. */
.calc-result__label { margin: 0; font-size: 0.875rem; font-weight: 560; color: var(--tp-text-secondary); }

.calc-result__value {
  margin: 0.25rem 0 0;
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
  color: var(--tp-pub-ink);
}

.calc-result__value span {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tp-text-muted);
}

.calc-result__note { margin: 0.875rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tp-text-secondary); }
.calc-result__band { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.55; }

.calc-table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.calc-table caption {
  caption-side: top;
  padding: 0 0 0.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

.calc-table th {
  padding: 0.5rem 0.75rem 0.5rem 0;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--tp-text-muted);
  border-bottom: 1px solid var(--tp-pub-hairline-strong);
}

.calc-table td {
  padding: 0.6875rem 0.75rem 0.6875rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
  color: var(--tp-text-secondary);
}

.calc-table td:nth-child(2) { color: var(--tp-text-primary); font-weight: 600; white-space: nowrap; }
.calc-table tr:last-child td { border-bottom: 0; }

.calc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.calc-facts div {
  padding: 0.875rem 1rem;
  border-radius: var(--pub-radius-sm);
  background: var(--tp-pub-card);
  border: 1px solid var(--tp-pub-hairline);
}

.calc-facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--tp-text-muted); }
.calc-facts dd { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

/* Plates, drawn to relative size. */
.calc-plates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.calc-plate {
  display: grid;
  place-items: center;
  width: 3rem;
  border-radius: 0.5rem;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc-plate--45  { height: 6.5rem; }
.calc-plate--35  { height: 5.75rem; }
.calc-plate--25  { height: 5rem; }
.calc-plate--10  { height: 4rem; width: 2.5rem; }
.calc-plate--5   { height: 3.25rem; width: 2.25rem; }
.calc-plate--2-5 { height: 2.75rem; width: 2rem; font-size: 0.75rem; }

/* Waist-to-height scale. */
.calc-scale { position: relative; margin: 1.5rem 0 0; padding-top: 0.75rem; }

.calc-scale__track {
  position: relative;
  height: 0.5rem;
  border-radius: var(--tp-radius-pill);
  background: var(--tp-pub-hairline-strong);
  overflow: hidden;
}

/* The guideline region, 0.35 to 0.50 of a 0.35 to 0.70 track. */
.calc-scale__guide {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42.857%;
  background: var(--tp-brand);
  opacity: 0.55;
}

.calc-scale__marker {
  position: absolute;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: -0.625rem;
  border-radius: 50%;
  background: var(--tp-pub-ink);
  border: 3px solid var(--tp-pub-band);
  box-shadow: 0 0 0 1px var(--tp-pub-ink);
  transform: translateY(0.375rem);
}

.calc-scale__labels {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-muted);
}

/* The 0.50 label sits at its true position on the track. */
.calc-scale__labels span:nth-child(2) { position: absolute; left: 42.857%; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   Coaching page
   -------------------------------------------------------------------------- */
.pub-formats { display: grid; }

.pub-format {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0;
  border-top: 1px solid var(--tp-pub-hairline-strong);
  scroll-margin-top: 5rem;
}

.pub-format:first-child { border-top-color: var(--tp-pub-ink); }

.pub-format__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tp-space-2) var(--tp-space-5);
}

.pub-format__title { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.022em; }
.pub-format__lede { margin: 0.25rem 0 0; color: var(--tp-text-secondary); }

.pub-format__contact {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tp-text-muted);
  white-space: nowrap;
}

.pub-format__how {
  max-width: 46rem;
  margin: var(--tp-space-5) 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.pub-format__fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--tp-space-6) clamp(2rem, 1rem + 3vw, 4rem);
  margin-top: var(--tp-space-6);
  padding-top: var(--tp-space-6);
  border-top: 1px solid var(--tp-pub-hairline);
}

.pub-format__less { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--tp-text-secondary); }

.pub-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.pub-ticks li { display: flex; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.5; }
.pub-ticks li::before { content: "\2014"; color: var(--tp-text-muted); flex: 0 0 auto; }


.pub-table-scroll {
  overflow-x: auto;
  border-radius: var(--pub-radius);
  border: 1px solid var(--tp-pub-hairline);
  background: var(--tp-pub-card);
}

.pub-compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9375rem; }

.pub-compare th,
.pub-compare td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--tp-pub-hairline);
}

.pub-compare thead th { font-size: 0.875rem; font-weight: 620; }
.pub-compare tbody th { font-weight: 520; color: var(--tp-text-secondary); width: 26%; }
.pub-compare tbody tr:last-child > * { border-bottom: 0; }

.pub-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}

.pub-process__step {
  counter-increment: process;
  padding-top: var(--tp-space-5);
  border-top: 2px solid var(--tp-pub-ink);
}

.pub-process__step::before {
  content: "0" counter(process);
  display: block;
  margin-bottom: var(--tp-space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-muted);
}

.pub-process__title { margin: 0; font-size: 1.1875rem; font-weight: 640; letter-spacing: -0.02em; }
.pub-process__body { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tp-text-secondary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pub-footer {
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--tp-space-6);
  border-top: 1px solid var(--tp-pub-hairline);
  background: var(--tp-pub-page);
  font-size: 0.875rem;
}

.pub-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--tp-space-8) var(--tp-space-6);
}

.pub-footer__about { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tp-space-4); }
.pub-footer__tagline { max-width: 18rem; margin: 0; color: var(--tp-text-secondary); line-height: 1.55; }

.pub-footer__title { margin: 0 0 var(--tp-space-3); font-size: 0.8125rem; font-weight: 600; color: var(--tp-text-primary); }
.pub-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.125rem; }

.pub-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--tp-text-secondary);
}

.pub-footer__link:hover { color: var(--tp-text-primary); }

.pub-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--tp-space-4) var(--tp-space-8);
  margin-top: var(--tp-space-9);
  padding-top: var(--tp-space-5);
  border-top: 1px solid var(--tp-pub-hairline);
  font-size: 0.8125rem;
  color: var(--tp-text-muted);
}

.pub-footer__bottom p { margin: 0; max-width: 52rem; line-height: 1.55; }

@media (max-width: 63.99rem) {
  .pub-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .pub-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 35.99rem) {
  .pub-footer__grid { grid-template-columns: 1fr 1fr; }
  .pub-footer__link { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pub *,
  .pub *::before { transition: none !important; }
  .pub-card:hover,
  .pub-journey:hover,
  .pub-topic:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Consultation request (D-040) - reuses the calculator field styles.
   -------------------------------------------------------------------------- */
.pub-consult { display: grid; gap: var(--tp-space-6); }
.pub-consult__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tp-space-4); }
.pub-consult__optional { font-weight: 400; color: var(--tp-text-muted); }
.pub-consult__message { min-height: 6rem; padding-block: 0.75rem; resize: vertical; font-size: 1rem; font-weight: 400; }
.pub-consult .calc-field__input { padding-right: 1rem; }
.pub-consult .calc__submit { width: 100%; }

@media (max-width: 29.99rem) {
  .pub-consult__pair { grid-template-columns: 1fr; }
}

.pub-booked { margin-top: var(--tp-space-6); display: grid; gap: var(--tp-space-3); font-size: 1.0625rem; line-height: 1.6; color: var(--tp-text-secondary); }
.pub-booked a { color: var(--tp-text-primary); font-weight: 560; text-decoration: underline; text-decoration-color: var(--tp-pub-hairline-strong); text-underline-offset: 0.22em; }

/* Packages under a coaching format (D-041): a quiet ruled list, no price cards. */
.pub-packages { margin: var(--tp-space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tp-pub-hairline); }
.pub-packages li { display: grid; gap: 0.125rem; padding: 0.875rem 0; border-bottom: 1px solid var(--tp-pub-hairline); }
.pub-packages strong { font-weight: 600; }
.pub-packages span { font-size: 0.9375rem; color: var(--tp-text-secondary); }


/* ==========================================================================
   Quality pass (2026-10-03): photography, the split hero, the closing band,
   and forms that show their state. Measured against the approved boards.
   ========================================================================== */

/* Consultation: numbered parts, and choices that look chosen. */
.pub-consult .calc-choice__options--stacked { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.5rem; padding: 0; background: none; border: 0; }
.pub-consult .calc-choice__options--stacked .calc-choice__option span {
  justify-content: flex-start;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 0.5rem;
  background: var(--tp-pub-card);
  font-size: 0.9375rem;
  color: var(--tp-text-primary);
}
.pub-consult .calc-choice__options--stacked .calc-choice__option span::before {
  content: "";
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--tp-pub-hairline-strong);
  border-radius: 50%;
  background: var(--tp-pub-card);
}
.pub-consult .calc-choice__options--stacked .calc-choice__option:hover span { border-color: var(--tp-pub-ink); }
.pub-consult .calc-choice__options--stacked .calc-choice__option input:checked + span { border-color: var(--tp-pub-ink); box-shadow: 0 0 0 1px var(--tp-pub-ink); font-weight: 600; }
.pub-consult .calc-choice__options--stacked .calc-choice__option input:checked + span::before {
  width: 1.125rem; height: 1.125rem; margin: 0;
  border: 5px solid var(--tp-pub-ink);
  background: var(--tp-pub-card);
}
.pub-consult { counter-reset: part; }
.pub-consult > fieldset > legend.calc-field__label,
.pub-consult .pub-consult__part {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--tp-pub-ink);
}
.pub-consult > fieldset > legend.calc-field__label::before,
.pub-consult .pub-consult__part::before {
  counter-increment: part;
  content: counter(part);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-size: 0.9375rem;
  font-weight: 650;
}
.pub-consult > fieldset + fieldset { margin-top: 1rem; }
.pub-consult__day { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--tp-text-secondary); }
.pub-consult__day ~ .pub-consult__day { margin-top: 1rem; }
.pub-consult .pub-consult__times { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.pub-consult .pub-consult__part { margin: 1rem 0 0.25rem; }



/* ==========================================================================
   Craftsmanship pass (2026-10-10): meeting the coach, photography as a
   first-class element, and sections of different weights so the page reads
   as a story rather than a catalogue. Same principles as the approved
   McElhaney boards; none of their layouts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photography. Until Dalton's photos arrive, each slot is a darkroom plate:
   toned, grained and lit from one side, with an honest caption. The tones
   (warm, slate, chalk) make a set of placeholders read as one shoot.
   -------------------------------------------------------------------------- */
.pub-photo {
  --plate: #3b322b;
  --plate-light: rgb(255 232 205 / 0.26);
  --plate-floor: rgb(12 10 8 / 0.55);
  position: relative;
  margin: 0;
  overflow: clip;
  border-radius: 0.25rem;
  background:
    radial-gradient(120% 90% at 18% 12%, var(--plate-light), transparent 60%),
    linear-gradient(to bottom, transparent 55%, var(--plate-floor)),
    var(--plate);
  isolation: isolate;
}
.pub-photo--slate { --plate: #2a3038; --plate-light: rgb(214 228 245 / 0.22); --plate-floor: rgb(6 9 14 / 0.6); }
.pub-photo--chalk { --plate: #cdc6bb; --plate-light: rgb(255 255 255 / 0.55); --plate-floor: rgb(60 50 40 / 0.28); }

/* Real photography (temporary until Dalton's arrive): the image fills its frame, cropped to its focus. */
.pub-photo--image { background: var(--tp-pub-band); }
.pub-photo--image::before { content: none; }
.pub-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-photo__tag--temp { gap: 0; padding: 0.375rem 0.625rem 0.4375rem; background: rgb(14 14 16 / 0.62); backdrop-filter: blur(6px); }
.pub-photo__tag--temp .pub-photo__label { font-size: 0.5625rem; opacity: 0.85; }
.pub-photo__tag--temp .pub-photo__what { font-size: 0.6875rem; }

/* Film grain: a tiny inline SVG noise, blended over the tone. */
.pub-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* The caption, set like a photo credit on the boards: fixed ink in both themes. */
.pub-photo__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.125rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.75rem 0.5625rem;
  border-radius: 0.1875rem;
  background: rgb(14 14 16 / 0.82);
  color: #f5f3f0;
}
.pub-photo__label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pub-photo__what { font-size: 0.75rem; line-height: 1.35; color: rgb(245 243 240 / 0.8); }

/* --------------------------------------------------------------------------
   Hero: meeting Dalton. Larger, left-set type in his voice; on wide screens
   his photograph sits beside them, in the same grid.
   -------------------------------------------------------------------------- */
.pub-hero:not(.pub-hero--talking) {
  --hero-pt: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  --hero-pb: clamp(3rem, 2rem + 4vw, 6rem);
  padding-block: var(--hero-pt) var(--hero-pb);
  text-align: left;
}
.pub-hero:not(.pub-hero--talking) .pub-hero__inner { max-width: calc(72rem + 2 * var(--pub-gutter)); }
.pub-hero__split { display: grid; }

.pub-hero__split .pub-hero__title {
  font-size: clamp(3rem, 1.6rem + 4.4vw, 4.875rem);
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.pub-hero__title-quiet {
  display: block;
  color: color-mix(in srgb, var(--tp-pub-ink) 48%, var(--tp-pub-page));
}
.pub-hero__split .pub-hero__lede {
  max-width: 33rem;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0 0;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: var(--tp-text-secondary);
}
.pub-hero__split .pub-ask { margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; max-width: 36rem; }
.pub-hero__split .pub-ask__question { margin-bottom: var(--tp-space-5); }
.pub-hero__split .pub-ask__aside { justify-content: flex-start; }

/* Phones and tablets: the photograph sits between his words and the question. */
.pub-hero__photo--side { display: none; }
.pub-hero__photo--inline { margin-top: 2rem; }

@media (min-width: 48rem) {
  .pub-hero__split .pub-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wide screens: the photograph sits in the same content grid as the words, top-aligned with
   the eyebrow, and ends where the wrap ends. Nothing bleeds. */
@media (min-width: 64rem) {
  .pub-hero__split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
  .pub-hero__photo--inline { display: none; }
  .pub-hero__photo--side { display: block; }
}

/* --------------------------------------------------------------------------
   Section headings: a little larger, with a reading measure.
   -------------------------------------------------------------------------- */
.pub-head__title { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.pub-head__text { max-width: 44rem; }
.pub-head__sub { max-width: 36rem; margin-top: var(--tp-space-4); }

/* Starting points: photographs lead, no rule over them. */
.pub-picker__primary { border-top: 0; row-gap: 1rem; }
.pub-journey--primary { padding-top: 0; }
.pub-journey__photo { margin-bottom: 1.25rem; }
@media (max-width: 55.99rem) { .pub-journey__photo { aspect-ratio: 3 / 2 !important; } }

/* --------------------------------------------------------------------------
   The story band: the one dark section, where the coach speaks.
   Fixed colours: it is dark in both themes.
   -------------------------------------------------------------------------- */
.pub-story {
  padding-block: clamp(4rem, 2rem + 7vw, 8.5rem);
  background: #12151b;
  color: #f4f5f7;
}
.pub-story__inner { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 56rem) {
  .pub-story__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 5vw, 6.5rem); }
}
@media (max-width: 55.99rem) { .pub-story__photo { aspect-ratio: 3 / 2 !important; } }

.pub-story .pub-story__eyebrow { color: rgb(244 245 247 / 0.55); }
.pub-story__quote {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.125rem, 1.25rem + 3.4vw, 3.75rem);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #fff;
  text-wrap: balance;
}
.pub-story__quote--wide { max-width: 22ch; }
.pub-story__text {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: rgb(244 245 247 / 0.76);
}
.pub-story__text p { margin: 0; }
.pub-story__sign {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pub-story__sign::before { content: ""; width: 1.75rem; height: 1px; background: rgb(244 245 247 / 0.5); }
.pub-story__link {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 560;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--tp-duration-fast);
}
.pub-story__link:hover { text-decoration-color: #fff; }
.pub-story :focus-visible { outline-color: #fff; }

/* The same band on the Coaching page, holding the commitments. */
.pub-story__principles {
  display: grid;
  gap: 2rem clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (min-width: 40rem) { .pub-story__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pub-story__principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-story__principle { padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.16); }
.pub-story__principle-title { margin: 0; font-size: 1.125rem; font-weight: 620; letter-spacing: -0.015em; color: #fff; }
.pub-story__principle-body { margin: 0.5rem 0 0; font-size: 0.975rem; line-height: 1.65; color: rgb(244 245 247 / 0.72); }

/* --------------------------------------------------------------------------
   Learn, set as an editorial page: the reason on the left, the contents right.
   -------------------------------------------------------------------------- */
.pub-learn { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .pub-learn { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: start; }
  .pub-learn__intro { position: sticky; top: 6rem; }
}
.pub-learn__title {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 680;
  line-height: 1.04;
  letter-spacing: -0.034em;
  color: var(--tp-pub-ink);
  text-wrap: balance;
}
.pub-learn__text {
  max-width: 30rem;
  margin: 1.25rem 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}
.pub-topics--single { grid-template-columns: 1fr !important; border-top-color: var(--tp-pub-ink); }
.pub-topics--single .pub-topic { grid-template-columns: 10rem 1fr; padding: 1.375rem 0; }
.pub-topics--single .pub-topic__name { font-size: 1.25rem; letter-spacing: -0.02em; color: var(--tp-pub-ink); }
.pub-topics--single .pub-topic__summary { font-size: 1rem; line-height: 1.55; }
@media (max-width: 29.99rem) { .pub-topics--single .pub-topic { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   A light strip: the calculators, small on purpose.
   -------------------------------------------------------------------------- */
.pub-section--short { padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.pub-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pub-strip__title { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; color: var(--tp-pub-ink); }
.pub-strip__sub { flex: 1 1 18rem; margin: 0; font-size: 0.9375rem; color: var(--tp-text-secondary); }
@media (min-width: 40rem) { .pub-entries--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pub-entries--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-entries--4 .pub-entry { padding-block: 1rem; border-bottom: 0; }
.pub-entries--4 .pub-entry__meta { display: none; }

/* --------------------------------------------------------------------------
   The invitation: coaching, once, with a face beside it.
   -------------------------------------------------------------------------- */
.pub-invite { display: grid; gap: 2rem; align-items: center; }
.pub-invite__photo { max-width: 11rem; }
@media (min-width: 48rem) {
  .pub-invite { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); }
  .pub-invite__photo { max-width: none; }
}
.pub-invite__title {
  margin: 0;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--tp-pub-ink);
  text-wrap: balance;
}
.pub-invite__text {
  max-width: 34rem;
  margin: 1.25rem 0 2rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--tp-text-secondary);
}
.pub-invite__photo .pub-photo__tag { left: 0.625rem; bottom: 0.625rem; max-width: calc(100% - 1.25rem); }

/* --------------------------------------------------------------------------
   Coaching page: his introduction with a photograph; the formats alternate
   photograph and words; the fit is a sentence, not a list.
   -------------------------------------------------------------------------- */
.pub-intro--split { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.pub-intro__split { display: grid; gap: 2.5rem; align-items: center; }
.pub-intro--split .pub-intro__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -0.042em; max-width: 14ch; }
.pub-intro--split .pub-intro__lede { max-width: 34rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
.pub-intro__chips { margin-top: 2rem; gap: 0.25rem 1.5rem; }
.pub-intro__photo { display: none; }
@media (min-width: 64rem) {
  .pub-intro__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(3rem, 1rem + 5vw, 6rem); }
  .pub-intro__photo { display: block; aspect-ratio: 4 / 5 !important; }
}

.pub-format {
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.pub-format:first-child { border-top: 0; padding-top: 0; }
.pub-format__photo { aspect-ratio: 3 / 2 !important; }
@media (min-width: 56rem) {
  .pub-format { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: center; }
  .pub-format:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pub-format:nth-child(even) .pub-format__photo { order: 2; }
  .pub-format__photo { aspect-ratio: 4 / 5 !important; }
}
.pub-format__body { max-width: 38rem; }
.pub-format .pub-format__contact {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}
.pub-format .pub-format__title { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); font-weight: 680; line-height: 1.05; letter-spacing: -0.032em; color: var(--tp-pub-ink); }
.pub-format .pub-format__lede { margin-top: 0.625rem; font-size: 1.1875rem; line-height: 1.5; }
.pub-format .pub-format__how { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.7; }
.pub-format .pub-format__fit { margin: 1.25rem 0 0; padding: 0; border: 0; display: block; font-size: 1.0625rem; line-height: 1.7; }
.pub-format__fit strong,
.pub-format__less strong { font-weight: 650; color: var(--tp-pub-ink); }
.pub-format .pub-format__less {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--tp-pub-hairline-strong);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* How we'd begin: the order matters, so the numbers are set large and light. */
.pub-process__step { border-top: 1px solid var(--tp-pub-hairline-strong); }
.pub-process__step::before {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--tp-pub-ink) 30%, var(--tp-pub-page));
}
.pub-process__title { font-size: 1.25rem; }
.pub-process__body { font-size: 1rem; line-height: 1.65; }


/* ==========================================================================
   Editorial pass (2026-10-10): the homepage as one conversation with Dalton.
   Two voices: the sans is the site, the serif is the man. Headings answer
   each other instead of carrying labels; one photograph runs to the edge on
   purpose; every photograph shares one grade, so a borrowed set reads as one
   shoot.
   ========================================================================== */
.pub { --pub-serif: "Source Serif 4", Georgia, "Times New Roman", serif; }

/* Dalton speaking. */
.pub-voice {
  font-family: var(--pub-serif);
  font-optical-sizing: auto;
  font-feature-settings: normal;
}

/* One grade for every photograph: a touch less colour, a touch more weight. */
.pub-photo__img { filter: saturate(0.84) contrast(1.04); }

/* Hero: his name in the sans, what he does in his own hand. */
.pub-hero__title-quiet {
  margin-top: 0.06em;
  font-family: var(--pub-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: color-mix(in srgb, var(--tp-pub-ink) 58%, var(--tp-pub-page));
}

/* Headings that carry the conversation: a little quieter, a measure that reads as a sentence. */
#goals-heading { max-width: 20ch; }
.pub-hero:not(.pub-hero--talking) + .pub-section { padding-top: clamp(4rem, 2.5rem + 5vw, 8rem); }

/* The story band, full-bleed: the photograph owns the left half of the window, edge to edge and
   top to bottom; the words sit on the right, their right edge on the page grid. */
.pub-story--bleed { padding-block: 0; }
.pub-story--bleed .pub-story__photo { border-radius: 0; }
.pub-story__copy { padding: clamp(3rem, 2rem + 4vw, 5rem) var(--pub-gutter) clamp(4rem, 2rem + 6vw, 7rem); }
@media (min-width: 56rem) {
  .pub-story--bleed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .pub-story--bleed .pub-story__photo { aspect-ratio: auto !important; height: 100%; min-height: 44rem; }
  .pub-story__copy {
    align-self: center;
    padding-block: clamp(5rem, 3rem + 5vw, 9rem);
    padding-left: clamp(3rem, 1rem + 5vw, 6.5rem);
    padding-right: calc(max(0px, (100vw - 72rem - 2 * var(--pub-gutter)) / 2) + var(--pub-gutter));
  }
}
.pub-story__kicker {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(244 245 247 / 0.6);
}
.pub-story__quote.pub-voice {
  max-width: 14ch;
  font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4.25rem);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.pub-story__sign.pub-voice { font-style: italic; font-weight: 400; font-size: 1.25rem; letter-spacing: 0; }

/* Learn: the heading is his sentence, in his voice. */
.pub-learn__title.pub-voice {
  max-width: 13ch;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.375rem);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.pub-learn__text { margin-top: 1.5rem; }

/* The arithmetic: the strip's heading is a reply, so it reads as one. */
.pub-strip__title { font-size: 1.375rem; }

/* The invitation closes the conversation, and he signs it. */
.pub-invite__title { max-width: 18ch; }
.pub-invite__sign {
  margin: -0.75rem 0 2rem;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tp-text-primary);
}
/* The strip reads as reply, then reason: heading and link on one line, the sentence beneath. */
.pub-strip__head .pub-arrow-link { margin-left: auto; }
.pub-strip__sub { order: 3; flex: 0 0 100%; max-width: none; padding-right: max(0px, 100% - 40rem); margin-top: 0.25rem; }

/* ==========================================================================
   Final homepage pass (2026-10-10): stronger grounds, fewer labels, composed
   crops. Each band has its own ground, so neighbours never weigh the same:
   white (meeting), white with photographs (choosing), ink (how I coach),
   paper (understanding), white (arithmetic), white with a portrait (invitation).
   ========================================================================== */

/* Paper: a warm ground for the reading, derived from the page so both themes hold. */
.pub-section--paper { background: color-mix(in srgb, var(--tp-pub-page) 93%, #a67c4e); }

/* Hero: composed on the two people, not the trees behind them. */
.pub-hero__photo .pub-photo__img { transform: scale(1.1); transform-origin: 56% 72%; }

/* Learn: his sentence on the left; the subjects themselves, set large, on the right. */
@media (min-width: 56rem) {
  .pub-section--paper .pub-learn { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .pub-section--paper .pub-learn__intro { position: static; }
}
.pub-section--paper { padding-block: clamp(4.5rem, 3rem + 5vw, 8.5rem); }
.pub-learn__text { max-width: 26rem; margin-bottom: 0; }
.pub-subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 2.25rem;
}
.pub-subject {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.032em;
  color: var(--tp-pub-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color var(--tp-duration-fast);
}
.pub-subject:hover { text-decoration-color: currentColor; }
.pub-subject--all {
  flex-basis: 100%;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: 0;
  color: var(--tp-text-secondary);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
}

/* Arithmetic: white after paper, small on purpose. */
.pub-section--ruled { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* The invitation: a portrait, not a thumbnail. */
@media (min-width: 48rem) {
  .pub-invite { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}
.pub-invite__photo { max-width: 14rem; }
@media (min-width: 48rem) { .pub-invite__photo { max-width: none; } }
.pub-strip__sub { text-wrap: balance; }
.pub-hero:not(.pub-hero--talking) + .pub-section { padding-top: clamp(3.5rem, 2rem + 4vw, 6.5rem); }
@media (max-width: 39.99rem) { .pub-strip__head .pub-arrow-link { order: 4; margin-left: 0; } }