/* Strude — display font Godwin sent for the hero "home" word.
   NOTE: the bundled read-me marks this as a PERSONAL-USE-ONLY demo; a commercial
   licence (letteralle.com) is needed before this goes live on the public site. */
@font-face {
  font-family: 'Strude';
  src: url('assets/fonts/strude.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================= tokens == */
:root {
  --bg: #ffffff;
  --bg-2: #f6f3ee;   /* soft warm off-white for alternating sections */
  --bg-3: #ece5da;

  --text: #1a1613;   /* deep ink */
  --text-soft: rgb(26 22 19 / 0.68);
  --text-faint: rgb(26 22 19 / 0.62);

  --hair: rgb(26 22 19 / 0.14);
  --hair-soft: rgb(26 22 19 / 0.09);
  --surface: rgb(26 22 19 / 0.035);
  --surface-2: rgb(26 22 19 / 0.07);

  --accent: #cf3026; /* first love red, deep enough to pass AA on white and the off-white footer */
  --accent-soft: rgb(207 48 38 / 0.5);

  --display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --serif: 'Strude', 'Dancing Script', 'Segoe Script', cursive;
  --body: 'Figtree', system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3rem);
  --maxw: 1180px;
  --radius: 4px;
  --radius-lg: 8px;

  --grain: 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ============================================================ helpers == */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.73rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}
.eyebrow--light { color: var(--accent); }

/* Sans headline with elegant italic-serif accent words — the sleek move. */
.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.h2--light { color: var(--text); }

.ital {
  font-family: var(--serif);
  font-style: normal; /* the script is already cursive — no synthetic italic */
  font-weight: 400; /* Strude is a single-weight brush script — avoid faux bold */
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  font-size: 1.18em;
  line-height: 1;
}

.lead { font-size: 1.1rem; color: var(--text-soft); font-weight: 300; }

.section-head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head--row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
}
.section-head__link {
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; color: var(--text-soft);
  border-bottom: 1px solid var(--accent-soft); padding-bottom: 4px;
  transition: color 0.2s ease;
}
.section-head__link:hover { color: var(--text); }

/* ============================================================ buttons == */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 1.7rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 0.84rem; }
.btn--sm { padding: 0.65rem 1.25rem; font-size: 0.72rem; }

/* Primary = red fill: reads on the dark hero photo AND on the white sections. */
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #bd2c22; }
.btn--dark, .btn--light { background: var(--text); color: var(--bg); }
.btn--dark:hover, .btn--light:hover { background: #000; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--hair); }
.btn--ghost:hover { border-color: var(--text); background: transparent; }
/* The hero ghost sits on the dark photo, so it goes light there. */
.hero .btn--ghost { color: #f7f3ec; border-color: rgb(247 243 236 / 0.4); }
.hero .btn--ghost:hover { border-color: #f7f3ec; background: rgb(247 243 236 / 0.08); }
.btn--outline-light { background: transparent; color: var(--text); border-color: rgb(242 239 233 / 0.28); }
.btn--outline-light:hover { background: rgb(242 239 233 / 0.07); }

/* ========================================================== top bar === */
.topbar {
  background: #000;
  color: var(--text-soft);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 0.6rem var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.topbar__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ============================================================== nav === */
.nav { position: sticky; top: 0; z-index: 50; transition: background 0.3s ease, box-shadow 0.3s ease; padding: 0.4rem 0; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid var(--hair-soft); }
.nav--solid { box-shadow: 0 8px 22px -16px rgb(26 22 19 / 0.55); }
/* Home: the nav floats transparent over the dark hero with WHITE content, and
   only turns solid (white bar, dark content) once you scroll past the hero. */
.nav--hero:not(.nav--solid) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav--hero:not(.nav--solid) .brand__logo { background-color: #fff; }
.nav--hero:not(.nav--solid) .nav__links a:not(.btn) { color: #fff; }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0.85rem var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand__mark { color: var(--accent); display: inline-flex; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: 0.14em; }
/* The hand-drawn heart mark. The asset is white-on-transparent, so it is used as
   a mask and filled with ink (black) — crisp on both the white nav and the
   off-white footer. */
.brand__logo {
  display: inline-block;
  width: 58px; height: 32px; /* heart mark, aspect ~1.79 */
  background-color: var(--text);
  -webkit-mask: url('assets/first-love-heart.png') center / contain no-repeat;
  mask: url('assets/first-love-heart.png') center / contain no-repeat;
}
.brand--foot .brand__logo { width: 52px; height: 29px; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; transition: opacity 0.2s ease; }
.nav__links a:not(.btn):hover { opacity: 1; }
.nav__give { color: var(--accent) !important; opacity: 1 !important; }
/* The button lives inside `.nav__links a`, which would otherwise force its text
   light on a light fill (invisible). Pin it back to the dark button ink. */
.nav__cta { color: var(--bg) !important; opacity: 1 !important; }

.nav__toggle { display: none; position: relative; z-index: 2; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav__toggle span { width: 24px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
/* Hamburger goes white while the nav floats over the dark hero. */
.nav--hero:not(.nav--solid) .nav__toggle span { background: #fff; }

/* ============================================================= hero === */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden;
  background: #14110f; /* dark floor behind the photo: fallback + keeps light hero text safe */
  /* Pull the hero up behind the (sticky, transparent) nav so the photo runs to
     the very top with no white bar. The offset equals the nav's own height
     (2x0.4rem + 2x0.85rem + 32px logo = 2.5rem + 32px). */
  margin-top: calc(-2.5rem - 32px);
}
.hero .ph--hero { position: absolute; inset: 0; border-radius: 0; }
/* Hero background video: fills the section, cover-cropped, sits under the scrim
   + content. Muted + playsinline + loop so it autoplays silently everywhere;
   the poster frame covers the first paint and any device that blocks autoplay. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
/* The hero sits on a dark photo whatever the page theme, so its scrim keeps a
   dark floor for the light text — it must NOT fade to the (now white) page. */
.hero__scrim {
  position: absolute; inset: 0;
  /* Layered so the footage reads as a designed backdrop, not raw video:
     (1) an even base tint so no area is left bare, (2) a corner vignette for
     depth, (3) a bottom-weighted gradient that anchors the headline + sub. */
  background:
    radial-gradient(150% 120% at 50% 0%, transparent 60%, rgb(12 12 14 / 0.22) 100%),
    linear-gradient(180deg, rgb(12 12 14 / 0.34) 0%, rgb(12 12 14 / 0.2) 30%, rgb(12 12 14 / 0.5) 66%, rgb(12 12 14 / 0.74) 100%),
    rgb(12 12 14 / 0.08);
}
.hero__content { position: relative; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter) clamp(3.5rem, 8vw, 6rem); color: #f7f3ec; }
.hero__title {
  font-family: var(--display); font-weight: 800;
  /* Cap sized so "WELCOME Home" stays on one line inside the 1180px hero column
     (the script capital H is a wide glyph); it still stacks on tablet/mobile. */
  font-size: clamp(3.2rem, 1.6rem + 10vw, 8.3rem);
  line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 1.4rem; text-transform: uppercase;
}
.hero__title .ital { font-family: 'Strude', var(--serif); font-size: 1.04em; font-weight: 400; letter-spacing: 0; }
.hero__sub { max-width: 32rem; font-size: 1.12rem; font-weight: 400; color: rgb(247 243 236 / 0.84); margin: 0 0 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Typewriter caret for the hero accent word ("home"). The caret shows only
   while JS is typing (.is-typing) and retires for a clean final state. */
.hero__title .ital.is-typing::after {
  content: '';
  display: inline-block;
  width: 0.055em;
  height: 0.72em;
  margin-left: 0.04em;
  vertical-align: -0.02em;
  background: currentColor;
  animation: caret-blink 0.85s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__title .ital.is-typing::after { display: none; }
}

/* ======================================================= quick starts = */
.starts { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: var(--radius-lg); overflow: hidden; }
.start { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.8rem 1.6rem; text-decoration: none; color: var(--text); background: var(--bg); transition: background 0.22s ease; }
.start:hover { background: var(--bg-3); }
.start__icon { font-size: 1.3rem; color: var(--accent); line-height: 1; }
.start__title { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.01em; text-transform: uppercase; }
.start__line { font-size: 0.9rem; color: var(--text-soft); font-weight: 300; flex: 1; }
.start__go { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
/* starts sits on its own full-bleed band so the hairline grid reads cleanly */
.starts-band { background: var(--bg); }

/* ============================================================ sections = */
section { position: relative; }
.welcome, .events, .locations, .team, .connect { max-width: var(--maxw); margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--gutter); }

.welcome { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.welcome__text .h2 { margin-bottom: 1.4rem; }
/* "Who we are" heading: one font for the whole line — the accent phrases drop
   the script and match the heading type, keeping only the red colour. */
.welcome__text .h2 .ital {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1em;
  line-height: inherit;
}
.welcome__text p { margin: 0 0 1.3rem; }
.welcome__text .btn { margin-top: 0.6rem; }

.watch { background: var(--bg-2); padding: clamp(3.5rem, 9vw, 7rem) var(--gutter); }
.watch > * { max-width: var(--maxw); margin-inline: auto; }
.watch__feature { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.watch__feature .ph { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); position: relative; }
.watch__play { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%; background: rgb(242 239 233 / 0.1); backdrop-filter: blur(4px); border: 1px solid rgb(242 239 233 / 0.4); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 1.3rem; padding-left: 5px; }
.watch__series { color: var(--accent); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.6rem; }
.watch__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); margin: 0 0 0.5rem; letter-spacing: 0; }
.watch__by { color: var(--text-soft); font-weight: 300; margin: 0 0 1.6rem; }
.watch__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.1rem; }
.watch__note { font-size: 0.78rem; color: var(--text-faint); margin: 0; }

.events__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.event { text-decoration: none; color: var(--text); }
.event .ph { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); margin-bottom: 1rem; transition: transform 0.22s ease; }
.event:hover .ph { transform: translateY(-5px); }
.event__title { font-family: var(--display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 0.3rem; }
.event__line { font-size: 0.88rem; color: var(--text-soft); font-weight: 300; margin: 0; }

.belong { background: var(--bg-2); padding: clamp(3.5rem, 9vw, 7rem) var(--gutter); }
.belong > * { max-width: var(--maxw); margin-inline: auto; }
.belong__head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.belong__intro { color: var(--text-soft); font-weight: 300; font-size: 1.08rem; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: center; gap: 1.6rem; padding: 1.8rem 0.2rem; border-top: 1px solid var(--hair-soft); transition: padding-left 0.25s ease; }
.step:last-child { border-bottom: 1px solid var(--hair-soft); }
.step:hover { padding-left: 1rem; }
.step__no { font-family: var(--body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--accent); min-width: 2.6rem; }
.step__body { flex: 1; }
.step__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem); text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 0.3rem; }
.step__line { color: var(--text-soft); font-weight: 300; margin: 0; font-size: 0.95rem; }
.step__go { font-size: 1.1rem; color: var(--text-faint); }

.locations { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.locations__map .ph { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.locations__text .h2 { margin-bottom: 1.2rem; }
.locations__list { list-style: none; margin: 1.8rem 0; padding: 0; }
.locations__list li { display: flex; justify-content: space-between; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--hair-soft); }
.locations__list strong { font-size: 1.02rem; font-weight: 600; }
.locations__list span { color: var(--text-soft); font-size: 0.82rem; font-weight: 300; }

.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.person { margin: 0; }
.person .ph { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); margin-bottom: 1rem; }
.person figcaption { display: flex; flex-direction: column; gap: 2px; }
.person strong { font-size: 1rem; font-weight: 600; }
.person span { color: var(--text-soft); font-size: 0.82rem; font-weight: 300; }

/* A bold red band — the one saturated moment on the light site, on-brand and
   high-contrast. Background sits on the section itself so content reads light. */
.cta { position: relative; overflow: hidden; padding: clamp(4.5rem, 11vw, 8rem) var(--gutter); text-align: center; background: var(--accent); color: #fff; }
.cta__content { position: relative; max-width: 44rem; margin: 0 auto; }
.cta__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.015em; margin: 0 0 1.1rem; color: #fff; }
.cta__title .ital { color: #fff; }
.cta__sub { font-size: 1.1rem; font-weight: 400; color: rgb(255 255 255 / 0.95); margin: 0 0 2rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
/* On the red band the primary button inverts to a white fill. */
.cta .btn--accent { background: #fff; color: var(--accent); }
.cta .btn--accent:hover { background: #fff; box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.5); }
.cta .btn--outline-light { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.cta .btn--outline-light:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }

.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; border-top: 1px solid var(--hair-soft); }
.connect__form { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.connect__form input { flex: 1; min-width: 60%; padding: 1rem 1.2rem; border: 1px solid var(--hair); border-radius: 999px; font: inherit; background: var(--surface); color: var(--text); }
.connect__form input::placeholder { color: var(--text-faint); }
.connect__form input:focus { outline: none; border-color: var(--accent); }
.connect__note { width: 100%; font-size: 0.76rem; color: var(--text-faint); }

/* ===================================================== enquiry form === */
.form { max-width: 42rem; margin: 0 auto; max-inline-size: var(--maxw); }
.form-wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.form__row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.form__field { flex: 1; min-width: 13rem; display: flex; flex-direction: column; gap: 0.45rem; }
.form__field--full { flex-basis: 100%; }
.form__field label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.form__field input, .form__field select, .form__field textarea {
  font: inherit; font-size: 0.98rem; padding: 0.85rem 1rem;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--surface); color: var(--text); width: 100%;
}
.form__field textarea { min-height: 9.5rem; resize: vertical; border-radius: var(--radius-lg); line-height: 1.6; }
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--text-faint); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.form__note { font-size: 0.82rem; color: var(--text-faint); margin: 1.4rem 0 0; }
.form__status { font-size: 0.92rem; font-weight: 500; color: var(--accent); margin: 0; }

/* A short, bordered policy/body prose block for the inner content pages. */
.prose { max-width: 44rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 2.4rem 0 0.7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-soft); margin: 0 0 1.1rem; }
.prose a { color: var(--accent); }
.prose__contact { background: var(--surface); border-radius: var(--radius-lg); padding: 1.1rem 1.3rem; }

/* Statement of Faith (mission page): a centred, readable creed with each
   scripture set apart as a centred accent verse + its reference. */
.sof { max-width: 44rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.sof p { color: var(--text); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.3rem; }
.sof__lead { font-size: 1.2rem; }
.verse { margin: 2.2rem auto; max-width: 40rem; text-align: center; }
.verse p { font-style: italic; color: var(--accent); font-size: 1.12rem; line-height: 1.5; margin: 0 0 0.55rem; }
.verse cite { display: block; font-style: normal; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; color: var(--text); }
.doclist { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.doc-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--hair); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); margin-bottom: 0.8rem; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.doc-link:hover { border-color: var(--accent-soft); background: var(--surface); transform: translateY(-2px); }
.doc-link__name { font-weight: 600; }
.doc-link__meta { color: var(--text-faint); font-size: 0.8rem; }
.doc-link__tag { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* ===================================================== social links === */
.socials { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.social-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 2rem 1.8rem; text-decoration: none; color: var(--text); border: 1px solid var(--hair); border-radius: var(--radius-lg); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.social-card:hover { transform: translateY(-5px); border-color: var(--accent-soft); box-shadow: 0 18px 40px -24px rgb(26 22 19 / 0.5); }
.social-card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--text); margin-bottom: 0.7rem; transition: background 0.2s ease, color 0.2s ease; }
.social-card__icon svg { width: 25px; height: 25px; }
.social-card:hover .social-card__icon { background: var(--accent); color: #fff; }
.social-card__plat { font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; }
.social-card__handle { color: var(--accent); font-weight: 600; font-size: 0.92rem; }
.social-card__line { color: var(--text-soft); font-weight: 300; font-size: 0.92rem; margin: 0.15rem 0 0.7rem; flex: 1; }
.social-card__go { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.social-card:hover .social-card__go { color: var(--accent); }
@media (max-width: 820px) { .socials { grid-template-columns: 1fr; gap: 1.1rem; } }

/* Platform rows — big list that fills with each brand's colour on hover. */
.plat-list { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.plat-row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); padding: clamp(1.4rem, 3.4vw, 2.1rem) clamp(1rem, 2vw, 1.6rem); border-top: 1px solid var(--hair-soft); text-decoration: none; color: var(--text); transition: background 0.3s ease, color 0.3s ease, padding-left 0.3s ease; }
.plat-row:last-child { border-bottom: 1px solid var(--hair-soft); }
.plat-row:hover { color: #fff; padding-left: clamp(1.6rem, 3vw, 2.4rem); }
.plat-row__icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); transition: background 0.3s ease; }
.plat-row__icon svg { width: 23px; height: 23px; }
.plat-row:hover .plat-row__icon { background: rgb(255 255 255 / 0.2); }
.plat-row__text { display: flex; flex-direction: column; gap: 0.15rem; }
.plat-row__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.7vw, 2.3rem); text-transform: uppercase; letter-spacing: -0.005em; line-height: 1; }
.plat-row__handle { font-size: 0.92rem; color: var(--accent); font-weight: 600; transition: color 0.3s ease; }
.plat-row:hover .plat-row__handle { color: rgb(255 255 255 / 0.88); }
.plat-row__go { margin-left: auto; font-size: 1.5rem; line-height: 1; transition: transform 0.3s ease; }
.plat-row:hover .plat-row__go { transform: translateX(7px); }
.plat-row--ig:hover { background: linear-gradient(90deg, #8a3ab9 0%, #e1306c 52%, #fd7d3c 100%); }
.plat-row--tiktok:hover { background: #060606; }
.plat-row--fb:hover { background: #1877f2; }
@media (max-width: 500px) { .plat-row__go { display: none; } }

/* ================================================= events showcase === */
.showcase { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); }
.showcase--flush { padding-bottom: 0; }
.showcase__head { margin-bottom: clamp(1.4rem, 4vw, 2.4rem); }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0.2rem; border-top: 1px solid var(--hair-soft); transition: padding-left 0.25s ease; }
.event-row:last-child { border-bottom: 1px solid var(--hair-soft); }
.event-row:hover { padding-left: 0.8rem; }
.event-row__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.005em; }
.event-row__meta { color: var(--text-soft); font-weight: 300; font-size: 0.9rem; white-space: nowrap; }

/* One titled gallery per event. The block owns the max-width + gutter; the
   inner .gallery resets to a bare grid so it lines up with the heading. */
.event-block { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.2rem, 6vw, 4rem) var(--gutter); border-top: 1px solid var(--hair-soft); }
.event-block:first-of-type { border-top: none; padding-top: clamp(1rem, 3vw, 2rem); }
.event-block__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.event-block__no { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--accent); flex-shrink: 0; }
.event-block .gallery { padding: 0; max-width: none; margin: 0; }

.gallery { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery__item { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item, .gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 5; }
}

/* --- Creative Arts: more expressive + animated --- */
/* A marquee ticker of the event names, outlined for an editorial feel. */
.marquee { overflow: hidden; border-block: 1px solid var(--hair-soft); padding: clamp(0.7rem, 2vw, 1.2rem) 0; margin: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.marquee__track { display: inline-flex; align-items: center; gap: 1.6rem; white-space: nowrap; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.7rem); text-transform: uppercase; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1px var(--text); }
.marquee__sep { color: var(--accent); font-size: clamp(0.9rem, 2.4vw, 1.5rem); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Big outlined event number. */
.event-block__head { align-items: flex-end; }
.event-block__no { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.82; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }

/* Gallery tiles: hover pop + a gentle staggered fade-in on scroll. */
.gallery__item { transition: opacity 0.6s ease, transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease; }
.gallery__item:hover { transform: scale(1.035); box-shadow: 0 22px 48px -24px rgb(26 22 19 / 0.55); position: relative; z-index: 2; transition-delay: 0s; }
.js .event-block .gallery__item { opacity: 0; }
.js .event-block.in .gallery__item { opacity: 1; }
.js .event-block.in .gallery__item:nth-child(2) { transition-delay: 0.12s; }
.js .event-block.in .gallery__item:nth-child(3) { transition-delay: 0.24s; }

/* Collapsible gallery: show the first 3, reveal the rest behind "View more". */
.gallery--collapsed .gallery__item:nth-child(n+4) { display: none; }
.gallery-more { display: flex; width: fit-content; margin: 1.6rem auto 0; }
.gallery-back { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(3.5rem, 8vw, 6rem); }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .js .event-block .gallery__item { opacity: 1; }
  .gallery__item { transition: none; }
}

/* ============================================================= footer = */
.foot { background: var(--bg-2); color: var(--text); padding: clamp(3.5rem, 7vw, 5rem) var(--gutter) 1.75rem; border-top: 1px solid var(--hair-soft); }
.foot__top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--hair-soft); }
.brand--foot { color: var(--text); margin-bottom: 1.1rem; }
.foot__blurb { color: var(--text-soft); font-weight: 300; font-size: 0.92rem; max-width: 22rem; margin: 0 0 0.9rem; }
.foot__ig { color: var(--accent); text-decoration: none; font-weight: 500; letter-spacing: 0.04em; }
.foot__col h4 { font-family: var(--body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1.2rem; }
.foot__col a:not(.btn) { display: block; color: var(--text-soft); text-decoration: none; padding: 0.35rem 0; font-size: 0.92rem; font-weight: 300; transition: color 0.2s ease; }
.foot__col a:not(.btn):hover { color: var(--text); }
.foot__col .btn { margin-top: 0.3rem; }
.foot__times { color: var(--text-soft); font-weight: 300; font-size: 0.9rem; margin: 0 0 1.1rem; line-height: 1.8; }
.foot__base { max-width: var(--maxw); margin: 1.75rem auto 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-faint); }

/* ========================================================= placeholders */
/* Dark, moody, low-key panels — reads like muted photography, not swatches. */
.ph {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #15151a 0%, #1d1c1e 55%, #262019 100%);
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: attr(data-label); position: relative; z-index: 2; max-width: 82%; text-align: center;
  font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(242 239 233 / 0.66); padding: 0.7rem 1.15rem;
  border: 1px solid rgb(242 239 233 / 0.18); border-radius: 999px;
}
.ph__grain, .ph::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  opacity: 0.08; z-index: 1; mix-blend-mode: overlay; pointer-events: none;
}
.ph--hero { background: radial-gradient(120% 90% at 70% 10%, #2a241d 0%, #141316 46%, #0c0c0e 100%); }
.ph--hero::after { font-size: 0.74rem; color: rgb(242 239 233 / 0.6); }
.ph--portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: linear-gradient(160deg, #15151a 0%, #241f1c 60%, #322a20 100%); }
.ph--video { background: linear-gradient(135deg, #111115 0%, #1d1b1d 55%, #2a2219 100%); }
.ph--map { background: linear-gradient(150deg, #121318 0%, #1e1e22 55%, #2b2a27 100%); }
.ph--band { background: radial-gradient(130% 120% at 50% 0%, #2c2318 0%, #16140f 45%, #0a0a0b 100%); }
.ph--face { background: linear-gradient(160deg, #18171b 0%, #272019 100%); }
.ph--b { background: linear-gradient(150deg, #16161c 0%, #211d26 55%, #2c2530 100%); }
.ph--c { background: linear-gradient(150deg, #121619 0%, #1a2321 55%, #22302b 100%); }
.ph--d { background: linear-gradient(150deg, #181712 0%, #25201780 55%, #2f271b 100%); }

/* A placeholder carrying a real photo: cover it, drop the "PLACEHOLDER" chip.
   Declared after the variants so its background-size wins the cascade. */
.ph--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ph--photo::after { display: none; }
.ph--photo::before, .ph--photo .ph__grain { opacity: 0.1; }

/* ====================================================== sub-pages ===== */
/* Inner pages reuse the home sections; a page-intro gives each one its title.
   The sticky nav reserves its own space, so content simply flows beneath it. */
.page-intro { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) clamp(1.25rem, 3vw, 2rem); }
.page-intro h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.8rem);
  line-height: 1.0; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 1.1rem;
}
.page-intro .lead { max-width: 40rem; }
.nav__links a[aria-current="page"]:not(.btn) { opacity: 1; color: var(--accent); }

/* A centred "coming soon" holding page for sections still in the works. */
.coming { max-width: 44rem; margin: 0 auto; padding: clamp(4.5rem, 14vh, 9rem) var(--gutter); min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.coming .eyebrow { margin-bottom: 1rem; }
.coming h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 1.8rem + 5vw, 5.5rem); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 1.2rem; }
.coming p { color: var(--text-soft); margin: 0 0 2rem; }

/* A simple three-up point list (what to expect / ways to give). */
.points { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.point { border-top: 2px solid var(--accent); padding-top: 1.2rem; }
.point h2 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 0.45rem; }
.point p { color: var(--text-soft); font-weight: 300; margin: 0; font-size: 0.95rem; }
@media (max-width: 760px) { .points { grid-template-columns: 1fr; gap: 1.3rem; } }

/* =========================================================== reveal === */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================== responsive */
@media (max-width: 980px) {
  .welcome, .locations, .connect { grid-template-columns: 1fr; }
  .watch__feature { grid-template-columns: 1fr; }
  .starts { grid-template-columns: repeat(2, 1fr); }
  .events__grid, .team__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .welcome__media { order: -1; }
}
/* A one-link nav needs no hamburger: keep it inline at every width. The
   compound selector outranks the `.nav__links` mobile rule below regardless of
   source order, so the link is never pushed off-screen. */
.nav__links--bare a { font-size: 0.82rem; }
@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links.nav__links--bare {
    position: static; transform: none; flex-direction: row; align-items: center;
    background: none; backdrop-filter: none; padding: 0; box-shadow: none; gap: 1.2rem;
  }
  .nav__links.nav__links--bare a { font-size: 0.82rem; padding: 0; }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    background: rgb(10 10 12 / 0.98); backdrop-filter: blur(16px);
    padding: 5.5rem var(--gutter) 2.5rem; transform: translateY(-100%); transition: transform 0.32s ease;
    box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.8);
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { font-size: 1.15rem; padding: 0.85rem 0; }
  /* The mobile menu panel is dark, so its links go light. */
  .nav__links a:not(.btn) { color: #f7f3ec; opacity: 0.9; }
  .nav__links a[aria-current="page"]:not(.btn) { color: #fff; opacity: 1; }
  .nav__cta { margin-top: 1rem; }
  .nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2) { opacity: 0; }
  .nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
@media (max-width: 560px) {
  .starts, .events__grid, .foot__top { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .foot__base { flex-direction: column; }
}