/* ==========================================================================
   RYP ACADEMY — Tier 2 (The Product)
   Tokens are transcribed verbatim from RYP-BRAND-CONSTITUTION.md (v2, 2026-06-15).
   Do not introduce a color that is not in :root. Green is the only accent.
   ========================================================================== */

:root {
  /* --- Brand constitution, Tier 2. The complete permitted palette. --- */
  --bg:        #0D0D0D;
  --surface-1: #1A1A1A;
  --surface-2: #2A2A2A;
  --slate:     #6A6A6A;
  --silver:    #C8C8C8;
  --white:     #FFFFFF;
  --green:     #00af51;
  --crimson:   #DC2626;   /* semantic only — loss / warning. Never decorative. */
  /* Comfort Zone only. A deliberate exception to the one-accent rule, set by
     Luke 2026-09-11: the two traps needed to read as different failures, and
     crimson was already carrying Danger. Cool, desaturated and inert on
     purpose — it is the colour of nothing happening. 7.52:1 on the canvas. */
  --ice:       #78A6CC;

  /* Derived, still inside the palette.
     --slate (#6A6A6A) is the constitution's token for "muted text, axes", but at
     3.59:1 on the canvas it fails WCAG AA for anything set at body size. Secondary
     prose and micro-labels therefore use silver at 70%, which computes to ~#909090
     and clears AA at 6.09:1 on the canvas and 5.45:1 on surface-1. --slate stays
     defined for genuinely non-textual use. */
  --muted:     rgba(200, 200, 200, 0.70);

  --green-08:  rgba(0, 175, 81, 0.08);
  --green-20:  rgba(0, 175, 81, 0.20);
  --green-40:  rgba(0, 175, 81, 0.40);

  --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1220px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(52px, 7.5vw, 98px);

  --r-sm: 8px;
  --r-md: 12px;

  --hair: 1px solid var(--surface-2);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--silver);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  color: var(--white);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

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

::selection { background: var(--green); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: var(--bg);
  padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--hair { border-top: var(--hair); }

/* ------------------------------------------------- type: the instrument -- */
/* Mono, uppercase, wide-tracked labels are what make this read as an
   instrument panel rather than a brochure. Used for every eyebrow and datum. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--green);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.h-display { font-size: clamp(42px, 7.4vw, 92px); }
.h-section { font-size: clamp(32px, 4.6vw, 58px); }
.h-card    { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -0.02em; }

.lede {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.6;
  color: var(--silver);
  max-width: 62ch;
}
.muted { color: var(--muted); }
.tight { max-width: 54ch; }

/* Datum: any number doing work. Tabular so columns of figures align. */
.datum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--green); color: var(--bg); }
.btn--primary:hover { background: var(--white); }

.btn--ghost { border-color: var(--surface-2); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

.btn--sm { padding: 11px 20px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text link with a green rule that grows on hover. */
.link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
}
.link::after {
  content: ""; width: 18px; height: 1px; background: var(--green);
  transition: width .2s ease;
}
.link:hover::after { width: 34px; }

/* ------------------------------------------------------------- header --- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 84px;
  transition: height .25s ease;
}
.hdr.is-stuck {
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--surface-2);
}
.hdr.is-stuck .hdr__in { height: 66px; }

.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { height: 18px; width: auto; }
/* The horizontal wordmark is 14:1 — at phone widths it eats the whole bar and
   pushes the CTA and menu button off-screen. The stacked mark is 2.6:1. */
.onlysm { display: none; }
@media (max-width: 560px) {
  .hdr__logo img { height: 32px; }
  .nosm { display: none; }
  .onlysm { display: inline; }
  .hdr__cta { gap: 8px; }
  .btn--sm { padding: 10px 14px; }
}

.nav { display: flex; align-items: center; gap: 22px; min-width: 0; flex-shrink: 1; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: var(--silver);
  text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}
.nav a:hover { color: var(--white); }

.hdr__cta { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: var(--hair); border-radius: var(--r-sm);
  color: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
}
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

@media (max-width: 1180px) {
  .nav, .hdr__cta .btn--ghost { display: none; }
  .burger { display: inline-flex; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  padding: 108px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
  /* On a short window the drawer's content is taller than the closed box, and
     the last child (the green Enroll button) spilled past the bottom edge --
     which is the top of the viewport -- painting a green bar across the header.
     overflow contains it; visibility also takes the closed drawer's links out
     of the tab order, where they were reachable but invisible. */
  overflow-y: auto;
  visibility: hidden;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer a {
  padding: 16px 0; border-bottom: var(--hair);
  color: var(--white); text-decoration: none;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
/* .drawer a is more specific than .btn--primary, so without this the drawer's
   Enroll button rendered white-on-green (2.9:1) instead of canvas-on-green. */
.drawer .btn { margin-top: 26px; font-size: 15px; border-bottom: 0; }
.drawer .btn--primary { color: var(--bg); }

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  /* The hero clip is portrait against a full-bleed wide band, so height is the
     only dial that buys back frame. Taller than the old 880px landscape still
     because the club at the top of the backswing lives in the top third. */
  min-height: clamp(1040px, 100vh, 1320px);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* Pulled up from 46% to open headroom above him — at 46% the crop landed
   about 30px over his cap, which read as the nav sitting on his head. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

/* Scrims. The photography is daylight-bright; without these it sits on the
   near-black canvas as a lit rectangle instead of dissolving into it. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(13,13,13,.86) 26%, rgba(13,13,13,.42) 58%, rgba(13,13,13,.72) 100%),
    linear-gradient(to right, rgba(13,13,13,.88) 0%, rgba(13,13,13,.34) 52%, rgba(13,13,13,.12) 100%);
}
/* Dropped well down the frame: the top third of this hero is sky, and copy
   sitting in it reads as floating rather than anchored. */
.hero__in { position: relative; z-index: 2; padding-block: clamp(310px, 40vh, 480px) clamp(48px, 7vh, 76px); width: 100%; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 26px; max-width: 50ch; }
.hero .btn-row { margin-top: 38px; }

.hero__note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}

/* ------------------------------------------------------- season strip --- */
.strip { border-block: var(--hair); background: var(--surface-1); }
.strip__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap;
  padding-block: 20px;
}
.strip__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white);
}
.strip__meta i { font-style: normal; color: var(--muted); }
.strip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.strip__say { font-size: 15px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------- proof band --- */
.proof {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: var(--hair); border-left: var(--hair);
}
@media (max-width: 1180px) { .proof { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px)  { .proof { grid-template-columns: repeat(2, 1fr); } }
.proof__cell {
  border-right: var(--hair); border-bottom: var(--hair);
  padding: 26px 18px 24px;
  min-height: 172px;
  display: flex; flex-direction: column;
  position: relative;
}
/* Corner tick — an instrument-panel cue, not decoration for its own sake. */
.proof__cell::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 10px; height: 1px; background: var(--green);
  opacity: 0; transition: opacity .3s ease;
}
.proof__cell.is-in::before { opacity: 1; }

.proof__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.04em;
}
.proof__l {
  margin-top: auto; padding-top: 12px;
  font-size: 11.5px; line-height: 1.35;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.proof__foot {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 22px;
}

/* ------------------------------------------------------------- thesis --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.figure { position: relative; border-radius: var(--r-md); overflow: hidden; border: var(--hair); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,.62), rgba(13,13,13,0) 55%);
}
.figure figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--silver);
  margin: 0;
}

.pull {
  border-left: 2px solid var(--green);
  padding-left: 26px;
  margin: 34px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.42;
  color: var(--white);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------- protocol --- */
.steps { border-top: var(--hair); margin-top: 56px; }
.step {
  display: grid;
  grid-template-columns: 92px minmax(0, 300px) 1fr;
  gap: 28px;
  padding-block: 38px;
  border-bottom: var(--hair);
  align-items: start;
}
@media (max-width: 860px) {
  .step { grid-template-columns: 54px 1fr; gap: 18px 20px; }
  .step__body { grid-column: 2; }
}
.step__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--green);
  padding-top: 8px;
}
.step__body p { color: var(--muted); max-width: 56ch; }
.step__tag {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--green-40);
  border-radius: 999px;
  padding: 5px 12px;
}

/* -------------------------------------------------------------- zones --- */
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 900px) { .zones { grid-template-columns: 1fr; } }

.zone {
  border: var(--hair); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-1);
  display: flex; flex-direction: column;
  transition: border-color .22s ease, transform .22s ease;
}
.zone:hover { border-color: var(--green-40); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .zone:hover { transform: none; } }

.zone__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.zone__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); }
.zone__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--surface-1) 1%, rgba(26,26,26,.55) 34%, rgba(26,26,26,.06) 100%);
}
.zone__idx {
  position: absolute; z-index: 2; top: 14px; left: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--green);
}
.zone__body { padding: 24px 24px 28px; }
.zone__body p { margin-top: 12px; color: var(--muted); font-size: 15.5px; }

/* ----------------------------------------------------------- includes --- */
/* Five items: auto-fit at 258px gave four across and left one orphaned on a
   second row. A fixed 5-up keeps them on one line at desktop and steps down
   cleanly, so the list never ends on a lonely card. */
.incl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: var(--hair); margin-top: 48px; }
@media (max-width: 1100px) { .incl { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .incl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .incl { grid-template-columns: 1fr; } }
/* Four items (home page): 4-up, then 2 x 2, then one column. No orphan. */
.incl--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .incl--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .incl--4 { grid-template-columns: 1fr; } }
.incl__item { border-bottom: var(--hair); padding: 26px 20px 26px 0; display: flex; gap: 13px; align-items: flex-start; }
.incl__tick { color: var(--green); flex: none; margin-top: 3px; }
.incl__item h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.incl__item p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------- people --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  border: var(--hair); border-radius: var(--r-md);
  background: var(--surface-1); padding: 28px;
  transition: border-color .22s ease;
}
.card:hover { border-color: var(--green-40); }
.card__k {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
}
.card h3 { margin-top: 14px; font-size: 22px; }
.card p { margin-top: 10px; font-size: 15px; color: var(--muted); }

.roster { display: grid; grid-template-columns: repeat(5, 1fr); border-top: var(--hair); border-left: var(--hair); margin-top: 52px; }
.roster__p { border-right: var(--hair); border-bottom: var(--hair); padding: 26px 20px 28px; }
.roster__p h3 { font-size: 17px; }
@media (max-width: 1120px) { .roster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .roster { grid-template-columns: 1fr; } }
.roster__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green); margin-bottom: 12px;
}
.roster__p p { margin-top: 10px; font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------------- close CTA --- */
.close { position: relative; overflow: hidden; border-top: var(--hair); }
.close__media { position: absolute; inset: 0; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.close__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 8%, rgba(13,13,13,.92) 46%, rgba(13,13,13,.6) 100%);
}
.close__in { position: relative; z-index: 2; }

/* ------------------------------------------------------------- footer --- */
.ftr { border-top: var(--hair); padding-block: 64px 44px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }

.ftr__logo img { height: 54px; width: auto; margin-bottom: 20px; }
.ftr h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  margin-bottom: 16px;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 10px; font-size: 14.5px; }
.ftr a { color: var(--silver); text-decoration: none; }
.ftr a:hover { color: var(--white); }
.ftr address { font-style: normal; font-size: 14.5px; color: var(--muted); line-height: 1.7; }

.ftr__base {
  margin-top: 52px; padding-top: 24px; border-top: var(--hair);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------- placeholder marker --- */
/* Anything wired to unconfirmed content carries this so it cannot ship by
   accident. Removing the class is the launch checklist. See CONTENT-TODO.md. */
.todo { position: relative; }
.todo::after {
  content: "TODO";
  position: absolute; top: -7px; right: -7px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  background: var(--crimson); color: var(--white);
  padding: 2px 5px; border-radius: 3px;
  pointer-events: none;
}

/* ----------------------------------------------------- scroll reveals --- */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.js .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
}

/* ===================================================== Parallax feature ===
   The analysis overlay is drawn as inline SVG over the academy's own
   photography — the "green signal drawing onto live data" the brand hero
   doc calls for, rather than a screenshot of somebody else's UI.
   ======================================================================== */
.px { background: var(--surface-1); border-block: var(--hair); }
.px__grid {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (max-width: 980px) { .px__grid { grid-template-columns: 1fr; } }

.px__brand {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.px__brand strong { font-size: 21px; font-weight: 900; color: var(--white); letter-spacing: -0.02em; }
.px__brand span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  border: 1px solid var(--green-40); border-radius: 999px; padding: 4px 10px;
}

.px__feats { list-style: none; margin: 30px 0 0; padding: 0; border-top: var(--hair); }
.px__feats li {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px;
  padding: 15px 0; border-bottom: var(--hair);
  font-size: 15px; color: var(--silver);
}
.px__feats b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); padding-top: 4px;
}
@media (max-width: 520px) { .px__feats li { grid-template-columns: 1fr; gap: 4px; } }

/* --- the instrument frame --- */
.px__scope {
  position: relative; border: var(--hair); border-radius: var(--r-md);
  overflow: hidden; background: var(--bg);
}
.px__scope img { width: 100%; height: auto; display: block; filter: saturate(.55) contrast(1.1) brightness(.72); }
.px__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Readouts pinned to the frame, like a capture tool's HUD. */
.px__hud {
  position: absolute; z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(13,13,13,.82); border: 1px solid var(--surface-2);
  border-radius: 6px; padding: 7px 10px;
  color: var(--muted); line-height: 1.5;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.px__hud b { display: block; color: var(--green); font-weight: 500; font-size: 14px; letter-spacing: .02em; }
.px__hud--tl { top: 14px; left: 14px; }
.px__hud--br { right: 14px; bottom: 14px; }

.px__rec {
  position: absolute; z-index: 3; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--silver);
}
.px__rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); font-style: normal; }

.px__cap {
  margin: 12px 0 0;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* Draw the analysis on when the frame enters view. */
.px__draw { stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800); }
.js .px__scope.is-in .px__draw { animation: pxdraw 1.15s cubic-bezier(.3,.7,.3,1) forwards; }
.js .px__scope.is-in .px__draw--b { animation-delay: .18s; }
.js .px__scope.is-in .px__draw--c { animation-delay: .34s; }
@keyframes pxdraw { to { stroke-dashoffset: 0; } }

.px__joint { opacity: 0; }
.js .px__scope.is-in .px__joint { animation: pxpop .4s ease forwards; animation-delay: .8s; }
@keyframes pxpop { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .px__draw { stroke-dashoffset: 0; animation: none !important; }
  .px__joint { opacity: 1; animation: none !important; }
}

/* Inline links can't carry a corner badge without covering their own text. */
a.todo::after, .link.todo::after {
  position: static; margin-left: 7px;
  display: inline-block; vertical-align: 1px;
}

/* --- the rest of the proprietary stack, under the Parallax scope --------- */
.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 620px) { .stack { grid-template-columns: 1fr; } }
.stack__i {
  border: var(--hair); border-radius: var(--r-sm);
  background: var(--bg); padding: 16px 16px 18px;
}
.stack__i h4 { color: var(--white); font-size: 15px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.stack__i p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.stack__st {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--surface-2); border-radius: 999px; padding: 3px 8px; color: var(--muted);
}
.stack__st--live { color: var(--green); border-color: var(--green-40); }

/* ======================================================== programs page ===
   Price is only defensible next to what it buys, so every tier is a full
   panel rather than a row in a table.
   ======================================================================== */
.phero { padding-block: clamp(140px, 18vh, 200px) clamp(48px, 7vw, 76px); border-bottom: var(--hair); }
.phero h1 { font-size: clamp(38px, 5.6vw, 70px); max-width: 18ch; }

.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  border: var(--hair); border-radius: var(--r-md); background: var(--surface-1);
  padding: 30px 28px 32px; display: flex; flex-direction: column;
  position: relative; transition: border-color .2s ease;
}
.tier:hover { border-color: var(--green-40); }
.tier--feature { border-color: var(--green-40); background: var(--green-08); }

.tier__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green); margin-bottom: 14px;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.tier__k em { font-style: normal; color: var(--muted); }
.tier h3 { font-size: clamp(23px, 2.3vw, 30px); }

.tier__price {
  display: flex; align-items: baseline; gap: 9px; margin: 16px 0 4px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.tier__price b { font-size: clamp(30px, 3.3vw, 42px); font-weight: 500; color: var(--white); letter-spacing: -.03em; }
.tier__price span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.tier__note { font-size: 14px; color: var(--muted); margin: 8px 0 0; }

.tier ul { list-style: none; margin: 22px 0 0; padding: 0; border-top: var(--hair); }
.tier li {
  padding: 11px 0 11px 24px; border-bottom: var(--hair);
  font-size: 14.5px; line-height: 1.45; color: var(--silver); position: relative;
}
.tier li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 9px; height: 1px; background: var(--green);
}
.tier .btn { margin-top: 26px; align-self: flex-start; }
.tier__foot { margin-top: auto; padding-top: 22px; }

/* --- schedule / calendar tables ---------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px; }
.tbl caption {
  text-align: left; padding-bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
}
.tbl th, .tbl td { text-align: left; padding: 14px 18px 14px 0; border-bottom: var(--hair); vertical-align: top; }
.tbl th {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--surface-2);
}
.tbl td:first-child { color: var(--white); font-weight: 500; white-space: nowrap; }
.tbl .datum { color: var(--green); }
.tbl-wrap { overflow-x: auto; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; margin-top: 46px; }
.note {
  border: var(--hair); border-left: 2px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-1); padding: 22px 22px 24px;
}
.note h3 { font-size: 16px; }
.note p { margin: 9px 0 0; font-size: 14px; color: var(--muted); }

/* ============================================================ sub-pages ===*/
.crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.crumb a { color: var(--green); text-decoration: none; }

/* diagnostic capture list */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: var(--hair); margin-top: 44px; }
@media (max-width: 780px) { .caps { grid-template-columns: 1fr; } }
.cap { border-bottom: var(--hair); padding: 24px 30px 26px 0; display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.cap__n { font-family: var(--font-mono); font-size: 12px; color: var(--green); padding-top: 4px; }
.cap h3 { font-size: 16.5px; }
.cap p { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }

/* code of grit */
.grit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 820px) { .grit { grid-template-columns: 1fr; } }
.grit__i {
  border: var(--hair); border-radius: var(--r-md); padding: 30px 26px 34px;
  background: var(--surface-1);
}
.grit__i h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.grit__i p { color: var(--muted); font-size: 15px; margin: 0; }
.grit__n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--green); display: block; margin-bottom: 18px;
}

/* formula callout */
.formula {
  border: var(--hair); border-radius: var(--r-md); background: var(--surface-1);
  padding: 30px; margin-top: 36px;
}
.formula code {
  display: block; font-family: var(--font-mono); font-size: clamp(13px, 1.4vw, 16px);
  color: var(--green); line-height: 1.7; letter-spacing: -.01em;
}
.formula__legend { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 680px) { .formula__legend { grid-template-columns: 1fr; } }
.formula__legend div { border-left: 2px solid var(--surface-2); padding-left: 16px; }
.formula__legend b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.formula__legend p { margin: 0; font-size: 14px; color: var(--muted); }

/* FAQ */
.qa { border-top: var(--hair); margin-top: 44px; }
.qa details { border-bottom: var(--hair); }
.qa summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; color: var(--white);
  letter-spacing: -.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 32px;
  width: 11px; height: 1px; background: var(--green);
  box-shadow: 0 0 0 0 transparent;
}
.qa summary::before {
  content: ""; position: absolute; right: 11px; top: 27px;
  width: 1px; height: 11px; background: var(--green);
  transition: opacity .18s ease, transform .18s ease;
}
.qa details[open] summary::before { opacity: 0; }
.qa details > div { padding: 0 60px 26px 0; color: var(--muted); font-size: 15.5px; }
.qa details > div p:last-child { margin-bottom: 0; }

/* big athlete/result list */
.wins { border-top: var(--hair); margin-top: 46px; }
.win {
  display: grid; grid-template-columns: 150px 1fr; gap: 26px;
  padding: 30px 0; border-bottom: var(--hair); align-items: baseline;
}
@media (max-width: 720px) { .win { grid-template-columns: 1fr; gap: 8px; } }
.win__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4vw, 50px); font-weight: 500; color: var(--green);
  line-height: 1; letter-spacing: -.04em;
}
.win h3 { font-size: clamp(19px, 1.9vw, 24px); }
.win p { margin: 8px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }

/* ======================================================= the Zone Map ====
   Axes, anchors and the diagonal come from RYP-FOUR-ZONES.md (canonical).
   Colour note: the book renders each zone in its own hue. Tier 2 forbids a
   second accent, so the zones are differentiated by green INTENSITY along the
   diagonal instead — dimmest at Construction, full signal at Performance,
   which also reads as "closer to the real thing". Crimson is used only for the
   Danger Zone, which is precisely the semantic warning the constitution
   reserves it for.
   ======================================================================== */
.zm { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4vw, 60px); align-items: start; margin-top: 52px; }
@media (max-width: 1000px) { .zm { grid-template-columns: 1fr; } }

.zm__stage { position: relative; border: var(--hair); border-radius: var(--r-md); background: var(--surface-1); padding: 22px; }
.zm__svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }

.zm__axis {
  font-family: var(--font-mono); font-size: 3.2px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; fill: var(--silver);
}
.zm__axis-q { letter-spacing: .14em; fill: var(--slate); }
.zm__grid  { stroke: var(--surface-2); stroke-width: .3; }
.zm__frame { stroke: var(--surface-2); stroke-width: .6; fill: none; }

/* --- the two traps: corner cells, labelled, no heavy fill until chosen --- */
.zm__trap {
  font-family: var(--font-mono); font-size: 2.9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-anchor: middle; pointer-events: none;
  transition: fill .2s ease;
}
.zm__trap--danger  { fill: var(--crimson); }
.zm__trap--comfort { fill: var(--ice); }
.zm__cell { fill: transparent; transition: fill .2s ease; }
.zm__cell--danger  { fill: rgba(220, 38, 38, .05); }
.zm__cell--comfort { fill: rgba(120, 166, 204, .05); }
.zm__node--trap:hover .zm__trap--danger,
.zm__node--trap[aria-pressed="true"] .zm__trap--danger { fill: var(--crimson); }
.zm__node--trap:hover .zm__trap--comfort,
.zm__node--trap[aria-pressed="true"] .zm__trap--comfort { fill: var(--ice); }
.zm__node--trap:hover .zm__cell--danger,
.zm__node--trap[aria-pressed="true"] .zm__cell--danger { fill: rgba(220, 38, 38, .10); }
.zm__node--trap:hover .zm__cell--comfort,
.zm__node--trap[aria-pressed="true"] .zm__cell--comfort { fill: rgba(120, 166, 204, .10); }

/* --- the four zones, set as the cover sets them: an outlined cell carrying an
       index, a large symbol and the zone name. The stepping of the boxes IS the
       diagonal, so no dashed rule is drawn over it. --------------------------- */
.zm__node { cursor: pointer; }
.zm__node:focus { outline: none; }
.zm__hit  { fill: transparent; }

.zm__box {
  fill: none; stroke: var(--green); stroke-width: .5;
  /* the four read as a sequence: faint at Construction, full at Performance */
  opacity: calc(.42 + var(--i) * .19);
  transition: opacity .2s ease, stroke-width .2s ease;
}
.zm__idx {
  font-family: var(--font-mono); font-size: 2.5px; letter-spacing: .14em;
  fill: var(--slate); pointer-events: none;
}
.zm__sym {
  font-family: var(--font-sans); font-weight: 700; font-size: 9.4px; letter-spacing: -.02em;
  fill: var(--white); text-anchor: middle; pointer-events: none; transition: fill .2s ease;
}
.zm__zname {
  /* CONSTRUCTION is the longest at 12 characters; sized so it sits inside the
     21.8-unit cell rather than breaking its edges. */
  font-family: var(--font-mono); font-size: 2.05px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--muted); text-anchor: middle; pointer-events: none;
  transition: fill .2s ease;
}
.zm__node:hover .zm__box, .zm__node:focus-visible .zm__box { opacity: 1; stroke-width: .75; }
.zm__node:hover .zm__zname, .zm__node:focus-visible .zm__zname { fill: var(--white); }
.zm__node[aria-pressed="true"] .zm__box { opacity: 1; stroke-width: .95; }
.zm__node[aria-pressed="true"] .zm__cell { fill: rgba(0, 175, 81, .09); }
.zm__node[aria-pressed="true"] .zm__sym { fill: var(--green); }
.zm__node[aria-pressed="true"] .zm__zname { fill: var(--white); }

/* A footnote under the whole map, not inside either column — it answers the
   objection the grid raises in a parent's head the moment they see it. */
.zm__note {
  margin: clamp(28px, 3.5vw, 44px) auto 0; max-width: 74ch; text-align: center;
  font-size: 15px; line-height: 1.65; color: var(--muted);
  border-top: 1px solid var(--surface-2); padding-top: clamp(22px, 2.6vw, 32px);
}
.zm__hint { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* --- the detail panel ---------------------------------------------------- */
.zm__panel { border: var(--hair); border-radius: var(--r-md); background: var(--surface-1); padding: 30px 28px 32px; position: sticky; top: 100px; }
.zm__persona { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 10px; }
.zm__persona::before { content: ""; width: 20px; height: 1px; background: var(--green); }
.zm__panel h3 { font-size: clamp(26px, 3vw, 36px); margin: 14px 0 0; }
.zm__lede { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--silver); }
.zm__quote { margin: 20px 0 0; padding-left: 18px; border-left: 2px solid var(--green); font-size: 15.5px; line-height: 1.5; color: var(--white); }

.zm__stats { list-style: none; margin: 24px 0 0; padding: 0; border-top: var(--hair); }
.zm__stats li { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 11px 0; border-bottom: var(--hair); font-size: 14.5px; color: var(--silver); }
.zm__stats b { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding-top: 3px; }
@media (max-width: 480px) { .zm__stats li { grid-template-columns: 1fr; gap: 3px; } }

.zm__where { margin-top: 22px; font-size: 14px; color: var(--muted); }
.zm__where strong { color: var(--white); }

/* No-JS / no-SVG fallback: every zone panel simply stacks and reads. */
.zm__all { display: grid; gap: 18px; }
.js .zm__all { display: none; }
.js .zm__panel-live { display: block; }
.zm__panel-live { display: none; }

/* --- the personas strip -------------------------------------------------- */
.pz { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
@media (max-width: 980px) { .pz { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pz { grid-template-columns: 1fr; } }
.pz__i { border: var(--hair); border-radius: var(--r-md); background: var(--surface-1); padding: 24px 20px 26px; }
.pz__i--meta { border-color: var(--green-40); background: var(--green-08); }
.pz__c { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--green); }
.pz__i h3 { font-size: 19px; margin: 12px 0 0; }
.pz__i p { margin: 9px 0 0; font-size: 14px; color: var(--muted); }

/* --- traps --------------------------------------------------------------- */
.trap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 820px) { .trap { grid-template-columns: 1fr; } }
.trap__i { border: var(--hair); border-radius: var(--r-md); padding: 26px 24px 28px; background: var(--surface-1); }
.trap__i--danger { border-left: 2px solid var(--crimson); }
.trap__i--comfort { border-left: 2px solid var(--ice); }
.trap__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* crimson at 10.5px is ~3.7:1 on surface-1 — the left border carries it instead */
.trap__i--danger .trap__k { color: var(--muted); }
.trap__i h3 { font-size: 21px; margin: 12px 0 0; }
.trap__i p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

/* --- the two traps, now selectable alongside the four zones -------------- */
.zm__node--trap { cursor: pointer; }

.zm__node--trap:hover .zm__trap, .zm__node--trap[aria-pressed="true"] .zm__trap { fill: var(--white); }

/* Panel tones. Crimson can't carry small text at 4.5:1 on surface-1, so the
   warning rides on the rule and the marker; the text itself stays legible. */
.zm__panel--danger .zm__persona::before { background: var(--crimson); }
.zm__panel--danger .zm__quote { border-left-color: var(--crimson); }
.zm__panel--comfort .zm__persona::before { background: var(--ice); }
.zm__panel--comfort .zm__quote { border-left-color: var(--ice); }
.zm__panel--danger .zm__persona { color: var(--muted); }
.zm__panel--comfort .zm__persona { color: var(--ice); }
.zm__panel--danger .zm__stats b, .zm__panel--comfort .zm__stats b { color: var(--muted); }

/* Roster column counts are pinned per page so a roster never orphans a card:
   the homepage runs six people across three, the team page eight across four. */
/* Two columns of five — the roster reads as a list of people rather than a
   wall of tiles, and each bio gets the width to breathe. */
.roster--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .roster--2 { grid-template-columns: 1fr; } }
.roster--3 { grid-template-columns: repeat(3, 1fr); }
.roster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .roster--3, .roster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .roster--3, .roster--4 { grid-template-columns: 1fr; } }

/* ================================================== personas accordion ===
   Native <details> so the column folds out without JS and carries its own
   keyboard and screen-reader semantics.
   ======================================================================== */
.pa { border-top: var(--hair); }
.pa:last-of-type { border-bottom: var(--hair); }

.pa__row { cursor: pointer; list-style: none; padding: 26px 44px 26px 0; position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: baseline; }
.pa__row::-webkit-details-marker { display: none; }
.pa__row:hover .pa__name { color: var(--green); }

.pa__code { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--green); padding-top: 6px; }
.pa__name { font-size: clamp(24px, 2.7vw, 34px); font-weight: 900; color: var(--white); letter-spacing: -.03em; line-height: 1.04; transition: color .16s ease; display: block; }
.pa__zone { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.pa__hint { display: block; margin-top: 10px; font-size: 15.5px; color: var(--silver); max-width: 58ch; }

/* the plus/minus affordance */
.pa__row::after, .pa__row::before { content: ""; position: absolute; right: 6px; background: var(--green); transition: opacity .18s ease, transform .18s ease; }
.pa__row::after  { top: 40px; width: 14px; height: 1.5px; }
.pa__row::before { top: 33px; right: 12.25px; width: 1.5px; height: 14px; }
.pa[open] .pa__row::before { opacity: 0; transform: rotate(90deg); }

.pa__body { padding: 0 0 34px 84px; }
@media (max-width: 700px) {
  .pa__row { grid-template-columns: 1fr; gap: 8px; }
  .pa__body { padding-left: 0; }
}

.pa__kit { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.pa__body h4 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 900; color: var(--white); letter-spacing: -.02em; margin: 10px 0 0; }
.pa__body > p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--silver); max-width: 62ch; }
.pa__note { color: var(--muted) !important; font-size: 15px !important; }

.pa__steps { list-style: none; margin: 26px 0 0; padding: 0; border-top: var(--hair); max-width: 68ch; }
.pa__steps li { display: grid; grid-template-columns: 108px 1fr; gap: 18px; padding: 13px 0; border-bottom: var(--hair); }
.pa__steps b { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding-top: 4px; }
.pa__steps strong { color: var(--white); font-size: 15.5px; font-weight: 700; display: block; }
.pa__steps span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .pa__steps li { grid-template-columns: 1fr; gap: 4px; } }

.pa--meta .pa__code, .pa--meta .pa__kit { color: var(--silver); }
.pa--meta .pa__row::after, .pa--meta .pa__row::before { background: var(--silver); }

/* Full-bleed photographic breather between sections. */
.band { position: relative; overflow: hidden; border-block: var(--hair); }
.band img { width: 100%; height: clamp(260px, 34vw, 440px); object-fit: cover; object-position: 50% 55%; display: block; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,13,13,.72) 0%, rgba(13,13,13,.12) 45%, rgba(13,13,13,.58) 100%); pointer-events: none; }
.band figcaption {
  position: absolute; left: var(--gutter); bottom: 22px; z-index: 2; margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--silver);
}

/* ------------------------------------------------- hero video (desktop) ---
   The still hero stays in the DOM as the base layer and the fallback; the
   clips fade in over it only when JS decides they should load. The existing
   scrim is a ::after on .hero__media, so it keeps painting on top unchanged.
   ======================================================================== */
.hero__vid { position: absolute; inset: 0; overflow: hidden; }
.hero__v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero__v.is-on { opacity: 1; }
/* Never on a phone: the mobile hero is the art-directed portrait still, and
   the crop the clips were cut for is a desktop letterbox. */
@media (max-width: 899px) { .hero__vid { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__vid { display: none; } }

/* A looping swing inside a figure slot. Same rules as the hero video: desktop
   only, motion allowed only, and the poster carries it otherwise. */
.figure--vid { position: relative; }
.figure--vid video { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 9 / 12; }
.figure--vid img { width: 100%; display: block; aspect-ratio: 9 / 12; object-fit: cover; }
.figure--vid video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.figure--vid video.is-on { opacity: 1; }
@media (max-width: 899px) { .figure--vid video { display: none; } }
@media (prefers-reduced-motion: reduce) { .figure--vid video { display: none; } }

/* --- honor roll ---------------------------------------------------------- */
/* Two columns of award tables. Each table is a category; the year column is
   mono/green so a reader can scan chronology without reading names. */
.roll { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 8px 56px; margin-top: 8px; }
.roll .tbl { margin-top: 40px; }
.roll .tbl td:first-child { width: 4.5em; }
.roll__tot {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding-top: 14px;
}
.roll__am { color: var(--muted); font-size: 13px; }

/* --- proof band, roster variant ----------------------------------------- */
/* Each cell now carries the names behind its numeral, so the band is two wide
   columns rather than a row of bare figures. Beats the base .proof grid on
   specificity (0,2,0 vs 0,1,0) regardless of source order. */
/* Four award columns: the POY categories across the top, State Opens and the
   two unrostered figures beneath. Beats the base .proof grid on specificity
   (0,2,0 vs 0,1,0) regardless of source order. */
.proof.proof--awards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .proof.proof--awards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .proof.proof--awards { grid-template-columns: 1fr; } }
.proof--awards .proof__cell { min-height: 0; padding: 30px 24px 28px; }
.proof--awards .proof__l { margin-top: 13px; padding-top: 0; min-height: 3.2em; }
/* base .proof__l pushes itself to the bottom with margin-top:auto; with a
   roster underneath it has to sit directly under the numeral instead. */

.proof__roll {
  list-style: none; margin: 24px 0 0; padding: 20px 0 0;
  border-top: var(--hair); display: grid; gap: 9px;
}
/* One row per title, newest first. The year is a fixed left column so the
   chronology scans on position rather than colour; the category rides with the
   name because two titles can share a year (Kathryn took junior girls and
   women's POY in 2023). */
.proof__roll li { display: grid; grid-template-columns: 3.4em 1fr; gap: 0 10px; align-items: baseline; }
.proof__yr { color: var(--white); font-size: 12.5px; line-height: 1.45; }
.proof__who { color: var(--white); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.proof__cat { color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.proof__none {
  margin: 24px 0 0; padding: 20px 0 0; border-top: var(--hair);
  color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 34ch;
}

/* --- honor roll as a season timeline ------------------------------------ */
/* One row per season, the year in a fixed left rail so the eye runs down the
   chronology and a heavy year (2023 took five) reads as a visible bulge. */
.yr { list-style: none; margin: 46px 0 0; padding: 0; border-top: var(--hair); }
.yr__row {
  display: grid; grid-template-columns: 148px 1fr; gap: 0 40px;
  padding: 26px 0; border-bottom: var(--hair);
}
.yr__y { display: flex; flex-direction: column; gap: 6px; }
.yr__y .datum {
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1;
  color: var(--green); letter-spacing: -0.03em;
}
.yr__n {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.yr__n::after { content: " titles"; }
.yr__row:has(.yr__list li:only-child) .yr__n::after { content: " title"; }
.yr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yr__list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.yr__who { color: var(--white); font-size: 15px; font-weight: 500; min-width: 11em; }
.yr__what { color: var(--muted); font-size: 12.5px; }
@media (max-width: 700px) {
  .yr__row { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .yr__y { flex-direction: row; align-items: baseline; gap: 12px; }
  .yr__who { min-width: 0; }
}
.yr__p { color: var(--slate); font-size: 11px; }

/* --- the book -----------------------------------------------------------
   Restraint is what makes this read as a book. An earlier pass used the
   literal spine ratio from the print PDF (0.227) at a 26-degree turn, which
   produced a slab: the fore-edge became the biggest surface on screen and the
   cream page block out-shouted the cover. A real product shot of a paperback
   turns barely at all and shows the page block as a sliver, dimmer than the
   cover, not brighter. Depth here is a visual value, not the printed one. */
.split--book { align-items: center; gap: clamp(40px, 6vw, 92px); }

.bookfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.book {
  --w: clamp(200px, 26vw, 320px);
  --h: calc(var(--w) * 1.5);          /* 6:9 */
  --d: calc(var(--w) * 0.085);        /* a sliver, not the printed 0.227 */
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: perspective(2000px) rotateY(-15deg) rotateX(-1.5deg);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
  cursor: pointer; outline: none; display: block;
}
.book:hover, .book:focus-visible { transform: perspective(2000px) rotateY(-6deg) rotateX(-1deg); }
.book:focus-visible { outline: 2px solid var(--green); outline-offset: 12px; }

.book__face {
  position: absolute; inset: 0; display: block;
  border-radius: 1px 3px 3px 1px; overflow: hidden;
  box-shadow: 0 30px 58px rgba(0,0,0,.62), 0 9px 20px rgba(0,0,0,.46);
}
.book__face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The roll where the cover bends into the spine — narrow and gentle. */
.book__gutter {
  position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
  border-radius: 1px 0 0 1px; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.13) 45%, transparent 100%);
}
/* A hairline of light on the outer edge of the board. */
.book__sheen {
  position: absolute; top: 0; bottom: 0; right: 0; width: 1.5px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(255,255,255,.16));
}

/* Spine: a dark sliver, barely turned into view. */
.book__spine {
  position: absolute; top: 0; left: 0; width: var(--d); height: 100%;
  background: #0e0c09;   /* the cover ground, one step down */
  transform: rotateY(-90deg); transform-origin: left center;
}
/* Fore-edge: dimmer than the cover, so it recedes instead of competing. */
.book__pages {
  position: absolute; top: .8%; right: 0; width: var(--d); height: 98.4%;
  transform: rotateY(90deg); transform-origin: right center;
  background:
    linear-gradient(to right, rgba(0,0,0,.34), rgba(0,0,0,.06)),
    repeating-linear-gradient(to right,
      #a8a397 0 1px, #c9c4b7 1px 2px, #98938a 2px 3px);
}
/* Head: just enough to say the object is solid. */
.book__head {
  position: absolute; top: 0; left: .8%; width: 98.4%; height: var(--d);
  transform: rotateX(90deg); transform-origin: top center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.14)),
    repeating-linear-gradient(to bottom,
      #a8a397 0 1px, #c4bfb2 1px 2px, #98938a 2px 3px);
}

/* The floor it stands on. */
.book::after {
  content: ""; position: absolute; left: 5%; right: -5%; bottom: -5%;
  height: 14px; background: rgba(0,0,0,.58);
  filter: blur(14px); transform: translateZ(-1px); z-index: -1;
}

.book::before {
  content: "thegolftextbook.com \2197";
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); white-space: nowrap;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.book:hover::before, .book:focus-visible::before { opacity: 1; }

.bookfig__c {
  margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); text-align: center;
}

@media (max-width: 900px) {
  .split--book { gap: 44px; }
  .bookfig { margin-top: 8px; }
  .book { transform: perspective(2000px) rotateY(-11deg) rotateX(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .book { transition: none; transform: perspective(2000px) rotateY(-11deg) rotateX(-1deg); }
  .book:hover, .book:focus-visible { transform: perspective(2000px) rotateY(-11deg) rotateX(-1deg); }
}

/* --- philosophy hero carrying the book ----------------------------------- */
.phero--book {
  /* The clip is portrait against a full-bleed wide hero, so cover scales it
     ~2.3x and height is the only dial that buys back frame: at 722px tall you
     saw 32% of the swing, at ~1150px you see just over half — head through
     ball. Width stays 100%, which is the whole point. */
  padding-block: clamp(150px, 19vh, 210px) clamp(56px, 8vw, 88px);
  min-height: clamp(1040px, 100vh, 1320px);
  display: flex; align-items: center;
}
.phero--book > .wrap { width: 100%; }
.phero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.phero--book h1 { max-width: 15ch; }
.phero--book .lede { max-width: 46ch; }

.phero__book {
  margin-top: 26px; padding-top: 20px; border-top: var(--hair);
  font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52ch;
}
.phero__book strong { color: var(--white); font-weight: 700; }
.phero__book a {
  display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.phero__book a:hover { border-bottom-color: var(--green); }

@media (max-width: 980px) {
  .phero__in { grid-template-columns: 1fr; gap: 44px; }
  .bookfig { align-items: flex-start; }
}

/* A hero reduced to its breadcrumb carries no visual weight, so the section
   after it should not open with the full --section band on top of it. */
.phero--bare + .section { padding-top: clamp(34px, 4.5vw, 58px); }
/* A page hero followed immediately by a snug section still stacked the hero's
   own bottom padding on top of it. */
.phero + .section--snug { padding-top: clamp(26px, 3.5vw, 44px); }

/* Two full --section bands meeting at a hairline stack to ~300px of dead
   space. Where neither side needs that much air, snug halves it. */
.section--snug { padding-block: clamp(36px, 5vw, 70px); }

/* --- the "why a persona" accordion ---------------------------------------
   Sits above the four personas as their preface, so it is marked apart from
   them: green rule on the left, and a Why chip instead of a zone code. */
.pa--why { border-left: 2px solid var(--green); padding-left: 18px; margin-bottom: 30px; }
.pa__code--why {
  font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase;
  display: grid; place-items: center;
}
.pa--why .pa__body p { margin-top: 14px; max-width: 68ch; }
.pa__pull {
  font-size: 17px; line-height: 1.45; color: var(--white); font-weight: 500;
  padding-left: 16px; border-left: 2px solid var(--surface-2); margin-top: 20px !important;
}
.pa__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: 26px !important; padding-top: 20px; border-top: var(--hair);
}
.pa__cta span { font-size: 13.5px; color: var(--muted); max-width: 46ch; }

/* --- philosophy hero backdrop --------------------------------------------
   Not another photograph. The page's own subject, drawn oversized and dimmed:
   the four-zone lattice stepping off the top-right corner, the same figure the
   book's back cover carries. Pure SVG — no image weight — and it sits behind
   the book without competing with it, which a facility photo would.
   The fade is the canvas vignette the constitution allows, used as a mask so
   the lattice dissolves into #0D0D0D rather than ending on a hard edge. */
.phero--book { position: relative; overflow: hidden; }
.phero--book > .wrap { position: relative; z-index: 1; }

.phero__lattice {
  position: absolute; top: -18%; right: -12%; width: min(78vw, 1000px); aspect-ratio: 1;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side at 62% 38%, #000 18%, transparent 78%);
          mask-image: radial-gradient(closest-side at 62% 38%, #000 18%, transparent 78%);
}
.phero__lattice svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pl__grid  { stroke: var(--green); stroke-width: .18; opacity: .30; }
.pl__frame { stroke: var(--green); stroke-width: .3; fill: none; opacity: .26; }
.pl__cell  { stroke: var(--green); stroke-width: .42; fill: none; opacity: .46; }

@media (max-width: 980px) {
  .phero__lattice { top: -10%; right: -34%; width: 120vw; }
}
@media (prefers-reduced-motion: reduce) { .phero__lattice { opacity: .8; } }

/* The Practice DNA test is the page's real conversion — a lead magnet that
   returns a diagnosis and captures an email. It gets the primary treatment,
   not the ghost one, and a mono chip carrying the two objections it answers
   before anyone asks: what does it cost, how long does it take. */
.pa__free {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  border: 1px solid rgba(0,175,81,.35); border-radius: 999px; padding: 5px 11px;
  white-space: nowrap;
}

/* --- edit mode (localhost only) ------------------------------------------
   Styling for assets/js/edit.js. Scoped under .ed-on so none of it can touch
   a normal page render; the script itself refuses to run off localhost. */
.ed {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-1); border: 1px solid var(--green); border-radius: 999px;
  padding: 9px 10px 9px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.6);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ed strong { color: var(--green); font-weight: 500; }
.ed__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.ed__page { color: var(--slate); text-transform: none; letter-spacing: .04em; }
.ed__n { color: var(--white); }
.ed__msg { color: var(--green); text-transform: none; letter-spacing: .03em; max-width: 30ch; }
.ed--bad { border-color: var(--crimson); }
.ed--bad .ed__msg { color: var(--crimson); }
.ed__done {
  border: var(--hair); border-radius: 999px; background: var(--bg); color: var(--silver);
  font: inherit; text-transform: uppercase; padding: 6px 13px; cursor: pointer;
}
.ed__done:hover { border-color: var(--green); color: var(--green); }

.ed-on [data-ed][contenteditable] {
  outline: 1px dashed rgba(0,175,81,.35); outline-offset: 3px; border-radius: 2px;
  transition: outline-color .15s ease, background .3s ease;
  /* Browsers switch contenteditable="plaintext-only" to pre-wrap, which exposes
     the source file's own newlines and indentation as rendered whitespace — the
     text goes ragged the moment edit mode turns on, and looks nothing like the
     published page. Force it back so editing is honest about the result. */
  white-space: normal;
}
.ed-on [data-ed][contenteditable]:hover { outline-color: rgba(0,175,81,.7); }
.ed-on [data-ed][contenteditable]:focus {
  outline: 2px solid var(--green); background: rgba(0,175,81,.06);
}
.ed-on .ed--saved { background: rgba(0,175,81,.22) !important; }
.ed-on .ed--fail  { outline-color: var(--crimson) !important; background: rgba(220,38,38,.14); }

/* --- differentiators ------------------------------------------------------
   A numbered rail: the count is information here, because the claim is that
   there are five specific things, not a vague "holistic approach". */
.diff { list-style: none; margin: 30px 0 0; padding: 0; border-top: var(--hair); }
.diff li {
  display: grid; grid-template-columns: 34px 1fr; gap: 0 16px;
  padding: 18px 0; border-bottom: var(--hair); align-items: start;
}
.diff b {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em;
  color: var(--green); padding-top: 3px;
}
.diff strong { display: block; font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
.diff span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* --- the commitment contract ---------------------------------------------
   The parent-facing half of the argument, so it gets its own panel rather than
   sitting as one of three equal steps. "Room to swing a wedge" is the line that
   answers the objection nobody says out loud — that this needs a home setup. */
.split--commit { align-items: start; gap: clamp(36px, 5vw, 72px); }

.commit {
  border: var(--hair); border-radius: var(--r-md); background: var(--surface-1);
  padding: 30px 28px 26px;
}
.commit__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green); margin: 0;
}
.commit__big {
  margin: 12px 0 0; font-size: clamp(22px, 2.4vw, 29px); font-weight: 700;
  color: var(--white); letter-spacing: -.02em; line-height: 1.1;
}
.commit__p { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); max-width: 34ch; }

.commit__l { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: var(--hair); display: grid; gap: 16px; }
.commit__l li { display: grid; gap: 4px; }
.commit__l b { font-size: 14.5px; color: var(--white); font-weight: 700; }
.commit__l span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.commit__tag {
  margin: 22px 0 0; padding-top: 16px; border-top: var(--hair);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}

/* --- swing behind the hero -----------------------------------------------
   A near-black cover on a near-black page has no silhouette. Lighting tricks
   treat the symptom; a lit backdrop fixes the cause, and it is real content
   rather than a glow.

   It has to span the hero, not sit in the book's column: the book fills that
   column, so a portrait clip behind it showed course and no player. Full width
   gives the swing somewhere to be. The scrim is weighted left so the headline
   keeps a clean ground while the right stays open. */
.bookbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bookbg__p, .bookbg__v {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Lower Y shows more of the top of the frame — at 42% his head was cropped
     by the header. */
  /* At this height the visible band is ~444 of the clip's 960px, which is just
     enough to hold the cap at y255 and the ball at y675 in the same frame.
     Y=46% is what centres it on those two — it is a tight fit, so if the hero
     ever gets shorter the ball is the first thing to fall out. */
  object-position: 50% 46%;
  filter: grayscale(.05) contrast(1.02) brightness(1.34);
}
.bookbg__v { opacity: 0; transition: opacity .8s ease; }
.bookbg__v.is-on { opacity: 1; }
/* Two passes: a flat floor so nothing is ever fully bright, and a left-weighted
   wash so the headline column stays near-black. */
.bookbg__scrim {
  position: absolute; inset: 0;
  background:
    /* A soft plate under the triad column. Lifting the photo this far put the
       ring's caption on sunlit grass, where it stopped being readable — this
       puts the ground back under it without a visible box. */
    radial-gradient(40% 30% at 80% 30%, rgba(13,13,13,.84) 0%, rgba(13,13,13,.5) 58%,
                                        rgba(13,13,13,0) 100%),
    linear-gradient(to right, rgba(13,13,13,.88) 0%, rgba(13,13,13,.7) 34%,
                              rgba(13,13,13,.22) 58%, rgba(13,13,13,.16) 100%),
    linear-gradient(to bottom, rgba(13,13,13,.52), rgba(13,13,13,.06) 34%,
                               rgba(13,13,13,.12) 62%, rgba(13,13,13,.8));
}
.phero--book > .wrap, .bookfig .book { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .bookbg__scrim { background: rgba(13,13,13,.86); }
}
@media (prefers-reduced-motion: reduce) { .bookbg__v { display: none; } }

/* --- restored 2026-09-14 -------------------------------------------------
   Both rules below were collateral from an earlier block replacement in this
   file: a range delete between two comment markers took out whatever had been
   appended between them. Re-added here, at the end, where nothing replaces. */

/* Visually hidden, still read by screen readers and search. Used where a page
   needs an h1 for its document outline but the design shows no headline. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- crew: the staff grouped by discipline -------------------------------
   A label rail on the left, the people beside it — the same device the honour
   roll uses for seasons, so the two pages read as one system. */
.crew { margin-top: 52px; border-top: var(--hair); }
.crew__g {
  display: grid; grid-template-columns: 232px 1fr; gap: 0 44px;
  padding: 34px 0; border-bottom: var(--hair);
}
.crew__k h3 { font-size: 19px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
.crew__k p { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); max-width: 30ch; }
.crew__n {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin-top: 14px !important;
}
.crew__p { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--surface-2); }
.crew__p .roster__p { background: var(--bg); border: 0; padding: 20px 22px 22px; margin: 0; }
.crew__p > .roster__p:only-child { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .crew__g { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .crew__k p { max-width: none; }
  .crew__n { margin-top: 10px !important; }
}
@media (max-width: 620px) { .crew__p { grid-template-columns: 1fr; } }

/* A page that opens straight into its first section: clear the sticky header,
   nothing more. Used where the breadcrumb carries the page's place instead of
   a hero band. */
.section--top { padding-block: clamp(104px, 13vh, 132px) clamp(44px, 6vw, 72px); }
.crumb--head { margin-bottom: 18px; }

/* A page hero carrying a portrait clip beside its copy. */
.phero--split .phero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.phero--split h1 { max-width: 16ch; }
.phero--split .lede { max-width: 48ch; }
.phero--split .figure--vid { margin: 0; }
@media (max-width: 900px) {
  .phero--split .phero__in { grid-template-columns: 1fr; gap: 36px; }
  .phero--split .figure--vid { max-width: 320px; }
}

/* --- two programs ---------------------------------------------------------
   Academy Winter and Year-Round are different commitments, not two points on
   one scale, so each gets its own header and its own pair of tiers rather than
   four cards in a row that a parent has to sort out for themselves. */
.prog { display: grid; gap: clamp(48px, 7vw, 86px); margin-top: 40px; }
.prog__g { display: grid; gap: 26px; }
.prog__h { border-top: 2px solid var(--green); padding-top: 20px; max-width: 62ch; }
.prog__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green); margin: 0;
}
.prog__h h3 {
  margin: 10px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 900;
  letter-spacing: -.02em; color: var(--white);
}
.prog__when {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--silver);
}
.prog__d { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.prog .tiers { margin-top: 0; }

/* --- the triad: swing / body / mind ---------------------------------------
   Three equal arcs, because the argument is that all three are built at once
   and in equal measure — an unequal chart would say something untrue. Green at
   three intensities rather than three hues: the constitution allows one accent,
   and value does the separating.

   Circumference at r=34 is 213.63; a third is 71.21. Each arc is drawn as a
   dashed circle rotated to its position. */
.triad { display: grid; gap: 20px; justify-items: center; }
.triad__svg { width: clamp(170px, 20vw, 224px); height: auto; display: block; overflow: visible; }

.triad__ring { transform: rotate(-90deg); transform-origin: 50px 50px; }
.triad__seg {
  fill: none; stroke-width: 15; cursor: pointer; outline: none;
  stroke-dasharray: 69.2 144.4;          /* a third, with a 2-unit gap */
  transition: stroke-width .2s ease, opacity .2s ease, stroke .2s ease;
}
.triad__seg[data-part="swing"] { stroke: var(--green); stroke-dashoffset: 0; }
.triad__seg[data-part="body"]  { stroke: var(--silver); stroke-dashoffset: -71.21; }
.triad__seg[data-part="mind"]  { stroke: var(--slate); stroke-dashoffset: -142.42; }

.triad__seg[aria-pressed="false"] { opacity: .42; }
.triad__seg[aria-pressed="true"]  { opacity: 1; stroke-width: 20; }
.triad__seg:hover { opacity: 1; }
.triad__seg:focus-visible { stroke: var(--white); }

.triad__hub {
  font-family: var(--font-mono); font-size: 7px; letter-spacing: .18em;
  fill: var(--white); text-anchor: middle; pointer-events: none;
}
.triad__hub--s { font-size: 5.4px; fill: var(--slate); letter-spacing: .2em; }

.triad__panel { text-align: center; max-width: 34ch; }
.triad__k {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white);
}
.triad__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.triad[data-on="body"] .triad__dot { background: var(--silver); }
.triad[data-on="mind"] .triad__dot { background: var(--slate); }
.triad__t { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.triad__hint {
  margin: 12px 0 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}

/* the book sits under the ring in the same column, so it gives up some size */
.phero--book .bookfig { margin-top: 6px; }
.phero--book .book { --w: clamp(150px, 17vw, 208px); }
@media (prefers-reduced-motion: reduce) { .triad__seg { transition: none; } }
/* The ring and the book share the hero's right column — the ring states the
   three parts, the book is the template for one of them, so they belong in one
   stack rather than as two siblings the grid pulls apart. */
.phero__side { display: grid; gap: clamp(20px, 3vw, 34px); justify-items: center; }
/* The book moved out of the hero — three stacked objects in one column was too
   much for the space. It gets its own band below, beside the line about it. */
.bookline { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.bookline strong { display: block; color: var(--white); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.bookline--go { margin-top: 20px; }
.bookline a {
  display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.bookline a:hover { border-bottom-color: var(--green); }
#book .book { --w: clamp(170px, 20vw, 250px); }

/* ── The book, standing on slate ────────────────────────────────────────────
   A near-black cover on a near-black page has no silhouette. A photo gave it a
   room; slate gives it a wall, which separates harder and costs nothing to
   load. #3A3D3C holds --silver body copy at 6.6:1 — flat --slate (#6A6A6A)
   pops more but forces the copy to dark text, which nothing else here does. */
.bookroom { position: relative; overflow: hidden; background: #3A3D3C; }
.bookroom .wrap { position: relative; z-index: 1; }

/* The one accent at 11px mono sits at 3.6:1 on this ground, under AA. It
   lifts here and only here. */
.bookroom .bookline a { color: #35D584; border-bottom-color: rgba(53,213,132,.4); }
.bookroom .bookline a:hover { border-bottom-color: #35D584; }


/* A vignette so the slate is a lit wall rather than a flat swatch, and the
   book's own shadow has something to fall on. */
.bookroom::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 78% at 72% 44%, rgba(255,255,255,.05) 0%,
                              rgba(0,0,0,0) 46%, rgba(0,0,0,.34) 100%);
}
.bookroom .wrap { position: relative; z-index: 1; }

/* The one accent at 11px mono sits at 3.6:1 on this ground, so it lifts here
   and only here. */
.bookroom .bookline a { color: #35D584; border-bottom-color: rgba(53,213,132,.4); }
.bookroom .bookline a:hover { border-bottom-color: #35D584; }


/* Clearing a block in edit mode leaves <p><br></p> behind, which still holds
   its margin and reads as unexplained dead space. Collapse it while it is
   empty — it comes straight back the moment anything is typed into it. */
.lede:has(> br:only-child),
.phero__in p:has(> br:only-child),
h1:has(> br:only-child), h2:has(> br:only-child), h3:has(> br:only-child)
  { margin: 0 !important; padding: 0; height: 0; overflow: hidden; }

@media (max-width: 980px) {
  /* Narrow viewports crop far less to begin with — a 96vh hero here would just
     be a wall of grass above the fold. */
  .phero--book { min-height: 0; padding-block: clamp(120px, 16vh, 168px) clamp(40px, 7vw, 64px); }
}

.hero { position: relative; display: block; }

/* Panels 2 and 3 carry no photograph, so they need their own ground. */

.split--herobook {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero__book { margin: 0; justify-self: end; }
.hero__book .book { --w: clamp(160px, 19vw, 250px); }
/* Same AA lift the philosophy book band needs on this ground. */

.hero__score {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(30px, 5vw, 68px);
  justify-content: start;
}
.hero__score li { display: grid; gap: 4px; }
.hero__score b {
  font-size: clamp(46px, 6vw, 76px); line-height: .9; color: var(--green); font-weight: 500;
}
.hero__score span { font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 16ch; }


@media (max-width: 900px) {
  .split--herobook { grid-template-columns: 1fr; gap: 34px; }
  .hero__book { justify-self: start; }
  .hero__score { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  }

/* The home hero now carries the triad beside the headline, the way philosophy
   used to. Two columns on desktop, stacked below. */
.hero__in--triad {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: end;
}
@media (max-width: 980px) {
  .hero__in--triad { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}

/* --- playing professionals ------------------------------------------------
   Sits under the scoreboard because it is the same claim carried forward: the
   juniors on that board are now playing for money. Names only — a tour line
   appears where we can name the tour, and nowhere else. */
.pros { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3vw, 36px); border-top: var(--hair); }
.pros__k {
  margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
}
.pros__l {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 0;
}
.pros__l li {
  display: grid; gap: 3px; padding: 14px 22px 14px 0;
  border-top: 1px solid var(--surface-2);
}
.pros__who { font-size: 17px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
.pros__tour {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* --- the two programs -----------------------------------------------------
   The page used to open on four price tiers, which made a parent pick before
   they knew what they were picking between. This is the fork: a fixed
   three-month winter program, or a year-round commitment. Tracks and prices
   come after. */
.two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.2vw, 28px); margin-top: clamp(30px, 4vw, 48px);
}
.two__c {
  border: var(--hair); border-radius: var(--r-md); background: var(--surface-1);
  padding: clamp(26px, 3vw, 36px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
  display: grid; align-content: start;
}
.two__c--feature { border-color: rgba(0,175,81,.4); }
.two__k {
  margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
}
.two__c h3 {
  margin: 12px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700;
  color: var(--white); letter-spacing: -.02em; line-height: 1.1;
}
.two__term {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver);
}
.two__d { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 42ch; }

.two__l { margin: 22px 0 0; padding: 20px 0 0; border-top: var(--hair); display: grid; gap: 14px; }
.two__l > div { display: grid; grid-template-columns: 116px 1fr; gap: 0 16px; align-items: baseline; }
.two__l dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}
.two__l dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--silver); }

.two__go {
  margin-top: 24px; justify-self: start;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.two__go:hover { border-bottom-color: var(--green); }

@media (max-width: 560px) {
  .two__l > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- the two programs, as separate sections -------------------------------
   Winter and year-round are different commitments, not two columns of one
   table, so each gets its own section, its own terms, and its own tracks.
   The year-round band sits on surface-1 so the break between them is visible
   without a second accent colour. */
.prg { position: relative; }
.prg--year { background: var(--surface-1); border-block: var(--hair); }
.prg__h { max-width: 74ch; }
.prg__term {
  margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.prg__h .lede { margin-top: 22px; max-width: 60ch; }
.prg__who { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.prg__terms { max-width: 66ch; }
.prg .tiers { margin-top: clamp(34px, 4.5vw, 56px); }
/* On surface-1 the tier cards need to separate from the band behind them. */
.prg--year .tier { background: var(--bg); }

/* The book band is now the top of the philosophy page, so it carries the
   breadcrumb and the h1 and needs room under the fixed header. */
.bookroom--top { padding-block: clamp(150px, 19vh, 210px) clamp(56px, 7vw, 84px); }
.bookroom--top .crumb { margin-bottom: 18px; }
.bookroom--top h1 { margin: 0 0 20px; max-width: 18ch; }
.bookroom--top .bookline { max-width: 52ch; }

/* The facility hero photo sits in the 320px column, so it needs a portrait
   crop rather than the 2000x840 bay panorama, which now runs full-bleed. */
.fac__hero img { aspect-ratio: 4 / 5; }
.fac__band img { aspect-ratio: 20 / 7; }

/* The mental performance discipline has a page of its own, so its heading in
   the crew list is a link to it. */
.crew__link { color: inherit; border-bottom: 1px solid rgba(0,175,81,.4); }
.crew__link:hover { color: var(--green); border-bottom-color: var(--green); }
.crew__go { margin: 12px 0 0 !important; }
.crew__go a {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.crew__go a:hover { border-bottom-color: var(--green); }

/* Winter carries three tracks and year-round carries one, so the tier grid
   sizes to what is in it rather than assuming two. */
.prg .tiers { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.prg--year .tiers { max-width: 560px; }


/* The facility walkthrough: the page's hero. A 16:9 frame holding the video,
   which loads only when played. No .figure here: its ::after wash would sit
   over the player's own controls. */
.fac__walk {
  margin-top: 34px; aspect-ratio: 16 / 9; max-width: 100%;
  border: var(--hair); border-radius: var(--r-md); overflow: hidden; background: var(--surface-1);
}
.fac__walk video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--bg); }

/* The call page: three people, one card each, buttons on one line. */
.cards--people .card { display: flex; flex-direction: column; }
.cards--people .card__go { margin-top: auto; padding-top: 22px; }
.cards--people .btn { width: 100%; }

/* Footer hours: day and time in two columns, so the times line up. */
.ftr__hours { font-size: 13.5px; }
.ftr__hours li { display: grid; grid-template-columns: 10ch 1fr; gap: 0 14px; }

/* The scholarship application: the site's one real form. Sections are
   fieldsets; each field carries its own message line. */
.form { display: grid; gap: 26px; }
.form fieldset { border: 0; border-top: var(--hair); margin: 0; padding: 20px 0 0; display: grid; gap: 16px; min-width: 0; }
.form legend {
  padding: 0 12px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__f { display: grid; gap: 7px; min-width: 0; align-content: start; }
.form label { font-size: 13px; color: var(--muted); }
.form__opt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-left: 4px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form select, .form textarea {
  width: 100%; background: var(--surface-1); border: 1px solid var(--surface-2);
  border-radius: var(--r-sm); color: var(--white); padding: 12px 14px;
  font: inherit; font-size: 16px; /* under 16px, iPhone Safari zooms the page when a field takes focus */
}
.form textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.form textarea.form__short { min-height: 84px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--green); outline: none; }
.form [aria-invalid="true"] { border-color: var(--crimson); }
.form__msg { margin: 0; font-size: 12.5px; color: var(--white); padding-left: 10px; border-left: 2px solid var(--crimson); }
/* A field people never see or reach; a filled one marks a bot. */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__check { grid-template-columns: 20px 1fr; gap: 6px 12px; align-items: start; }
.form__check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.form__check label { font-size: 14.5px; color: var(--silver); }
.form__check .form__msg { grid-column: 2; }
.form__note { font-size: 13px; color: var(--muted); margin: 0; }
.form__err { margin: 0; padding: 12px 14px; border: 1px solid var(--crimson); border-radius: var(--r-sm); font-size: 14px; color: var(--white); }
.form__done { display: grid; gap: 12px; border: 1px solid var(--green-40); border-radius: var(--r-md); background: var(--green-08); padding: 26px; }
.form__done p { margin: 0; font-size: 15px; color: var(--silver); }

/* Owner review 2026-09-30: sections hidden "for now" carry the hidden attribute; class display rules must not override it. */
[hidden] { display: none !important; }

/* ==========================================================================
   TYPEFACE C — Newsreader (headlines, big numerals) + Raleway (everything else)
   Paste at the very END of assets/css/ryp.css. Nothing above needs editing.
   ========================================================================== */

:root {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* The mono token now carries the uppercase labels, set in Raleway. */
  --font-mono: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Body: Raleway 450, lining figures (Raleway defaults to old-style numerals). */
body { font-weight: 450; font-variant-numeric: lining-nums; }

/* Headlines: Newsreader Regular, slightly larger to match Work Sans' visual size. */
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.h-display { font-size: calc(clamp(42px, 7.4vw, 92px) * 1.06); }
.h-section { font-size: calc(clamp(32px, 4.6vw, 58px) * 1.06); }
.phero h1  { font-size: calc(clamp(38px, 5.6vw, 70px) * 1.06); }

/* Small headings stay in Raleway, one step lighter than the old 900. */
h3, h4, .px__brand strong, .pa__name, .pa__body h4, .prog__h h3 { font-weight: 800; }

/* Big numerals: Newsreader, to pair with the headlines. */
.proof__n,
.win__n,
.tier__price b,
.hero__score b,
.yr__y .datum,
.ftr .datum {
  font-family: var(--font-display); font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__score b { letter-spacing: 0.01em; }
.yr__y .datum  { letter-spacing: -0.02em; }

/* Every former mono label: Raleway Bold caps. */
.eyebrow,
.datum,
.link,
.hero__note,
.strip__meta,
.proof__foot,
.figure figcaption,
.step__n,
.step__tag,
.zone__idx,
.card__k,
.roster__role,
.ftr h4,
.ftr__base,
.px__brand span,
.px__feats b,
.px__hud,
.px__rec,
.px__cap,
.stack__st,
.tier__k,
.tier__price,
.tbl caption,
.tbl th,
.crumb,
.cap__n,
.grit__n,
.formula__legend b,
.zm__axis,
.zm__trap,
.zm__idx,
.zm__zname,
.zm__hint,
.zm__persona,
.zm__stats b,
.pz__c,
.trap__k,
.pa__code,
.pa__zone,
.pa__kit,
.pa__steps b,
.band figcaption,
.roll__tot,
.yr__n,
.book::before,
.bookfig__c,
.phero__book a,
.pa__free,
.diff b,
.commit__k,
.crew__n,
.prog__k,
.prog__when,
.triad__hub,
.triad__k,
.triad__hint,
.bookline a,
.pros__k,
.pros__tour,
.two__k,
.two__term,
.two__l dt,
.two__go,
.prg__term,
.crew__go a,
.form legend,
.form__opt {
  font-weight: 700;
}
.datum { font-variant-numeric: lining-nums tabular-nums; }

/* Dev markers and the formula keep the monospace. */
.todo::after, .ed, .formula code { font-family: var(--font-code); }