/* ============================================================
   Kateryna & Svein Erik · 23 May 2026
   A cinematic, scroll-revealed wedding invitation.
   ============================================================ */

:root {
  --ink:        #1d211d;
  --ink-soft:   #3a3f3a;
  --paper:      #f4ede1;
  --paper-2:    #ece2cf;
  --cream:      #faf6ee;
  --moss:       #4a5a3a;
  --moss-deep:  #2c3826;
  --stone:      #8a8174;
  --stone-2:    #5e564b;
  --gold:       #b58e4a;
  --gold-soft:  #d4b87b;
  --sea:        #4a6470;

  --serif:  "Cormorant Garamond", "Times New Roman", serif;
  --display:"Italiana", "Cormorant Garamond", serif;
  --sans:   "Inter", system-ui, sans-serif;

  --measure: 62ch;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.container {
  width: min(1100px, 92vw);
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .72rem;
  color: var(--stone-2);
  margin: 0 0 1.4rem;
}
.eyebrow.light { color: rgba(255,255,255,.78); }

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}
.h2.light { color: #fff; }

.link {
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .3s var(--ease);
}
.link:hover { color: var(--gold); }

/* =============================================================
   VEIL — lifts upward on scroll. Two sheer layers, scalloped hem.
   ============================================================= */
.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;
}
.veil--gone { display: none; }

.veil__layer {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  /* extends below viewport so the wavy hem sweeps in gracefully */
  height: 112vh;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* Auto-lift: veil rises on its own. One-shot keyframe animation
   straight on `transform` + `opacity` (no custom-property indirection). */
.veil.veil--auto .veil__layer--back {
  animation: veil-lift-back 3600ms cubic-bezier(.4, .05, .2, 1) forwards;
}
.veil.veil--auto .veil__layer--front {
  animation: veil-lift-front 3150ms cubic-bezier(.4, .05, .2, 1) forwards;
}
@keyframes veil-lift-back {
  0%   { transform: translate3d(0, 0, 0);       opacity: 1; }
  60%  {                                        opacity: .85; }
  100% { transform: translate3d(0, -130vh, 0);  opacity: 0; }
}
@keyframes veil-lift-front {
  0%   { transform: translate3d(0, 0, 0);       opacity: 1; }
  60%  {                                        opacity: .8; }
  100% { transform: translate3d(0, -140vh, 0);  opacity: 0; }
}

/* Back layer: denser, ivory, slower lift */
.veil__layer--back {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,250,240,.55), rgba(255,250,240,0) 70%),
    linear-gradient(180deg,
      rgba(252, 247, 237, 0.97) 0%,
      rgba(252, 247, 237, 0.95) 55%,
      rgba(252, 247, 237, 0.85) 88%,
      rgba(252, 247, 237, 0.55) 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 1000'><path fill='%23000' d='M0,0 H1200 V900 C1130,940 1070,860 1000,900 C930,940 870,860 800,900 C730,940 670,860 600,900 C530,940 470,860 400,900 C330,940 270,860 200,900 C130,940 70,860 0,900 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 1000'><path fill='%23000' d='M0,0 H1200 V900 C1130,940 1070,860 1000,900 C930,940 870,860 800,900 C730,940 670,860 600,900 C530,940 470,860 400,900 C330,940 270,860 200,900 C130,940 70,860 0,900 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Front layer: softer, lacier, lifts faster — like the front of a real veil */
.veil__layer--front {
  background:
    /* lace-like dot pattern */
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 1.5px) 0 0 / 6px 6px,
    /* fabric sheen */
    linear-gradient(180deg,
      rgba(255, 252, 246, 0.7) 0%,
      rgba(255, 252, 246, 0.55) 55%,
      rgba(255, 252, 246, 0.3) 90%,
      rgba(255, 252, 246, 0) 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 1000'><path fill='%23000' d='M0,0 H1200 V820 C1140,880 1080,780 1020,830 C960,880 900,780 840,830 C780,880 720,780 660,830 C600,880 540,780 480,830 C420,880 360,780 300,830 C240,880 180,780 120,830 C60,880 0,780 0,830 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 1000'><path fill='%23000' d='M0,0 H1200 V820 C1140,880 1080,780 1020,830 C960,880 900,780 840,830 C780,880 720,780 660,830 C600,880 540,780 480,830 C420,880 360,780 300,830 C240,880 180,780 120,830 C60,880 0,780 0,830 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: drop-shadow(0 10px 18px rgba(80,70,50,.08));
}

/* "Lift the veil ↑" hint */
.veil__hint {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--stone-2);
  opacity: 0;
  animation: hint-in 1.4s var(--ease) 1.2s forwards;
  transition: opacity .5s var(--ease);
}
.veil__hint svg {
  width: 16px; height: 26px;
  animation: hint-up 2.6s ease-in-out infinite;
}
@keyframes hint-in { to { opacity: .85; } }
@keyframes hint-up {
  0%,100% { transform: translateY(0); opacity: .8; }
  50%     { transform: translateY(-6px); opacity: 1; }
}

/* As soon as user begins scrolling, fade out the hint */
.veil.is-lifting .veil__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .veil__layer--front { animation: none; }
  .veil__hint svg { animation: none; }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease),
    transform 1.1s var(--ease),
    filter   1.1s var(--ease);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Hero reveals are quicker — the veil is the dramatic moment */
.hero .reveal {
  transform: translateY(14px);
  transition:
    opacity .55s var(--ease),
    transform .65s var(--ease),
    filter   .65s var(--ease);
  filter: blur(2px);
}
/* Specificity fix: ensure the hero's is-in state actually clears blur+offset.
   (Without this, `.hero .reveal` and `.reveal.is-in` have equal specificity
   but `.hero .reveal` comes later in the file and wins.) */
.hero .reveal.is-in {
  filter: blur(0);
  transform: none;
  opacity: 1;
}

/* ---------- Ornaments ---------- */
.ornament {
  display: block;
  width: clamp(120px, 18vw, 200px);
  height: auto;
  margin: -.4rem auto 1.2rem;
  color: var(--gold);
  opacity: .85;
}
.ornament--light { color: var(--gold-soft); opacity: .9; }

.hero__sprig {
  display: block;
  width: clamp(140px, 22vw, 230px);
  height: auto;
  margin: 0 auto 1.6rem;
  color: var(--gold-soft);
  opacity: .9;
}

.hero__wreath {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: min(900px, 88vw);
  max-height: 86vh;
  color: rgba(255, 240, 200, .35);
  pointer-events: none;
  z-index: 0;
  animation: wreath-breathe 14s ease-in-out infinite alternate;
}
@keyframes wreath-breathe {
  from { opacity: .85; transform: translate(-50%, -52%) scale(1); }
  to   { opacity: 1;   transform: translate(-50%, -52%) scale(1.015); }
}

.hero__content { position: relative; z-index: 1; }

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

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  z-index: 50;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}
.nav a {
  color: inherit;
  text-decoration: none;
  opacity: .55;
  transition: opacity .3s var(--ease), letter-spacing .3s var(--ease);
  pointer-events: auto;
}
.nav a:hover { opacity: 1; letter-spacing: .28em; }
@media (max-width: 720px) { .nav { display: none; } }

/* =============================================================
   HERO — Sola Ruinkyrken, drawn in stone & sky with pure CSS.
   ============================================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}


/* Real photo of Sola Ruinkyrkje as the hero background */
.hero__photo {
  position: absolute; inset: 0;
  z-index: -3;
  background: url("hero.jpg") center 38% / cover no-repeat;
  /* gentle Ken-Burns drift for life */
  animation: photo-drift 28s ease-in-out infinite alternate;
  transform-origin: center 40%;
  /* slight desaturation + warm cast for romantic feel */
  filter: saturate(.78) contrast(.95) brightness(.9);
}
@keyframes photo-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

/* Darkening + warm tint overlay so the title reads cleanly over the photo */
.hero__shade {
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* warm gold pool behind the title */
    radial-gradient(40% 28% at 50% 50%, rgba(120, 80, 40, .35) 0%, rgba(120, 80, 40, 0) 70%),
    /* mid-band darkening where the names sit */
    radial-gradient(70% 60% at 50% 55%, rgba(15, 12, 8, .65) 0%, rgba(15, 12, 8, .35) 50%, rgba(15, 12, 8, .15) 80%),
    /* overall darken */
    linear-gradient(180deg, rgba(15, 12, 8, .35) 0%, rgba(15, 12, 8, .55) 100%);
}

/* Soft film grain over the hero */
.hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero .eyebrow {
  color: rgba(255,255,255,.85);
  margin-bottom: 2.2rem;
}
.names {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .95;
  margin: 0;
  letter-spacing: .01em;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, 1.6rem);
  max-width: 1100px;
  color: #fff8ea; /* warm ivory rather than stark white */
}
.names .name {
  white-space: nowrap;
  /* Multi-layer halo: warm inner glow + dark soft drop for legibility */
  text-shadow:
    0 1px 0  rgba(40, 25, 15, .35),
    0 2px 14px rgba(15, 10,  5, .65),
    0 0 36px rgba(80, 55, 30, .55),
    0 0 90px rgba(20, 12,  6, .45);
}
.names .name:first-of-type { justify-self: end; }
.names .name:last-of-type  { justify-self: start; }
.amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
  font-size: .7em;
  transform: translateY(-.05em);
  text-shadow:
    0 2px 12px rgba(15, 10, 5, .55),
    0 0 28px rgba(212, 184, 123, .45);
}
@media (max-width: 640px) {
  .names {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
  .names .name:first-of-type,
  .names .name:last-of-type { justify-self: center; }
}

.hero__sub {
  margin: 1.6rem 0 1rem;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
}

.hero__meta {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .8rem;
  color: rgba(255,255,255,.9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: .5rem;
}
.hero__meta .dot { opacity: .6; }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.hero__scroll:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
.hero__scroll svg {
  width: 18px; height: 30px;
  animation: hint 2.6s ease-in-out infinite;
}
@keyframes hint {
  0%,100% { transform: translateY(0); opacity: .8; }
  50%     { transform: translateY(6px); opacity: 1; }
}

/* ---------- Countdown strip ---------- */
.strip {
  background: var(--paper);
  padding: 4rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.strip__inner {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.countdown > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem .5rem;
  border-left: 1px solid rgba(0,0,0,.1);
}
.countdown > div:first-child { border-left: none; }
.countdown .num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown .lbl {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .65rem;
  color: var(--stone-2);
}
.strip__note {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 1.5rem;
  font-size: 1.05rem;
}

/* ---------- Story ---------- */
.story {
  padding: clamp(6rem, 12vh, 10rem) 0;
  background: var(--cream);
  text-align: center;
}
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 920px;
  margin: 2rem auto 0;
  text-align: left;
}
.story__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: var(--measure);
}
@media (max-width: 720px) {
  .story__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- When (dark cinematic band) ---------- */
.when {
  position: relative;
  padding: clamp(7rem, 14vh, 12rem) 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.when__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 40% at 50% 40%, rgba(212,184,123,.18), transparent 70%),
    linear-gradient(180deg, #1f2620 0%, #14181a 100%);
}
.when__bg::after {
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.02) 60px 61px),
    repeating-linear-gradient(0deg,  transparent 0 60px, rgba(255,255,255,.02) 60px 61px);
  mask: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
}
.date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.date__day {
  font-family: var(--sans);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--gold-soft);
}
.date__big {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--display);
}
.date__num {
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: .9;
  justify-self: end;
}
.date__month {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--gold-soft);
  padding: 0 .6rem;
  border-left: 1px solid rgba(255,255,255,.3);
  border-right: 1px solid rgba(255,255,255,.3);
}
.date__year {
  font-size: clamp(2rem, 5vw, 4rem);
  justify-self: start;
  color: rgba(255,255,255,.85);
}
.date__time {
  font-family: var(--serif);
  font-style: italic;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
  font-size: 1.1rem;
}

/* ---------- Where ---------- */
.where {
  padding: clamp(6rem, 12vh, 10rem) 0;
  background: var(--paper);
  text-align: center;
}
.where__sub {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 1.15rem;
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Practical: map + directions, just above the footer ---------- */
.practical {
  padding: clamp(4rem, 8vh, 6rem) 0;
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,.06);
  text-align: center;
}
.practical .eyebrow {
  margin-bottom: 2rem;
}
.practical__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 20px 40px -25px rgba(0,0,0,.15);
}
.practical__map iframe {
  width: 100%; height: 100%;
  min-height: 320px;
  border: 0;
  filter: saturate(.85) contrast(.95);
}
.practical__info {
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: .95rem;
}
.practical__info p { margin: 0; color: var(--ink-soft); }
.practical__weather { color: var(--stone-2) !important; }
.practical__info .link { margin-top: .6rem; align-self: flex-start; }
@media (max-width: 820px) {
  .practical__grid { grid-template-columns: 1fr; }
  .practical__map iframe { min-height: 260px; }
}

/* ---------- Day / timeline ---------- */
.day {
  padding: clamp(6rem, 12vh, 10rem) 0;
  background: var(--cream);
  text-align: center;
}
.day__note {
  max-width: 56ch;
  margin: 1.5rem auto 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.7;
}
.day__note strong { color: var(--moss-deep); font-weight: 500; }

.timeline {
  list-style: none;
  padding: 0;
  margin: 3rem auto 0;
  max-width: 760px;
  text-align: left;
  position: relative;
}

.tag {
  display: inline-block;
  margin-left: .6rem;
  padding: .15rem .55rem;
  font-family: var(--sans);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--moss-deep);
  background: rgba(74,90,58,.12);
  border: 1px solid rgba(74,90,58,.25);
  border-radius: 999px;
  vertical-align: middle;
  transform: translateY(-2px);
}
.tag--private {
  color: #6a4a18;
  background: rgba(181,142,74,.14);
  border-color: rgba(181,142,74,.35);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 90px;
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--stone) 12%, var(--stone) 88%, transparent);
}
.timeline__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2rem;
  padding: 1.6rem 0;
  position: relative;
  align-items: baseline;
}
.timeline__time {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--moss);
  justify-self: end;
  line-height: 1.1;
  position: relative;
  /* Leave room so digits clear the bullet + its cream ring */
  padding-right: 24px;
}
/* Bullet hangs off the right edge of the time, centered on the digit line.
   It sits on the grid column boundary where the vertical line runs. */
.timeline__time::after {
  content: "";
  position: absolute;
  right: -4.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold-soft);
}
.timeline__item h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 .35rem;
  line-height: 1.15;
}
.timeline__item p {
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .timeline::before { left: 70px; }
  .timeline__item { grid-template-columns: 70px 1fr; gap: 1.2rem; }
  .timeline__item::before { left: 66px; }
  .timeline__time { font-size: 1.3rem; }
}

/* ---------- Details ---------- */
.details {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--paper-2);
}
.details__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.details h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 .5rem;
  color: var(--moss-deep);
}
.details p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 820px) { .details__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
@media (max-width: 480px) { .details__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot {
  background: #14181a;
  color: #b6b0a4;
  padding: 4rem 0 3rem;
  text-align: center;
}
.foot__mono {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gold-soft);
  letter-spacing: .15em;
  margin: 0 0 .6rem;
}
.foot__date {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: .72rem;
  margin: 0 0 1.2rem;
}
.foot__small {
  font-style: italic;
  margin: 0;
  opacity: .7;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__sky, .hero__scroll svg { animation: none; }
  html { scroll-behavior: auto; }
}