/* Wholehearted — the mission lane.
   Loads AFTER styles.css and inherits every brand token from :root there:
   --coral, --pink, --ink, --paper, --line, --grad-primary. No token is
   forked or re-declared. This is the same brand as the operator page, in a
   quieter room: more air, the copy given room to breathe, the signature
   gradient reserved for two moments instead of everywhere. */

.wh {
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;

  /* More air than the operator page at every breakpoint. */
  --wh-section: clamp(72px, 11vw, 156px);
  --wh-measure: 60ch;
}

.wh .section { padding-block: var(--wh-section); }
.wh .wrap { max-width: 1000px; }
.wh-measure { max-width: var(--wh-measure); }

/* Headings match the operator page: Space Grotesk, bold, ink. */
.wh h1, .wh h2, .wh h3 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }

.wh .eyebrow { color: var(--coral); margin-bottom: 22px; }

.wh-body {
  font-size: clamp(1.05rem, 1.9vw, 1.18rem);
  color: #2A2A2A;
  margin-bottom: 1.3em;
  max-width: var(--wh-measure);
}
.wh-body:last-of-type { margin-bottom: 0; }
.wh-body--lead { color: var(--ink); font-weight: 500; }

.wh-head { font-size: clamp(1.7rem, 4.2vw, 2.7rem); margin-bottom: 32px; }
.wh-head--centered { margin-bottom: 52px; }

/* Nav is a way back to the operator lane, not a call to action.
   No sticky, no border, no CTA button. */
.wh .nav {
  position: static; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; padding-block: 28px; justify-content: flex-start;
}

/* --- Hero: reader-focused copy, signature gradient as a soft glow --- */
.wh-hero { position: relative; overflow: hidden; padding-top: clamp(32px, 6vw, 72px); }
.wh-hero__glow {
  position: absolute; top: -28%; right: -14%;
  width: min(58vw, 640px); aspect-ratio: 1; border-radius: 50%;
  background: var(--grad-primary);
  filter: blur(72px); opacity: .5;
  z-index: 0; pointer-events: none;
}
.wh-hero .wrap { position: relative; z-index: 1; }
.wh-hero__title { font-size: clamp(2rem, 5.4vw, 3.5rem); max-width: 20ch; }
.wh-hero__sub {
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  color: var(--coral); font-weight: 500;
  margin: 26px 0 36px; max-width: 40ch;
}
.wh-hero .btn { margin-top: 40px; }

/* --- Thesis: Shawn speaks, so this is where his face belongs --- */
.wh-thesis { background: #FAFAFA; border-block: 1px solid var(--line); }
.wh-thesis__grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.wh-portrait {
  border-radius: 20px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -32px rgba(10,10,10,.28);
}
.wh-portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .wh-thesis__grid { grid-template-columns: 1fr; }
  .wh-portrait { max-width: 300px; margin-inline: auto; order: -1; }
}

/* --- Recognition: the emotional weight. Most room on the page. --- */
.wh-recognition { padding-block: clamp(92px, 14vw, 196px); }
.wh-recognition__body {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.85; color: var(--ink);
  max-width: 32ch; margin-bottom: 1.8em;
}

/* --- Cards: crisp white with coral hover, mirroring the home vcard --- */
.wh-doors { background: #FAFAFA; border-block: 1px solid var(--line); }
.wh-doors__grid,
.wh-proof__grid,
.wh-invite__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.wh-door, .wh-episode, .wh-ask {
  display: flex; flex-direction: column;
  padding: 34px 30px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .15s ease, transform .15s ease;
}
.wh-door:hover, .wh-ask:hover { border-color: var(--coral); transform: translateY(-3px); }
.wh-door__name, .wh-ask__name { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; }
.wh-door__body, .wh-ask__body { color: var(--muted); font-size: 1rem; }
.wh-door__go {
  margin-top: 22px; color: var(--coral); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.wh-door__go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Proof --- */
.wh-episode { text-decoration: none; gap: 6px; }
.wh-episode:hover { border-color: var(--coral); transform: translateY(-3px); }
.wh-episode__guest { color: var(--muted); font-size: .95rem; }
.wh-episode__title { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.wh-episode__go { margin-top: 20px; color: var(--coral); font-weight: 600; font-size: .9rem; }
.wh-proof__all { margin-top: 30px; font-size: .98rem; }
.wh-proof__all a { color: var(--muted); text-underline-offset: 4px; }
.wh-proof__all a:hover { color: var(--coral); }

/* --- Invitation --- */
.wh-invite { background: #FAFAFA; border-block: 1px solid var(--line); }
.wh-invite__grid { max-width: 820px; gap: 20px; }
.wh-ask { align-items: flex-start; }
.wh-ask__body { margin-bottom: 26px; }
.wh-ask .btn { margin-top: auto; }

/* --- Quiet close: the full signature gradient, like the home .talk band --- */
.wh-close {
  background: var(--grad-primary); color: var(--ink);
  text-align: center; padding-block: clamp(104px, 16vw, 208px);
}
.wh-close__line {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem); font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em;
  max-width: 20ch; margin-inline: auto;
}

/* --- Footer: dark ink, same as the operator page, mission links only --- */
.wh .footer { background: var(--ink); }

/* --- Focus --- */
.wh :focus-visible, .wh .btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 760px) {
  .wh-hero__glow { opacity: .4; filter: blur(56px); }
  .wh-door, .wh-episode, .wh-ask { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wh * { transition: none !important; }
}