/* ==========================================================================
   Selling to Foreign Investors — Executive Course
   Executive aesthetic — light surfaces, navy/gold anchors, no shadows.
   Shared by the English pages at the root and the Spanish pages under /es/.

   MOBILE FIRST. Every component is written for a 375px phone and widened with
   min-width queries. The only max-width query in the file is the mobile
   navigation collapse, which is a behaviour, not a layout.

   The homepage hero (banner "Homepage hero", below) is the approved visual
   reference for the site and is carried here unchanged. Everything else is
   built to match it.
   ========================================================================== */

:root {
  /* Fixed palette ------------------------------------------------------- */
  --white: #ffffff;
  --mist: #f2f4f7;
  --navy: #12294a;
  --navy-deep: #0c1d38;
  --gold: #c6a15b; /* gold reading on navy */
  --gold-lift: #d8b673; /* gold, one step brighter — button hover only */
  --gold-ink: #8a6516; /* gold reading on white / mist */
  --graphite: #16202e;
  --ivory: #faf9f6; /* warm white — the homepage hero column only */

  /* Surface tokens — light by default, redefined on navy surfaces --------- */
  --surface: var(--white);
  --fg: var(--graphite);
  --fg-2: rgba(22, 32, 46, 0.8);
  --fg-3: rgba(22, 32, 46, 0.72);
  --fg-4: rgba(22, 32, 46, 0.66);
  --heading: var(--navy);
  --accent: var(--gold-ink);
  --accent-dim: rgba(138, 101, 22, 0.42);
  --accent-soft: rgba(138, 101, 22, 0.07);
  --sage: #4c6a56;
  --hair: rgba(18, 41, 74, 0.17);
  --hair-soft: rgba(18, 41, 74, 0.09);
  --fill: #eceff4; /* filled box inside a surface — one step off the surface */
  --btn-bg: var(--navy);
  --btn-fg: #ffffff;
  --btn-bg-hover: #1d3a63;

  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, "Helvetica Neue", Helvetica, sans-serif;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 2px;
}

/* Dark navy surfaces. Every component below reads the tokens above, so a
   surface only has to redeclare them — no component-level overrides. */
.masthead,
.colophon,
.band--navy,
.hero__strip,
.event-hero,
.event-bar {
  --surface: var(--navy);
  --fg: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.8);
  --fg-3: rgba(255, 255, 255, 0.64);
  --fg-4: rgba(255, 255, 255, 0.55);
  --heading: #ffffff;
  --accent: var(--gold);
  --accent-dim: rgba(198, 161, 91, 0.45);
  --accent-soft: rgba(198, 161, 91, 0.1);
  --sage: #9db3a4;
  --hair: rgba(255, 255, 255, 0.17);
  --hair-soft: rgba(255, 255, 255, 0.09);
  --fill: rgba(255, 255, 255, 0.055);
  --btn-bg: var(--gold);
  --btn-fg: var(--navy);
  --btn-bg-hover: var(--gold-lift);
  background: var(--surface);
  color: var(--fg);
}

/* The mist band is a surface in its own right: it redeclares --surface so any
   component sitting on it (grid gaps, tiles) reads grey rather than white. */
.band--mist {
  --surface: var(--mist);
  --fill: #e4e8ee;
  background: var(--surface);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt and braces: nothing may scroll sideways */
}

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

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--heading);
  margin: 0;
  overflow-wrap: break-word;
}

/* The small gold eyebrow that opens every section. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent-dim);
  flex: none;
}

.section-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin: 0;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 50ch;
}

p {
  margin: 0 0 1.15em;
}

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

strong {
  font-weight: 600;
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

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

.band {
  padding-block: var(--band);
  border-top: 1px solid var(--hair);
}

.band--tight {
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
}

.band--flush {
  border-top: 0;
}

.split {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

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

/* Gold on a light surface. The button tokens are navy by default there, so
   this modifier redeclares them rather than naming colours on the component —
   navy ink on gold is the same pairing the masthead button already uses. */
.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy);
  --btn-bg-hover: var(--gold-lift);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn--gold:hover {
  background: var(--btn-bg-hover);
}

/* The one secondary style on the site: an outline that reads as a link with a
   frame, never as a second primary action. */
.btn--outline {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.btn--outline:hover {
  border-color: var(--accent);
  color: var(--heading);
}

.btn--sm {
  padding: 0.6rem 1rem;
  font-size: 0.6875rem;
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: 0.75rem;
}

/* The primary conversion button — deliberately the largest control on the
   page, so the hero and the application section both read as one obvious
   next step. */
.btn--xl {
  padding: 1.4rem 3.25rem;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
}

/* Every primary call to action carries this: a comfortable 48px target that
   runs the full column width on a phone and shrinks to its label above it. */
.btn--cta {
  min-height: 48px;
  justify-content: center;
  display: flex;
  width: 100%;
  text-align: center;
}

@media (min-width: 620px) {
  .btn--cta {
    display: inline-flex;
    width: auto;
  }
}

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

/* A text link with an arrow — the site's secondary action. */
.linkmore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 160ms ease, color 160ms ease;
}

.linkmore:hover {
  border-bottom-color: var(--accent);
  color: var(--heading);
}

/* --------------------------------------------------------------------------
   Header — one bar on every page, hamburger below 860px
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 41, 74, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--gold);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  padding-block: 0.5rem;
}

/* Phone row: menu button on the left, EN / ES, then the apply button. The nav
   itself wraps to its own line and is collapsed by the script. */
.navtoggle {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 160ms ease;
}

.navtoggle:hover {
  color: var(--fg);
}

.navtoggle svg {
  width: 22px;
  height: 22px;
}

.navtoggle__close,
.navtoggle[aria-expanded="true"] .navtoggle__open {
  display: none;
}

.navtoggle[aria-expanded="true"] .navtoggle__close {
  display: block;
}

.nav {
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-top: 1px solid var(--hair);
}

/* Collapsed only when the script is running — without JS the links stay in the
   page rather than disappearing behind a button that cannot open. */
.js .nav {
  display: none;
}

.js .nav.is-open {
  display: flex;
}

.nav a {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-3);
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--hair-soft);
  transition: color 160ms ease;
}

.nav a:last-child {
  border-bottom: 0;
}

.nav a:hover {
  color: var(--fg);
}

.nav a[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 2px 0 0 var(--gold);
  padding-left: 0.85rem;
}

/* Language switch — EN / ES. Always visible, never inside the menu. */
.langswitch {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 auto 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--fg-4);
}

.langswitch a {
  color: var(--fg-3);
  text-decoration: none;
  padding: 0.5rem 0.15rem;
  transition: color 160ms ease;
}

.langswitch a:hover {
  color: var(--fg);
}

.langswitch a[aria-current="true"] {
  color: var(--accent);
}

.masthead__cta {
  order: 3;
  min-height: 44px;
}

@media (min-width: 860px) {
  .masthead__inner {
    flex-wrap: nowrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 68px;
    padding-block: 0;
  }

  .navtoggle {
    display: none;
  }

  /* The left of the bar stays deliberately empty: the nav, the language
     switch and the apply button are pushed to the right edge. */
  .nav,
  .js .nav {
    order: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    width: auto;
    margin-left: auto;
    border-top: 0;
  }

  .nav a {
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
    padding-block: 0.4rem;
    padding-left: 0;
    border-bottom: 0;
  }

  .nav a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--gold);
    padding-left: 0;
  }

  .langswitch {
    order: 0;
    margin: 0;
    font-size: 0.6875rem;
  }

  .masthead__cta {
    order: 0;
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   Partnership lockup — JK Anderson × Stael
   -------------------------------------------------------------------------- */

.lockup__mark {
  display: block;
  width: min(85%, 420px);
  height: auto;
  aspect-ratio: 1705 / 431;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Homepage hero — APPROVED, DO NOT MODIFY
   -------------------------------------------------------------------------- */

/* Two columns: an ivory type column on the left and the balcony photograph
   bleeding off the right edge, closing on a navy facts strip. There is no
   border between the halves — .hero__fade dissolves the photograph's left edge
   into the ivory, which is what lets the image run slightly under the type
   column without showing a seam. Mobile stacks type → photograph → strip and
   swaps the sideways fade for a short vertical one.

   The hero keeps the 1160px shell, the body size and the 1.68 leading it was
   approved at, so widening the shell, raising the site's mobile body floor to
   16px and tightening the leading elsewhere cannot shift it by a pixel. The
   three pinned declarations below are what hold that — do not remove them, and
   if any of those globals changes again, check the hero still pins the old
   value. */

.hero {
  background: var(--ivory);
  --surface: var(--ivory);
  --shell: 1160px;
  font-size: clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  line-height: 1.68;
}

.hero__main {
  position: relative;
  padding: clamp(2rem, 6vw, 3rem) var(--gutter) 0;
}

/* Above the photograph in the stacking order, so the faded left edge of the
   image can pass behind the type. */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 37.5rem;
}

.hero__eyebrow {
  margin: 0 0 1.15rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The strongest thing on the page: serif, navy, left-aligned, and set tighter
   than the display sizes elsewhere so the two lines read as one block. */
.hero__title {
  font-size: clamp(1.9375rem, 1.3rem + 2.5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

/* The second line — italic is the accent here, so it carries no dash and no
   indent; it sits flush left under the first line. */
.hero__title-line {
  display: block;
  font-style: italic;
}

/* Full-width under the headline rather than a short tick, so the rule closes
   the headline block instead of decorating it. */
.hero__rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: 1.15rem 0 1rem;
  background: var(--accent);
}

/* Tracked uppercase, deliberately a long way below the headline in size — it
   supports the headline rather than competing with it. */
.hero__sub {
  margin: 0 0 0.95rem;
  font-family: var(--sans);
  font-size: clamp(0.75rem, 0.715rem + 0.18vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hero__support {
  margin: 0;
  max-width: 37.5rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-3);
}

/* Three benefits on one row — hairline gold rules between them rather than
   cards, so the row reads as a single line of type with marks. */
.hero__benefits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 0;
  margin: 1.3rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hair-soft);
}

.hero__benefits li {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hero__benefit-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.hero__benefit-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 600px) {
  .hero__benefits li {
    flex: 1 1 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .hero__benefits li + li {
    margin-left: clamp(0.9rem, 2vw, 1.5rem);
    padding-left: clamp(0.9rem, 2vw, 1.5rem);
    border-left: 1px solid var(--accent-dim);
  }
}

/* One horizontal CTA area: the button and its small print on the left, the
   price on the right. Both start at the same top edge, so the button sits
   level beside the price rather than riding above it. The price is stated,
   never framed as an offer. */
.hero__action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.15rem clamp(1.75rem, 4vw, 3rem);
  margin-top: 1.4rem;
}

.hero__apply {
  justify-content: center;
  padding-block: 1.15rem;
}

/* One obvious tap target: the hero button runs the full column width on a
   phone. Kept as the approved max-width query rather than restated
   mobile-first, so the hero renders exactly as it was signed off. */
@media (max-width: 720px) {
  .hero__action-apply {
    width: 100%;
  }

  .hero__apply {
    width: 100%;
    padding-inline: 1.25rem;
  }
}

.hero__fineprint {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--fg-4);
}

.hero__price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}

.hero__price-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}

.hero__price-value {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1;
  color: var(--heading);
}

/* Credibility, understated: one line of small type, with the two names the
   only thing carrying weight. */
.hero__partners {
  max-width: 37.5rem;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-4);
}

.hero__partners strong {
  font-weight: 600;
  color: var(--fg-2);
}

/* Added on instruction, below the partnership line. Additive only — it sets no
   property already declared above, so the approved hero is unchanged apart from
   the extra line it adds. */
.hero__grouprates {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- The photograph and its blend ----------------------------------------- */

.hero__media {
  position: relative;
  margin: clamp(2rem, 6vw, 2.75rem) calc(var(--gutter) * -1) 0;
  aspect-ratio: 16 / 11;
}

/* Full quality, full opacity — only the overlay above it fades. The framing
   holds the two figures in the right half of the crop. */
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

/* Mobile: a short fade from the ivory above into the top of the image. The
   desktop rule swaps this for the left-edge fade. Stops are the --ivory value
   at decreasing alpha; they cannot read the token because a gradient needs the
   colour with an alpha applied. */
.hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #faf9f6 0%,
    rgba(250, 249, 246, 0.62) 8%,
    rgba(250, 249, 246, 0.18) 16%,
    rgba(250, 249, 246, 0) 24%
  );
}

@media (min-width: 980px) {
  /* The type column keeps the page's shell alignment on the left while the
     right column runs to the viewport edge, so the photograph bleeds. */
  .hero__main {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: stretch;
    min-height: min(34rem, 66vh);
    padding: 0 0 0 max(var(--gutter), calc((100% - var(--shell)) / 2));
  }

  .hero__content {
    grid-area: 1 / 1;
    align-self: center;
    padding: clamp(1.85rem, 2.8vw, 2.5rem) clamp(2rem, 3.5vw, 3.5rem) clamp(1.85rem, 2.8vw, 2.5rem) 0;
  }

  /* The negative margin is the overlap: the image starts inside the type
     column and the fade covers the part that sits behind the copy. */
  .hero__media {
    grid-area: 1 / 2;
    margin: 0 0 0 -12%;
    aspect-ratio: auto;
  }

  .hero__photo {
    position: absolute;
    inset: 0;
  }

  .hero__fade {
    background: linear-gradient(
      to right,
      #faf9f6 0%,
      rgba(250, 249, 246, 0.96) 8%,
      rgba(250, 249, 246, 0.72) 18%,
      rgba(250, 249, 246, 0.35) 28%,
      rgba(250, 249, 246, 0.08) 38%,
      rgba(250, 249, 246, 0) 46%
    );
  }
}

/* --- Facts strip ---------------------------------------------------------- */

/* A navy row closing the hero. It reads the navy surface tokens from the rule
   at the top of the file, so the gold and the white here are inherited rather
   than named. */
.hero__facts {
  list-style: none;
  display: grid;
  margin: 0 auto;
  padding-block: clamp(1.05rem, 1.8vw, 1.3rem);
}

.hero__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--hair-soft);
}

.hero__facts li:first-child {
  border-top: 0;
  padding-top: 0;
}

.hero__facts li:last-child {
  padding-bottom: 0;
}

.hero__fact-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  color: var(--accent);
}

.hero__fact-icon svg {
  width: 100%;
  height: 100%;
}

.hero__fact-title {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.hero__fact-detail {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-3);
}

@media (min-width: 880px) {
  .hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__facts li {
    padding-block: 0;
    padding-inline: clamp(1rem, 2.2vw, 1.9rem);
    border-top: 0;
    border-left: 1px solid var(--hair-soft);
  }

  .hero__facts li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .hero__facts li:last-child {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

/* Eyebrow → heading → short supporting sentence. Every section on the site
   opens with this block, which is what makes the rhythm read as one system. */
.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

.section-head h2,
.page-hero h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  text-wrap: balance;
}

.section-head .lede,
.page-hero .lede {
  margin-top: 1.15rem;
}

.section-cta {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

/* An interior page opener: the same block, given a little more air. */
.page-hero {
  padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem);
}

.page-hero .lede {
  max-width: 56ch;
}

/* A short statement set in the serif over a gold rule — used where one
   sentence has to carry more weight than body copy. */
.statement {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding-top: clamp(1.15rem, 2.5vw, 1.5rem);
  border-top: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.4375rem);
  line-height: 1.45;
  color: var(--heading);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   Item grids — the one repeating content pattern on the site
   -------------------------------------------------------------------------- */

/* Icon or rule, short heading, two lines of copy. No cards, no shadows: a
   hairline above each item is the only frame. */
.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.items > li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
}

.items--accent > li {
  border-top: 2px solid var(--accent-dim);
}

.items h2,
.items h3 {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  margin-bottom: 0.55rem;
}

.items p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
}

.items__icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.items__icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 700px) {
  .items--2,
  .items--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3.5vw, 3rem);
  }
}

@media (min-width: 900px) {
  .items--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Checklist — who should apply
   -------------------------------------------------------------------------- */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
}

/* Checkmark drawn from two borders — keeps the mark on the hairline/no-image
   idiom the rest of the page uses. */
.checklist li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.95rem;
  margin-top: 0.28rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 760px) {
  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
  }
}

/* --------------------------------------------------------------------------
   Method highlights
   -------------------------------------------------------------------------- */

.highlights {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
}

@media (min-width: 620px) {
  .highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.highlights li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
}

.highlights li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Metrics — three or four numbers, open hairlines rather than boxes
   -------------------------------------------------------------------------- */

.metrics {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
}

/* .metrics is declared after .shell and both are single-class selectors, so its
   own list reset wins the cascade and strips the shell's gutter — the row lands
   flush against the viewport edge instead of lining up with the copy above it.
   The other shell lists (.hero__facts, .event-bar__list) sidestep this by only
   resetting the block axis; this one can't, because it is also used off-shell on
   the homepage, where it still needs the inline padding zeroed. */
.metrics.shell {
  padding-inline: var(--gutter);
}

.metrics li {
  padding-block: 1.15rem;
  border-top: 1px solid var(--hair);
}

/* The bottom rule closes the single-column stack. Once the items sit in columns
   it would hang under the last one alone, so each multi-column step below drops
   it — and has to say :last-child to out-specify this. */
.metrics li:last-child {
  border-bottom: 1px solid var(--hair);
}

.metric__value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.9375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--accent);
}

.metric__note {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--fg-3);
}

@media (min-width: 620px) {
  .metrics--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .metrics--4 li:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 760px) {
  .metrics--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .metrics--3 li,
  .metrics--3 li:last-child {
    border-bottom: 0;
    border-top: 2px solid var(--accent-dim);
  }
}

@media (min-width: 900px) {
  .metrics--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .metrics--4 li {
    border-top: 2px solid var(--accent-dim);
  }
}

/* --------------------------------------------------------------------------
   Session anatomy — 30 / 30 / 30
   -------------------------------------------------------------------------- */

.anatomy {
  margin-top: clamp(2.25rem, 4.5vw, 3rem);
}

.anatomy ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
}

.anatomy li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--hair-soft);
}

.anatomy__time {
  flex: none;
  width: 4.5rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent);
}

.anatomy__what {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

@media (min-width: 760px) {
  .anatomy ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* --------------------------------------------------------------------------
   Final assignment
   -------------------------------------------------------------------------- */

.assignment {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.assignment__figure {
  margin: 0;
}

.assignment__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 28%;
}

.deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deliverables li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
}

.deliverables li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

@media (min-width: 860px) {
  .assignment {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .assignment__figure img {
    aspect-ratio: 4 / 5;
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   Event teaser on the homepage
   -------------------------------------------------------------------------- */

.teaser {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.teaser__figure {
  margin: 0;
  order: 2;
}

.teaser__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.teaser__body {
  order: 1;
}

@media (min-width: 860px) {
  .teaser {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .teaser__figure {
    order: 0;
  }

  .teaser__figure img {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Closing application CTA
   -------------------------------------------------------------------------- */

.final-cta__head {
  max-width: 46ch;
}

.final-cta h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
}

.final-cta__sub {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 0.83rem + 0.25vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.15rem 0 1.15rem;
}

.final-cta__note {
  margin: 1.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--fg-3);
}

/* --------------------------------------------------------------------------
   CTA band — one line, one button
   -------------------------------------------------------------------------- */

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  justify-content: space-between;
}

.cta-band h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   Footer — the same three lines on every course page
   -------------------------------------------------------------------------- */

.colophon {
  background: var(--navy-deep);
  border-top: 2px solid var(--gold);
  padding-block: clamp(2.25rem, 5vw, 3rem);
}

.colophon__inner {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 720px) {
  .colophon__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: start;
  }
}

.colophon__title {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.colophon__meta {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--fg-3);
}

.colophon dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 1.25rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.colophon dt {
  color: var(--fg-4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 600;
  padding-top: 0.25rem;
}

.colophon dd {
  margin: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.colophon dd a {
  color: var(--fg);
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
}

.colophon__partners {
  margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-4);
}

/* --------------------------------------------------------------------------
   Leadership page
   -------------------------------------------------------------------------- */

.leadership-hero .lockup__mark {
  width: min(100%, 340px);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
}

.portrait {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2rem);
  max-width: 17rem;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--mist);
}

.profile__role {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.75rem 0 0;
}

.profile h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);
}

/* The metrics row is a sibling of the split above it, so it has to open its
   own space. */
.profile .metrics {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.prose {
  max-width: 62ch;
}

.prose p {
  font-family: var(--serif);
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.65;
}

/* Detail that only some readers want — collapsed by default so the partner
   section cannot outweigh the instructor section above it. */
.disclose {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
  padding-top: 1.25rem;
}

.disclose > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.disclose > summary::-webkit-details-marker {
  display: none;
}

.disclose > summary::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.disclose[open] > summary::after {
  content: "–";
}

.disclose__body {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Steps — apply page
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.steps li {
  counter-increment: step;
  padding-block: 1.15rem;
  border-top: 1px solid var(--hair);
}

.steps li:last-child {
  border-bottom: 1px solid var(--hair);
}

.steps h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.steps h2::before {
  content: counter(step, decimal-leading-zero);
  color: var(--accent);
  font-weight: 700;
}

.steps p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-2);
  max-width: 44ch;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .steps li {
    border-bottom: 0;
    border-top: 2px solid var(--accent-dim);
  }

  .steps li:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Forms — one field per row, large targets, mobile first
   -------------------------------------------------------------------------- */

.form {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--gold);
  background: var(--mist);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 46rem;
}

.field + .field,
.field + .fieldset,
.fieldset + .field,
.fieldset + .fieldset {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--hair-soft);
}

/* A <fieldset> notches its own top border around the <legend>, which leaves a
   stray dash to the right of a one-line legend. Paint the separator as an
   inset line so the radio groups match the text fields above them. */
.field + .fieldset,
.fieldset + .fieldset {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--hair-soft);
}

.label,
.fieldset legend {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
  padding: 0;
}

.label .req,
.fieldset legend .req {
  color: var(--accent);
  margin-left: 0.35rem;
}

/* The counterpart to .req — marks a field the applicant may skip. */
.label .opt {
  color: var(--fg-4);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-left: 0.5rem;
}

.hint {
  display: block;
  font-size: 0.875rem;
  color: var(--fg-4);
  margin: -0.35rem 0 0.85rem;
  line-height: 1.55;
  max-width: 52ch;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea {
  width: 100%;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea {
  resize: vertical;
  min-height: 7rem;
}

input::placeholder,
textarea::placeholder {
  color: rgba(22, 32, 46, 0.38);
}

input:hover,
textarea:hover {
  border-color: rgba(18, 41, 74, 0.34);
}

input:focus,
textarea:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--gold);
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  /* Contains the floated legend below, so the choices start under it. */
  display: flow-root;
}

/* A <legend> is normally painted across the fieldset's block-start border
   edge, which puts it level with the separator line above the group. Floating
   it opts out of that rendering, so the legend sits inside the padding like
   every other field label. */
.fieldset legend {
  float: left;
  width: 100%;
}

/* The floated legend is 100% wide, so whatever follows has to clear it before
   it will lay out on its own line. */
.fieldset legend + * {
  clear: both;
}

/* One choice per row on a phone; a single row of choices once there is space
   for the labels to sit side by side. */
.choices {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 620px) {
  .choices {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .choices--wrap {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.choice:hover {
  border-color: rgba(18, 41, 74, 0.34);
  color: var(--fg);
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice .dot {
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid var(--fg-4);
  transform: rotate(45deg);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.choice:has(input:checked) {
  border-color: var(--navy);
  color: var(--navy);
  font-weight: 500;
  background: var(--accent-soft);
}

.choice:has(input:checked) .dot {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
  padding-top: clamp(1.5rem, 3.5vw, 2rem);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form__actions .fineprint {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--fg-4);
  margin: 0;
}

.btn[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.form-error {
  margin-top: 1.25rem;
  border: 1px solid var(--accent-dim);
  border-left-width: 3px;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  color: var(--fg);
  background: var(--accent-soft);
}

.confirmation {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--gold);
  background: var(--mist);
  padding: clamp(1.75rem, 5vw, 3rem);
  max-width: 46rem;
}

.confirmation h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  margin-bottom: 1rem;
}

.confirmation p {
  color: var(--fg-2);
  max-width: 52ch;
}

.confirmation__seal {
  width: 40px;
  height: 40px;
  color: var(--gold-ink);
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Event page — hero
   -------------------------------------------------------------------------- */

/* Image-led: the Palmanova rooftop photograph is the hero. On a phone the
   identity block sits above the photograph so the page opens with the event
   name; from 980px up the type moves onto the image, held legible by a navy
   gradient rising from the bottom edge rather than by darkening the picture. */

.event-hero__inner {
  display: grid;
}

.event-hero__type {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3rem) var(--gutter) clamp(1.5rem, 4vw, 2.25rem);
}

.event-hero__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.event-hero h1 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  line-height: 1.06;
  max-width: 20ch;
  text-wrap: balance;
}

.event-hero__sub {
  margin: 1.15rem 0 0;
  max-width: 40ch;
  font-family: var(--sans);
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--fg-2);
}

.event-hero__media {
  position: relative;
  margin: 0;
}

/* height: auto is load-bearing, not tidiness. The width/height attributes on
   the <img> are presentational hints, so without it the photograph is laid out
   1500px tall and aspect-ratio never applies. Same for every other sized
   figure on the site. */
.event-hero__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.event-hero__scrim {
  display: none;
}

@media (min-width: 620px) {
  .event-hero__photo {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 980px) {
  .event-hero__media {
    grid-area: 1 / 1;
  }

  .event-hero__photo {
    aspect-ratio: 21 / 9;
    min-height: 30rem;
    max-height: 78vh;
  }

  .event-hero__type {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    z-index: 2;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
    max-width: none;
  }

  /* Only as much navy as the type needs — the top of the frame, which is all
     sky, stays as photographed. The ramp is weighted to where the headline
     actually sits so gold-on-skyline stays legible. */
  .event-hero__scrim {
    display: block;
    grid-area: 1 / 1;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(12, 29, 56, 0.94) 0%,
      rgba(12, 29, 56, 0.85) 30%,
      rgba(12, 29, 56, 0.68) 45%,
      rgba(12, 29, 56, 0.4) 58%,
      rgba(12, 29, 56, 0.14) 70%,
      rgba(12, 29, 56, 0) 80%
    );
  }
}

/* --- The slim information bar under the hero ------------------------------ */

.event-bar {
  border-top: 1px solid var(--hair);
}

.event-bar__list {
  list-style: none;
  display: grid;
  margin: 0 auto;
  padding-block: clamp(1rem, 2.5vw, 1.35rem);
}

.event-bar__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--hair-soft);
}

.event-bar__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.event-bar__list li:last-child {
  padding-bottom: 0;
}

.event-bar__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  color: var(--accent);
}

.event-bar__icon svg {
  width: 100%;
  height: 100%;
}

.event-bar__title {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.event-bar__detail {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-3);
}

@media (min-width: 880px) {
  .event-bar__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .event-bar__list li {
    padding-block: 0;
    padding-inline: clamp(1rem, 2.2vw, 1.9rem);
    border-top: 0;
    border-left: 1px solid var(--hair-soft);
  }

  .event-bar__list li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .event-bar__list li:last-child {
    padding-right: 0;
  }
}

/* --- Event sections ------------------------------------------------------- */

.event-intro {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--heading);
  max-width: 26ch;
  margin: 0;
}

/* The positioning line. Serif first line, tracked sans second — loud without
   raising its voice. */
.statement--loud {
  max-width: 30ch;
}

.statement--loud .statement__line {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: clamp(0.75rem, 0.72rem + 0.18vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Four words for the evening — understated to the point of being a caption. */
.experience {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.experience li {
  padding-block: 0.85rem;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (min-width: 700px) {
  .experience {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem);
  }
}

.rsvp__facts {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.7;
}

.partnership-line {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  text-align: center;
}

.partnership-line strong {
  color: var(--fg-2);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}