/* ==========================================================================
   Titus Taekwon-Do Institute
   Dojang Editorial design system
   Single stylesheet for the public site.

   Sections
     1. Tokens
     2. Base / reset
     3. Typography
     4. Layout: wrap, bands, rules
     5. Chrome: banner, header, nav, overlay, footer
     6. Components: buttons, media, cards, credentials, quote, events, cta
     7. Hero
     8. Reveals
     9. Utilities
    10. Breakpoints
    11. Calendar (site/events.html, teaser fallback on site/index.html)
    12. Event detail (site/event.html) and registration confirmation
    13. Trial booking (site/contact.html, site/booking-confirmed.html)
    14. Editorial split rows (site/school.html programs, site/about.html bios)
    15. School: competition note and five-level pathway (site/school.html)
    16. About: editorial credentials, pull quote, milestone band
    17. Schedule: weekly grid and agenda (site/schedule.html)
    18. Contact: info block and mailto form (site/contact.html)
    19. Policies: typographic sections (site/policies.html)
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
  /* Palette */
  --ink:   #14100E;
  --bone:  #EFEAE1;
  --ox:    #6E1614;
  --brass: #B08A4A;
  --stone: #8A7F70;
  --paper: #FBF9F5;

  /* Derived shades (kept few, kept honest).
     --stone is the spec token and clears AA on ink (4.8:1). On bone it only
     reaches 3.3:1, so light surfaces use --stone-deep, the same hue pushed
     down to 5.1:1. Both stay in the Dojang palette. */
  --ox-deep:    #571110;
  --stone-deep: #6B6156;
  --ink-soft:   rgba(20, 16, 14, 0.66);
  --ink-rule:   rgba(20, 16, 14, 0.14);
  --ink-rule-2: rgba(20, 16, 14, 0.08);
  --bone-soft:   rgba(239, 234, 225, 0.72);
  --bone-strong: rgba(239, 234, 225, 0.86);
  --bone-rule:   rgba(239, 234, 225, 0.20);
  --brass-rule: rgba(176, 138, 74, 0.45);

  /* Type families */
  --font-display: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --font-body: Epilogue, "Helvetica Neue", Arial, sans-serif;
  --font-ui: Archivo, "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-hero:    clamp(3rem, 7.5vw, 6.5rem);
  --fs-display: clamp(2.125rem, 4.4vw, 3.5rem);
  --fs-title:   clamp(1.375rem, 2.1vw, 1.875rem);
  --fs-quote:   clamp(1.5rem, 3.1vw, 2.5rem);
  --fs-lede:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.6875rem;
  --fs-ui:      0.75rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Rhythm */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(4.5rem, 8.5vw, 8.5rem);
  --head-h: 74px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --dur: 0.7s;

  /* Photography treatment, applied everywhere images appear */
  --photo-filter: sepia(0.22) saturate(0.72) contrast(1.05);
}


/* 2. Base / reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Author-level [hidden]. The user agent's own rule is weaker than any author
   `display`, so every component that sets one (.btn's inline-flex, the flex
   on .reg-canceled, the grids and flexes below) would otherwise stay on
   screen while hidden. One rule here beats a scoped patch per component, and
   the whole site drives visibility through the hidden attribute. admin.css
   carries the identical rule for the identical reason. */
[hidden] { display: none !important; }

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

.on-ink :focus-visible,
.site-foot :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--bone);
}

::selection {
  background: var(--ink);
  color: var(--bone);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: none; }


/* 3. Typography
   ========================================================================== */

.display,
.hero-title,
.section-title,
.card-title,
.quote-text,
.wordmark,
.event-day {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

.display {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero-title em,
.display em,
.section-title em {
  font-style: italic;
  font-weight: 400;
}

.section-head {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.section-sub {
  margin-top: var(--sp-4);
  color: var(--stone-deep);
  font-size: var(--fs-lede);
  line-height: 1.6;
  text-wrap: pretty;
}

.on-ink .section-sub { color: var(--bone-soft); }

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-deep);
  margin-bottom: var(--sp-4);
}

/* Brass is legible on solid ink (5.9:1). Over photography the rule is bone. */
.on-ink .eyebrow { color: var(--brass); }
.hero .eyebrow { color: var(--bone); }

.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow-rule::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--brass);
  flex: none;
}
.section-head .eyebrow-rule { justify-content: center; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-soft);
}
.on-ink .lede { color: var(--bone-soft); }

.meta {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-deep);
}


/* 4. Layout: wrap, bands, rules
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band-y);
}

.band-bone  { background: var(--bone); }
.band-paper { background: var(--paper); }
.band-ink   { background: var(--ink); color: var(--bone); }
.band-ox    { background: var(--ox); color: var(--bone); }

.on-ink { color: var(--bone); }
.on-ink a { color: var(--bone); }

.rule {
  height: 1px;
  border: 0;
  background: var(--ink-rule);
}
.on-ink .rule { background: var(--bone-rule); }


/* 5. Chrome
   ========================================================================== */

/* 5a. Closure banner (populated by script.js from /api/banner) ------------- */

.closure-banner {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.7rem var(--gutter);
}
.closure-banner b {
  color: var(--brass);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.6rem;
}

/* 5b. Header -------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
}

.site-head-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--head-h);
}

.wordmark {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.wordmark span { font-style: italic; }
.wordmark:hover { color: var(--ox); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.9rem);
}

.nav-link {
  display: inline-block;
  position: relative;
  padding: 0.35rem 0;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] {
  color: var(--ox);
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-link-out { color: var(--stone-deep); }
.nav-link-out:hover { color: var(--ink); }

.head-cta { padding: 0.8rem 1.35rem; font-size: 0.6875rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.6rem 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-toggle-bars {
  display: block;
  width: 26px;
  height: 10px;
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }

/* 5c. Mobile overlay menu ------------------------------------------------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

.nav-overlay-top {
  display: flex;
  align-items: center;
  min-height: var(--head-h);
  border-bottom: 1px solid var(--ink-rule);
}
.nav-overlay-top .wordmark { margin-right: auto; }

.nav-close {
  background: none;
  border: 0;
  padding: 0.6rem 0 0.6rem 1rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-overlay-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-7);
}

.nav-overlay-links li + li { border-top: 1px solid var(--ink-rule-2); }

.nav-overlay-links a {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav-overlay-links a[aria-current="page"] { color: var(--ox); font-style: italic; }
.nav-overlay-links .out {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
  padding-top: 1.2rem;
}

.nav-overlay-foot {
  border-top: 1px solid var(--ink-rule);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
.nav-overlay-foot .btn { flex: 1 1 14rem; }

html.is-nav-open, html.is-nav-open body { overflow: hidden; }

/* 5d. Cinematic header overlay (site/index.html only) ---------------------
   Opt-in via body.hero-cinematic. The header keeps its normal sticky flow
   position, but a negative bottom margin pulls the hero up underneath it so
   the header floats over the photo instead of pushing it down. Only colour
   and border transition on scroll (script.js toggles body.is-scrolled past
   ~60px) - the header's box never changes size, so nothing reflows. */

body.hero-cinematic .site-head {
  margin-bottom: calc(var(--head-h) * -1);
  transition: background-color 0.3s var(--ease), border-bottom-color 0.3s var(--ease);
}

body.hero-cinematic:not(.is-scrolled) .site-head {
  background-color: transparent;
  border-bottom-color: transparent;
}

body.hero-cinematic:not(.is-scrolled) .site-head .wordmark,
body.hero-cinematic:not(.is-scrolled) .nav-link,
body.hero-cinematic:not(.is-scrolled) .nav-toggle {
  color: var(--bone);
}
body.hero-cinematic:not(.is-scrolled) .site-head .wordmark:hover { color: var(--brass); }

body.hero-cinematic:not(.is-scrolled) .nav-link[aria-current="page"] { color: var(--bone); }

body.hero-cinematic:not(.is-scrolled) .nav-link-out { color: var(--bone-soft); }
body.hero-cinematic:not(.is-scrolled) .nav-link-out:hover { color: var(--bone); }

body.hero-cinematic:not(.is-scrolled) .nav-toggle-bars::before,
body.hero-cinematic:not(.is-scrolled) .nav-toggle-bars::after { background: var(--bone); }

/* Solid ox fights the photo at this size, so the transparent state gets a
   bone-outline ghost instead; scrolling past the threshold reverts to the
   site's normal solid .btn look with no override needed here. */
body.hero-cinematic:not(.is-scrolled) .head-cta {
  background: transparent;
  border-color: var(--bone-soft);
  color: var(--bone);
}
body.hero-cinematic:not(.is-scrolled) .head-cta:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

body.hero-cinematic:not(.is-scrolled) .site-head :focus-visible {
  outline-color: var(--bone);
}

/* 5e. Footer -------------------------------------------------------------- */

.site-foot {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--sp-6);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.foot-brand .wordmark {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--bone);
  margin-right: 0;
}
.foot-brand .wordmark:hover { color: var(--brass); }

.foot-motto {
  margin-top: var(--sp-4);
  max-width: 30ch;
  color: var(--bone-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.foot-title {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp-4);
}

.foot-list li + li { margin-top: 0.55rem; }
.foot-list a, .foot-list address {
  color: var(--bone-soft);
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.foot-list a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }

.foot-socials {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.foot-socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(239, 234, 225, 0.42);
  color: var(--bone-soft);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot-socials a:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.foot-socials svg { width: 18px; height: 18px; fill: currentColor; }

.foot-base {
  border-top: 1px solid var(--bone-rule);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.foot-base b { color: var(--brass); font-weight: 600; }


/* 6. Components
   ========================================================================== */

/* 6a. Buttons ------------------------------------------------------------- */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.05rem 1.9rem;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn {
  background: var(--ox);
  border-color: var(--ox);
  color: var(--bone);
}
.btn:hover { background: var(--ox-deep); border-color: var(--ox-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bone); }

.btn-ghost-bone {
  border-color: var(--bone-soft);
  color: var(--bone);
}
.btn-ghost-bone:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

.btn-bone {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.btn-bone:hover { background: transparent; color: var(--bone); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Text link with a rule, never an arrow */
.link-rule {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--brass);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-rule:hover { color: var(--ox); border-color: var(--ox); }
.on-ink .link-rule:hover, .band-ox .link-rule:hover { color: var(--brass); border-color: var(--brass); }

/* 6b. Media (hotlinked photos with in-palette fallback) -------------------- */

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 90% at 30% 15%, rgba(176, 138, 74, 0.24), transparent 62%),
    linear-gradient(160deg, #211a16 0%, #14100E 70%);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
}
.media.is-failed img { display: none; }

/* 6c. Info bar ------------------------------------------------------------ */

.info-bar {
  background: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
}
.info-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.info-item {
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 2.4vw, 2.2rem);
  border-left: 1px solid var(--ink-rule);
}
.info-item:first-child { border-left: 0; padding-left: 0; }
.info-item:last-child { padding-right: 0; }
.info-item dt {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-deep);
  margin-bottom: 0.55rem;
}
.info-item dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.info-item dd a { text-decoration: none; border-bottom: 1px solid var(--brass-rule); padding-bottom: 2px; }
.info-item dd a:hover { color: var(--ox); border-color: var(--ox); }

/* 6d. Credentials strip --------------------------------------------------- */

.creds-name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
}
.creds-name em { font-style: italic; }

.creds-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--bone-rule);
}
.creds-list li {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--bone-rule);
  text-align: center;
}
.creds-list li:first-child { border-left: 0; }
.creds-key {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--bone);
}
.creds-val {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

/* 6e. Program cards ------------------------------------------------------- */

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.program-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1.5px solid var(--ink);
  text-decoration: none;
  transition: border-color 0.3s var(--ease);
}
.program-card:hover { border-color: var(--ox); }
.program-card:hover .card-title { color: var(--ox); }

.card-title {
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.008em;
  text-wrap: balance;
  transition: color 0.25s var(--ease);
}
.card-ages {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ox);
}
.card-note {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.pathway {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
}
.pathway p {
  max-width: 58ch;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
}

/* 6f. Testimonial split --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
/* Direct-child combinator matters here: section 14 nests a second, smaller
   .media (the competition note's medal photo) inside .story-panel, itself a
   child of .split. A descendant selector would also catch that nested photo
   and force it to the same 22-40rem min-height, blowing it out past its own
   grid column. */
.split > .media { min-height: clamp(22rem, 46vw, 40rem); }
.split > .media img { object-position: 50% 38%; }

.quote-panel {
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 5rem);
}
.quote-text {
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.012em;
}
.quote-cite {
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.quote-cite::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: var(--brass);
  margin-bottom: 1.1rem;
}

/* 6g. Events teaser ------------------------------------------------------- */

.event-list { border-top: 1px solid var(--ink-rule); }

.event-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-bottom: 1px solid var(--ink-rule);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.event-row:hover { background: rgba(20, 16, 14, 0.035); }
.event-row:hover .event-title { color: var(--ox); }

.event-date { display: flex; align-items: baseline; gap: 0.55rem; }
.event-month {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.event-day {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
}

.event-body { display: block; }

.event-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  transition: color 0.25s var(--ease);
}
.event-time {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.event-cta {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ox);
  border-bottom: 1.5px solid var(--brass);
  padding-bottom: 3px;
}

.event-foot {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}

/* 6h. CTA band ------------------------------------------------------------ */

.cta-band { text-align: center; }
.cta-band .eyebrow { color: var(--bone-soft); }
.cta-band .eyebrow-rule::before { background: var(--bone-soft); }
.cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cta-title em { font-style: italic; }
.cta-line {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 46ch;
  color: var(--bone-strong);
  font-size: var(--fs-lede);
  line-height: 1.6;
}
.cta-band .btn-row { justify-content: center; margin-top: clamp(2rem, 3.5vw, 3rem); }

/* 6i. Simple page body (404 and later static pages) ----------------------- */

.page-narrow {
  max-width: 44rem;
  padding-block: clamp(5rem, 12vw, 10rem);
}
.page-narrow .display { margin-top: var(--sp-4); }
.page-narrow .lede { margin-top: var(--sp-5); }
.page-narrow .btn-row { margin-top: var(--sp-7); }


/* 7. Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 880px);
  background-color: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Art direction: the wide dojang frame holds both figures at desktop. As the
   viewport narrows the crop walks right so the young student, not empty mat,
   sits beside the headline. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: var(--photo-filter);
}

/* Two overlays: vertical for top/bottom legibility, horizontal for the
   left-aligned type column. Solid ink shows through if the photo fails. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 16, 14, 0.82) 0%,
    rgba(20, 16, 14, 0.34) 34%,
    rgba(20, 16, 14, 0.52) 66%,
    rgba(20, 16, 14, 0.92) 100%
  );
}
.hero::after {
  background: linear-gradient(
    100deg,
    rgba(20, 16, 14, 0.90) 0%,
    rgba(20, 16, 14, 0.74) 34%,
    rgba(20, 16, 14, 0.22) 74%,
    rgba(20, 16, 14, 0.38) 100%
  );
}

.hero-inner {
  width: 100%;
  padding-block: clamp(4.5rem, 12vh, 8rem);
}

/* Bodoni's ch is narrow: 13ch breaks the line after "yet", which keeps the
   display type inside the darkest part of the overlay. */
.hero-copy { max-width: 13ch; }

.hero-motto {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--bone);
}

.hero .btn-row { margin-top: clamp(2rem, 4vw, 3rem); }

.hero-tag {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-soft);
  writing-mode: vertical-rl;
  padding-bottom: 3.5rem;
}
.hero-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 2.5rem;
  background: var(--brass);
}


/* 8. Reveals
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal,
  html.js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 9. Utilities
   ========================================================================== */

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-center { text-align: center; }
.u-bleed { padding-inline: 0; }
.u-hide { display: none !important; }


/* 10. Breakpoints
   ========================================================================== */

@media (min-width: 901px) {
  /* Hold the note baselines level when one program name runs to two lines. */
  .program-card .card-title { min-height: 2.3em; }
}

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --head-h: 66px; }

  .site-nav,
  .site-head .head-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero-copy { max-width: 16ch; }
  .hero-tag { display: none; }
  .hero-media img { object-position: 66% 46%; }
  .split > .media img { object-position: 50% 32%; }

  .program-grid { grid-template-columns: 1fr 1fr; }

  .split { grid-template-columns: 1fr; }
  .split > .media { min-height: clamp(16rem, 52vw, 24rem); }

  .creds-list { grid-template-columns: 1fr; }
  .creds-list li { border-left: 0; border-top: 1px solid var(--bone-rule); }
  .creds-list li:first-child { border-top: 0; }
}

@media (max-width: 780px) {
  .info-bar-grid { grid-template-columns: 1fr; }
  .info-item {
    border-left: 0;
    border-top: 1px solid var(--ink-rule);
    padding-inline: 0;
    padding-block: 1.1rem;
  }
  .info-item:first-child { border-top: 0; }

  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --fs-body: 1rem; }

  .hero { min-height: min(92vh, 760px); align-items: flex-end; }
  .hero-copy { max-width: 12ch; }
  .hero-media img { object-position: 76% 46%; }
  .hero .btn-row .btn,
  .hero .btn-row .btn-ghost { flex: 1 1 100%; }

  .program-grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  .pathway { flex-direction: column; align-items: flex-start; }

  .event-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-3);
  }
  .event-date { gap: 0.5rem; }
  .event-day { font-size: 1.75rem; }
  .event-cta { justify-self: start; }

  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .foot-base { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .btn, .btn-ghost { padding: 1rem 1.5rem; }
}


/* 11. Calendar (site/events.html, teaser fallback on site/index.html)
   ========================================================================== */

/* 11a. Page intro (events.html) -------------------------------------------- */

.events-intro-lede { margin-top: var(--sp-5); max-width: 52ch; }

/* Same text-only band-ink intro, reused as the page hero on every interior
   content page (school, schedule, about, policies, contact). */
.page-intro-lede { margin-top: var(--sp-5); max-width: 52ch; }

/* 11b. Month nav ------------------------------------------------------------ */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cal-month-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
}
.cal-nav-btn { padding: 0.7rem 1.3rem; flex: none; }
.cal-nav-btn[aria-disabled="true"] {
  border-color: var(--stone-deep);
  color: var(--stone-deep);
  cursor: not-allowed;
}
.cal-nav-btn[aria-disabled="true"]:hover { background: transparent; color: var(--stone-deep); }

/* 11c. Layout: grid column + upcoming rail ---------------------------------- */

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* 11d. Month grid ------------------------------------------------------------ */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--paper);
  border-top: 1px solid var(--ink-rule);
  border-left: 1px solid var(--ink-rule);
}
.cal-weekday {
  padding: 0.6rem 0.4rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-deep);
  border-right: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.cal-day {
  position: relative;
  min-height: 6rem;
  padding: 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-right: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.cal-day--pad { background: var(--bone-soft); }
.cal-day-num {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
}
.cal-day--classes { background: rgba(176, 138, 74, 0.14); }
.cal-day--closed { background: rgba(138, 127, 112, 0.22); }
.cal-day-note {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--stone-deep);
}
.cal-day-tag {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
/* --stone-deep is tuned to clear AA on --bone (5.05:1), but a closed cell
   puts a stone tint under it and that drops to 4.04:1 - under AA for 11px
   text. --ink-soft holds 5.15:1 on the same tint, so the closed state swaps
   the muted token rather than lightening the tint and weakening the signal
   that the school is shut. */
.cal-day--closed .cal-day-note { color: var(--ink-soft); }
.cal-day-chip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: var(--ox);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.2rem 0.4rem;
}
.cal-day-more {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ox);
}
.cal-day--interactive { cursor: pointer; transition: background-color 0.2s var(--ease); }
.cal-day--interactive:hover { background: rgba(110, 22, 20, 0.1); }
.cal-day--interactive:focus-visible { outline-offset: -3px; z-index: 1; }

/* 11e. Legend ----------------------------------------------------------------- */

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-rule);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.cal-legend-swatch { width: 14px; height: 14px; flex: none; border: 1px solid var(--ink-rule); }
.cal-legend-swatch--classes { background: rgba(176, 138, 74, 0.35); }
.cal-legend-swatch--events { background: var(--ox); border-color: var(--ox); }
.cal-legend-swatch--closed { background: rgba(138, 127, 112, 0.45); }

/* 11f. Agenda (below 768px, replaces the grid) ------------------------------ */

.cal-agenda { display: none; }
.cal-agenda-item {
  padding-block: clamp(1.25rem, 4vw, 1.75rem);
  border-top: 1px solid var(--ink-rule);
}
.cal-agenda-date {
  margin-bottom: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.cal-agenda-closed {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--stone-deep);
}
.cal-agenda-classes {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.cal-agenda-event {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--ox);
  color: var(--bone);
}
.cal-agenda-event-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.cal-agenda-event-meta {
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
.cal-agenda-empty {
  padding-block: var(--sp-6);
  text-align: center;
  color: var(--stone-deep);
}

/* 11g. Upcoming rail ---------------------------------------------------------- */

.cal-rail-title {
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
}
.cal-rail-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.cal-rail-card {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--ink-rule);
}
.cal-rail-card:last-child { border-bottom: 0; padding-bottom: 0; }
.cal-rail-date {
  margin-bottom: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ox);
}
.cal-rail-item-title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
}
.cal-rail-meta {
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.cal-register-link {
  display: inline-block;
  margin-top: 0.75rem;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--brass);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ox);
  transition: border-color 0.2s var(--ease);
}
.cal-register-link:hover { border-color: var(--ox); }
.cal-rail-empty { color: var(--stone-deep); font-size: var(--fs-small); }

@keyframes cal-highlight {
  0% { background: rgba(176, 138, 74, 0.4); }
  100% { background: transparent; }
}
.cal-rail-card.is-highlighted { animation: cal-highlight 1.8s var(--ease); }

/* 11h. API-down fallback ------------------------------------------------------ */

.cal-down {
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  text-align: center;
}
.cal-down-text { font-size: var(--fs-lede); line-height: 1.6; }
.cal-down-text a { text-decoration: underline; text-underline-offset: 3px; }

/* 11i. Homepage teaser empty state (site/index.html #upcoming-list) --------- */

.event-list-empty {
  padding-block: var(--sp-6);
  text-align: center;
  color: var(--stone-deep);
  font-size: var(--fs-small);
}

/* 11j. Breakpoints (self-contained; the shared list lives in section 10) --- */

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr) 15rem; }
}

@media (max-width: 767px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-grid-wrap { display: none; }
  .cal-agenda { display: block; border-top: 1px solid var(--ink-rule); }
  /* The legend explains grid swatches; the agenda uses text labels instead. */
  .cal-legend { display: none; }
  .cal-rail { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
}

@media (max-width: 480px) {
  .cal-nav { flex-wrap: wrap; }
  .cal-month-title { order: -1; flex: 1 1 100%; margin-bottom: 0.5rem; }
}


/* 12. Event detail (site/event.html) and registration confirmation
       (site/registration-confirmed.html)
   ========================================================================== */

/* 12a. Loading, missing and API-down states -------------------------------- */

/* One asset serves every /events/<slug>, so the page opens in a state and
   swaps: loading -> detail, or -> not found, or -> API down. Each is a full
   band so the page never renders as a stranded fragment. */
.event-state .display { margin-top: var(--sp-3); max-width: 20ch; }
.event-state .lede { margin-top: var(--sp-5); max-width: 58ch; }
.event-state .btn-row { margin-top: var(--sp-6); }
.event-state .lede a { text-decoration: underline; text-underline-offset: 3px; }

/* 12b. Header: title, facts, photo ----------------------------------------- */

.event-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.event-head-text .display {
  margin-top: var(--sp-3);
  text-wrap: balance;
}

.event-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bone-rule);
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--bone-rule);
}
.event-fact dt {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.45rem;
}
.event-fact dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--bone);
}

/* 12c. Body: description and registration panel ---------------------------- */

.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.event-copy-text {
  max-width: 62ch;
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--ink-soft);
}
.event-copy-text + .event-copy-text { margin-top: var(--sp-5); }

.event-reg {
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--ink-rule);
}
.event-reg-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.15;
}
.event-reg-note,
.event-reg-closed {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--stone-deep);
}
.event-reg-closed {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-rule-2);
  color: var(--ink-soft);
}
.event-reg-out { margin-top: var(--sp-5); width: 100%; }

/* 12d. Registration form --------------------------------------------------- */

.reg-form { margin-top: var(--sp-5); }

.field + .field { margin-top: var(--sp-4); }

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.field-optional {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
  font-style: italic;
}

.field-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field-input:hover { border-color: var(--stone-deep); }
.field-input:focus { border-color: var(--ink); outline-offset: 2px; }
.field-input[aria-invalid="true"] { border-color: var(--ox); }
.field-input:disabled {
  background: var(--ink-rule-2);
  color: var(--stone-deep);
  cursor: not-allowed;
}

.field-error,
.reg-form-error {
  margin-top: 0.45rem;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ox);
}
.reg-form-error {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(110, 22, 20, 0.06);
  border-left: 2px solid var(--ox);
}

.reg-submit { margin-top: var(--sp-5); width: 100%; }
.reg-submit:disabled {
  background: var(--stone-deep);
  border-color: var(--stone-deep);
  cursor: not-allowed;
}

.reg-form-fine {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--stone-deep);
}
.reg-form-fine a { text-decoration: underline; text-underline-offset: 3px; }

/* Paid events only: the test card that clears Stripe's sandbox. */
.reg-demo-hint {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-rule-2);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--stone-deep);
}

/* Quiet note after an abandoned Stripe checkout (?canceled=1). */
.reg-canceled {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-rule-2);
  border-left: 2px solid var(--stone-deep);
}
.reg-canceled p {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}
.reg-canceled-close {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.reg-canceled-close:hover { color: var(--ink); }

/* 12e. Registration confirmed ---------------------------------------------- */

.confirm-lede { margin-top: var(--sp-5); max-width: 46ch; }

.confirm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.confirm-title { text-align: left; font-size: var(--fs-title); }

.confirm-list { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.confirm-list li {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--ink-rule);
}
.confirm-list li:last-child { border-bottom: 1px solid var(--ink-rule); }
.confirm-key {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.25;
}
.confirm-val {
  display: block;
  margin-top: 0.5rem;
  max-width: 58ch;
  color: var(--ink-soft);
}
.confirm-val a { text-decoration: underline; text-underline-offset: 3px; }
.confirm-val a:hover { color: var(--ox); }

.confirm-aside {
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--ink-rule);
}
.confirm-aside-title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--sp-4);
}
.confirm-aside-body {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--stone-deep);
}
.confirm-aside-body + .confirm-aside-body { margin-top: var(--sp-4); }
.confirm-aside .link-rule { margin-top: var(--sp-5); }

/* 12f. Breakpoints (self-contained; the shared list lives in section 10) --- */

@media (max-width: 900px) {
  .event-head-grid { grid-template-columns: 1fr; }
  .event-photo { order: -1; aspect-ratio: 16 / 9; }
  .event-layout,
  .confirm-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .event-facts { grid-template-columns: 1fr; gap: var(--sp-4); }
}


/* 13. Trial booking (site/contact.html, site/booking-confirmed.html)
   ========================================================================== */

/* 13a. Panel shell ---------------------------------------------------------- */

.trial-panel {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--ink-rule);
}

/* 13b. Program picker --------------------------------------------------------- */

.trial-programs { border: 0; padding: 0; margin: 0; }
.trial-programs legend { padding: 0; }

.trial-program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: 0.5rem;
}

.program-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--bone);
  border: 1px solid var(--ink-rule);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.program-card:hover { border-color: var(--stone-deep); }
.program-card.is-checked { background: var(--bone-strong); border-color: var(--ox); }

.program-radio {
  flex: none;
  margin-top: 0.2rem;
  accent-color: var(--ox);
}
.program-radio:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.program-card-body { display: block; }
.program-name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
}
.program-age {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--stone-deep);
}

/* 13c. Options status and date field ------------------------------------------ */

.trial-options-status {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-rule-2);
  border-left: 2px solid var(--stone-deep);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.trial-date-field { margin-top: var(--sp-5); }
.trial-fields { margin-top: var(--sp-5); }
.trial-fields .field + .field { margin-top: var(--sp-4); }

.trial-submit { margin-top: var(--sp-5); width: 100%; }
.trial-submit:disabled {
  background: var(--stone-deep);
  border-color: var(--stone-deep);
  cursor: not-allowed;
}

/* The trial form's fine print (#trial-fine in contact.html) carries
   .reg-form-fine, shared with the event registration form above. */

/* 13d. Confirmation panel ------------------------------------------------------ */

.trial-confirm {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  text-align: center;
}

.trial-confirm-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.15;
}
.trial-confirm-title em { font-style: italic; font-weight: 400; }

.trial-confirm .confirm-val {
  margin-top: var(--sp-4);
  margin-inline: auto;
  max-width: 46ch;
}

/* 13e. Breakpoints (self-contained; the shared list lives in section 10) --- */

@media (max-width: 480px) {
  .trial-program-grid { grid-template-columns: 1fr; }
}


/* 14. Editorial split rows (site/school.html programs, site/about.html bios)
   ========================================================================== */

/* Reuses .split and .media (section 6f) for the photo half. The text half
   is generic prose, unlike .quote-panel's italic quote styling, so it gets
   its own panel. Shared between school's three program rows and about's two
   bio rows: same visual language, different copy. */

.story-panel {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 5rem);
}

.story-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ox);
}

.story-title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.story-title em { font-style: italic; }

.story-text {
  margin-top: var(--sp-5);
  max-width: 54ch;
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--ink-soft);
}
.story-text + .story-text { margin-top: var(--sp-4); }

/* Row-reverse: photo on the right instead of the left, alternating rhythm
   down the page without duplicating the grid rule. Direct-child combinator
   for the same reason as .split > .media above: a nested .media (the
   competition note's photo) must never be reordered by this rule. */
.split.is-reverse > .media { order: 2; }
.split.is-reverse > .story-panel { order: 1; }

@media (max-width: 900px) {
  .split.is-reverse > .media,
  .split.is-reverse > .story-panel { order: initial; }
}


/* 15. School: competition note and five-level pathway (site/school.html)
   ========================================================================== */

.competition-note {
  display: grid;
  grid-template-columns: minmax(0, 17rem) 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ink-rule);
}
.competition-note .media { aspect-ratio: 4 / 3; }
.competition-note-text .story-title { margin-top: var(--sp-3); font-size: var(--fs-title); }
.competition-note-text .story-text { margin-top: var(--sp-4); max-width: 46ch; }

/* Five named phases with a thin connecting rule between them. Deliberately
   no numerals: a small brass dot marks each phase instead of 1/2/3. */
.pathway-phases {
  position: relative;
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
}
.pathway-phases::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink-rule);
}
.pathway-phase {
  position: relative;
  flex: 1;
  padding-top: var(--sp-4);
}
.pathway-phase::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--brass);
}
.phase-name {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.phase-desc {
  margin-top: var(--sp-3);
  max-width: 24ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 780px) {
  .competition-note { grid-template-columns: 1fr; }
  .competition-note .media { aspect-ratio: 16 / 9; }

  .pathway-phases {
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    padding-top: 0;
  }
  .pathway-phases::before {
    top: 0;
    bottom: 0;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .pathway-phase { padding-top: 0; padding-left: var(--sp-6); }
  .pathway-phase::before { top: 0.4em; left: 0; transform: translate(-50%, 0); }
  .phase-desc { max-width: 42ch; }
}


/* 16. About: editorial credentials, pull quote, milestone band
   ========================================================================== */

/* Editorial list, deliberately not the home page's 3-up grid: rows, not
   columns, and years ride along as quiet meta text, never as a numbered
   sequence. */
.editorial-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--bone-rule); }
.editorial-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-bottom: 1px solid var(--bone-rule);
}
.editorial-list-label {
  max-width: 48ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.editorial-list-meta {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.band-bone .editorial-list,
.band-bone .editorial-list li { border-color: var(--ink-rule); }
.band-bone .editorial-list-meta { color: var(--stone-deep); }

.credentials-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.credentials-photo { aspect-ratio: 4 / 5; }

/* Bodoni italic pull quote, centered, distinct from the ink quote-panel
   split used for the home page testimonial. */
.pull-quote-wrap { max-width: 46rem; margin-inline: auto; text-align: center; }
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pull-quote-cite {
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ox);
}
.pull-quote-cite::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: var(--brass);
  margin: 0 auto 1.1rem;
}

.milestone-band { text-align: center; }
.milestone-figure {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
}
.milestone-motto {
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  max-width: 52ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--bone-soft);
}

@media (max-width: 780px) {
  .credentials-layout { grid-template-columns: 1fr; }
  .credentials-photo { aspect-ratio: 16 / 9; order: -1; }
}


/* 17. Schedule: weekly grid and agenda (site/schedule.html)
   ========================================================================== */

.schedule-hours {
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--ink-rule);
  border-left: 1px solid var(--ink-rule);
}
.week-day {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 11.5rem;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}
.week-day--today { background: var(--paper); }
.week-day--closed { background: rgba(138, 127, 112, 0.14); }
.week-day-name {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.week-day-closed-note {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--stone-deep);
}
/* Same AA correction as .cal-day--closed above: --stone-deep falls to 4.40:1
   on the closed cell's stone tint, --ink-soft holds 5.35:1. */
.week-day--closed .week-day-name,
.week-day--closed .week-day-closed-note { color: var(--ink-soft); }
.week-day-blocks { display: flex; flex-direction: column; gap: 0.4rem; }

.week-block {
  padding: 0.4rem 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.35;
  border-left: 3px solid var(--brass);
}
.week-block-program {
  display: block;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.week-block-time { display: block; margin-top: 0.15rem; color: var(--ink-soft); }

.week-block--mini { background: rgba(176, 138, 74, 0.15); }
.week-block--kids { background: rgba(176, 138, 74, 0.3); }
.week-block--teen_adult { background: rgba(176, 138, 74, 0.48); border-left-color: #7a5a26; }
.week-block--competition { background: rgba(176, 138, 74, 0.18); border-left-color: var(--ox); }
.week-block--event {
  background: var(--ox);
  border-left-color: var(--brass);
  color: var(--bone);
}
.week-block--event .week-block-time { color: var(--bone-soft); }

.week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}
.week-legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-deep);
}
.week-legend-swatch { width: 14px; height: 14px; flex: none; border: 1px solid var(--ink-rule); }
.week-legend-swatch--mini { background: rgba(176, 138, 74, 0.15); }
.week-legend-swatch--kids { background: rgba(176, 138, 74, 0.3); }
.week-legend-swatch--teen_adult { background: rgba(176, 138, 74, 0.48); }
.week-legend-swatch--competition { background: rgba(176, 138, 74, 0.18); border-color: var(--ox); }
.week-legend-swatch--event { background: var(--ox); border-color: var(--ox); }

.week-agenda { display: none; }
.week-agenda-item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--ink-rule); }
.week-agenda-item:first-child { border-top: 1px solid var(--ink-rule); }
.week-agenda-date {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
}
.week-agenda-closed { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--stone-deep); }
.week-agenda-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; }
.week-agenda-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.week-agenda-row-label { color: var(--ink); }
.week-agenda-row-time { flex: none; color: var(--stone-deep); font-family: var(--font-ui); font-size: var(--fs-ui); }
.week-agenda-empty { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--stone-deep); }

@media (max-width: 767px) {
  .week-grid, .week-legend { display: none; }
  .week-agenda { display: block; }
}


/* 18. Contact: info block and mailto form (site/contact.html)
   ========================================================================== */

.contact-aside-follow { margin-top: var(--sp-6); }

.contact-socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.contact-socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-rule);
  color: var(--ink-soft);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.contact-socials svg { width: 18px; height: 18px; fill: currentColor; }

.contact-form-submit { margin-top: var(--sp-5); width: 100%; }

@media (max-width: 900px) {
  .confirm-layout { grid-template-columns: 1fr; }
}


/* 19. Policies: typographic sections (site/policies.html)
   ========================================================================== */

/* Narrower measure for the policy column, used inside a .band (which
   already supplies vertical padding) rather than the full-page
   .page-narrow (404.html), whose own huge padding-block assumes it is the
   only thing on the page. */
.policies-narrow { max-width: 44rem; margin-inline: auto; }

.policy-group + .policy-group {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  padding-top: clamp(2.75rem, 5vw, 4.25rem);
  border-top: 1px solid var(--ink-rule);
}
.policy-group-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.2;
}
.policy-group-intro {
  margin-top: var(--sp-3);
  max-width: 58ch;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-soft);
}
.policy-group .confirm-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.policy-note {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  padding: var(--sp-5) var(--sp-6);
  background: var(--ink-rule-2);
  border-left: 2px solid var(--stone-deep);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}