/* ═══════════════════════════════════════════════════════════════════════
   M-A-S-T-E-R.ai — WordPress theme design system (assets/css/main.css)

   Layer 1 — ported 1:1 from m-a-s-t-e-r-3.0/src/styles.css:
     fonts, ground, links, focus ring, selection, motion.js static rules,
     hv-* hover utilities, lnk-light, .in, acc-wrap/chev/pulse-low/
     icon-pop/u-grow/tilt-in, skip-link — utility names kept verbatim.

   Layer 2 — the master-* vocabulary: the recurring inline-style idioms of the
     3.0 pages (Home/Camp/Pricing/Faq/Apply et al.) extracted into reusable
     classes with the EXACT source values. Page patterns compose these.

   Layer 3 — WordPress compatibility: core-block passthroughs for buttons,
     gentle gap neutralization inside master- shells, editor parity.

   This file is enqueued on the front end AND loaded in the editor via
   add_editor_style(). No #root / SPA dependencies.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonts (variable files shipped in assets/fonts/) ─────────────────── */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Source Serif 4, variable, 400-700. Adobe's official 4.005R release (SIL OFL),
   self-hosted rather than pulled from Google Fonts: this audience is told on
   the site that nothing about their matter leaves the room, and a headline
   face that phones a third party on every page load argues with that.

   Declaring the face here is global and harmless; what actually causes a
   download is a rule naming the family, and only [data-course="attorneys"]
   does (tokens.css section 7). The preload is likewise course-scoped in
   functions.php, because this file is 427 KB against Inter's subset 48 KB
   and Space Grotesk's 22 KB, and blog 1 has no use for it. Subsetting it to
   the latin range is worth doing before launch and is logged, not done here. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── ground (helmet globals) ─────────────────────────────────────────── */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--master-color-foolscap);
}

body {
  font-family: "Inter", Arial, sans-serif;
  color: var(--master-ink);
  -webkit-font-smoothing: antialiased;
}

/* The design sets Space Grotesk on every heading inline; in WP that
   becomes the theme default so pattern headings inherit it. */
h1,
h2,
h3,
h4 {
  font-family: "Space Grotesk", Arial, sans-serif;
}

/* A course sets its own headline face. This rule is why the token alone was not
   enough: --master-font-display could say "Source Serif 4" all day and every
   heading on the site would still come out Space Grotesk, because the family
   was hard-coded above and nothing read the token. Measured on staging before
   this line existed: h1 computed to "Space Grotesk" and the serif never loaded.
   The base rule is left alone so blog 1 renders exactly as it does today. */
[data-course] :is(h1, h2, h3, h4) {
  font-family: var(--master-font-display);
}

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

a:hover {
  color: var(--master-accent-text-pressed);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--master-focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--master-color-minium-wash);
}

input,
textarea,
button {
  font-family: "Inter", Arial, sans-serif;
}

/* ── motion.js, static ─────────────────────────────────────────────── */

.acm-hidden {
  opacity: 0;
  transform: translateY(16px);
}

.acm-ready {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.acm-in {
  opacity: 1;
  transform: none;
}

a,
button {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

a:active,
button:active {
  transform: scale(0.975);
}

img[src*="horizon-trails"] {
  animation: acmDrift 26s ease-in-out infinite alternate;
}

@keyframes acmDrift {
  from {
    transform: scale(1.08) translateX(0);
  }

  to {
    transform: scale(1.08) translateX(-34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acm-hidden {
    opacity: 1;
    transform: none;
  }

  img[src*="horizon-trails"] {
    animation: none;
  }

  a,
  button {
    transition: none;
  }

  a:active,
  button:active {
    transform: none;
  }
}

/* ── the prototypes' style-hover / style-focus states ───────────────── */

.hv-coral:hover {
  background: var(--master-accent-pressed) !important;
  color: var(--master-color-chalk) !important;
}

.hv-cobalt:hover {
  background: var(--master-color-pitch) !important;
  color: var(--master-color-gesso) !important;
}

.hv-outline:hover {
  border-color: var(--master-ink) !important;
  color: var(--master-ink) !important;
}

.hv-white-dim:hover {
  background: var(--master-color-scribe) !important;
  color: var(--master-ink) !important;
}

.hv-border-ink:hover {
  border-color: var(--master-ink) !important;
}

.hv-card:hover {
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.09) !important;
  transform: translateY(-2px);
}

.hv-row:hover {
  background: var(--master-color-tracing) !important;
}

.hv-photo {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hv-photo:hover {
  transform: scale(1.03);
}

.hv-navlink:hover {
  color: var(--master-accent-text-pressed) !important;
}

.lnk-light:hover {
  color: var(--master-color-chalk) !important;
}

.in:focus {
  border-color: var(--master-accent-text) !important;
}

/* ── micro-interaction utilities (shared; reduced-motion safe) ─────────── */

/* Animated disclosure: wrap collapsible content in .acc-wrap > .acc-inner
   and toggle .open on the wrap. */
.acc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.acc-wrap.open {
  grid-template-rows: 1fr;
}

.acc-inner {
  overflow: hidden;
  min-height: 0;
}

/* Chevron that rotates as its disclosure opens. */
.chev {
  display: inline-flex;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.chev.open {
  transform: rotate(45deg);
}

/* Low-seats pill: a soft attention pulse. */
@keyframes seatPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(154, 98, 0, 0.35);
  }

  55% {
    box-shadow: 0 0 0 5px rgba(154, 98, 0, 0);
  }
}

.pulse-low {
  animation: seatPulse 2.4s ease-out infinite;
}

/* Icon nudge on hover of the surrounding card/link. */
.icon-pop {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover > .icon-pop,
button:hover > .icon-pop,
.hv-card:hover .icon-pop,
.hv-row:hover .icon-pop {
  transform: scale(1.12) rotate(-4deg);
}

/* Growing-underline link affordance (footer + inline text links). */
.u-grow {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 2px;
}

.u-grow:hover {
  background-size: 100% 1.5px;
}

/* Subtle lift for photo figures beyond the scale hover. */
.tilt-in {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tilt-in:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .acc-wrap,
  .chev,
  .icon-pop,
  .u-grow,
  .tilt-in {
    transition: none;
  }

  .pulse-low {
    animation: none;
  }

  a:hover > .icon-pop,
  button:hover > .icon-pop,
  .hv-card:hover .icon-pop,
  .hv-row:hover .icon-pop,
  .tilt-in:hover {
    transform: none;
  }
}

/* ── A11y: skip link + keyboard focus (coordinator-owned) ── */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: var(--master-color-pitch);
  color: var(--master-color-gesso);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-64px);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--master-focus-ring);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--master-focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Layer 2 — the master-* vocabulary
   Values are extracted verbatim from the 3.0 page components.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── containers ──────────────────────────────────────────────────────── */

/* The standard page column: maxWidth 1140, margin "0 auto". */
/* The 3.0 originals are plain divs carrying BOTH max-width and the section
 * padding, so the max-width applies to the content box. WordPress block styles
 * force border-box globally, which would shrink every section by the 64px of
 * horizontal padding — content-box restores the original measure exactly. */
.master-container {
  box-sizing: content-box;
  max-width: 1140px;
  margin: 0 auto;
}

/* Forms/enroll column (Apply): maxWidth 920. */
.master-container--narrow {
  box-sizing: content-box;
  max-width: 920px;
}

/* Reading column (FAQ, Legal): maxWidth 860. */
.master-container--text {
  box-sizing: content-box;
  max-width: 860px;
}

/* ── section paddings (the recurring clamp() rhythms) ────────────────── */

/* Primary section rhythm — the most used content-section padding. */
.master-section {
  padding: clamp(56px, 8vw, 88px) clamp(16px, 4vw, 32px);
}

/* Band rhythm — white/editorial bands and feature splits. */
.master-section--band {
  padding: clamp(52px, 7vw, 80px) clamp(16px, 4vw, 32px);
}

/* Hero rhythm — page headers. */
.master-section--hero {
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 32px) clamp(48px, 7vw, 80px);
}

/* Short rhythm — dates strips, figure sections. */
.master-section--short {
  padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 32px);
}

/* Ribbon rhythm — slim logistics bands. */
.master-section--ribbon {
  padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 32px);
}

/* Kill one edge when a section hands off to the next (photo band → CTA). */
.master-section--flush-bottom {
  padding-bottom: 0;
}

.master-section--flush-top {
  padding-top: 0;
}

/* ── eyebrows (kicker lines above headings) ──────────────────────────── */

.master-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0;
}

.master-eyebrow--red    { color: var(--master-accent-text); }
.master-eyebrow--teal   { color: var(--master-accent-text); }
.master-eyebrow--amber  { color: var(--master-accent-text); }
.master-eyebrow--sky    { color: var(--master-accent-text); }
.master-eyebrow--green  { color: var(--master-accent-text); }
.master-eyebrow--gold   { color: var(--master-accent-text); } /* on ink bands */
.master-eyebrow--violet { color: var(--master-accent-text); } /* Master Mind */

/* ── badges (pill chips, e.g. the hero trio) ─────────────────────────── */

.master-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 999px;
  padding: 7px 14px;
  margin: 0;
}

.master-badge--green { color: #0b7d58; background: var(--master-status-open-ground); }
.master-badge--teal  { color: #00789e; background: var(--master-status-open-ground); }

/* ── headings ────────────────────────────────────────────────────────── */

.master-h1 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

/* Narrow-page hero title (FAQ/Apply/About scale). */
.master-h1--sm {
  font-size: clamp(34px, 5.5vw, 52px);
  line-height: 1.02;
}

.master-h2 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}

/* Section header inside a page body (Camp "Two days…"). */
.master-h2--md {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.08;
}

/* Editorial/split headings ("Real sessions…"). */
.master-h2--sm {
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Slim band headings ("Upcoming dates"). */
.master-h2--xs {
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Card titles (day cards, policy cards). */
.master-h3 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  margin: 0;
  text-wrap: pretty;
}

.master-h3--lg {
  font-size: 22px;
}

/* ── body text ───────────────────────────────────────────────────────── */

/* Section intro paragraph. */
.master-lead {
  color: var(--master-color-graphite);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Hero subtitle scale. */
.master-lead--hero {
  font-size: clamp(17px, 2.3vw, 19px);
  line-height: 1.5;
}

/* Card/caption copy. */
.master-lead--sm {
  font-size: 14.5px;
  line-height: 1.6;
}

/* Text color helpers (the palette's four text tones). */
.master-text-slate { color: var(--master-color-graphite); } /* body on paper/white */
.master-text-gray  { color: var(--master-color-graphite); } /* muted, incl. on ink */
.master-text-cloud { color: var(--master-color-pumice); } /* readable body on ink */
.master-text-navy  { color: var(--master-ink); } /* strong body on paper */
.master-text-white { color: var(--master-color-chalk); }

/* ── buttons ─────────────────────────────────────────────────────────── */

/* Base: the 3.0 CTA (padding 15px 28px, radius 8, 600/16).
   Works on a bare <a>/<button> or on a core button block. */
.master-btn,
.wp-block-button.master-btn .wp-block-button__link {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.master-btn--sm,
.wp-block-button.master-btn--sm .wp-block-button__link {
  padding: 12px 22px;
  font-size: 14px;
}

.master-btn--xs,
.wp-block-button.master-btn--xs .wp-block-button__link {
  padding: 10px 18px;
  font-size: 13.5px;
}

.master-btn--coral,
.wp-block-button.master-btn--coral .wp-block-button__link {
  background: var(--master-accent);
  color: var(--master-color-chalk);
}

.master-btn--cobalt,
.wp-block-button.master-btn--cobalt .wp-block-button__link {
  background: var(--master-accent);
  color: var(--master-color-chalk);
}

.master-btn--ink,
.wp-block-button.master-btn--ink .wp-block-button__link {
  background: var(--master-color-pitch);
  color: var(--master-color-gesso);
}

.master-btn--amber,
.wp-block-button.master-btn--amber .wp-block-button__link {
  background: var(--master-accent);
  color: var(--master-color-chalk);
}

.master-btn--sky,
.wp-block-button.master-btn--sky .wp-block-button__link {
  background: var(--master-accent);
  color: var(--master-color-chalk);
}

/* White outlined (paper sections) — pair with hv-outline. */
.master-btn--white-outline,
.wp-block-button.master-btn--white-outline .wp-block-button__link {
  background: var(--master-color-chalk);
  color: var(--master-ink);
  border: 1.5px solid var(--master-color-scribe);
}

/* Solid white (on ink bands) — pair with hv-white-dim. */
.master-btn--white,
.wp-block-button.master-btn--white .wp-block-button__link {
  background: var(--master-color-chalk);
  color: var(--master-ink);
}

/* CTA row: display flex, gap 14, wrap. */
.master-btns,
.wp-block-buttons.master-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.master-btns--center,
.wp-block-buttons.master-btns--center {
  justify-content: center;
}

/* ── cards ───────────────────────────────────────────────────────────── */

/* Paper card: white, hairline border, radius 16. Pair with hv-card. */
.master-card {
  background: var(--master-color-chalk);
  border: 1px solid var(--master-color-scribe);
  border-radius: 16px;
  padding: 20px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Cream card used on white bands (Camp intro day cards). */
.master-card--cream {
  background: var(--master-color-foolscap);
}

/* Dark cohort/date card (on ink bands). */
.master-card--navy {
  background: var(--master-color-soot);
  border: none;
  color: var(--master-color-gesso);
}

/* Roomier padding (pricing tiers, form shells). */
.master-card--pad-lg {
  padding: clamp(22px, 3vw, 30px);
}

/* 4px phase accents along the top edge. */
.master-card--top-green  { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-amber  { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-coral  { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-sky    { border-top: 4px solid var(--master-accent-mark); }
/* Cobalt lived only as .curriculum-card--top-cobalt, which meant the stage
   cards could not be generated by one loop — the fifth card needed a special
   case. Promoted here so every accent a course profile can name resolves the
   same way. The old class is kept in curriculum.css for any stored content
   still carrying it. */
.master-card--top-cobalt { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-violet { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-red    { border-top: 4px solid var(--master-accent-mark); }
.master-card--top-teal   { border-top: 4px solid var(--master-accent-mark); }

/* ── the course hub ──────────────────────────────────────────────────────
   The root page of the network. Built from the existing card family rather
   than a new visual language, because the hub is the front door to the same
   school — it should read as the family it belongs to, not as a directory
   bolted on top of one. */

.master-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0 8px;
}

.master-hub__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--master-color-chalk);
  border: 1px solid var(--master-color-scribe);
  border-top: 4px solid var(--master-accent-mark);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.master-hub__card-name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--master-ink);
}

.master-hub__card-meta {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--master-color-graphite);
}

/* The featured course. Deliberately not a bigger tile — a tile says "one of
   several", and with one course that reads as a directory missing its other
   entries. Picture, promise, facts, button: the shape of a thing being
   recommended, which still reads correctly once a second course sits under it.

   WRITTEN MOBILE-FIRST, ON PURPOSE. The stacked and side-by-side layouts need
   genuinely different image mechanics, and expressing that as a desktop rule
   plus an override meant two competing `height` declarations on the same
   element. That fight is what put a 469px photo inside a 300px box and buried
   the course name underneath it. Mobile-first means exactly ONE height
   declaration is live at any width, so there is nothing to win. */

.master-hub__feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--master-color-chalk);
  border: 1px solid var(--master-color-scribe);
  border-top: 4px solid var(--master-accent-mark);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Stacked: the figure just wraps, and the IMAGE carries the height. An <img>
   is a replaced element — give it a real length and it cannot surprise you.

   THE PARENT CLASS IS LOAD-BEARING, NOT DECORATION. pages/_chrome.css carries
   a blanket `.master-page__content img { height: auto }` for editor images, and it
   is enqueued AFTER main.css. `.master-hub__feature-figure img` has exactly the
   same specificity (0,1,1), so the later sheet won and every height set here
   was silently discarded — the photo fell back to the 1600x900 attribute ratio
   and overran the card. Qualifying with .master-hub__feature takes this to (0,2,1)
   and settles it on specificity rather than on enqueue order. */
.master-hub__feature-figure {
  display: block;
  overflow: hidden;
  background: var(--master-color-tracing);
}

.master-hub__feature .master-hub__feature-figure img {
  display: block;
  width: 100%;
  height: clamp(170px, 42vw, 300px);
  object-fit: cover;
}

.master-hub__feature-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.master-hub__eyebrow {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--master-accent-text);
}

.master-hub__feature-name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--master-ink);
}

.master-hub__feature-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--master-color-graphite);
}

.master-hub__facts {
  margin-top: 2px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--master-color-graphite);
}

.master-hub__cta {
  margin-top: auto;
  padding-top: 14px;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--master-accent-text);
}

@media (max-width: 460px) {
  .master-hub__feature-body {
    padding: 20px;
  }

  .master-hub__feature-name {
    font-size: 22px;
  }

  .master-hub__facts {
    font-size: 13px;
  }
}

/* Side by side, once there is room for a readable text column beside the
   photo. Here — and ONLY here — the figure is a stretched grid item with a
   definite height from the body column, so the image can fill it absolutely. */
@media (min-width: 901px) {
  .master-hub__feature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .master-hub__feature-figure {
    position: relative;
    min-height: 260px;
  }

  .master-hub__feature .master-hub__feature-figure img {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .master-hub__feature-body {
    padding: 32px;
  }

  .master-hub__feature-name {
    font-size: 30px;
  }
}

/* Nothing listed is a real state, not an error: every course can legitimately
   be in draft or pre-sell at once. It gets a sentence, not an empty grid. */
.master-hub__empty {
  margin: 32px 0;
  padding: 24px;
  background: var(--master-color-foolscap);
  border-radius: 16px;
  color: var(--master-color-graphite);
}

/* ── full-bleed bands ────────────────────────────────────────────────── */

/* Ink band: dark section wrapper (ribbon, dates, Master Mind, checkout). */
.master-band {
  background: var(--master-color-pitch);
  color: var(--master-color-gesso);
}

.master-band a {
  color: var(--master-color-pumice);
}

/* Navy panel tone (inner card surface of ink bands). */
.master-band--navy {
  background: var(--master-color-soot);
}

/* White editorial band with hairline separators. */
.master-band--white {
  background: var(--master-color-chalk);
  border-top: 1px solid var(--master-color-caliper);
  border-bottom: 1px solid var(--master-color-caliper);
}

/* Inset ink panel (rounded band inside a paper section). */
.master-panel-ink {
  background: var(--master-color-pitch);
  color: var(--master-color-gesso);
  border-radius: 16px;
  padding: clamp(20px, 3.5vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

/* ── photo figures ───────────────────────────────────────────────────── */

/* Rounded photo frame — pair with tilt-in for the lift hover. */
.master-photo-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.1);
}

/* Hero-scale shadow. */
.master-photo-figure--shadow-lg {
  box-shadow: 0 12px 36px rgba(17, 24, 39, 0.14);
}

.master-photo-figure--flat {
  box-shadow: none;
}

.master-photo-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Neutralize core image-block wrappers inside the frame. */
.master-photo-figure .wp-block-image {
  margin: 0;
}

.master-photo-figure .wp-block-image img {
  border-radius: 0;
  vertical-align: bottom;
}

/* ── seat pills ──────────────────────────────────────────────────────── */

.master-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.master-pill--open { color: #0b7d58; background: var(--master-status-open-ground); }
.master-pill--low  { color: #9a6200; background: var(--master-color-annotation); } /* add .pulse-low */
.master-pill--wait { color: var(--master-color-minium); background: #ffe6e7; }

/* ── grids ───────────────────────────────────────────────────────────── */

/* Two-up feature split (text ⇄ photo), collapses at 300px tracks. */
.master-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* Three-up card/editorial grid. */
.master-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* Four-up tier/cohort grid. */
.master-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Day-card rail: auto-fill so cards keep their width on any count. */
.master-grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

/* ── section header stack (eyebrow + h2 + lead) ──────────────────────── */

.master-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

/* ── closing CTA band with the path-grid backdrop ────────────────────── */

.master-cta-band {
  position: relative;
  overflow: hidden;
}

.master-cta-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
}

.master-cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Layer 3 — WordPress compatibility
   ═══════════════════════════════════════════════════════════════════════ */

/* master-btn classes land on the wp-block-button WRAPPER; the visual styles
   are re-applied to the inner link above, so strip them off the wrapper. */
.wp-block-button[class*="master-btn"] {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* hv-* hover utilities pass through the core button wrapper to the link. */
.wp-block-button.hv-coral:hover .wp-block-button__link {
  background: var(--master-accent-pressed) !important;
  color: var(--master-color-chalk) !important;
}

.wp-block-button.hv-cobalt:hover .wp-block-button__link {
  background: var(--master-color-pitch) !important;
  color: var(--master-color-gesso) !important;
}

.wp-block-button.hv-outline:hover .wp-block-button__link {
  border-color: var(--master-ink) !important;
  color: var(--master-ink) !important;
}

.wp-block-button.hv-white-dim:hover .wp-block-button__link {
  background: var(--master-color-scribe) !important;
  color: var(--master-ink) !important;
}

/* When hv-* sits on the wrapper, keep the wrapper itself untouched. */
.wp-block-button.hv-coral:hover,
.wp-block-button.hv-cobalt:hover,
.wp-block-button.hv-outline:hover,
.wp-block-button.hv-white-dim:hover {
  background: transparent !important;
}

/* Neutralize default block-gap margins ONLY inside master- component shells —
   these shells carry their own gaps (use Stack/Row groups inside them). */
.master-card > :where(h1, h2, h3, h4, p, ul, figure),
.master-section-head > :where(h1, h2, h3, h4, p),
.master-cta-band__inner > :where(h1, h2, h3, h4, p),
.master-panel-ink > :where(h1, h2, h3, h4, p) {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Core columns/groups used as master- grids must not double up gutters. */
.wp-block-columns.master-grid-2,
.wp-block-columns.master-grid-3,
.wp-block-columns.master-grid-4 {
  display: grid;
}

/* ── editor parity (loaded via add_editor_style) ─────────────────────── */

.editor-styles-wrapper {
  background: var(--master-color-foolscap);
  font-family: "Inter", Arial, sans-serif;
  color: var(--master-ink);
  -webkit-font-smoothing: antialiased;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
  font-family: "Space Grotesk", Arial, sans-serif;
}

/* ── Video intro ──────────────────────────────────────────────────────────
   The writing that used to live inside the player artwork. It belongs on the
   page, and it is set the way a magazine sets a feature opener: a small
   department line, a display pull-quote with its opening mark hung into the
   left margin, a rule under the byline, and a standfirst that is visibly
   larger than the paragraphs beneath it. */
.master-video-intro {
  display: flex;
  flex-direction: column;
  max-width: 62ch;
  margin: 0 0 clamp(26px, 3.4vw, 40px);
}

.master-video-intro--tight { margin-bottom: clamp(18px, 2.4vw, 26px); }

.master-video-intro__eyebrow {
  margin: 0 0 14px;
  color: var(--master-accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.master-video-intro__quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--master-ink);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  /* The opening quotation mark hangs into the margin so the first letter of
     the line, not the punctuation, sits on the text edge. */
  text-indent: -0.42em;
}

.master-video-intro__attrib {
  margin: 18px 0 0;
  padding-top: 16px;
  position: relative;
  color: var(--master-color-graphite);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
}

.master-video-intro__attrib::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, var(--master-accent-mark), transparent);
}

.master-video-intro__attrib em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
}

.master-video-intro__body {
  margin: 18px 0 0;
  color: var(--master-color-graphite);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.68;
}

/* The standfirst — the first paragraph after the byline carries the weight. */
.master-video-intro__body:first-of-type {
  color: var(--master-ink);
  font-size: clamp(16.5px, 1.8vw, 19px);
  line-height: 1.55;
}

/* ── Featured video section ───────────────────────────────────────────────
   The pattern for any featured film or interview: the writing first, at a
   size that says it was written on purpose, then the player at full column
   width. Used by /curriculum/ and available to the next one. */
.master-feature-video {
  padding: 0 clamp(16px, 4vw, 32px) clamp(48px, 7vw, 80px);
}

/* The separation from whatever precedes it is now done by the ribbon band, so
   the hairline that used to sit here would be a second, weaker rule directly
   under a strong one. Space only. */
.master-feature-video__inner {
  display: flex;
  flex-direction: column;
  padding-top: clamp(40px, 6vw, 72px);
}

.master-feature-video__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 980px;
}

.master-feature-video__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: var(--master-color-pitch);
  box-shadow: 0 18px 46px rgba(17, 24, 39, 0.16);
}

/* ── Ribbon ───────────────────────────────────────────────────────────────
   The full-bleed fact strip. It began as .master-home-ribbon on the homepage;
   promoted here so any page can break a long scroll with one without
   depending on the homepage's stylesheet. Pair with .master-band on the outer
   wrapper and .master-container.master-section--ribbon on the inner. */
.master-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
}

.master-ribbon__lead {
  margin: 0;
  color: var(--master-color-chalk);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.master-ribbon__meta {
  margin: 0;
  color: var(--master-color-graphite);
  font-size: 14px;
  line-height: 1.5;
}

.master-ribbon__meta a {
  color: var(--master-color-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── the attorneys course: the phase palette ─────────────────────────────
   The fork collapsed every one of these onto a single green, so a "coral" top
   rule, an "amber" one and a "violet" one all painted #0B5A4C and the phase
   distinction README §4.1 asks for did not exist in the CSS at all.

   The class names survived that collapse and still describe the hue they were
   named for, so they map onto the redesign's phases by their own names. Scoped,
   because on the hub these are all still one colour and turning them into five
   would be a change to a site this redesign was not asked to touch.

   Phase colour is a 4px rule, a 10px dot, an eyebrow or a pill border — never a
   filled block (README §4.1). */
[data-course="attorneys"] .master-card--top-green,
[data-course="attorneys"] .master-card--top-teal   { border-top-color: var(--master-phase-kit); }
[data-course="attorneys"] .master-card--top-sky,
[data-course="attorneys"] .master-card--top-cobalt { border-top-color: var(--master-phase-intro); }
[data-course="attorneys"] .master-card--top-amber  { border-top-color: var(--master-phase-intensive); }
[data-course="attorneys"] .master-card--top-red,
[data-course="attorneys"] .master-card--top-coral  { border-top-color: var(--master-phase-capstone); }
[data-course="attorneys"] .master-card--top-violet { border-top-color: var(--master-phase-mastermind); }

/* ═══════════════════════════════════════════════════════════════════════
   THE ATTORNEYS COURSE — shared components (phase 4, README §4.2 and §4.4)

   .master-container (1140, content-box) and .master-section
   (clamp(56px, 8vw, 88px)) already match README §4.3 exactly and are left
   alone. What follows is the component layer: type scale, buttons, cards,
   pills, the ledger table, accordions, figures, bands.

   Scoped, and naming only semantic aliases — so a band's values follow the
   ground it is on rather than being written twice.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── type (§4.2) ─────────────────────────────────────────────────────── */
/* The headline serif carries a tighter measure than the sans it replaces, so
   the sizes come down slightly and the tracking goes negative. */
[data-course="attorneys"] .master-h1 {
  font-family: var(--master-font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

[data-course="attorneys"] .master-h2 {
  font-family: var(--master-font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

[data-course="attorneys"] .master-h2--sm,
[data-course="attorneys"] .master-h2--xs {
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

[data-course="attorneys"] .master-h3 {
  font-family: var(--master-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

[data-course="attorneys"] .master-lead {
  font-family: var(--master-font-ui);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--master-ink-secondary);
}

/* Body never below 17px, and prose is held to a readable measure. This
   audience skews older and analytical; §9 makes both acceptance criteria. */
[data-course="attorneys"] .master-container--text p,
[data-course="attorneys"] .master-section p:not([class]) {
  font-size: 17px;
  line-height: 1.6;
  max-width: 70ch;
}

/* "M-A-S-T-E-R.ai" must never uppercase its suffix, even inside a label that
   uppercases everything else. */
[data-course="attorneys"] .master-eyebrow .ai,
[data-course="attorneys"] .master-footer__col-title .ai {
  text-transform: none;
}

/* ── buttons (§4.4) ──────────────────────────────────────────────────── */
[data-course="attorneys"] .master-btn,
[data-course="attorneys"] .wp-block-button.master-btn .wp-block-button__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: var(--master-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--master-accent);
  color: var(--master-ink-reversed);
  border: 0;
  transition: background 240ms ease-out, border-color 240ms ease-out;
}

[data-course="attorneys"] .master-btn:hover,
[data-course="attorneys"] .master-btn:focus-visible,
[data-course="attorneys"] .wp-block-button.master-btn .wp-block-button__link:hover {
  background: var(--master-accent-pressed);
  color: var(--master-ink-reversed);
}

/* The outline button reads off whatever ground it is on: ink on paper, and a
   translucent light rule on a band — one rule, because --master-ink already
   flips inside an inverted region. */
[data-course="attorneys"] .master-btn--ink,
[data-course="attorneys"] .master-btn--white-outline {
  background: transparent;
  color: var(--master-ink);
  border: 1px solid var(--master-ink);
}

[data-course="attorneys"] .master-btn--ink:hover,
[data-course="attorneys"] .master-btn--white-outline:hover {
  background: var(--master-surface-recessed);
  color: var(--master-ink);
}

[data-course="attorneys"] [data-master-surface="inverted"] .master-btn--white-outline,
[data-course="attorneys"] [data-master-surface="inverted"] .master-btn--ink {
  color: var(--master-ink-reversed);
  border-color: color-mix(in srgb, var(--master-ink) 55%, transparent);
  background: transparent;
}

[data-course="attorneys"] [data-master-surface="inverted"] .master-btn--white-outline:hover,
[data-course="attorneys"] [data-master-surface="inverted"] .master-btn--ink:hover {
  border-color: var(--master-ink-reversed);
  background: transparent;
}

[data-course="attorneys"] .master-btn--sm { min-height: 44px; padding: 12px 20px; font-size: 15px; }

/* ── cards (§4.4) ────────────────────────────────────────────────────── */
/* The border moves from --master-rule (scribe, a rule that carries MEANING)
   to --master-rule-hairline (caliper, decorative). A card outline is not a
   semantic boundary and scribe is heavy enough to read as one. */
[data-course="attorneys"] .master-card {
  background: var(--master-surface);
  border: 1px solid var(--master-rule-hairline);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out, transform 240ms ease-out;
}

[data-course="attorneys"] .master-card--pad-lg { padding: clamp(24px, 3.4vw, 32px); }

[data-course="attorneys"] a.master-card:hover,
[data-course="attorneys"] .master-card:has(a:hover) {
  border-color: var(--master-ink);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--master-ink) 16%, transparent);
  transform: translateY(-2px);
}

/* A phase card keeps its 4px rule when it gains a hairline border. */
[data-course="attorneys"] [class*="master-card--top-"] { border-top-width: 4px; }

/* ── pills (§4.4) ────────────────────────────────────────────────────── */
[data-course="attorneys"] .master-pill {
  font-family: var(--master-font-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--master-rule-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--master-ink);
}

[data-course="attorneys"] [data-master-surface="inverted"] .master-pill {
  border-color: color-mix(in srgb, var(--master-ink) 45%, transparent);
  color: var(--master-ink);
}

/* ── the ledger table (§4.4) ─────────────────────────────────────────── */
/* Program map, the pricing comparison, the logistics rows. Figures are
   right-aligned and tabular so a column of prices reads as a column. */
[data-course="attorneys"] .master-section table,
[data-course="attorneys"] .master-container table {
  width: 100%;
  border-collapse: collapse;
}

[data-course="attorneys"] .master-section th,
[data-course="attorneys"] .master-container th {
  font-family: var(--master-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--master-ink-secondary);
  text-align: left;
  padding: 14px 12px;
  border-bottom: 2px solid var(--master-ink);
}

[data-course="attorneys"] .master-section td,
[data-course="attorneys"] .master-container td {
  font-size: 16.5px;
  line-height: 1.5;
  padding: 14px 12px;
  border-bottom: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] .master-section tbody tr:hover,
[data-course="attorneys"] .master-container tbody tr:hover {
  background: var(--master-accent-tint);
}

[data-course="attorneys"] .master-section td:first-child,
[data-course="attorneys"] .master-container td:first-child { font-weight: 600; }

[data-course="attorneys"] .master-section td:not(:first-child),
[data-course="attorneys"] .master-container td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* ── accordions (§4.4) ───────────────────────────────────────────────── */
[data-course="attorneys"] details > summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--master-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--master-ink);
  cursor: pointer;
  list-style: none;
}

[data-course="attorneys"] details > summary::-webkit-details-marker { display: none; }
[data-course="attorneys"] details > summary::marker { content: ""; }

[data-course="attorneys"] details {
  border-bottom: 1px solid var(--master-rule-hairline);
}

[data-course="attorneys"] details[open] > summary { padding-bottom: 8px; }

/* ── figures and bands (§4.3, §4.4) ──────────────────────────────────── */
[data-course="attorneys"] .master-photo-figure {
  border-radius: 16px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--master-ink) 16%, transparent);
}

[data-course="attorneys"] .master-photo-figure--flat {
  border-radius: 12px;
  box-shadow: none;
}

[data-course="attorneys"] .master-photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Every ink band carries the crown, at 6%, bottom-right, inert — the same
   treatment the footer gets, by the same mask so the artwork's own navy
   cannot make it disappear. */
[data-course="attorneys"] .master-band--navy,
[data-course="attorneys"] .master-panel-ink,
[data-course="attorneys"] .master-section--band {
  position: relative;
  overflow: hidden;
}

[data-course="attorneys"] .master-band--navy::after,
[data-course="attorneys"] .master-panel-ink::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: clamp(320px, 34vw, 520px);
  aspect-ratio: 1 / 1;
  background: var(--master-ink);
  -webkit-mask: url("../brand/logo/emblem-attorneys.svg") right bottom / contain no-repeat;
  mask: url("../brand/logo/emblem-attorneys.svg") right bottom / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

[data-course="attorneys"] .master-panel-ink {
  border-radius: 16px;
  padding: clamp(28px, 4vw, 36px);
}

[data-course="attorneys"] .master-panel-ink > * { position: relative; z-index: 1; }

/* ── the closing CTA band (§4.3) ─────────────────────────────────────── */
[data-course="attorneys"] .master-cta-band {
  background: var(--master-ground);
  text-align: center;
}

[data-course="attorneys"] .master-cta-band__bg {
  background: url("../svg/master-path-grid.svg") center / cover no-repeat;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  [data-course="attorneys"] .master-card,
  [data-course="attorneys"] .master-btn {
    transition-duration: 150ms;
  }
  [data-course="attorneys"] a.master-card:hover,
  [data-course="attorneys"] .master-card:has(a:hover) {
    transform: none;
  }
}

/* Ledger tables stack on a phone rather than scrolling sideways: a text table
   that scrolls horizontally is a table most readers never finish (§4.4). */
@media (max-width: 720px) {
  [data-course="attorneys"] .master-section thead,
  [data-course="attorneys"] .master-container thead { display: none; }

  [data-course="attorneys"] .master-section tr,
  [data-course="attorneys"] .master-container tr {
    display: block;
    border-bottom: 1px solid var(--master-rule-hairline);
    padding: 8px 0;
  }

  [data-course="attorneys"] .master-section td,
  [data-course="attorneys"] .master-container td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    padding: 6px 0;
  }
}