/* ===================================================================
   ARÁKÙNRIN : THE INSTITUTE FOR MALE FORMATION
   DESIGN SYSTEM v2.1 : refinement pass over v2.0.
   ===================================================================
   This pass changes NOTHING structural: same palette, same type,
   same spacing scale, same layout, same components. Every edit below
   is a micro-detail refinement to motion, borders, optical typography,
   and interaction feel, the difference between "correct" and
   "considered." Each change is commented with the reasoning behind it.

   Editorial / institutional layout language. No glow, no blur-orbs,
   no glassmorphism, no stock "startup" card grids repeated on every
   page. Hairline gold rules, oversized serif numerals, alternating
   image/text bands, and a real photographic gallery carry the site :
   per the guide's own instruction that photography is the strongest
   asset of the brand.

   Palette:  Primary Navy #07182E · Secondary Navy #0C1F3C ·
             Royal Gold #C89A2E · Heritage Gold #A87919 ·
             Warm Ivory #F5F1E8 · White #FFFFFF.
   Type:     Cinzel (display/headlines/institutional documents),
             Bebas Neue (eyebrows, numerals, powerful short lines),
             Montserrat (body, UI).
=================================================================== */

:root {
  --navy: #07182E;
  --navy-2: #0C1F3C;
  --navy-3: #0A1B33;
  --ivory: #F5F1E8;
  --ivory-70: rgba(245, 241, 232, 0.72);
  --ivory-50: rgba(245, 241, 232, 0.52);
  --ivory-30: rgba(245, 241, 232, 0.32);
  --gold: #C89A2E;
  --gold-deep: #A87919;
  --gold-08: rgba(200, 154, 46, 0.08);
  --gold-16: rgba(200, 154, 46, 0.16);
  --gold-28: rgba(200, 154, 46, 0.28);
  --white: #FFFFFF;

  /* Borders now draw from their own dedicated, quieter opacity rather
     than sharing --gold-16/--gold-28 (which also drive fills like
     .roles and .swatches). Decoupling the two lets a hairline read as
     genuinely quiet without touching any background tint elsewhere,
     the visual equivalent of a thinner pencil line, not a paler one. */
  --hairline-color: rgba(200, 154, 46, 0.13);
  --hairline-strong-color: rgba(200, 154, 46, 0.24);
  --hairline: 1px solid var(--hairline-color);
  --hairline-strong: 1px solid var(--hairline-strong-color);

  /* --ease is the single deceleration curve nearly every transition
     in this file references. Swapping just this one token upgrades
     the felt quality of motion sitewide: this specific curve
     (a "quint" ease-out) is the same family used by Linear, Vercel,
     and Stripe, it settles into place instead of stopping, which
     is what makes motion feel expensive rather than mechanical. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* A second, snappier curve reserved for tiny, high-frequency
     interactions (link underlines, button taps) where the slow
     dramatic settle of --ease would feel sluggish instead of premium.
     Museum-quality interactions are fast to respond, slow to overstay. */
  --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast: 0.2s var(--ease-micro);
  --t-med: 0.45s var(--ease);
  --t-slow: 0.8s var(--ease);

  /* A dedicated, brief timing for hover-level colour/opacity shifts,
     distinct from --t-fast (used for hairline/position changes). Two
     nearby elements changing at very slightly different speeds is
     what separates "animated" from "alive." */
  --t-hover: 0.28s var(--ease);

  --display: "Cinzel", "Georgia", serif;
  --tracked: "Bebas Neue", "Cinzel", serif;
  --body: "Montserrat", "Source Sans Pro", -apple-system, sans-serif;

  --gutter: clamp(1.5rem, 4vw, 3rem);
  --measure: 62ch;

  /* A single, consistent focus treatment, gold rather than the
     browser-default blue, so keyboard navigation feels designed
     rather than merely accessible. */
  --focus-ring: 1px solid var(--gold);
}

/* =========================================
   RESET
========================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--navy); }

body {
  font-family: var(--body);
  font-weight: 300;
  background: var(--navy);
  color: var(--ivory-70);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Improves kerning and ligature handling at the small tracked sizes
     used throughout (.kicker, .fact__label, etc.), the kind of detail
     that reads as "typeset" rather than "displayed." */
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Removes the default mobile tap flash so button/link presses feel
     considered rather than a stock browser affordance. */
  -webkit-tap-highlight-color: transparent;
}

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }
svg { display: block; }

/* A single, quiet focus style used everywhere instead of the browser
   default, keeps keyboard navigation on-brand without adding a new
   visual language. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

/* =========================================
   TYPE
========================================= */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  /* Progressive enhancement: browsers that support it will avoid
     orphaned single words on the last line of a heading. No effect
     where unsupported, costs nothing, quietly improves every
     headline's line breaks. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 600; line-height: 1.08; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); }

p { font-weight: 300; font-size: 1.04rem; color: var(--ivory-70); }
/* A touch more air between consecutive paragraphs than a plain
   margin-top gives on its own, sets a calmer reading rhythm without
   changing the type scale. */
p + p { margin-top: 1.2rem; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--ivory-70);
  max-width: var(--measure);
  font-weight: 300;
  line-height: 1.65;
  /* Larger type optically needs slightly tighter tracking to avoid
     looking loose, a one-size-fits-all letter-spacing of 0 reads
     looser at 1.3rem than at 1rem. */
  letter-spacing: -0.005em;
}

.gold { color: var(--gold); }

/* Kicker / eyebrow : Bebas Neue tracked labels, the site's signature typographic device */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--tracked);
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  /* The line was static; letting it settle in on reveal (see
     [data-reveal] below) instead of appearing instantly reads as a
     deliberate flourish rather than a rule that was just "there." */
  transition: width var(--t-med);
}
.kicker--center { justify-content: center; }
.kicker--center::before { display: none; }

/* =========================================
   LAYOUT PRIMITIVES
========================================= */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.band { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.band--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.band--navy2 { background: var(--navy-2); }

.rule {
  height: 1px;
  max-width: 1320px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--hairline-strong-color) 15%, var(--hairline-strong-color) 85%, transparent);
}

.head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }

/* Alternating image / copy band : the site's core storytelling unit */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split--reverse .split__copy { order: 1; }

.split__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--hairline);
  position: relative;
}
.split__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  /* Slightly longer and on the shared premium curve so the zoom
     reads as a slow, deliberate drift rather than a snap-zoom;
     will-change primes the compositor so the motion stays smooth
     without any added visual effect. */
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
  will-change: transform;
}
.split__media--wide { aspect-ratio: 16/10; }

.split__copy .kicker { margin-bottom: 1.2rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split__media, .split--reverse .split__copy { order: initial; }
}

/* =========================================
   NAVIGATION : quiet, institutional, underline-only
========================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7, 24, 46, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 154, 46, 0.1);
  transition: background var(--t-med), border-color var(--t-med), padding var(--t-med);
  padding: 1.6rem 0;
}
.nav.is-scrolled {
  background: rgba(7, 24, 46, 0.97);
  border-bottom-color: var(--hairline-strong-color);
  padding: 1.1rem 0;
}
.nav__row {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  padding-right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__mark { display: flex; align-items: center; gap: 0.001rem; }
.nav__mark svg { color: var(--gold); width: 22px; height: 25px; }
.nav__logo { height: 88px; width: auto; display: block; }
.nav__word { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.1em; color: var(--ivory); font-weight: 600; }
.nav__sub { display: block; font-family: var(--tracked); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; margin-top: 0.15rem; }

.nav__links { display: flex; align-items: center; gap: 2.1rem; }
.nav__link {
  position: relative;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ivory-70);
  padding: 0.3rem 0;
  /* var(--t-hover) rather than the generic fast timing: a fractionally
     slower colour fade on the label itself reads calmer, while the
     underline (below) stays quick, the two moving at slightly
     different speeds is what makes the hover feel choreographed. */
  transition: color var(--t-hover);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--gold);
  /* Shortened from the reveal-length timing to something closer to a
     considered blink, a nav underline that takes half a second to
     draw in feels laggy, not luxurious. */
  transition: right 0.3s var(--ease-micro);
}
.nav__link:hover, .nav__link.is-active { color: var(--ivory); }
.nav__link:hover::after, .nav__link.is-active::after { right: 0; }

.nav__cta {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.6rem 1.4rem;
  font-family: var(--tracked);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.nav__cta:hover { background: var(--gold); color: var(--navy); }
.nav__cta::after { display: none; }

.nav__toggle {
  display: none;
  width: 26px; height: 18px;
  position: relative;
  background: none; border: none;
}
.nav__toggle span {
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--gold);
  transition: transform var(--t-hover), opacity var(--t-hover);
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 8px; }
.nav__toggle span:nth-child(3) { top: 16px; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav__links {
    position: fixed; inset: 0; top: 0;
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform var(--t-med);
    z-index: 999;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link { font-size: 1.3rem; font-family: var(--display); }
  .nav__toggle { display: block; z-index: 1001; }
}

/* =========================================
   HERO
========================================= */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(0.88) contrast(1.06);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,24,46,0.35) 0%, rgba(7,24,46,0.55) 45%, rgba(7,24,46,0.96) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 900px; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: var(--hairline);
  font-family: var(--tracked); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--ivory-50); text-transform: uppercase;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 2.2rem 0; }

.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--tracked); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ivory-50); text-transform: uppercase;
}
.scroll-cue__line { width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent); }

/* =========================================
   BUTTONS
========================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 2.1rem;
  font-family: var(--tracked);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  /* Explicit properties instead of "all": transitioning only what
     actually changes is both more performant and reads more
     intentional, "all" tends to include incidental properties and
     can feel slightly mushy in comparison. Colour/border settle on
     the calmer curve; the press-down (below) is quick and separate. */
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform 0.15s var(--ease-micro);
}
.btn--gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold:hover { background: transparent; color: var(--gold); }
.btn--line { background: transparent; color: var(--ivory); border-color: var(--ivory-30); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
/* A very slight, fast press-down: the tactile feedback that makes a
   button feel like a physical object rather than a coloured div.
   Kept subtle on purpose, nothing should bounce. */
.btn:active { transform: scale(0.97); }
.btn__arrow { transition: transform var(--t-hover); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* =========================================
   PILLARS : numbered list, not cards
========================================= */
.pillars { border-top: var(--hairline); }
.pillar {
  display: grid;
  grid-template-columns: 110px 1fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-bottom: var(--hairline);
  transition: background-color var(--t-med);
}
.pillar:hover { background: rgba(200,154,46,0.03); }
.pillar__num { font-family: var(--display); font-size: 2.6rem; color: var(--gold-28); font-weight: 600; }
.pillar__name { font-family: var(--display); font-size: 1.5rem; color: var(--ivory); }
.pillar__sub { font-family: var(--tracked); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold); text-transform: uppercase; margin-top: 0.3rem; }
.pillar__desc { color: var(--ivory-70); font-size: 1rem; }

@media (max-width: 720px) {
  .pillar { grid-template-columns: 60px 1fr; }
  .pillar__desc { grid-column: 1 / -1; margin-top: 0.6rem; }
}

/* =========================================
   PULL QUOTE
========================================= */
.pullquote { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.pullquote__mark { font-family: var(--display); font-size: 5rem; color: var(--gold-28); line-height: 0.4; display: block; margin-bottom: 1.4rem; }
.pullquote__text {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.45; color: var(--ivory);
}
.pullquote__attr { margin-top: 1.6rem; font-family: var(--tracked); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* =========================================
   STATEMENT WALL : typographic list of signature lines
========================================= */
.wall { border-top: var(--hairline); }
.wall__line {
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.7rem); color: var(--ivory);
  /* Separated into two explicit properties on slightly different
     timings, the indent leads, the colour follows a beat later,
     a small stagger that keeps a simple hover from feeling flat. */
  transition: padding-left var(--t-med), color 0.5s var(--ease);
}
.wall__line:hover { padding-left: 1rem; color: var(--gold); }
.wall__line span:last-child { font-family: var(--tracked); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--gold); flex-shrink: 0; text-transform: uppercase; }

/* =========================================
   PALETTE / TYPE SWATCHES (Gallery / brand system page)
========================================= */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--gold-16); border: var(--hairline); }
.swatch { background: var(--navy); padding: 2.2rem 1.4rem; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; }
.swatch__name { font-family: var(--tracked); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ivory); text-transform: uppercase; }
.swatch__hex { font-family: var(--body); font-size: 0.72rem; color: var(--ivory-50); margin-top: 0.2rem; }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .swatches { grid-template-columns: repeat(2, 1fr); } }

.type-sample { padding: 2.4rem 0; border-bottom: var(--hairline); display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: baseline; }
.type-sample__label { font-family: var(--tracked); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
@media (max-width: 640px) { .type-sample { grid-template-columns: 1fr; gap: 0.4rem; } }

/* =========================================
   GALLERY : real masonry-style photographic grid
========================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 14vw;
  gap: 0.6rem;
}
.gallery__item { overflow: hidden; position: relative; border: var(--hairline); }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  /* A slower, single premium curve for both the zoom and the subtle
     saturation lift on hover, so the photograph feels like it is
     gently coming into focus rather than being scaled by a slider. */
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  will-change: transform;
}
.gallery__item:hover img { transform: scale(1.05); filter: saturate(0.96) contrast(1.05); }
.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(7,24,46,0.9), transparent);
  font-family: var(--tracked); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ivory-70); text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); }

.gallery__item--wide { grid-column: span 3; grid-row: span 2; }
.gallery__item--tall { grid-column: span 2; grid-row: span 3; }
.gallery__item--sq { grid-column: span 2; grid-row: span 2; }
.gallery__item--full { grid-column: span 6; grid-row: span 3; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 30vw; }
  .gallery__item--wide, .gallery__item--tall, .gallery__item--sq, .gallery__item--full { grid-column: span 2; grid-row: span 2; }
}

/* =========================================
   TIMELINE : Gathering programme
========================================= */
.timeline { border-top: var(--hairline); }
.timeline__row {
  display: grid; grid-template-columns: 140px 1fr; gap: 2rem;
  padding: 1.7rem 0; border-bottom: var(--hairline);
}
.timeline__time { font-family: var(--tracked); font-size: 1rem; letter-spacing: 0.06em; color: var(--gold); }
.timeline__title { font-family: var(--display); font-size: 1.1rem; color: var(--ivory); }
@media (max-width: 560px) { .timeline__row { grid-template-columns: 90px 1fr; } }

/* =========================================
   FACT STRIP : key/value institutional facts (date/venue/etc)
========================================= */
.factstrip { display: flex; flex-wrap: wrap; border-top: var(--hairline); border-bottom: var(--hairline); }
.fact { flex: 1 1 200px; padding: 2rem var(--gutter); border-right: var(--hairline); }
.fact:last-child { border-right: none; }
.fact__label { font-family: var(--tracked); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.5rem; }
.fact__value { font-family: var(--display); font-size: 1.2rem; color: var(--ivory); }

/* =========================================
   PARTNER / COMMITMENT PANEL
========================================= */
.panel {
  border: var(--hairline);
  padding: clamp(2.2rem, 5vw, 3.4rem);
}
.panel__kicker { margin-bottom: 1.3rem; }

/* =========================================
   FOOTER
========================================= */
.footer { background: #04101F; border-top: var(--hairline-strong); padding: clamp(4rem, 8vw, 6.5rem) 0 2.2rem; }
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__mark { display: flex; align-items: center; gap: 0.001rem; margin-bottom: 1.2rem; }
.footer__mark svg { color: var(--gold); width: 20px; height: 23px; }
.footer__logo { height: 88px; width: auto; display: block; }
.footer__word { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.08em; color: var(--ivory); font-weight: 600; display: block; }
.footer__tagline { display: block; font-family: var(--tracked); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; margin-top: 0.15rem; }
.footer__desc { max-width: 300px; color: var(--ivory-50); font-size: 0.92rem; }

.footer h4 { font-family: var(--tracked); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory); margin-bottom: 1.3rem; font-weight: 400; }
.footer ul li { margin-bottom: 0.8rem; }
.footer a { color: var(--ivory-50); font-size: 0.92rem; transition: color var(--t-hover); }
.footer a:hover { color: var(--gold); }
.footer address p { color: var(--ivory-50); font-size: 0.92rem; margin-bottom: 0.8rem; }

.footer__social { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.footer__social a {
  width: 36px; height: 36px; border: var(--hairline); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem;
  font-family: var(--tracked); letter-spacing: 0.05em;
  transition: border-color var(--t-hover), color var(--t-hover);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); }

.footer__bottom {
  padding-top: 2rem; border-top: var(--hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.8rem; color: var(--ivory-30);
}

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

/* =========================================
   CTA BAND
========================================= */
.cta {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--navy-2);
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
  text-align: center;
}
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 2.2rem; }

/* =========================================
   REVEAL : restrained, on-scroll fade
========================================= */
[data-reveal] {
  opacity: 0;
  /* 14px instead of 18px: enough to register as movement, not enough
     to look like it "arrives", the goal is content that was always
     almost there, easing gently into place rather than travelling
     into view. Combined with --ease (a settle-curve, not a bounce),
     nothing should read as a "pop." */
  transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================
   STAT GRID: The Case for Action data points
========================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--hairline);
  border-left: var(--hairline);
}
.stat {
  padding: clamp(1.8rem, 3vw, 2.4rem) 1.4rem;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 190px;
}
.stat__label { font-family: var(--tracked); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.7rem; }
.stat__desc { font-size: 0.92rem; color: var(--ivory-70); max-width: 220px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat { min-height: 170px; } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } .stat { min-height: unset; } }

/* =========================================
   RIPPLE CHAIN: sequential cause > effect progression
========================================= */
.chain { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0; border-top: var(--hairline); border-bottom: var(--hairline); }
.chain__link {
  flex: 1 1 160px;
  padding: 1.8rem 1.2rem;
  text-align: center;
  border-right: var(--hairline);
  position: relative;
}
.chain__link:last-child { border-right: none; }
.chain__name { font-family: var(--tracked); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.6rem; }
.chain__desc { font-size: 0.88rem; color: var(--ivory-70); }

/* =========================================
   ROLE CARDS: ways to get involved
========================================= */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gold-16); border: var(--hairline); }
.roles--column { grid-template-columns: 1fr; }
.role { background: var(--navy); padding: clamp(1.6rem, 3vw, 2.2rem); }
.role__name { font-family: var(--display); font-size: 1.15rem; color: var(--ivory); margin-bottom: 0.6rem; }
.role__desc { font-size: 0.9rem; color: var(--ivory-70); }
@media (max-width: 900px) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* =========================================
   SPEAKER GRID: Gathering lineup
========================================= */
.speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.speaker { border: var(--hairline); padding: 1.8rem; transition: border-color var(--t-med); }
.speaker__avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: var(--hairline); margin-bottom: 1rem; filter: saturate(0.9) contrast(1.05);
  transition: filter var(--t-hover);
}
.speaker__role { font-family: var(--tracked); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.9rem; }
.speaker__name { font-family: var(--display); font-size: 1.2rem; color: var(--ivory); margin-bottom: 0.3rem; }
.speaker__title { font-size: 0.85rem; color: var(--ivory-50); margin-bottom: 1rem; }
.speaker__topic { font-size: 0.92rem; color: var(--ivory-70); padding-top: 0.9rem; border-top: var(--hairline); }
@media (max-width: 900px) { .speakers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .speakers { grid-template-columns: 1fr; } }

/* =========================================
   HIGHLIGHTS LIST: sequence of moments (no fixed clock times)
========================================= */
.sequence { border-top: var(--hairline); counter-reset: seq; }
.sequence__item {
  display: grid; grid-template-columns: 50px 1fr; gap: 1.5rem; align-items: center;
  padding: 1.3rem 0; border-bottom: var(--hairline);
}
.sequence__item::before {
  counter-increment: seq; content: counter(seq, decimal-leading-zero);
  font-family: var(--display); color: var(--gold-28); font-size: 1.3rem;
}
.sequence__label { font-family: var(--display); font-size: 1.05rem; color: var(--ivory); }

/* =========================================
   COUNTDOWN: live timer to The Gathering
========================================= */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}
.countdown__card {
  background: var(--navy-2);
  border: var(--hairline);
  padding: clamp(1.6rem, 4vw, 2.4rem) 1rem;
  text-align: center;
  transition: border-color var(--t-med), transform var(--t-med);
}
.countdown__card:hover {
  border-color: var(--hairline-strong-color);
  transform: translateY(-2px);
}
.countdown__value {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  /* A hair longer than the original 0.25s, on the shared micro-ease,
     so each digit change reads as a soft cross-fade rather than a
     flicker, still fast enough to feel live. */
  transition: opacity 0.3s var(--ease-micro), transform 0.3s var(--ease-micro);
}
.countdown__value.is-updating {
  opacity: 0.3;
  transform: translateY(-4px);
}
.countdown__label {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--tracked);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-50);
}
.countdown__ended {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--gold);
}
@media (max-width: 640px) {
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   UTILITIES
========================================= */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tag {
  font-family: var(--tracked); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); border: var(--hairline); padding: 0.5rem 1rem;
  transition: border-color var(--t-hover), color var(--t-hover);
}

@media (max-width: 768px) {
  .band { padding: 4rem 0; }
}
/* ===================================================================
   THE GATHERING 2026: CINEMATIC PAGE TREATMENT
   Everything below is scoped to .gathering-page so it cannot affect
   any other page on the site. The event flyer is presented as a
   museum-mounted poster, not a background image.
=================================================================== */

/* ---------- Section rhythm: soft seams between alternating bands ---------- */
.gathering-page .band--navy2 {
  position: relative;
  isolation: isolate;
}
.gathering-page .band--navy2::before,
.gathering-page .band--navy2::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(40px, 8vw, 90px);
  pointer-events: none;
  z-index: 0;
}
.gathering-page .band--navy2::before {
  top: 0;
  background: linear-gradient(to bottom, var(--navy), transparent);
}
.gathering-page .band--navy2::after {
  bottom: 0;
  background: linear-gradient(to top, var(--navy), transparent);
}
.gathering-page .band--navy2 > .wrap,
.gathering-page .band--navy2 > .factstrip {
  position: relative;
  z-index: 1;
}
/* ===================================================================
   HERO: split editorial layout.
   Desktop: text left, flyer right, as a real image card (not a
   background). Mobile: flyer first, large, then text beneath.
=================================================================== */
.gathering-hero {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}

.gathering-hero__wash {
  position: absolute;
  inset: -15% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 12% 20%, rgba(200, 154, 46, 0.08), transparent 70%),
    radial-gradient(ellipse 45% 45% at 88% 80%, rgba(200, 154, 46, 0.06), transparent 70%);
}

.gathering-hero__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.6rem, 6vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .gathering-hero__row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3.5rem, 7vw, 6.5rem);
  }
}

/* Mobile: flyer first. Desktop: text left, flyer right. */
.gathering-hero__content { order: 2; }
.gathering-hero__visual { order: 1; }
@media (min-width: 900px) {
  .gathering-hero__content { order: 1; }
  .gathering-hero__visual { order: 2; }
}

.gathering-hero__content {
  text-align: left;
}
.gathering-hero__content .kicker { justify-content: flex-start; }
.gathering-hero__content .kicker::before { display: block; }
.gathering-hero__content .lede { margin-inline: 0; }

.hero-facts {
  justify-content: flex-start;
}

.gathering-hero__actions {
  justify-content: flex-start;
  margin-top: clamp(1.8rem, 4vw, 2.3rem);
}

@media (max-width: 899px) {
  .gathering-hero__content,
  .gathering-hero__content .kicker,
  .hero-facts,
  .gathering-hero__actions {
    text-align: center;
    justify-content: center;
  }
  .gathering-hero__content .kicker::before { display: none; }
  .gathering-hero__content .lede { margin-inline: auto; }
}

/* ---------- The flyer, presented as a real image card ---------- */
.hero-flyer {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}
.hero-flyer::before {
  /* wide ambient wash, a second, softer layer of light behind the glow */
  content: "";
  position: absolute;
  inset: -30% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(200, 154, 46, 0.07), transparent 72%);
  filter: blur(60px);
}
@media (max-width: 899px) {
  .hero-flyer { max-width: 100%; }
}

/* Soft glow behind the card */
.hero-flyer__glow {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(200, 154, 46, 0.20), transparent 68%);
  filter: blur(36px);
}

/* Subtle floating decorative shapes, very low opacity */
.hero-flyer__shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
}
.hero-flyer__shape--ring {
  top: -8%;
  right: -10%;
  width: 130px;
  height: 130px;
  border: 1px solid var(--gold-28);
  background: none;
  animation: heroShapeFloat 9s ease-in-out infinite;
}
.hero-flyer__shape--dot {
  bottom: -6%;
  left: -8%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(200, 154, 46, 0.14), transparent 70%);
  animation: heroShapeFloat 11s ease-in-out infinite reverse;
}

/* The card itself: glass frame around the flyer */
.hero-flyer__card {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  padding: clamp(10px, 1.6vw, 16px);
  background: linear-gradient(160deg, rgba(245, 241, 232, 0.07), rgba(12, 31, 60, 0.55));
  border: 1px solid rgba(200, 154, 46, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -24px rgba(0, 0, 0, 0.6),
    0 16px 40px -18px rgba(0, 0, 0, 0.5);
  animation: heroFlyerFloat 7s ease-in-out infinite;
  will-change: transform;
  transition: transform 0.5s var(--ease);
}

.hero-flyer__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-2);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: min(74vh, 660px);
}
.hero-flyer__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(74vh, 660px);
  object-fit: contain;
}

/* One-time light sheen once the hero has scrolled into view */
.hero-flyer__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0.05) 53%, transparent 66%);
  transform: translateX(-130%);
}
.hero-flyer.is-visible .hero-flyer__sheen {
  animation: posterSheen 1.7s ease-out 0.4s 1 both;
}

@keyframes heroFlyerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes heroShapeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}
@keyframes posterSheen {
  to { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flyer__card { animation: none; }
  .hero-flyer__shape--ring, .hero-flyer__shape--dot { animation: none; }
  .hero-flyer.is-visible .hero-flyer__sheen { animation: none; opacity: 0; }
}

/* ===================================================================
   SECTION-BY-SECTION POLISH (scoped to this page only)
=================================================================== */

/* ---------- Speaker cards ---------- */
.gathering-page .speaker {
  position: relative;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.gathering-page .speaker::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--t-med);
}
.gathering-page .speaker:hover {
  transform: translateY(-4px);
  border-color: var(--gold-28);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
.gathering-page .speaker:hover::before { opacity: 1; }
.gathering-page .speaker__avatar {
  transition: transform var(--t-slow);
}
.gathering-page .speaker:hover .speaker__avatar {
  transform: scale(1.06);
}

/* ---------- Countdown ---------- */
.gathering-page .countdown__card {
  position: relative;
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.6);
}
.gathering-page .countdown__card:hover {
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.65);
}

/* ---------- Register panel: museum-label corner accents ---------- */
.gathering-page .panel {
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.gathering-page .panel::before,
.gathering-page .panel::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
  opacity: 0.6;
}
.gathering-page .panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.gathering-page .panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- Experience Highlights sequence ---------- */
.gathering-page .sequence__item {
  transition: padding-left var(--t-med), border-color var(--t-med);
}
.gathering-page .sequence__item:hover {
  padding-left: 0.8rem;
  border-color: var(--gold-28);
}
.gathering-page .sequence__item:hover .sequence__label { color: var(--gold); }
.gathering-page .sequence__label { transition: color var(--t-fast); }

/* ---------- Beyond an Event, single column ---------- */
.gathering-page .roles--column .role {
  transition: background var(--t-med), transform var(--t-med);
}
.gathering-page .roles--column .role:hover {
  background: var(--navy-3);
  transform: translateX(4px);
}

/* ---------- Buttons: tasteful hover glow, this page only ---------- */
.gathering-page .btn--gold {
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-med);
}
.gathering-page .btn--gold:hover {
  box-shadow: 0 12px 30px -10px rgba(200, 154, 46, 0.35);
}