/* ============================================================
   #10 — Iubire · Maria · 3 ani împreună
   Visual: hartie cald-poetic, accent trandafir, fire de cusut
   Concept metaphor: iubita · counter "dimineți"
   ============================================================ */

:root {
  --accent:       oklch(0.62 0.13 18);
  --accent-deep:  oklch(0.48 0.14 18);
  --accent-soft:  oklch(0.62 0.13 18 / 0.07);
  --accent-edge:  oklch(0.62 0.13 18 / 0.22);
  --rose-haze:    oklch(0.85 0.06 18 / 0.18);
}

body {
  background:
    radial-gradient(ellipse 70% 32% at 50% 0%, color-mix(in oklch, var(--accent) 4%, transparent), transparent 65%),
    radial-gradient(ellipse 50% 22% at 50% 100%, color-mix(in oklch, var(--accent) 3%, transparent), transparent 65%),
    var(--bg);
}

.iub-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  animation: slowDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes slowDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(-14px, 6px, 0) scale(1.015); opacity: 0.92; }
}

/* ============== 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.72;
}
.cover-rule svg { width: 120px; height: 28px; }

.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" 70;
  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, .wish {
  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);
  margin-bottom: var(--s-12);
}
.hero-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 70;
  color: var(--accent);
}

.hero-counter {
  display: flex;
  align-items: baseline;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
  padding: var(--s-5) 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.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;
  line-height: 1.35;
}

.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;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-small);
  color: var(--ink-3);
}
.hero-photo-meta .hpm-place {
  color: var(--accent-deep);
  font-variation-settings: "opsz" 14, "wght" 460;
  font-style: italic;
  letter-spacing: -0.005em;
}
.hpm-sep {
  width: 16px; height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

/* ============== 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;
}

/* horizontal rule with heart ornament */
.inline-rule {
  display: flex;
  justify-content: center;
  margin: var(--s-12) auto;
  color: var(--accent);
  opacity: 0.6;
  max-width: 720px;
  padding: 0 var(--gutter);
}
.inline-rule svg { width: 160px; height: 16px; }

/* ============== TIMELINE ============== */
.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: 52ch;
}

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

.letter-key {
  position: absolute;
  top: calc(var(--s-20) + var(--s-2));
  right: var(--gutter);
  width: 36px;
  height: 18px;
  color: var(--accent);
  opacity: 0.55;
}
.letter-key svg { width: 36px; height: 18px; }

.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-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);
  letter-spacing: 0.04em;
}
.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;
}

/* ============== WISH ============== */
.wish {
  max-width: 620px;
}
.wish-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-variation-settings: "opsz" 24, "wght" 380;
  line-height: 1.68;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  max-width: 52ch;
}
.wish-signoff {
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400;
  font-size: var(--type-small);
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ============== 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;
}

.knot {
  display: block;
  width: 100%;
  height: 110px;
  margin: 0 auto var(--s-10);
  color: var(--accent);
}

.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; }
  .hero-counter { padding: var(--s-4) 0; }
  .letter-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iub-bg { animation: none; }
}

/* ============================================================
   PHOTO IMG WIRING — real photos override the gradient fallback.
   Aspect-locked by parent (.photo--16-9 / .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);
  transition: transform 80ms linear, filter var(--d-mid) var(--ease-out), opacity var(--d-mid) var(--ease-out);
  will-change: transform;
  /* Iubire / hartie grade: very subtle rose-warm bias, slight desaturate
     so the photo feels of-a-piece with the cream paper. Less sepia than
     alpinist (which leans cold-mountain-archive). */
  filter:
    saturate(0.90)
    contrast(1.02)
    sepia(0.05)
    brightness(1.00);
}
/* Gradient fallback stays as a tinted scrim BEHIND the image. If image
   fails to load (404, offline), the gradient still shows — the photo
   plate still feels filled, never an empty box. */
.photo.has-img .photo-gradient {
  z-index: 0;
  opacity: 0.55;
}
/* Photo label rides on top of the image, with a light scrim for legibility. */
.photo .photo-label {
  z-index: 2;
  background:
    linear-gradient(
      to top,
      rgba(255, 254, 251, 0.82) 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.50);
}
/* Hero photo: a touch more pop. Memory plates: matter album feel. */
.hero-photo .photo-img { filter: saturate(0.94) contrast(1.04) sepia(0.03) brightness(1.01); }
.log-plate  .photo-img { filter: saturate(0.86) contrast(1.00) sepia(0.07) brightness(0.99); }

@media (prefers-reduced-motion: reduce) {
  .photo-img {
    transform: none !important;
    transition: none;
  }
}