/* ==========================================================================
   Kolenko & Associates — Design System
   Editing notes for Nicole:
   - All colours, fonts and spacing live in :root below. Change a value there
     and it updates everywhere on the site.
   - You should rarely need to edit anything past the "COMPONENTS" heading.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — the brand's colours, type and spacing
   -------------------------------------------------------------------------- */
:root {
  /* Colour ---------------------------------------------------------------- */
  --ink:          #0B0B0D;   /* near-black, main dark background            */
  --ink-raised:   #131317;   /* slightly lifted dark, for cards             */
  --ink-line:     #26262C;   /* hairline borders on dark                    */

  --bone:         #F7F4EE;   /* warm off-white, main light background       */
  --bone-raised:  #FFFFFF;   /* cards on light                              */
  --bone-line:    #E2DCD1;   /* hairline borders on light                   */

  /* Brand colours ---------------------------------------------------------
     Each has a version for dark backgrounds and a deeper one for light
     backgrounds, so text stays legible either way. Contrast checked:
       tiffany  on black 8.2:1   tiffany-deep on bone 5.2:1
       gold     on black 8.7:1   gold-deep    on bone 4.6:1
     (AA needs 4.5:1 for body text.)                                        */
  --tiffany:      #0ABAB5;   /* Tiffany blue, on dark backgrounds           */
  --tiffany-deep: #067370;   /* Tiffany blue, on light backgrounds          */
  --tiffany-soft: #81D8D0;   /* pale Tiffany, for large display text        */

  --gold:         #C9A961;   /* metallic gold, on dark backgrounds          */
  --gold-deep:    #8A6B22;   /* metallic gold, on light backgrounds         */

  --silver:       #B9BDC5;   /* secondary metallic, from the logo           */

  /* ROLES — this is where the two colours are given their jobs.
     ACCENT is the interactive colour: buttons, links, focus, hover.
     DETAIL is the decorative colour: hairlines, small-caps labels, numbers.
     Keeping them separate is what stops teal and gold competing.
     To flip the emphasis, swap tiffany <-> gold in these four lines only. */
  --accent:       var(--tiffany);
  --accent-deep:  var(--tiffany-deep);
  --detail:       var(--gold);
  --detail-deep:  var(--gold-deep);

  --text-on-dark:      #F7F4EE;
  --text-on-dark-mute: rgba(247, 244, 238, 0.66);
  --text-on-light:      #1A1A1E;
  --text-on-light-mute: #5B5B63;

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

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.75vw, 4.2rem);
  --step-5:  clamp(3rem, 2rem + 5vw, 6rem);

  /* Space ----------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --measure: 62ch;
  --container: 1240px;
  --container-narrow: 860px;

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 2px;   /* the brand is sharp and editorial, not rounded */
  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--text-on-light);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

/* Skip link ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--bone);
  font-size: var(--step--1);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark);
  position: relative;
}
.section--light { background: var(--bone); color: var(--text-on-light); }
.section--raised { background: var(--bone-raised); }

/* Fine grain over dark panels — keeps large black areas from looking flat */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.section--dark > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIC COMPONENTS
   -------------------------------------------------------------------------- */

/* Small letterspaced label above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--detail-deep);
  margin: 0 0 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.section--dark .eyebrow { color: var(--detail); }

/* the short rule that precedes an eyebrow */
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.display-1 { font-size: var(--step-4); }
.display-2 { font-size: var(--step-3); }
.display-3 { font-size: var(--step-2); }

/* italic accent word inside a display heading */
.accent {
  font-style: italic;
  color: var(--tiffany-soft);
}
.section--light .accent { color: var(--accent-deep); }
/* over photography the pale tint reads best; on flat black, full Tiffany */
.section--dark .accent { color: var(--accent); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-on-light-mute);
  max-width: var(--measure);
  font-weight: 300;
}
.section--dark .lede { color: var(--text-on-dark-mute); }

.body-text { max-width: var(--measure); color: var(--text-on-light-mute); }
.section--dark .body-text { color: var(--text-on-dark-mute); }
.body-text + .body-text { margin-top: 1.15rem; }

.text-center { text-align: center; }
.text-center .lede,
.text-center .body-text { margin-inline: auto; }

.section-head { margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.section-head .lede { margin-top: 1.35rem; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.45s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn--primary:hover { background: #12D4CE; border-color: #12D4CE; }

/* Secondary emphasis: gold fill, for pairing beside a Tiffany button */
.btn--gold {
  background: var(--detail);
  color: var(--ink);
  border-color: var(--detail);
}
.btn--gold:hover { background: #D8BB7A; border-color: #D8BB7A; }

.btn--ghost {
  border-color: currentColor;
  color: inherit;
  opacity: 0.9;
}
/* The fill used to be `currentColor`, which meant the label ended up exactly
   the same colour as the panel behind it and read as a blank button - and on a
   phone that state sticks after a tap. Name both colours instead: bone panel
   with ink lettering on the dark banners and bands, inverted on light sections. */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
  opacity: 1;
}
.section--light .btn--ghost:hover,
.section--light .btn--ghost:focus-visible {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}
.text-center .btn-row { justify-content: center; }

/* Understated text link with an animated rule */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: gap 0.4s var(--ease), color 0.4s var(--ease);
}
.section--dark .link-quiet { color: var(--accent); }
.link-quiet:hover { gap: 0.9rem; }
.link-quiet .arw { transition: transform 0.4s var(--ease); }
.link-quiet:hover .arw { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
              height 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over a dark hero the header is transparent; once scrolled it solidifies. */
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(11, 11, 13, 0.9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ink-line);
  height: 70px;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}
.brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  /* The mark is a silver gradient, whose darker strokes vanish on near-black.
     Flatten to a solid silhouette, then invert to white and soften to silver. */
  filter: brightness(0) invert(1) opacity(0.9);
  transition: width 0.5s var(--ease), height 0.5s var(--ease);
}
.is-scrolled .brand img { width: 38px; height: 38px; }

.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: 0.055em;
  color: var(--bone);
  line-height: 1.1;
}
.brand-name small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--detail);
  margin-top: 0.22rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 0.6rem + 1.9vw, 2.6rem);
}
.nav a {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}

/* The nav carries its own CTA for the mobile menu; on desktop the button in
   .header-cta is the one shown, so hide the duplicate. */
@media (min-width: 1001px) {
  .nav > .btn { display: none; }
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--bone); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { flex: none; }
.header-cta .btn { padding: 0.72rem 1.5rem; }

/* Mobile menu button ----------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--bone);
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: background-color 0.3s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

[aria-expanded="true"].nav-toggle span { background: transparent; }
[aria-expanded="true"].nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"].nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  /* The scrolled header carries a backdrop-filter, which makes it the
     containing block for its fixed children — `inset: 0` then sized this panel
     to the 70px header and clipped the menu. Explicit viewport units keep the
     sheet full-screen whether or not the header has solidified. */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    /* start below the header rather than centring: centred flex content that
       overgrows its box loses the top items to the scroll clip */
    justify-content: flex-start;
    gap: 0;
    background: var(--ink);
    padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.3rem + 3vw, 2.8rem);
    text-transform: none;
    letter-spacing: 0;
    color: var(--bone);
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--ink-line);
    width: 100%;
    text-align: center;
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--detail); }
  .nav .btn {
    margin-top: 2rem;
    border-bottom: 0;
    font-family: var(--font-sans);
    font-size: var(--step--1);
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-block: calc(var(--header-h) + 3rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* <picture> is inline by default, which would collapse the height the image
   is sizing against. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a wide group shot: keep it centred so the ends of the row survive the crop */
  object-position: center center;
  /* No dimming: the faces are the subject, and Kathy stands fourth from the
     left, right behind the headline. Legibility comes from the scrim and the
     headline's shadow instead. */
  /* Lifted above 1 so the room reads bright rather than murky. */
  filter: saturate(1) contrast(1.06) brightness(1.14);
  transform: scale(1.04);
}
/* Desktop only: a soft pool of light on Kathy (fourth from the left, the
   blonde in the white coat) so she reads as the focus of the group. On a
   phone ::before is the blurred backdrop instead, so this is scoped out. */
@media (min-width: 701px) {
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(16% 30% at 42% 44%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
    mix-blend-mode: soft-light;
  }
}
/* layered scrims: vertical for text legibility, radial for vignette */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Heaviest in the lower left, under the paragraph and buttons. A full-height
       band down the left used to sit across the faces of the four guests on
       that side - Kathy among them - and all but painted them out. */
    radial-gradient(70% 60% at 0% 100%, rgba(11,11,13,0.72) 0%, rgba(11,11,13,0.34) 55%, transparent 100%),
    linear-gradient(to right, rgba(11,11,13,0.20) 0%, rgba(11,11,13,0.04) 34%, transparent 50%),
    linear-gradient(to top, var(--ink) 3%, rgba(11,11,13,0.48) 24%, transparent 56%, rgba(11,11,13,0.18) 100%),
    /* vignette centred on Kathy, so the edges of the room recede and she doesn't */
    radial-gradient(120% 90% at 42% 44%, transparent 42%, rgba(11,11,13,0.28) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero__inner { max-width: 46rem; }
.hero h1 {
  font-size: var(--step-5);
  line-height: 0.98;
  margin-bottom: 1.75rem;
  /* the headline crosses the guests' faces, which are no longer darkened, so
     the type carries its own soft shadow to hold against them */
  text-shadow: 0 2px 18px rgba(11,11,13,0.55), 0 1px 3px rgba(11,11,13,0.45);
}
.hero .lede { font-size: var(--step-1); color: var(--text-on-dark-mute); }
/* the eyebrow sits over the bright ice wall now that the photo is undimmed */
.hero .eyebrow { color: var(--detail); text-shadow: 0 0 14px rgba(11,11,13,0.95), 0 0 6px rgba(11,11,13,0.9), 0 1px 2px rgba(11,11,13,0.9); }
/* Wide screens: lay the copy out as a short, wide band along the foot of the
   hero - headline on the left, paragraph and buttons on the right - so it sits
   over the dark coats, below the row of faces, instead of across them. Kathy
   (fourth from the left) was behind the headline in the tall left-hand stack. */
@media (min-width: 1000px) {
  .hero__inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "title   copy"
      "title   actions";
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    align-items: end;
  }
  /* The eyebrow is lifted out of the band and set on the ice wall above the
     guests' heads, as on a phone. The container is stretched to the hero's
     full height so the eyebrow can be placed from the top, where it sits just
     under the header (the container starts 3rem below it). */
  .hero .container { align-self: stretch; display: flex; align-items: flex-end; }
  .hero__inner { width: 100%; }
  .hero__inner > .eyebrow {
    position: absolute;
    left: 0;
    top: -2.4rem;
    margin: 0;
    white-space: nowrap;
  }
  .hero__inner > h1 { grid-area: title; font-size: var(--step-4); margin-bottom: 0; }
  .hero__inner > .lede { grid-area: copy; margin: 0; font-size: var(--step-0, 1.05rem); max-width: none;
    text-shadow: 0 1px 12px rgba(11,11,13,0.85), 0 0 2px rgba(11,11,13,0.6); }
  .hero__inner > .btn-row { grid-area: actions; margin-top: 1.5rem; }
}
/* Small laptops: give the paragraph more width so it runs to fewer lines and
   the band stays low, under the faces. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .hero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .hero__inner > h1 { font-size: var(--step-3); }
  .hero__inner > .lede { font-size: 0.98rem; line-height: 1.5; }
  .hero__inner > .btn-row { margin-top: 1.1rem; }
}

/* small scroll hint at the foot of the hero */
/* Sits at the right edge rather than centred, so it never crowds the
   left-aligned hero buttons at any viewport height. */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--detail), transparent);
  animation: scrollHint 2.6s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}
/* On narrow or short screens the hero buttons reach the foot of the section,
   where the hint would sit on top of them. */
@media (max-width: 900px), (max-height: 780px) {
  .hero__scroll { display: none; }
}
/* A phone screen is tall and the hero photograph is nearly panoramic, so
   filling the frame would crop away eight of the ten guests. Show the whole
   photograph across the width instead and let it sit in the dark, high enough
   that the headline below it stays clear. The scrims already fade the hero to
   near-black top and bottom, so the picture reads as part of the design rather
   than as a letterboxed image. */
@media (max-width: 700px) {
  /* Full height, type over the top, and the whole row of guests present.
     Cropping to fill a phone keeps two of the ten, so the photograph sits at
     its own proportions instead. The space around it is filled with a heavily
     blurred, darkened enlargement of the same picture, so the hero still
     reads as one full-bleed image rather than a letterboxed one. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/events/2026-vegas-blackhat-hero-icebar-room.jpg") center center / cover no-repeat;
    /* Kept close in brightness to the photograph itself. A large gap between
       the two is what made the picture sit on the background as an obvious
       bright rectangle rather than blending into it. */
    filter: blur(44px) saturate(0.6) brightness(0.5);
    transform: scale(1.3);
  }
  /* Size the box to the photograph rather than to the hero. With object-fit
     the element still filled the whole header and the picture floated
     somewhere inside it, so there was nothing for a fade to line up against.
     At width 100% and height auto the box IS the picture, which lets the top
     and bottom edges be feathered into the blurred surround instead of
     meeting it as a hard rectangle. */
  .hero__media img {
    position: absolute;
    /* Wider than the phone so the band is taller and sits less like a strip
       laid across the middle. The row of guests runs almost edge to edge, so
       the overhang is kept to 6% a side - enough to gain height, not enough to
       take a face off either end. max-width has to be released or the sitewide
       img cap holds the picture at 100% and the width has no effect. */
    left: -6%;
    /* pinned directly under the header; the copy starts below it (see .hero) */
    top: var(--header-h);
    width: 112%;
    max-width: none;
    height: auto;
    z-index: 1;
    transform: none;
    /* No type sits on the photograph on a phone any more, so it can be shown
       bright: the faces - Kathy's above all - are the point of it. */
    filter: saturate(1.05) contrast(1.06) brightness(1.24);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%);
  }
  /* Must clear the image, which is now on its own stacking level. The scrim
     matches the interior banners: heavier down the left where the heading and
     paragraph sit, and fading up from solid at the foot. */
  .hero__media::after {
    z-index: 2;
    /* Eased off the left third: at the old weight the four guests on that side
       were all but painted out, and they are the reason the picture is here.
       The headline still holds - it sits over dark fur either way. */
    /* Only a fade at the very top (under the header) and from just below the
       photograph down, where the copy sits. The photograph itself is left
       clear so the faces are not dimmed. */
    background:
      linear-gradient(to bottom,
        rgba(11,11,13,0.35) 0,
        transparent calc(var(--header-h) + 3rem),
        transparent calc(var(--header-h) + var(--hero-photo-h) * 0.5),
        rgba(11,11,13,0.45) calc(var(--header-h) + var(--hero-photo-h) * 0.85),
        var(--ink) calc(var(--header-h) + var(--hero-photo-h) + 7rem));
  }
  /* The headline starts part-way down the photograph, over the dark coats
     and below the row of faces, so the type still sits on the picture without
     covering anyone - Kathy included. (Photo height = 112vw at 3:2; the faces
     end at roughly 45% of it.) */
  .hero {
    --hero-photo-h: 74.67vw;
    --hero-copy-start: 0.6;
    align-items: flex-start;
    padding-top: calc(var(--header-h) + var(--hero-photo-h) * var(--hero-copy-start));
  }
  .hero__inner { position: relative; }
  /* Eyebrow: kept up on the ice wall above the guests' heads, starting a touch
     left of the headline, on one line with no leading rule. It is lifted out of
     the flow and placed relative to the photograph. */
  .hero .eyebrow {
    position: absolute;
    top: calc(-1 * var(--hero-photo-h) * var(--hero-copy-start) + 5vw);
    left: -0.4rem;
    margin: 0;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .hero .eyebrow::before { display: none; }
}
/* narrow phones: shrink the tracking a little more so it still fits one line */
@media (max-width: 380px) {
  .hero .eyebrow { letter-spacing: 0.08em; font-size: 0.7rem; }
}

/* Compact hero used on interior pages ------------------------------------ */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: calc(var(--header-h) + clamp(4rem, 2.5rem + 6vw, 7.5rem)) clamp(3.5rem, 2.5rem + 4vw, 6rem);
  overflow: hidden;
  /* Without a floor the banner is only as tall as whatever text the page
     happens to carry, so Soirée and Past Soirées - which each add a row of
     two buttons - stood taller than About and Contact. The floor has to clear
     the tallest of the four or they still differ; on a phone the button rows
     wrap and that page runs to around 560px, so 620 covers every one of them
     and all four settle at exactly the same height. A viewport-relative value
     was tried first and was too short on a phone to do the job. */
  min-height: 620px;
  display: flex;
  /* Top-aligned, not bottom: with the 620px floor in place, bottom alignment
     pushed the shorter pages' wording down the banner, so About and Contact
     started far lower than Soiree. Anchoring to the top starts the eyebrow at
     the same height on all four. */
  align-items: flex-start;
}
.page-hero .container { width: 100%; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Barely graded: the guests in these photographs should be recognisable.
     Legibility comes from the scrim and the text shadows below. */
  filter: saturate(0.9) contrast(1.04) brightness(0.95);
}
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* heavier on the left, where the heading and paragraph sit, and clear on
     the right so the photograph shows through */
  background:
    linear-gradient(to right, rgba(11,11,13,0.58) 0%, rgba(11,11,13,0.30) 40%, rgba(11,11,13,0.06) 68%, transparent 85%),
    linear-gradient(to top, var(--ink) 3%, rgba(11,11,13,0.32) 30%, rgba(11,11,13,0.08) 65%, rgba(11,11,13,0.28) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: var(--step-4);
  margin-bottom: 1.35rem;
  text-shadow: 0 2px 18px rgba(11,11,13,0.6), 0 1px 3px rgba(11,11,13,0.5);
}
.page-hero .lede {
  color: var(--text-on-dark-mute);
  text-shadow: 0 1px 12px rgba(11,11,13,0.85), 0 0 2px rgba(11,11,13,0.6);
}
.page-hero .eyebrow {
  color: var(--detail);
  text-shadow: 0 1px 10px rgba(11,11,13,0.9), 0 0 2px rgba(11,11,13,0.8);
}
@media (max-width: 700px) {
  /* Soiree's pair is wide enough to wrap onto two rows by itself; the shorter
     pairs on About, Contact and Past Soirees fitted side by side and read as a
     different banner. Stack every hero pair on a phone so all four match. */
  .page-hero .btn-row { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   8. STAT BAND
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.stat {
  padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem) 1.5rem;
  text-align: center;
  border-right: 1px solid var(--ink-line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
  line-height: 1;
  color: var(--detail);
  display: block;
  margin-bottom: 0.6rem;
}
.stat__label {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}
@media (max-width: 640px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .stat:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9. SPLIT — text beside an image
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 800px) {
  .split--reverse > *:first-child { order: 0; }
}

.figure {
  position: relative;
  /* establishes a stacking context so the offset frame below sits behind the
     image but still in front of the section background */
  z-index: 0;
}
.figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.03);
}
.figure--wide img { aspect-ratio: 3 / 2; }
/* thin champagne frame offset behind the image */
.figure::after {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--detail);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.figure__caption {
  margin-top: 1rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
}
.section--dark .figure__caption { color: var(--text-on-dark-mute); }

/* --------------------------------------------------------------------------
   10. EVENT CARDS
   -------------------------------------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.section--light .event-card {
  background: var(--bone-raised);
  border-color: var(--bone-line);
}
.event-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.event-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.62);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.event-card:hover .event-card__media img {
  transform: scale(1.06);
  filter: saturate(0.85) brightness(0.75);
}
.event-card__city {
  position: absolute;
  left: 1.5rem;
  bottom: 1.15rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--bone);
  letter-spacing: 0.02em;
  z-index: 1;
}
.event-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,0.85), transparent 62%);
}

.event-card__body {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.event-card__date {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--detail);
}
.section--light .event-card__date { color: var(--detail-deep); }
.event-card__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}
.event-card__note {
  font-size: var(--step--1);
  color: var(--text-on-dark-mute);
  margin-top: -0.2rem;
}
.section--light .event-card__note { color: var(--text-on-light-mute); }
.event-card .link-quiet { margin-top: auto; align-self: flex-start; }
/* a short gold line under the note, e.g. "Sponsorship opportunities now open" */
.event-card__flag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--detail);
  margin: 0.15rem 0 0.4rem;
}
.section--light .event-card__flag { color: var(--detail-deep); }
/* a sub-heading that splits the calendar by year */
.event-year {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bone-line);
}
/* a card with more than one link: the group sits at the foot instead */
.event-card__links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.event-card__links .link-quiet { margin-top: 0; }

/* status pill, e.g. "By invitation" / "Past" */
.pill {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 1;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(247,244,238,0.5);
  color: var(--bone);
  background: rgba(11,11,13,0.55);
  backdrop-filter: blur(6px);
}
.pill--gold { border-color: var(--detail); color: var(--detail); }

/* --------------------------------------------------------------------------
   11. FEATURE LIST — "what to expect"
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.section--light .feature-grid { background: var(--bone-line); border-color: var(--bone-line); }

.feature {
  background: var(--ink);
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.section--light .feature { background: var(--bone); }

.feature__num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--detail);
  line-height: 1;
}
.section--light .feature__num { color: var(--detail-deep); }
.feature__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}
.feature__text {
  font-size: var(--step--1);
  color: var(--text-on-dark-mute);
  line-height: 1.7;
}
.section--light .feature__text { color: var(--text-on-light-mute); }

/* --------------------------------------------------------------------------
   12. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
}
.section--light .quote { border-top-color: var(--bone-line); }
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.55rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--detail);
  opacity: 0.5;
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.42;
  font-style: italic;
  padding-top: 1.4rem;
}
.quote__by { margin-top: auto; }
.quote__name {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  display: block;
}
.quote__role {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}
.section--light .quote__role { color: var(--text-on-light-mute); }

/* --------------------------------------------------------------------------
   13. SPONSOR WALL
   -------------------------------------------------------------------------- */
/* Flex rather than grid so a short final row centres instead of leaving a
   ragged block of empty cells. */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-wall__item {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 210px;
  /* A fixed height, not aspect-ratio: the logos are wildly different shapes and
     carry no width/height attributes, so anything content-sized let a tall one
     stretch its tile and spill over the border. */
  height: clamp(96px, 24vw, 118px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.1rem 1.35rem;
  background: var(--bone-raised);
  border: 1px solid var(--bone-line);
  /* pull each tile onto its neighbour so shared borders read as one hairline */
  margin: -1px 0 0 -1px;
}
/* Every logo gets the identical box and is scaled to fit inside it, so no one
   sponsor reads larger than another because its file happens to be bigger. */
.logo-wall__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Logos arrive in many colours and several have baked-in white backgrounds.
     multiply drops any white to nothing against the white tile, so opaque
     JPEG logos sit as flush as transparent PNGs. Colour returns on hover. */
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease);
}
/* A few logos are wide, dense lock-ups that fill their box edge to edge and so
   read heavier than the rest of the wall. Scale those back optically. */
.logo-wall__item--dense img { transform: scale(0.78); }
.logo-wall__item:hover img,
.logo-wall__item:focus-visible img { filter: none; opacity: 1; }
/* Each tile is a link to the sponsor, so keep the focus ring on the tile. */
a.logo-wall__item { text-decoration: none; }
a.logo-wall__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Two tiles per row on phones; trim the padding so the logo still gets room. */
@media (max-width: 480px) {
  .logo-wall__item { padding: 0.8rem 0.9rem; }
}

/* --------------------------------------------------------------------------
   14. GALLERY
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ink-raised);
  cursor: zoom-in;
}
.gallery__item--tall { aspect-ratio: 3 / 4; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.85);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(11,11,13,0.9), transparent);
  color: var(--bone);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap { opacity: 1; transform: translateY(0); }

/* Contact sheet — for an event with dozens of photographs. Small square tiles,
   and only the first screenful until the visitor asks for the rest. The
   collapsed class is added by main.js, so with no JS every photograph shows
   and no dead button appears. ------------------------------------------- */
.gallery--sheet {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.4rem;
}
.gallery--sheet .gallery__item { aspect-ratio: 1; }
.gallery--sheet .gallery__cap { padding: 2rem 0.7rem 0.7rem; letter-spacing: 0.07em; }
.gallery--sheet.is-collapsed .gallery__item:nth-child(n+9) { display: none; }
@media (min-width: 700px) {
  .gallery--sheet.is-collapsed .gallery__item:nth-child(n+9) { display: block; }
  .gallery--sheet.is-collapsed .gallery__item:nth-child(n+13) { display: none; }
}
.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Archive cards — one per past event, so each is clearly its own thing you
   can open, rather than an anonymous photo in a grid. ---------------------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}
.archive-card { display: flex; flex-direction: column; }

.archive-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-raised);
  cursor: zoom-in;
}
.archive-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.9);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.archive-card:hover .archive-card__media img,
.archive-card__media:focus-visible img { transform: scale(1.05); filter: saturate(1) brightness(1); }

/* explicit affordance — the old grid gave no hint the photos opened */
.archive-card__open {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(11, 11, 13, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(247, 244, 238, 0.32);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease),
              background-color 0.4s var(--ease);
}
.archive-card:hover .archive-card__open {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(11, 11, 13, 0.82);
}
.archive-card__open svg { width: 12px; height: 12px; fill: currentColor; }

.archive-card__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  margin-top: 1.1rem;
}
.archive-card__meta {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--detail-deep);
  margin-top: 0.4rem;
}
.section--dark .archive-card__meta { color: var(--detail); }

/* Past-event blocks ------------------------------------------------------ */
.past-event { border-top: 1px solid var(--ink-line); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section--light .past-event { border-top-color: var(--bone-line); }
.past-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 2rem;
}
.past-event__title { font-size: var(--step-2); }
.past-event__meta {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--detail-deep);
}
.section--dark .past-event__meta { color: var(--detail); }

/* Lightbox --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 8, 0.94);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.lightbox img {
  max-width: 100%;
  max-height: 80svh;
  width: auto;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 0.45s var(--ease-out);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__cap {
  margin-top: 1.15rem;
  text-align: center;
  color: var(--text-on-dark-mute);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightbox__count {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--detail);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
}

/* Previous / next — only shown when the run has more than one photograph */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: none;
  place-items: center;
  color: var(--bone);
  background: rgba(11, 11, 13, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 244, 238, 0.24);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease),
              background-color 0.35s var(--ease);
  z-index: 2;
}
.lightbox.has-nav .lightbox__nav { display: grid; }
.lightbox__nav:hover { border-color: var(--accent); color: var(--accent); background: rgba(11,11,13,0.8); }
.lightbox__nav svg { width: 18px; height: 18px; fill: currentColor; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }

@media (max-width: 620px) {
  .lightbox__nav { width: 44px; height: 44px; top: auto; bottom: 1rem; transform: none; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-line);
  color: var(--bone);
  font-size: 1.4rem;
  line-height: 1;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.lightbox__close:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   14b. FILM — the highlights video
   The clip is silent, so it loops quietly in the background like a moving
   photograph. It still gets a pause control (WCAG 2.2.2: anything that moves
   for more than five seconds must be stoppable).
   -------------------------------------------------------------------------- */
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  z-index: 0;
}
.film__frame video,
.film__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* poster covers the video until enough has buffered to play smoothly */
.film__poster {
  z-index: 1;
  transition: opacity 1s var(--ease);
}
.film.is-playing .film__poster { opacity: 0; }

/* thin gold frame offset behind the video, echoing .figure */
.film__frame::after {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--detail);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

.film__caption {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}
.film__caption b {
  font-weight: 500;
  color: var(--detail);
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   15. TEAM
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}
.person__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--ink-raised);
}
.person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.8) contrast(1.02);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.person:hover .person__media img { transform: scale(1.04); filter: saturate(1); }
.person__name { font-size: var(--step-2); margin-bottom: 0.35rem; }
.person__role {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--detail-deep);
  margin-bottom: 1.1rem;
  display: block;
}
.section--dark .person__role { color: var(--detail); }
.person__bio { color: var(--text-on-light-mute); font-size: var(--step-0); }
.section--dark .person__bio { color: var(--text-on-dark-mute); }

/* placeholder tile for team members without a photo */
.person__media--initials {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #1B1B20, #0B0B0D);
  border: 1px solid var(--ink-line);
}
.person__initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  color: var(--detail);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   16. CONTACT
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  align-items: start;
}

/* sits straight under the page hero, so it needs far less room above it */
#invitations { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* contact detail rows */
.detail-list { display: grid; gap: 1.6rem; margin-top: 2.25rem; }
.detail {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--ink-line);
}
.detail:last-child { border-bottom: 0; padding-bottom: 0; }
.detail__label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--detail);
}
.detail__value { font-size: var(--step-1); font-family: var(--font-display); }
.detail__value a { transition: color 0.35s var(--ease); }
.detail__value a:hover { color: var(--accent); }
.detail__value .arw {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}
.detail__value a:hover .arw { transform: translateX(3px); }
/* a quiet line under a row, e.g. "Dates to be announced" */
.detail__hint {
  font-size: var(--step--1);
  color: var(--text-on-dark-mute);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
  text-align: center;
}
.cta-band__media { position: absolute; inset: 0; z-index: 0; }
.cta-band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.5) brightness(0.34);
}
.cta-band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 50%, rgba(11,11,13,0.45), var(--ink) 96%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--step-3); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #08080A;
  color: var(--text-on-dark-mute);
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 2rem;
  font-size: var(--step--1);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--ink-line);
}
.footer-brand .brand { margin-bottom: 1.15rem; }
.footer-brand p { max-width: 34ch; line-height: 1.75; }

.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--detail);
  margin-bottom: 1.15rem;
}
.footer-col li + li { margin-top: 0.75rem; }
.footer-col a { transition: color 0.35s var(--ease); }
.footer-col a:hover { color: var(--bone); }

.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}

.social { display: flex; gap: 0.6rem; }
.social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-line);
  color: var(--text-on-dark-mute);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------------------
   19. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.stack-lg > * + * { margin-top: 1.5rem; }