/* ============================================================
   #02 — Alpinist · Sorin · Nuntă de aur, 50 de ani
   Visual: jurnal de munte, curbe de nivel, trasee numerotate
   Accent: verde pădure adâncă
   ============================================================ */

:root {
  --accent:       oklch(0.40 0.07 145);
  --accent-deep:  oklch(0.30 0.08 145);
  --accent-soft:  oklch(0.40 0.07 145 / 0.07);
  --accent-edge:  oklch(0.40 0.07 145 / 0.22);
}

body {
  background: var(--bg);
}

.contour-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.9;
}

/* ============== ENVELOPE ============== */
.envelope { background: var(--bg); }
.envelope-inner { max-width: 480px; text-align: center; }

.cover-rule {
  margin: 0 auto var(--s-10);
  color: var(--accent);
  opacity: 0.7;
}
.cover-rule svg { width: 120px; height: 24px; }

.env-imprint {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.env-title {
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 40;
  color: var(--ink);
}
.env-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 60;
  color: var(--accent);
}

.env-couple {
  margin-top: var(--s-10);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--accent-edge);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  font-variation-settings: "opsz" 24, "wght" 380;
  color: var(--accent-deep);
}
.env-couple-amp {
  color: var(--accent);
  font-style: normal;
  font-size: 1rem;
}

.env-date {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
}

.env-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-14);
  padding: var(--s-3) var(--s-7);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background var(--d-fast) var(--ease-out), gap var(--d-fast) var(--ease-out);
}
.env-cta:hover { background: var(--accent); gap: var(--s-4); }
.env-cta svg { width: 14px; height: 14px; }

/* ============== SECTIONS ============== */
.hero, .about, .timeline, .letter, .memories, .callout {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-20) var(--gutter);
}

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 500;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-8);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ============== HERO ============== */
.hero { padding-top: var(--s-24); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 50;
  color: var(--ink);
}
.hero-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 70;
  color: var(--accent);
}

.route-meta {
  margin: var(--s-12) 0;
  padding: var(--s-5) 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.rm-cell { display: flex; flex-direction: column; gap: var(--s-1); }
.rm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.rm-val {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 24, "wght" 400;
  font-size: 1.375rem;
  color: var(--accent-deep);
}

.hero-counter {
  display: flex;
  align-items: baseline;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}
.counter-num {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 40;
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 0.92;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.counter-unit {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  color: var(--ink-3);
  font-variation-settings: "opsz" 14, "wght" 400;
  max-width: 16ch;
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--ink-2);
  font-variation-settings: "opsz" 20, "wght" 400;
  line-height: 1.55;
  margin-bottom: var(--s-14);
  max-width: 30ch;
}

.hero-photo { margin: 0; }
.hero-photo .photo { border: var(--hair); }
.hero-photo-meta {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.hero-photo-meta strong { color: var(--accent-deep); font-weight: 500; }
.hpm-name {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  color: var(--ink-3);
  letter-spacing: -0.005em;
}

/* ============== ABOUT ============== */
.chip-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-8); }
.chip {
  padding: var(--s-1) var(--s-5);
  border: 1px solid var(--accent-edge);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  font-variation-settings: "opsz" 14, "wght" 400;
  color: var(--accent-deep);
  background: var(--accent-soft);
}

.about-text {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-variation-settings: "opsz" 24, "wght" 380;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  max-width: 54ch;
}

/* ============== TIMELINE — route list ============== */
.route-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.route-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-10) 0;
  border-bottom: 1px dotted rgba(27,24,20,0.16);
}
.route-entry:last-child { border-bottom: none; }

.route-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 40;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 0.92;
  color: var(--accent);
  letter-spacing: -0.02em;
  align-self: start;
}

.route-meta-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-1);
}
.route-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.route-sep {
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}
.route-alt {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400;
  font-size: var(--type-small);
  color: var(--ink-3);
}

.route-text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 20, "wght" 380;
  line-height: 1.62;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  max-width: 50ch;
}

/* ============== LETTER ============== */
.letter { max-width: 620px; }

.letter-body {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-variation-settings: "opsz" 24, "wght" 380;
  line-height: var(--leading-letter);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
}
.letter-para { margin-bottom: var(--s-7); }
.letter-para em { font-style: italic; color: var(--ink-2); }

.dropcap {
  font-style: italic;
  font-size: 4.6em;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 50;
  margin: 0.06em 0.12em -0.04em -0.04em;
}

.letter-signoff {
  margin-top: var(--s-12);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 20, "wght" 400;
  font-size: 1.0625rem;
  color: var(--ink-2);
  text-align: right;
  line-height: 1.5;
}
.signoff-name {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.875rem;
  color: var(--accent);
}

/* ============== MEMORIES — log plates ============== */
.log-grid {
  display: grid;
  gap: var(--s-12);
}
@media (min-width: 720px) {
  .log-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
}

.log-plate {
  margin: 0;
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(27,24,20,0.10);
  box-shadow: 0 1px 0 rgba(27,24,20,0.04), 0 14px 32px -16px rgba(27,24,20,0.16);
}
.log-plate .photo { background: var(--bg-deep); }

.log-cap {
  padding: var(--s-4) var(--s-2) var(--s-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.log-cap-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.log-cap-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  font-variation-settings: "opsz" 14, "wght" 400;
  color: var(--ink-2);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* ============== CALLOUT ============== */
.callout-frame {
  text-align: center;
  padding: var(--s-12) var(--s-4);
  border-top: 1px solid var(--gold-edge);
  border-bottom: 1px solid var(--gold-edge);
}
.callout-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-micro);
  color: var(--gold);
  margin-bottom: var(--s-7);
}
.callout-text {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 28, "wght" 360, "SOFT" 60;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  max-width: 38rem;
  margin: 0 auto;
}

/* ============== FOOTER ============== */
.footer {
  position: relative;
  padding: var(--s-20) var(--gutter) var(--s-10);
  margin-top: var(--s-16);
  text-align: center;
  background:
    linear-gradient(to bottom, transparent, color-mix(in oklch, var(--accent) 6%, var(--bg-warm)) 90%);
  overflow: hidden;
}

.ridge {
  display: block;
  width: 100%;
  height: 110px;
  margin: 0 auto var(--s-10);
  color: var(--accent);
}
.ridge-line {
  animation: ridgeDrift 16s ease-in-out infinite;
  will-change: transform;
}
.ridge-line--back {
  animation-duration: 22s;
  animation-direction: alternate;
}
@keyframes ridgeDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-30px); }
}

.footer-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 20, "wght" 400;
  font-size: 1.0625rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: var(--s-4);
}
.footer-signature em {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.75rem;
  color: var(--accent);
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: var(--s-12);
}
.footer-credit {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: var(--tracking-wide);
  padding-top: var(--s-5);
  border-top: var(--hair);
  max-width: 200px;
  margin: 0 auto;
}
.footer-credit a {
  color: var(--ink-3);
  border-bottom: 1px dotted var(--ink-4);
}

@media (max-width: 640px) {
  :root { --gutter: 1.25rem; }
  .route-meta { grid-template-columns: 1fr 1fr; }
  .route-meta .rm-cell:nth-child(3) { grid-column: 1 / -1; }
  .hero-photo-meta .hpm-name { margin-left: 0; }
}

/* ============================================================
   PHOTO IMG WIRING — real photos override the gradient fallback.
   Aspect-locked by parent (.photo--3-2 / .photo--4-5), image
   fills via object-fit:cover. NEVER distorts.
   ============================================================ */
.photo { isolation: isolate; }
.photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 1;
  transform: translateZ(0) scale(1.06);  /* tiny over-scale so parallax can move without showing edges */
  transition: transform 80ms linear, filter var(--d-mid) var(--ease-out), opacity var(--d-mid) var(--ease-out);
  will-change: transform;
  /* Subtle warm grade + slight desaturation — makes Pexels photos read as
     "of-a-piece" with the cream paper background, not stock-magazine vivid. */
  filter:
    saturate(0.88)
    contrast(1.02)
    sepia(0.06)
    brightness(0.99);
}
/* The gradient stays as a tinted scrim BEHIND the image. If the image
   ever fails to load (404, offline), the gradient still shows — the
   photo-paper plate still feels filled, never an empty box. */
.photo.has-img .photo-gradient {
  z-index: 0;
  opacity: 0.6;
}
/* Photo label rides on top of the image. Slightly darker scrim behind
   the filename so it reads on any light/dark photo region. */
.photo .photo-label {
  z-index: 2;
  background:
    linear-gradient(
      to top,
      rgba(255, 254, 251, 0.78) 0%,
      rgba(255, 254, 251, 0.0) 100%
    );
  padding: var(--s-6) var(--s-3) var(--s-2) var(--s-6);
  bottom: 0;
  right: 0;
  color: rgba(27, 24, 20, 0.55);
}
/* Hero photo gets a tiny more pop. Memory plates stay matte (album feel). */
.hero-photo .photo-img { filter: saturate(0.92) contrast(1.04) sepia(0.04) brightness(1.00); }
.log-plate .photo-img  { filter: saturate(0.82) contrast(1.00) sepia(0.10) brightness(0.97); }

/* Reduced motion → no parallax scale, full clarity. */
@media (prefers-reduced-motion: reduce) {
  .photo-img {
    transform: none !important;
    transition: none;
  }
}