/* ============================================================================
   Chassidish Choir — base: reset, type, header, footer, shared components
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling; never fight it with CSS smooth */
}

body {
  margin: 0;
  background: var(--plum-950);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img { height: auto; }

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold-500); color: var(--plum-950); }

:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--gold-300);
  color: var(--plum-950);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.wrap--wide { max-width: 1600px; }
.wrap--narrow { max-width: 860px; }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg, var(--plum-950));
  color: var(--fg, var(--cream));
}

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

/* ---- Type helpers ------------------------------------------------------- */

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent, var(--gold-300));
  margin: 0 0 var(--sp-5);
}
.label::before {
  content: "";
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.h-display { font-size: var(--t-display); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-dim, rgba(245, 230, 192, 0.62));
}

.italic-gold {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent, var(--gold-300));
}

/* The wordmark's own gold sweep, applied to live text. */
.gold-text {
  background: var(--grad-gold);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.6rem + 0.5vw, 0.95rem);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-300);
}

/* The Yiddish line that belongs under the word — ארגינעל. היימיש. פראפעסיאנאל.
   It is a PICTURE, not text, on purpose: --font-ui is Jost, which carries no
   Hebrew glyphs at all, so setting it as text would silently substitute some
   other face right next to the logo it came from. This is lifted out of the
   client's own artwork (tools/rebuild-wordmark.mjs) and recoloured to
   --gold-300 — the exact colour the English line it replaces was using. */
.tagline-yi {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}
/* `.footer-brand img` is (0,1,1) and sets a 44px height for the wordmark, so
   this needs two classes to win. Without it the Yiddish line renders at the
   wordmark's height and blows out of the column. */
.footer-brand .tagline-yi {
  /* Here the logo is left-aligned, so "flush with the ח" means matching the
     wordmark's own width exactly — then both edges line up and the two read as
     one block. Tied to the same two numbers the wordmark is drawn from, so they
     cannot drift apart: 44px tall x the 3.241 aspect of wordmark.webp = 143px.
     The Yiddish letters stand ~11px there, the same ink height the English line
     had at 15.2px. */
  width: calc(var(--footer-mark-h) * var(--wordmark-aspect));
  height: auto;
  margin-bottom: 0;
}

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

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg, var(--cream));
  --btn-bd: var(--rule, rgba(184, 137, 47, 0.28));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 0.95em 2.1em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-gold);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--plum-950); border-color: transparent; }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn--gold {
  --btn-bg: transparent;
  --btn-fg: var(--plum-950);
  --btn-bd: transparent;
}
.btn--gold::after { transform: translateY(0); }
.btn--gold:hover { color: var(--plum-950); }
.btn--gold:hover::after { filter: brightness(1.12); }

.btn--ghost { --btn-bd: var(--rule-soft); }

.btn--lg { padding: 1.15em 2.6em; font-size: 0.92rem; }

/* Text link with a gold underline that draws in. */
.link-u {
  position: relative;
  display: inline-block;
  color: var(--accent, var(--gold-300));
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding-bottom: 0.3em;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.link-u:hover::after { transform: scaleX(1); }

/* ---- Ornament: the seal's scrollwork, reduced to a divider ---------------- */

.rule-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--rule);
}
.rule-orn::before,
.rule-orn::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.55;
}
.rule-orn svg { width: 26px; height: 26px; color: var(--gold-500); opacity: 0.8; }

/* ---- Header ------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(21, 12, 27, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition-property: background, backdrop-filter, border-color, transform; }

.header-inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* The open mobile menu is a child of the header, so it paints over its own
   siblings. Without these the overlay covers the X and the only way out is the
   Escape key — which a phone does not have. Keep the brand up there too, so the
   header still reads as a header while the menu is open. */
.brand { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; position: relative; z-index: 120; }
.brand img { height: 34px; width: auto; }
.brand .brand-seal { height: 38px; width: 38px; border-radius: 50%; }
@media (max-width: 640px) { .brand img { height: 28px; } .brand .brand-seal { height: 32px; width: 32px; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }

/* `:not(.btn)` is load-bearing, not tidiness. `.nav a` and `.nav a::after` are
   more specific than `.btn` and `.btn::after`, so without it the underline rule
   below wins and the gold "Book Us" pill renders as plain nav text with a
   1px line — no gold fill, unreadable dark-on-dark label. */
.nav a:not(.btn) {
  position: relative;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: rgba(245, 230, 192, 0.78);
  padding-block: 0.35em;
  transition: color var(--dur) var(--ease-out);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--gold-100); }
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a:not(.btn)[aria-current="page"] { color: var(--gold-300); }

.nav .btn { padding: 0.7em 1.5em; font-size: 0.75rem; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--gold-300);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
    background: rgba(21, 12, 27, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { font-size: 1.15rem; letter-spacing: 0.2em; }
  .nav .btn { margin-top: var(--sp-4); font-size: 0.85rem; }
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--plum-900);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-9) var(--sp-6);
  overflow: hidden;
}
/* The watermark bleeds off the right edge on purpose, and on a phone that bleed
   became 8px of real horizontal page scroll. `clip`, not `hidden`: hidden makes
   this a scroll container, which would change the containing block for any
   sticky element inside it. clip does not. */
.site-footer { overflow-x: clip; }
.site-footer .seal-watermark {
  position: absolute;
  right: -8%;
  bottom: -34%;
  width: min(560px, 62vw);
  opacity: 0.05;
  pointer-events: none;
  filter: grayscale(1) brightness(1.6);
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
/* ⭐ "In the bottom, you gotta split that into two columns."
   This used to collapse to a single column, which stacked the logo, Explore and
   Reach Us into one long ribbon — five link rows then three contact rows, all
   full width, for no reason. The brand keeps the full width; the two link
   columns sit side by side under it. */
@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7) var(--sp-5);
    align-items: start;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* --wordmark-aspect is the delivered width/height of wordmark.webp (1400/432).
   The Yiddish line under it is sized from these two so the pair stay locked
   together — see `.footer-brand .tagline-yi`. */
.footer-brand { --footer-mark-h: 44px; --wordmark-aspect: 3.241; }
.footer-brand img { height: var(--footer-mark-h); width: auto; margin-bottom: var(--sp-4); }
.footer-col h3 {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0 0 var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: rgba(245, 230, 192, 0.72); transition: color var(--dur) var(--ease-out); }
.footer-col a:hover { color: var(--gold-200); }

/* These stopped being decoration the moment they became real tel:, wa.me and
   mailto: links — a mis-tap now dials the wrong thing instead of doing nothing.
   At 23px tall with 13px of dead space between them they were a thumb's width
   of nothing; this fills the gap that already exists rather than adding height,
   so the footer does not grow. Touch only — on a mouse 23px is plenty. */
@media (hover: none) {
  .footer-col a {
    display: inline-block;
    padding-block: 0.42rem;
    margin-block: -0.42rem;
  }
}

.footer-bottom {
  position: relative;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--fg-faint);
}

/* ---- Cards: shared by Videos and Gallery -------------------------------- */

.grid-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
.grid-media--tight {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--plum-800);
  border: 1px solid var(--rule-soft);
  cursor: pointer;
  /* media.js renders every card as a <button>, and Chrome's default button
     padding is `1px 6px`. That left a 7px band down each side and 2px top and
     bottom where this element's own plum background showed BETWEEN the border
     and the picture — which is exactly "the picture is inserted inside the
     border, you can still see behind it".
     ⚠️ This reset used to live in pages.css scoped to the videos and gallery
     grids only, so the gallery page looked right and the home page did not. It
     belongs on the component, not on two of its containers. */
  padding: 0;
  text-align: left;
  font: inherit;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--rule);
  box-shadow: var(--shadow);
}
.card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--plum-800);
}
.card--portrait .card__frame { aspect-ratio: 9 / 16; }
.card--square .card__frame { aspect-ratio: 1 / 1; }

/* A vertical clip in a video grid: keep the 16:9 cell so the grid stays flush,
   letterbox the poster, and fill the sides with a blurred, darkened copy of
   itself. Letting it span two rows instead leaves a ~290px crater under the
   landscape card beside it; cropping it to 16:9 throws away most of the frame.
   media.js sets --thumb and picks this class over .card--portrait for videos. */
.card--letterbox .card__frame {
  aspect-ratio: 16 / 9;
  background: var(--plum-950);
}
.card--letterbox .card__frame::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.45) saturate(0.7);
  z-index: 0;
}
.card--letterbox .card__frame img {
  position: relative;
  z-index: 1;
  object-fit: contain;
}
/* Deliberately shallower than the normal card zoom, and excluded from the drift
   below. This poster is `contain`, not `cover` — it is already showing its whole
   frame, so every extra percent of scale crops the top and bottom off the
   picture instead of revealing more of it.
   `scale`, not `transform`, to match the rule it is overriding. */
.card--letterbox:hover .card__frame img { scale: 1.06; }
.card--letterbox .card__frame img { animation: none !important; }
/* The letterboxed poster is z-index 1, which would otherwise paint over the
   play button (it has no z-index of its own). */
.card--letterbox .card__play { z-index: 2; }
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `cover` crops around the CENTRE of the picture, and in a standing portrait
     the centre is somebody's waist — so heads and hats get sliced off the top.
     The client pointed at one: "he's out of the screen, you're gonna move a
     little bit down." Biasing the crop window upward moves the SUBJECT down in
     the frame and keeps the head in. 34% is a portrait-photography default, not
     a number picked for one picture. */
  object-position: center 34%;
  /* SLOW on the way in, quicker on the way out. 900ms/1.06 read as a twitch —
     it snapped to its end state and then sat still. At 2.6s the picture is still
     visibly creeping the whole time the mouse rests on it, which is the "really
     slowly … it should be a lot" he asked for. `linear` on purpose: an eased
     curve decelerates to a stop and kills exactly the effect we want. */
  /* SLOW on the way in, quicker on the way out. `linear` on purpose: an eased
     curve decelerates to a stop and kills exactly the effect we want.
     ⚠️ The hover zoom rides the INDEPENDENT `scale` property, not `transform`.
     The drift below is a keyframe animation on `transform`, and an animation
     beats any plain declaration for the same property — so a hover written as
     `transform: scale()` would simply never apply once the drift runs. The two
     are separate properties, and the browser multiplies them. */
  transition: scale 2600ms linear, filter var(--dur-slow) var(--ease-out);
  filter: saturate(0.94) brightness(0.94);
}
.card:hover .card__frame img,
.card:focus-visible .card__frame img {
  scale: 1.16;
  filter: saturate(1.04) brightness(1);
}
/* Leaving is a retreat, not a rewind — snapping back at 2.6s of linear looks
   broken when the pointer flicks across a grid. */
.card:not(:hover) .card__frame img { transition-duration: 700ms, var(--dur-slow); }

/* "The pictures should move by itself… not even if I hover over it."
   A long, shallow drift, staggered so the grid never pulses in unison.
   Transform-only, so it stays on the compositor and costs no layout.
   This used to be gated to `(hover: none)` — phones only — on the theory that
   it would fight the hover transition. It does not: the drift owns `transform`,
   hover owns `scale`, and they compose. Idle 1.12 x hover 1.16 = 1.30 at most. */
@media (prefers-reduced-motion: no-preference) {
  .card__frame img { animation: card-drift 22s var(--ease-in-out) infinite alternate; }
  .card:nth-child(3n + 2) .card__frame img { animation-delay: -7s; }
  .card:nth-child(3n + 3) .card__frame img { animation-delay: -14s; }
}
@keyframes card-drift {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(21, 12, 27, 0.05), rgba(21, 12, 27, 0.5));
}
.card__play span {
  width: clamp(52px, 5vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* No `backdrop-filter` here. It used to blur the video showing through the
     disc, and the client's read was blunt: "the center of the play, it's blurry.
     I don't like it." A frosted disc over a moving picture never resolves — the
     eye keeps trying to focus on something that is smeared on purpose. So the
     disc is opaque enough to read as a solid object instead. */
  border: 1px solid rgba(245, 230, 192, 0.72);
  background: rgba(21, 12, 27, 0.62);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.card__play svg { width: 34%; color: var(--cream); margin-left: 8%; }
.card:hover .card__play span {
  background: var(--gold-300);
  border-color: var(--gold-300);
  transform: scale(1.08);
}
.card:hover .card__play svg { color: var(--plum-950); }

.card__meta {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
  line-height: 1.15;
  color: var(--cream);
}
.card__sub {
  font-size: 0.74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-400);
  white-space: nowrap;
}

/* ---- States: empty / loading / error ------------------------------------ */

.state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--fg-dim);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
}
.state strong { display: block; color: var(--gold-300); font-weight: 500; margin-bottom: 0.4em; }

.skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--plum-800) 30%, var(--plum-700) 50%, var(--plum-800) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
  aspect-ratio: 16 / 9;
}
@keyframes shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

/* ---- Reveal on scroll (progressive: visible if JS never runs) ------------ */

.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 90ms; }
html.js .reveal[data-delay="2"] { transition-delay: 180ms; }
html.js .reveal[data-delay="3"] { transition-delay: 270ms; }
html.js .reveal[data-delay="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Video lightbox (shared by Home + Videos + Gallery) ------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11, 6, 15, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  position: relative;
  width: min(1180px, 100%);
  max-height: 86vh;
  display: grid;
  place-items: center;
  transform: scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox video,
.lightbox img {
  width: auto;
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: #000;
}
.lightbox__caption {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(21, 12, 27, 0.7);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--gold-300); color: var(--plum-950); }
.lightbox__close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); position: fixed; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }
.lightbox__nav svg { width: 18px; }

/* ---- Page hero used by the three inner pages ---------------------------- */

.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 3rem + 5vw, 8rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
  overflow: hidden;
  background: var(--plum-900);
  border-bottom: 1px solid var(--rule-soft);
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(184, 137, 47, 0.16), transparent 62%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--t-h1); }
.page-hero .lead { margin-top: var(--sp-4); }
/* The page hero already carries generous bottom padding; the section after it
   was stacking a full --section-y on top and leaving a dead band. */
.page-hero + .section { padding-top: clamp(2.25rem, 1.6rem + 2.2vw, 4rem); }

/* ---- Utilities ---------------------------------------------------------- */

.center { text-align: center; }
.center .label { justify-content: center; }
.center p { margin-inline: auto; }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.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;
}