/* Yakir Maccabi 2026 — Prototype 1 visual system
   Modern heritage / editorial tribute, not archive or dashboard. */

:root {
  --cream: #FAF6EE;
  --cream-deep: #F1E9D8;
  --navy: #101F3B;
  --navy-2: #17284A;
  --gold: #AD8A4C;
  --gold-soft: #CDB27C;
  --line: rgba(16, 31, 59, 0.14);
  --line-soft: rgba(16, 31, 59, 0.08);
  --on-navy: #F6F1E4;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-heading: var(--font-serif);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 2px;
  --motion: 220ms ease;
}

[dir="rtl"] {
  --font-heading: var(--font-sans);
}

* { box-sizing: border-box; }

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus {
  inset-inline-start: var(--space-2);
  top: var(--space-2);
}

/* ---------- Utility bar ---------- */

.utility-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.utility-bar__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: 0.35rem;
}

.utility-bar__home {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--navy);
}

/* Small, direct brand marks beside the wordmark — no badge, ring, border or
   panel behind them (that treatment is reserved for the hero). Neither
   source logo is already the site's exact navy (MWU-01.png is a lighter
   royal blue; the Yakir Maccabi PNG also tops out around 80% opacity), so
   each is shown via a presentation-layer-only derived copy — same shape,
   recolored to the site's navy and normalized to full opacity — saved
   alongside the existing rasterized logo in assets/. The originals in
   LOGOS/ and CONTENT are never touched or replaced; a CSS mask approach was
   tried first but was dropped because raster mask-image defaults to
   luminance shading in this engine, which made a near-black fill render
   almost invisible — plain images sidestep that entirely.

   Optical size balancing: the Yakir Maccabi source canvas had ~17% built-in
   transparent padding around its ring (content filled only ~83% of the
   canvas) while the MWU source had almost none (~99.8% fill) — at identical
   box/canvas dimensions this made the Yakir mark look visibly smaller even
   though both were technically the same width/height. Both derived PNGs are
   now cropped tight to their actual ink bounding box (small uniform
   breathing-room padding only), so both fill their box to within ~2.5% of
   each other — the two can now share one box size and both look the same
   size to the eye, not just on paper. */
.utility-bar__brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.utility-bar__brand-logo {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.utility-bar__brand-logo--yakir {
  background-image: url("../assets/yakir-maccabi-logo-navy.png");
}
.utility-bar__brand-logo--mwu {
  background-image: url("../assets/mwu-logo-navy.png");
}

.utility-bar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.nav-link {
  text-decoration: none;
  color: var(--navy);
  font-size: 1rem;
  padding: var(--space-1) var(--space-1);
  border-bottom: 2px solid transparent;
}
.nav-link:hover,
.nav-link:focus-visible {
  border-bottom-color: var(--gold);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem;
  background: #fff;
}

.lang-switch button {
  font: inherit;
  font-size: 0.95rem;
  border: none;
  background: transparent;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--navy);
  min-height: 44px;
}

.lang-switch button[aria-current="true"] {
  background: var(--navy);
  color: var(--on-navy);
}

/* ---------- Hero (full-bleed ceremonial cover — no covering panel) ---------- */

.hero {
  position: relative;
  height: min(92vh, 860px);
  min-height: 640px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Restrained bottom-only gradient — never a filled box, never over the
   honorees. It exists purely to lift text legibility in the empty stage
   floor at the very bottom of the photograph. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 16, 32, 0.72) 0%, rgba(8, 16, 32, 0.4) 16%, rgba(8, 16, 32, 0.1) 30%, rgba(8, 16, 32, 0) 42%);
}

.hero__frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(212, 186, 140, 0.55);
  pointer-events: none;
}

/* Bottom composition band: CTA toward the left, the title/tagline/logo
   signature centered — a row, not a box, so the photograph stays fully
   visible behind and around every element. */
.hero__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4) var(--space-4) var(--space-4);
}

.hero__bottom-row {
  width: 100%;
  max-width: 78rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero__cta-slot {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.hero__identity {
  flex: 0 1 auto;
  text-align: center;
  color: var(--on-navy);
}

.hero__spacer {
  flex: 1 1 0;
}

.hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: var(--space-1);
}
.hero__ornament-line {
  width: 30px;
  height: 1px;
  background: rgba(212, 186, 140, 0.85);
}
.hero__ornament-dot {
  width: 5px;
  height: 5px;
  background: var(--gold-soft);
  transform: rotate(45deg);
  flex: none;
}

.hero__eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  margin: 0;
  color: var(--on-navy);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 6px 26px rgba(0, 0, 0, 0.55);
}

.hero__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  color: var(--cream);
  margin: var(--space-1) 0 0;
  padding-top: var(--space-1);
  border-top: 2px solid var(--gold-soft);
  display: inline-block;
  width: fit-content;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Two logos, side by side, equal size, on their own small medallions — this
   is what makes both marks legible directly against the photograph without
   any large panel behind them. */
.hero__logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.hero__logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  flex: none;
}
.hero__logo-badge img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.hero__logo-row-divider {
  width: 1px;
  height: 40px;
  background: rgba(212, 186, 140, 0.7);
  flex: none;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-navy);
  padding: 0.9rem 1.8rem;
  border: 1.5px solid var(--gold-soft);
  border-radius: var(--radius);
  min-height: 48px;
  background: rgba(8, 16, 32, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero__cta:hover,
.hero__cta:focus-visible {
  background: rgba(205, 178, 124, 0.28);
  color: var(--on-navy);
  border-color: var(--cream);
}

/* Secondary to .hero__cta in visual weight (bordered, not solid-filled) but
   still a clearly defined, generously-sized button in its own right — an
   older audience needs to recognize it as clickable at a glance, not just
   as decorative text. */
.hero__watch-film {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  background: rgba(8, 16, 32, 0.55);
  border: 1.5px solid var(--gold-soft);
  border-radius: 6px;
  padding: 0.8rem 1.5rem;
  min-height: 54px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-navy);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.hero__watch-film:hover,
.hero__watch-film:focus-visible {
  background: rgba(205, 178, 124, 0.26);
  border-color: var(--cream);
  transform: translateY(-1px);
}
.hero__watch-film:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}
.hero__watch-film__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--navy);
  flex: none;
  transition: background var(--motion);
}
.hero__watch-film:hover .hero__watch-film__icon,
.hero__watch-film:focus-visible .hero__watch-film__icon {
  background: var(--cream);
}
.hero__watch-film__icon svg { display: block; }

/* ---------- Honorees section ---------- */

.honorees {
  padding: var(--space-6) var(--space-4);
}

.honorees__header {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto var(--space-5);
}

.honorees__kicker {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.honorees__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 0;
}

/* Mobile-only hint (see the 620px breakpoint below) explaining that each
   card opens the full story on tap — not needed on desktop/tablet, where
   hover already implies the cards are clickable. */
.honorees__tap-hint {
  display: none;
}

/* Desktop/tablet: the whole card is already a link and hover/cursor makes
   that obvious, so no extra CTA is shown — overridden to a visible bar only
   at the 620px breakpoint below, where there's no hover to hint at
   tappability and the audience skews 70+, so the affordance needs to be
   explicit rather than implied. */
.honoree-card__cta {
  display: none;
}

.honorees__grid {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
}

@media (max-width: 900px) {
  .honorees__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
}
@media (max-width: 620px) {
  .honorees__grid { grid-template-columns: 1fr; max-width: 26rem; }

  .honorees__tap-hint {
    display: block;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--navy-2);
    margin: var(--space-2) 0 0;
  }

  .honoree-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: var(--space-3);
    padding: 0.95rem 1.2rem;
    min-height: 52px;
    background: var(--navy);
    color: var(--on-navy);
    border: 1.5px solid var(--gold-soft);
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    text-align: center;
    transition: background var(--motion), border-color var(--motion);
  }
  .honoree-card__cta::after { content: "\a0\203A"; }
  [dir="rtl"] .honoree-card__cta::after { content: "\a0\2039"; }
  .honoree-card:hover .honoree-card__cta,
  .honoree-card:focus-visible .honoree-card__cta {
    background: var(--gold-soft);
    color: var(--navy);
    border-color: var(--navy);
  }
}

.honoree-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
}

.honoree-card__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy);
  margin-bottom: var(--space-3);
}

.honoree-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion);
}

.honoree-card:hover .honoree-card__frame img,
.honoree-card:focus-visible .honoree-card__frame img {
  transform: scale(1.03);
}

.honoree-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: var(--navy);
  text-align: start;
}

.honoree-card__affiliation {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy-2);
  margin: 0 0 0.85rem;
  text-align: start;
}

.honoree-card__statement {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--gold);
  color: var(--navy-2);
  text-align: start;
}

.honoree-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--cream-deep);
  padding: var(--space-4) var(--space-3);
}

.site-footer__inner {
  max-width: 76rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer__logos {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__logos img { height: 36px; width: auto; }
.wordmark-small {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-2);
  font-size: 0.95rem;
}

.site-footer__nav {
  display: flex;
  gap: var(--space-3);
}

/* ---------- Honoree tribute page ---------- */

/* Persistent but understated back control near the top of the page. */
.tribute-back-top {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) 0;
}
.tribute-back-top a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--navy-2);
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}
.tribute-back-top a::before { content: "\2039\a0"; }
[dir="rtl"] .tribute-back-top a::before { content: "\203A\a0"; }
.tribute-back-top a:hover,
.tribute-back-top a:focus-visible {
  border-bottom-color: var(--gold);
}

/* No-crop presentation: ONE consistent container size/proportion for every
   honoree (portrait or landscape source alike) so the hero, and everything
   positioned below it, feels identical across all 11 pages. object-fit:
   contain guarantees nobody in the frame — honoree, presenters, family,
   colleagues — is ever cropped, regardless of source orientation. */
.tribute-hero {
  position: relative;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: min(74vh, 660px);
}

/* Thin ceremonial frame line, echoing the homepage hero's identity. */
.tribute-hero__frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 186, 140, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* Restrained hexagram watermark that only becomes visible in whatever navy
   margin the photo's own orientation leaves around it — it sits behind the
   photo, so it never competes with or covers the honoree. Turns the empty
   side space intentional rather than unfinished, without cropping anyone
   or adding a busy/scattered decorative effect. */
.tribute-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 145%;
  height: 145%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}
.tribute-hero__watermark polygon {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.1;
}

.tribute-hero img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.tribute-identity {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-4);
}

.tribute-identity__kicker {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.tribute-identity__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 var(--space-2);
}

.tribute-identity__affiliation {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-2);
  margin: 0;
}

.tribute-statement {
  max-width: 42rem;
  margin: var(--space-4) auto var(--space-3);
  padding: 0 var(--space-3);
  text-align: center;
}
.tribute-statement blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.5;
  color: var(--navy-2);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: var(--space-3) 0;
}

/* Reusable quiet ceremonial divider — echoes the hero ornament motif to tie
   the tribute page's rhythm back to the homepage identity. Replaces the
   previous "Original language:" caption; the source language is instead
   carried as a real lang="" attribute on the statement/biography for
   assistive tech and browser translation tools, not shown as visible text. */
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto var(--space-5);
}
.section-ornament span {
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.section-ornament i {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.tribute-bio {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-5);
}

.tribute-bio__label {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  text-align: start;
}

.tribute-bio p {
  font-size: 1.14rem;
  line-height: 1.9;
  margin: 0 0 1.6em;
  color: var(--navy);
  text-align: start;
}

/* Bold subheadings that exist in the source (Orly Froman's "Maccabi legacy",
   "Leadership in MWU"; David Korenfeld's and Eyal Tiberger's inline labels
   like "Lifelong dedication to Maccabi"). Never invented for anyone else. */
.tribute-bio__subheading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--navy);
  margin: 2em 0 0.75em;
  text-align: start;
}
.tribute-bio__subheading:first-child { margin-top: 0; }

/* ---------- Milestones (collapsed by default) ---------- */

.milestones {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-5);
}

.milestones-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.4rem;
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: start;
}
.milestones-toggle:hover,
.milestones-toggle:focus-visible {
  border-color: var(--gold);
}

.milestones-toggle__icon {
  flex: none;
  color: var(--gold);
  font-size: 1rem;
  transition: transform var(--motion);
}
.milestones-toggle[aria-expanded="true"] .milestones-toggle__icon {
  transform: rotate(180deg);
}

.milestones-panel {
  padding-top: var(--space-4);
}
.milestones-panel[hidden] { display: none; }

.milestones-panel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  text-align: start;
}

.milestones-section { margin-bottom: var(--space-5); }
.milestones-section:last-child { margin-bottom: 0; }

.milestones-section__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 var(--space-3);
  text-align: start;
}

.milestones-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The spine sits on the item's own inline-start border; the date/text
   content is pushed a full --space-5 away from it (was --space-2 — the
   main spacing complaint), giving the date column real breathing room
   from the line in both RTL and LTR rather than crowding against it. */
.milestones-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 0.85rem;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--line);
  position: relative;
}
.milestones-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-soft);
}

.milestones-item__date {
  flex: 0 0 auto;
  min-width: 7.5em;
  font-weight: 600;
  color: var(--navy-2);
  font-size: 0.92rem;
}

.milestones-item__text {
  flex: 1 1 auto;
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: start;
}

.milestones-item--no-date .milestones-item__text {
  font-weight: 500;
}

@media (max-width: 560px) {
  .milestones-item {
    flex-direction: column;
    gap: 0.3rem;
    padding-inline-start: var(--space-4);
  }
  .milestones-item__date { min-width: 0; }
}

/* ---------- Ceremony Photos CTA (on the tribute page) ---------- */

.ceremony-cta-row {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
  display: flex;
  justify-content: center;
}

.ceremony-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--navy);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.1rem 2.4rem;
  min-height: 56px;
  transition: background var(--motion), color var(--motion);
}
.ceremony-cta:hover,
.ceremony-cta:focus-visible {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.ceremony-cta__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
}

.ceremony-cta__count {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---------- Personal video preview (on the tribute page, upper content area) ----------
   A poster-style facade: YouTube thumbnail + large Play control. No iframe
   exists until the poster itself is clicked/activated, at which point the
   existing shared video modal (video.js) opens exactly as it does from the
   homepage — same lazy-load, same close/Escape/backdrop/focus-return
   behavior, just a richer, more obviously-clickable trigger. */

.video-preview {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-4);
}

.video-preview__label {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}

.video-preview__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  background: var(--navy);
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.video-preview__poster:hover,
.video-preview__poster:focus-visible {
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 31, 59, 0.22);
}
.video-preview__poster:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
}

.video-preview__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-preview__thumb.is-hidden { display: none; }

.video-preview__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 16, 32, 0.12), rgba(8, 16, 32, 0.38));
  transition: background var(--motion);
}
.video-preview__poster:hover .video-preview__scrim,
.video-preview__poster:focus-visible .video-preview__scrim {
  background: rgba(8, 16, 32, 0.48);
}

.video-preview__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(16, 31, 59, 0.72);
  border: 2px solid var(--gold-soft);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: background var(--motion), transform var(--motion), border-color var(--motion), color var(--motion);
}
.video-preview__poster:hover .video-preview__play,
.video-preview__poster:focus-visible .video-preview__play {
  background: var(--gold-soft);
  color: var(--navy);
  border-color: var(--cream);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-preview__play svg { display: block; }

@media (max-width: 620px) {
  .video-preview__play { width: 64px; height: 64px; }
  .video-preview__play svg { width: 26px; height: 26px; }
}

/* ---------- Ceremony Photos gallery page ---------- */

.gallery-header {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-4);
  text-align: center;
}

.gallery-header__back {
  display: inline-block;
  margin-bottom: var(--space-3);
  text-decoration: none;
  color: var(--navy-2);
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}
.gallery-header__back::before { content: "\2039\a0"; }
[dir="rtl"] .gallery-header__back::before { content: "\203A\a0"; }
.gallery-header__back:hover,
.gallery-header__back:focus-visible {
  border-bottom-color: var(--gold);
}

.gallery-header__kicker {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.gallery-header__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin: 0 0 var(--space-1);
}

.gallery-header__count {
  font-size: 0.95rem;
  color: var(--navy-2);
  margin: 0;
}

/* Uniform mosaic: every cell is the same shape, so the grid stays calm and
   balanced regardless of how many photos (29–68) or what mix of portrait
   and landscape source photos a given honoree has. */
.gallery-mosaic {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

.gallery-mosaic__item {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--navy);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery-mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  transition: transform var(--motion);
}
.gallery-mosaic__item:hover img,
.gallery-mosaic__item:focus-visible img {
  transform: scale(1.045);
}
.gallery-mosaic__item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .gallery-mosaic { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-1); }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 28, 0.95);
}

.lightbox__stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
}

.lightbox__img {
  display: block;
  max-width: 88vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__counter {
  color: var(--cream);
  font-size: 0.95rem;
  opacity: 0.85;
}

.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 186, 140, 0.6);
  background: rgba(16, 31, 59, 0.6);
  color: var(--on-navy);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--gold-soft);
  color: var(--navy);
  border-color: var(--gold-soft);
}

/* Fixed physical positions on purpose: the glyphs themselves point left/right,
   so the buttons stay put regardless of interface language — moving "prev"
   to the opposite side in RTL would leave a left-pointing arrow on the right. */
.lightbox__close { top: var(--space-3); right: var(--space-3); font-size: 1.6rem; }
.lightbox__prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-3); top: 50%; transform: translateY(-50%); }

@media (max-width: 620px) {
  .lightbox__btn { width: 46px; height: 46px; }
  .lightbox__prev { left: var(--space-1); }
  .lightbox__next { right: var(--space-1); }
  .lightbox__img { max-height: 70vh; }
}

/* ---------- Video modal ---------- */
/* Distinct z-index from .lightbox (200): the two are never open at the same
   time, but keeping them separate avoids any theoretical stacking conflict. */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
}
.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 28, 0.95);
}

.video-modal__stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.video-modal__frame {
  position: relative;
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 186, 140, 0.6);
  background: rgba(16, 31, 59, 0.6);
  color: var(--on-navy);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: var(--gold-soft);
  color: var(--navy);
  border-color: var(--gold-soft);
}

@media (max-width: 620px) {
  .video-modal__close { width: 46px; height: 46px; font-size: 1.4rem; top: var(--space-1); right: var(--space-1); }
  .video-modal__stage { padding: var(--space-2); }
}

.tribute-nav {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tribute-nav__side {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: var(--navy);
  min-height: 44px;
  justify-content: center;
}
.tribute-nav__side small {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.tribute-nav__side span {
  font-family: var(--font-heading);
  font-size: 1.1rem;
}
.tribute-nav__side--next { text-align: end; }

.tribute-nav__back {
  text-decoration: none;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
.tribute-nav__back:hover,
.tribute-nav__back:focus-visible {
  background: var(--navy);
  color: var(--on-navy);
}

/* ---------- Responsive: hero + general mobile ---------- */

@media (max-width: 860px) {
  .hero { height: min(94vh, 760px); min-height: 580px; }
  .hero__overlay { padding: var(--space-3) var(--space-2) var(--space-4); }
  /* Below desktop width there isn't room for a left CTA beside a large
     centered title without crowding — the row stacks and the CTA moves
     under the identity block instead, both centered. */
  .hero__bottom-row { flex-direction: column; align-items: center; gap: var(--space-2); }
  .hero__cta-slot { align-items: center; order: 2; }
  .hero__spacer { display: none; }
  .hero__logo-badge { width: 62px; height: 62px; }
  .hero__logo-row-divider { height: 34px; }
  .honorees { padding: var(--space-5) var(--space-2); }
  .utility-bar { flex-wrap: wrap; }
  .tribute-hero { height: min(64vh, 560px); }
}

@media (max-width: 480px) {
  html { font-size: 17px; }
  .hero { height: min(96vh, 680px); min-height: 560px; }
  .hero__logo-badge { width: 54px; height: 54px; }
  .hero__logo-row-divider { height: 30px; }
  .hero__frame { inset: 10px; }
  .tribute-hero { height: min(58vh, 480px); }
  .tribute-hero__frame { inset: 10px; }
}

/* ---------- Mobile-only homepage hero recomposition ---------- */
/* The group photo is wide (11 honorees, ~3:2) and cannot be cover-cropped
   into a tall portrait box on narrow screens without cutting people off at
   the edges. Below this breakpoint the photo drops out of the absolute-fill
   "background" role entirely and renders at its natural width-100% ratio —
   nobody cropped — with the title/tagline/CTA moved into a solid navy panel
   directly beneath it, so the two read as one continuous composition rather
   than text overlaid on people. Desktop/tablet (above this breakpoint) keep
   the original full-bleed cover treatment untouched.               */
@media (max-width: 640px) {
  .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .hero__bg {
    position: static;
    line-height: 0;
  }
  .hero__bg img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  /* Thin gradient blend where the photograph meets the panel, standing in
     for the old over-photo legibility scrim (no longer needed — the text
     now sits on solid navy, not on the image). */
  .hero__scrim {
    position: static;
    height: 18px;
    background: linear-gradient(to bottom, rgba(8, 16, 32, 0), var(--navy));
  }
  .hero__frame { display: none; }
  .hero__overlay {
    position: static;
    height: auto;
    background: var(--navy);
    border-top: 1px solid var(--gold-soft);
    padding: var(--space-4) var(--space-2) var(--space-4);
  }
  .hero__eyebrow,
  .hero__title,
  .hero__tagline {
    text-shadow: none;
  }
}