/* ============================================================
   MMA Academy MEA · site stylesheet
   ============================================================
   Built on /assets/tokens.css, which is the ported brand token sheet.
   Load order matters: tokens.css first, this second.

   This file replaces the earlier hand-reconstruction that was made by eye
   from the print prospectus. That version invented a greige #DCD7C9 ground,
   the wrong fonts, and its own type scale. All of that is gone. Only the
   gold #FFA400 survived, because it was right.

   The visual language is "Sounding": elemental folk crossed with analog
   collage. One rule governs it — type is corporate, image is folk, gold is
   the hinge.

   THREE HARD RULES, all enforced below:

   1. GROUNDS ARE BRAND-EXACT. paper #FFFFFF, paper-warm #F7F5F1,
      onyx #000000. Nothing between them. The descent is carried by
      illustration and parallax, not by tinting the background.

   2. GOLD AS TYPE ONLY ON ONYX. Measured: gold on white is 1.99 and gold on
      paper-warm is 1.83, so both fail at every size. Gold on onyx is 10.56.
      On light grounds gold appears only as a fill with dark text on it, as a
      rule, or as the diagonal. Grep for `--mma-gold` under `color:` and every
      hit should sit on an onyx ground.

   3. FOLK COLOURS NEVER CARRY MEANING. rose, mint, cyan, green, folk-gold
      live inside illustration, strata, halftone and constellation nodes.
      Never as text, rule, icon, border or UI state. Four of the five fail
      contrast on paper.

   Also worth knowing: ink-40 #A3A3A3 on white is 2.52, so it is meta text at
   caption size or larger blocks of it, never body copy. Of the secondary
   palette only sapphire (8.02) is safe as text on white.
   ============================================================ */

/* ============================================================
   SITE-LEVEL ALIASES
   Semantic names the components below use, all resolving to brand tokens.
   The type scale is fixed px in the token sheet; here each step becomes a
   clamp() that tops out at the token value, so the scale is respected at
   desktop and the page still works at 360px.
   ============================================================ */

/* ============================================================
   TWO FACES, NOT THREE
   ============================================================
   Corporately MMA uses Söhne and Tiempos Text. Nothing else.

   The ported token sheet names JetBrains Mono as the label face, and the site
   had it in 163 places — every eyebrow, table header, breadcrumb and caption.
   That is most of the small type on the site, which is why the two real brand
   faces were hard to see at all.

   --font-mono is overridden here rather than edited in tokens.css, because
   tokens.css mirrors colors_and_type.css in the Design project and should keep
   mirroring it. The label ROLE stays — wide tracking, uppercase, 12px — it is
   just set in Söhne Halbfett now. Numbers keep tabular figures via .tnum.

   The source token sheet needs the same correction, or the next port brings a
   third face back.
   ============================================================ */

:root{
  --font-mono: var(--font-display);

  --paper:      var(--mma-paper);
  --warm:       var(--mma-paper-warm);
  --onyx:       var(--mma-onyx);
  --gold:       var(--mma-gold);
  --gold-lt:    var(--mma-lt-gold);

  --ink:        var(--mma-onyx);
  --ink-60:     var(--mma-ink-60);
  --ink-40:     var(--mma-ink-40);
  --stroke:     var(--mma-stroke);
  --stroke-2:   var(--mma-stroke-2);

  /* on-onyx foregrounds */
  --chalk:      #FFFFFF;
  --chalk-60:   rgba(255,255,255,.66);
  --chalk-40:   rgba(255,255,255,.42);
  --chalk-rule: rgba(255,255,255,.16);

  /* Folk palette, measured out of the source artwork. ILLUSTRATION ONLY.
     The casting is marine, one creature per depth: jellyfish at the surface,
     turtle at depth one, manta at depth two, anglerfish at the floor. */
  --folk-rose:  #D2467A;   /* the floor stratum, and the anglerfish */
  --folk-mint:  #8CD2B4;   /* the surface, and the jellyfish */
  --folk-cyan:  #6EC8E6;
  --folk-green: #6EA050;   /* the turtle */
  --folk-gold:  #F0AA14;   /* effectively the same note as #FFA400 — the hinge,
                              and the anglerfish's lure: the only light on the
                              floor is the brand's gold */
  --folk-teal:  #2F6B6B;   /* the manta */
  /* The interior line colour, sampled off the source artwork rather than
     chosen. Every creature's line work is drawn in it. Illustration only —
     it has never been measured for contrast because it never carries text. */
  --folk-line:  #F7E7C8;

  /* scaffold markers. Deliberately outside the brand palette so a red block
     can never be mistaken for finished design. */
  --draft:      #B4341F;
  --draft-soft: #FBEFEA;
  --draft-ink:  #5A2A1E;

  /* fluid type, anchored to the brand scale */
  --t-display-1: clamp(40px, 6.4vw, var(--fs-display-1));
  --t-display-2: clamp(34px, 5.2vw, var(--fs-display-2));
  --t-h1:        clamp(30px, 4.2vw, var(--fs-h1));
  --t-h2:        clamp(25px, 3.1vw, var(--fs-h2));
  --t-h3:        clamp(21px, 2.3vw, var(--fs-h3));
  --t-h4:        clamp(18px, 1.8vw, var(--fs-h4));

  --measure: 62ch;
  --pad:  clamp(var(--space-5), 5vw, var(--space-9));
  --rail: clamp(0px, 6vw, 104px); /* @kind spacing */
  --shell: 1180px;
}

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

/* The `hidden` attribute only sets display:none at user-agent-stylesheet
   specificity, so any component rule that sets its own `display` (.card,
   .talk, etc.) silently wins and the "hidden" element keeps rendering. Filter
   scripts on this site (Webinars, Programs) rely on toggling `hidden`, so
   this override has to stay ahead of every component rule that sets display. */
[hidden]{ display:none !important; }

html{
  color-scheme:light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;
  /* clip, NOT hidden. overflow-x:hidden computes to `overflow: hidden auto`,
     which makes <body> a scroll container — and a position:sticky child of a
     scroll container stops sticking to the viewport. That is what was actually
     killing the sticky header; the header's own rule was correct all along.
     overflow:clip suppresses the same horizontal overflow without creating a
     scroll container, so sticky survives. */
  overflow-x:clip;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,164,0,.24);
}
/* Fallback for engines without overflow:clip. Setting it on the root element
   propagates to the viewport rather than making <body> a scroll container, so
   sticky is unaffected either way. */
@supports not (overflow-x: clip){
  html{ overflow-x:hidden; }
  body{ overflow-x:visible; }
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:var(--tracking-tight);
  line-height:var(--lh-h1);
  text-wrap:balance;
}
p,ul,ol,dl{ margin:0; }
a{ color:inherit; }
strong,b{ font-weight:600; }

/* The label role. Was a monospace face; it is Söhne Halbfett now, and it holds
   the same job because the job was never the monospacing — it was the wide
   tracking and the uppercase. */
.mono{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.serif{ font-family:var(--font-serif); font-style:italic; font-weight:400; }
/* Tiempos was carrying only 14 elements on the whole site. The serif is half
   the brand's voice, so it takes the editorial roles outright: every lede, every
   pull quote, every kicker. */
.page__lede, .sec__p, .offer__d, .card__d,
/* the entry page's own editorial classes, so both pages read the same */
.hero__lede, .sec__lede, .route__note, .foot__p, .close__p{
  font-family:var(--font-serif);
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
}
.tnum{ font-variant-numeric:tabular-nums; }
.eyebrow{
  display:block;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-eyebrow); line-height:var(--lh-eyebrow);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--ink-60);
  margin-bottom:var(--space-3);
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--radius-1);
}
/* Parked with clip-path, not at left:-9999px. The old trick puts a real 140px
   box ten thousand pixels off-canvas, and that box counts toward the document's
   scrollable width — it was single-handedly making every page scroll sideways.
   clip-path collapses it to nothing while keeping it focusable. */
.skip{
  position:absolute; top:0; left:0; z-index:100;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:var(--onyx); color:var(--chalk);
  padding:var(--space-3) var(--space-4); text-decoration:none;
}
.skip:focus{
  width:auto; height:auto; overflow:visible;
  clip-path:none;
  top:var(--space-3); left:var(--space-3);
}

/* ============================================================
   THE SIGNATURE MOTIF
   A gold bar skewed -18deg. Never the "/" character — a typed slash is a
   different shape at a different angle and it reads as punctuation.
   ============================================================ */

.diag{
  display:inline-block;
  background:var(--gold);
  transform:skewX(-18deg);
  width:10px; height:26px;
  flex:0 0 auto;
}
.diag--sm{ width:8px;  height:19px; }
.diag--rule{ width:34px; height:4px; }
/* legacy alias: the old markup called this .slash and typed a "/" inside it.
   Kept so any un-regenerated page degrades to a gold bar rather than text. */
.slash{
  display:inline-block; background:var(--gold); transform:skewX(-18deg);
  width:8px; height:19px; overflow:hidden; text-indent:-99em; color:transparent;
  vertical-align:-2px;
}

/* ============================================================
   COLLAGE DEVICES
   Five of them, per the visual language: grain, misregistration, torn edges,
   halftone runs, and the plumb line. Each is decorative and aria-hidden.
   ============================================================ */

/* One turbulence tile, multiplied over the band.
   z-index 0, behind the content, not 45 above it. Grain over body copy is a
   multiply layer sitting on the type, and the whole point of the measured
   contrast work is that nothing quietly darkens or speckles the text. It
   textures the ground; the words stay clean. */
.grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:.42; mix-blend-mode:multiply; z-index:0;
}

/* The dotted gold plumb line, at the same offset on every page.
   Same construction as the entry page's depth gauge: a hairline rail with
   tick marks stepping off it, faded at both ends. */
.plumb{
  position:absolute; top:0; bottom:0; width:10px; z-index:2;
  left:var(--rail);
  background-image:
    linear-gradient(180deg,var(--gold) 0,var(--gold) 100%),
    repeating-linear-gradient(180deg,var(--gold) 0 1px,transparent 1px 13px);
  background-size:1px 100%,9px 100%;
  background-position:0 0,1px 0;
  background-repeat:no-repeat,repeat-y;
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  opacity:.9; pointer-events:none;
}
@media (max-width:760px){ .plumb{ display:none; } }

/* Misregistration: the rose plate slipped 4px. Display type only, once per
   page. The offset copy is aria-hidden so it is never read twice. */
.miss{ position:relative; display:inline-block; }
.miss__u{
  position:absolute; left:4px; top:5px;
  color:var(--folk-rose); opacity:.5; mix-blend-mode:multiply;
  pointer-events:none; user-select:none;
}
.miss__t{ position:relative; }
@media (prefers-reduced-motion: reduce){ .miss__u{ display:none; } }

/* Torn edge between two grounds. */
.torn{ display:block; width:100%; height:40px; position:relative; z-index:10; }

/* Halftone dot run — the depth marker. Filled dots count the depth. */
.halftone{ display:inline-block; vertical-align:middle; }

/* ============================================================
   SCAFFOLD RIBBON — this build is not releasable
   ============================================================ */

/* Static, not sticky. It used to stick at top:0, and now that the header sticks
   there too, two stacked sticky bars at the same offset fight for the same
   pixels — and a hard-coded offset on the header would break the moment this
   ribbon's height changed or it was removed for release. The warning is still
   the first thing on the page, and the red content blocks carry it further
   down anyway. */
.scaffold{
  position:relative; z-index:16;
  display:flex; align-items:center; justify-content:center;
  gap:.7em; flex-wrap:wrap;
  background:var(--draft); color:#fff;
  padding:7px var(--space-4); text-align:center;
}
.scaffold b{ font-weight:700; }
.scaffold a{ color:#fff; text-underline-offset:3px; }

/* ============================================================
   SITE HEADER + NAV
   ============================================================ */

/* NOTE: display:block, not flex. A flex .head turns .head__in into a shrunk
   flex item that margin:auto then centres, throwing the wordmark ~180px off.

   STICKY, and specifically `top:0` under the scaffold ribbon rather than a
   hard-coded offset: the ribbon is itself sticky at top:0, so a number here
   would go wrong the moment the ribbon's height changes or it is removed for
   release. Two stacked sticky elements resolve their own order, and the
   header's z-index sits below the ribbon's so the ribbon stays on top.

   The backdrop is opaque, not translucent. A blurred bar over this design
   would drag the illustration's folk colours up behind the nav type and
   quietly wreck the measured contrast. */
.head{
  display:block;
  position:sticky; top:0; z-index:15;
  background:var(--paper);
  border-bottom:1px solid var(--stroke);
  padding-inline:var(--pad);
}
/* On a short viewport a sticky header eats the reading area, so below 420px
   tall it releases. Landscape phones are the real case.

   The min-height:1px guard is not decoration: a hidden or not-yet-laid-out
   frame reports a 0px viewport, which satisfies max-height:420px and silently
   turns the sticky header off. Caught exactly that way while testing. */
@media (max-height:420px) and (min-height:1px){ .head{ position:relative; } }

/* Any jump target has to clear the sticky header, or the thing you jumped to
   lands underneath it. One rule, every anchor on the site. */
[id]{ scroll-margin-top:clamp(72px,11vw,104px); }

/* ---------- the compact mobile header ----------
   At 375px the header wrapped onto three rows — wordmark, four nav links, then
   the Enroll button — about 520px of an 812px screen. Sticky at that height it
   would leave the reader a letterbox.

   So on narrow screens: the wordmark and Enroll share the top row, the nav
   links sit under them on one scrollable line, and the whole thing is capped.
   No hamburger: four links fit, and a menu button would hide the primary
   navigation behind a tap for no reason. */
@media (max-width:760px){
  .head__in{
    display:grid;
    grid-template-columns:1fr auto;
    gap:var(--space-3) var(--space-4);
    padding-block:var(--space-3);
  }
  .wordmark{ grid-column:1; align-self:center; }
  .wordmark__row{ font-size:19px; }
  /* scoped to .head__in .nav (not just .nav) so this beats the unconditional
     .nav{flex-wrap:wrap} rule declared later in the file — same specificity
     plus later source order was silently winning at every width, which had
     quietly turned the single scrollable row into a two-line wrap. */
  .head__in .nav{
    grid-column:1 / -1; grid-row:2;
    flex-wrap:nowrap; gap:var(--space-4);
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__link{ flex:0 0 auto; }
  /* the Enroll button leaves the scrolling row and pins to the top right, so
     the one action that matters is never scrolled out of reach */
  .nav .btn--enroll{
    position:absolute; top:var(--space-3); right:var(--pad);
    padding:var(--space-2) var(--space-4);
  }
  .head{ position:sticky; }
}
.head__in{
  max-width:var(--shell); margin-inline:auto;
  padding-block:clamp(var(--space-4), 2.4vw, var(--space-5));
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); flex-wrap:wrap;
}
@media (min-width:1000px){ .head__in{ padding-left:var(--rail); } }

.wordmark{ display:inline-flex; flex-direction:column; gap:var(--space-1); text-decoration:none; line-height:1; }
.wordmark__row{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,1.9vw,var(--fs-h4));
  letter-spacing:var(--tracking-tight);
}
.wordmark__academy{ color:var(--ink-60); font-weight:600; }
.wordmark__sub{
  font-family:var(--font-mono); font-weight:500;
  font-size:11px; letter-spacing:var(--tracking-eyebrow);
  color:var(--ink-60); text-transform:uppercase;
}

.nav{ display:flex; align-items:center; gap:clamp(var(--space-5),2.2vw,var(--space-7)); flex-wrap:wrap; }
/* The nav read as a flat row of grey text. The fix borrows the site's own
   signature mark — the skewed gold slash from the wordmark ("/Academy",
   "/MEA") — as a hover/active indicator, and swaps the static border-bottom
   for a underline that grows from the left rather than snapping on. Gold
   still only ever appears as a fill, never as type, per the brand rule
   above. */
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-body); letter-spacing:var(--tracking-normal);
  color:var(--ink-60);
  padding:var(--space-2) 0;
  transition:color var(--dur-fast) var(--ease-out);
}
.nav__link::before{
  content:""; flex:0 0 auto;
  width:5px; height:13px;
  background:var(--gold);
  transform:skewX(-18deg) scale(0,1);
  transform-origin:left center;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--stroke-2);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link:hover::before{ transform:skewX(-18deg) scale(1,1); }
@media (prefers-reduced-motion: reduce){
  .nav__link::before,.nav__link::after{ transition:none; }
}
/* gold as a RULE, not as type */
.nav__link[aria-current="page"]{ color:var(--ink); }
.nav__link[aria-current="page"]::before{ transform:skewX(-18deg) scale(1,1); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); background:var(--gold); }

/* ============================================================
   PAGE SHELL
   ============================================================ */

.wrap{
  position:relative; z-index:1;   /* above .grain */
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--pad);
}
@media (min-width:1000px){ .wrap{ padding-left:calc(var(--pad) + var(--rail)); } }

.masthead{
  padding-block:clamp(var(--space-7), 5.6vw, var(--space-9)) clamp(var(--space-6), 3.4vw, var(--space-7));
  border-bottom:1px solid var(--stroke);
}
.crumb{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  color:var(--ink-60); margin-bottom:clamp(var(--space-5),3vw,var(--space-6));
}
.crumb a{ text-decoration:none; border-bottom:1px solid var(--stroke); }
.crumb a:hover{ border-bottom-color:var(--gold); }
.crumb__sep{
  display:inline-block; background:var(--gold); transform:skewX(-18deg);
  width:5px; height:12px; overflow:hidden; text-indent:-99em; color:transparent;
}

/* The depth line. Gold cannot be the type here — this sits on paper — so the
   gold is the diagonal marker and the words are ink-60. */
.masthead__depth{
  display:flex; align-items:center; gap:.7em;
  color:var(--ink-60);
}
.masthead__depth::before{
  content:""; display:inline-block; flex:0 0 auto;
  width:8px; height:19px; background:var(--gold); transform:skewX(-18deg);
}

.page__title{
  font-size:var(--t-display-2); line-height:var(--lh-display-2);
  max-width:22ch; margin-bottom:var(--space-3);
}
.page__kicker{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(19px,1.9vw,var(--fs-h3)); line-height:1.25;
  color:var(--ink); margin-bottom:clamp(var(--space-4),2.4vw,var(--space-5));
  max-width:28ch;
}
.page__lede{ max-width:var(--measure); color:var(--ink-60); font-size:var(--fs-body); }
.page__lede + .page__lede{ margin-top:.7em; }

.sec{ position:relative; padding-block:clamp(var(--space-6),5vw,var(--space-8)); border-bottom:1px solid var(--stroke); }
.sec:last-of-type{ border-bottom:0; }

/* Alternating grounds on the inner pages, so a long page descends the way the
   entry page does instead of being one flat sheet.

   The section lives inside a 1180px .wrap, so a plain background would paint a
   boxed band. box-shadow spread with a clip-path bleeds it to the viewport
   edges without any extra markup and without causing horizontal overflow —
   which a 100vw width would, once a scrollbar is present. */
.sec--warm{
  background:var(--warm);
  box-shadow:0 0 0 100vmax var(--warm);
  clip-path:inset(0 -100vmax);
  border-bottom:0;
}
/* the torn lip where one ground becomes the next */
.sec--warm::before,
.sec--warm::after{
  content:""; position:absolute; left:-100vmax; right:-100vmax; height:14px;
  pointer-events:none; background:var(--paper);
}
.sec--warm::before{
  top:0;
  clip-path:polygon(0 0,100% 0,100% 40%,94% 78%,86% 30%,78% 72%,69% 26%,
                    60% 68%,51% 24%,42% 66%,33% 30%,24% 74%,15% 32%,
                    7% 70%,0 38%);
}
.sec--warm::after{
  bottom:0;
  clip-path:polygon(0 62%,7% 30%,15% 68%,24% 26%,33% 70%,42% 34%,51% 76%,
                    60% 32%,69% 74%,78% 28%,86% 70%,94% 22%,100% 60%,
                    100% 100%,0 100%);
}
.sec--warm + .sec--warm::before{ display:none; }

/* The floor, on an inner page. Same technique, onyx ground, and gold becomes
   legal as type inside it — which is the whole reason the Masterclass reads
   differently from everything above it. */
.sec--onyx{
  background:var(--onyx); color:var(--chalk);
  box-shadow:0 0 0 100vmax var(--onyx);
  clip-path:inset(0 -100vmax);
  border-bottom:0;
  padding-block:clamp(var(--space-7),6vw,var(--space-9));
}
.sec--onyx::before{
  content:""; position:absolute; top:0; left:-100vmax; right:-100vmax; height:16px;
  pointer-events:none; background:var(--warm);
  clip-path:polygon(0 0,100% 0,100% 38%,94% 76%,86% 28%,78% 70%,69% 24%,
                    60% 66%,51% 22%,42% 64%,33% 28%,24% 72%,15% 30%,
                    7% 68%,0 36%);
}
.sec--onyx h2,.sec--onyx h3{ color:var(--gold); }
.sec--onyx .sec__p,.sec--onyx .card__d{ color:var(--chalk-60); }
.sec--onyx .eyebrow,.sec--onyx .mono{ color:var(--chalk-60); }
.sec--onyx .card{
  background:rgba(255,255,255,.06);
  border-color:var(--chalk-rule);
}
.sec--onyx .card__t{ color:var(--chalk); }
.sec--onyx .card__n,.sec--onyx .card__cat{ color:var(--chalk-60); }
.sec--onyx .card::after{ background:var(--onyx); }
.sec--onyx .card::before{ display:none; }   /* multiply grain is invisible on black */
.sec--onyx .card__h{ background:var(--gold); color:var(--onyx); }
.sec--onyx .spec__k{ color:var(--chalk-60); }
.sec--onyx .btn--ghost{ border-color:var(--chalk-rule); color:var(--chalk); }
.sec--onyx .btn--ghost:hover{ border-color:var(--chalk); background:rgba(255,255,255,.08); }

.sec__h{
  font-size:var(--t-h2); line-height:var(--lh-h2);
  margin-bottom:clamp(var(--space-3),2vw,var(--space-5));
  display:flex; align-items:baseline; gap:.55em;
}
/* every section heading carries the diagonal */
.sec__h::before{
  content:""; display:inline-block; flex:0 0 auto;
  width:9px; height:.78em; align-self:center;
  background:var(--gold); transform:skewX(-18deg);
}
.sec__p{ max-width:var(--measure); color:var(--ink-60); }
.sec__p + .sec__p{ margin-top:.7em; }

/* ============================================================
   BLOCKS
   ============================================================ */

/* stat row */
.stats{
  display:flex; flex-wrap:wrap; gap:clamp(var(--space-5),4vw,var(--space-8));
  padding-block:clamp(var(--space-4),2.4vw,var(--space-5));
  border-block:1px solid var(--stroke);
  margin-block:clamp(var(--space-5),2.8vw,var(--space-6));
}
.stat__n{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:var(--t-h2); letter-spacing:var(--tracking-tight); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__l{ display:block; color:var(--ink-60); margin-top:var(--space-2); }

/* two-up grid of offers */
.offers{
  display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--stroke); border-block:1px solid var(--stroke);
  margin-block:clamp(var(--space-5),3.4vw,var(--space-7));
}
@media (min-width:700px){ .offers{ grid-template-columns:1fr 1fr; } }
.offer{
  background:var(--warm); padding:clamp(var(--space-4),2.2vw,var(--space-6));
  display:flex; flex-direction:column; gap:var(--space-2); min-width:0;
}
.offer__t{
  font-size:var(--t-h4); line-height:var(--lh-h4);
  display:flex; align-items:center; gap:.6em;
}
/* Was a coloured dot. A folk colour cannot be an icon, so the marker is the
   diagonal and the offer's colour lives in illustration instead. */
.offer__dot{
  width:8px; height:19px; background:var(--gold); transform:skewX(-18deg);
  flex:0 0 auto; border-radius:0;
}
.offer__d{ color:var(--ink-60); font-size:var(--fs-body-sm); overflow-wrap:break-word; }
.offer a{ text-decoration:none; border-bottom:1px solid var(--stroke-2); }
.offer a:hover{ border-bottom-color:var(--gold); }

/* journey chips */
.journey{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-3);
  margin-block:clamp(var(--space-5),2.8vw,var(--space-6));
}
.journey__step{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--warm); border:1px solid var(--stroke);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-1);
  font-size:var(--fs-body-sm);
}
/* the step number is onyx; the gold is the bar in front of it */
.journey__step .mono{ color:var(--ink); }
.journey__step::before{
  content:""; display:inline-block; flex:0 0 auto;
  width:6px; height:15px; background:var(--gold); transform:skewX(-18deg);
}
/* ink-40 on white is 2.52. The arrow carries the sequence, so it is text
   and it takes ink-60 at 5.74. Nothing on a light ground uses ink-40. */
.journey__arrow{ color:var(--ink-60); }

/* table */
.tbl__wrap{
  overflow-x:auto; overscroll-behavior-x:contain;
  border-block:1px solid var(--stroke);
  margin-block:clamp(var(--space-5),2.8vw,var(--space-6));
}
.tbl{ width:100%; border-collapse:collapse; min-width:560px; font-size:var(--fs-body-sm); }
.tbl caption{
  text-align:left; color:var(--ink-60); padding-bottom:var(--space-3);
  font-family:var(--font-mono); font-size:var(--fs-caption);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
}
.tbl th,.tbl td{
  text-align:left; padding:var(--space-3) var(--space-5) var(--space-3) 0;
  border-top:1px solid var(--stroke); vertical-align:baseline;
}
.tbl thead th{
  border-top:0; color:var(--ink-60); font-weight:500;
  font-family:var(--font-mono); font-size:var(--fs-caption);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  padding-bottom:var(--space-3);
}
.tbl tbody th{ font-family:var(--font-display); font-weight:600; letter-spacing:var(--tracking-tight); padding-right:var(--space-5); }
.tbl .term{ font-variant-numeric:tabular-nums; color:var(--ink-60); white-space:nowrap; }
.tbl .muted{ color:var(--ink-60); }
.tbl a{ text-decoration:none; border-bottom:1px solid var(--stroke-2); }
.tbl a:hover{ border-bottom-color:var(--gold); }
/* "Open" was gold text on white at 1.99. It is now onyx on a gold fill: the
   same signal, and it passes. */
.tbl .open{
  display:inline-block; background:var(--gold); color:var(--onyx);
  font-family:var(--font-display); font-weight:600;
  padding:2px var(--space-2); border-radius:var(--radius-1);
}

/* session / program cards */
.cards{ display:grid; gap:var(--space-3); grid-template-columns:1fr; margin-top:clamp(var(--space-5),2.8vw,var(--space-6)); }
@media (min-width:620px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }
/* The cards were flat panels while the entry page carried the whole collage
   language. They get three of the five devices now, at card scale:

   - grain, as a repeating turbulence tile on the card's own ground
   - the torn edge, as a clipped bottom lip
   - the diagonal, revealed in the corner on hover

   The grain is a data-URI SVG rather than an inline <svg> per card, because a
   list of nine cards would otherwise mean nine filter definitions and nine
   rasterisations of the same noise. One tile, cached once, repeated. */
.card{
  position:relative; isolation:isolate;
  background:var(--warm);
  border:1px solid var(--stroke);
  border-top:3px solid var(--tag,var(--onyx));
  padding:var(--space-4) var(--space-5) var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2); min-width:0;
  overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0.07 0.13 0.05 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
/* the torn lip along the bottom edge */
.card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:9px;
  pointer-events:none;
  background:var(--paper);
  clip-path:polygon(0 42%,7% 76%,15% 34%,24% 70%,33% 28%,43% 66%,52% 26%,
                    62% 68%,71% 32%,80% 72%,89% 36%,96% 70%,100% 44%,
                    100% 100%,0 100%);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-3); border-color:var(--stroke-2); }
@media (prefers-reduced-motion: reduce){ .card{ transition:none; } .card:hover{ transform:none; } }

/* the diagonal, sliding out of the corner on hover. Decorative, so it lives on
   a pseudo-element of the card's number rather than in the markup. */
.card__n{ position:relative; }
.card__n::after{
  content:""; position:absolute; left:calc(100% + 8px); top:2px;
  width:7px; height:16px;
  background:var(--gold); transform:skewX(-18deg) scaleY(0);
  transform-origin:top;
  transition:transform var(--dur-base) var(--ease-sharp);
}
.card:hover .card__n::after,
.card:focus-within .card__n::after{ transform:skewX(-18deg) scaleY(1); }
@media (prefers-reduced-motion: reduce){
  .card__n::after{ transition:none; transform:skewX(-18deg) scaleY(1); }
}
.card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.card__n{
  font-family:var(--font-mono); font-size:var(--fs-body); font-weight:500;
  color:var(--ink-60); font-variant-numeric:tabular-nums;
}
/* The category label used to be printed in the card's tag colour. Those were
   invented riso hues and several failed contrast badly. The colour now lives
   only in the 3px top rule, drawn from the brand's secondary palette; the
   words are ink-60. */
.card__cat{
  font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:500;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--ink-60); text-align:right;
}
.card__t{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:600; letter-spacing:var(--tracking-tight); line-height:1.2; overflow-wrap:break-word; }
.card__d{ color:var(--ink-60); font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); flex:1 1 auto; }
.card__h{
  align-self:flex-start; background:var(--onyx); color:var(--chalk);
  font-family:var(--font-mono); font-size:var(--fs-caption);
  letter-spacing:var(--tracking-body);
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;
}

/* A card whose CONTENT is a placeholder while its STRUCTURE is real. The card
   system, the filter and the detail route are all reviewable; the listing is
   not a listing yet. Marked in the scaffold red so it can never be read as a
   real programme or session. */
.card--draft{
  border-color:var(--draft);
  border-top-color:var(--draft);
  background:var(--draft-soft);
}
.card--draft .card__cat{ color:var(--draft); }
.card--draft .card__d{ color:var(--draft-ink); }
.card--draft::after{ background:var(--draft-soft); }
.card--draft .card__t::after{
  content:"placeholder";
  display:inline-block; margin-left:.6em; vertical-align:1px;
  background:var(--draft); color:#fff;
  font-family:var(--font-display); font-weight:600;
  font-size:10px; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  padding:2px var(--space-2);
}

/* spec rows */
.spec{
  display:grid; gap:2px var(--space-6); grid-template-columns:1fr;
  border-top:1px solid var(--stroke);
  padding-top:clamp(var(--space-4),2.2vw,var(--space-5));
  margin-top:clamp(var(--space-5),3.4vw,var(--space-7));
}
@media (min-width:680px){ .spec{ grid-template-columns:minmax(140px,auto) 1fr; gap:var(--space-3) var(--space-6); } }
.spec__k{ color:var(--ink-60); padding-top:.3em; }
.spec__v{ font-size:var(--fs-body); min-width:0; }

/* prose list — the bullet is the diagonal, scaled down to a gold rule */
.list{
  list-style:none; padding:0; display:flex; flex-direction:column;
  gap:var(--space-3); max-width:var(--measure); margin-top:var(--space-4);
}
.list li{ position:relative; padding-left:var(--space-5); color:var(--ink-60); }
.list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:3px; background:var(--gold); transform:skewX(-18deg);
}

/* ============================================================
   NEEDS-CONTENT MARKERS
   Outside the brand palette on purpose. 13 of these are live.
   ============================================================ */

.todo{
  border:1px solid var(--draft); border-left-width:4px;
  background:var(--draft-soft);
  padding:var(--space-4);
  margin-block:clamp(var(--space-4),2.4vw,var(--space-5));
  display:flex; flex-direction:column; gap:var(--space-2);
  max-width:var(--measure);
}
.todo__label{ color:var(--draft); font-weight:600; }
.todo__what{ color:var(--draft-ink); font-size:var(--fs-body-sm); }
.todo__who{ color:var(--draft); opacity:.85; }

.dummy{ position:relative; padding-left:var(--space-4); border-left:2px dashed var(--draft); }
.dummy::after{
  content:"dummy";
  position:absolute; left:-2px; bottom:-9px;
  background:var(--draft); color:#fff;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  padding:2px var(--space-2);
}
.dummy > * + *{ margin-top:.7em; }

/* ============================================================
   BUTTONS
   Square by intent. A primary button is never pill-shaped.
   Gold appears as a fill with onyx text on it — never as gold type.
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-body);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-0);
  text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.btn--primary{ background:var(--onyx); color:var(--chalk); }
.btn--primary:hover{ background:var(--gold); color:var(--onyx); }
.btn--enroll{ background:var(--gold); color:var(--onyx); border-radius:var(--radius-pill); padding:var(--space-3) var(--space-6); }
.btn--enroll:hover{ background:var(--onyx); color:var(--chalk); }
.btn--ghost{ border-color:var(--stroke-2); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--onyx); background:var(--warm); }
/* on an onyx ground */
.btn--light{ background:var(--chalk); color:var(--onyx); }
.btn--light:hover{ background:var(--gold); color:var(--onyx); }
.actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:clamp(var(--space-5),3vw,var(--space-6)); }

/* ============================================================
   FILTER (programs index)
   Chips may be pill-shaped; primary buttons may not.
   ============================================================ */

.filter{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-block:clamp(var(--space-5),3vw,var(--space-6)); }
.filter__lbl{ color:var(--ink-60); margin-right:var(--space-2); }
.filter__btn{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-body-sm);
  background:transparent; color:var(--ink-60);
  border:1px solid var(--stroke-2); border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-4); cursor:pointer;
  min-height:44px;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.filter__btn:hover{ color:var(--ink); border-color:var(--onyx); }
.filter__btn[aria-pressed="true"]{ background:var(--onyx); color:var(--chalk); border-color:var(--onyx); }

/* ============================================================
   FORM
   ============================================================ */

.form{ display:grid; gap:var(--space-4); max-width:520px; margin-top:clamp(var(--space-5),3vw,var(--space-6)); }
.field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-body-sm); }
.field .hint{ color:var(--ink-60); font-size:var(--fs-caption); font-weight:300; letter-spacing:var(--tracking-body); text-transform:none; font-family:var(--font-body); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-weight:300;
  font-size:var(--fs-body); letter-spacing:var(--tracking-body);
  color:var(--ink);
  background:var(--paper); border:1px solid var(--stroke-2);
  border-radius:var(--radius-1); padding:var(--space-3); min-width:0;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--onyx); }
.field select{ background-color:var(--paper); color:var(--ink); }
.field textarea{ resize:vertical; min-height:88px; }
.form__note{ color:var(--ink-60); font-size:var(--fs-body-sm); max-width:var(--measure); }
.form__status{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-body-sm); }

/* ============================================================
   FOOTER — the floor. Onyx ground, so gold may be type here.
   ============================================================ */

.foot{
  position:relative; overflow:hidden;
  background:var(--onyx); color:var(--chalk);
  padding:clamp(var(--space-7),6vw,var(--space-9)) 0 clamp(var(--space-6),3.4vw,var(--space-7));
  /* no top margin: the torn edge immediately above is the transition now, and
     a margin would open a white gap between the tear and the black ground */
  margin-top:0;
}
.foot__grid{ display:grid; gap:clamp(var(--space-6),4vw,var(--space-7)); grid-template-columns:1fr; }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.2fr .8fr; } }
/* gold as type, on onyx: 10.56 */
.foot__h{ font-size:var(--t-h2); line-height:var(--lh-h2); color:var(--gold); margin-bottom:var(--space-4); }
.foot__p{ color:var(--chalk-60); max-width:44ch; margin-bottom:var(--space-4); }
.foot__mail{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(16px,1.4vw,var(--fs-body-lg)); letter-spacing:var(--tracking-tight);
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(255,164,0,.4); padding-bottom:3px;
  overflow-wrap:break-word;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.foot__mail:hover{ color:var(--chalk); border-color:var(--chalk); }
.foot__nav{ list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.foot__nav a{ color:var(--chalk-60); text-decoration:none; font-size:var(--fs-body-sm); }
.foot__nav a:hover{ color:var(--chalk); }
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  color:var(--chalk-40);
  border-top:1px solid var(--chalk-rule);
  margin-top:clamp(var(--space-6),4.4vw,var(--space-8)); padding-top:var(--space-4);
  padding-bottom:env(safe-area-inset-bottom);
}
.foot__bar a{ color:var(--chalk-60); text-decoration:none; }
.foot__bar a:hover{ color:var(--chalk); }
/* the wordmark's diagonal survives on onyx unchanged — gold on black */
.foot .diag,.foot .slash{ background:var(--gold); }

/* ==== ENTRY-PAGE CONVENTIONS (applies to every page) ==== */
/* The entry page is the reference. Everything below is the same set of decisions
   it makes, moved here so all seventeen pages read as one site:
   one colour per depth, U/L casing, gold capsules, the plaster ground. */

:root{ --accent2:var(--gold); }
/* 01 orange, 02 sapphire, 03 peridot — as on the entry page's depth gauge */
#depth-1,.depth-1{ --accent2:var(--depth-1-accent); }
#depth-2,.depth-2{ --accent2:var(--depth-2-accent); }
#depth-3,.depth-3{ --accent2:var(--depth-3-accent); }

body{ background:transparent; }

/* casing: uppercase is retired everywhere except nothing. U/L throughout. */
.mono,.eyebrow,.card__cat,.tbl thead th,.tbl caption,.filter__lbl,.crumb,
.card__h,.tbl .open,.scaffold,.todo{
  text-transform:none; letter-spacing:.01em;
}
.mono,.eyebrow{ font-size:clamp(14px,1.15vw,17px); }
.card__cat,.tbl thead th,.tbl caption{ font-size:clamp(13px,1vw,15px); }

/* headings and section furniture take the depth's colour */
.sec__h{ color:var(--accent2); }
.sec__h::before,.masthead__depth::before,.journey__step::before,
.crumb__sep,.list li::before,.card__n::after,.offer__dot{ background:var(--accent2); }
.card{ border-top-color:var(--tag,var(--accent2)); }
.stat__n,.stat__l{ color:var(--accent2); }
.stat__n{ font-size:clamp(44px,5.6vw,72px); }
.stat__l{ font-size:clamp(15px,1.25vw,19px); }
.eyebrow__depth{ color:var(--accent2); font-weight:600; }
.eyebrow__bar{ color:var(--stroke-2); font-weight:400; }

/* gold capsules: every short status label is one */
.card__h,.tbl .open{
  display:inline-block; border-radius:var(--radius-pill);
  background:var(--gold); color:var(--onyx); border:0;
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(13px,1.05vw,16px); line-height:1.5;
  padding:.4em 1.15em; white-space:nowrap;
}

/* the spec ladder: gold keys, readable values */
.spec__k{
  color:var(--gold); font-weight:600; padding-top:.25em;
  font-size:clamp(16px,1.35vw,20px); line-height:1.35;
}
.spec__v{ font-size:clamp(17px,1.4vw,21px); line-height:1.45; }

/* dark grounds are the floor grey, on the same texture — never flat black.
   The tint is translucent enough that the plaster actually reads through it. */
.sec--onyx,.foot{
  background-image:linear-gradient(rgba(52,52,52,.88),rgba(52,52,52,.88)),var(--paper-tex);
  background-size:cover,cover; background-position:center,center;
  background-attachment:fixed,fixed; background-repeat:no-repeat,no-repeat;
  background-blend-mode:normal,normal; background-color:transparent;
}
.sec--onyx{ box-shadow:0 0 0 100vmax #3A3A3A; }
.torn{
  background-image:linear-gradient(rgba(241,241,242,0),rgba(241,241,242,0)),var(--paper-tex);
  background-size:cover,cover; background-position:center,center;
  background-attachment:fixed,fixed; background-repeat:no-repeat,no-repeat;
  background-blend-mode:normal,normal; background-color:transparent; }

/* the onyx band's card rule was white; it takes the depth's colour like the rest */
.sec--onyx .card{ border-top-color:var(--accent2); }

/* ==== THE GROUND IS ALWAYS TEXTURED ====
   The plaster shows on every page, in every band. Grounds are translucent
   tints ON the texture rather than opaque fills over it, so no page, section,
   card, header, or torn lip can paint it out. */
html{
  background-color:#F1F1F2;
  background-image:var(--paper-tex);
  background-size:cover; background-position:center;
  background-attachment:fixed; background-repeat:no-repeat;
}
body{ background:transparent; }
.head{ background:rgba(255,255,255,.86); backdrop-filter:none; }
.sec--warm{
  background-image:linear-gradient(rgba(247,245,241,.5),rgba(247,245,241,.5)),var(--paper-tex);
  background-size:cover,cover; background-position:center,center;
  background-attachment:fixed,fixed; background-repeat:no-repeat,no-repeat;
  background-blend-mode:normal,normal; background-color:transparent; box-shadow:0 0 0 100vmax rgba(247,245,241,.5); }
.sec--warm::before,.sec--warm::after{ background:transparent; }
.sec--onyx::before{ background:transparent; }
.card,.offer,.journey__step{ background:rgba(255,255,255,.62); }
.card::after,.sec--onyx .card::after{ background:transparent; }
.field input,.field select,.field textarea{ background:rgba(255,255,255,.78); }
.todo{ background:rgba(214,44,44,.08); }
/* the torn lip is a cut in the tint, not a white band */
.torn path:first-of-type{ fill:transparent; }

/* ==== THE DEPTH'S COLOUR REACHES THE DETAILS ====
   Same rule as the entry page: inside a depth, every accent is that depth's
   colour. Gold stays reserved for the wordmark, the Enroll button and the
   status capsules, which are brand furniture rather than section detail. */
.halftone{ color:var(--accent2); }
.plumb{
  background-image:
    linear-gradient(180deg,var(--gold) 0,var(--gold) 100%),
    repeating-linear-gradient(180deg,var(--gold) 0 1px,transparent 1px 13px);
  background-size:1px 100%,9px 100%;
  background-position:0 0,1px 0;
  background-repeat:no-repeat,repeat-y;
}
.diag,.slash{ background:var(--accent2); }
.card__cat,.card__n{ color:var(--accent2); }
.card:hover{ border-color:var(--accent2); }
.crumb a:hover,.tbl a:hover,.offer a:hover,.list a:hover{ border-bottom-color:var(--accent2); }
/* card titles are headings, not links: no rule under them */
.card__t a{ text-decoration:none; border-bottom:0; }
.tbl tbody tr:hover th,.tbl tbody tr:hover td{ background:color-mix(in srgb,var(--accent2) 7%,transparent); }
/* each filter button carries the depth it selects, in that depth's colour.
   The values come from the registered depth tokens rather than being declared
   here, so nothing local looks like an unregistered theme token. */
:root{
  --depth-1-accent:#E07B00; /* @kind color */
  --depth-2-accent:#0047BB; /* @kind color */
  --depth-3-accent:#B5C900; /* @kind color */
}
.filter__btn{ color:var(--ink); }
.filter__btn[data-f="all"]{ background:color-mix(in srgb,var(--gold) 18%,transparent); border-color:color-mix(in srgb,var(--gold) 55%,transparent); }
.filter__btn[data-f="1"]{ background:color-mix(in srgb,var(--depth-1-accent) 18%,transparent); border-color:color-mix(in srgb,var(--depth-1-accent) 55%,transparent); }
.filter__btn[data-f="2"]{ background:color-mix(in srgb,var(--depth-2-accent) 18%,transparent); border-color:color-mix(in srgb,var(--depth-2-accent) 55%,transparent); }
.filter__btn[data-f="3"]{ background:color-mix(in srgb,var(--depth-3-accent) 18%,transparent); border-color:color-mix(in srgb,var(--depth-3-accent) 55%,transparent); }
.filter__btn[data-f="all"]:hover{ background:color-mix(in srgb,var(--gold) 32%,transparent); border-color:var(--gold); }
.filter__btn[data-f="1"]:hover{ background:color-mix(in srgb,var(--depth-1-accent) 32%,transparent); border-color:var(--depth-1-accent); }
.filter__btn[data-f="2"]:hover{ background:color-mix(in srgb,var(--depth-2-accent) 32%,transparent); border-color:var(--depth-2-accent); }
.filter__btn[data-f="3"]:hover{ background:color-mix(in srgb,var(--depth-3-accent) 32%,transparent); border-color:var(--depth-3-accent); }
.filter__btn[data-f="all"][aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--onyx); }
.filter__btn[data-f="1"][aria-pressed="true"]{ background:var(--depth-1-accent); border-color:var(--depth-1-accent); color:#FFFFFF; }
.filter__btn[data-f="2"][aria-pressed="true"]{ background:var(--depth-2-accent); border-color:var(--depth-2-accent); color:#FFFFFF; }
.filter__btn[data-f="3"][aria-pressed="true"]{ background:var(--depth-3-accent); border-color:var(--depth-3-accent); color:var(--onyx); }
.btn--primary{ background:var(--accent2); color:#FFFFFF; }
.btn--primary:hover{ background:var(--onyx); color:var(--chalk); }
.btn--ghost:hover{ border-color:var(--accent2); color:var(--accent2); background:transparent; }
.nav__link[aria-current="page"]::after{ background:var(--accent2); }
.nav__link[aria-current="page"]::before{ background:var(--accent2); }
.journey__arrow{ color:var(--accent2); font-weight:600; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent2); }
/* on the dark band the depth colour is the heading, as on the entry page's floor */
.sec--onyx h2,.sec--onyx h3{ color:var(--accent2); }
.sec--onyx .btn--ghost:hover{ border-color:var(--accent2); color:var(--accent2); }

/* the plumb line lives in the rail, and .wrap only reserves that inset at
   1000px — below it the ticks would land on the copy */
.plumb{ display:none; }
@media (min-width:1000px){ .plumb{ display:block; } }

/* ==== ONE BUTTON: A GOLD CAPSULE ====
   Every call to action on the site is the same shape and the same fill, so a
   button is always recognisable as one. Depth colour lives in the section's
   type and rules, not in its buttons. */
.btn,.btn--primary,.btn--ghost,.btn--light,.btn--enroll,.btn--gold{
  background:var(--gold); color:var(--onyx);
  border:0; border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-6);
}
.btn:hover,.btn--primary:hover,.btn--ghost:hover,.btn--light:hover,.btn--enroll:hover,.btn--gold:hover{
  background:var(--onyx); color:var(--chalk); border:0;
}
.sec--onyx .btn,.foot .btn{ background:var(--gold); color:var(--onyx); }
.sec--onyx .btn:hover,.foot .btn:hover{ background:var(--chalk); color:var(--onyx); }

/* Gold is a rule, not type. On a page with no depth scope the heading stays ink
   and the gold survives as the diagonal, the capsules and the rules. */
:root{ --accent2:var(--onyx); }
.sec__h::before,.masthead__depth::before,.crumb__sep,.list li::before,
.card__n::after,.offer__dot,.diag,.slash{ background:var(--gold); }
#depth-1 .sec__h::before,.depth-1 .sec__h::before,
#depth-1 .crumb__sep,.depth-1 .crumb__sep,
#depth-1 .list li::before,.depth-1 .list li::before,
#depth-1 .card__n::after,.depth-1 .card__n::after,
#depth-1 .offer__dot,.depth-1 .offer__dot,
#depth-1 .diag,.depth-1 .diag,#depth-1 .slash,.depth-1 .slash{ background:var(--depth-1-accent); }
#depth-2 .sec__h::before,.depth-2 .sec__h::before,
#depth-2 .crumb__sep,.depth-2 .crumb__sep,
#depth-2 .list li::before,.depth-2 .list li::before,
#depth-2 .card__n::after,.depth-2 .card__n::after,
#depth-2 .offer__dot,.depth-2 .offer__dot,
#depth-2 .diag,.depth-2 .diag,#depth-2 .slash,.depth-2 .slash{ background:var(--depth-2-accent); }
#depth-3 .sec__h::before,.depth-3 .sec__h::before,
#depth-3 .crumb__sep,.depth-3 .crumb__sep,
#depth-3 .list li::before,.depth-3 .list li::before,
#depth-3 .card__n::after,.depth-3 .card__n::after,
#depth-3 .offer__dot,.depth-3 .offer__dot,
#depth-3 .diag,.depth-3 .diag,#depth-3 .slash,.depth-3 .slash{ background:var(--depth-3-accent); }
/* on the dark band ink would vanish, so the heading takes gold there */
.sec--onyx h2,.sec--onyx h3,.foot__h{ color:var(--gold); }
.depth-1 .sec--onyx h2,.depth-1 .sec--onyx h3{ color:var(--depth-1-accent); }
.depth-2 .sec--onyx h2,.depth-2 .sec--onyx h3{ color:var(--depth-2-accent); }
.depth-3 .sec--onyx h2,.depth-3 .sec--onyx h3{ color:var(--depth-3-accent); }
/* the same reasoning for the small labels that took the accent */
.card__cat,.card__n,.stat__l{ color:var(--ink-60); }
.depth-1 .card__cat,.depth-1 .card__n,.depth-1 .stat__l,#depth-1 .card__cat,#depth-1 .card__n{ color:var(--depth-1-accent); }
.depth-2 .card__cat,.depth-2 .card__n,.depth-2 .stat__l,#depth-2 .card__cat,#depth-2 .card__n{ color:var(--depth-2-accent); }
.depth-3 .card__cat,.depth-3 .card__n,.depth-3 .stat__l,#depth-3 .card__cat,#depth-3 .card__n{ color:var(--depth-3-accent); }
.stat__n{ color:var(--ink); }
.depth-1 .stat__n{ color:var(--depth-1-accent); }
.depth-2 .stat__n{ color:var(--depth-2-accent); }
.depth-3 .stat__n{ color:var(--depth-3-accent); }

.dummy{ margin-bottom:clamp(var(--space-5),3vw,var(--space-6)); }
/* peridot is the lightest accent: as type it needs darkening, while the bright
   value stays on the diagonal and the rules */
.depth-3 .sec__h,#depth-3 .sec__h,.depth-3 .stat__n,.depth-3 .stat__l,
.depth-3 .card__cat,.depth-3 .card__n,#depth-3 .card__cat,#depth-3 .card__n{ color:#6F7C00; }

/* the spec ladder reads the same on every page and on every ground:
   a gold key in the display face, an ink value one step larger */
.spec__k,.sec--onyx .spec__k,.zone--floor .spec__k{
  color:var(--gold);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(16px,1.35vw,20px); line-height:1.35;
  letter-spacing:-.005em; text-transform:none;
  padding-top:.25em;
}
.spec__v,.sec--onyx .spec__v{
  color:var(--ink); font-weight:500;
  font-size:clamp(17px,1.4vw,21px); line-height:1.45;
}
.sec--onyx .spec__v{ color:var(--chalk); }

/* the DUMMY badge gets its own reserved strip at the bottom of the block
   instead of hanging over the block's last line of text */
.dummy{ padding-bottom:26px; }
.dummy::after{ bottom:2px; }

/* the section's framing line is a summary, not body copy: it gets its own
   weight and a gap beneath it so it never reads as the first paragraph */
.sec__p{
  margin-bottom:clamp(var(--space-4),2vw,var(--space-5));
  color:var(--ink); font-weight:500;
  font-size:clamp(17px,1.4vw,21px);
}
.sec__p:last-child{ margin-bottom:0; }

/* the footer's grey is opaque where the wave meets it, so the seam disappears;
   type on it stays at full contrast */
.foot{ color:#FFFFFF; border-top:1px solid rgba(255,255,255,.22); }
.foot__p{ color:rgba(255,255,255,.82); }
.foot__nav a,.foot__bar a,.foot__bar{ color:rgba(255,255,255,.86); }
.foot__nav a:hover,.foot__bar a:hover{ color:#FFFFFF; }
.foot .mono{ color:rgba(255,255,255,.82); }

/* the page ending is one pattern: the wave, two columns — Get in Touch and
   Ready to Enroll — then the bottom bar. Same on the entry page and all sixteen. */
.foot__grid{
  display:grid; gap:clamp(var(--space-6),5vw,var(--space-8));
  grid-template-columns:1fr;
  padding-block:clamp(var(--space-7),6vw,var(--space-9));
}
@media (min-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
.foot__h{ color:var(--gold); margin-bottom:var(--space-4); }
.foot__p{ max-width:34ch; margin-bottom:var(--space-5); }
.foot__mail{
  color:#FFFFFF; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
  font-weight:600;
}
.foot__mail:hover{ border-bottom-color:var(--gold); color:var(--gold); }
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);
  padding-block:var(--space-5);
  color:rgba(255,255,255,.7);
}

/* the darkened peridot is a LIGHT-ground value; on the dark band and in the
   footer the bright accent is the readable one (~7:1 over rgb(52,52,52)) */
.depth-3 .sec--onyx .sec__h,#depth-3 .sec--onyx .sec__h,
.depth-3 .sec--onyx h2,.depth-3 .sec--onyx h3,
.depth-3 .sec--onyx .card__cat,#depth-3 .sec--onyx .card__cat,
.depth-3 .sec--onyx .card__n,#depth-3 .sec--onyx .card__n,
.depth-3 .sec--onyx .stat__n,.depth-3 .sec--onyx .stat__l,
.depth-3 .foot .sec__h,.depth-3 .foot h2{ color:var(--depth-3-accent); }

/* the band IS the depth scope on the programs page (class="sec sec--onyx"
   id="depth-3"), so the dark-ground exception has to match the element itself
   as well as its descendants */
#depth-1.sec--onyx .sec__h,#depth-1.sec--onyx .card__cat,#depth-1.sec--onyx .card__n,
#depth-1.sec--onyx .stat__n,#depth-1.sec--onyx .stat__l,.depth-1.sec--onyx .sec__h{ color:var(--depth-1-accent); }
#depth-2.sec--onyx .sec__h,#depth-2.sec--onyx .card__cat,#depth-2.sec--onyx .card__n,
#depth-2.sec--onyx .stat__n,#depth-2.sec--onyx .stat__l,.depth-2.sec--onyx .sec__h{ color:var(--depth-2-accent); }
#depth-3.sec--onyx .sec__h,#depth-3.sec--onyx .card__cat,#depth-3.sec--onyx .card__n,
#depth-3.sec--onyx .stat__n,#depth-3.sec--onyx .stat__l,.depth-3.sec--onyx .sec__h{ color:var(--depth-3-accent); }

.masthead{ padding-block:clamp(var(--space-5),3.4vw,var(--space-7)) clamp(var(--space-6),3.4vw,var(--space-7)); }

/* the filter belongs to the copy above it, so it sits close under that line
   and the first band follows straight on */
.filter{ margin-block:clamp(var(--space-3),1.6vw,var(--space-4)) clamp(var(--space-4),2.4vw,var(--space-5)); }
.sec:has(.filter){ padding-block-start:clamp(var(--space-3),1.6vw,var(--space-4)); }

/* the bottom bar carries the mark itself, small, rather than setting the name */
/* the footer mark is awaiting the correct file — drop it on the slot */
.foot__markslot{ width:190px; height:52px; }
.foot__markslot image-slot{ display:block; width:100%; height:100%; }

/* ======================================================================
   Launch pass
   ====================================================================== */

/* Orange is reserved for things you can click. Status labels (hours, "Free",
   "Upcoming", "Open") are outlined tags instead, so they no longer read as
   buttons. */
.card__h,.tbl .open,.sec--onyx .card__h{
  background:transparent; color:inherit;
  border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);
  font-weight:500;
}
.tbl .open{ border-color:var(--accent2,var(--onyx)); color:var(--accent2,var(--onyx)); font-weight:600; }

/* A card whose title is a link is clickable across its whole box. Cards
   without a link keep still on hover, so they don't pretend to be clickable. */
.card__t a::before{ content:""; position:absolute; inset:0; z-index:2; }
.card:has(.card__t a):focus-within{ outline:2px solid var(--accent2,var(--onyx)); outline-offset:3px; }
.card:not(:has(.card__t a)):hover{ transform:none; box-shadow:none; border-color:var(--stroke); }
.card:has(.card__t a) .card__t a::after{
  content:" \2192"; font-weight:400; color:var(--accent2,var(--ink-60));
}
/* partner logo in place of the category label */
.card__cat--logo{ display:flex; align-items:center; justify-content:flex-end; }
.card__cat--logo img{ display:block; height:24px; width:auto; max-width:140px; object-fit:contain; }
.card__price{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:var(--fs-body); }
.sec--onyx .card__price{ color:var(--chalk); }

/* a highlighted "enrollment open" strip */
.callout{
  display:grid; gap:var(--space-3) var(--space-5); align-items:center;
  grid-template-columns:1fr;
  background:var(--paper,#fff); border:1px solid var(--stroke-2);
  border-left:6px solid var(--accent2,var(--gold));
  padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,32px);
  margin-block:clamp(20px,2.6vw,32px);
}
@media (min-width:760px){ .callout{ grid-template-columns:1fr auto; } }
.callout__k{ font-family:var(--font-display); font-weight:600; color:var(--accent2,var(--ink)); font-size:clamp(14px,1.1vw,16px); margin-bottom:4px; }
.callout__t{ font-family:var(--font-display); font-weight:600; font-size:clamp(19px,1.8vw,24px); letter-spacing:-.015em; line-height:1.25; color:var(--ink); }
.callout__d{ color:var(--ink-60); margin-top:6px; }
.callout .btn{ white-space:nowrap; }

/* footer: one call to action, then the full site map */
.foot__grid{ grid-template-columns:1fr; }
.foot__p a{ color:var(--chalk); border-bottom:1px solid var(--chalk-40); text-decoration:none; }
.foot__p a:hover{ border-bottom-color:var(--gold); }
.sitemap{
  display:grid; gap:var(--space-5) var(--space-6);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(var(--space-6),4vw,var(--space-7));
  padding-top:clamp(var(--space-5),3vw,var(--space-6));
  border-top:1px solid var(--chalk-rule);
}
@media (min-width:860px){ .sitemap{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sitemap__h{ font-family:var(--font-display); font-weight:600; margin-bottom:var(--space-2); }
.sitemap__h a{ color:var(--gold); text-decoration:none; }
.sitemap ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sitemap li a{ color:var(--chalk-60); text-decoration:none; font-size:var(--fs-body-sm); }
.sitemap a:hover{ color:var(--chalk); text-decoration:underline; text-underline-offset:3px; }
.foot__bar{ display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }

/* phones: all four nav links fit without sideways scrolling, and the header
   gives more of the screen back to the page */
@media (max-width:760px){
  .wordmark__img{ height:58px !important; }
  .head__in{ row-gap:4px; padding-block:10px 4px; }
  .head__in .nav{ gap:4px; justify-content:space-between; overflow-x:visible; margin-inline:0; padding-inline:0; }
  .nav__link{ font-size:clamp(12px,3.4vw,16px); }
}

/* program journey: one tidy row, or two per row on medium screens */
.journey{ display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
@media (min-width:560px){ .journey{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .journey{ grid-template-columns:repeat(4,1fr); } }
.journey .journey__arrow{ display:none; }
.journey__step{ height:100%; }
/* partner logo row in page mastheads (shared) */
.plogos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,30px);margin-bottom:clamp(16px,2vw,26px)}
.plogos__slot{height:clamp(48px,5vw,72px);width:auto;max-width:clamp(150px,20vw,240px)}
.plogos__slot img{max-width:100%}

/* ---------- calmer header (desktop) ----------
   One row, smaller menu type, tighter spacing. The logo keeps its size. */
@media (min-width:761px){
  .nav{ gap:clamp(12px,1.35vw,24px); flex-wrap:nowrap; }
  .nav__link{ font-size:clamp(13px,.98vw,15.5px); padding:var(--space-1) 0; }
  .nav .btn--enroll{ font-size:clamp(13px,.98vw,15.5px); padding:var(--space-2) var(--space-5); }
}
@media (min-width:1160px){ .head__in{ flex-wrap:nowrap; } }

/* back to the MMA MEA home, the parent site: a pill, the same size as Enroll */
.nav__link--mea{
  font-weight:600; white-space:nowrap;
  border:1.5px solid var(--ink,#000); border-radius:var(--radius-pill,999px);
  padding:var(--space-2) var(--space-4); color:var(--ink,#000);
  margin-right:0;
}
.nav__link--mea::before,.nav__link--mea::after{ display:none; }
.nav__link--mea:hover{ background:var(--ink,#000); color:#fff; }
@media (max-width:760px){ .nav__link--mea{ padding:4px 10px; font-size:clamp(12px,3.4vw,15px); } }