/* ==========================================================
   On Cloud Hynes — shared styles
   Every page loads this. Page-specific rules go in the page.
   ========================================================== */

:root{
  --ink:     #0B1B3A;   /* deep dusk navy */
  --deep:    #1B345F;   /* upper sky */
  --mid:     #4C79BE;   /* mid sky */
  --light:   #A8C8EC;   /* light sky */
  --cloud:   #EEF4FB;   /* page background */
  --horizon: #F6D8C2;   /* sunset horizon / accent */
  --paper:   #FBFDFF;

  --display: "Fraunces", Georgia, serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 1140px;

  --sky: linear-gradient(180deg,
    #071431 0%, var(--ink) 14%, var(--deep) 34%,
    var(--mid) 58%, var(--light) 80%, var(--horizon) 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cloud);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

.wrap{ max-width:var(--measure); margin:0 auto; padding-inline:var(--gutter); }

.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

/* ---------------- Site nav ---------------- */
.nav{
  position:absolute;
  top:0; left:0; right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem,3vh,1.75rem) var(--gutter);
  max-width:var(--measure);
  margin:0 auto;
}
.nav a{ text-decoration:none; }
.nav .mark{
  font-family:var(--display);
  font-variation-settings:"opsz" 20, "SOFT" 60, "WONK" 1;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.nav ul{
  display:flex; gap:clamp(.9rem,2.5vw,2rem);
  list-style:none; margin:0; padding:0;
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.nav li a{ opacity:.72; transition:opacity .2s ease; }
.nav li a:hover, .nav li a[aria-current="page"]{ opacity:1; }
.nav li a[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px; }
.nav .soon{ opacity:.4; cursor:default; }

/* On sky backgrounds */
.nav--sky{ color:var(--paper); }
/* On light backgrounds */
.nav--light{ color:var(--ink); position:static; }
.nav--light + *{ padding-top:0; }

@media (max-width:520px){
  .nav{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* ---------------- Sky header ---------------- */
.sky{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--gutter);
  padding-bottom:clamp(3rem, 8vh, 6rem);
  overflow:hidden;
  background:var(--sky);
  color:var(--paper);
}
.sky--full{ min-height:100svh; }
.sky--short{ min-height:58svh; padding-top:clamp(7rem,18vh,10rem); }

.clouds{ position:absolute; inset:0; pointer-events:none; }
.clouds i{
  position:absolute; display:block;
  background:radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.55), rgba(255,255,255,0) 68%);
  filter:blur(6px);
  will-change:transform;
}
.c1{ width:62vw; height:22vh; left:-30vw; top:26%; opacity:.30; animation:drift 118s linear infinite; }
.c2{ width:46vw; height:16vh; left:-25vw; top:47%; opacity:.38; animation:drift 84s linear infinite -30s; }
.c3{ width:78vw; height:26vh; left:-40vw; top:64%; opacity:.34; animation:drift 146s linear infinite -70s; }
.c4{ width:34vw; height:12vh; left:-20vw; top:14%; opacity:.18; animation:drift 168s linear infinite -20s; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(160vw); } }

.hero{ position:relative; max-width:var(--measure); width:100%; margin:0 auto; }

.hero .kicker{
  color:rgba(255,255,255,.92);
  margin:0 0 clamp(1.25rem,3.5vh,2rem);
  font-size:clamp(1rem, 2.2vw, 1.7rem);
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.3;
}

.wordmark{
  font-family:var(--display);
  font-variation-settings:"opsz" 144, "SOFT" 70, "WONK" 1;
  font-weight:380;
  font-size:clamp(3.2rem, 13.5vw, 11rem);
  line-height:.86;
  letter-spacing:-0.025em;
  margin:0;
}
.wordmark em{
  display:block; font-style:italic; font-weight:380;
  font-size:1em; letter-spacing:-0.025em; line-height:.86;
  padding-left:.02em; color:#fff;
}
.wordmark--sm{ font-size:clamp(2.4rem, 8vw, 5.5rem); }

.hero-foot{
  margin-top:clamp(1.75rem, 5vh, 3rem);
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex; flex-wrap:wrap;
  gap:.4rem clamp(1.25rem,4vw,3rem);
  align-items:baseline;
  color:rgba(255,255,255,.9);
}
.hero-foot p{ margin:0; }
.hero-foot .lede{ font-size:1.05rem; }

.scroll-hint{
  margin-top:clamp(1.5rem,4vh,2.5rem);
  display:inline-flex; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.72); text-decoration:none;
  font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.scroll-hint span{
  width:26px; height:1px; background:currentColor; display:block;
  transform-origin:left; transition:transform .3s ease;
}
.scroll-hint:hover span{ transform:scaleX(1.6); }

/* ---------------- Altitude rail ---------------- */
.rail{
  position:fixed; top:50%;
  right:clamp(1rem, 2.2vw, 2.25rem);
  transform:translateY(-50%);
  display:flex; flex-direction:column-reverse;
  align-items:flex-end; gap:.55rem;
  z-index:40; mix-blend-mode:difference;
}
.rail span{
  display:block; height:1px; width:14px;
  background:#8fa8c9; opacity:.45;
  transition:width .45s ease, opacity .45s ease, background .45s ease;
}
.rail span.lit{ width:30px; opacity:1; background:#fff; }
.rail span:last-child{ width:22px; }
.rail span:last-child.lit{ width:40px; }
.rail b{
  font-family:var(--body); font-weight:600; font-size:.6rem;
  letter-spacing:.18em; color:#8fa8c9; margin-top:.4rem;
}
@media (max-width:760px){ .rail{ display:none; } }

/* ---------------- Cards ---------------- */
.section{ padding-block:clamp(3.5rem,10vh,7rem) clamp(2rem,5vh,3rem); }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:1px;
  background:rgba(11,27,58,.14);
  border:1px solid rgba(11,27,58,.14);
  border-radius:2px;
  overflow:hidden;
}
.card{
  background:var(--paper);
  padding:clamp(1.6rem,3.4vw,2.4rem);
  display:flex; flex-direction:column; gap:.9rem;
}
.card .eyebrow{ color:var(--mid); }
.card h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 40, "SOFT" 40, "WONK" 0;
  font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.12; letter-spacing:-0.015em; margin:0;
}
.card p{ margin:0; color:rgba(11,27,58,.82); }
.card .note{
  font-size:.92rem; color:rgba(11,27,58,.6); font-style:italic;
  font-family:var(--display);
  font-variation-settings:"opsz" 14, "SOFT" 30, "WONK" 0;
}
.card a.map{
  align-self:flex-start; margin-top:.2rem;
  font-weight:600; font-size:.82rem; letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1.5px solid var(--horizon);
  padding-bottom:2px; transition:border-color .25s ease;
}
.card a.map:hover{ border-color:var(--mid); }

.swatches{ display:flex; gap:.45rem; margin-top:.15rem; }
.swatches i{
  width:26px; height:26px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(11,27,58,.12);
}

/* Linked cards (homepage) */
a.card{
  text-decoration:none;
  transition:background .25s ease, transform .25s ease;
}
a.card:hover{ background:#fff; transform:translateY(-2px); }
a.card .go{
  margin-top:auto; padding-top:.6rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--mid);
}
.card--soon{ background:rgba(251,253,255,.55); }
.card--soon h2, .card--soon p{ opacity:.55; }
.card--soon .go{ color:rgba(11,27,58,.35); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block;
  background:var(--ink); color:var(--paper);
  text-decoration:none; border:0; cursor:pointer;
  font-family:var(--body);
  padding:1rem 2.4rem; border-radius:999px;
  font-weight:600; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--mid); transform:translateY(-2px); }
.btn[disabled]{ opacity:.55; cursor:progress; transform:none; }

/* ---------------- Centered blocks ---------------- */
.centered{ text-align:center; padding-bottom:clamp(4rem,10vh,7rem); }
.centered h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 90, "SOFT" 70, "WONK" 1;
  font-weight:350;
  font-size:clamp(2rem,6vw,3.6rem);
  line-height:1; letter-spacing:-0.02em; margin:0 0 1rem;
}
.centered > p{ margin:0 auto 2rem; max-width:34rem; color:rgba(11,27,58,.72); }

/* ---------------- RSVP call-to-action ---------------- */
.rsvp-card{
  max-width:34rem;
  margin:0 auto;
  padding:clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem);
  background:var(--paper);
  border:1px solid rgba(11,27,58,.16);
  border-radius:2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.rsvp-card .eyebrow{ color:var(--mid); }
.rsvp-lede{
  margin:0;
  max-width:26rem;
  font-family:var(--display);
  font-variation-settings:"opsz" 18, "SOFT" 40, "WONK" 0;
  font-size:1.08rem;
  line-height:1.5;
  color:rgba(11,27,58,.78);
}
.rsvp-fine{
  margin:0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(11,27,58,.4);
}
.btn--lg{ padding:1.15rem 3.2rem; font-size:.85rem; margin-top:.35rem; }

/* ---------------- Timeline ---------------- */
.timeline{
  position:relative;
  max-width:46rem;
  margin:0 auto;
  padding-left:clamp(1.75rem, 5vw, 3rem);
}
/* The spine — a thin line you travel up, like the rail. */
.timeline::before{
  content:"";
  position:absolute;
  left:clamp(.4rem, 1.4vw, .75rem);
  top:.6rem;
  bottom:.6rem;
  width:1px;
  background:linear-gradient(180deg,
    rgba(11,27,58,.05) 0%,
    rgba(11,27,58,.22) 12%,
    rgba(11,27,58,.22) 88%,
    rgba(11,27,58,.05) 100%);
}

.moment{
  position:relative;
  padding-bottom:clamp(2.75rem, 7vh, 4.5rem);
}
.moment:last-child{ padding-bottom:0; }

.moment::before{
  content:"";
  position:absolute;
  left:calc(clamp(.4rem, 1.4vw, .75rem) - clamp(1.75rem, 5vw, 3rem) - 3.5px);
  top:.55rem;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--cloud);
  box-shadow:inset 0 0 0 1.5px var(--mid);
}
.moment--now::before{ background:var(--mid); box-shadow:0 0 0 4px rgba(76,121,190,.16); }

.moment .when{
  display:block;
  color:var(--mid);
  margin-bottom:.4rem;
}
.moment h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 40, "SOFT" 55, "WONK" 1;
  font-weight:400;
  font-size:clamp(1.5rem, 3.6vw, 2.1rem);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 .6rem;
}
.moment p{
  margin:0;
  max-width:34rem;
  color:rgba(11,27,58,.8);
}

.moment figure{
  margin:1.1rem 0 0;
  max-width:30rem;
}
.moment figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
  border:1px solid rgba(11,27,58,.12);
  background:rgba(11,27,58,.03);
}
.moment figcaption{
  margin-top:.5rem;
  font-size:.85rem;
  font-style:italic;
  font-family:var(--display);
  font-variation-settings:"opsz" 14, "SOFT" 30, "WONK" 0;
  color:rgba(11,27,58,.55);
}

/* Two photos side by side */
.moment .pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  max-width:34rem;
}
@media (max-width:560px){
  .moment .pair{ grid-template-columns:1fr; }
}

/* ---------------- Footer ---------------- */
footer{
  border-top:1px solid rgba(11,27,58,.14);
  padding:2rem var(--gutter) 3rem;
  text-align:center;
  color:rgba(11,27,58,.5);
  font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500;
}
footer nav{ margin-bottom:.9rem; display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; }
footer nav a{ text-decoration:none; opacity:.8; }
footer nav a:hover{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .clouds i{ animation:none; }
  *{ transition-duration:.01ms !important; }
}