/* Option C — Hybrid (cream + champagne) */
/* Light register with the slide system's editorial sophistication. */
/* Cormorant Garamond heavy weights for substantial editorial moments, Inter for UI. */

:root {
  --surface: #f5f2ee;
  --surface-soft: #ece8e0;
  --ink: #1a1917;
  --ink-soft: #6b6560;
  --accent: #985E23;
  --accent-deep: #7E4E1D;
  --surface-alt: #1a1917;
  --border: #d8d2c5;
  --border-on-dark: #4a4843;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}
p, li { font-weight: 500; }

/* Headings — heavy serif, no italic by default; italic reserved for very specific moments */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero { background: var(--surface); }
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hero__headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero__subhead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
  opacity: 1;
  letter-spacing: 0;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.5;
}
.hero__cta-note {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: 4px;
}

/* Nav */
.nav { background: rgba(245, 242, 238, 0.94); border-bottom-color: var(--border); }
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  font-size: 1.125rem;
}
.nav__locus {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Primary button — ink filled (warm near-black). Reserved for the hero / final CTA. */
.btn--primary,
a.btn--primary {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.9375rem;
}
.btn--primary:hover,
a.btn--primary:hover {
  background: #2e2c29;
  border-color: #2e2c29;
  color: var(--surface);
}

/* Nav CTA — quiet ghost button in brown ochre. Demoted so the hero CTA wins the eye. */
.nav__cta,
.nav__links .btn--primary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  border-width: 1.5px;
  font-weight: 600;
}
.nav__cta:hover,
.nav__links .btn--primary:hover {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}

/* H2s — heavy serif for structural moments */
.section--problem .h2,
.section--work .h2,
.section--attracts .h2,
.section--first-week .h2,
.section--promise .h2 {
  font-weight: 700;
  color: var(--ink);
}

/* Promise list */
.promise-list { color: var(--ink); font-weight: 600; }
.promise-list li::before { color: var(--accent-deep); }

/* Pillars on warm-dark band — four discrete items, moderate spread */
.section--pillars { background: var(--surface-alt); color: var(--surface); }
.section--pillars .container {
  max-width: 1400px;
}
.pillar { border-top-color: var(--accent); }
.pillar__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}
.pillar__note { color: var(--surface); opacity: 0.85; font-weight: 500; }

/* Work points */
.work-points li { border-top-color: var(--ink); }
.work-points__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.work-points__note { color: var(--ink); opacity: 0.85; font-weight: 500; }

/* Attracts — prose blocks, each sentence on its own line */
.section--attracts .container--text { max-width: 1100px; }
.section--attracts .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  max-width: 28ch;
  margin: 0 0 40px 0;
  letter-spacing: -0.015em;
}

.attracts-prose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attracts-prose p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}
.attracts-prose--anti {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.attracts-prose--anti p {
  font-style: italic;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 1;
  max-width: 56ch;
}

.attracts-close {
  margin-top: 56px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.625rem, 1.6vw + 1rem, 2.25rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 56ch;
  letter-spacing: -0.01em;
}

/* First Week (final CTA) — cream button on warm dark, mirrored CTA logic */
.section--first-week { background: var(--surface-alt); color: var(--surface); }
.section--first-week .container--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.section--first-week .h2 {
  color: var(--surface);
  font-weight: 700;
  margin: 0;
}
.section--first-week .h2 + .lede { margin-top: 32px; }
.section--first-week .lede + .lede { margin-top: 4px; }
.section--first-week .lede {
  color: var(--surface);
  opacity: 0.92;
  font-weight: 500;
  margin: 0;
  max-width: 52ch;
}
.section--first-week .lede + .btn { margin-top: 32px; }
.section--first-week .btn { margin: 0; }
.section--first-week .btn--primary,
.section--first-week a.btn--primary {
  background: var(--surface);
  color: var(--surface-alt);
  border-color: var(--surface);
}
.section--first-week .btn--primary:hover,
.section--first-week a.btn--primary:hover {
  background: #ece8e0;
  border-color: #ece8e0;
  color: var(--surface-alt);
}
.section--first-week .first-week__note { margin-top: 12px; }

/* Footer */
.footer {
  background: var(--surface-soft);
  color: var(--ink);
  border-top-color: var(--border);
}
.footer__signoff {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-deep);
  opacity: 1;
}

/* Coach moment — team shot between "work on yourself" and "attracts" */
.section--coach-moment,
.section--coaching-image {
  padding: 0;
  background: var(--surface);
}

/* Coaching-plank image — keep full width, soft crop to reduce height */
.section--coaching-image .coach-moment img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
}
.coach-moment {
  margin: 0;
  padding: var(--pad-y-mobile) var(--pad-x-mobile);
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .coach-moment { padding: var(--pad-y-tablet) var(--pad-x-tablet); }
}
@media (min-width: 1024px) {
  .coach-moment { padding: var(--pad-y-desktop) var(--pad-x-desktop); }
}
.coach-moment img {
  width: 100%;
  max-width: 760px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Training band — 3-up of training-in-action photos showing different aspects */
.section--training-band {
  padding: var(--pad-y-mobile) 0;
  background: var(--surface);
}
.training-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x-mobile);
}
@media (min-width: 768px) {
  .training-band { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 var(--pad-x-tablet); }
  .section--training-band { padding: var(--pad-y-tablet) 0; }
}
@media (min-width: 1024px) {
  .section--training-band { padding: var(--pad-y-desktop) 0; }
}
@media (min-width: 1024px) {
  .training-band { padding: 0 var(--pad-x-desktop); }
}
.training-band__item { margin: 0; }
.training-band__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* ============================================================
   First Week page (/first-week/)
   ============================================================ */

.section--page-head {
  /* uses .section base padding (48/64/96) */
}
.page-head__h1 {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: var(--line-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 16ch;
  margin: 0;
}
.page-head__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--accent);
  max-width: 32ch;
  margin: 28px 0 0;
}

.section--first-week-intro {
  /* uses .section base padding (48/64/96) */
  border-top: 1px solid var(--border);
}
.section--first-week-intro .lede {
  margin: 0;
  font-weight: 450;
}
.section--first-week-intro .lede + .lede {
  margin-top: 10px;
}

.section--first-week-frame {
  /* uses .section base padding (48/64/96) */
  border-top: 1px solid var(--border);
}
.section--first-week-frame .h2 {
  max-width: 22ch;
  margin: 0 0 24px 0;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.section--first-week-frame .lede {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

.section--first-week-reassurance {
  /* uses .section base padding (48/64/96) */
  border-top: 1px solid var(--border);
}
.first-week-reassurance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.first-week-reassurance-list li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 1.5vw + 0.75rem, 1.875rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 32ch;
}