/* ==========================================================================
   IDCA — Indian Diamond & Colored Stones Association
   Design system: "Refraction"
   Ink + oxblood + champagne gold + bone. Editorial hairline grid,
   high-contrast display serif, cinematic dark hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — light */
  --bone:        #FBF8F3;
  --bone-2:      #F4EFE6;
  --bone-3:      #EBE4D6;
  --card:        #FFFFFF;

  /* Surfaces — dark */
  --ink:         #0C0509;
  --ink-2:       #150910;
  --ink-3:       #22131B;
  --wine:        #3A0F1E;

  /* Ink / text on light */
  --text:        #14100E;
  --text-soft:   #5C534B;
  --text-mute:   #6F665C;

  /* Text on dark */
  --on-dark:        #FBF8F3;
  --on-dark-soft:   #B9AEA6;
  --on-dark-mute:   #9A8F86;

  /* Champagne */
  --gold:        #C9A45C;
  --gold-soft:   #E2CB9B;
  --gold-link:   #7D6029;
  --gold-wash:   rgba(201, 164, 92, 0.14);

  /* Hairlines */
  --line:             rgba(20, 16, 14, 0.13);
  --line-strong:      rgba(20, 16, 14, 0.22);
  --line-dark:        rgba(251, 248, 243, 0.14);
  --line-dark-strong: rgba(251, 248, 243, 0.30);

  /* Type */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-micro:  0.6875rem;
  --fs-small:  0.8125rem;
  --fs-body:   1rem;
  --fs-lead:   clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  --fs-h4:     clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h3:     clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --fs-h2:     clamp(1.875rem, 1.42rem + 2.2vw, 3.25rem);
  --fs-h1:     clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-hero:   clamp(2.5rem, 1.62rem + 3.5vw, 4.5rem);

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-y: clamp(4rem, 2.4rem + 6.4vw, 8rem);

  /* Layout */
  --shell:      76rem;
  --shell-wide: 88rem;
  --gutter:     clamp(1.25rem, 0.85rem + 2vw, 3rem);
  --header-h:   76px;

  /* Radius — restrained; this is an editorial system, not a bubbly one */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 12, 8, 0.05), 0 2px 8px rgba(20, 12, 8, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 12, 8, 0.05), 0 12px 30px -12px rgba(20, 12, 8, 0.14);
  --shadow-lg: 0 4px 8px rgba(20, 12, 8, 0.05), 0 28px 60px -22px rgba(20, 12, 8, 0.24);
  --shadow-gold: 0 14px 40px -18px rgba(138, 96, 32, 0.55);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 480ms;

  /* Z-scale */
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 1000;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* The canvas colour the browser paints outside the content box: the iOS
     bottom safe area and the overscroll region at both ends. Left unset it
     inherits body's near-white --bone and reads as a white bar pinned under
     the dark footer. Every page opens and closes on ink, so match that. */
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  min-height: 100svh;
  background: var(--bone);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:where(h1, h2, h3, h4, h5) {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { text-wrap: pretty; overflow-wrap: break-word; }

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

:focus-visible {
  outline: 2px solid var(--gold-link);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.site-header.is-transparent :focus-visible { outline-color: var(--gold-soft); }

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

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -130%);
  z-index: calc(var(--z-overlay) + 10);
  background: var(--ink); color: var(--on-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none;
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-wide { max-width: var(--shell-wide); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.section--soft  { background: var(--bone-2); }
.section--dark  { background: var(--ink); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-soft); }

.section--rule::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--line);
}
.section--dark.section--rule::before { background: var(--line-dark); }

main, .site-header, .site-footer { position: relative; z-index: var(--z-raised); }

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-link);
  line-height: 1;
}
/* A small lozenge picks up the diamond motif instead of a dash-like rule */
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.375em;
  height: 0.375em;
  background: currentColor;
  transform: rotate(45deg);
}
.section--dark .eyebrow, .hero .eyebrow, .cta-band .eyebrow, .site-footer .eyebrow { color: var(--gold); }

/* The house mark — drawn as SVG, never an emoji */
.mark {
  flex: none;
  width: 0.9em; height: 0.9em;
  fill: currentColor;
  opacity: 0.85;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 46ch;
}
.section--dark .lead, .hero .lead { color: var(--on-dark-soft); }

.prose p + p { margin-top: 1.15em; }
.prose p { color: var(--text-soft); max-width: 68ch; }
/* Copy that runs the full width of the shell, flush with the section heading,
   instead of sitting in a narrow measured column. */
.prose--full p { max-width: none; }
.section--dark .prose p { color: var(--on-dark-soft); }

.prose a {
  color: var(--gold-link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--text); }

.index-num {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.section--dark .index-num { color: var(--on-dark-mute); }

.display-italic { font-style: italic; font-weight: 400; }
.display-gold   { color: var(--gold); }

.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  max-width: 62ch;
}
.section-head h2 { max-width: 22ch; }
.section-head--split { max-width: none; align-items: end; }
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-5);
  }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}
.section-head--split.section-head--top { align-items: start; }
.section-head__aside p { color: var(--text-soft); max-width: 46ch; }
.section-head__aside p + p { margin-top: 0.9em; }
.section--dark .section-head__aside p { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-dark);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
  transition: color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
/* Wipe fill — colour/transform only, so hover costs no layout */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.btn:active { transform: translateY(1px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { color: var(--ink); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--gold::before { background: var(--on-dark); }
.btn--gold:hover { color: var(--ink); border-color: var(--on-dark); }

.section--dark .btn--ghost, .hero .btn--ghost, .cta-band .btn--ghost, .site-footer .btn--ghost {
  --btn-fg: var(--on-dark);
  --btn-bd: var(--line-dark-strong);
}
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover,
.cta-band .btn--ghost:hover, .site-footer .btn--ghost:hover { color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-link);
  padding-block: 0.35rem;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
/* A link sitting directly in a section head is a grid item, so keep it at its
   content width; otherwise it stretches and its 100%-wide underline with it. */
.section-head > .link { justify-self: start; }
.link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(0.28); }
.link .arrow { transition: transform var(--t-base) var(--ease-out); }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(4px); }
.section--dark .link, .hero .link, .cta-band .link { color: var(--gold); }

.link-row { display: flex; flex-wrap: wrap; gap: 1.75rem; }

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  /* Header spans the full viewport rather than the centered shell, so the
     brand sits at the left edge and the nav at the right */
  max-width: none;
}

/* Solid (default) state — used on every interior page.
   The blur lives on a pseudo-element, not the header itself: a non-none
   backdrop-filter would make .site-header the containing block for the
   fixed mobile drawer and clip it to the header's height. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 248, 243, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: opacity var(--t-base) var(--ease-out);
}
.site-header { border-bottom-color: var(--line); }

/* Transparent over a dark hero, until scrolled */
.site-header.is-transparent { border-bottom-color: transparent; }
.site-header.is-transparent::before { opacity: 0; }

/* With the drawer open the header joins the dark overlay, so no light sliver
   is left beside the panel. */
body.nav-open .site-header { border-bottom-color: transparent; }
body.nav-open .site-header::before { opacity: 0; }
body.nav-open .site-header::after { opacity: 0; }
body.nav-open .brand__logo--dark { display: none; }
body.nav-open .brand__logo--light { display: block; }
body.nav-open .brand__text { color: var(--on-dark-soft); border-left-color: var(--line-dark-strong); }
body.nav-open .nav-toggle { border-color: var(--line-dark-strong); }
.site-header.is-transparent::after {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 180px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 4, 7, 0.72), rgba(8, 4, 7, 0));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-height: 44px;
}
.brand__logo { height: 42px; width: auto; transition: opacity var(--t-base) var(--ease-out); }
.brand__logo--light { display: none; }
.site-header.is-transparent .brand__logo--dark { display: none; }
.site-header.is-transparent .brand__logo--light { display: block; }
.brand__text {
  display: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  max-width: 24rem;
  text-wrap: balance;
  color: var(--text-soft);
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
}
.site-header.is-transparent .brand__text { color: var(--on-dark-soft); border-left-color: var(--line-dark-strong); }
@media (min-width: 1240px) { .brand__text { display: block; max-width: 17rem; letter-spacing: 0.16em; } }
@media (min-width: 1440px) { .brand__text { max-width: 24rem; letter-spacing: 0.2em; } }

.site-nav { display: flex; align-items: center; gap: 0.35rem; }
.site-nav a {
  position: relative;
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.055em;
  text-decoration: none;
  color: var(--text-soft);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out);
}
.site-header.is-transparent .site-nav a { color: var(--on-dark-soft); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-header.is-transparent .site-nav a:hover,
.site-header.is-transparent .site-nav a:focus-visible { color: var(--on-dark); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-header.is-transparent .site-nav a[aria-current="page"] { color: var(--on-dark); }
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--gold);
  height: 2px;
}
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta {
  margin-left: 0.65rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.site-nav a.nav-cta:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.site-header.is-transparent .site-nav a.nav-cta {
  color: var(--on-dark);
  border-color: var(--line-dark-strong);
}
.site-header.is-transparent .site-nav a.nav-cta:hover {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}

/* Scroll progress hairline */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  pointer-events: none;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  position: relative;
  /* Above the drawer panel, which comes later in the DOM, so the button
     stays tappable (as a close X) while the drawer is open */
  z-index: 1;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.site-header.is-transparent .nav-toggle { border-color: var(--line-dark-strong); }
.nav-toggle span {
  position: absolute;
  left: 14px;
  width: 20px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.site-header.is-transparent .nav-toggle span { background: var(--on-dark); }
.nav-toggle span:nth-child(1) { transform: translateY(-4px); }
.nav-toggle span:nth-child(2) { transform: translateY(4px); }
body.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: rotate(-45deg); }
body.nav-open .nav-toggle span { background: var(--on-dark); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(8, 4, 7, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
body.nav-open .nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s;
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(24rem, 88vw);
    padding: calc(var(--header-h) + 2rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out),
                visibility 0s linear var(--t-slow);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.6);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-slow) var(--ease-out), visibility 0s;
  }
  .site-nav a {
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--on-dark-soft);
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
  }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--gold); }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--on-dark); }
  .site-nav a.nav-cta {
    margin: 1.75rem 0 0;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    border-radius: var(--r-pill);
  }
  .site-nav a.nav-cta:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
}

/* --------------------------------------------------------------------------
   7. Hero — home (cinematic)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}

/* Stacking inside .hero (which isolates): media 0 -> scrim 1 -> copy 3.
   All positive, so nothing can hide behind the section's own background. */
.hero > .shell { position: relative; z-index: 3; }
.hero__media    { position: absolute; inset: 0; z-index: 0; }
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.hero__scrim    { position: absolute; inset: 0; z-index: 1; }

/* A compact banner: roughly half a viewport, sized by its content rather than
   the screen, so the photograph reads as a wide letterboxed frame. */
.hero--home {
  /* Tracks the banner photo's 16:9 height so the diamond is not cropped */
  min-height: clamp(26rem, 56.25vw, 68rem);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 1.25rem);
  padding-bottom: 1.75rem;
}

.hero--home .hero__title {
  /* Scaled ~17% over the old Fraunces values: EB Garamond has a smaller
     x-height and narrower advance, so the same rem size renders visibly
     smaller. This keeps the headline at the presence it had before. */
  font-size: clamp(2.7rem, 1.76rem + 2.93vw, 5.25rem);
}
/* Keep the supporting line growing with the headline instead of freezing at
   1267px; same slope as --fs-lead, just a higher ceiling. Its own 46ch measure
   holds the line length readable as it grows. */
.hero--home .hero__lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.5rem);
}

/* The photograph fills the whole banner; the diamond sits right of the copy
   column, kept luminous by a scrim that darkens only the edges and the left
   reading column. */
.hero--home .hero__media img { object-position: center 30%; }

.hero--home .hero__scrim {
  background:
    radial-gradient(60% 56% at 76% 46%, rgba(58, 15, 30, 0.16), rgba(58, 15, 30, 0) 70%),
    linear-gradient(180deg, rgba(8, 4, 7, 0.62) 0%, rgba(8, 4, 7, 0.2) 30%, rgba(8, 4, 7, 0) 54%),
    linear-gradient(0deg, rgba(8, 4, 7, 0.68) 0%, rgba(8, 4, 7, 0.26) 28%, rgba(8, 4, 7, 0) 56%),
    linear-gradient(96deg, rgba(8, 4, 7, 0.78) 0%, rgba(8, 4, 7, 0.46) 30%, rgba(8, 4, 7, 0.05) 62%);
}

.hero__grid {
  position: relative;
  width: 100%;
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.4vw, 3rem);
  /* Match the full-width header: copy starts at the same left gutter as the logo */
  max-width: none;
}

.hero__content, .hero__rail { position: relative; z-index: 3; }
.hero__content { max-width: 30rem; }
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--on-dark);
  margin-top: var(--space-3);
}
.hero__title .display-italic { color: var(--gold-soft); }
.hero__lead { margin-top: var(--space-3); }
.hero__actions { margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }

@media (min-width: 1024px) {
  .hero__content { max-width: 34rem; }
  .hero__rail { margin-top: 1.75rem; }

  /* Sit the stat rail on the floor of the banner, directly above the sponsor
     marquee, rather than letting it ride up with the vertically centred copy.
     The grid is stretched to the banner's full height and its spare space is
     given to the copy row, so the headline keeps the position it already had.
     On narrow desktops, where the copy alone already fills the banner, there
     is no spare space and both fall back to the natural stacked flow. */
  .hero--home { align-items: stretch; }
  .hero--home .hero__grid { grid-template-rows: 1fr auto; }

  /* Widen the copy column in step with the headline so the hand-placed line
     break survives; the lead keeps its own 46ch measure regardless. */
  .hero--home .hero__content {
    max-width: clamp(34rem, 21.4rem + 19.6vw, 45rem);
    align-self: center;
  }
}
@media (max-width: 1023px) {
  /* Stacked mobile hero: the photograph first, the copy below it on ink,
     no overlay and no scrim */
  .hero--home {
    display: block;
    min-height: 0;
    padding-top: var(--header-h);
    padding-bottom: 0;
  }
  .hero--home .hero__media { position: relative; inset: auto; }
  .hero--home .hero__media picture { position: static; }
  .hero--home .hero__media img { display: block; width: 100%; height: auto; }
  .hero--home .hero__scrim { display: none; }
  .hero--home .hero__grid { padding-top: 1.75rem; padding-bottom: 2.25rem; }
}

/* Bottom rail: stats + scroll cue */
.hero__rail {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .hero__rail { grid-template-columns: 1fr auto; align-items: end; }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  line-height: 1.4;
}
.section--soft .stat__value, .section:not(.section--dark):not(.hero) .stat__value { color: var(--text); }
.section--soft .stat__label, .section:not(.section--dark):not(.hero) .stat__label { color: var(--text-mute); }

.scroll-cue {
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-decoration: none;
  padding-block: 0.5rem;
}
@media (min-width: 768px) { .scroll-cue { display: inline-flex; } }
.scroll-cue__line {
  display: block;
  width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 164, 92, 0));
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gold-soft);
  transform: translateX(-100%);
  animation: cue-sweep 2.6s var(--ease-in-out) infinite;
}
@keyframes cue-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.scroll-cue:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   8. Hero — interior pages
   -------------------------------------------------------------------------- */
.hero--page {
  /* One fixed banner height shared by every interior page */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(28rem, 42vw, 38rem);
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
/* Sized so even the longest interior titles hold to two lines, keeping
   every page's banner the same height */
.hero--page h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.4rem); }
.hero--page .hero__scrim {
  background:
    linear-gradient(180deg, rgba(8, 4, 7, 0.72) 0%, rgba(8, 4, 7, 0.3) 42%, rgba(8, 4, 7, 0.86) 100%),
    linear-gradient(96deg, rgba(8, 4, 7, 0.94) 0%, rgba(8, 4, 7, 0.78) 34%,
                          rgba(8, 4, 7, 0.42) 62%, rgba(8, 4, 7, 0.3) 100%);
}
.hero--page .hero__media img { object-position: center 50%; }

.hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--space-3);
}
.hero__breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: 2px;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.hero__breadcrumb a:hover { color: var(--gold); }
.hero__breadcrumb [aria-current] { color: var(--on-dark); }
.hero__breadcrumb .sep { opacity: 0.5; }

.hero--page .hero__content { max-width: 42rem; }
.hero--page h1 {
  color: var(--on-dark);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero--page .lead { margin-top: var(--space-3); max-width: 34rem; }

.hero__meta {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3.5rem;
}
.hero__meta-item {
  display: grid;
  gap: 0.3rem;
}
.hero__meta-item dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.hero__meta-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   9. Sponsor marquee
   -------------------------------------------------------------------------- */
.marquee-band {
  position: relative;
  background: var(--ink-2);
  color: var(--on-dark);
  padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  border-block: 1px solid var(--line-dark);
  overflow: hidden;
}
.marquee-band__label {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.marquee-band__label .eyebrow { color: var(--on-dark-mute); }

.marquee {
  position: relative;
  overflow: hidden;
}
/* Edge fades are painted as overlays rather than a mask: iOS Safari can
   freeze a transform animation running inside a masked container. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 8%;
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
/* Pause only for real pointers: on touch, :hover is sticky after a tap and
   would freeze the marquee until the next tap elsewhere. */
@media (hover: hover) {
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translate3d(-25%, 0, 0); } }

/* Logos keep their real brand colours; each sits on an ivory chip so the
   assorted baked-in backgrounds read as one deliberate row. */
.marquee__item {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(160px, 17vw, 210px);
  height: 82px;
  padding: 0.75rem 1.15rem;
  margin-inline: clamp(0.6rem, 1.4vw, 1.25rem);
  background: var(--bone);
  border: 1px solid rgba(251, 248, 243, 0.08);
  border-radius: var(--r-sm);
  opacity: 0.94;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.marquee__item:hover { opacity: 1; transform: translateY(-2px); }
.marquee__item img { max-height: 52px; max-width: 100%; width: auto; object-fit: contain; }
.marquee__fallback {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

/* Pillar / feature — an open ledger, not boxes: hairline rows, a gold glyph in
   the margin, display-serif entries with their descriptions set in a second
   column. */
.pillar-grid {
  display: grid;
  border-top: 1px solid var(--line);
}
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  align-items: start;
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-base) var(--ease-out);
}
.pillar::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.pillar:hover { background: rgba(201, 164, 92, 0.05); }
.pillar:hover::after { transform: scaleX(1); }
.pillar__icon {
  grid-row: 1 / span 2;
  width: 26px; height: 26px;
  margin-top: 0.4rem;
  color: var(--gold-link);
}
.pillar__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.pillar h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pillar p {
  color: var(--text-soft);
  font-size: 0.9375rem;
  max-width: 36rem;
}
@media (min-width: 768px) {
  .pillar {
    grid-template-columns: 2.25rem minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  }
  .pillar__icon { grid-row: 1; }
  .pillar h3, .pillar p { grid-row: 1; }
}

/* Editorial split (image + copy) */
.split {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse .split__media { order: 2; }
  .split--wide-copy { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.split__copy { display: grid; gap: var(--space-3); align-content: start; }
.split__copy h2 { max-width: 18ch; }

/* Stacked, offset media pair — the PRASA-style asymmetry */
.media-stack { position: relative; display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .media-stack { grid-template-columns: repeat(12, 1fr); }
  .media-stack__primary { grid-column: 1 / span 9; }
  .media-stack__secondary {
    grid-column: 6 / span 7;
    margin-top: -18%;
    z-index: 2;
    box-shadow: var(--shadow-lg);
  }
}
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bone-3);
}
.media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.media-frame--tall  { aspect-ratio: 4 / 5; }
.media-frame--wide  { aspect-ratio: 16 / 10; }
.media-frame--square{ aspect-ratio: 1 / 1; }
.media-frame:hover img { transform: scale(1.04); }
.media-frame__caption {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(8, 4, 7, 0.85), rgba(8, 4, 7, 0));
  color: var(--on-dark);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Fact list — label/value spec rows */
.fact-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .fact { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.fact dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.fact dd { margin: 0; color: var(--text-soft); }
.fact dd a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--gold-link);
  text-underline-offset: 3px;
}
.fact dd a:hover { color: var(--text); }
.section--dark .fact-list { border-color: var(--line-dark); }
.section--dark .fact { border-color: var(--line-dark); }
.section--dark .fact dt { color: var(--on-dark-mute); }
.section--dark .fact dd { color: var(--on-dark-soft); }

/* Nav card grid — "Explore" */
.explore-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.explore-card {
  position: relative;
  background: var(--bone);
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  text-decoration: none;
  min-height: 13rem;
  overflow: hidden;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.section--soft .explore-card { background: var(--bone-2); }
.explore-card__num {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-link);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-base) var(--ease-out);
}
.explore-card h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  transition: color var(--t-base) var(--ease-out);
}
.explore-card p {
  color: var(--text-soft);
  font-size: 0.9375rem;
  max-width: 30ch;
  padding-right: 3.25rem;
  transition: color var(--t-base) var(--ease-out);
}
.explore-card__arrow {
  margin-top: auto;
  align-self: start;
  justify-self: end;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-mute);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  position: absolute;
  right: 1.5rem; bottom: 1.5rem;
}
.explore-card:hover { background: var(--ink); }
.explore-card:hover h3 { color: var(--on-dark); }
.explore-card:hover p { color: var(--on-dark-soft); }
.explore-card:hover .explore-card__num { color: var(--gold); }
.explore-card:hover .explore-card__arrow {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translate(3px, -3px);
}

/* Event cards */
.event-grid {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.event-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.event-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone-3); }
.event-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.event-card:hover .event-card__media img { transform: scale(1.05); }
.event-card__date {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.85rem;
  background: rgba(12, 5, 9, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.event-card__body {
  padding: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.event-card__body h3 { font-size: var(--fs-h3); }
.event-card__body p { color: var(--text-soft); font-size: 0.9375rem; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bone-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  line-height: 1.5;
}
.tag svg { width: 12px; height: 12px; flex: none; opacity: 0.7; }

/* Member / committee cards */
.member-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.member-card { display: grid; gap: 1rem; }
.member-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
}
.member-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(0.2) contrast(1.02);
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}
.member-card:hover .member-card__media img { transform: scale(1.04); filter: grayscale(0); }
.member-card__body { display: grid; gap: 0.2rem; }
.member-card__name { font-size: var(--fs-h4); font-weight: 500; }
.member-card__role {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-link);
}

/* Benefit cards */
.benefit-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.benefit {
  background: var(--bone);
  padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  transition: background var(--t-base) var(--ease-out);
}
.section--soft .benefit { background: var(--bone-2); }
.benefit:hover { background: var(--card); }
.section--soft .benefit:hover { background: var(--bone); }
.benefit__icon { width: 28px; height: 28px; color: var(--gold-link); }
.benefit__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.benefit h3 { font-size: var(--fs-h4); font-weight: 600; }
.benefit p { color: var(--text-soft); font-size: 0.9375rem; }

/* Sponsor cards */
.sponsor-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}
.sponsor-card {
  display: grid;
  gap: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.sponsor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sponsor-card__logo {
  display: grid;
  place-items: center;
  height: 84px;
  padding: 0.6rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.sponsor-card__logo img { max-height: 62px; max-width: 100%; width: auto; object-fit: contain; }
.sponsor-card__body { display: grid; gap: 0.6rem; align-content: start; }
.sponsor-card__body h3 { font-size: var(--fs-h4); font-weight: 600; }
.sponsor-card__body p { color: var(--text-soft); font-size: 0.9375rem; }
.sponsor-fallback {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.sponsor-fallback--name {
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

.contact-list { display: grid; gap: 0.4rem; margin-top: 0.35rem; }
.contact-list a, .contact-list span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-soft);
  text-decoration: none;
  min-height: 32px;
  transition: color var(--t-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--gold-link); }
.contact-list a:hover span,
.contact-list a:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-list svg { width: 15px; height: 15px; flex: none; color: var(--text-mute); }

/* Info / quote panels */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.panel h2 { font-size: var(--fs-h3); }
.panel p { color: var(--text-soft); }
.panel--gold { border-color: rgba(201, 164, 92, 0.4); background: var(--gold-wash); }

.pull-quote {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: clamp(2rem, 1.5rem + 2.4vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 24ch;
}
.pull-quote cite {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.pull-quote .mark { width: 20px; height: 20px; color: var(--gold); opacity: 1; }

/* Timeline */
.timeline { display: grid; gap: 0; border-top: 1px solid var(--line); }
.timeline__item {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--t-base) var(--ease-out);
}
@media (min-width: 720px) {
  .timeline__item { grid-template-columns: 4.5rem minmax(0, 0.8fr) minmax(0, 1.5fr); }
}
.timeline__year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-link);
  font-variant-numeric: tabular-nums;
}
.timeline__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; }
.timeline__text { color: var(--text-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   11. FAQ / accordion
   -------------------------------------------------------------------------- */
.faq-list { display: grid; border-top: 1px solid var(--line); max-width: 58rem; }
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  transition: color var(--t-fast) var(--ease-out);
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-link); }
.faq__icon {
  flex: none;
  position: relative;
  width: 22px; height: 22px;
  margin-top: 0.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.faq__icon::before { width: 9px; height: 1px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1px; height: 9px; transform: translate(-50%, -50%); }
.faq[open] .faq__icon { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: rotate(90deg); }
.faq[open] .faq__icon::after { opacity: 0; }
.faq__answer { padding-bottom: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem); }
.faq__answer p { color: var(--text-soft); max-width: 68ch; }
.faq[open] .faq__answer { animation: faq-in var(--t-base) var(--ease-out); }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 120% at 12% 100%, rgba(201, 164, 92, 0.22), rgba(201, 164, 92, 0) 62%),
    radial-gradient(60% 100% at 90% 0%, rgba(58, 15, 30, 0.75), rgba(58, 15, 30, 0) 65%);
}
.cta-band__inner {
  display: grid;
  gap: var(--space-4);
  padding-block: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); }
  .cta-band__actions { justify-self: end; }
}
.cta-band h2 { color: var(--on-dark); max-width: 18ch; margin-top: var(--space-2); }
.cta-band p { color: var(--on-dark-soft); max-width: 50ch; margin-top: var(--space-2); }
.cta-band__actions { display: grid; gap: 0.75rem; }
@media (min-width: 480px) { .cta-band__actions { grid-auto-flow: column; justify-content: start; } }
@media (min-width: 900px) { .cta-band__actions { grid-auto-flow: row; justify-items: stretch; min-width: 15rem; } }

/* --------------------------------------------------------------------------
   13. Directory
   -------------------------------------------------------------------------- */
.directory-layout {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .directory-layout { grid-template-columns: 17rem minmax(0, 1fr); }
}

.directory-sidebar { position: static; }
@media (min-width: 1000px) {
  .directory-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100svh - var(--header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.5rem;
  }
}
.directory-sidebar__head { display: none; }
.directory-sidebar__head h2 { font-size: var(--fs-h4); font-weight: 600; }

.filter-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.filter-tree .filter-tree { margin-top: 0.15rem; padding-left: 0.85rem; border-left: 1px solid var(--line); }
.filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.filter-btn:hover { background: var(--bone-2); color: var(--text); }
.filter-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
  font-weight: 600;
}
.filter-btn__count {
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  opacity: 0.85;
}
.filter-btn[aria-pressed="true"] .filter-btn__count { color: var(--gold); }

.directory-toolbar {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

/* The specialty list is a disclosure on small screens so search stays first,
   and an always-open column from the sidebar breakpoint up. */
.filter-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.filter-disclosure > summary::-webkit-details-marker { display: none; }
.filter-disclosure > summary:hover { background: var(--bone-2); border-color: var(--text-mute); }
.filter-disclosure__label { display: inline-flex; align-items: center; gap: 0.65em; }
.filter-disclosure__label .mark { color: var(--gold-link); }
.filter-disclosure__chevron svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.filter-disclosure[open] > summary { margin-bottom: 1.25rem; }
.filter-disclosure[open] .filter-disclosure__chevron svg { transform: rotate(180deg); }

/* From the sidebar breakpoint up the list is simply always shown. */
@media (min-width: 1000px) {
  .filter-disclosure > summary { display: none; }
  .filter-disclosure[open] > summary { margin-bottom: 0; }
  .directory-sidebar__head { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
}

.search-field { position: relative; display: block; }
.search-field svg {
  position: absolute;
  left: 1.15rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-mute);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  min-height: 56px;
  padding: 0.9rem 3.25rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.search-field input::placeholder { color: var(--text-mute); }
.search-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, 0.18);
}
.search-field input:focus-visible { outline: none; }
.search-clear {
  position: absolute;
  right: 0.6rem; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  place-items: center;
  border: none;
  background: var(--bone-2);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.search-clear svg { position: static; transform: none; width: 15px; height: 15px; color: inherit; }
.search-field.has-value .search-clear { display: grid; }
.search-clear:hover { background: var(--ink); color: var(--on-dark); }

.alpha-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1.5rem, 1fr));
  gap: 0.1rem;
  padding-block: 0.25rem;
}
.alpha-rail a, .alpha-rail span {
  display: grid;
  place-items: center;
  min-width: 30px; min-height: 30px;
  padding: 0 0.15rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-soft);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.alpha-rail a:hover, .alpha-rail a:focus-visible { background: var(--gold); color: var(--ink); }
.alpha-rail span { color: var(--text-mute); opacity: 0.35; }

.directory-summary {
  font-size: var(--fs-small);
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.directory-summary strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.active-filter button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 243, 0.14);
  color: inherit;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.active-filter button:hover { background: var(--gold); color: var(--ink); }
.active-filter svg { width: 12px; height: 12px; }

.directory-letter { scroll-margin-top: calc(var(--header-h) + 2rem); }
.directory-letter + .directory-letter { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.directory-letter__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0.5rem;
}
.directory-letter__head h3 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 400;
  color: var(--gold-link);
  line-height: 1;
}
.directory-letter__head p {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.directory-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-base) var(--ease-out);
}
@media (min-width: 720px) {
  .directory-item { grid-template-columns: 84px minmax(0, 1fr); gap: 1.75rem; }
}
.directory-item:hover { background: var(--bone-2); }
.directory-item__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 0.4rem;
}
.directory-item__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.directory-initials {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.is-hidden { display: none !important; }

.directory-item__body { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.directory-item__body h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.005em; }
.directory-item__desc { color: var(--text-soft); font-size: 0.9375rem; max-width: 66ch; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bone-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  line-height: 1.6;
}
.directory-item:hover .chip { background: var(--card); }

.empty-state {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
  padding: clamp(3rem, 2.4rem + 2.4vw, 5rem) 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
}
.empty-state svg { width: 34px; height: 34px; color: var(--text-mute); margin-bottom: 0.35rem; }
.empty-state h3 { font-size: var(--fs-h3); }
.empty-state p { color: var(--text-soft); max-width: 40ch; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-top: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 760px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer-brand { display: grid; gap: 1.25rem; align-content: start; }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { color: var(--on-dark-soft); font-size: 0.9375rem; max-width: 34ch; }

.footer-col h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.footer-col a, .footer-col p {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 34px;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
.footer-col address { font-style: normal; color: var(--on-dark-soft); font-size: 0.9375rem; line-height: 1.7; }
.footer-col a:hover { color: var(--gold); }
.footer-col svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }

.social-row { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.social-row a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-pill);
  color: var(--on-dark-soft);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.social-row a svg { width: 18px; height: 18px; opacity: 1; }
.social-row a:hover {
  background: var(--gold); color: var(--ink);
  border-color: var(--gold); transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
}
.footer-bottom p, .footer-bottom a {
  font-size: var(--fs-small);
  color: var(--on-dark-mute);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--gold); }
.footer-mark { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-mark .mark { color: var(--gold); width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   14b. Icon sizing + small structural fixes
   -------------------------------------------------------------------------- */
.btn svg  { width: 16px; height: 16px; flex: none; }
.link svg { width: 15px; height: 15px; flex: none; }
.explore-card__arrow svg { width: 16px; height: 16px; }
.event-card__date svg { width: 13px; height: 13px; flex: none; }
.hero__breadcrumb svg { width: 13px; height: 13px; }

.faq summary > span:first-child { flex: 1 1 auto; min-width: 0; }

.directory-main { min-width: 0; }
.directory-toolbar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.split__media > .panel { height: 100%; }
.panel .fact-list { margin-top: 0.35rem; }
.panel .fact:last-child { border-bottom: none; padding-bottom: 0; }
.panel .btn-row { margin-top: 0.35rem; }
.panel--gold .fact dt { color: var(--gold-link); }

.section--dark .media-frame { border: 1px solid var(--line-dark); }
.section--dark .link:hover { color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   15. Reveal motion
   -------------------------------------------------------------------------- */
/* Gated on .js so content stays visible when scripting is unavailable. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="right"] { transform: translate3d(-24px, 0, 0); }
.js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* --------------------------------------------------------------------------
   16. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { animation: none; transform: scale(1.02); }
  /* The band exists only to scroll; under reduced motion it pans far slower
     instead of freezing (a stopped marquee just clips the sponsor list). */
  .marquee__track {
    animation-duration: 150s !important;
    animation-iteration-count: infinite !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .marquee-band, .scroll-cue, .nav-scrim, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; padding: 2rem 0; background: #fff; color: #000; }
  .hero__media, .hero__scrim, .hero__glow { display: none; }
  .hero h1, .hero .lead, .hero__title { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}