/* Golden Connection — winter teaser ("Save the Dates", indoor season 2026–27).
   The homepage's own stylesheet for the season; site.css stays as it is because
   the legal pages still build on it. */
:root {
  --plum: #241219; --plum-deep: #1D1016; --night: #0F060B;
  --gold: #E8A94E; --gold-light: #F0C27A; --gold-pale: #F6D394;
  --pink: #DB809E; --rose: #C25E78; --coral: #E08A62;
  --cream: #F5E7D3; --sand-soft: #D5BCA1;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', sans-serif;
  /* one size drives the whole date column and the dial, so the two halves
     always scale together and the hero fits a laptop screen */
  --num: clamp(38px, 5.6vh, 60px);
  --dial: clamp(210px, 30vh, 320px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--plum); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100svh;
  font-family: var(--font-body); font-weight: 400; color: var(--cream);
  background: var(--plum);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* ---- the sky: the story's layers, fixed behind the page ---- */
.sky, .sky > * { position: fixed; inset: 0; pointer-events: none; }
.sky { z-index: 0; }
.sky-base {
  background:
    radial-gradient(ellipse 120% 120% at 50% 62%, rgba(232,169,78,.10), rgba(232,169,78,0) 68%),
    var(--plum);
}
.sky-wash {
  background: linear-gradient(180deg, rgba(232,169,78,.07) 0%, rgba(219,128,158,.09) 52%, rgba(194,94,120,.07) 100%);
}
.sky-glow {
  background:
    radial-gradient(ellipse 150% 60% at 50% 96%, rgba(219,128,158,.26), rgba(219,128,158,0) 64%),
    radial-gradient(ellipse 130% 50% at 50% 103%, rgba(194,94,120,.18), rgba(194,94,120,0) 100%);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .86; } }
#stars { width: 100%; height: 100%; display: block; }
/* the night lifts once, on arrival — the story's opening beat */
.sky-veil { background: var(--night); opacity: 0; animation: dawn 2.2s ease-out both; }
@keyframes dawn { from { opacity: .7; } to { opacity: 0; } }
.frame {
  position: fixed; inset: clamp(10px, 1.6vw, 22px); z-index: 3;
  border: 1px solid rgba(232,169,78,.20); pointer-events: none;
}

/* ---- hero ---- */
.hero {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(36px, 4.6vh, 64px) 24px clamp(30px, 4.4vh, 56px);
}
.lockup { width: clamp(180px, 24vh, 270px); }
.lockup svg { display: block; width: 100%; height: auto; overflow: visible; }
#markSun { animation: sunrise 1.9s cubic-bezier(.3,.7,.2,1) .25s both; }
@keyframes sunrise { from { transform: translateY(110px); } to { transform: none; } }

.rule {
  margin-top: clamp(16px, 2.6vh, 28px);
  width: min(200px, 50vw); height: 1.5px; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--rose) 18%, var(--gold) 50%, var(--rose) 82%, transparent);
}
.shine {
  background: linear-gradient(100deg, #F0C27A 0%, #E8A94E 38%, #FFF1D6 50%, #E8A94E 62%, #F0C27A 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 5s ease-in-out 1.6s infinite;
}
@keyframes sweep { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0% 0; } }
h1 {
  margin-top: clamp(18px, 3vh, 32px);
  font-weight: 400; font-size: clamp(25px, 4.4vh, 40px);
  letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; white-space: nowrap;
}
.sub {
  margin-top: .25em;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(23px, 3.9vh, 36px); line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.sub sup { font-size: .6em; vertical-align: .55em; line-height: 0; margin-left: .04em; }

/* ---- the two halves: dates | countdown ---- */
.halves {
  margin-top: clamp(18px, 2.8vh, 40px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: min(1040px, 100%);
}
.halves > .seam {
  width: 1px; align-self: stretch; margin: 12px 0;
  background: linear-gradient(180deg, transparent, rgba(194,94,120,.55) 22%, rgba(232,169,78,.6) 50%, rgba(194,94,120,.55) 78%, transparent);
}

/* dates — gradient serif numeral + italic cream month, as on the post */
.dates { list-style: none; justify-self: center; }
.dates li.date {
  position: relative;
  display: grid; align-items: baseline;
  grid-template-columns: calc(var(--num) * .9) calc(var(--num) * 1.08) calc(var(--num) * 2.75);
  column-gap: calc(var(--num) * .26);
  border-radius: 10px;
  transition: opacity .5s ease;
}
.wd {
  justify-self: end;
  font-size: calc(var(--num) * .25); letter-spacing: .24em; text-transform: uppercase; color: var(--rose);
  transition: color .4s ease;
}
.n {
  justify-self: end;
  font-family: var(--font-display); font-weight: 600; font-size: var(--num); line-height: 1.06;
  font-variant-numeric: lining-nums;
  background: linear-gradient(180deg, #F6D394 0%, #F0C27A 32%, #E08A62 68%, #C25E78 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .4s ease;
}
.mon {
  justify-self: start; text-align: left;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: calc(var(--num) * .6); line-height: 1.06; color: var(--cream);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.dates li.year {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: calc(var(--num) * .16) 0 calc(var(--num) * .06);
  font-weight: 300; font-size: calc(var(--num) * .24); letter-spacing: .44em; text-indent: .44em; color: var(--gold-light);
}
.dates li.year::before, .dates li.year::after { content: ""; height: 1px; width: 52px; }
.dates li.year::before { background: linear-gradient(90deg, transparent, var(--rose)); }
.dates li.year::after  { background: linear-gradient(90deg, var(--rose), transparent); }
/* the night the dial is counting to carries a small sun of its own */
.dates li.next::before {
  content: ""; position: absolute; left: calc(var(--num) * -.12); top: 54%;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #FFF1D6, var(--gold) 60%);
  box-shadow: 0 0 10px 2px rgba(240,194,122,.65), 0 0 26px 8px rgba(219,128,158,.28);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(.6); opacity: .55; } }
.dates li.next .wd { color: var(--gold-light); }
.dates li.past { opacity: .32; }
/* how far away each night is — whispered on hover */
.away {
  position: absolute; left: 100%; top: 50%; translate: 0 -40%;
  white-space: nowrap; pointer-events: none;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light);
  opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease;
}
@media (hover: hover) and (min-width: 900px) {
  .dates li.date:hover .n { filter: brightness(1.18) drop-shadow(0 0 14px rgba(240,194,122,.45)); }
  .dates li.date:hover .mon { transform: translateX(5px); }
  .dates li.date:hover .wd { color: var(--gold-light); }
  .dates li.date:hover .away { opacity: .9; transform: none; }
}

/* ---- countdown ---- */
.count { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.dial { position: relative; width: var(--dial); height: var(--dial); }
.dial::before {              /* the sun's afterglow, held inside the ring */
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(240,194,122,.20), rgba(219,128,158,.11) 46%, rgba(194,94,120,0) 72%);
  animation: breathe 6s ease-in-out infinite;
}
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial .tick { stroke: rgba(240,194,122,.17); stroke-width: 1.6; stroke-linecap: round; transition: stroke .6s ease; }
.dial .tick.five { stroke: rgba(240,194,122,.30); }
.dial .tick.head { transition: none; filter: drop-shadow(0 0 5px rgba(255,241,214,.95)); }
.dial .orbit { fill: none; stroke: rgba(232,169,78,.16); stroke-width: 1; }
.dial .spark { fill: #FFF1D6; filter: drop-shadow(0 0 6px #F0C27A) drop-shadow(0 0 14px rgba(219,128,158,.8)); transition: transform 1s linear; transform-origin: 150px 150px; }
.dial-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cap {
  font-size: clamp(10px, 1.45vh, 12px); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--gold-light);
}
.cap.rose { color: var(--pink); }
.days {
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(var(--dial) * .37); line-height: 1; margin: .04em 0 .02em;
  background: linear-gradient(180deg, #F6D394 0%, #F0C27A 32%, #E08A62 68%, #C25E78 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(240,194,122,.22));
}
.hms { margin-top: clamp(14px, 2.4vh, 24px); display: flex; align-items: stretch; }
.hms > div { width: max(calc(var(--dial) * .3), 84px); }
.hms > div + div { border-left: 1px solid rgba(194,94,120,.4); }
.hms b {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(var(--num) * .72); line-height: 1; color: var(--cream);
}
.hms span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--rose); }
.when {
  margin-top: clamp(12px, 2.2vh, 22px);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.9vh, 25px); font-variant-numeric: lining-nums; color: var(--cream);
}
.when i { font-style: normal; color: var(--gold-light); margin: 0 .35em; }

/* ---- teaser + the one action ---- */
.teaser {
  margin-top: clamp(18px, 3vh, 38px);
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(27px, 4.3vh, 42px); line-height: 1.2;
}
.teaser .dot { color: var(--gold-light); animation: simmer 2.4s ease-in-out infinite; }
.teaser .dot:nth-child(3) { animation-delay: .35s; } .teaser .dot:nth-child(4) { animation-delay: .7s; }
@keyframes simmer { 0%, 100% { opacity: 1; } 45% { opacity: .3; } }
.btn {
  position: relative; overflow: hidden;
  margin-top: clamp(16px, 2.8vh, 28px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 99px;
  border: 1px solid rgba(240,194,122,.55);
  background: rgba(36,18,25,.35); backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-pale);
  transition: border-color .4s ease, color .4s ease, box-shadow .5s ease, transform .3s ease;
}
.btn svg { flex: none; }
.btn::after {               /* the same light sweep the headline carries */
  content: ""; position: absolute; inset: 0; translate: -120% 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,241,214,.22) 50%, transparent 70%);
  transition: translate .9s ease;
}
.btn:hover { border-color: var(--gold-pale); color: #FFF1D6; box-shadow: 0 0 34px rgba(232,169,78,.24), inset 0 0 18px rgba(232,169,78,.10); transform: translateY(-1px); }
.btn:hover::after { translate: 120% 0; }

/* ---- arrival: everything lands in story order ---- */
.land { opacity: 0; animation: land .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * .14s + .2s); }
@keyframes land { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dates li { opacity: 0; animation: land .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * .11s + .9s); }
.dates li.past { animation-name: land-past; }
@keyframes land-past { from { opacity: 0; transform: translateY(16px); } to { opacity: .32; transform: none; } }

/* ---- footer — kept from the summer site: horizon, then one quiet line ---- */
.foot { position: relative; z-index: 2; text-align: center; padding: 0 24px calc(clamp(44px, 7vw, 64px) + env(safe-area-inset-bottom, 0px)); }
.foot-horizon { display: block; width: min(233px, 66vw); height: auto; margin: 0 auto clamp(30px, 5vw, 44px); opacity: .5; }
.foot-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
}
.foot-row a { color: rgba(213,188,161,.72); transition: color .3s ease; display: inline-flex; }
.foot-row a:hover { color: var(--gold-pale); }
.foot-row .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(213,188,161,.4); }

/* ---- one column on phones: countdown first, then the dates ---- */
@media (max-width: 899px) {
  :root { --num: clamp(44px, 13.5vw, 58px); --dial: clamp(220px, 66vw, 290px); }
  .hero { justify-content: flex-start; padding-top: clamp(44px, 8vh, 72px); }
  .lockup { width: clamp(180px, 52vw, 240px); }
  h1 { font-size: clamp(22px, 7vw, 34px); letter-spacing: .2em; text-indent: .2em; }
  .sub { font-size: clamp(22px, 6.6vw, 32px); }
  .halves { grid-template-columns: 1fr; row-gap: 34px; margin-top: 34px; }
  .halves > .seam { width: min(200px, 50vw); height: 1px; margin: 0 auto; align-self: auto;
    background: linear-gradient(90deg, transparent, rgba(194,94,120,.6) 22%, rgba(232,169,78,.65) 50%, rgba(194,94,120,.6) 78%, transparent); }
  .count { order: -2; } .halves > .seam { order: -1; }
  .teaser { font-size: clamp(25px, 7.4vw, 36px); margin-top: 38px; }
  .away { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .land, .dates li { opacity: 1; } .dates li.past { opacity: .32; }
  .shine { background-position: 0 0; }
}