/* ============================================================
   She Leads AI — Interior pages (Academy · Events · Society)
   Builds on components.css + homepage.css. Adds the compact
   sub-page hero (family-tinted ink dusty-haze), event list,
   membership tiers, and the "what's included" list. Reuses
   .section / .stats / .slai / .closing / .place / .foot as-is.
   ============================================================ */

/* current page marker in the nav */
.nav__links a[aria-current="page"] { color: var(--cream); }
.nav__links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  background: var(--gold); border-radius: 2px;
}

/* ============================================================
   SUB-PAGE HERO — compact ink dusty-haze, family-tinted glow
   --fam        family accent (gold / coral / cream-on-ink)
   --fam-glow   the radial bloom color
   ============================================================ */
.subhero { position: relative; background: var(--ink); overflow: hidden; }
.subhero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--hero-haze, 0.72);
  background:
    radial-gradient(52% 72% at 78% 48%, var(--fam-glow, rgba(239,91,84,0.42)), transparent 70%),
    radial-gradient(40% 60% at 12% 28%, rgba(242,193,78,0.10), transparent 70%);
}
.subhero__inner {
  position: relative; z-index: 4;
  max-width: 1280px; margin: 0 auto;
  padding: 148px clamp(28px, 5vw, 80px) clamp(60px, 7vw, 100px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  --fg: var(--cream); --line: rgba(247,247,244,0.32);
}
.subhero .kicker {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream);
}
.subhero .gold-rule { width: 56px; height: 3px; background: var(--fam, var(--gold)); border: 0; }
.subhero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 0.98;
  letter-spacing: -0.02em; margin: 0; color: var(--cream);
  max-width: 16ch; text-wrap: balance;
}
.subhero h1 em { font-family: var(--accent-font); font-style: italic; font-weight: 400; color: var(--coral); }
.subhero__lede {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6;
  color: var(--cream); max-width: 46ch; margin: 0;
}
.subhero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* figure variant (The Society reuses the proven coral-cut-on-ink hero) */
.subhero--figure .subhero__inner { min-height: 540px; justify-content: center; max-width: 1340px; }
.subhero--figure .subhero__copy { max-width: 600px; }
.subhero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 1; pointer-events: none; }
.subhero__grain {
  position: absolute; top: -10%; right: -10%; width: 122%; height: auto; z-index: 2;
  mix-blend-mode: screen; opacity: calc(var(--hero-haze, 0.72) * 0.7); pointer-events: none;
}
.subhero__lady {
  position: absolute; bottom: -3%; right: -7%; height: 114%; width: auto; z-index: 1;
  -webkit-mask-image: radial-gradient(120% 118% at 72% 32%, #000 64%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(120% 118% at 72% 32%, #000 64%, rgba(0,0,0,0) 100%);
}
.subhero__scrim {
  position: absolute; top: 0; bottom: 0; left: 0; width: 66%; z-index: 3; pointer-events: none;
  opacity: var(--hero-haze, 0.72);
  background: linear-gradient(90deg, var(--ink) 0%, rgba(26,26,46,0.96) 30%, rgba(26,26,46,0.45) 56%, transparent 80%);
}

/* ============================================================
   SECTION INTRO (reusable on cream sections)
   ============================================================ */
.lede { max-width: 60ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--ink); }
.section__head .lede { margin-top: 18px; }

/* two-column prose + aside */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   "WHAT'S INCLUDED" — checklist on a flat field
   ============================================================ */
.inclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inclist li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid rgba(26,26,46,0.12);
}
.inclist li:first-child { border-top: 1px solid rgba(26,26,46,0.12); }
.inclist .tick {
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.inclist .tick svg { width: 12px; height: 12px; color: var(--accent-ink); }
.inclist b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); display: block; margin-bottom: 3px; letter-spacing: -0.005em; }
.inclist span { font-size: 14px; line-height: 1.55; color: var(--ink); }

/* ============================================================
   EVENT LIST — date · detail · action rows
   ============================================================ */
.evlist { display: flex; flex-direction: column; border-top: 1px solid rgba(26,26,46,0.14); }
.evrow {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 28px; align-items: center;
  padding: 28px 6px; border-bottom: 1px solid rgba(26,26,46,0.14);
  text-decoration: none; color: var(--ink); transition: background .16s ease, padding .16s ease;
}
.evrow:hover { background: rgba(26,26,46,0.04); padding-left: 14px; }
body:not(.no-hover-tint) .evrow:hover { background: var(--accent-soft); }
@media (max-width: 760px) { .evrow { grid-template-columns: 1fr; gap: 10px; } .evrow:hover { padding-left: 6px; } }
.evrow__date { display: flex; flex-direction: column; gap: 2px; }
.evrow__date .d {
  font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 0.9;
  letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.evrow__date .m {
  font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  text-transform: none; color: var(--deep-coral);
}
.evrow__date .recurring {
  font-family: var(--accent-font); font-style: italic; font-weight: 400; font-size: 26px; color: var(--ink); line-height: 1;
}
.evrow__main h3 {
  font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 7px; color: var(--ink);
}
.evrow__main p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: 56ch; }
.evrow__meta { display: flex; gap: 16px; margin-top: 11px; flex-wrap: wrap; }
.evrow__meta span {
  font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--ink); display: inline-flex; align-items: center; gap: 7px;
}
.evrow__meta span .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.evrow__go {
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.evrow__go svg { width: 15px; height: 15px; transition: transform .18s ease; }
.evrow:hover .evrow__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .evrow__go { justify-self: start; } }

/* event filter bar */
.filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.filterbar .menu__trigger { white-space: nowrap; }
.filterbar .count { font-size: 13px; color: var(--ink); margin-left: auto; }

/* ============================================================
   MEMBERSHIP TIERS
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.tier {
  display: flex; flex-direction: column; gap: 0;
  background: var(--white); border: 1px solid rgba(26,26,46,0.14);
  border-top: 3px solid var(--tier-accent, var(--deep-coral));
  border-radius: calc(var(--radius) + 8px); padding: 34px 30px 32px;
}
.tier--feature { background: var(--ink); border-color: transparent; color: var(--cream); position: relative; }
.tier--feature .tier__name { color: var(--gold); }
.tier--feature .tier__price, .tier--feature .tier__price em { color: var(--cream); }
.tier--feature .tier__sub, .tier--feature .tier__feats li { color: var(--cream); }
.tier--feature .tier__feats li::before { background: var(--gold); }
.tier__flag {
  position: absolute; top: 18px; right: 20px; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 5px 10px; border-radius: 999px;
}
.tier__name {
  font-family: var(--display); font-weight: 600; font-size: 13.5px; letter-spacing: 0;
  text-transform: none; color: var(--tier-accent, var(--deep-coral)); margin: 0 0 16px;
}
.tier__price { font-family: var(--display); font-weight: 500; font-size: 46px; line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); }
.tier__price em { font-family: var(--body); font-style: normal; font-weight: 500; font-size: 14px; color: var(--ink); letter-spacing: 0; }
.tier__sub { margin: 12px 0 24px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.tier__feats { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; align-content: start; }
.tier__feats li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tier__feats li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 2px;
  background: var(--tier-accent, var(--deep-coral)); border-radius: 2px;
}
.tier .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ============================================================
   PROGRAM FEATURE ROW (Academy) — alternating media + copy
   ============================================================ */
.prog { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(28px,4vw,48px) 0; }
.prog:nth-child(even) .prog__media { order: 2; }
@media (max-width: 820px) { .prog { grid-template-columns: 1fr; gap: 28px; } .prog:nth-child(even) .prog__media { order: 0; } }
.prog__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) + 10px);
  background: var(--prog-accent, var(--gold)); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end;
}
.prog__media .crop { position: absolute; right: -6%; bottom: -8%; height: 124%; width: auto; }
.prog__media .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.06em;
  color: rgba(26,26,46,0.55); text-align: center; padding: 16px;
}
.prog__tag {
  font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  text-transform: none; color: var(--deep-coral); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.prog__tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--prog-accent, var(--gold)); }
.prog__copy h3 { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 16px; color: var(--ink); }
.prog__copy h3 em { font-family: var(--accent-font); font-style: italic; font-weight: 400; color: var(--coral); }
.prog__copy p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--ink); max-width: 50ch; }
.prog__facts { display: flex; gap: 36px; margin: 0 0 26px; flex-wrap: wrap; }
.prog__facts div { display: flex; flex-direction: column; gap: 3px; }
.prog__facts dt { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.prog__facts dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); white-space: nowrap; }