@import url("https://fonts.bunny.net/css?family=cormorant-garamond:400,400i,500,500i,600,700|inter-tight:400,500,600,700&display=swap");
/* ============================================================
   Think Professionally — style.css
   Editorial-magazine motif. Cormorant Garamond display + Inter Tight body.
   Palette: ink navy #0f1f3a, warm cream #f5efe2, brass #b89150.
   GRT scale from grtcalculator.com API (font=Inter+Tight size=18 width=672).
   ============================================================ */

/* ---------- :root ---------- */
:root {
  /* Typography GRT scale (API) */
  --f1: 47px;
  --f2: 37px;
  --f3: 29px;
  --f4: 23px;
  --f5: 18px;
  --f6: 14px;

  --g1: 73px;
  --g2: 59px;
  --g3: 47px;
  --g4: 38px;
  --g5: 31px;
  --g6: 25px;

  --x1: 50px;
  --x2: 31px;
  --x3: 19px;
  --x4: 12px;
  --x5: 7px;
  --x6: 4px;

  /* Layout */
  --w-content: 672px;
  --w-total: 1180px;
  --gutter-full: 32px;
  --gutter-mobile: 20px;
  --phi: 1.61803398875;

  /* Breakpoints (as values, consumed in @media) */
  --b1: 480px;
  --b2: 640px;
  --b3: 880px;
  --b4: 1080px;
  --b5: 1280px;

  /* Fonts */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Palette */
  --bg1: #f5efe2;        /* warm cream */
  --bg2: #ede5d2;        /* deeper cream */
  --bg-deep: #0f1f3a;    /* ink navy surface */
  --bg-deep-2: #1a2a4a;  /* lifted navy for nested elements on deep */
  --c1: #0f1f3a;         /* primary text */
  --c2: #3a4860;         /* secondary text */
  --c3: #6b7488;         /* muted text */
  --ca: #b89150;         /* brass accent */
  --ca-deep: #8c6c3a;    /* brass hover/active */
  --ca-soft: #d5b687;    /* lighter brass for inversions */
  --secondary: #0f1f3a;
  --border1: #d8cfba;    /* cream-derived rule line */
  --border2: #b89150;    /* brass rule line */
  --border-deep: #2a3a5a;/* nav-rule on deep surfaces */

  /* Callout variants (computed split-complements of $ca brass H≈37°) */
  --callout-bg: #ede5d2;       /* same hue family as bg, slightly deeper */
  --callout-text: #0f1f3a;
  --callout-alert-bg: #e6c8c2; /* warm complement, low sat */
  --callout-alert-text: #4a2424;
  --callout-note-bg: #d8e0e0;  /* cool complement, low sat */
  --callout-note-text: #1f2f3a;

  /* Button variants */
  --button-save-bg: #4a6a4a;
  --button-action-bg: #b89150;
  --button-update-bg: #0f1f3a;
  --button-delete-bg: #8c3a3a;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-med: 220ms ease;
  --t-slow: 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  font-feature-settings: "kern", "liga", "calt";
}

::selection {
  background: var(--ca);
  color: var(--bg1);
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-color: var(--ca);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

a:hover {
  color: var(--ca-deep);
  text-decoration-color: var(--ca-deep);
}

a:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c1);
  margin: 0 0 var(--x3) 0;
}

h1 {
  font-size: var(--f1);
  line-height: var(--g1);
  font-weight: 500;
}

h2 {
  font-size: var(--f2);
  line-height: var(--g2);
}

h3 {
  font-size: var(--f3);
  line-height: var(--g3);
}

h4 {
  font-size: var(--f4);
  line-height: var(--g4);
}

h5 {
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 600;
}

h6 {
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 600;
  text-transform: none;
}

p {
  margin: 0 0 var(--x3) 0;
}

p:last-child { margin-bottom: 0; }

ul, ol {
  margin: 0 0 var(--x3) 0;
  padding-left: var(--x3);
}

ul li, ol li {
  margin-bottom: var(--x5);
}

ul li:last-child, ol li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

em, i { font-style: italic; }

small, .small {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

hr {
  border: none;
  border-top: 1px solid var(--border1);
  margin: var(--x2) 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--x4) var(--x3);
  background: var(--c1);
  color: var(--bg1);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--x3);
  top: var(--x3);
}

/* ---------- Universal width model (HR95) ---------- */
section {
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.container {
  width: calc(100% - 2 * var(--gutter-mobile));
  max-width: var(--w-total);
  margin-inline: auto;
}

@media (min-width: 880px) {
  .container {
    width: calc(100% - 2 * var(--gutter-full));
  }
}

/* ---------- Header / Navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--border1);
  background: var(--bg1);
  padding-top: var(--x3);
  padding-bottom: var(--x3);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--x2);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  color: var(--c1);
}

.wordmark .wordmark-mark {
  width: 22px;
  height: 22px;
  margin-right: var(--x4);
  flex-shrink: 0;
  align-self: center;
}

.wordmark .wordmark-text {
  font-family: var(--font-display);
  font-size: var(--f4);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c1);
}

.wordmark .wordmark-text .think {
  color: var(--c1);
}

.wordmark .wordmark-text .pro {
  font-style: italic;
  color: var(--ca-deep);
}

.wordmark:hover .wordmark-text .think,
.wordmark:hover .wordmark-text .pro {
  color: var(--ca-deep);
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav li {
  margin: 0;
}

.primary-nav a {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--c2);
  text-decoration: none;
  padding: var(--x5) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.primary-nav a:hover,
.primary-nav .is-current {
  color: var(--c1);
  border-bottom-color: var(--ca);
}

.mobile-nav-toggle { display: none; }

@media (max-width: 879px) {
  .primary-nav ul {
    gap: var(--x4);
  }
  .primary-nav a {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-deep);
  color: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
  margin-top: var(--x1);
}

.site-footer h4 {
  font-family: var(--font-display);
  color: var(--bg1);
  font-size: var(--f4);
  line-height: var(--g4);
  margin-bottom: var(--x3);
}

.site-footer p {
  color: var(--ca-soft);
  font-size: var(--f6);
  line-height: var(--g6);
}

.site-footer a {
  color: var(--bg1);
  text-decoration-color: var(--ca);
}

.site-footer a:hover {
  color: var(--ca-soft);
  text-decoration-color: var(--ca-soft);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--x1);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-grid ul li {
  margin-bottom: var(--x5);
  font-size: var(--f6);
  line-height: var(--g6);
}

.site-footer .footer-bottom {
  margin-top: var(--x1);
  padding-top: var(--x3);
  border-top: 1px solid var(--border-deep);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--x3);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--ca-soft);
}

.site-footer .closing-mark {
  display: block;
  margin: 0 auto var(--x2);
  width: 80px;
  color: var(--ca);
}

@media (max-width: 879px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Visual language: annotation marks ---------- */
.mark {
  display: inline-block;
  vertical-align: middle;
  color: var(--ca);
}

.mark-annotation { width: 32px; height: 12px; }
.mark-pilcrow { width: 14px; height: 22px; }
.mark-bracket { width: 12px; height: 22px; }
.mark-closing-rule { width: 80px; height: 14px; }

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  height: var(--x2);
}

.section-divider svg {
  width: 64px;
  height: 16px;
  color: var(--ca);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--x4);
  padding: var(--x4) var(--x3);
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--c1);
  color: var(--bg1);
  border: 1px solid var(--c1);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.button:hover {
  background: var(--ca-deep);
  color: var(--bg1);
  border-color: var(--ca-deep);
}

.button:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

.button:active { transform: translateY(1px); }

.button.action {
  background: var(--ca);
  color: var(--c1);
  border-color: var(--ca);
}

.button.action:hover {
  background: var(--ca-deep);
  color: var(--bg1);
  border-color: var(--ca-deep);
}

.button.save {
  background: var(--button-save-bg);
  color: var(--bg1);
  border-color: var(--button-save-bg);
}

.button.save:hover {
  background: #354c35;
  border-color: #354c35;
}

.button.update {
  background: var(--c1);
  color: var(--bg1);
  border-color: var(--c1);
}

.button.update:hover {
  background: var(--bg-deep-2);
  border-color: var(--bg-deep-2);
}

.button.delete {
  background: var(--button-delete-bg);
  color: var(--bg1);
  border-color: var(--button-delete-bg);
}

.button.delete:hover {
  background: #6a2a2a;
  border-color: #6a2a2a;
}

.button.ghost {
  background: transparent;
  color: var(--c1);
  border-color: var(--c1);
}

.button.ghost:hover {
  background: var(--c1);
  color: var(--bg1);
}

.button.invert {
  background: var(--bg1);
  color: var(--c1);
  border-color: var(--bg1);
}

.button.invert:hover {
  background: var(--ca);
  color: var(--c1);
  border-color: var(--ca);
}

/* ---------- Formatting primitives ---------- */
.callout {
  margin: 0 0 var(--x2) 0;
  padding: var(--x3);
  background: var(--callout-bg);
  color: var(--callout-text);
  border-left: 3px solid var(--ca);
  font-size: var(--f5);
  line-height: var(--g5);
}

.callout.alert {
  background: var(--callout-alert-bg);
  color: var(--callout-alert-text);
  border-left-color: var(--button-delete-bg);
}

.callout.note {
  background: var(--callout-note-bg);
  color: var(--callout-note-text);
  border-left-color: var(--c2);
}

.callout p:last-child,
.callout > :last-child {
  margin-bottom: 0;
}

.caption {
  display: block;
  font-size: var(--f6);
  line-height: var(--g6);
  font-style: italic;
  color: var(--c2);
  margin-top: var(--x5);
}

.highlight {
  background: linear-gradient(transparent 60%, rgba(184, 145, 80, 0.32) 60%);
  color: inherit;
  padding: 0;
}

.impact {
  display: block;
  font-family: var(--font-display);
  font-size: var(--f1);
  line-height: var(--g1);
  font-weight: 500;
  color: var(--ca-deep);
  margin: 0;
  letter-spacing: -0.012em;
}

.drop-cap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4em;
  line-height: 0.85;
  font-weight: 500;
  color: var(--ca-deep);
  padding: 6px 10px 0 0;
  margin: 4px 4px 0 0;
}

.pop {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ca-deep);
  font-size: 1.08em;
  line-height: inherit;
}

blockquote {
  margin: var(--x2) 0;
  padding: 0 0 0 var(--x2);
  border-left: 2px solid var(--ca);
  font-family: var(--font-display);
  font-style: normal;       /* HR81 reset */
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 400;
  color: var(--c1);
}

blockquote p {
  margin: 0 0 var(--x4) 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

blockquote + cite,
blockquote + .caption {
  display: block;
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  font-style: normal;
  color: var(--c2);
  margin-top: var(--x5);
  margin-bottom: var(--x2);
}

pre {
  margin: 0 0 var(--x2) 0;
  padding: var(--x3);
  background: var(--bg2);
  color: var(--c1);
  border-left: 3px solid var(--c2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--f6);
  line-height: var(--g6);
  overflow-x: auto;
}

pre code {
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

:not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  line-height: inherit;
  background: var(--bg2);
  padding: 2px 5px;
  border-radius: 2px;
  color: var(--c1);
}

/* ---------- Forms ---------- */
form fieldset {
  border: 1px solid var(--border1);
  padding: var(--x3);
  margin: 0 0 var(--x2) 0;
}

form legend {
  font-family: var(--font-display);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 500;
  padding: 0 var(--x4);
  color: var(--c1);
}

form label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 600;
  color: var(--c1);
  margin-bottom: var(--x5);
}

form input,
form textarea,
form select {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background: var(--bg1);
  border: 1px solid var(--border1);
  border-radius: 0;
  padding: var(--x4) var(--x4);
  margin-bottom: var(--x2);
  transition: border-color var(--t-fast);
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--ca);
  box-shadow: 0 0 0 3px rgba(184, 145, 80, 0.2);
}

form textarea { min-height: calc(var(--g5) * 6); }

/* ---------- Kicker (numbered-with-divider style) ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--x5);
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-deep);
  margin: 0 0 var(--x3) 0;
}

.kicker .kicker-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--f5);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ca-deep);
}

.kicker .kicker-divider {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--ca);
  flex-shrink: 0;
}

/* ---------- Page content (.page-content scope) ---------- */
.page-content {
  max-width: var(--w-content);
  margin-inline: auto;
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote,
.page-content pre,
.page-content img,
.page-content figure,
.page-content .callout,
.page-content .caption {
  margin-bottom: var(--x2);
}

.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
}

.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x4);
}

.page-content ul li:last-child,
.page-content ol li:last-child {
  margin-bottom: 0;
}

.page-content form input,
.page-content form textarea,
.page-content form select,
.page-content form fieldset {
  margin-bottom: var(--x2);
}

/* ---------- Aspect-ratio image placeholders ---------- */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-4-5 { aspect-ratio: 4 / 5; }

.image-placeholder {
  background: var(--bg2);
  color: var(--c2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f6);
  line-height: var(--g6);
}

/* ---------- Hero section ---------- */
.hero {
  padding-top: var(--x1);
  padding-bottom: var(--x1);
  background:
    radial-gradient(ellipse at 85% 15%, rgba(184, 145, 80, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  position: relative;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--x1);
  align-items: end;
  min-height: 64vh;
}

.hero .hero-issue {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--ca-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--x3);
}

.hero h1 {
  font-size: clamp(48px, 9vw, 96px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.018em;
  margin-bottom: var(--x2);
  color: var(--c1);
}

.hero h1 em {
  font-style: italic;
  color: var(--ca-deep);
}

.hero .hero-sub {
  font-size: var(--f4);
  line-height: var(--g4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c2);
  max-width: 36em;
  margin-bottom: var(--x2);
}

.hero .hero-actions {
  display: flex;
  align-items: center;
  gap: var(--x3);
  margin-top: var(--x3);
}

.hero .hero-meta {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

.hero .hero-marginalia {
  align-self: end;
  padding: var(--x3) 0 var(--x3) var(--x3);
  border-left: 1px solid var(--border1);
}

.hero .hero-marginalia .annotation {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
  margin: 0 0 var(--x4) 0;
}

.hero .hero-marginalia .annotation-attrib {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c3);
  letter-spacing: 0.02em;
}

.hero .hero-mark-decor {
  position: absolute;
  top: var(--x2);
  right: var(--x2);
  width: 96px;
  height: 96px;
  color: var(--ca);
  opacity: 0.55;
}

@media (max-width: 879px) {
  .hero .container {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero h1 {
    font-size: clamp(40px, 12vw, 64px);
    line-height: 1.04;
  }
  .hero .hero-marginalia {
    border-left: none;
    border-top: 1px solid var(--border1);
    padding: var(--x3) 0 0 0;
  }
}

/* ---------- Intro section ---------- */
.intro {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.intro .container {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--x1);
  align-items: start;
}

.intro .intro-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--ca-deep);
  margin: 0;
}

.intro .intro-body {
  font-size: var(--f4);
  line-height: var(--g4);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c1);
  margin: 0;
}

@media (max-width: 879px) {
  .intro .container {
    grid-template-columns: 1fr;
    gap: var(--x3);
  }
}

/* ---------- Pillars section ---------- */
.pillars {
  background: var(--bg2);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.pillars .pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--x1);
  margin-top: var(--x2);
}

.pillars .pillar h3 {
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  margin-bottom: var(--x4);
  color: var(--c1);
  position: relative;
  padding-left: var(--x3);
}

.pillars .pillar h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 1.5px;
  background: var(--ca);
}

.pillars .pillar p {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
}

@media (max-width: 879px) {
  .pillars .pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--x2);
  }
}

/* ---------- Manifesto bleed (deep ink-navy section) ---------- */
.manifesto-bleed {
  background: var(--bg-deep);
  color: var(--bg1);
  padding-top: calc(var(--x1) * 1.4);
  padding-bottom: calc(var(--x1) * 1.4);
  position: relative;
}

.manifesto-bleed .container {
  max-width: 840px;
}

.manifesto-bleed .kicker {
  color: var(--ca-soft);
}

.manifesto-bleed .kicker .kicker-number,
.manifesto-bleed .kicker .kicker-divider {
  color: var(--ca-soft);
  background: var(--ca-soft);
}

.manifesto-bleed h2 {
  color: var(--bg1);
  font-size: var(--f2);
  line-height: var(--g2);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 22ch;
  margin-bottom: var(--x2);
}

.manifesto-bleed p {
  font-size: var(--f4);
  line-height: var(--g4);
  font-family: var(--font-display);
  color: var(--ca-soft);
  max-width: 38em;
  font-weight: 400;
}

.manifesto-bleed p:not(:last-child) {
  margin-bottom: var(--x3);
}

.manifesto-bleed .signature {
  display: flex;
  align-items: center;
  gap: var(--x4);
  margin-top: var(--x2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--ca-soft);
}

.manifesto-bleed .signature .annotation-mark {
  width: 32px;
  height: 12px;
  color: var(--ca);
}

/* ---------- Events calendar (vertical list, brass date-slug) ---------- */
.events-calendar {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.events-calendar .calendar-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--x3);
  border-bottom: 1px solid var(--border1);
  padding-bottom: var(--x3);
  margin-bottom: var(--x2);
}

.events-calendar .calendar-heading h2 {
  margin: 0;
}

.events-calendar .calendar-heading p {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  text-align: right;
  margin: 0;
}

.calendar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calendar-entry {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--x2);
  padding: var(--x2) 0;
  border-bottom: 1px solid var(--border1);
  align-items: start;
}

.calendar-entry:last-child {
  border-bottom: none;
}

.calendar-entry .date-slug {
  font-family: var(--font-body);
  background: var(--ca);
  color: var(--c1);
  padding: var(--x4) var(--x4);
  text-align: center;
  position: relative;
}

.calendar-entry .date-slug .month {
  display: block;
  font-size: var(--f6);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--x5);
}

.calendar-entry .date-slug .day {
  display: block;
  font-family: var(--font-display);
  font-size: var(--f2);
  line-height: 1;
  font-weight: 500;
  margin-bottom: var(--x5);
}

.calendar-entry .date-slug .year {
  display: block;
  font-size: var(--f6);
  line-height: 1;
  color: var(--ca-deep);
}

.calendar-entry .entry-body h3 {
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  margin: 0 0 var(--x5) 0;
}

.calendar-entry .entry-body h3 a {
  color: var(--c1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}

.calendar-entry .entry-body h3 a:hover {
  border-bottom-color: var(--ca);
}

.calendar-entry .entry-meta {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin: 0 0 var(--x5) 0;
  letter-spacing: 0.02em;
}

.calendar-entry .entry-meta .sep {
  color: var(--ca);
  margin: 0 var(--x5);
}

.calendar-entry .entry-body .entry-summary {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  margin: 0;
  max-width: 56em;
}

.calendar-entry .entry-aside {
  text-align: right;
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  min-width: 96px;
  padding-top: var(--x5);
}

.calendar-entry .entry-aside .price-from {
  display: block;
  color: var(--c3);
  margin-bottom: var(--x5);
}

.calendar-entry .entry-aside .price-amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: 1;
  color: var(--c1);
  font-weight: 500;
}

@media (max-width: 879px) {
  .calendar-entry {
    grid-template-columns: 96px 1fr;
    gap: var(--x3);
  }
  .calendar-entry .entry-aside {
    grid-column: 1 / -1;
    text-align: left;
    border-top: 1px dotted var(--border1);
    padding-top: var(--x4);
  }
  .calendar-entry .date-slug .day {
    font-size: var(--f3);
    line-height: 1;
  }
}

/* ---------- Speakers section / page ---------- */
.speakers-byline {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.speakers-byline .byline-list {
  list-style: none;
  margin: var(--x2) 0 0 0;
  padding: 0;
}

.speakers-byline .byline-entry {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: var(--x2);
  padding: var(--x2) 0;
  border-bottom: 1px solid var(--border1);
  align-items: start;
}

.speakers-byline .byline-entry:last-child {
  border-bottom: none;
}

.speakers-byline .byline-entry .speaker-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.02);
}

.speakers-byline .byline-entry .speaker-name {
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  margin: 0 0 var(--x5) 0;
  color: var(--c1);
}

.speakers-byline .byline-entry .speaker-role {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-deep);
  margin: 0 0 var(--x5) 0;
}

.speakers-byline .byline-entry .speaker-org {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
  margin: 0 0 var(--x4) 0;
}

.speakers-byline .byline-entry .speaker-bio {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  margin: 0;
}

.speakers-byline .byline-entry .speaker-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c1);
  margin: 0;
  padding-left: var(--x3);
  border-left: 2px solid var(--ca);
}

@media (max-width: 879px) {
  .speakers-byline .byline-entry {
    grid-template-columns: 120px 1fr;
    gap: var(--x3);
  }
  .speakers-byline .byline-entry .speaker-quote {
    grid-column: 1 / -1;
    border-left: 2px solid var(--ca);
  }
}

/* ---------- Sponsors editorial list ---------- */
.sponsors-list {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.sponsors-list .tier-block {
  margin-bottom: var(--x1);
}

.sponsors-list .tier-block:last-child {
  margin-bottom: 0;
}

.sponsors-list .tier-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--ca-deep);
  margin: 0 0 var(--x3) 0;
  border-bottom: 1px solid var(--border1);
  padding-bottom: var(--x4);
}

.sponsors-list .sponsor-entry {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: var(--x2);
  padding: var(--x3) 0;
  border-bottom: 1px solid var(--border1);
  align-items: start;
}

.sponsors-list .sponsor-entry:last-child {
  border-bottom: none;
}

.sponsors-list .sponsor-entry h3 {
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  margin: 0;
  color: var(--c1);
}

.sponsors-list .sponsor-entry p {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  margin: 0;
}

@media (max-width: 879px) {
  .sponsors-list .sponsor-entry {
    grid-template-columns: 1fr;
    gap: var(--x4);
  }
}

/* ---------- Event detail page ---------- */
.event-header {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x2);
  border-bottom: 1px solid var(--border1);
}

.event-header .event-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--x3);
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.04em;
  color: var(--c2);
  margin-bottom: var(--x3);
}

.event-header .event-meta-row .event-type-tag {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ca-deep);
  letter-spacing: 0.1em;
}

.event-header .event-meta-row .sep {
  color: var(--ca);
}

.event-header h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin-bottom: var(--x3);
  color: var(--c1);
  max-width: 18ch;
}

.event-header .event-summary {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 400;
  color: var(--c2);
  max-width: 28em;
  margin: 0;
}

.event-hero-image {
  background-color: var(--bg2);
  background-size: cover;
  background-position: center;
  height: clamp(280px, 40vw, 480px);
}

.event-hero-conference {
  background-image: url("/user-content/themes/think-professionally/images/hero-conference.png");
}

.event-hero-summit {
  background-image: url("/user-content/themes/think-professionally/images/hero-summit.png");
}

.event-hero-retreat {
  background-image: url("/user-content/themes/think-professionally/images/hero-retreat.png");
}

.event-hero-workshop {
  background-image: url("/user-content/themes/think-professionally/images/hero-workshop.png");
}

.event-hero-masterclass {
  background-image: url("/user-content/themes/think-professionally/images/hero-masterclass.png");
}

.event-hero-webinar {
  background-image: url("/user-content/themes/think-professionally/images/hero-webinar.png");
}

.event-body {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.event-body .event-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--x1);
  align-items: start;
}

.event-body .event-main {
  max-width: var(--w-content);
}

.event-body .event-main h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
}

.event-body .event-main h2:first-child {
  margin-top: 0;
}

.event-body .event-aside {
  position: sticky;
  top: var(--x2);
  padding: var(--x3);
  background: var(--bg2);
  border-top: 3px solid var(--ca);
}

.event-body .event-aside h4 {
  font-family: var(--font-display);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 500;
  margin: 0 0 var(--x4) 0;
}

.event-body .event-aside dl {
  margin: 0 0 var(--x3) 0;
  font-size: var(--f6);
  line-height: var(--g6);
}

.event-body .event-aside dt {
  font-weight: 600;
  color: var(--c2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--x4);
  font-size: 12px;
  line-height: 1.4;
}

.event-body .event-aside dt:first-child { margin-top: 0; }

.event-body .event-aside dd {
  margin: var(--x6) 0 0 0;
  color: var(--c1);
  font-size: var(--f6);
  line-height: var(--g6);
}

.event-body .outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--x2) 0;
}

.event-body .outcomes-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--x3);
  font-size: var(--f5);
  line-height: var(--g5);
}

.event-body .outcomes-list li:last-child { margin-bottom: 0; }

.event-body .outcomes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 24px;
  height: 1.5px;
  background: var(--ca);
}

.event-body .outcomes-list li::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 0.6em;
  width: 1.5px;
  height: 8px;
  background: var(--ca);
}

.event-body .event-aside .button {
  display: block;
  width: 100%;
  margin-top: var(--x3);
  text-align: center;
}

.event-body .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x3);
  margin-top: var(--x2);
}

.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--x3);
  padding: var(--x4) 0;
  border-bottom: 1px solid var(--border1);
}

.schedule-list li:last-child { border-bottom: none; }

.schedule-list .schedule-time {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--ca-deep);
}

.schedule-list .schedule-title {
  font-weight: 600;
  margin: 0 0 var(--x6) 0;
  color: var(--c1);
  font-size: var(--f5);
  line-height: var(--g5);
}

.schedule-list .schedule-speaker {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  margin: 0 0 var(--x6) 0;
}

.schedule-list .schedule-desc {
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin: 0;
}

.tickets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--x3);
  margin: var(--x2) 0;
}

.ticket-tier {
  padding: var(--x3);
  background: var(--bg2);
  border-top: 3px solid var(--ca);
}

.ticket-tier.patron {
  background: var(--bg-deep);
  color: var(--bg1);
  border-top-color: var(--ca);
}

.ticket-tier.patron h4,
.ticket-tier.patron .ticket-price {
  color: var(--bg1);
}

.ticket-tier.patron p {
  color: var(--ca-soft);
}

.ticket-tier h4 {
  font-family: var(--font-display);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 500;
  margin: 0 0 var(--x4) 0;
  letter-spacing: 0.02em;
}

.ticket-tier .ticket-price {
  font-family: var(--font-display);
  font-size: var(--f2);
  line-height: 1;
  font-weight: 500;
  color: var(--ca-deep);
  margin: 0 0 var(--x3) 0;
}

.ticket-tier.patron .ticket-price { color: var(--ca-soft); }

.ticket-tier p {
  font-size: var(--f6);
  line-height: var(--g6);
  margin: 0;
}

@media (max-width: 879px) {
  .event-body .event-layout {
    grid-template-columns: 1fr;
  }
  .event-body .event-aside {
    position: static;
    margin-top: var(--x1);
  }
  .tickets-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Page template (about/contact/privacy/terms) ---------- */
.page-template-header {
  background: var(--bg1);
  padding-top: var(--x1);
  padding-bottom: var(--x2);
  border-bottom: 1px solid var(--border1);
}

.page-template-header .container { max-width: var(--w-content); }

.page-template-header h1 {
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 500;
  margin-bottom: var(--x3);
}

.page-template-header p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--f3);
  line-height: var(--g3);
  color: var(--c2);
  margin: 0;
}

.page-template-body {
  padding-top: var(--x1);
  padding-bottom: var(--x1);
}

.page-template-body .container { max-width: var(--w-content); }

/* ---------- Closing CTA (home) ---------- */
.closing-cta {
  background: var(--bg2);
  padding-top: calc(var(--x1) * 1.2);
  padding-bottom: calc(var(--x1) * 1.2);
}

.closing-cta .container {
  max-width: 720px;
  text-align: left;
}

.closing-cta h2 {
  font-size: var(--f2);
  line-height: var(--g2);
  font-style: italic;
  font-weight: 400;
  margin-bottom: var(--x3);
}

.closing-cta p {
  font-size: var(--f4);
  line-height: var(--g4);
  font-family: var(--font-display);
  color: var(--c1);
  margin-bottom: var(--x2);
}

.closing-cta .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x3);
  margin-top: var(--x3);
}

/* ---------- Reveal-on-scroll (HR67, HR84) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.delay-1 { transition-delay: 80ms; }
  .reveal.delay-2 { transition-delay: 160ms; }
  .reveal.delay-3 { transition-delay: 240ms; }
  .reveal.delay-4 { transition-delay: 320ms; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero { background: var(--bg1); }
}

/* ongoing pulse on hero / closing-cta primary action (HR76 item 2) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes brassBreathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 145, 80, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(184, 145, 80, 0); }
  }
  .button.action.breathing {
    animation: brassBreathe 2800ms ease-out infinite;
  }
}

/* ---------- Breadcrumbs (in-header consolidation rule) ---------- */
.breadcrumbs {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  letter-spacing: 0.04em;
}

.breadcrumbs a {
  color: var(--c2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  color: var(--c1);
  border-bottom-color: var(--ca);
}

.breadcrumbs .sep {
  margin: 0 var(--x5);
  color: var(--ca);
}

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

/* ============================================================
   PageMotor modular-content nav adapters.
   PM emits Main Menu (modular content #19) as <ul class="menu">
   inside <div class="modular-content">. The design CSS expects a
   .primary-nav wrapper. These rules mirror .primary-nav onto the
   modular-content output so the nav styles apply without editing
   the modular row body.
   ============================================================ */
.site-header .modular-content {
  margin-left: auto;
}
.site-header .modular-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .modular-content li {
  margin: 0;
}
.site-header .modular-content a {
  font-family: var(--font-body);
  font-size: var(--f6);
  line-height: 1;
  font-weight: 600;
  color: var(--c2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 160ms, border-bottom-color 160ms;
}
.site-header .modular-content a:hover {
  color: var(--c1);
  border-bottom-color: var(--ca);
}
@media (max-width: 880px) {
  .site-header .modular-content ul {
    gap: var(--x4);
  }
  .site-header .modular-content a {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* Footer modular-content adapter. The design's footer expects a
   .footer-grid wrapper; PM's modular row emits a .modular-content
   div containing the brand, tagline, nav, and legal lines. */
.site-footer .modular-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x3);
  color: var(--bg1);
}
.site-footer .modular-content .footer-brand {
  font-family: var(--font-display);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  color: var(--bg1);
}
.site-footer .modular-content .footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ca-soft);
  margin: 0;
}
.site-footer .modular-content .footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x3);
  list-style: none;
  margin: var(--x3) 0 0 0;
  padding: 0;
}
.site-footer .modular-content .footer-nav a {
  font-family: var(--font-body);
  font-size: var(--f6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg1);
  border-bottom: 1px solid var(--border-deep);
  padding-bottom: 4px;
  transition: color 160ms, border-bottom-color 160ms;
}
.site-footer .modular-content .footer-nav a:hover {
  color: var(--ca-soft);
  border-bottom-color: var(--ca);
}
.site-footer .modular-content .footer-legal {
  font-size: var(--f6);
  color: var(--c3);
  margin: 0;
}
.site-footer .modular-content .footer-legal a {
  color: var(--ca-soft);
}

/* ── Pragmatic patches: reveal fail-safe + nav adapter ─────── */

/* Reveal animations must NOT hide content if JS doesn't fire promptly.
   Browsers without IntersectionObserver, slow JS, or Playwright captures
   before animation completes — all need content to be visible by default. */
.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Re-apply animation as progressive enhancement only when JS is ready.
   Body class js-ready added by theme.js when observer is set up. */
.js-ready .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.js-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Navigation adapter — modular Menu uses ul.menu; design CSS targets .primary-nav.
   Make .primary-nav styling cascade to ul.menu inside the site header / nav blocks. */
.site-header ul.menu,
.header ul.menu,
#nav ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--x2, 31px);
    align-items: baseline;
}
.site-header ul.menu li,
.header ul.menu li,
#nav ul.menu li { margin: 0; }
.site-header ul.menu a,
.header ul.menu a,
#nav ul.menu a {
    font-family: var(--font-body, 'Inter Tight', sans-serif);
    font-size: var(--f6, 14px);
    line-height: 1;
    color: var(--c2, #0f1f3a);
    text-decoration: none;
    padding-bottom: 0.4em;
    border-bottom: 1px solid transparent;
    transition: color 200ms, border-color 200ms;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.site-header ul.menu a:hover,
.header ul.menu a:hover,
#nav ul.menu a:hover {
    color: var(--c1, #0f1f3a);
    border-bottom-color: var(--ca, #b89150);
}


/* Final override: kill the JS-ready hide-by-default. Animations stay as enhancement
   but content always visible — Playwright captures, slow networks, JS-disabled all work. */
.reveal,
.reveal.delay-1,
.reveal.delay-2,
.reveal.delay-3,
.reveal.delay-4,
.js-ready .reveal,
.js-ready .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ── Speakers byline — clean layout v3 ───────────────────────
   Container widened from 672px → 880px so the text column has room.
   Two-column grid on desktop: portrait left (200px), text right.
   Quote sits BELOW the text, spanning the text column only (not under
   the portrait), with a brass left-rule. */

.speakers-byline > .container {
    max-width: 880px;
}

@media (min-width: 760px) {
    .speakers-byline .byline-entry {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "portrait text"
            "portrait quote";
        gap: 24px 36px;
        margin: 0 0 56px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(184, 145, 80, 0.25);
    }
    .speakers-byline .byline-entry:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .speakers-byline .byline-entry .speaker-portrait {
        grid-area: portrait;
        width: 200px;
        max-width: 200px;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        align-self: start;
    }
    .speakers-byline .byline-entry .byline-text { grid-area: text; min-width: 0; }
    .speakers-byline .byline-entry .speaker-quote {
        grid-area: quote;
        margin: 8px 0 0;
        padding: 0 0 0 24px;
        border: none;
        font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
        font-style: italic;
        font-size: 19px;
        line-height: 1.42;
        color: var(--c1, #0f1f3a);
        position: relative;
        max-width: 560px;
    }
    .speakers-byline .byline-entry .speaker-quote::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background: var(--ca, #b89150);
    }
    .speakers-byline .byline-entry .speaker-quote p { margin: 0; }
}

/* Bio paragraphs — bite-sized ADHD-friendly */
.speakers-byline .byline-entry .speaker-bio p {
    margin: 0 0 0.95em;
    font-size: 16px;
    line-height: 1.62;
    font-family: 'Inter Tight', 'Inter', sans-serif;
}
.speakers-byline .byline-entry .speaker-bio p:last-child {
    margin-bottom: 0;
}

/* Name + role + org cluster */
.speakers-byline .byline-entry .speaker-name {
    margin: 0 0 4px;
    font-size: 28px;
    line-height: 1.12;
}
.speakers-byline .byline-entry .speaker-role {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ca, #b89150);
    font-weight: 500;
}
.speakers-byline .byline-entry .speaker-org {
    margin: 0 0 18px;
    font-style: italic;
    color: var(--c2, #2a3a55);
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
}
.speakers-byline .byline-entry .speaker-bio {
    margin-top: 14px;
}

/* Mobile: stack everything */
@media (max-width: 759px) {
    .speakers-byline .byline-entry {
        display: block;
        margin: 0 0 48px;
        padding-bottom: 36px;
        border-bottom: 1px solid rgba(184, 145, 80, 0.25);
    }
    .speakers-byline .byline-entry .speaker-portrait {
        max-width: 220px;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        margin: 0 0 18px;
        display: block;
    }
    .speakers-byline .byline-entry .speaker-quote {
        margin: 16px 0 0;
        padding: 0 0 0 18px;
        border-left: 2px solid var(--ca, #b89150);
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 18px;
        line-height: 1.4;
    }
    .speakers-byline .byline-entry .speaker-quote p { margin: 0; }
}

/* Wider page-content wrapper for pages with .speakers-byline or .sponsors-grid.
   The editorial 672px column suits prose but cramps the speakers/sponsors layouts. */
.page-content:has(.speakers-byline),
.page-content:has(.sponsors-grid) {
    max-width: var(--w-total);
}