@charset "UTF-8";
/* ==================================================================
   OLLIN program page styles — warm-black + gold palette (Quest sample), with
   Helvetica Neue 700 section headers (DESIGN-SYSTEM.md "Type"), bebas-kai for
   row/list display type, Inter body, JetBrains Mono labels, and gold emphasis.
   The enroll box clones the homepage .ollin-trio .tile.lead membership card.
   Scoped under .ev-wrap so it never touches the rest of the Squarespace site.
   Used by header.html and content.html (two separate code blocks).
   Fonts are LINKED (Google Fonts) in header.html — no @font-face here.
   ================================================================== */
.ev-wrap {
  /* --- Reference tokens (from :root of the netlify sample) --- */
  --bg:#0a0907; /* warm near-black page */
  --bg-deep:#050403; /* deeper panels / bars */
  --bg-card:#11100d; /* cards */
  --bg-card-hover:#1a1813;
  --text:#ece6dc; /* warm off-white body/heading */
  /* Neutral muted body at .75 — was .55 (5.46:1), now 9.52:1 on --bg. The
     alpha is of the LIGHT grey, not black: this wrap sits on #0a0907, so a
     black-based muted token would render invisible. */
  --text-muted:rgba(236,236,236,.75);
  --text-dim:#e1cb43; /* dim labels → gold (all dim elements yellow) */
  --accent:#e1cb43; /* gold */
  --accent-hover:#ecd860;
  --accent-dim:rgba(225,203,67,0.12);
  --border:#1f1d18;
  --border-strong:#2a2720;
  /* Homepage-tile palette — also used by .ev-btn (so the Join button has a gold
     fill anywhere in program content, not just inside the enroll box). */
  --gold:#ddcc5c;
  --chalk:#e8e0d0;
  --dim:#8a8278;
  --hair:#2a2824;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif; /* accent serif */
  --sans:"Inter",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif; /* body */
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; /* labels */
  /* Condensed display face. Still used for ROW/LIST display type — session
     names, program row labels, prices — where the narrow face does real work
     fitting long titles into a fixed row. */
  --head:bebas-kai,"Inter",-apple-system,system-ui,sans-serif;
  /* Section headers (h1/h2/h3). DESIGN-SYSTEM.md "Type": Helvetica Neue,
     weight 700, normal case — matching `#hm-page h2,#hm-page h3` on the
     homepage. These pages were still on the condensed face at weight 400,
     which is why program headings didn't match the rest of the site. */
  --head-sect:'Helvetica Neue',Helvetica,Arial,sans-serif;
  /* Back-compat aliases: older markup / rules referenced these names. */
  --ink:var(--text);
  --paper:transparent;
  --muted:var(--text-muted);
  --line:var(--border);
  --line-strong:var(--border-strong);
  --label:var(--mono);
  color: var(--text);
  background: transparent; /* sits on whatever dark section it's placed in */
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ev-wrap *, .ev-wrap *::before, .ev-wrap *::after {
  box-sizing: border-box;
}

.ev-wrap a {
  color: inherit;
  text-decoration: none;
}

/* No text fade-in: the reveal system (preFade/fadeIn/preScale/scaleIn, driven by
   inline transition-delay) is neutralised inside program blocks — content shows
   immediately, no opacity/scale animation. Overrides the inline styles. */
.ev-wrap .preFade, .ev-wrap .fadeIn,
.ev-wrap .preScale, .ev-wrap .scaleIn {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Squarespace sets an explicit heading color on h1–h3 that beats inheritance;
   force our headings back to the warm off-white so they stay visible. */
/* Base heading rule. Squarespace sets its own family/weight/colour on h1-h3
   that beats inheritance, so any heading WE do not explicitly dress falls back
   to the theme face (bebas-kai 400) — which is how .ev-author h2 came to be set
   in a different face and weight from every heading around it.
   DESIGN-SYSTEM.md "Type" puts h1/h2/h3 on Helvetica Neue 700 with no
   exception, so that is stated once here as the floor. Individual rules below
   still set their own size/tracking; they simply no longer have to remember to
   restate the face and weight for the page to be correct. */
.ev-wrap h1, .ev-wrap h2, .ev-wrap h3 {
  color: var(--text);
  font-family: var(--head-sect);
  font-weight: 700;
}

/* Gold emphasis inside headings — the reference's signature accent.
   Kept colour-only (not slanted) so headings read the same as they did on the
   condensed face. font-weight is NOT pinned to 400 any more: the headings are
   Helvetica 700 now, and forcing 400 here would drop the <em> out of the
   heading's own weight mid-sentence. */
.ev-wrap h1 em, .ev-wrap h2 em, .ev-wrap h3 em {
  font-style: normal;
  color: var(--accent);
}

/* ---- Layout shell (two blocks share the same max-width column) ----
   Anchored under .ev-wrap so the generic is-* modifiers stay contained. */
.ev-wrap .ev-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}

/* Header + content are each inserted as their own FE block — no shell padding;
   position each with the block itself. Header spans full width (no max-width
   inset / centering margin), so it has no side gap either. */
.ev-wrap .ev-shell.is-header {
  padding: 0;
  max-width: none;
  margin: 0;
}

.ev-wrap .ev-shell.is-content {
  padding: 0;
}

/* Sidebar removed: content is a single full-width column. */
.ev-wrap .ev-shell.is-content > main {
  max-width: none;
}

/* ---- Kicker / section label (gold tracked-caps with rule) ----
   Scoped to .ev-wrap so it beats .ev-block p{font-size:19px} (the author
   kicker sits inside a .ev-block and would otherwise inherit 19px). */
.ev-wrap .ev-kicker {
  /* Mono, 11px / 13px from 761px up — DESIGN-SYSTEM.md § Kicker. It is a
     label, and labels are mono everywhere else in the system. */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

@media (min-width: 761px) {
  .ev-wrap .ev-kicker {
    font-size: 13px;
  }
}
/* Leading rule. Hidden below 761px: on a phone the 24px dash plus its 14px gap
   eats ~38px of a ~330px line, which is what pushed longer kickers onto a
   second line. The rule is decoration, not meaning, so it is the part that
   goes — the tracked gold caps still read as a label without it. The breakpoint
   matches the font-size step above, so the dash and the 13px size arrive
   together. */
@media (min-width: 761px) {
  .ev-wrap .ev-kicker::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    flex: none;
  }
}
/* ---- Hero ---- */
.ev-hero {
  padding-bottom: 0;
}

.ev-hero h1 {
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 0.95;
  font-size: clamp(44px, 8vw, 104px);
  text-wrap: balance;
  margin: 0 0 32px;
}

.ev-hero .ev-lede {
  font-size: clamp(17px, 1.6vw, 21px);
  max-width: 560px;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.7;
  text-wrap: pretty;
  margin: 0 0 8px;
}

.ev-hero .ev-lede strong {
  font-weight: 500;
  color: var(--text);
}

/* Hero footer: Join button, then a row of feature cells. */
.ev-hero-foot {
  margin-top: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 40px;
}

.ev-hero-foot .ev-btn {
  flex: 0 0 auto;
}

/* Feature row — each item is a small gold dot + label cell. Cells sit in a
   single row (no dividers). Pure CSS, no markup change. */
.ev-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 32px;
}

.ev-meta span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.35;
}

/* Small gold dot marker to the left of each label. */
.ev-meta span::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.ev-meta span:hover::before {
  transform: scale(1.4);
}

.ev-meta strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 600px) {
  /* Allow wrapping on narrow screens so labels don't overflow. Hero cells are
     single short phrases, so two-up still reads fine. */
  .ev-meta {
    flex-wrap: wrap;
    gap: 20px 28px;
  }
  .ev-meta span {
    flex: 1 1 40%;
  }
  /* The author row is the one cell that's a LABEL + a long <strong> value
     ("Coach behind" / "Man of Steel · 300 · Justice League"). At 40% wide both
     halves wrap mid-phrase and the dot centers against the two-line block. Give
     it a full-width row and stack the value under its label instead. */
  .ev-author .ev-meta span {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr; /* dot | text */
    align-items: baseline;
    column-gap: 8px;
  }
  /* Dot stays on the label's first line rather than centering across the stack. */
  .ev-author .ev-meta span::before {
    grid-row: 1;
    align-self: center;
    position: relative;
    top: -1px;
  }
  .ev-author .ev-meta strong {
    grid-column: 2;
  } /* value drops to its own row */
}
/* ===================================================================
   MISSION HEADER (hero) — extracted from the per-page inline <style>
   ===================================================================
   Every programs-pages/<program>/header-v2.html used to carry this whole
   block inline. The seven non-Quest headers held a byte-identical copy
   (verified by hash) and Quest held a reworked superset, so the same rules
   existed in eight places and drifted independently. Two bugs came straight
   out of that: the kicker dash had to be fixed twice because the inline copy
   SHADOWED the linked stylesheet, and --text-muted sat at a stale .61 inline
   while the sheet had moved to .75.

   Now it lives here, compiled into program/program.css, and the headers link
   it like every other component.

   TWO HERO VARIANTS ARE SUPPORTED, deliberately:
     .is-focus              Quest's reworked stat block (a cell inside the dl)
     .ev-hero-stats-focus   the older separate focus line, still used by the
                            other seven pages
   Both are kept because the seven have NOT been ported to the new markup yet.
   When they are, the legacy section at the bottom of this file can go.

   WHAT STAYS INLINE IN THE HEADER: the :root/.ev-wrap font-token block. A
   Squarespace code block cannot see another block's <style>, and those tokens
   must resolve before this sheet loads or the first paint is unstyled. */
/* The font-token block that used to sit here (the .ev-wrap --sans/--serif
   remap) is NOT in this file. It stays inline in each header-v2.html: a
   Squarespace code block cannot see another block's <style>, and those tokens
   must resolve before this sheet arrives or the hero's first paint is unstyled.
   It is also the one part that genuinely differs per page family. */
/* ===== Program hero V2 =============================================
   Full-bleed background image + two columns: reading column left,
   quote (top) + stats (bottom) right. */
/* ---- Layout only — NO background ----
   This block inserts markup and type/layout rules and nothing else. The photo,
   the darkening overlay and the section height all come from the Squarespace
   section that WRAPS this code block (Edit Section > Background), which is why
   there is no ::before image, no scrim gradients, no full-bleed break-out and
   no min-height here. Set the overlay opacity in the editor (~0.7 on the live
   page) — that is what keeps the copy legible over the image now. */
.ev-wrap .ev-hero--v2 {
  position: relative;
  padding: 0;
  /* Four equal columns: content spans 3, quote + stats share the 4th. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 48px;
  /* Hero content sits at the BOTTOM of the section. */
  align-items: end;
}

.ev-wrap .ev-hero--v2 > .ev-hero-main {
  grid-column: 1/span 2;
  grid-row: 1;
}

/* Quote and stats share the LAST column: quote pinned to the top of the hero,
   stats to the bottom, so the two are left-aligned with each other and the
   quote lands in the top-right corner. */
.ev-wrap .ev-hero--v2 > .ev-hero-quote {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
}

.ev-wrap .ev-hero--v2 > .ev-hero-stats {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
}

.ev-wrap .ev-hero--v2 .ev-hero-main {
  min-width: 0;
}

/* The hero lede is capped at 560px globally; inside the narrower V2 reading
   column that cap never binds, so let it use the column instead. */
.ev-wrap .ev-hero--v2 .ev-lede {
  max-width: none;
}

/* Over an image the muted grey goes murky — lift the lede to --chalk, the
   design-system body-text token. 24px cap: the lede carries real weight next
   to the display h1 rather than sitting back as fine print. Clamped so it
   still shrinks on narrow viewports. */
.ev-wrap .ev-hero--v2 .ev-lede {
  color: var(--chalk);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  font-weight: 300;
  text-wrap: pretty;
}

/* The reading column is widened for the title alone; everything else in the
   column keeps its own measure so the lede stays readable. */
.ev-wrap .ev-hero--v2 > .ev-hero-main {
  grid-column: 1/span 3;
}

.ev-wrap .ev-hero--v2 .ev-hero-main > :not(h1) {
  max-width: 560px;
}

.ev-wrap .ev-hero--v2 .ev-hero-main > .ev-lede {
  max-width: 600px;
}

/* ---- Pull-quote (column 4, top) ----
   Mark and quote are both --sans (Helvetica): the sans double-quote is a solid
   geometric pair of wedges, which reads as a bold icon rather than as
   typography. */
/* No top padding: the quote sits at the top of its grid cell. (It used to be
   nudged down 36px to line its first baseline up with the kicker opposite;
   that alignment no longer holds now the kicker carries its full 16px margin,
   and the nudge just pushed the quote out of line with the column head.) */
.ev-wrap .ev-hero-quote {
  margin: 0;
  min-width: 0;
}

.ev-wrap .ev-hero-quote p {
  margin: 0;
  min-width: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

/* The mark leads the first line inline, then hangs in the left margin so the
   quote's own lines stay flush with each other (a flex row would indent every
   line after the first, which reads as a bullet rather than a quote mark). */
.ev-wrap .ev-hero-quote p::before {
  content: "“";
  /* The glyph's own line box sits high; 4px drops it so the mark optically
     aligns with the first line of the quote rather than floating above it. */
  position: relative;
  top: 4px;
  float: left;
  margin-left: -0.62em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 2.1em;
  line-height: 0.75;
  color: var(--gold);
}

/* V2 keeps the Join button but drops the old inline .ev-meta row — those four
   facts are the stat block now. Join sits beside a quiet "explore" link, so
   the two actions read as primary + secondary rather than a pair. */
.ev-wrap .ev-hero--v2 .ev-hero-foot {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* Button base + tertiary tier (DESIGN-SYSTEM.md "Buttons"). Declared here
   because this header is its own Squarespace code block, and because the
   DEPLOYED styles.css (?ver=11) predates the tertiary tier — once that sheet
   ships these are redundant but harmless (same values). */
.ev-wrap .hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: 15px 22px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ev-wrap .hm-btn--tertiary {
  background: transparent;
  color: var(--chalk);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.ev-wrap .hm-btn--tertiary:hover {
  background: transparent;
  border-color: transparent;
  color: var(--gold);
}

/* ---- Explore program (scrolls to the next section) ----
   The design system's tertiary tier: no border, no fill, so it doesn't compete
   with the filled Join beside it. Only the focus ring is restated, because the
   shared sheet scopes it to a.ev-btn/.hm-btn and this is a <button> in a block
   that may be pasted without that sheet. */
.ev-wrap .ev-hero-explore:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Shared arrow icon (DESIGN-SYSTEM.md § Arrow icon). The shared sheet ships
   .hm-btn__arw but not .hm-arw, so declare it in this scope rather than typing
   a literal → into the markup.
   --ev-arrow is declared here too: the DEPLOYED styles.css (?ver=11) predates
   that variable, so inheriting it would paint the mask as a solid square. */
.ev-wrap {
  --ev-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.ev-wrap .hm-arw {
  flex: none;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: var(--ev-arrow) center/contain no-repeat;
  mask: var(--ev-arrow) center/contain no-repeat;
  transition: transform 0.2s;
}

/* The explore button scrolls DOWN the page, so its arrow points down: the
   shared glyph rotated a quarter turn. Held at rotate(90deg) in every state —
   including hover. The base .hm-arw hover nudge is a translateX, and
   `transform` REPLACES rather than composes: applied to a rotated arrow it
   drops the rotation, so the down-arrow snaps back to horizontal and slides
   sideways. The hover is therefore pinned to the resting value. */
.ev-wrap .hm-arw--down,
.ev-wrap.ev-wrap .hm-btn:hover .hm-arw--down,
.ev-wrap.ev-wrap .ev-hero-explore:hover .hm-arw--down {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ev-wrap .hm-arw {
    transition: none;
  }
}
/* ---- Kicker — rebuilt to the design system spec (DESIGN-SYSTEM.md "Kicker /
        callout"). The deployed styles.css (?ver=11) still ships the OUTDATED
        form of this component: var(--sans) at a flat 14px, which that document
        names explicitly as the old version. It is a label, and labels are mono
        throughout the system, so the whole component is restated here rather
        than patching the font alone.

        Spec: mono, 11px / 13px from 761px, .32em tracking, accent, weight 500,
        inline-flex with a 24px accent rule before it. flex:none on that rule is
        part of the component: without it the rule is a flex item that can be
        squashed below its 24px when the label wraps. */
.ev-wrap .ev-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

@media (min-width: 761px) {
  .ev-wrap .ev-kicker {
    font-size: 13px;
  }
  /* Leading rule — desktop only. On a phone the 24px dash plus its 14px gap
     eats ~38px of a ~330px line, which is what pushed longer kickers
     ("Mission · Growing Lean Tissue") onto a second line. The rule is
     decoration, not meaning, so it is the part that goes; the tracked gold
     caps still read as a label without it. Same breakpoint as the font-size
     step above, so the dash and the 13px size arrive together.
     Mirrors assets/css/program/_kicker.scss — this inline copy exists because
     each Squarespace code block cannot see the others' <style>, and it would
     otherwise SHADOW the linked stylesheet's media-scoped rule. */
  .ev-wrap .ev-kicker::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    flex: none;
  }
}
/* 16px — the same gap the .ev-kicker component uses everywhere else. The hero
   previously tightened this to 4px to read as one unit with the h1; at the
   display sizes the h1 now uses, that was too tight. */
.ev-wrap .ev-hero--mission .ev-kicker {
  margin-bottom: 16px;
}

/* The hero title matches the Space Program hero and the live home embed block:
   Helvetica, weight 700, sentence case, line-height .95 and the display scale.
   The shared sheet's .ev-hero h1 now sets exactly this via --head-sect, so the
   restatement here is belt-and-braces rather than a correction — it keeps the
   hero right even if this block is pasted on a page whose styles.css is an
   older upload.

   text-wrap:balance replaces the old white-space:nowrap + min(104px,5vw)
   sizing. That pair existed to force the longest name ("The Quest for the
   Hyper Trophy") onto ONE line, which is what pushed the grid track wider than
   the page and produced a horizontal scrollbar. Letting a long name wrap onto
   two balanced lines removes the constraint that caused the bug, and keeps
   every mission on the same type scale as the Space Program. */
.ev-wrap .ev-hero--mission h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: clamp(44px, 8vw, 80px);
  line-height: 0.95;
  text-wrap: balance;
  white-space: normal;
  max-width: 100%;
}

/* ---- Stat block (column 4, bottom) ----
   The four "Mission Highlights" prose lines as number + label pairs, on the
   Space Program hero's stat component. The themes line ("Aerobic · Pacing ·
   Recovery") does not fit that shape, so it is kept as the block's focus
   label under the numbers. */
.ev-wrap .ev-hero-stats {
  font-family: var(--sans);
  min-width: 0;
}

.ev-wrap .ev-hero-stats-t {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.ev-wrap .ev-hero-stats dl {
  margin: 0;
  display: grid;
  gap: 12px;
}

/* Tight number+label pairs: the gap does the separating, so the numerals
   no longer reserve a fixed column that pushes every label far right. */
.ev-wrap .ev-hero-stats div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

/* Numerals follow the heading rule (Helvetica, bold) rather than Bebas, and
   sit closer to label size so the pair reads as one unit. */
.ev-wrap .ev-hero-stats dt {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
  flex: 0 0 auto;
}

/* Labels sit over the brighter part of the photo, where --text-muted washes
   out — hold them at a higher-contrast tone. Sentence case, and no tracking:
   letterspacing that opens up all-caps only looks gappy on lowercase. */
.ev-wrap .ev-hero-stats dd {
  margin: 0;
  font-size: 16px;
  color: rgba(236, 230, 220, 0.82);
  font-weight: 500;
  line-height: 1.25;
}

/* Focus pair — the themes that did not reduce to a number, now the last row of
   the list itself. It keeps the dt/dd shape so it lines up with the pairs
   above, but the words are long, so the dt drops to the label's size instead of
   the 19px numerals and the pair is allowed to wrap. */
/* The focus pair STACKS — the two words are too long to sit side by side at
   the numeral size, and stacked they read as the same kind of statement as the
   numbers above rather than as a caption. */
/* `display:contents` promotes the two lines to rows of the <dl> grid itself, so
   they inherit its 12px row-gap instead of a nested gap of their own — every
   item in the block then sits the same distance apart. A flex-column here would
   space its own children independently and leave the focus pair tighter than
   every other row.
   DESKTOP ONLY: below 900px the <dl> becomes a 4-up/2-up grid of CELLS, where
   this div must stay one cell — see the media queries at the bottom, which
   restore it to a flex column. */
@media (min-width: 901px) {
  .ev-wrap .ev-hero-stats div.is-focus {
    display: contents;
  }
}
/* Both lines carry the numeral treatment: same face, weight, size and colour as
   the 12 / 43 / 3 above, so the block reads as one list. Each word stands as its
   own line with no separator — the stack itself does the joining that a middot
   used to. line-height is a touch looser than the numerals' 1 because these are
   words, not figures, and 1.0 crowds the descenders between the two lines. */
.ev-wrap .ev-hero-stats div.is-focus dt,
.ev-wrap .ev-hero-stats div.is-focus dd {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
}

/* Membership note — a commercial term, not a highlight. Sentence case, and set
   in the SAME face/size/colour as the list's labels (the dd and the focus dd
   above it) so the block reads as one voice rather than a stats list with a
   differently-typed footnote. Hairline above separates it from the pairs
   without drawing a full rule. */
.ev-wrap .ev-hero-stats-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(236, 230, 220, 0.18);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(236, 230, 220, 0.82);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Gold tick. Sized to the cap height of the 13px label beside it, and
   flex:0 0 auto so a wrapped label never squashes it.
   align-self:flex-start + the line-box offset rather than the parent's
   align-items:center — the note carries 12px of top padding for its hairline,
   so centring against that box drops the tick ~6px below the text it labels. */
.ev-wrap .ev-hero-stats-note .ev-check {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  align-self: flex-start;
  margin-top: 2px;
  fill: var(--gold);
  display: block;
}

/* ---- Desktop dead gap ----
   .ev-hero-main spans 3 of 4 EQUAL FRACTION columns, but its copy is capped at
   560/600px. The cap does not grow with the grid, so the wider the viewport the
   more empty air opens between where the lede stops and where column 4 starts:
   ~330px at 1210, ~400px at 1301, ~865px at 1920. The highlights end up adrift
   on the far right with nothing tying them to the copy.

   Fixed by sizing the tracks to the CONTENT rather than to equal fractions: the
   copy column takes the measure the copy is actually capped at, and the
   right-hand column takes a readable fixed width. The gap between them is then
   a real gutter that stays constant instead of absorbing every extra pixel.
   `minmax(0,600px)` lets the copy column shrink below 600 on smaller desktops
   while never exceeding the cap the copy itself uses. */
@media (min-width: 1101px) {
  .ev-wrap .ev-hero--v2 {
    /* 1fr in the MIDDLE, not leftover space at either end. The copy column is
       still capped at 600 and the highlights still take a readable fixed width;
       the flexible track between them absorbs everything else, which pins the
       copy to the left edge and the highlights to the right.

       Both earlier attempts put the slack in the wrong place. Four equal
       fractions gave a 865px hole at 1920 (the capped copy could not fill its
       3 spanned tracks). justify-content:start then packed BOTH columns left,
       so the whole surplus sat to the right of the highlights and the two
       columns looked jammed together. An explicit spacer track is the only
       arrangement where neither end floats. */
    grid-template-columns: minmax(0, 600px) 1fr minmax(240px, 340px);
    gap: 48px 64px;
  }
  /* Column 3, not 2 — column 2 is the flexible spacer above. */
  .ev-wrap .ev-hero--v2 > .ev-hero-main {
    grid-column: 1;
    grid-row: 1;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-quote {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-stats {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }
}
/* ---- Responsive ----
   Below 1100px the four-column grid collapses and the right-hand blocks
   stack, quote then stats. */
/* ---- Tablet highlights: all five on one row ----
   Between 901px and 1100px the hero is two columns and the highlights sit in
   their own, with room for the whole list across a single line. Five columns
   puts the three measurements AND both halves of the focus pair on one row, so
   the block reads as one horizontal strip rather than wrapping to a second row
   with two orphans. `display:contents` from the desktop rule is what makes the
   focus pair's dt and dd available as two separate cells here. */
@media (min-width: 901px) and (max-width: 1100px) {
  /* auto tracks, NOT repeat(5,1fr). The five items are wildly unequal in width
     ("3" against "Recomposition"), so equal fractions give the long words a
     cell far too narrow and clip them while "3" sits in a mostly empty one.
     Sizing each column to its own content lets the row fit, and justify-content
     spreads the leftover space BETWEEN the columns rather than inside them. */
  .ev-wrap .ev-hero--mission .ev-hero-stats dl {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    /* 18px column gap overflowed the row by ~16px at the 901px end of this
       range (5 nowrap labels + 4 gaps exceeded the column). 10px is the
       smallest gutter that still separates the pairs, and space-between opens
       it back up on the wider half of the range where there is room. */
    gap: 16px 10px;
    align-items: start;
  }
  /* :not(.is-focus) is load-bearing. Without it this rule also matches the
     focus div and, being more specific than the `display:contents` rule above,
     turns it back into a flex COLUMN — which puts both its words inside cell 4
     and leaves cell 5 empty. Excluding it lets contents stand, so its dt and dd
     become the 4th and 5th cells in their own right. */
  .ev-wrap .ev-hero--mission .ev-hero-stats div:not(.is-focus) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* Labels stay on one line. `auto` tracks size to content, but content that is
     allowed to wrap has no fixed width — at the narrow end of this range the
     grid resolves "per week" to a 52px column and breaks it over two lines,
     which knocks that cell out of step with the four beside it. nowrap makes
     each track exactly as wide as its label, and the row still fits: the five
     labels total ~330px inside a ~430px column. */
  .ev-wrap .ev-hero--mission .ev-hero-stats dd,
  .ev-wrap .ev-hero--mission .ev-hero-stats dt {
    white-space: nowrap;
  }
  /* The focus pair keeps `display:contents` here, so its dt and dd ARE the
     4th and 5th cells — each one its own column, matching the three numbers. */
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dt,
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dd {
    font-size: 15px;
    line-height: 1.25;
  }
}
@media (max-width: 1100px) {
  /* Two columns. The desktop rules place quote + stats explicitly in column 4
     / row 1, so both the column AND the row have to be released here or the
     grid keeps a phantom 4th track. */
  .ev-wrap .ev-hero--v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
  /* Two ROWS now, not one. `align-items:end` bottom-aligns each row within its
     own track, so whenever the SECTION is taller than its content (the editor's
     height setting, not this block, decides that now) the copy is pushed to the
     top of a tall first track and quote+stats to the bottom of the second — a
     dead band down the middle. Collapsing the rows to their content and letting the whole
     stack sit at the bottom of the hero keeps it reading as one group.
     grid-auto-rows:min-content stops the two tracks from sharing out the
     spare height; align-content:end puts that spare height above them. */
  .ev-wrap .ev-hero--mission {
    grid-auto-rows: min-content;
    align-content: end;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-main {
    grid-column: 1/span 2;
    grid-row: auto;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-quote {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-stats {
    grid-column: 2;
    grid-row: auto;
    align-self: auto;
  }
  /* Quote no longer sits beside the kicker, so drop the alignment nudge. */
  .ev-wrap .ev-hero-quote {
    padding-top: 0;
  }
}
@media (max-width: 900px) {
  /* Single column: reading copy, then quote, then stats. */
  .ev-wrap .ev-hero--v2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-main {
    grid-column: 1;
    max-width: none;
  }
  .ev-wrap .ev-hero--v2 > .ev-hero-quote,
  .ev-wrap .ev-hero--v2 > .ev-hero-stats {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
  /* THREE across, not four: the three measurements (12 / 43 / 3) are the same
     KIND of fact and read as one row, while the focus pair is a different kind
     of statement. Squeezing all four into one row made the numbers small and
     put "Hypertrophy" in a cell it could not fill; giving the three numbers a
     row of their own lets them go BIGGER, which is what a stat block is for.
     Number over label, so each cell has full width for its label. */
  .ev-wrap .ev-hero--mission .ev-hero-stats dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .ev-wrap .ev-hero-stats div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* Numbers get their own scale on mobile. On desktop they sit at label size
     (16px) because they are one item in a vertical list read at a glance; here
     they are a three-up row and carry the block, so they step up to 30px with
     the label held at 14px underneath. */
  .ev-wrap .ev-hero--mission .ev-hero-stats dt {
    font-size: 30px;
    line-height: 1;
  }
  .ev-wrap .ev-hero--mission .ev-hero-stats dd {
    font-size: 14px;
    line-height: 1.25;
  }
  /* The focus pair drops to its OWN full-width row below the numbers — the
     desktop `display:contents` is released here (see the note at that rule) so
     this div is a grid CELL again, spanning all three columns. Its two words
     then sit side by side on one line rather than stacking, which is what makes
     it read as a single row rather than as two more list items. */
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    grid-column: 1/-1;
  }
  /* Back to label scale. NO separator between the two words — they are joined
     by the "Focus on" label below instead, which names what they are. */
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dt,
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dd {
    font-size: 17px;
    line-height: 1.25;
  }
  /* On desktop the focus pair sits as the last two lines of a labelled list, so
     the "Mission Highlights" heading above already frames it. On mobile that
     heading is hidden and the pair has been pulled onto its own row under three
     numbers — with nothing naming it, "Hypertrophy Recomposition" reads as two
     more stats that lost their figures. This label says what the row is.
     ::before on the ROW (not on the dt) so it is one cell-wide line above both
     words rather than an inline prefix to the first. */
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus::before {
    content: "Focus on";
    flex: 0 0 100%;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  /* The pull-quote is hidden on mobile. It is an atmospheric line, not
     information: stacked into a single column it becomes just another
     paragraph competing with the lede directly above it, and the lede already
     says what the program is. Kept in the DOM (not removed from the markup) so
     it returns at desktop widths where it has a column of its own. */
  .ev-wrap .ev-hero--v2 > .ev-hero-quote {
    display: none;
  }
  /* Stats sit between the lede and the CTA row on mobile — see the JS at the
     foot of this block, which moves the node into .ev-hero-main there. It
     cannot be done with `order`: the buttons live INSIDE .ev-hero-main, so
     reordering the hero's own grid children can only place the stats above or
     below that whole block, never between two of its children.

     Once moved, the block is a plain flow child rather than a grid item, so
     the desktop column placement has to be neutralised. */
  .ev-wrap .ev-hero-main > .ev-hero-stats {
    grid-column: auto;
    grid-row: auto;
    /* Equal above and below: the block sits between the lede and the CTA row,
       so it should read as evenly separated from both. 32px matches
       .ev-hero-foot's own top margin, which collapses with this one. */
    margin: 32px 0;
  }
  /* The "Mission Highlights" label is redundant here — the block follows the
     lede that already introduced the program, and the numbers carry their own
     labels. The membership note goes with it: it is the quietest element and
     has the least room at this width. The focus pair now stays — it is part of
     the highlights list rather than a trailing footnote. */
  .ev-wrap .ev-hero-stats-t,
  .ev-wrap .ev-hero-main > .ev-hero-stats .ev-hero-stats-note {
    display: none;
  }
}
@media (max-width: 640px) {
  .ev-wrap .ev-hero--mission h1 {
    font-size: clamp(40px, 11vw, 64px);
  }
  /* The three-up row is KEPT at phone widths — three short numerals fit across
     even a 320px screen, and breaking them to 2+1 would orphan the third. Only
     the numeral scale comes down, so "sessions" and "per week" still sit on one
     line under their number. */
  .ev-wrap .ev-hero--mission .ev-hero-stats dl {
    gap: 18px 10px;
  }
  .ev-wrap .ev-hero--mission .ev-hero-stats dt {
    font-size: 26px;
  }
  .ev-wrap .ev-hero--mission .ev-hero-stats dd {
    font-size: 13px;
  }
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dt,
  .ev-wrap .ev-hero--mission .ev-hero-stats div.is-focus dd {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-wrap .ev-hero-explore::after {
    transition: none;
  }
}
/* ===================================================================
   LEGACY HERO STATS — the seven pages not yet on Quest's markup
   ===================================================================
   Quest's hero puts the focus label INSIDE the stats <dl> as a .is-focus cell.
   The other seven still emit a separate .ev-hero-stats-focus element after the
   dl. These two rules keep those pages rendering correctly until they are
   ported. Delete this section once no header emits .ev-hero-stats-focus
   (grep the header-v2.html files under programs-pages to check). */
/* Focus line — the themes that did not reduce to a number. Mono caps, so it
   reads as a label closing the block rather than a fifth statistic. Hairline
   above it separates it from the pairs without drawing a full rule. */
.ev-wrap .ev-hero-stats-focus {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(236, 230, 220, 0.18);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk);
  line-height: 1.5;
}

/* In the narrow in-column placement the focus line is the quietest element and
   has the least room, so it drops out with the stats table header. */
@media (max-width: 1100px) {
  .ev-wrap .ev-hero-main > .ev-hero-stats .ev-hero-stats-focus {
    display: none;
  }
}
/* ---- Two-column body: content + sticky enroll (legacy, if used) ---- */
.ev-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}

/* ---- Intro prose ---- */
.ev-block {
  margin-bottom: 72px;
}

.ev-block h2 {
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.06;
  font-size: clamp(30px, 3.8vw, 48px);
  text-wrap: balance;
  margin: 0 0 28px;
}

.ev-block p {
  font-size: 19px;
  color: var(--text-muted);
  line-height: 1.8;
  font-weight: 300;
  text-wrap: pretty;
  margin: 0 0 24px;
}

.ev-block p strong {
  font-weight: 500;
  color: var(--text);
}

/* ---- Curriculum ---- */
.ev-curr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--border-strong);
  padding-top: 24px;
  margin-top: 8px;
}

.ev-curr-head h2 {
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 2.9vw, 36px);
  margin: 0;
  line-height: 1.06;
}

.ev-curr-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.ev-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.ev-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.45s ease, padding-left 0.45s ease;
}

.ev-item:hover {
  background: var(--bg-card-hover);
  padding-left: 14px;
}

.ev-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-width: 44px;
}

.ev-name {
  font-family: var(--head);
  font-size: 21px;
  font-weight: 400;
  flex: 1;
  letter-spacing: normal;
  color: var(--text);
}

.ev-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ev-item:hover .ev-tag {
  color: var(--accent);
}

/* ---- Curriculum grouped by week ---- */
.ev-week {
  margin-top: 44px;
}

.ev-week:first-of-type {
  margin-top: 32px;
}

/* padding-bottom is the gap between the week title and the hairline that opens
   its session list (.ev-week .ev-list draws that border-top). 16px, not 8px:
   at 8px the title sat almost on the rule, reading as underlined rather than as
   a heading above a list. */
.ev-week-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
}

.ev-week-head h3 {
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.005em;
  font-size: clamp(18px, 1.8vw, 23px);
  margin: 0;
  line-height: 1.1;
}

.ev-week-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Week head is the divider, so drop the list's own top rule + margin. */
.ev-week .ev-list {
  margin-top: 0;
  border-top: 1px solid var(--border-strong);
}

/* ---- Curriculum accordion (built by enroll-sticky.js) ----
   By default only the first 4 weeks show; the rest are hidden until the
   "View full program" button toggles .ev-curr-open on the section. The
   .ev-curr-collapsible class is added by JS only when there are >4 weeks,
   so pages with 4 or fewer weeks are unaffected (and it degrades to
   fully-open if JS never runs). */
/* Collapsible wrapper (built by JS): animates height by transitioning
   grid-template-rows 0fr → 1fr, which eases to the content's natural height.
   The inner div must be overflow:hidden so clipped rows don't spill during
   the transition. Degrades to fully-open if JS never runs (no wrapper added). */
.ev-curr-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease;
}

.ev-curr-more-inner {
  overflow: hidden;
  min-height: 0;
}

.ev-curr-collapsible.ev-curr-open .ev-curr-more {
  grid-template-rows: 1fr;
}

/* Toggle button — gold outline: transparent fill, gold border + gold text/icon.
   Fills gold on hover. */
.ev-curr-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 40px;
  padding: 19px 22px;
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.ev-curr-toggle:hover {
  background: var(--gold);
  color: #1a1a1a;
  transform: translateY(-2px);
}

/* Gold chevron that flips when open. */
.ev-curr-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}

.ev-curr-open .ev-curr-toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

/* ---- Explore other programs ----
   A card grid at the end of each program page (before the author). Same set of
   links as the homepage's program cards; each page omits itself. Warm-black
   tiles with a gold hover border, image + scrim, bebas title, gold line-arrow.
   Scoped under .ev-wrap. */
.ev-progs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid var(--border-strong);
  padding-top: 24px;
  margin: 96px 0 0;
}

.ev-progs-head h2 {
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 2.9vw, 36px);
  margin: 0;
  line-height: 1.06;
}

.ev-progs-head .ev-progs-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.ev-progs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.ev-prog {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--hair);
  padding: 16px 15px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

.ev-prog:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.ev-prog img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.5) contrast(1.03);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.ev-prog:hover img {
  filter: grayscale(0) brightness(0.6) contrast(1.05);
  transform: scale(1.04);
}

.ev-prog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.1) 35%, rgba(10, 9, 7, 0.86) 100%);
}

.ev-prog-n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1;
}

/* Gold line-arrow (SVG mask — inherits colour, crisp, no glyph). */
.ev-prog-n::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: var(--gold);
  opacity: 0.55;
  -webkit-mask: var(--ev-arrow) center/contain no-repeat;
  mask: var(--ev-arrow) center/contain no-repeat;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ev-wrap {
  --ev-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.ev-prog:hover .ev-prog-n::after {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .ev-progs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-prog, .ev-prog img, .ev-prog-n::after {
    transition: none;
  }
  .ev-prog:hover .ev-prog-n::after {
    transform: none;
  }
}
/* ---- "Also included in your membership" slider ----
   Full-width band appended before the site footer by enroll-sticky.js. Reuses
   the .ev-prog card above (image + scrim + bebas title + gold line-arrow); this
   block only adds the full-bleed band, the inner max-width, and the Swiper
   chrome. The band paints the warm-black page colour so it reads as its own
   section against whatever the footer sits on.

   Controls match the design system's shared carousel spec (DESIGN-SYSTEM.html
   "Slider controls" / assets/css/space-program/_slider.scss): 40px square
   .ev-slider-nav chevrons beside the heading above the 700px breakpoint, a row
   of gold diamond .ev-slider-dots below it. This band previously drew its own
   38px round buttons with no bullet fallback, which left phones with no
   position indicator once the arrows were hidden. */
.ev-progs-section {
  background: var(--bg);
  padding: 78px 0 88px;
  border-top: 1px solid var(--border);
}

/* Matches .ev-shell (max-width:1180px) so the cards line up with the program
   content above — the band is full-bleed, its contents are not. The side padding
   only kicks in below the shell width, where .ev-shell picks up its own. */
.ev-progs-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (min-width: 1244px) {
  .ev-progs-inner {
    padding: 0;
  }
}
/* The head rule above owns the border-top/margin used by the in-page grid
   variant; inside the band the section already provides that separation. */
.ev-progs-section .ev-progs-head {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 26px;
  align-items: center;
}

.ev-progs-section .ev-progs-head h2 {
  flex: 1 1 auto;
}

/* Arrows — .ev-slider-nav, the shared 40px chevron pair (DESIGN-SYSTEM.html
   "Slider controls"). Sit to the right of the heading, beside the count. */
.ev-progs-head .ev-slider-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.ev-progs-head .ev-slider-nav button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.ev-progs-head .ev-slider-nav button:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

/* Chevrons drawn from a rotated border box — no glyph, no icon font. */
.ev-progs-head .ev-slider-nav button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.ev-progs-head .ev-slider-nav .ev-prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.ev-progs-head .ev-slider-nav .ev-next::before {
  transform: translateX(-2px) rotate(45deg);
}

/* Swiper's disabled state on the first/last group; real buttons also get the
   disabled attribute (set in enroll-sticky.js), styled here too. */
.ev-progs-head .ev-slider-nav button:disabled,
.ev-progs-head .ev-slider-nav button.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Slider cards keep a consistent height across slides. */
.ev-progs-slider {
  overflow: hidden;
}

.ev-progs-slider .swiper-slide {
  height: auto;
}

.ev-progs-slider .ev-prog {
  height: 100%;
  min-height: 220px;
}

/* Pagination — .ev-slider-dots, gold diamonds, hidden above the 700px
   breakpoint where the arrows take over. */
.ev-progs-section .ev-slider-dots {
  display: none;
}

@media (max-width: 900px) {
  .ev-progs-section {
    padding: 56px 0 64px;
  }
  .ev-progs-inner {
    padding: 0 24px;
  }
  .ev-progs-slider .ev-prog {
    min-height: 190px;
  }
}
@media (max-width: 700px) {
  /* Keep the arrows out of the way on phones — swipe is the primary gesture;
     the diamond row below the track becomes the position indicator. */
  .ev-progs-head .ev-slider-nav {
    display: none;
  }
  .ev-progs-section .ev-slider-dots.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    position: static;
    margin-top: 20px;
  }
  .ev-progs-section .ev-slider-dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 0;
    transform: rotate(45deg);
    background: var(--text-muted);
    border: 0;
    opacity: 1;
    transition: background-color 0.25s ease;
  }
  .ev-progs-section .ev-slider-dots .swiper-pagination-bullet-active {
    background: var(--accent, var(--gold));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-progs-head .ev-slider-nav button {
    transition: none;
  }
}
/* ---- About the author ----
   Appended to the end of each program's <main>. Reuses the .ev-block prose
   scale and the .ev-meta diamond-marker row for the highlights, then adds a
   small gold-accented row of social icons. Scoped under .ev-wrap. */
.ev-author {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--border-strong);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}

/* Portrait on the left — fixed column, tall crop, hairline gold-tinged frame. */
.ev-author-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--bg-card);
}

.ev-author-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/4;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.5s ease, transform 0.6s ease;
}

.ev-author-photo:hover img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.03);
}

/* Bottom-up scrim on the portrait. Kept after the name moved into the text
   column: it grounds the crop against the section background so the photo
   doesn't end on a hard horizontal edge. A separate layer rather than a
   background on the figure so it can fade gradually — the eased stop list
   avoids the band a plain linear ramp leaves across the middle. */
.ev-author-photo::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 6, 5, 0.88) 0%, rgba(6, 6, 5, 0.72) 22%, rgba(6, 6, 5, 0.44) 48%, rgba(6, 6, 5, 0.18) 72%, rgba(6, 6, 5, 0) 100%);
}

/* The name is the section h2, but it is a PERSON'S NAME, not a statement like
   "A call to metamorphosis." — it carries less to say, so it runs a step below
   the section-heading scale the other h2s use (clamp 30-48px). */
.ev-author h2 {
  /* face + weight restated, not inherited. Every OTHER section h2 names
     --head-sect and 700 in its own rule; this one used to set size and margin
     only, so it fell through to the Squarespace theme's h2 and rendered as
     bebas-kai 400 — a different face AND weight from the headings around it.
     DESIGN-SYSTEM.md "Type" puts h1/h2/h3 on Helvetica Neue 700 without
     exception, so it is declared here like the rest. */
  font-family: var(--head-sect);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 14px;
}

/* Credit — the "coach behind" line, now directly under the name (which is the
   section h2). Mono caps at label scale so it reads as a credit rather than a
   second heading, with the titles themselves in gold. */
.ev-author .ev-author-credit {
  margin: 0 0 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-muted);
}

.ev-author .ev-author-credit b {
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.14em;
}

/* Text column: the kicker/heading/lede/highlights/social all stack here. */
.ev-author-body {
  min-width: 0;
}

/* 20px below, not 36px. The social row is the lede's own trailing detail — the
   author's handles — so it should read as attached to the paragraph rather than
   as the next section. The 36px here was section spacing, and combined with the
   row's 6px top margin it opened a 42px hole that made the icons look orphaned.
   14px + 6px = 20px total keeps them clearly grouped with the text above while
   still separating them from it. */
.ev-author .ev-author-lede {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 300;
  text-wrap: pretty;
  max-width: 640px;
  margin: 0 0 14px;
}

.ev-author .ev-author-lede em {
  font-style: normal;
  color: var(--text);
  font-weight: 500;
}

/* Highlights — same look as the hero .ev-meta feature cells. */
.ev-author .ev-meta {
  margin: 0 0 36px;
}

/* Social row — canonical set from DESIGN-SYSTEM.md "Social links": boxed 34px
   icon links, 17px glyphs. Same component as the site footer, so the author
   block and the footer read as one system.
   Replaces the old bare 24px .ev-social icons AND the pasted Squarespace social
   block that shipped its own #block-<id> <style>. */
/* The visible gap is the CSS gap plus each icon's own box padding, so the two
   are tuned together: a 26px box around a 19px glyph leaves ~3.5px a side, and
   an 8px gap lands the glyphs ~15px apart optically. */
.ev-wrap .hm-social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

/* Pull the row left by the first icon's internal padding so the glyph — not its
   invisible box — lines up with the body copy above. */
.ev-wrap .ev-author .hm-social-row {
  margin-top: 6px;
  margin-left: -3.5px;
}

/* Scoped to .ev-wrap and with an explicit hex rather than var(--chalk): these
   icons sit on a dark ground, and Squarespace's own `a{color:...}` is a dark
   value. A bare .hm-soc at (0,1,0) loses to the theme's link rule, which is how
   the icons rendered BLACK on the live page. The .ev-wrap prefix (0,2,0) wins,
   and the literal colour means they stay visible even if the token block is
   ever missing. !important on the fill for the same reason: the theme sets fill
   on social SVGs directly. */
/* Borderless here, unlike the footer's boxed variant: this row sits in a text
   column under body copy, and four outlined squares read as buttons competing
   with the Join CTA. The glyphs alone are enough at this scale. The 34px box is
   kept as the hit target even though nothing is drawn around it. */
.ev-wrap .hm-soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #e8e0d0;
  transition: color 0.25s ease, transform 0.25s ease;
}

.ev-wrap .hm-soc svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor !important;
}

.ev-wrap .hm-soc svg path {
  fill: currentColor !important;
}

.ev-wrap .hm-soc:hover {
  color: #ddcc5c;
  transform: translateY(-2px);
}

.ev-wrap .hm-soc:focus-visible {
  outline: 2px solid #ddcc5c;
  outline-offset: 3px;
}

/* Stack the author section (photo on top) on narrow screens. */
@media (max-width: 720px) {
  .ev-author {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ev-author-photo {
    max-width: 240px;
  }
}
/* The enroll-box image was removed from the markup. Pages still carrying the
   old pasted <figure class="ev-enroll-img"> would otherwise show it on desktop,
   because a bare <figure> defaults to display:block once its rules are gone
   (mobile already hides it via .ev-enroll > *). Keep this until every program
   page's code block has been re-pasted without the figure. */
.ev-enroll-img {
  display: none !important;
}

/* ---- Enroll box — cloned from the homepage .ollin-trio .tile.lead card ----
   (nonprophettest.squarespace.com). Gold-bordered gradient tile, Bebas heading
   + price, JetBrains Mono price sub, Source-Sans-style tag/body, gold CTA.
   Local tokens mirror the homepage's --gold / --chalk / --dim / --hair. */
.ev-enroll-wrap {
  position: sticky;
  top: 28px;
  --gold:#ddcc5c;
  --chalk:#e8e0d0;
  --dim:#8a8278;
  --hair:#2a2824;
  /* Bebas stack that matches the homepage tile ("Bebas Neue"), with bebas-kai
     (Squarespace Typekit) as fallback, ending in sans-serif — never serif. */
  --ev-head:"Bebas Neue",bebas-kai,"Oswald","Arial Narrow",sans-serif;
}

.ev-enroll {
  border: 1px solid var(--hair); /* dim border by default */
  background: #0f0f0e; /* flat by default */
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.6s ease, border-color 0.6s ease;
  cursor: pointer; /* whole card is clickable (JS forwards to Join) */
}

/* Gold border + golden gradient only on hover. */
.ev-enroll:hover {
  border-color: var(--gold);
  background: linear-gradient(rgba(221, 204, 92, 0.1), #0f0f0e 70%);
}

.ev-enroll .ev-etag {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.ev-enroll h3,
.ev-enroll .ev-title {
  font-family: var(--ev-head);
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--chalk);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

/* Price: Bebas numeral, gold, with the "/ month" sub stacked below in mono. */
.ev-price {
  font-family: var(--ev-head);
  font-size: 60px;
  line-height: 0.85;
  color: var(--gold);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  align-items: flex-start;
}

.ev-price .n {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
}

.ev-price .per,
.ev-price small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--dim);
  font-weight: 400;
  text-transform: none;
  padding: 0;
}

.ev-sub {
  margin: 0;
  font-size: 16px;
  color: var(--dim);
  line-height: 1.6;
  font-weight: 300;
}

.ev-sub strong {
  color: var(--chalk);
  font-weight: 600;
}

.ev-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
}

.ev-benefits li {
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
  position: relative;
  font-size: 16px;
  color: var(--dim);
  line-height: 1.6;
}

/* Gold "+" marker — matches the homepage tile's bullet. */
.ev-benefits li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 600;
}

.ev-actions {
  margin-top: auto;
  padding-top: 16px;
}

/* Primary CTA — homepage .ollin-trio .btn.primary: gold fill, dark text.
   Content-sized (inline-block, NOT full-width) so it matches the homepage tile
   proportions instead of stretching across the card. */
/* Shared component with the homepage (home.html) and the Programs page
   (space/space.css): one base, three tiers. .ev-btn / .ev-ghost are kept
   as aliases so existing markup keeps working. The hover lift is gone —
   the shared primary inverts to chalk instead, matching the other pages. */
a.ev-btn,
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: #0a0a0a;
  border-color: var(--gold);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 22px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hm-btn--block {
  display: flex;
  width: 100%;
}

a.ev-btn:hover,
.hm-btn--primary:hover {
  background: var(--chalk);
  border-color: var(--chalk);
  color: #0a0a0a;
}

a.ev-btn.ev-ghost,
.hm-btn--secondary {
  background: transparent;
  color: var(--chalk);
  border-color: rgba(224, 217, 204, 0.45);
  margin-top: 10px;
}

a.ev-btn.ev-ghost:hover,
.hm-btn--secondary:hover {
  background: var(--chalk);
  border-color: var(--chalk);
  color: #0a0a0a;
}

/* Tertiary — no border, no fill: the quietest tier, for controls that sit
   beside a heading or a filled CTA and must not compete with it. Keeps the
   base's mono caps and padding so it aligns with the other tiers in a row. */
.hm-btn--tertiary {
  background: transparent;
  color: var(--chalk);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.hm-btn--tertiary:hover {
  background: transparent;
  border-color: transparent;
  color: var(--gold);
}

.hm-btn--disabled,
.hm-btn:disabled {
  background: transparent;
  border-color: rgba(224, 217, 204, 0.2);
  color: var(--dim);
  cursor: not-allowed;
  pointer-events: none;
}

a.ev-btn:focus-visible,
.hm-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hm-btn__arw {
  flex: none;
  transition: transform 0.2s;
}

a.ev-btn:hover .hm-btn__arw,
.hm-btn:hover .hm-btn__arw {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .hm-btn__arw {
    transition: none;
  }
  a.ev-btn:hover .hm-btn__arw,
  .hm-btn:hover .hm-btn__arw {
    transform: none;
  }
}
.ev-fine {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
  margin: 8px 0 0;
}

/* ---- Enroll box, homepage-door design ------------------------------------
   Ported from the homepage's `.hm-door.star` membership card
   (deploy/home-embed-block.html) so the program pages sell the membership with
   the same card the homepage does, rather than the older .ev-enroll tile.

   WHY THE CLASSES ARE RENAMED
   The homepage rules are all scoped under `#hm-page`, an id that does not
   exist on a program page, and they use bare classnames (.k, .t, .price, .go)
   that are far too generic to drop into a Squarespace page unscoped — .t and
   .k in particular would collide with anything. Everything here is therefore
   prefixed `.ev-door-*`, a name used nowhere else. The DESIGN is a copy; the
   selectors deliberately are not. (See the SCOPING NOTE below for why they
   carry no `.ev-wrap` ancestor either.)

   DIFFERENCES FROM THE HOMEPAGE CARD, as specified:
     · no "ii · the membership" kicker — the numeral is a homepage
       section-ordering device and means nothing on a program page
     · the title is "Membership", not "The Space Program", and it is not a
       link: on a program page this card IS the offer, so a link out to
       another page would lead away from the thing being sold
     · the CONTAINER is the live program pages' .ev-enroll tile, not the
       homepage door: 1px #2a2824 hairline on #0f0f0e, 34px/30px padding. The
       homepage's 2px gold frame is its "star" treatment, marking one card out
       of a row of four as recommended — meaningless for a card that stands
       alone, and it competes with the gold price and CTA inside it.
     · the CTA is content-sized, not a full-width bar (see .ev-door-go).
   The Bebas price, diamond-marked benefit list and gold arrow CTA are the
   homepage card's. */
/* ---- SCOPING NOTE ---------------------------------------------------------
   These rules are NOT prefixed with `.ev-wrap`, unlike everything else in this
   stylesheet. The card is pasted as its OWN Squarespace code block, so it
   lands in a bare .sqs-code-container with no .ev-wrap ancestor — a
   `.ev-wrap .ev-door` selector matched nothing and the card rendered as plain
   text on the live page.

   `.ev-door*` is specific enough to stand alone: it is a made-up prefix used
   nowhere else on the site. The card also declares its own colour tokens
   below, so it does not depend on .ev-wrap for those either — which is what
   lets it be dropped into any block on any page. */
.ev-door {
  /* EVERY token the card uses is declared here, not inherited. Because it is
     pasted as its own code block it has no .ev-wrap ancestor, so --head-sect,
     --text-muted, --mono and --ev-arrow would all resolve to nothing — an
     undefined custom property is not an error, it just silently drops the
     declaration, which is how the card ended up as unstyled plain text.
     Declaring them locally also means the card can be dropped into any block
     on any page and still look right. Values match _tokens.scss. */
  --gold:#ddcc5c;
  --chalk:#e8e0d0;
  --dim:#b3b3b3;
  --hair:#2a2824;
  --text-muted:rgba(236,236,236,.75);
  --head-sect:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ev-door-head:bebas-kai,"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --ev-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  /* Squarespace's own link colour would otherwise win inside a bare code
     block; the CTA sets its own colour, this covers anything else. */
  color: var(--chalk);
  /* Base face. Inside .ev-wrap this is inherited; standalone there is nothing
     to inherit from and the benefit list fell back to the browser default
     serif (rendered as Times on the live page). */
  font-family: var(--head-sect);
  /* Container matches the existing .ev-enroll tile on the live program pages
     (see /missions/the-quest-part-ii), NOT the homepage door's 2px gold frame.
     The gold border is the homepage's "star" treatment, which marks ONE card
     out of a row of four as the recommended one — a distinction that means
     nothing here, where the card stands alone and there is nothing to be
     picked out from. The dim hairline lets the gold price and CTA carry the
     emphasis instead of competing with a gold frame around them.
       border  1px #2a2824   (--hair)
       ground  #0f0f0e
       pad     34px 30px 30px, gap 16px */
  border: 1px solid var(--hair);
  background: #0f0f0e;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The card declares no width, so it fills whatever Squarespace block it is
     dropped into — on the live mil-sel page that block is 374px wide, which
     is a value set by dragging in the Fluid Engine editor, not by this CSS.
     The cap keeps the card at a pricing-card proportion however wide the block
     is drawn; a NARROWER block still wins, since this is a max and not a
     fixed width. */
  max-width: 320px;
}

/* border-box for the card and its whole subtree. .ev-wrap declares this for
   its descendants, but this card has no .ev-wrap ancestor, so the CTA was
   content-box: width:100% + 15px/22px padding measured 359px inside a 360px
   card and hung 23px past the right border. */
.ev-door,
.ev-door *,
.ev-door *::before,
.ev-door *::after {
  box-sizing: border-box;
}

/* Title. 20px/700 like the homepage door's .t, in the section face rather than
   the condensed one — it is a heading, and DESIGN-SYSTEM.md § Type puts
   headings on Helvetica 700. */
.ev-door-title {
  font-family: var(--head-sect);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--chalk);
  margin: 0;
}

/* Price. Bebas numeral in gold with the period as a small inline sub — the
   homepage's `.price` / `.price small` pair. */
.ev-door-price {
  font-family: var(--ev-door-head);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  margin: 0;
}

.ev-door-price small {
  font-size: 13px;
  color: inherit;
}

/* Terms line. The negative top margin pulls it against the price, overriding
   the card's 10px flex gap so the amount and its conditions read as one unit —
   the same trick the homepage uses. */
.ev-door-terms {
  margin: -6px 0 0;
  padding: 0;
  background: none;
  color: var(--gold);
  font-family: var(--head-sect);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.6px;
  text-transform: none;
}

.ev-door-terms span {
  color: inherit;
}

/* Benefit list. flex:1 makes the list absorb any spare height so the CTA is
   pinned to the bottom of the card regardless of how many items there are. */
.ev-door-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
  margin: 2px 0 16px;
  padding: 0;
}

.ev-door-list li {
  position: relative;
  padding: 2px 0 2px 17px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Diamonds rather than dots, matching the section marker used across the
   program pages. A rotated square, not a glyph — the 1px radius takes the
   needle off the points so they read as marks, not arrowheads. */
.ev-door-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* CTA — gold, inverting to chalk, with the shared arrow.
   Content-sized and left-aligned, NOT the homepage door's full-width bar. The
   homepage stretches it because those doors sit in a 4-up row and the buttons
   have to line up across them; this card stands alone, so a button the width
   of its own label reads as an action rather than a banner. `align-self:start`
   is what keeps it content-width — the card is a column flex container, whose
   default `stretch` would otherwise pull it to the full width regardless. */
.ev-door-go {
  display: inline-flex;
  align-self: start;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 12px 18px;
  background: var(--gold);
  border: 1.5px solid var(--gold);
  color: #0a0a0a;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ev-door-go:hover {
  background: var(--chalk);
  border-color: var(--chalk);
  color: #0a0a0a;
}

.ev-door-go:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Arrow. Drawn as a mask off currentColor — same geometry as --ev-arrow used
   by the program cards, so there is one arrow shape on the page. */
.ev-door-go .hm-arw {
  flex: none;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: var(--ev-arrow) center/contain no-repeat;
  mask: var(--ev-arrow) center/contain no-repeat;
  transition: transform 0.2s;
}

.ev-door-go:hover .hm-arw {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ev-door-go .hm-arw {
    transition: none;
  }
  .ev-door-go:hover .hm-arw {
    transform: none;
  }
}
/* On mobile the fixed .ev-sticky-cta stripe carries the price + CTA, so the
   card would be a second copy of the same offer. It stays in the DOM because
   enroll-sticky.js reads the price and button OUT of it to build that stripe. */
@media (max-width: 900px) {
  .ev-door {
    display: none;
  }
}
/* ---- Neutralise the legacy hook classes ----------------------------------
   .ev-price and .ev-btn are carried on this card ONLY as selectors for
   enroll-sticky.js (see deploy/enroll-block.html). Their own rules in
   _enroll.scss are written for the old tile — a 60px stacked Bebas price and
   an inline-flex gold button — and would otherwise override the door styling
   that follows them in the cascade. Reset just the properties that clash, and
   only inside .ev-door, so the old tile keeps working anywhere it is still
   used. */
.ev-door .ev-price {
  display: block;
  font-size: 30px;
  line-height: 1;
  gap: 0;
  margin: 0;
  align-items: initial;
}

.ev-door .ev-price small {
  display: inline;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  color: inherit;
  text-transform: none;
  padding: 0;
}

/* .ev-enroll is the third script hook, and _enroll.scss styles it unscoped as
   the OLD tile: 1px dim border, #0f0f0e ground, 34px padding, a hover gradient
   and cursor:pointer. On this card that fights the 2px gold door border and
   adds a second, smaller inset box. Reset the ones that clash — the door's own
   border/background/padding are re-stated so their order in the cascade cannot
   matter. */
.ev-door.ev-enroll {
  border: 1px solid var(--hair);
  background: #0f0f0e;
  padding: 34px 30px 30px;
  gap: 16px;
  cursor: auto;
}

/* _enroll.scss gives .ev-enroll a gold border + gradient on hover, and makes
   the whole tile a click target. This card's CTA is the click target, so the
   hover state is held flat. */
.ev-door.ev-enroll:hover {
  border-color: var(--hair);
  background: #0f0f0e;
}

/* a.ev-btn in _enroll.scss brings its own 15px/22px padding and 12px/2px type.
   Restate the door CTA's smaller, content-sized geometry so it wins wherever
   the two rules meet. */
a.ev-door-go.ev-btn {
  display: inline-flex;
  width: auto;
  align-self: start;
  padding: 12px 18px;
  font-size: 11px;
  letter-spacing: 1.6px;
  margin: 0;
}

/* ---- Mobile sticky CTA stripe (built by JS from the enroll box) ----
   Fixed bottom bar with minimal info: price + Join button. Hidden on desktop,
   always visible on mobile (the enroll box sits at the page bottom, so there's
   nothing to "scroll past"). */
.ev-sticky-cta {
  /* Own tokens — the JS appends this to <body>, OUTSIDE .ev-wrap, so it can't
     inherit .ev-wrap's variables. Keep --sans/--mono here too.
     These MUST stay identical to the copy in deploy/home-embed-block.html —
     same component, two standalone paste-ins, no shared build. See
     DESIGN-SYSTEM.md § "Sticky enroll CTA". */
  --gold:#ddcc5c;
  --chalk:#e8e0d0;
  --dim:#b3b3b3;
  --hair:#2a2824;
  --ev-head:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(15, 15, 14, 0.94);
  backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--hair);
}

.ev-sticky-cta .ev-sticky-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Helvetica 700 rather than the condensed face: wider per glyph and a shorter
   cap height, so this runs a touch smaller with a looser line box than the
   26px/.9 the condensed face used. "$42 / mo" is short enough that the extra
   width costs nothing in the bar. */
.ev-sticky-cta .ev-sticky-price {
  font-family: var(--ev-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.ev-sticky-cta .ev-sticky-price small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dim);
  margin-left: 6px;
}

.ev-sticky-cta .ev-sticky-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Button stays content-sized on the right — never stretches to fill the bar. */
.ev-sticky-cta a.ev-btn {
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  align-self: center;
  padding: 13px 20px;
  font-size: 11px;
}

/* Mobile only: hidden on desktop, always shown on mobile. */
@media (min-width: 901px) {
  .ev-sticky-cta {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .ev-sticky-cta {
    display: flex;
  }
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ev-wrap .ev-shell {
    padding: 90px 24px 72px;
  }
  .ev-wrap .ev-shell.is-header {
    padding: 0;
  }
  .ev-wrap .ev-shell.is-content {
    padding: 0;
  }
  /* On mobile the fixed .ev-sticky-cta stripe carries the price + Join button,
     so the enroll CARD renders nothing. (Kept in the DOM so enroll-sticky.js
     can still read the price + Join button out of it to build the stripe.) */
  .ev-enroll-wrap {
    position: static;
    top: auto;
  }
  .ev-enroll {
    padding: 0;
    border: 0;
    background: none;
  }
  .ev-enroll:hover {
    background: none;
    border: 0;
  }
  .ev-enroll > * {
    display: none !important;
  }
}