/* ============================================================
   Eastbridge Academy — eastbrid.ge landing + registration
   Translated from the design handoff bundle at
   django/website/design/handoff (see README.md + SPEC.md there).
   Tokens are copied verbatim from the Vector Space design system
   with the `.theme-eastbridge` gold/espresso re-mapping resolved
   into :root (this stylesheet only ever renders the Eastbridge
   brand). Component classes recreate the reference markup's
   inline styles.

   Per-course theming: a bare slug class (e.g. `.gr-9-10-math`)
   sets the --course-* custom properties consumed by both the
   landing course cards and the registration hero, so one block
   per course themes everything. Unknown slugs fall back to the
   espresso defaults declared on the components themselves.
   ============================================================ */

/* ===== Tokens: color (gold scale + semantic aliases) ===== */
:root {
  --white: #ffffff;

  /* Gold scale (derived from the legacy dark-gold / cream system) */
  --gold-950: #2b2412;
  --gold-900: #4a4033;  /* espresso */
  --gold-800: #54481c;
  --gold-700: #64551f;  /* dark-gold — primary */
  --gold-600: #7a6826;
  --gold-500: #97813a;
  --gold-400: #c6b586;  /* light-button */
  --gold-300: #d3c8a3;  /* light-gold */
  --gold-200: #e4dcc4;
  --gold-100: #efe8d6;
  --gold-50:  #f7f1e5;  /* cream page */

  /* Deep espresso surfaces used by the dark sections */
  --espresso: #1c1607;
  --espresso-card: #342a14;

  /* Supporting academic accents (subject colors from the legacy site) */
  --ea-math:  #5b6e5d;
  --ea-cs:    #a38672;
  --ea-error: #7d5d4c;

  /* Surfaces */
  --surface-page:      var(--gold-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--gold-100);
  --surface-inverse:   var(--gold-900);
  --surface-inverse-2: var(--gold-800);

  /* Text */
  --text-strong:        var(--gold-900);
  --text-body:          #3a3225;
  --text-muted:         #8a7d63;
  --text-faint:         #b0a487;
  --text-on-dark:       var(--gold-50);
  --text-on-dark-muted: var(--gold-300);
  --text-accent:        var(--gold-700);

  /* Brand + accent */
  --brand:         var(--gold-700);
  --brand-strong:  var(--gold-800);
  --brand-deep:    var(--gold-900);
  --accent:        var(--gold-400);
  --accent-strong: var(--gold-500);
  --on-accent:     var(--gold-900);
  --on-brand:      var(--white);

  /* Lines + rings */
  --border:        var(--gold-200);
  --border-strong: var(--gold-300);
  --border-on-dark: #ffffff26;
  --focus-ring:    var(--gold-600);
  --ring:          0 0 0 3px rgba(100, 85, 31, 0.30);
  /* Gold-tinted stand-in for the DS nano glow on accent buttons */
  --glow-accent:   0 0 0 1px rgba(198, 181, 134, 0.5), 0 0 18px rgba(198, 181, 134, 0.35);
}

/* ===== Tokens: typography =====
   Family roles (deliberately stricter than the design handoff, which
   scattered mono/serif more freely — tightened July 2026):
   - mono:    uppercase tracked micro-labels only (eyebrows, spec/table
              labels, "We accept") plus numeric stat readouts. Never for
              sentences, dates, links, or button text.
   - serif:   the emotional accent — hero titles and the serif-italic
              section headlines. Nothing else.
   - display: headings, buttons, and emphasized values.
   - body:    all prose and data text.
   ============================================================ */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* Eastbridge serif accent (academic register) */
  --font-serif:   'STIX Two Text', Georgia, 'Times New Roman', serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-2xs: 0.6875rem;  /* 11px — mono eyebrows, captions */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px — body */
  --text-md:  1.125rem;   /* 18px — lead */
  --text-lg:  1.375rem;   /* 22px — card titles */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px — section headings */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4rem;       /* 64px */
  --text-5xl: 5.25rem;    /* 84px */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
  --tracking-mono:   0.02em;
}

/* ===== Tokens: spacing, radii & layout ===== */
:root {
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* buttons, inputs, icon tiles */
  --radius-lg:  16px;   /* cards, panels */
  --radius-xl:  24px;   /* feature / apply card */
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --container: 1180px;
  --gutter: 44px;
  --ea-nav-h: 83px;     /* 42px logo + 2×20px padding + 1px border */
}

/* ===== Tokens: effects ===== */
:root {
  --shadow-xs: 0 1px 2px rgba(18, 48, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 48, 38, 0.08), 0 1px 2px rgba(18, 48, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 48, 38, 0.08), 0 2px 4px rgba(18, 48, 38, 0.05);
  --shadow-lg: 0 12px 28px rgba(18, 48, 38, 0.12), 0 4px 8px rgba(18, 48, 38, 0.06);
  --shadow-xl: 0 24px 56px rgba(13, 33, 27, 0.18), 0 8px 16px rgba(13, 33, 27, 0.08);

  --blur-panel: blur(16px) saturate(1.1);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ea-dark { background: var(--espresso); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--gold-300); color: var(--gold-950); }

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

/* Inline icons (Lucide SVGs inlined in the templates) */
.ea-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ===== Utilities ===== */
.ea-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.ea-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  font-weight: var(--weight-medium);
}
.ea-eyebrow--on-dark { color: var(--gold-300); }

/* Static dot-grid texture for dark sections (live version = hero canvas) */
.ea-dotgrid { position: relative; }
.ea-dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(214, 180, 90, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.ea-dotgrid--fine::before {
  background-image: radial-gradient(rgba(214, 180, 90, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ea-dotgrid--faint::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}

@keyframes ea-blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ===== Buttons ===== */
.ea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  line-height: 1.1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.ea-btn:active { transform: scale(0.98); }
.ea-btn--lg { padding: 14px 28px; font-size: var(--text-md); gap: 10px; }
.ea-btn--full { width: 100%; }

.ea-btn--primary { background: var(--brand); color: var(--on-brand); }
.ea-btn--primary:hover { background: var(--brand-strong); }
.ea-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent); }
.ea-btn--accent:hover { background: var(--accent-strong); }
.ea-btn--inverse { background: rgba(255, 255, 255, 0.10); color: var(--white); border-color: var(--border-on-dark); }
.ea-btn--inverse:hover { background: rgba(255, 255, 255, 0.18); }
.ea-btn--disabled,
.ea-btn:disabled {
  background: var(--surface-sunken);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.ea-btn--disabled:hover, .ea-btn:disabled:hover { background: var(--surface-sunken); }

/* ============================================================
   Nav band — frosted, sticky. Sits over the hero canvas: the hero
   section pulls itself up under the nav (negative margin) so the
   dots show through the blur at rest.
   ============================================================ */
.ea-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  background: rgba(24, 18, 6, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(13, 9, 2, 0.28);
}
.ea-nav__logo img { height: 42px; width: auto; display: block; }
.ea-nav__links { display: flex; align-items: center; gap: 4px; }
.ea-nav__link {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 15px;
  color: #d8cbab;
  padding: 8px 13px;
  border-radius: 8px;
  text-decoration: none;
  transition: color var(--dur-base);
}
.ea-nav__link:hover { color: #fff; }

.ea-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}
.ea-nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-200);
}

.ea-nav-mobile {
  display: none;
  position: sticky;
  top: var(--ea-nav-h);
  z-index: 199;
  padding: 10px 20px 16px;
  background: rgba(24, 18, 6, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: column;
  gap: 2px;
}
.ea-nav-mobile.is-open { display: flex; }
.ea-nav-mobile .ea-nav__link { padding: 10px 8px; }

/* ============================================================
   Hero — espresso, live graph canvas behind everything
   ============================================================ */
.ea-hero {
  position: relative;
  background: var(--espresso);
  overflow: hidden;
  /* Extend under the sticky nav so the canvas shows through its blur */
  margin-top: calc(-1 * var(--ea-nav-h));
  padding-top: var(--ea-nav-h);
}
.ea-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ea-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 8%, transparent 40%, rgba(20, 14, 4, 0.5) 100%);
  pointer-events: none;
}
.ea-hero__grid {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 52px;
  align-items: center;
  min-height: 600px;
}
.ea-hero__copy { padding: 62px 0; }
.ea-hero__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.03;
  margin: 18px 0 0;
  color: #fff;
  max-width: 15ch;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.ea-serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--gold-300);
}
.ea-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--gold-200);
  max-width: 46ch;
  margin: 22px 0 0;
  line-height: 1.62;
}
.ea-hero__ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.ea-hero__stats { display: flex; gap: 40px; margin-top: 50px; flex-wrap: wrap; }
.ea-hero__stat { font-family: var(--font-mono); }
.ea-hero__stat-value { font-size: var(--text-2xl); font-weight: var(--weight-medium); color: #fff; line-height: 1; }
.ea-hero__stat-label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 7px;
}

.ea-hero__side { padding: 48px 0; display: flex; justify-content: center; }
.ea-hero-card {
  width: 100%;
  max-width: 340px;
  background: rgba(247, 241, 229, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 56px rgba(13, 9, 2, 0.4);
}
.ea-hero-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ea-hero-card__term {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: var(--weight-medium);
}
.ea-hero-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aebfa0;
}
.ea-hero-card__status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7d9a6c;
  box-shadow: 0 0 0 3px rgba(125, 154, 108, 0.25);
  animation: ea-blink 2.4s ease-in-out infinite;
}
.ea-hero-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ea-hero-card__key { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gold-200); }
.ea-hero-card__val { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 14.5px; color: #fff; }
.ea-hero-card__coords {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #9a8a64;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ============================================================
   What we teach — alternating photo-mosaic rows
   ============================================================ */
.ea-programs { background: var(--surface-page); padding: 92px var(--gutter); }
.ea-programs--sunken {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ea-programs__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 52px;
  align-items: center;
}
.ea-programs__grid--media-left { grid-template-columns: 1.08fr 0.92fr; }
.ea-programs__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  color: var(--text-strong);
  margin: 13px 0 0;
  line-height: 1.14;
  letter-spacing: normal;
}
.ea-programs__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 18px 0 0;
  line-height: 1.65;
}
.ea-programs__more {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.65;
}
.ea-programs__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--brand);
  line-height: 1.5;
}
.ea-programs__note .ea-icon { margin-top: 2px; }
.ea-programs__note a { color: var(--brand); text-decoration: underline; }

.ea-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 100%;
  gap: 13px;
  height: 392px;
}
.ea-mosaic__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 13px; min-height: 0; }
.ea-mosaic__tile { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.ea-mosaic__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* CS variant: portrait tile right, taller, bleeds into the next section */
.ea-mosaic--cs {
  grid-template-columns: 1fr 1.35fr;
  height: 690px;
  margin-bottom: -202px;
  align-self: end;
  position: relative;
  z-index: 2;
}
.ea-mosaic--cs .ea-mosaic__tile { box-shadow: var(--shadow-lg); }

/* ============================================================
   Approach — espresso + static dot grid, icon list rows
   ============================================================ */
.ea-approach {
  position: relative;
  background: var(--espresso);
  overflow: hidden;
  /* Extra top padding reserves room for the CS mosaic bleed */
  padding: 160px var(--gutter) 88px;
}
.ea-approach__grid {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.ea-approach__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  color: #fff;
  margin: 14px 0 0;
  line-height: 1.16;
  letter-spacing: normal;
}
.ea-approach__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--gold-200);
  margin: 18px 0 0;
  line-height: 1.65;
  max-width: 44ch;
}
.ea-approach__stats { display: flex; gap: 34px; margin-top: 30px; }
.ea-approach__stat { font-family: var(--font-mono); }
.ea-approach__stat-value { font-size: var(--text-xl); color: #fff; }
.ea-approach__stat-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 5px;
}
.ea-approach__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ea-approach__item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(247, 241, 229, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #f3ecd8;
}
.ea-approach__item-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(214, 180, 90, 0.12);
  border: 1px solid rgba(214, 180, 90, 0.24);
  color: var(--gold-300);
}

/* ============================================================
   Events — scroll-snap carousel on gold-950
   ============================================================ */
.ea-events {
  background: var(--gold-950);
  padding: 88px var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* The carousel below bleeds to the viewport edges; clip the sliver of
     horizontal overflow the 100vw bleed can add when scrollbars have width */
  overflow-x: clip;
}
.ea-events__inner { max-width: var(--container); margin: 0 auto; }
.ea-events__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ea-events__copy { max-width: 560px; }
.ea-events__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: #fff;
  margin: 14px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ea-events__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--gold-200);
  margin: 14px 0 0;
  line-height: 1.6;
}
.ea-events__controls { display: flex; align-items: center; gap: 16px; }
.ea-events__arrows { display: flex; gap: 8px; }
.ea-events__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--gold-200);
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base), opacity var(--dur-base);
}
.ea-events__arrow:hover { border-color: var(--gold-300); color: #fff; }

/* Full-bleed: the track escapes the content container and runs to the
   viewport edges, so cards spill left/right instead of fading out early */
.ea-carousel {
  position: relative;
  margin-top: 34px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ea-carousel__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 3;
}
.ea-carousel__fade--left { left: 0; background: linear-gradient(90deg, var(--gold-950), transparent); }
.ea-carousel__fade--right { right: 0; background: linear-gradient(270deg, var(--gold-950), transparent); }
.ea-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* End padding of (half viewport - half card) lets the first and last
     cards reach the center position, so any card can be the featured one */
  padding: 22px max(var(--gutter), calc(50% - min(420px, 43vw))) 26px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ea-carousel__track::-webkit-scrollbar { display: none; }

/* Card width is content-driven: a fixed text column plus a media column
   sized to the poster's own aspect ratio (below), so posters render
   perfectly proportioned by default */
.ea-event-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: var(--espresso-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 400px auto;
  grid-template-rows: 100%;
  height: 540px;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out, border-color 0.25s, box-shadow 0.25s;
}
.ea-event-card--no-image { display: flex; width: 660px; }
.ea-event-card__body {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  flex: 1;
}
.ea-event-card__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ea-event-card__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(214, 180, 90, 0.14);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}
.ea-event-card__past {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9b489;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.ea-event-card__date {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 13px;
  color: var(--gold-400);
}
.ea-event-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* Descriptions longer than the card scroll in place (thin themed
   scrollbar) instead of being cut off; the action row stays pinned */
.ea-event-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gold-200);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 180, 90, 0.35) transparent;
}
.ea-event-card__desc::-webkit-scrollbar { width: 5px; }
.ea-event-card__desc::-webkit-scrollbar-thumb { background: rgba(214, 180, 90, 0.3); border-radius: var(--radius-pill); }
.ea-event-card__desc::-webkit-scrollbar-track { background: transparent; }
.ea-event-card__desc p { margin: 0 0 6px; }
.ea-event-card__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ea-event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--gold-950);
  background: var(--gold-400);
  padding: 9px 14px;
  border-radius: 9px;
  text-decoration: none;
  transition: background var(--dur-base);
}
.ea-event-card__cta:hover { background: var(--gold-300); }
.ea-event-card__cta--secondary {
  color: var(--gold-100);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 13px;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.ea-event-card__cta--secondary:hover { background: transparent; border-color: var(--gold-300); color: #fff; }
/* The media box takes the poster's own aspect ratio (set per-image by
   events-carousel.js once it loads; 3:4 default matches our usual poster
   stock), so posters fill it exactly. The flat average-color background
   and object-fit:contain only show for unusually wide posters, which get
   letterboxed inside the clamped box instead of cropped. */
.ea-event-card__media {
  background: #6b6858;
  height: 100%;
  aspect-ratio: 3 / 4;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ea-event-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ea-event-card__watermark {
  width: 196px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.07;
}
.ea-event-card__watermark img { width: 118px; }

/* ============================================================
   Courses — light section, card grid
   ============================================================ */
.ea-courses { background: var(--surface-page); padding: 90px var(--gutter); }
.ea-courses__inner { max-width: var(--container); margin: 0 auto; }
.ea-courses__head { max-width: 620px; }
.ea-courses__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: var(--text-strong);
  margin: 14px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ea-courses__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.6;
}
.ea-courses__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}

/* Course card — header band + icon roundel consume the --course-*
   theme vars set by the per-slug classes at the end of this file. */
.ea-course-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base),
              border-color var(--dur-base);
}
.ea-course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
}
.ea-course-card__band {
  position: relative;
  height: 104px;
  background: var(--course-grad, linear-gradient(119.61deg, #40351d 16%, var(--espresso) 84%));
  border-bottom: 1px solid var(--gold-200);
}
/* Formula art at a fixed scale rather than cover: the band is a short wide
   strip, and cover blew the art up until the crop read as random shapes.
   A fixed height keeps the underlying figure recognizable; the same image
   is stacked twice to compound its authored low opacity, since the
   hairline strokes wash out when scaled down. */
.ea-course-card__art {
  position: absolute;
  inset: 0;
  background-image: var(--course-art-stack, var(--course-art, none), var(--course-art, none));
  background-size: var(--course-art-size, auto 240px);
  background-position: var(--course-art-pos, right 30px top -6px);
  background-repeat: no-repeat;
  transform: var(--course-art-transform, none);
}
.ea-course-card__index {
  position: absolute;
  top: 14px;
  right: 16px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28, 22, 7, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.ea-course-card__roundel {
  position: absolute;
  left: 26px;
  bottom: -30px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 4px solid var(--surface-card);
  background: var(--course-grad-icon, linear-gradient(135deg, #40351d, var(--espresso)));
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ea-course-card__roundel img { width: 40px; height: 40px; filter: brightness(0) invert(1); }

.ea-course-card__body {
  padding: 52px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}
.ea-course-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--text-strong);
  margin: 0;
  letter-spacing: -0.01em;
}
.ea-course-card__audience {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin: 6px 0 0;
  letter-spacing: 0.03em;
}
.ea-course-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.ea-course-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-card);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-pill);
  padding: 4px 11px 4px 5px;
}
.ea-chip img { width: 20px; height: 20px; display: block; }
.ea-chip span {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-body);
}
.ea-course-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ea-course-card__features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.ea-course-card__features .ea-icon { color: var(--brand); margin-top: 3px; }
.ea-course-card__specs {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.ea-spec__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ea-spec__value {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 13px;
  color: var(--text-strong);
  margin-top: 3px;
}
.ea-spec__value .subtle, .ea-spec__value del { color: var(--text-faint); }
.ea-spec__value--price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  margin-top: 2px;
}
.ea-spec__value--price .subtle,
.ea-spec__value--price del {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 11px;
}
.ea-spec__value--price del { margin-right: 4px; }
.ea-course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.ea-course-card__details {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ea-course-card__details:hover { text-decoration: underline; }
.ea-course-card--disabled { opacity: 0.72; }
.ea-course-card--disabled:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }

/* ============================================================
   Location — full-art with scrim, expanding map widget
   ============================================================ */
.ea-location { position: relative; overflow: hidden; }
.ea-location__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ea-location__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28, 22, 7, 0.92) 0%, rgba(28, 22, 7, 0.78) 38%, rgba(28, 22, 7, 0.22) 100%);
}
.ea-location__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  /* Extra bottom padding reserves room for the stats panel bleed */
  padding: 100px var(--gutter) 156px;
}
.ea-location__copy { max-width: 480px; }
.ea-location__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  color: #fff;
  margin: 13px 0 0;
  line-height: 1.16;
  letter-spacing: normal;
}
.ea-location__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--gold-200);
  margin: 18px 0 0;
  line-height: 1.65;
}
.ea-location__address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 15px;
  color: #fff;
}
.ea-location__address .ea-icon { color: var(--gold-300); }

.ea-map {
  position: absolute;
  right: 56px;
  bottom: 128px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ea-map__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(28, 22, 7, 0.55);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(13, 9, 2, 0.35);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.ea-map__toggle:hover { border-color: var(--gold-300); background: rgba(28, 22, 7, 0.72); }
.ea-map__toggle .ea-icon { color: var(--gold-300); }
.ea-map__panel {
  width: 460px;
  max-width: 80vw;
  background: rgba(28, 22, 7, 0.72);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 24px 56px rgba(13, 9, 2, 0.5);
}
.ea-map__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 10px;
}
.ea-map__panel-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.ea-map__hide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--gold-200);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}
.ea-map__panel iframe { border: 0; display: block; border-radius: 10px; width: 100%; height: 270px; }
.ea-map .is-hidden { display: none; }

/* ============================================================
   Apply — espresso + dot grid; stats panel bridges from Location
   ============================================================ */
.ea-apply {
  position: relative;
  background: var(--espresso);
  padding: 90px var(--gutter);
}
.ea-stats-panel {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: -154px auto 68px;
  background: var(--gold-950);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 38px 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ea-stats-panel__value {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: var(--gold-300);
  line-height: 1;
}
.ea-stats-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-200);
  margin-top: 10px;
}
.ea-apply__grid {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.ea-apply__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  color: #fff;
  margin: 14px 0 0;
  line-height: 1.16;
  letter-spacing: normal;
}
.ea-apply__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--gold-200);
  margin: 16px 0 0;
  line-height: 1.62;
  max-width: 38ch;
}
.ea-apply__email {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 15px;
  color: var(--gold-200);
}
.ea-apply__email .ea-icon { color: var(--gold-300); }

.ea-apply__card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
}
.ea-apply__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ea-apply__row { margin-top: 16px; }
.ea-apply__submit { margin-top: 20px; }
.ea-apply__privacy {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 14px 0 0;
}

/* Boxed field treatment (DS Input/Select) — shared with registration */
.ea-field { display: flex; flex-direction: column; gap: 6px; }
.ea-field label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.ea-field input,
.ea-field select,
.ea-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.ea-field select { cursor: pointer; }
.ea-field input:focus,
.ea-field select:focus,
.ea-field textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}

/* ============================================================
   Footer — gold-950 + faint dot grid
   ============================================================ */
.ea-footer {
  position: relative;
  overflow: hidden;
  background: var(--gold-950);
  color: var(--gold-300);
  padding: 60px var(--gutter) 28px;
}
.ea-footer__cols {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.ea-footer__brand { max-width: 300px; }
.ea-footer__brand img { height: 44px; width: auto; display: block; }
.ea-footer__blurb {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--gold-300);
}
.ea-footer__social { display: flex; gap: 9px; margin-top: 18px; }
.ea-footer__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.ea-footer__social a:hover { border-color: rgba(214, 180, 90, 0.5); background: rgba(255, 255, 255, 0.11); }
.ea-footer__social img { width: 18px; height: 18px; object-fit: contain; display: block; }
.ea-footer__links { display: flex; gap: 56px; flex-wrap: wrap; }
.ea-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 13px;
}
.ea-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ea-footer__col a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gold-200);
  text-decoration: none;
}
.ea-footer__col a:hover { color: #fff; }

/* Compact newsletter capture (kept from the existing site; hooks
   .newsletter-form / .submit-button so website/js/newsletter.js works) */
.ea-footer .newsletter-form { display: flex; gap: 8px; margin-top: 12px; }
.ea-footer .newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  width: 170px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gold-100);
  outline: none;
  transition: border-color var(--dur-base);
}
.ea-footer .newsletter-form input[type="email"]::placeholder { color: #9a8a64; }
.ea-footer .newsletter-form input[type="email"]:focus { border-color: var(--gold-300); }
.ea-footer .newsletter-form .submit-button {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--gold-950);
  background: var(--gold-400);
  border: 0;
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background var(--dur-base);
}
.ea-footer .newsletter-form .submit-button:hover { background: var(--gold-300); }
.ea-footer .newsletter-form .submit-button.subscribed { background: #7d9a6c; color: #fff; cursor: default; }

.ea-footer__legal {
  position: relative;
  max-width: var(--container);
  margin: 38px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ea-footer__legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.ea-footer__legal-links a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.ea-footer__legal-links a:hover { color: var(--gold-200); }
.ea-footer__payment { display: flex; align-items: center; gap: 10px; }
.ea-footer__payment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.ea-footer__payment img { height: 22px; background: #fff; border-radius: 4px; padding: 2px 4px; }

/* ============================================================
   Django messages (ported from styles.css so messages.js works)
   ============================================================ */
.messages-container {
  position: fixed;
  top: calc(var(--ea-nav-h) + 8px);
  left: 0;
  right: 0;
  z-index: 1500;
  padding: 0 2rem;
  pointer-events: none;
}
.message {
  color: #fff;
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  box-shadow: 0 12px 32px rgba(13, 9, 2, 0.35);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
  animation: messageSlideIn 0.3s ease-out;
  background: var(--gold-900);
}
.message.notification-success { background: var(--ea-math); }
.message.notification-error { background: var(--ea-error); }
.message-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.message-text { flex: 1; text-align: center; }
.message-dismiss {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.message-dismiss:hover { opacity: 1; }
@keyframes messageSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.message.hiding { animation: messageSlideOut 0.3s ease-out forwards; }
@keyframes messageSlideOut {
  to { transform: translateY(-100%); opacity: 0; }
}

/* ============================================================
   Registration page — light refresh over the existing markup
   (selectors match the pre-existing template class names)
   ============================================================ */
body.registration-page { background: var(--surface-page); }

/* --- Hero: course gradient + dot grid + formula art --- */
.course-hero {
  position: relative;
  background: var(--course-grad, linear-gradient(119.61deg, #40351d 16%, var(--espresso) 84%));
  /* NO overflow:hidden — the info bar bleeds out of the bottom edge */
}
/* Formula art: "side" mode (light SVG on the right) by default; the
   Ramp-Up courses instead use their photo banner as a cover with a
   left gradient scrim (selectors below, keyed by slug class) */
.course-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background-image: var(--course-art, none);
  background-size: auto 100%;
  background-position: right top;
  background-repeat: no-repeat;
}
.course-hero.ramp-up-bootcamp::before,
.course-hero.ramp-up-multiweek::before {
  left: 0;
  width: auto;
  background-image: var(--course-banner, none);
  background-size: cover;
  background-position: right center;
}
.course-hero.ramp-up-bootcamp::after,
.course-hero.ramp-up-multiweek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--course-scrim-a, rgba(22, 17, 5, 0.92)) 0%, var(--course-scrim-b, rgba(22, 17, 5, 0.6)) 46%, var(--course-scrim-c, rgba(22, 17, 5, 0.12)) 100%);
}
.course-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 1;
}

.back-to-site-button {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  background: rgba(28, 22, 7, 0.3);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.back-to-site-button:hover { background: rgba(28, 22, 7, 0.55); border-color: rgba(255, 255, 255, 0.45); }

.course-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  min-height: 620px;
}
.course-hero-content { max-width: 780px; padding: 96px 0 132px; }
.course-hero-logo { margin-bottom: 56px; }
.course-hero-logo img { height: 46px; width: auto; display: block; }
.course-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.course-icon-inline { width: 48px; height: 48px; flex: none; filter: brightness(0) invert(1); }
/* Ramp-Up's icon is a self-colored disc + glyph — render as-authored */
.course-hero.ramp-up-bootcamp .course-icon-inline,
.course-hero.ramp-up-multiweek .course-icon-inline { filter: none; }
.course-hero-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  letter-spacing: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.course-hero-description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 0 32px;
}
.course-hero .register-button {
  min-width: 280px;
  background: var(--gold-400);
  color: #2b2412;
  border: 0;
  border-radius: var(--radius-md);
  padding: 15px 34px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 14px 34px rgba(13, 9, 2, 0.35);
  transition: background var(--dur-base), transform var(--dur-fast);
}
.course-hero .register-button:hover { background: var(--gold-300); }
.course-hero .register-button:active { transform: scale(0.98); }
.course-hero .register-button h3 {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 19px;
  line-height: 1.25;
  color: inherit;
  letter-spacing: normal;
  margin: 0;
}
.course-hero .register-button p {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  margin: 3px 0 0;
}

/* --- Info bar: straddles the hero's bottom edge --- */
.course-info-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 5;
  padding: 0 40px;
}
.info-bar-container {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 10px;
}
.info-bar-item { padding: 6px 26px; display: flex; flex-direction: column; }
.info-bar-item + .info-bar-item { border-left: 1px solid var(--border); }
.info-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.info-bar-value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15.5px;
  color: var(--text-strong);
  margin-top: 4px;
}

/* --- Body: sticky sidebar + main column --- */
.course-main-content { padding: 100px 40px 72px; }
.course-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.course-sidebar { position: sticky; top: 24px; }

.course-info-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}
.course-info-icon { margin-bottom: 16px; }
.course-info-icon img { width: 60px; height: 60px; display: block; }
.course-info-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 21px;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.course-info-description {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.course-info-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.course-info-features li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.course-info-features li img { width: 15px; height: 15px; margin-top: 3px; flex: none; }
.course-info-schedule {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.course-info-schedule p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  margin: 0;
}
.course-info-schedule p:first-child { color: var(--text-strong); font-weight: var(--weight-medium); }
.course-info-schedule .subtle { color: var(--text-faint); }
/* Price line: last schedule row gets the display treatment */
.course-info-schedule p:last-child {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 17px;
  color: var(--text-strong);
}
.course-info-schedule p:last-child .subtle {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12px;
}
.course-info-schedule p:last-child del {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 13px;
  color: var(--text-faint);
  margin-right: 7px;
}

/* --- Main column: about / topics / contests --- */
.course-details h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 18px;
}
.course-details .topics-section h2 { margin: 44px 0 22px; }
.course-about-description,
.course-additional-info {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}
.course-about-description p, .course-additional-info p { margin: 0 0 14px; }
.course-about-description h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  color: var(--text-strong);
  margin: 26px 0 10px;
}
.course-about-description ul {
  margin: 0 0 14px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.course-about-description li { font-size: 15.5px; }
.course-about-description strong { font-weight: var(--weight-semibold); }

.topics-expanded-list { display: flex; flex-direction: column; gap: 20px; }
.topic-header { display: flex; align-items: center; gap: 12px; }
.topic-icon { width: 38px; height: 38px; flex: none; }
.topic-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--text-strong);
  margin: 0;
}
.topic-description {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 8px 0 0;
  padding-left: 50px;
}

.math-contests h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 44px 0 14px;
}
/* The contests description field carries its own <p> tags, which split the
   template's wrapper <p class="contest-description"> into unclassed sibling
   paragraphs — so style every paragraph in the block, and hang the pre-table
   gap on .contest-list where it doesn't depend on the field's markup */
.math-contests p,
.contest-description {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 12px;
}
.contest-list { margin-top: 18px; }
.contest-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
}
.contest-table th {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
}
.contest-table td { padding: 13px 20px; border-top: 1px solid var(--border); }
.contest-table tbody tr:first-child td { border-top: 0; }
.contest-table tbody tr:hover { background: var(--surface-sunken); }
.contest-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--text-strong);
}
.contest-date { font-family: var(--font-body); font-size: 14px; color: var(--text-body); }
.contest-info { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); }
.contest-dates { margin-top: 12px; }
.contest-dates p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-muted);
}

/* --- Registration form card --- */
.registration-form-container {
  scroll-margin-top: 24px;
  margin-top: 52px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px;
}
.registration-form-container > h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 30px;
}
.form-section h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  letter-spacing: normal;
  color: var(--text-strong);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-200);
}
.form-section + .form-section h2 { margin-top: 38px; }
.parent-section-note {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-muted);
  margin: -8px 0 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row-wide-left { grid-template-columns: 2fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full-width { margin-top: 22px; }
.form-field label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.form-field select { cursor: pointer; }
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.checkbox-group { display: flex; flex-direction: column; gap: 12px; margin-top: 11px; }
.checkbox-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  flex: none;
}
.checkbox-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.45;
}
.required-checkbox .checkbox-text { font-weight: var(--weight-medium); }
.agreements-intro {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.continue-payment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--on-brand);
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.continue-payment-button:hover { background: var(--brand-strong); }
.continue-payment-button:active { transform: scale(0.98); }

/* --- Minimal registration footer --- */
.ea-footer-min { padding: 24px 20px 36px; text-align: center; }
.ea-footer-min__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
}
.ea-footer-min__links a { color: var(--text-muted); text-decoration: none; }
.ea-footer-min__links a:hover { color: var(--text-strong); }
.ea-footer-min__links span { color: var(--text-faint); }
.ea-footer-min__copyright {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 10px;
}
.ea-footer-min__payment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.ea-footer-min__payment img { height: 20px; opacity: 0.75; }

/* ============================================================
   Per-course themes. One block per slug themes both the landing
   card and the registration hero (single source of truth — the
   gradients here are the same ones the design shares between the
   two pages). Unknown slugs fall back to the espresso defaults.
   ============================================================ */
/* Card-band art crops (--course-art-pos/-size) frame each figure's most
   recognizable region: the triangle's apex, the conic's axes, a run of
   tree nodes, the chess pieces' heads. */
.gr-9-10-math {
  --course-grad: linear-gradient(119.61deg, #8C7253 22.38%, #4A4033 85.45%);
  --course-grad-icon: linear-gradient(135deg, #8C7253, #4A4033);
  --course-art: url("../img/course-backgrounds/gr-9-10-light.svg");
  --course-art-size: auto 160px;
  --course-art-stack: var(--course-art), var(--course-art), var(--course-art);
  --course-art-pos: right 40px top -12px;
}
.gr-11-12-math {
  --course-grad: linear-gradient(117.96deg, #58799C 12.34%, #705B84 85.1%);
  --course-grad-icon: linear-gradient(135deg, #58799C, #705B84);
  --course-art: url("../img/course-backgrounds/gr-11-12-light.svg");
  --course-art-pos: right 30px top -55px;
}
.computer-science {
  --course-grad: linear-gradient(127.89deg, #4B8B8B 21.11%, #5B6E5D 87.17%);
  --course-grad-icon: linear-gradient(135deg, #4B8B8B, #5B6E5D);
  --course-art: url("../img/course-backgrounds/cs-light.svg");
  --course-art-pos: right 20px top -25px;
}
.ramp-up-bootcamp, .ramp-up-multiweek {
  --course-art: url("../img/course-backgrounds/gr-9-10-light.svg");
  --course-art-size: auto 160px;
  --course-art-stack: var(--course-art), var(--course-art), var(--course-art);
  --course-art-pos: right 40px top -12px;
  --course-art-transform: scaleX(-1);
  --course-scrim-a: rgba(16, 15, 42, 0.92);
  --course-scrim-b: rgba(16, 15, 42, 0.6);
  --course-scrim-c: rgba(16, 15, 42, 0.12);
}
.ramp-up-bootcamp {
  --course-grad: linear-gradient(123.59deg, #1c1b3c 18.4%, #2c2858 86.2%);
  --course-grad-icon: linear-gradient(135deg, #1c1b3c, #2c2858);
  --course-banner: url("../img/course-backgrounds/banner-rampup-bootcamp.png");
}
/* The Ramp-Up icon is a self-colored disc + glyph: render it as-authored
   on a white roundel instead of flattening it to white */
.ramp-up-bootcamp .ea-course-card__roundel,
.ramp-up-multiweek .ea-course-card__roundel { background: var(--surface-card); }
.ramp-up-bootcamp .ea-course-card__roundel img,
.ramp-up-multiweek .ea-course-card__roundel img { width: 66px; height: 66px; filter: none; }
.ramp-up-multiweek {
  --course-grad: linear-gradient(123.59deg, #0f2c34 18.4%, #1a4750 86.2%);
  --course-grad-icon: linear-gradient(135deg, #0f2c34, #1a4750);
  --course-banner: url("../img/course-backgrounds/banner-rampup-multiweek.png");
  --course-scrim-a: rgba(10, 30, 36, 0.92);
  --course-scrim-b: rgba(10, 30, 36, 0.6);
  --course-scrim-c: rgba(10, 30, 36, 0.12);
}
/* Chess courses (registered from the /chess landing page) keep their
   legacy gradients + banner art on the refreshed hero */
.beginner-chess {
  --course-grad: linear-gradient(119.61deg, #64551F 22.38%, #C6B586 85.45%);
  --course-grad-icon: linear-gradient(135deg, #64551F, #97813a);
  --course-art: url("../img/course-backgrounds/banner-chess-beginner.svg");
  --course-art-pos: right 24px top -12px;
  --course-art-size: auto 170px;
  --course-art-stack: var(--course-art), var(--course-art), var(--course-art);
}
.intermediate-chess {
  --course-grad: linear-gradient(117.96deg, #563621 12.34%, #B98053 85.1%);
  --course-grad-icon: linear-gradient(135deg, #563621, #B98053);
  --course-art: url("../img/course-backgrounds/banner-chess-intermediate.svg");
  --course-art-pos: right 40px top -12px;
  --course-art-size: auto 170px;
  --course-art-stack: var(--course-art), var(--course-art), var(--course-art);
}

/* ============================================================
   Responsive — the design is desktop-first (1280–1440); below
   ~1024/900 follows the existing site's stacking patterns.
   ============================================================ */
@media (max-width: 1080px) {
  :root { --gutter: 28px; }
  .ea-mosaic--cs { height: 560px; margin-bottom: -150px; }
  .ea-map { right: 28px; }
}

@media (max-width: 900px) {
  .ea-nav__links { display: none; }
  .ea-nav__toggle { display: inline-flex; }
  .ea-nav .ea-btn { display: none; }
  .ea-nav-mobile .ea-btn { display: inline-flex; margin-top: 8px; align-self: flex-start; }

  .ea-hero__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .ea-hero__copy { padding: 52px 0 8px; }
  .ea-hero__side { padding: 24px 0 52px; justify-content: flex-start; }

  .ea-programs { padding-top: 64px; padding-bottom: 64px; }
  .ea-programs__grid { grid-template-columns: 1fr; gap: 32px; }
  .ea-mosaic { height: 320px; }
  .ea-mosaic--cs { height: 420px; margin-bottom: 0; order: 2; }
  .ea-approach { padding: 72px var(--gutter) 72px; }
  .ea-approach__grid { grid-template-columns: 1fr; gap: 36px; }

  .ea-events { padding: 64px var(--gutter); }
  .ea-event-card { width: 86vw; max-width: 740px; grid-template-columns: minmax(0, 1fr) auto; }
  .ea-event-card--no-image { max-width: 660px; }
  .ea-event-card__media { max-width: 38vw; }

  .ea-courses { padding: 64px var(--gutter); }
  .ea-courses__grid { grid-template-columns: 1fr; }

  .ea-location__inner { padding: 72px var(--gutter) 200px; }
  .ea-map { right: var(--gutter); bottom: 172px; }
  .ea-stats-panel { grid-template-columns: 1fr 1fr; margin-top: -140px; }
  .ea-apply__grid { grid-template-columns: 1fr; gap: 36px; }

  .course-content-wrapper { grid-template-columns: 1fr; }
  .course-sidebar { position: static; }
  .info-bar-container { grid-template-columns: 1fr 1fr; gap: 8px 0; }
  .info-bar-item:nth-child(3) { border-left: 0; }
  .course-hero-content { padding: 110px 0 140px; }
}

@media (max-width: 640px) {
  .ea-hero__stats { gap: 26px; }
  .ea-event-card { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: auto; }
  .ea-event-card__desc { max-height: 180px; }
  .ea-event-card__media { height: 200px; aspect-ratio: auto; max-width: none; }
  .ea-event-card__watermark { display: none; }
  .ea-apply__fields { grid-template-columns: 1fr; }
  .ea-stats-panel { padding: 26px 24px; }
  .ea-stats-panel__value { font-size: var(--text-xl); }
  .ea-footer__links { gap: 32px; }

  .form-row, .form-row-wide-left { grid-template-columns: 1fr; }
  .info-bar-container { grid-template-columns: 1fr 1fr; }
  .info-bar-item { padding: 6px 16px; }
  .registration-form-container { padding: 28px 20px; }
  .course-main-content { padding: 80px 20px 48px; }
  .course-hero-container { padding: 0 24px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ea-hero-card__status .dot { animation: none; }
  .ea-course-card, .ea-course-card:hover { transform: none; }
  .ea-btn:active, .continue-payment-button:active, .course-hero .register-button:active { transform: none; }
  .message { animation: none; }
}