/* ============================================
   Chae Jeong-ho site: shared design system
   ============================================ */

:root {
  /* Neutral base: true charcoal/stone, no purple or blue cast */
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-alt: #edf0ec;
  /* A second, genuinely visible surface tone (not the ~3% step --bg used to
     provide) for alternating section backgrounds. See .section-tint. */
  --surface-tint: #e9ece4;
  --ink: #24302a;
  --ink-soft: #5c665f;
  --ink-faint: #8b948d;
  --border: #dde2dc;
  --border-soft: #e7ebe4;

  /* Type scale: 7 steps. Every font-size in the stylesheet resolves to one
     of these: no one-off values. */
  --text-2xs: 0.8rem;    /* 12.8px: eyebrows, labels, fine print */
  --text-xs: 0.9rem;     /* 14.4px: nav, buttons, secondary/meta text */
  --text-sm: 1.0625rem;  /* 17px:   body copy (matches body{font-size}) */
  --text-md: 1.25rem;    /* 20px:   card/component headings, contact email */
  --text-lg: 1.75rem;    /* 28px:   stat numbers, trait letters, pull quotes */
  --text-xl: 2.25rem;    /* 36px:   upper anchor used inside clamps */
  --text-2xl: 2.75rem;   /* 44px:   largest page titles (h1 ceiling) */

  /* Spacing scale for section-level rhythm (padding, macro gaps). Component-
     internal spacing (button padding, card padding) is tuned separately. */
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* Site accent: deep forest green, replaces the earlier purple accent.
     Used for interactive/navigational elements: links, nav, buttons, icons. */
  --accent: #2f5940;
  --accent-hover: #234330;

  /* Secondary accent: antique gold/brass, for editorial and prestige moments
     (section labels, credentials, stats, the quote mark) rather than
     navigation. --gold is calibrated for small text on light backgrounds;
     --gold-bright is for large decorative use on the dark quote card. */
  --gold: #8a6a28;
  --gold-bright: #d9b45a;

  /* Spectrum module colors, sampled from the official brand artwork */
  --c-acceptance: #ed3538; /* 수용 */
  --c-change: #f58e34;     /* 변화 */
  --c-connect: #f4c022;    /* 연결 */
  --c-strength: #2b9250;   /* 강점 */
  --c-wisdom: #3188c8;     /* 지혜 */
  --c-soma: #374a9b;       /* 몸 */
  --c-spirit: #6c53a0;     /* 영성 */
  --brand-purple: #a43db4; /* SPECTRUM wordmark purple: reserved for the logo itself, not used as a site accent */

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 4px rgba(36, 48, 42, 0.05), 0 10px 26px rgba(36, 48, 42, 0.07);
  --shadow-hover: 0 4px 8px rgba(36, 48, 42, 0.08), 0 16px 36px rgba(36, 48, 42, 0.10);

  --max-width: 1080px;
  --font-body: "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: "Bricolage Grotesque", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* Korean text otherwise breaks mid-word at any character */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.6em;
}

/* Hierarchy is guaranteed by clamp bounds, not by spot-checking viewports:
   h1's floor (32px) exceeds h2's ceiling (28px), so h1 > h2 at every width.
   hero__claim (below) floors even higher, clear of both. */
h1 { font-size: clamp(2rem, 4vw, var(--text-2xl)); }
h2 { font-size: clamp(var(--text-md), 2.4vw, var(--text-lg)); }
h3 { font-size: var(--text-md); }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}


/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand__ko {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}
.brand__en {
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.main-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.main-nav a {
  position: relative;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:hover {
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-alt);
}
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.is-active {
  color: var(--accent);
  font-weight: 700;
}
.main-nav a.is-active::after { transform: scaleX(1); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 8px 24px 16px;
    gap: 2px;
  }
  .main-nav.is-open { display: flex; }
  .site-header { position: relative; }
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.hero--atmosphere::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 90%;
  height: 180%;
  z-index: 0;
  background: var(--accent);
  opacity: 0;
  transform: rotate(-12deg);
  filter: blur(70px);
  animation: heroWash 1.8s ease-out 0.1s forwards;
}
@keyframes heroWash {
  from { opacity: 0; }
  to { opacity: 0.08; }
}

/* Orchestrated hero entrance: each element arrives in sequence, not all at once */
.hero__eyebrow,
.hero__name,
.hero__claim,
.hero__lede,
.hero__actions {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}
.hero__eyebrow { animation-delay: 0.05s; }
.hero__name { animation-delay: 0.15s; }
.hero__claim { animation-delay: 0.25s; }
.hero__lede { animation-delay: 0.4s; }
.hero__actions { animation-delay: 0.5s; }

.hero__portrait {
  opacity: 0;
  animation: scaleIn 0.8s ease 0.2s forwards;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.hero__portrait img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.hero__portrait:hover img {
  transform: scale(1.035);
}
.hero__portrait-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 24px 20px;
  background: linear-gradient(to top, rgba(20, 22, 30, 0.82), rgba(20, 22, 30, 0));
  color: #fff;
}
.hero__portrait-tag strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
}
.hero__portrait-tag span {
  font-size: var(--text-2xs);
  opacity: 0.85;
}
@media (max-width: 760px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__portrait {
    order: -1;
    max-width: 320px;
    margin: 0 auto 8px;
  }
}
.hero__eyebrow {
  color: var(--gold);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* Name sits as a quiet identifier; the claim below it carries the page */
.hero__name {
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.hero__name::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-top: 16px;
}
/* Mobile-appropriate size below 761px (a high floor here would force
   oversized, heavily-wrapped text on phones instead). From 761px up, the
   floor (36px) clears h2's own ceiling (28px) by 8px, so on any page that
   shows both, the hero claim is guaranteed larger at every width from here on. */
.hero__claim {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 5.5vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: pretty;
}
@media (min-width: 761px) {
  .hero__claim { font-size: clamp(2.25rem, 3.4vw, 2.5rem); }
}
.hero__lede {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 560px;
}
.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
/* Tertiary hero action. Deliberately not a third button: it borrows the
   underlined-link treatment from .contact-cta__mail so it reads as a
   different kind of action instead of competing with the two buttons. */
.hero__press {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding-bottom: 5px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  transition: color 0.2s ease;
}
.hero__press svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.hero__press__arrow { transition: transform 0.2s ease; }
.hero__press:hover { color: var(--accent); text-decoration: none; }
.hero__press:hover .hero__press__arrow { transform: translateX(4px); }

/* ---------- Photo hero (homepage): full-bleed portrait with a dark
   scrim standing in for the atmosphere wash, text overlaid on top
   instead of sitting beside a separate portrait card.
   aspect-ratio (rather than a fixed min-height) keeps the crop window
   close to the source photo's own proportions at any viewport width,
   so object-fit:cover doesn't have to cut away most of the image to
   fill an ultra-wide, short box. */
.hero--photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 480px;
  max-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* A flex item's auto width shrinks to fit its content instead of
   filling the line the way a normal block box does, which left
   .container's max-width + margin:auto centering the text in the
   middle of the whole photo instead of lining it up with the header
   logo's left edge. Force it back to block-box sizing behavior. */
.hero--photo > .container {
  width: 100%;
}
.hero__photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo-bg img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 128%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
  transform: translateY(-50%);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo-bg img {
    transform: translateY(-50%) !important;
  }
}
.hero__photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 20, 18, 0.86) 0%, rgba(18, 20, 18, 0.68) 32%, rgba(18, 20, 18, 0.3) 58%, rgba(18, 20, 18, 0.04) 82%);
}
.hero__photo-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.hero__photo-content .hero__eyebrow { color: var(--gold-bright); }
.hero__photo-content .hero__claim {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.hero__photo-content .hero__lede {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.hero__photo-content .btn--primary { background: var(--gold-bright); color: var(--ink); }
.hero__photo-content .btn--primary:hover { background: #fff; }
.hero__photo-content .btn--outline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero__photo-content .btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hero__photo-content .hero__press { color: #fff; border-bottom-color: var(--gold-bright); }
.hero__photo-content .hero__press svg { color: var(--gold-bright); }
.hero__photo-content .hero__press:hover { color: var(--gold-bright); }
@media (max-width: 760px) {
  .hero--photo { aspect-ratio: auto; min-height: 620px; max-height: none; padding: var(--space-2xl) 0; }
  .hero__photo-bg img { object-position: 66% 30%; }
  .hero__photo-bg::after {
    background: linear-gradient(190deg, rgba(18, 20, 18, 0.55) 0%, rgba(18, 20, 18, 0.88) 52%, rgba(18, 20, 18, 0.95) 100%);
  }
}

/* ---------- Stat row ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  padding: var(--space-md) 0 4px;
  border-top: 1px solid var(--border);
  margin-top: var(--space-md);
}
.stat__value {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}
.stat__label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--text-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary {
  background: var(--ink);
  color: #fff;
}
.btn--primary:hover { background: #1c2833; box-shadow: var(--shadow-hover); }
.btn--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn--outline:hover { background: var(--surface-alt); box-shadow: var(--shadow); }

.btn--soon {
  background: var(--surface-alt);
  color: var(--ink-faint);
  border: 1px dashed var(--border);
  cursor: default;
}
.btn--soon:hover { text-decoration: none; background: var(--surface-alt); }
.btn--soon .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  display: inline-block;
}

/* ---------- Sections ---------- */
section { padding: var(--space-xl) 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
/* A second, genuinely visible tone (see --surface-tint) for real section
   rhythm. The old approach alternated white against a page background
   only ~3% darker, which reads as flat no matter how the code alternates. */
.section-tint { background: var(--surface-tint); }
.section-head { max-width: 680px; margin-bottom: var(--space-md); }
.section-head__eyebrow {
  color: var(--gold);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-head p { color: var(--ink-soft); }

/* ---------- Credential list ---------- */
.credential-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
.credential-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
@media (max-width: 820px) {
  /* Drop to one column before the 2-col grid gets narrow enough to force
     long entries into ragged 2-line wraps. */
  .credential-list { grid-template-columns: 1fr; }
}

/* ---------- Credentials (bio): one panel, label rail per group.
   A card-per-group grid stretched short groups to match tall ones, leaving
   large empty blocks; rows sized to their own content avoid that entirely. */
.credential-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0 40px;
}
.credential-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border-soft);
}
.credential-row:last-child { border-bottom: none; }
.credential-row__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
}
.credential-row__label svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.credential-row__label h3 {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}
.credential-row__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 36px;
}
.credential-row__items li {
  position: relative;
  padding-left: 15px;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--ink-soft);
}
.credential-row__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
@media (max-width: 860px) {
  .credential-panel { padding: 0 26px; }
  .credential-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 0;
  }
  .credential-row__items { grid-template-columns: 1fr; }
}

/* ---------- Activity features (home): side-by-side photo + copy cards
   for the three initiatives with a real event photo on hand. ---------- */
.activity-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.activity-feature {
  display: flex;
  align-items: stretch;
  min-height: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.activity-feature:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.activity-feature--reverse { flex-direction: row-reverse; }
.activity-feature__content {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 44px 40px;
}
.activity-feature__logo {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 4px;
}
.activity-feature__content h3 {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  margin: 0;
  color: var(--ink);
}
a.activity-feature:hover h3 { color: var(--accent); }
.activity-feature__content p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}
.activity-feature__cta { margin-top: 6px; border: none; }
.activity-feature__media {
  position: relative;
  flex: 1 1 55%;
  min-height: 260px;
}
/* Absolutely positioned so the image's own aspect ratio (a tall book
   cover vs. a wide event photo) can't drive the flex row's height —
   every card stays the same height regardless of the photo's shape. */
.activity-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tighter framing for photos with more background than subject; scaling
   the image (not the container) keeps the card's own size unchanged. */
.activity-feature__media--crop img { transform: scale(1.12); }
@media (max-width: 800px) {
  .activity-feature,
  .activity-feature--reverse { flex-direction: column; min-height: 0; }
  .activity-feature__media { order: -1; min-height: 220px; }
  .activity-feature__content { padding: 28px 26px; }
}

/* ---------- Media appearances (home) ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .media-grid { grid-template-columns: 1fr; }
}
.media-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.media-card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}
.media-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  overflow: hidden;
}
.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}
.media-card__play {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-card__play svg {
  width: 52px;
  height: 52px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}
a.media-card:hover .media-card__play svg { transform: scale(1.08); }
.media-card__doc {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.media-card__doc svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.media-card__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
}
.media-card__thumb--icon svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
}
.media-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 22px;
}
.media-card__meta {
  font-size: var(--text-2xs);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.media-card__title {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.media-card:hover .media-card__title { color: var(--accent); }

/* ---------- Narrative bio blocks ---------- */
.bio-block { margin-bottom: var(--space-lg); }
.bio-block:last-child { margin-bottom: 0; }
.bio-block h2 { margin-bottom: 14px; }
.bio-block p { color: var(--ink-soft); }

/* Quiet intro prose, one shade darker than the ink-soft narrative below it:
   enough to mark it as the opening without bolding a whole paragraph
   (the actual thesis sentence is already the hero's pull-quote, so
   re-emphasizing it here would just repeat that beat). */
.bio-intro p {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--ink);
}

/* Sentences pulled verbatim from the surrounding paragraph, echoed larger
   to give a 4,000+ character narrative some visual relief at intervals. */
.pull-quote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-sm);
  border-left: 3px solid var(--gold);
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Story chapters (bio narrative, numbered like a life's-work
   timeline instead of a flat stack of identical headings) ---------- */
.story-chapter {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  margin-bottom: var(--space-xl);
}
.story-chapter:last-child { margin-bottom: 0; }
.story-chapter__num {
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  opacity: 0.7;
}
.story-chapter__content h2 { margin-bottom: 14px; }
.story-chapter__content p { color: var(--ink-soft); margin-bottom: 14px; }
.story-chapter__content p:last-child { margin-bottom: 0; }
.story-chapter .pull-quote { margin: var(--space-md) 0; }
@media (max-width: 640px) {
  .story-chapter {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .story-chapter__num { font-size: 1.5rem; }
}

/* ---------- Book grid (bibliography, with a placeholder cover slot for
   artwork to be added later) ---------- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
@media (max-width: 900px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); }
}
.book-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.book-card__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--surface-alt), var(--surface-tint));
  border-bottom: 1px solid var(--border);
  color: var(--ink-faint);
  overflow: hidden;
}
.book-card__cover svg { width: 28px; height: 28px; }
.book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.book-card__body { padding: 14px 16px 16px; }
.book-card__body h3 {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.4;
}
.book-card__body p {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.book-note {
  margin-top: var(--space-sm);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

/* ---------- Book carousel (homepage) ---------- */
.book-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
}
.book-carousel__viewport { flex: 1; overflow: hidden; }
.book-carousel__track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.book-carousel__track::-webkit-scrollbar { display: none; }
.book-carousel__item {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
}
/* A shadow cast to one side (as if leaning on a shelf) gives a flat
   cover image some physical weight without needing 3D artwork. */
.book-cover-card {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow:
    3px 4px 10px rgba(20, 22, 30, 0.16),
    7px 8px 18px rgba(20, 22, 30, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.book-cover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.book-cover-card:hover,
.book-cover-card:focus-visible {
  box-shadow:
    5px 8px 16px rgba(20, 22, 30, 0.22),
    11px 14px 26px rgba(20, 22, 30, 0.14);
  transform: translateY(-3px);
}
.book-cover-card:hover img,
.book-cover-card:focus-visible img {
  transform: scale(1.07);
}
.book-cover-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px;
  background: linear-gradient(to top, rgba(20, 22, 30, 0.94) 0%, rgba(20, 22, 30, 0.6) 48%, rgba(20, 22, 30, 0) 78%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.book-cover-card:hover .book-cover-card__overlay,
.book-cover-card:focus-visible .book-cover-card__overlay {
  opacity: 1;
  transform: translateY(0);
}
.book-cover-card__title {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 6px;
}
.book-cover-card__desc {
  font-size: 0.7rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.book-carousel__nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.book-carousel__nav svg { width: 18px; height: 18px; }
.book-carousel__nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: scale(1.06);
}
.book-carousel__nav:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  transform: none;
}
@media (max-width: 640px) {
  .book-carousel__nav { display: none; }
  .book-carousel__item { width: 148px; }
}

/* ---------- Book hero (a single title's page: cover beside the copy) ---------- */
.book-hero__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.book-hero__cover {
  justify-self: center;
  max-width: 290px;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(20, 22, 30, 0.24);
  opacity: 0;
  animation: scaleIn 0.8s ease 0.2s forwards;
}
.book-hero__cover img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .book-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .book-hero__cover {
    order: -1;
    max-width: 210px;
  }
}

/* ---------- Module cards (SPECTRUM) ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.module-card {
  --module-color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--module-color);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--module-color);
  border-top-color: var(--module-color);
}
.module-card--acceptance { --module-color: var(--c-acceptance); }
.module-card--change     { --module-color: var(--c-change); }
.module-card--connect    { --module-color: var(--c-connect); }
.module-card--strength   { --module-color: var(--c-strength); }
.module-card--wisdom     { --module-color: var(--c-wisdom); }
.module-card--soma       { --module-color: var(--c-soma); }
.module-card--spirit     { --module-color: var(--c-spirit); }
.module-card__ko {
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--ink);
}
.module-card__en {
  font-size: var(--text-2xs);
  color: var(--module-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  font-weight: 700;
}
.module-card p {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Trait list (S.P.E.C.T.R.U.M.) ---------- */
.trait-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.trait-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.trait-item__letter {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gold);
}
.trait-item__body h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 4px;
}
.trait-item__body p {
  color: var(--ink-soft);
  font-size: var(--text-xs);
  margin: 0;
}

/* ---------- Quote block: the site's one deliberate color moment ---------- */
.quote-block {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius);
  padding: var(--space-lg) 44px;
  margin: var(--space-lg) 0;
}
.quote-block::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 24px;
  font-family: var(--font-head);
  font-size: 7rem;
  font-weight: 700;
  color: var(--gold-bright);
  opacity: 0.5;
  line-height: 1;
  pointer-events: none;
}
.quote-block p {
  position: relative;
  font-family: var(--font-head);
  font-size: clamp(var(--text-md), 2.2vw, var(--text-lg));
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  max-width: 780px;
  text-wrap: pretty;
}
.quote-block cite {
  position: relative;
  display: block;
  margin-top: 22px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 640px) {
  .quote-block { padding: 40px 26px; }
  .quote-block::before { font-size: 6rem; left: 16px; }
}

/* ---------- Waitlist banner (home): opening-notification lead capture ---------- */
.waitlist-banner {
  background: var(--accent);
  padding: var(--space-lg) 0;
}
.waitlist-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.waitlist-banner__copy { max-width: 480px; }
.waitlist-banner__copy .section-head__eyebrow { color: var(--gold-bright); margin-bottom: 8px; }
.waitlist-banner__copy h2 { color: #fff; margin: 0 0 8px; }
.waitlist-banner__copy p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.waitlist-form { flex: 1 1 420px; max-width: 560px; }
.waitlist-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.waitlist-form__row input {
  flex: 1 1 140px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.waitlist-form__row input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}
.waitlist-form__row .btn {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--gold-bright);
  color: var(--ink);
}
.waitlist-form__row .btn:hover { background: #fff; }
.waitlist-form .contact-form__status { color: rgba(255, 255, 255, 0.9); }
.waitlist-form .contact-form__status[data-state="ok"] { color: var(--gold-bright); }
.waitlist-form .contact-form__status[data-state="error"] { color: #ffb4b0; }
@media (max-width: 700px) {
  .waitlist-banner__inner { flex-direction: column; align-items: stretch; }
  .waitlist-form { max-width: none; }
  .waitlist-form__row { flex-direction: column; }
  .waitlist-form__row input,
  .waitlist-form__row .btn { flex: none; width: 100%; }
}

/* ---------- Contact ---------- */
.contact-cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  /* The site header is position: sticky, so jumping to #contact would
     otherwise land the section flush with the viewport top and let the
     header cover its heading. This reserves space for the header. */
  scroll-margin-top: 110px;
}
/* Modifier for pages where the section immediately before it is white:
   keeps the alternating rhythm going into the footer instead of stacking
   two same-toned sections back to back. */
.contact-cta--tint {
  background: var(--surface-tint);
}
.contact-cta__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
/* Only the homepage carries the full inquiry form; every other page keeps
   the plain mailto CTA above, so this grid is scoped to that one section. */
.contact-cta__inner--form {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}
@media (max-width: 800px) {
  .contact-cta__inner--form { grid-template-columns: 1fr; gap: 32px; }
}
.contact-cta__intro { align-self: start; }
.contact-cta h2 { margin: 0 0 10px; }
.contact-cta p {
  color: var(--ink-soft);
  margin: 0;
  max-width: 420px;
}
.contact-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  margin-top: 22px;
}
.contact-cta__mail:hover { color: var(--accent); text-decoration: none; }

/* ---------- Contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .contact-form__row { grid-template-columns: 1fr; }
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__field label {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-soft);
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__field textarea { resize: vertical; min-height: 96px; }
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 89, 64, 0.12);
}
.contact-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.contact-form .btn { align-self: flex-start; border: none; cursor: pointer; }
.contact-form__status {
  font-size: var(--text-xs);
  margin: 0;
  min-height: 1.2em;
}
.contact-form__status[data-state="ok"] { color: var(--accent); font-weight: 700; }
.contact-form__status[data-state="error"] { color: var(--c-acceptance); font-weight: 700; }

/* ---------- Practice / feature list ---------- */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.feature-list li {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

/* ---------- Teaser page (BAMAUM / Optimist School / Optimist Club) ----------
   Centering is reserved for the short opening tagline; the longer body
   paragraph reads left-aligned in the same centered column, and a short
   rule marks the transition between the two instead of five stacked,
   identically-centered blocks. */
.teaser-hero {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}
.teaser-hero__tagline {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.5;
}
.teaser-hero__rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 26px;
}
.teaser-hero__body {
  max-width: 560px;
  margin: 0 auto 30px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-align: left;
}
.teaser-hero .btn { margin-top: 4px; }
.teaser-note {
  margin-top: 18px;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

/* ---------- Logo image block ---------- */
.brand-mark {
  max-width: 340px;
  margin: 0 auto 24px;
}

.diagram-figure {
  max-width: 460px;
  margin: 8px auto 0;
  text-align: center;
}
.diagram-figure figcaption {
  margin-top: 12px;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #d8d5cd;
  padding: var(--space-lg) 0 var(--space-md);
  margin-top: var(--space-md);
}
.site-footer a { color: #f1efe9; }
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-xs);
}
.footer-links a { color: #d8d5cd; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: var(--text-2xs);
  color: #a29e93;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 48px 0;
}