/* ==========================================================================
   Ոսկե Հարսանիք — Golden Anniversary Invitation
   style.css
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base & typography
   3.  Utilities / ornaments / buttons
   4.  Opening animation (envelope)
   5.  Particles
   6.  Hero
   7.  Sections & invitation card
   8.  Details / countdown
   9.  Quote (parallax)
   10. Timeline
   11. Stats
   12. Photos & gallery
   13. Footer
   14. Lightbox
   15. Reveal animations
   16. Responsive
   17. Reduced motion / print
   ========================================================================== */

/* ============================ 1. DESIGN TOKENS ============================ */
:root {
  /* Palette — warm ivory paper, aged gold, deep espresso ink */
  --paper:        #fbf7ef;
  --paper-2:      #f6efe1;
  --cream:        #f2ead9;
  --ink:          #33291f;
  --ink-soft:     #5c4f40;
  --ink-mute:     #8a7a66;

  --gold:         #b8912f;
  --gold-deep:    #8f6c1c;
  --gold-light:   #e2c983;
  --gold-pale:    #efe0bb;
  --gold-glow:    rgba(184, 145, 47, .22);

  --line:         rgba(184, 145, 47, .32);
  --line-soft:    rgba(120, 96, 60, .16);

  --grad-gold: linear-gradient(135deg, #a97e22 0%, #e0c47e 28%, #b8912f 55%, #f0dfae 78%, #a97e22 100%);

  /* Type */
  --font-display: "Noto Serif Armenian", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Noto Sans Armenian", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num:     "Cormorant Garamond", "Noto Serif Armenian", Georgia, serif;

  /* Space & shape */
  --sp-section: clamp(4.5rem, 10vw, 8.5rem);
  --radius:     2px;
  --shadow-sm:  0 2px 10px rgba(70, 52, 26, .07);
  --shadow-md:  0 14px 40px -18px rgba(70, 52, 26, .35);
  --shadow-lg:  0 30px 70px -30px rgba(70, 52, 26, .45);

  --ease:       cubic-bezier(.22, .8, .28, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(184,145,47,.05), transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(184,145,47,.05), transparent 46%);
}

body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: .002em;
  margin: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-deep); text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--gold); }

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

::selection { background: var(--gold-pale); color: var(--ink); }

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================ 3. UTILITIES =============================== */
.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.container--narrow { width: min(760px, 100% - 2.5rem); }

.ornament { color: var(--gold); display: block; }
.ornament--divider  { width: min(240px, 70%); height: 24px; margin: 1.6rem auto; }
.ornament--sprig    { width: 40px; height: 40px; margin: 0 auto 1rem; }
.ornament--rings    { width: 62px; height: 42px; margin: 0 auto 1rem; }
.ornament--center   { margin-inline: auto; }

/* Buttons */
.btn {
  --btn-py: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) 2.2rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  line-height: 1.4;
  text-align: center;
}
.btn:active { transform: translateY(1px) scale(.995); }

.btn--gold {
  color: #fffdf7;
  text-shadow: 0 1px 2px rgba(90, 66, 12, .45);
  background: var(--grad-gold);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 12px 30px -14px rgba(143, 108, 28, .8);
  transition: background-position .8s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--gold:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(143,108,28,.9); }

/* ============================ 4. OPENING ANIMATION ======================= */
.opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4.5vw, 2.8rem);
  background:
    radial-gradient(ellipse at 50% 38%, #fdfaf2 0%, #f4ecdb 45%, #e9dcc2 100%);
  padding: 2rem 1.25rem;
  overflow: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}

.opening__glow {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 0;
  width: min(760px, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 62%);
  animation: pulseGlow 7s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.opening__text {
  text-align: center;
  position: relative;
  z-index: 3;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.opening__eyebrow {
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) .25s forwards;
}
.opening__title {
  font-size: clamp(2rem, 7vw, 3.4rem);
  color: var(--ink);
  margin-bottom: .6rem;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) .5s forwards;
}
.opening__sub {
  color: var(--ink-mute);
  font-size: clamp(.9rem, 2.4vw, 1.02rem);
  max-width: 32ch;
  margin: 0 auto 2.2rem;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) .75s forwards;
}
.opening__btn {
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 1.05s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Envelope */
.envelope {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(340px, 78vw);
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  opacity: 0;
  transform: translateY(30px) scale(.94);
  animation: fadeUp 1.3s var(--ease) .1s forwards;
  pointer-events: none;
}
.envelope__body { position: absolute; inset: 0; transform-style: preserve-3d; }

.envelope__back,
.envelope__front,
.envelope__flap { position: absolute; }

.envelope__back {
  inset: 0;
  background: linear-gradient(160deg, #f6ecd7, #e7d6b2);
  border: 1px solid rgba(184,145,47,.35);
  box-shadow: var(--shadow-lg);
}

.envelope__card {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 88%;
  bottom: 6%;
  background: linear-gradient(175deg, #fffdf7, #f8f1e2);
  border: 1px solid rgba(184,145,47,.3);
  box-shadow: 0 10px 28px -14px rgba(70,52,26,.5);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  transform: translateY(0);
  transition: transform 1.1s var(--ease) .45s;
}
.envelope__card-frame {
  position: absolute; inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  color: var(--gold);
  opacity: .55;
}
.envelope__card-eyebrow {
  font-family: var(--font-num);
  font-size: .9rem;
  letter-spacing: .3em;
  color: var(--gold-deep);
  margin: 0 0 .35rem;
}
.envelope__card-names {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.5vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 .3rem;
}
.envelope__card-note {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

.envelope__front {
  inset: 0;
  z-index: 3;
  background: linear-gradient(165deg, #f3e7cd, #e4d0a6);
  border: 1px solid rgba(184,145,47,.4);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 50% 58%);
  box-shadow: inset 0 8px 24px rgba(143,108,28,.12);
}

.envelope__flap {
  top: 0; left: 0;
  width: 100%; height: 58%;
  background: linear-gradient(180deg, #f7edd8, #e8d7ae);
  border: 1px solid rgba(184,145,47,.4);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 1s var(--ease), z-index 0s .5s;
  z-index: 4;
  backface-visibility: hidden;
}

.envelope__seal {
  position: absolute;
  left: 50%; top: 52%;
  translate: -50% -50%;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: grid;
  place-items: center;
  color: #fffdf5;
  font-family: var(--font-num);
  font-size: 1.5rem;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px -6px rgba(143,108,28,.9), inset 0 0 0 3px rgba(255,253,245,.35);
  z-index: 6;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

/* Opened state */
.opening.is-opening .envelope__flap { transform: rotateX(-172deg); z-index: 1; }
.opening.is-opening .envelope__seal { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(25deg); }
.opening.is-opening .envelope__card { transform: translateY(-118%) scale(1.06); }
.opening.is-opening .opening__text { opacity: 0; transform: translateY(24px); pointer-events: none; }
.opening.is-opening .envelope { animation: envelopeLift 1.5s var(--ease) .5s forwards; }

@keyframes envelopeLift {
  to { transform: translateY(-8%) scale(1.04); opacity: 0; }
}

.opening.is-closed { opacity: 0; visibility: hidden; }

/* ============================ 5. PARTICLES =============================== */
.particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.particles.is-on { opacity: 1; }

/* ============================ 6. HERO ==================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem 1.25rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, rgba(226,201,131,.30), transparent 68%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(184,145,47,.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 12%, rgba(184,145,47,.12), transparent 70%),
    linear-gradient(180deg, #fdfaf3 0%, #f7efdf 55%, #fbf7ef 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 3.2vmin;
  border: 1px solid rgba(184,145,47,.28);
  outline: 1px solid rgba(184,145,47,.13);
  outline-offset: 6px;
  pointer-events: none;
}

.hero__inner { max-width: 900px; position: relative; z-index: 2; }

.hero__eyebrow {
  font-size: clamp(.7rem, 2.4vw, .82rem);
  letter-spacing: .48em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
  padding-left: .48em;
}

.hero__names {
  font-size: clamp(2.6rem, 10.5vw, 6rem);
  line-height: 1.06;
  color: var(--ink);
  margin: .2rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .2em .35em;
}
.hero__name { display: inline-block; }
.hero__amp {
  font-family: var(--font-num);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  font-size: .72em;
  line-height: 1;
}

.hero__sub {
  font-size: clamp(1rem, 3vw, 1.28rem);
  color: var(--ink-soft);
  font-weight: 300;
  letter-spacing: .06em;
  margin-bottom: 1.6rem;
}

.hero__years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  font-family: var(--font-num);
  font-size: clamp(1.1rem, 3.6vw, 1.5rem);
  letter-spacing: .22em;
  color: var(--gold-deep);
  margin-bottom: 1.7rem;
}
.hero__years .ornament--rings { width: 54px; height: 36px; margin: 0; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15rem .6rem;
  font-size: clamp(.84rem, 2.6vw, .96rem);
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin-bottom: 2.4rem;
}
.hero__meta-sep { color: var(--gold); }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 2;
  opacity: 0;
  animation: fadeUp 1.4s var(--ease) 2.6s forwards;
}
.hero__scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--gold-deep);
  animation: scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { top: -55%; opacity: 0; }
  25%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* ============================ 7. SECTIONS ================================ */
.section {
  position: relative;
  padding: var(--sp-section) 0;
  z-index: 2;
}
.section--paper { background: var(--paper); }
.section--cream {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(226,201,131,.18), transparent 70%),
    var(--cream);
}
.section--gold {
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(226,201,131,.3), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.section__head { text-align: center; margin-bottom: clamp(2.6rem, 6vw, 4.2rem); }
.section__eyebrow {
  font-size: .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 .7rem;
  padding-left: .42em;
}
.section__title {
  font-size: clamp(1.55rem, 5.6vw, 3rem);
  color: var(--ink);
  margin-bottom: .8rem;
}
.section__lead {
  max-width: 54ch;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: clamp(.94rem, 2.4vw, 1.03rem);
}

/* Invitation card */
.invite-card {
  background: linear-gradient(175deg, #fffdf8, #faf4e8);
  border: 1px solid var(--line);
  padding: clamp(2rem, 6vw, 3.6rem);
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(.96rem, 2.5vw, 1.06rem);
  line-height: 2;
  box-shadow: var(--shadow-md);
  position: relative;
}
.invite-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(184,145,47,.2);
  pointer-events: none;
}
.invite-card__lead {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 3.4vw, 1.42rem);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1.4em;
}
.invite-card__sign {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  color: var(--gold-deep);
  margin-top: 1.8rem;
}

/* ============================ 8. DETAILS & COUNTDOWN ===================== */
.details {
  list-style: none;
  margin: clamp(2.4rem, 6vw, 3.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}
.detail {
  background: rgba(255, 253, 248, .72);
  border: 1px solid var(--line-soft);
  padding: 2rem 1.4rem 1.8rem;
  text-align: center;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.detail:hover {
  transform: translateY(-5px);
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.detail__icon { display: block; color: var(--gold); font-size: 1rem; margin-bottom: .7rem; }
.detail__title {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .8rem;
}
.detail__main {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: .35rem;
}
.detail__sub { font-size: .85rem; color: var(--ink-mute); margin: 0; }
.detail__link {
  display: inline-block;
  margin-top: .8rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

/* Countdown */
.countdown { text-align: center; margin-top: clamp(3rem, 7vw, 4.5rem); }
.countdown__label {
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
  padding-left: .34em;
}
.countdown__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.6rem, 3vw, 2rem);
}
.countdown__list li {
  min-width: 78px;
  padding: 1.05rem .7rem;
  border: 1px solid var(--line-soft);
  background: rgba(255,253,248,.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.countdown__num {
  font-family: var(--font-num);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.countdown__done {
  display: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  color: var(--gold-deep);
}
.countdown.is-done .countdown__list { display: none; }
.countdown.is-done .countdown__label { display: none; }
.countdown.is-done .countdown__done { display: block; }

/* ============================ 9. QUOTE (PARALLAX) ======================= */
.quote {
  position: relative;
  min-height: clamp(380px, 62vh, 560px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6rem) 1.25rem;
  z-index: 2;
}
.quote__bg {
  position: absolute;
  inset: -12% 0;
  /* REPLACE: images/quote.jpg — a gold gradient shows until the photo exists */
  background-image:
    linear-gradient(135deg, rgba(120,92,32,.9), rgba(60,46,28,.85)),
    url("../images/quote.jpg");
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.quote__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(20,14,6,.15), rgba(20,14,6,.62));
}
.quote__inner {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin: 0;
  color: #fdf8ea;
}
.quote__inner .ornament { color: var(--gold-light); }
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.2vw, 2rem);
  line-height: 1.6;
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.quote__cite {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ============================ 10. TIMELINE =============================== */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  counter-reset: tl;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
  translate: -50%;
}

.timeline__item {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.timeline__item:last-child { margin-bottom: 0; }

.timeline__media { grid-column: 1; }
.timeline__body  { grid-column: 3; padding-left: .5rem; }

.timeline__item:nth-child(even) .timeline__media { grid-column: 3; }
.timeline__item:nth-child(even) .timeline__body  { grid-column: 1; text-align: right; padding-left: 0; padding-right: .5rem; }

/* Node on the line */
.timeline__item::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 11px; height: 11px;
  rotate: 45deg;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--line);
  z-index: 2;
}

.timeline__year {
  display: inline-block;
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  color: var(--gold-deep);
  letter-spacing: .06em;
  margin-bottom: .3rem;
}
.timeline__title {
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color: var(--ink);
  margin-bottom: .6rem;
}
.timeline__body p {
  color: var(--ink-soft);
  font-size: clamp(.9rem, 2.4vw, .98rem);
  max-width: 42ch;
}
.timeline__item:nth-child(even) .timeline__body p { margin-left: auto; }

/* ============================ 11. STATS ================================== */
.stats {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 7vw, 4.5rem) 0;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stats__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat__num {
  font-family: var(--font-num);
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============================ 12. PHOTOS & GALLERY ======================= */
.photo-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #f5ecd8, #e8dbbe 55%, #f2e7cf);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 253, 245, .5);
  pointer-events: none;
  z-index: 4;
}

/* The real photo (hidden until it loads; removed by onerror if missing) */
.photo-frame .photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
  transition: opacity .9s var(--ease), transform 1.2s var(--ease);
}
.photo-frame .photo.is-loaded { opacity: 1; }
.photo-frame:hover .photo.is-loaded { transform: scale(1.05); }
.photo-frame:has(.photo.is-loaded) { cursor: zoom-in; }

/* Elegant placeholder shown underneath */
.photo-ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--gold-deep);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 2px, transparent 2px 9px);
}
.photo-ph__orn {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  color: var(--gold);
  opacity: .45;
}
.photo-ph__label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .1em;
}
.photo-ph__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  opacity: .8;
  padding: .2rem .5rem;
  border: 1px solid var(--line-soft);
  background: rgba(255,253,247,.6);
}

.photo-frame__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 2.4rem 1rem .95rem;
  font-size: .82rem;
  letter-spacing: .05em;
  color: #fffaf0;
  text-align: center;
  background: linear-gradient(to top, rgba(48,36,18,.72), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.photo-frame:hover .photo-frame__cap,
.photo-frame:focus-within .photo-frame__cap { opacity: 1; transform: none; }

/* Over a placeholder (no photo yet) the caption reads better in ink on paper */
.photo-frame:not(:has(.photo.is-loaded)) .photo-frame__cap {
  color: var(--ink-soft);
  background: linear-gradient(to top, rgba(246, 239, 225, .95) 35%, transparent);
}

/* Gallery grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 230px;
  gap: 1.1rem;
}
.gallery__item { aspect-ratio: auto; height: 100%; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

/* ============================ 13. FOOTER ================================= */
.footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(226,201,131,.22), transparent 70%),
    var(--paper-2);
  border-top: 1px solid var(--line-soft);
}
.footer__lead {
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
  padding-left: .38em;
}
.footer__names {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  color: var(--ink);
  margin-bottom: .4rem;
}
.footer__years {
  font-family: var(--font-num);
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--gold-deep);
  margin-bottom: 1.5rem;
}
.footer__note {
  max-width: 44ch;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.footer__fine {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: .75;
}

/* ============================ 14. LIGHTBOX =============================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 4rem 1.25rem;
  background: rgba(28, 21, 10, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__fig { margin: 0; text-align: center; max-height: 100%; }
.lightbox__fig img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid rgba(226,201,131,.35);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
  transform: scale(.96);
  transition: transform .5s var(--ease);
}
.lightbox.is-open .lightbox__fig img { transform: scale(1); }
.lightbox__fig figcaption {
  margin-top: 1.1rem;
  color: var(--gold-light);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lightbox__close {
  position: absolute;
  top: 1.1rem; right: 1.4rem;
  width: 46px; height: 46px;
  font-size: 2rem;
  line-height: 1;
  color: var(--gold-light);
  background: none;
  border: 1px solid rgba(226,201,131,.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover { background: rgba(226,201,131,.15); transform: rotate(90deg); }

/* ============================ 15. REVEAL ================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }
.reveal[data-delay="6"] { transition-delay: .62s; }
.reveal[data-delay="7"] { transition-delay: .76s; }

/* ============================ 16. RESPONSIVE ============================= */
@media (max-width: 980px) {
  .gallery { grid-auto-rows: 200px; }
}

@media (max-width: 860px) {
  /* Timeline → single column with left rail */
  .timeline::before { left: 15px; translate: none; }
  .timeline__item {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding-left: 46px;
  }
  .timeline__item::after { left: 15px; top: 22px; translate: -50% 0; }
  .timeline__media,
  .timeline__body,
  .timeline__item:nth-child(even) .timeline__media,
  .timeline__item:nth-child(even) .timeline__body {
    grid-column: 1;
    text-align: left;
    padding: 0;
  }
  .timeline__item:nth-child(even) .timeline__body p { margin-left: 0; }
  .timeline__body { order: -1; }
  .timeline__media { order: 0; }

  /* Gallery → 2 columns */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery__item--wide { grid-column: span 2; }

  .stats__list { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

@media (max-width: 560px) {
  body { line-height: 1.8; }
  .container, .container--narrow { width: min(100% - 2rem, 100%); }

  .hero { padding-top: 4.5rem; }
  .hero__bg::after { inset: 14px; outline-offset: 4px; }
  .hero__names { gap: .1em .28em; }
  .hero__years { gap: .8rem; }
  .hero__years .ornament--rings { width: 42px; height: 30px; }
  .hero__meta { max-width: 26ch; margin-inline: auto; line-height: 1.9; }
  .hero__btn { width: 100%; }

  .details { grid-template-columns: 1fr; }

  .countdown__list { gap: .5rem; }
  .countdown__list li { min-width: 0; flex: 1 1 0; padding: .85rem .35rem; }
  .countdown__unit { font-size: .55rem; letter-spacing: .12em; }

  .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery__item--tall,
  .gallery__item--wide { grid-row: span 1; grid-column: span 1; }

  /* Captions always visible on touch screens */
  .photo-frame__cap { opacity: 1; transform: none; }

  .lightbox { padding: 3.5rem .75rem; }
}

@media (hover: none) {
  .photo-frame__cap { opacity: 1; transform: none; }
}

/* ============================ 17. REDUCED MOTION / PRINT ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .particles { display: none; }
  .quote__bg { transform: none !important; }
}

@media print {
  .particles, .opening, .hero__scroll, .lightbox { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}