@import url("https://fonts.bunny.net/css?family=cormorant-garamond:400,400i,500,500i,600|inter-tight:400,500,600&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;
}

.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.webp");
}

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

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

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

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

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

.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. */
/* (Older reveal rules consolidated into the cleaned-up block lower down.
   This block intentionally left thin — the canonical rules live below.) */

/* 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);
}


/* Reveal-on-scroll, cleaned up. Default state is visible — content always
   shows even if JS fails, screenshots capture below-the-fold properly, slow
   networks render. Animation is layered on as a progressive enhancement:
   only applies when (a) the user has not asked for reduced motion AND (b)
   the JS bootstrap has run and set html.js-ready. theme.js also has a 2s
   safety timer that reveals anything still hidden, in case the observer
   misses an element. */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
    html.js-ready .reveal:not(.is-visible) {
        opacity: 0;
        transform: translateY(28px);
    }
    .reveal.delay-1 { transition-delay: 80ms; }
    .reveal.delay-2 { transition-delay: 160ms; }
    .reveal.delay-3 { transition-delay: 240ms; }
    .reveal.delay-4 { transition-delay: 320ms; }
}

/* ── 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),
.page-content:has(.sponsors-list) {
    max-width: var(--w-total);
}


/* Widen page-content wrapper for pages that aren't just prose.
   The 672px editorial column is right for About/Contact/Privacy/Terms,
   but cramped for home (multi-section editorial spread) and events
   listing (vertical calendar with date slugs). Each section inside
   then controls its own width via its .container rule. */
.page-home .page-content,
.page-events-listing .page-content,
.page-content:has(.section.hero),
.page-content:has(.section.events-calendar),
.page-content:has(.calendar-list),
.page-content:has(.section.upcoming),
.page-content:has(.section.manifesto-bleed),
.page-content:has(.section.pillars) {
    max-width: 100%;
    width: 100%;
}

/* Ensure the inner .container picks up its own max-width without inheriting
   anything narrower from the parent. */
.page-home .section > .container,
.page-events-listing .section > .container {
    max-width: var(--w-total);
}

/* --- per-event bespoke heros (overrides per-sub-type) --- */
body.event-slug-the-strategic-pause .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-the-strategic-pause.webp") !important; }
body.event-slug-ai-for-the-considered-executive .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-ai-for-the-considered-executive.webp") !important; }
body.event-slug-the-slow-retreat .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-the-slow-retreat.webp") !important; }
body.event-slug-boardroom-letters .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-boardroom-letters.webp") !important; }
body.event-slug-negotiation-in-practice .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-negotiation-in-practice.webp") !important; }
body.event-slug-speak-plainly .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-speak-plainly.webp") !important; }
body.event-slug-communication-under-pressure .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-communication-under-pressure.webp") !important; }
body.event-slug-the-end-of-year-review .event-hero-image { background-image: url("/user-content/themes/think-professionally/images/hero-the-end-of-year-review.webp") !important; }
/* --- end per-event bespoke heros --- */

/* --- Event detail pages need the full grid width (main + 240px aside),
   otherwise the booking form, ticket tier grid, and schedule list are
   cramped into the 672px page-content cap. The event-main inside still
   caps its prose at var(--w-content) so reading flow stays editorial. */
.page-content:has(.event-body),
.page-content:has(.event-header) {
    max-width: 100%;
    width: 100%;
}

/* The .container immediately inside .page-content on event pages needs
   to be told its full theme width, otherwise it inherits the narrower
   editorial column from above. */
.page-content > .container:has(.event-body),
.page-content > .container:has(.event-header),
.page-content:has(.event-body) > .container,
.page-content:has(.event-header) > .container {
    max-width: var(--w-total);
}

/* Event-body main column: allow it to fill the grid track, but keep
   prose width comfortable for paragraphs via the article max-width.
   Schedule / tickets / booking form get the full grid track. */
.event-body .event-main {
    max-width: none;
}
.event-body .event-main > p,
.event-body .event-main > h2,
.event-body .event-main > h3,
.event-body .event-main > ul,
.event-body .event-main > ol,
.event-body .event-main > blockquote {
    max-width: 64ch;
}

/* ── Speaker deep-bio page (/speakers/<slug>/) ─────────────── */

.speaker-deep {
    background: var(--bg1);
    padding-top: var(--x1);
    padding-bottom: var(--x1);
}
.speaker-deep__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--x1);
    align-items: start;
}
.speaker-deep__portrait img {
    width: 100%;
    height: auto;
    display: block;
    border-top: 3px solid var(--ca);
}
.speaker-deep__text {
    max-width: 64ch;
}
.speaker-deep__quote {
    border-left: 3px solid var(--ca);
    padding: 4px 0 4px 16px;
    margin: 0 0 var(--x3);
    font-family: var(--ff-display);
    font-size: 1.25em;
    font-style: italic;
    color: var(--tx1);
}
.speaker-deep__quote p { margin: 0; }
.speaker-deep__bio p {
    margin-bottom: var(--x3);
    font-size: 1.02em;
    line-height: 1.6;
}
.speaker-deep__heading {
    margin-top: var(--x1);
    margin-bottom: var(--x3);
    font-family: var(--ff-display);
}
.speaker-deep__events {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--x1);
    border-top: 1px solid var(--bd1);
}
.speaker-deep__events li {
    border-bottom: 1px solid var(--bd1);
}
.speaker-deep__event-link {
    display: grid;
    grid-template-columns: minmax(130px, max-content) 1fr auto;
    column-gap: 24px;
    align-items: baseline;
    padding: 14px 0;
    text-decoration: none;
    color: var(--tx1);
}
.speaker-deep__event-link:hover {
    background: rgba(184,145,80,0.05);
}
.speaker-deep__event-role {
    font-family: var(--ff-display);
    font-size: 0.9em;
    color: var(--ca);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.speaker-deep__event-title {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--bd1);
    text-underline-offset: 2px;
}
.speaker-deep__event-link:hover .speaker-deep__event-title {
    text-decoration-color: var(--ca);
}
.speaker-deep__event-date {
    font-size: 0.95em;
    color: var(--tx2);
    white-space: nowrap;
}
.speaker-deep__back {
    margin-top: var(--x1);
}
.speaker-deep__back a {
    text-decoration: none;
    color: var(--ca);
    font-family: var(--ff-display);
}
.speaker-deep__back a:hover { text-decoration: underline; }

/* Speaker pages use a similar wide wrapper rule */
.page-content:has(.speaker-deep) {
    max-width: 100%;
    width: 100%;
}
.page-content:has(.speaker-deep) > .container {
    max-width: var(--w-total);
}

@media (max-width: 720px) {
    .speaker-deep__layout {
        grid-template-columns: 1fr;
    }
    .speaker-deep__portrait img {
        max-width: 320px;
    }
    .speaker-deep__event-link {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0;
    }
}

/* ── Linkified speaker names in event bodies ───────────────── */

.speaker-link,
.speaker-name-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--bd1);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.speaker-link:hover,
.speaker-name-link:hover {
    text-decoration-color: var(--ca);
}

/* Override the global form input width:100% for checkbox/radio. The theme
   rule at line 723 sets `form input { width: 100% }` for text inputs but
   it also catches checkboxes and radios — pushing the label text far to
   the right inside any flex-row label (e.g. ep-events register consents).
   Force checkboxes + radios back to their native intrinsic width. */
form input[type="checkbox"],
form input[type="radio"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin-bottom: 0;
}

/* The ep-events consent labels are flex rows (checkbox + span). Without
   `flex-shrink: 0` on the checkbox, the span text wraps weirdly when the
   label is wider than the checkbox. Belt-and-braces. */
.ep-events-register__check input[type="checkbox"] {
    flex: 0 0 auto;
}

/* ── Speaker deep page additions ─────────────────────────── */

.speaker-deep__tagline {
    margin-top: var(--x4);
    font-family: var(--ff-display);
    font-size: 1.15em;
    font-style: italic;
    color: var(--ca);
    max-width: 56ch;
}
.speaker-deep__lede {
    font-size: 1.08em;
    line-height: 1.65;
    margin-bottom: var(--x2);
}
.speaker-deep__quote--mid,
.speaker-deep__quote--foot {
    margin: var(--x1) 0;
    font-size: 1.4em;
    border-left-width: 4px;
}
.speaker-deep__quote--foot {
    margin-bottom: var(--x1);
}
.speaker-deep__heading {
    margin-top: var(--x1);
    margin-bottom: var(--x3);
    font-family: var(--ff-display);
    font-size: 1.4em;
    color: var(--c1);
}
.speaker-deep__heading:first-of-type { margin-top: 0; }
.speaker-deep__text p {
    margin-bottom: var(--x3);
    font-size: 1.02em;
    line-height: 1.6;
}

/* Calendar entries become row-clickable (theme.js wires the click). */
.calendar-entry.row-clickable {
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.calendar-entry.row-clickable:hover {
    background-color: rgba(184, 145, 80, 0.06);
}
.calendar-entry.row-clickable:focus-visible {
    outline: 2px solid var(--ca);
    outline-offset: 4px;
}
.calendar-entry.row-clickable .date-slug,
.calendar-entry.row-clickable .entry-aside {
    cursor: pointer;
}
.calendar-entry.row-clickable h3 a {
    /* Title link keeps its own underline; row click is an enhancement. */
    position: relative;
}

/* ── Accessibility: WCAG AA contrast for brass text ─────────
   --ca (brass #b89150) hits only 2.54:1 on cream — fails AA.
   --ca-deep (#8c6c3a) is 4.24:1 — also fails the 4.5:1 minimum for
   normal text. We introduce --ca-text at #6e5429 (6.19:1, comfortably
   AA AAA for large text and AA for normal). Apply it to all text uses
   of brass while keeping decorative brass (rules, borders, dividers)
   on the original tones.

   Lighthouse audit identified 25 contrast failures across .pop,
   .kicker-number, .intro-label, .meta-item, .speaker-quote authors,
   .event-type-tag, etc. — all brass text on cream. */

:root {
    --ca-text: #6e5429;
}
.wordmark .wordmark-text .pro,
.kicker .kicker-number,
.intro .intro-label,
.event-type-tag,
.event-summary em,
.speaker-deep__tagline,
.speaker-deep__back a,
.speaker-deep__event-role,
.tier-marker,
.pop,
.kicker {
    color: var(--ca-text);
}

/* For brass that sits on the dark navy band (manifesto-bleed), the
   contrast is fine in the other direction — leave --ca-soft alone. */

/* Footer fine print and meta items get nudged to the body colour
   (passes 14.35:1) rather than try to keep them brassy. */
.event-meta-row .meta-item,
.event-meta-row .sep,
.aside-cta a {
    color: var(--c1);
}
.event-meta-row .meta-item { font-weight: 500; }
.aside-cta a {
    text-decoration: underline;
    text-decoration-color: var(--ca);
    text-underline-offset: 3px;
}

/* Calendar entries: .year and .price-from used --ca (#b89150 = 2.54:1)
   which fails AA. Bump to --ca-text. */
.calendar-entry .date-slug .year,
.calendar-entry .entry-aside .price-from {
    color: var(--ca-text);
}

/* ── Homepage hero: editorial photograph fills the right column ──
   Previously the right side of the hero was an empty cream area with
   only a small marginalia note. The new editorial reportage photograph
   anchors the right side and gives the layout the FT-Weekend density it
   was missing. The marginalia sits *on* the image as a typed annotation. */
.section.hero > .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--x1);
    align-items: center;
}
.section.hero .hero-text { grid-column: 1; }
.section.hero .hero-marginalia { grid-column: 2; }
.section.hero .hero-marginalia {
    position: relative;
    background-image: url("/user-content/themes/think-professionally/images/hero-tp-home.webp");
    background-size: cover;
    background-position: center;
    padding: var(--x1) var(--x2);
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--bg1);
    overflow: hidden;
    isolation: isolate;
}
.section.hero .hero-marginalia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,31,58,0.0) 35%, rgba(15,31,58,0.85) 100%);
    z-index: -1;
}
.section.hero .hero-marginalia .mark-annotation {
    width: 56px;
    height: auto;
    color: var(--ca-soft);
    margin-bottom: var(--x4);
}
.section.hero .hero-marginalia .annotation {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.45;
    color: var(--bg1);
    margin: 0 0 var(--x4);
    max-width: 36ch;
}
.section.hero .hero-marginalia .annotation-attrib {
    font-family: var(--ff-body);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ca-soft);
    margin: 0;
}
.section.hero .hero-mark-decor { display: none; }

@media (max-width: 900px) {
    .section.hero > .container {
        grid-template-columns: 1fr;
    }
    .section.hero .hero-marginalia { min-height: 280px; }
}

/* ── Sponsor entries with logos ─────────────────────────────
   Each .sponsor-entry now leads with a logo image, then h3, then the
   descriptive paragraph. Two-column grid: logo left (160px), text right. */
.sponsor-entry {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--x1);
    align-items: start;
    padding: var(--x3) 0;
    border-bottom: 1px solid var(--bd1);
}
.sponsor-entry:last-child { border-bottom: 0; }
.sponsor-logo {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--bg1);
    border: 1px solid var(--bd1);
    padding: 8px;
}
.sponsor-entry h3 {
    margin-top: 0;
    margin-bottom: var(--x4);
}
.sponsor-entry p {
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 720px) {
    .sponsor-entry { grid-template-columns: 1fr; }
    .sponsor-logo { max-width: 160px; }
}

/* ── Event page tutor/chair block ───────────────────────────
   Portrait left, name + role + 60w bio + link-to-full-bio right. The
   whole portrait is clickable through to /speakers/<slug>/. */
.event-tutor-block {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--x1);
    align-items: start;
    margin: 0 0 var(--x2);
}
.event-tutor-portrait {
    display: block;
    border-top: 3px solid var(--ca);
    line-height: 0;
}
.event-tutor-portrait img {
    width: 100%;
    height: auto;
    display: block;
}
.event-tutor-text > p { margin: 0 0 var(--x4); }
.event-tutor-name {
    font-family: var(--ff-display);
    font-size: 1.15em;
}
.event-tutor-role {
    font-style: italic;
    color: var(--tx2);
}
.event-tutor-bio {
    font-size: 0.98em;
    line-height: 1.55;
}
.event-tutor-cta a {
    font-family: var(--ff-display);
    text-decoration: underline;
    text-decoration-color: var(--ca);
    text-underline-offset: 3px;
    color: var(--ca-text);
}
@media (max-width: 640px) {
    .event-tutor-block { grid-template-columns: 120px 1fr; }
}

/* ── Sponsors page — better formatting (v2) ─────────────────
   The original design CSS had 1fr / 2.2fr columns which sat inside the
   narrow 672px page-content wrapper. Now that we widen the wrapper to
   --w-total, give the entry a proper 220px logo + 1fr text grid and
   make the tier headings prominent. */
.sponsors-list > .container { max-width: var(--w-total); }
.sponsors-list .tier-block {
    margin-bottom: var(--x1);
}
.sponsors-list .tier-heading {
    font-family: var(--ff-display);
    font-style: normal;
    font-size: var(--f2);
    line-height: var(--g2);
    color: var(--c1);
    margin: var(--x1) 0 var(--x4) 0;
    padding-bottom: var(--x4);
    border-bottom: 1px solid var(--bd1);
    letter-spacing: -0.01em;
}
.sponsors-list .tier-heading::before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 2px;
    background: var(--ca);
    margin-right: 16px;
    vertical-align: middle;
    transform: translateY(-4px);
}
.sponsors-list .sponsor-entry {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--x1);
    row-gap: var(--x4);
    padding: var(--x2) 0;
    border-bottom: 1px solid var(--bd1);
    align-items: start;
    max-width: 960px;
    margin-inline: auto;
}
.sponsors-list .sponsor-entry .sponsor-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
}
.sponsors-list .sponsor-entry h3 {
    grid-column: 2;
    grid-row: 1;
}
.sponsors-list .sponsor-entry p {
    grid-column: 2;
    grid-row: 2;
}
.sponsors-list .sponsor-entry:last-child { border-bottom: 0; }
.sponsors-list .sponsor-logo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border: 1px solid var(--bd1);
    padding: 14px;
    background: var(--bg1);
}
.sponsors-list .sponsor-entry h3 {
    margin: 0 0 var(--x4) 0;
    font-family: var(--ff-display);
    font-size: 1.6em;
    line-height: 1.2;
    color: var(--c1);
}
.sponsors-list .sponsor-entry p {
    margin: 0;
    font-size: 1.02em;
    line-height: 1.65;
    max-width: 60ch;
}
@media (max-width: 720px) {
    .sponsors-list .sponsor-entry {
        grid-template-columns: 1fr;
    }
    .sponsors-list .sponsor-logo {
        width: 160px;
        height: 160px;
    }
    .sponsors-list .tier-heading::before { width: 32px; }
}

/* ── Manifesto: pull-quote treatment ────────────────────────
   Override the original .manifesto-bleed h2 which had max-width:22ch.
   At wide viewports that left the right half of the deep-navy band
   visually empty and made the quote wrap awkwardly across 4 lines.
   This new treatment: larger font, looser cap, brass colour on the
   second sentence to give the pivot some emphasis. */
.manifesto-bleed h2 {
    max-width: none;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.2;
    margin-block: var(--x2) var(--x2);
    max-width: 24ch;
    text-wrap: balance;
}
.manifesto-bleed > .container > h2 {
    margin-inline: auto;
    text-align: left;
    max-width: 32ch;
}
.manifesto-bleed .position-pivot {
    color: var(--ca-soft);
    display: block;
    margin-top: 0.35em;
}

/* ── /contact/ page — editorial form layout ───────────────── */

.page-content:has(.contact-layout) {
    max-width: 100%;
    width: 100%;
}
.page-content:has(.contact-layout) > .container {
    max-width: var(--w-total);
}
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--x1);
    align-items: start;
}
.contact-form-wrap {
    max-width: 640px;
}
.contact-form-heading {
    font-family: var(--ff-display);
    font-size: 1.6em;
    margin-bottom: var(--x4);
}
.contact-form-lede {
    margin-bottom: var(--x2);
    line-height: 1.6;
    color: var(--tx2);
}
.contact-aside {
    background: var(--bg2);
    border-top: 3px solid var(--ca);
    padding: var(--x2) var(--x1);
    font-size: 0.95em;
    line-height: 1.5;
}
.contact-aside h3 {
    font-family: var(--ff-display);
    font-size: 1.05em;
    margin: var(--x3) 0 var(--x4);
    color: var(--c1);
}
.contact-aside h3:first-of-type { margin-top: 0; }
.contact-aside p { margin: 0 0 var(--x4); }
.contact-aside a {
    color: var(--ca-text);
    text-decoration: underline;
    text-decoration-color: var(--bd1);
    text-underline-offset: 3px;
}
.contact-aside .small {
    font-size: 0.82em;
    color: var(--tx2);
    border-top: 1px solid var(--bd1);
    padding-top: var(--x4);
    margin-top: var(--x3);
}

/* ep-email contact form — bring it onto the editorial palette */
.ep-contact-form {
    display: block;
    border-top: 1px solid var(--bd1);
    padding-top: var(--x3);
}
.ep-contact-form .form-field {
    margin-bottom: var(--x3);
}
.ep-contact-form label {
    display: block;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: 0.94em;
    color: var(--c1);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.ep-contact-form label .required {
    color: var(--ca-text);
    margin-left: 2px;
}
.ep-contact-form input[type="text"],
.ep-contact-form input[type="email"],
.ep-contact-form input[type="tel"],
.ep-contact-form input[type="url"],
.ep-contact-form select,
.ep-contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bd1);
    border-radius: 0;
    background: var(--bg1);
    color: var(--c1);
    font-family: var(--ff-body);
    font-size: 1em;
    line-height: 1.5;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.ep-contact-form input:focus,
.ep-contact-form select:focus,
.ep-contact-form textarea:focus {
    outline: none;
    border-color: var(--ca);
    box-shadow: 0 0 0 3px rgba(184, 145, 80, 0.15);
}
.ep-contact-form textarea {
    resize: vertical;
    min-height: 160px;
}
.ep-contact-form .checkbox-label,
.ep-contact-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.95em;
    color: var(--tx2);
    line-height: 1.5;
}
.ep-contact-form input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin-top: 3px;
}
.ep-contact-form .ep-contact-submit,
.ep-contact-form button[type="submit"] {
    padding: 12px 24px;
    background: var(--c1);
    color: var(--bg1);
    border: none;
    font-family: var(--ff-body);
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s;
}
.ep-contact-form .ep-contact-submit:hover,
.ep-contact-form button[type="submit"]:hover {
    background: var(--ca-text);
}
.ep-contact-form .ep-contact-message,
.ep-contact-form .form-success,
.ep-contact-form .form-error {
    padding: 14px 16px;
    border-left: 3px solid var(--ca);
    background: rgba(184, 145, 80, 0.08);
    margin-bottom: var(--x3);
    line-height: 1.5;
}
.ep-contact-form .form-error { border-left-color: #b3261e; background: rgba(179, 38, 30, 0.06); }
.ep-contact-form .form-success { border-left-color: #2e7d32; background: rgba(46, 125, 50, 0.06); }

@media (max-width: 880px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ── /data-request/ page — DSR form + rights aside ─────────── */
.page-content:has(.dsr-layout) { max-width: 100%; width: 100%; }
.page-content:has(.dsr-layout) > .container { max-width: var(--w-total); }
.dsr-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--x1);
    align-items: start;
}
.dsr-form-wrap { max-width: 640px; }
.dsr-aside {
    background: var(--bg2);
    border-top: 3px solid var(--ca);
    padding: var(--x2) var(--x1);
    font-size: 0.95em;
}
.dsr-aside h3 {
    font-family: var(--ff-display);
    font-size: 1.05em;
    color: var(--c1);
    margin: var(--x2) 0 var(--x4);
}
.dsr-aside h3:first-child { margin-top: 0; }
.dsr-rights { margin: 0 0 var(--x2); }
.dsr-rights dt {
    font-weight: 600;
    color: var(--ca-text);
    margin-top: var(--x4);
    font-size: 0.95em;
}
.dsr-rights dt:first-child { margin-top: 0; }
.dsr-rights dd {
    margin: 4px 0 0 0;
    line-height: 1.5;
}
.dsr-aside p { margin: 0 0 var(--x4); line-height: 1.5; }
.dsr-aside a {
    color: var(--ca-text);
    text-decoration: underline;
    text-decoration-color: var(--bd1);
    text-underline-offset: 3px;
}

/* Style the actual EP_GDPR form to match the editorial brand. */
.ep-gdpr-request-form,
.gdpr-request-form,
form[name="gdpr_dsr"],
form.ep-gdpr-dsr {
    display: block;
    padding: 0;
}
.ep-gdpr-request-form .form-field,
.gdpr-request-form .form-field { margin-bottom: var(--x3); }
.ep-gdpr-request-form label,
.gdpr-request-form label {
    display: block;
    font-weight: 500;
    font-size: 0.94em;
    color: var(--c1);
    margin-bottom: 6px;
}
.ep-gdpr-request-form input[type="text"],
.ep-gdpr-request-form input[type="email"],
.ep-gdpr-request-form select,
.ep-gdpr-request-form textarea,
.gdpr-request-form input[type="text"],
.gdpr-request-form input[type="email"],
.gdpr-request-form select,
.gdpr-request-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bd1);
    background: var(--bg1);
    color: var(--c1);
    font-family: var(--ff-body);
    font-size: 1em;
    line-height: 1.5;
}
.ep-gdpr-request-form button[type="submit"],
.gdpr-request-form button[type="submit"] {
    padding: 12px 24px;
    background: var(--c1);
    color: var(--bg1);
    border: none;
    font-family: var(--ff-body);
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.ep-gdpr-request-form button[type="submit"]:hover,
.gdpr-request-form button[type="submit"]:hover { background: var(--ca-text); }

/* ── /privacy/ page DSR CTA inline ──────────────────────────── */
.privacy-dsr-cta {
    background: var(--bg2);
    border-left: 3px solid var(--ca);
    padding: var(--x2);
    margin: 0 0 var(--x2);
}
.privacy-dsr-cta h3 {
    margin: 0 0 var(--x4);
    font-family: var(--ff-display);
    font-size: 1.2em;
    color: var(--c1);
}
.privacy-dsr-cta p { margin: 0 0 var(--x4); }
.privacy-dsr-cta p:last-child { margin: 0; }
.privacy-dsr-cta .button.action { background: var(--c1); }

@media (max-width: 880px) {
    .dsr-layout { grid-template-columns: 1fr; }
}

/* Privacy DSR CTA button — explicit white-on-navy. The earlier override
   set background:var(--c1) but inherited color was also var(--c1), so
   button text was invisible. Force the contrast. */
.privacy-dsr-cta .button.action,
.privacy-dsr-cta a.button {
    color: var(--bg1);
    background: var(--c1);
}
.privacy-dsr-cta .button.action:hover,
.privacy-dsr-cta a.button:hover {
    background: var(--ca-text);
    color: var(--bg1);
}