/* 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: #1D1016; --ground: #150B0F; --night: #0B0508;
  --gold: #E8A94E; --gold-light: #F0C27A; --gold-pale: #F6D394;
  /* accents follow the live site: gold over terracotta, no pink */
  --terra: #C4603A; --terra-light: #DD8259;
  --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.3vh, 60px);
  --dial: clamp(210px, 27vh, 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: linear-gradient(180deg, var(--plum) 0%, var(--ground) 100%);
  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: one clean, deep plum — no washes over it — with the stars on
   top and a trace of sunset only at the very foot of the page ---- */
body { position: relative; }
.sky, .sky > * { position: absolute; inset: 0; pointer-events: none; }
.sky { overflow: hidden; }
.sky { z-index: 0; }
.sky-glow {       /* the last of the sunset, low at the very foot of the page */
  background: radial-gradient(ellipse 120% 30% at 50% 104%, rgba(196,96,58,.20), rgba(196,96,58,0) 100%);
}
/* the stars are one screen of sky that stays put while the page scrolls, like
   the sun and the dusk. Sized by the large viewport so a phone's address bar
   hiding does not resize it. (It used to be as tall as the page and redrawn
   whole every frame: several screens of pixels, too much for a phone.) */
.sky > #stars { position: fixed; inset: 0 0 auto 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
/* the poster's hairline frame, around the whole page (not the window), so
   nothing ever scrolls across it */
.frame {
  position: absolute; inset: clamp(10px, 1.6vw, 22px); z-index: 3;
  border: 1px solid rgba(232,169,78,.20); pointer-events: none;
}

/* ---- language switch: four quiet codes in the top corner, inside the frame;
   the current one is gold ---- */
.lang {
  position: absolute; z-index: 4;
  top: calc(clamp(10px, 1.6vw, 22px) + 8px); right: calc(clamp(10px, 1.6vw, 22px) + 8px);
  display: flex; gap: 2px;
}
.lang button {
  min-width: 40px; padding: 10px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-indent: .15em;
  color: rgba(213,188,161,.62); transition: color .3s ease, background .3s ease;
}
.lang button:hover { color: var(--gold-pale); background: rgba(232,169,78,.08); }
.lang button[aria-pressed="true"] { color: var(--gold-light); background: rgba(232,169,78,.12); }

/* ---- 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; }
/* the tagline, where the lockup's own used to sit: the same tracked caps
   between two fading hairlines, set as live text and a step larger so it reads */
.tagline {
  margin-top: clamp(8px, 1.3vh, 13px);
  display: flex; align-items: center; justify-content: center; gap: .9em;
  font-size: clamp(11.5px, 1.75vh, 14px); font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; color: var(--terra-light);
}
.tagline span { margin-right: -.34em; }      /* the last letter's tracking would push the text off-centre */
.tagline::before, .tagline::after { content: ""; flex: 1; height: 1px; min-width: 14px; }
.tagline::before { background: linear-gradient(90deg, transparent, var(--terra)); }
.tagline::after  { background: linear-gradient(90deg, var(--terra), transparent); }
#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;
  background: linear-gradient(90deg, transparent, var(--terra) 18%, var(--gold) 50%, var(--terra) 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; } }
/* the headline is a button: same look, and it answers a hover or a press */
h1 button { font: inherit; letter-spacing: inherit; text-indent: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; transition: filter .3s ease; }
h1 button:hover { filter: brightness(1.18); }
h1 button:active { filter: brightness(.92); }
h1 {
  margin-top: clamp(18px, 3vh, 32px);
  font-weight: 500; font-size: clamp(27px, 4.9vh, 46px);
  letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; white-space: nowrap;
}
.sub {
  /* supporting line: clearly under the headline, about 0.6 of its size */
  margin-top: .5em;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.9vh, 27px); line-height: 1.2;
  font-variant-numeric: lining-nums;
}
.sub .nb { white-space: nowrap; }
.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(196,96,58,.8) 22%, rgba(232,169,78,.8) 50%, rgba(196,96,58,.8) 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;
}
.wd {
  justify-self: end;
  font-size: calc(var(--num) * .25); letter-spacing: .24em; text-transform: uppercase; color: var(--terra-light);
  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 30%, #E8A94E 58%, #C4603A 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);
  }
.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(--terra)); }
.dates li.year::after  { background: linear-gradient(90deg, var(--terra), transparent); }
/* the night the dial is counting to: its weekday turns gold */
.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 .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 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 .orbit { fill: none; stroke: rgba(232,169,78,.16); stroke-width: 1; }
.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(--terra-light); }
.days {
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(var(--dial) * .4); line-height: 1; margin: 0 0 .04em;
  background: linear-gradient(180deg, #F6D394 0%, #F0C27A 30%, #E8A94E 58%, #C4603A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hms { margin-top: clamp(14px, 2.4vh, 24px); display: flex; align-items: stretch; }
.hms > div { width: max(calc(var(--dial) * .34), 94px); }
.hms > div + div { border-left: 1px solid rgba(196,96,58,.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) * .56); 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(--terra-light); }
.when {
  margin-top: clamp(12px, 2.2vh, 22px);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(17px, 2.3vh, 21px); font-variant-numeric: lining-nums; color: var(--cream);
}
.when i { font-style: normal; color: var(--gold-light); margin: 0 .35em; }

/* ---- the actions ---- */
.btn {
  position: relative; overflow: hidden;
  margin-top: clamp(16px, 2.8vh, 28px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 99px;
  border: 1px solid rgba(240,194,122,.55);
  background: transparent;
  font-size: 12px; font-weight: 500; letter-spacing: .18em; 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:hover { border-color: var(--gold-pale); color: #FFF1D6; }
/* the two actions: Instagram leads (that is where the news lands), the
   calendar is the quiet second */
.actions { margin-top: clamp(26px, 4.4vh, 48px); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.actions .btn { margin-top: 0; }
.btn-gold { background: linear-gradient(180deg, #F6D394, #E8A94E); border-color: transparent; color: #2A1410; font-weight: 600; }
.btn-gold:hover { background: linear-gradient(180deg, #FBE3B4, #F0C27A); border-color: transparent; color: #2A1410; }

/* ---- arrival: everything lands in story order ---- */
/* the rows are visible by themselves and the entrance only fills backwards:
   once it has played, no animation is left holding a row's opacity. A row
   that depends on a finished animation to be seen can drop out on phones. */
.land { animation: land .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i) * .14s + .2s); }
@keyframes land { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dates li { animation: land .8s cubic-bezier(.2,.7,.2,1) backwards; 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); }
/* the server sends a dot after the Instagram mark; with no link after it, it is an orphan */
.foot-row .dot:last-child { display: none; }

/* ---- one column on phones: the countdown to the first dance, then the dates —
   the first date leads the list it counts down to ---- */
@media (max-width: 899px) {
  :root { --num: clamp(44px, 13.5vw, 58px); --dial: clamp(220px, 66vw, 290px); }
  /* On phones nothing is sized from the viewport's HEIGHT: the address bar
     hides and returns during a scroll, and where that resizes the height
     units the whole column would shift under the reader's thumb. */
  .hero { justify-content: flex-start; padding: 68px 24px 40px; }
  .tagline { margin-top: 10px; font-size: 13.5px; }
  .rule { margin-top: 20px; }
  h1 { margin-top: 24px; }
  .hms { margin-top: 20px; }
  .when { margin-top: 18px; font-size: 19px; }
  .cap { font-size: 11.5px; }
  .lockup { width: clamp(180px, 52vw, 240px); }
  h1 { font-size: clamp(24px, 7.9vw, 36px); letter-spacing: .2em; text-indent: .2em; }
  .sub { font-size: clamp(16px, 4.7vw, 21px); }
  .halves { grid-template-columns: 1fr; row-gap: 34px; margin-top: 34px; }
  .halves > .seam { display: none; }    /* the 2026 rule already divides the two */
  .actions { margin-top: 40px; }
  .count { order: -1; }
  .away { display: none; }
  .actions { flex-direction: column; align-items: stretch; width: min(340px, 100%); }
  .actions .btn { justify-content: center; text-align: center; padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shine { background-position: 0 0; }
}

/* ---- the sunset ---------------------------------------------------------
   The live summer site's sunset, brought into the winter page.

   The summer page runs a whole day, cream noon to plum night. This page is
   gold on dark, so it can only use the evening's last act: it opens on the
   afterglow — the sun's cap still on the horizon at the foot of the screen —
   and ends in the night above, with the stars coming out as the light goes.

   Phones scroll, so there the page's own scroll drives it, as on the summer
   site. A laptop shows the whole page at once and has nothing to scroll, so
   there the same sunset plays once, by itself, on arrival. */

@property --dusk-top { syntax: '<color>';  inherits: false; initial-value: #150B0F; }
@property --dusk-mid { syntax: '<color>';  inherits: false; initial-value: #170C10; }
@property --dusk-low { syntax: '<color>';  inherits: false; initial-value: #1D1016; }
@property --flush    { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sink     { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --stars    { syntax: '<number>'; inherits: false; initial-value: 1; }

/* the night the page ends in is winter.css's own; the dusk lies over it and
   thins out to nothing */
.sky > .dusk {
  position: fixed; inset: 0;
  background:
    /* the horizon flush: the air reddens in a band far wider than it is tall */
    radial-gradient(ellipse 85% 26% at 50% 100%,
      rgba(232,169,78, calc(.36 * var(--flush))),
      rgba(196,96,58,  calc(.30 * var(--flush))) 42%,
      rgba(196,96,58, 0) 100%),
    /* dark at the top, where the headline is; the light is at the horizon */
    linear-gradient(180deg, var(--dusk-top) 0%, var(--dusk-top) 22%, var(--dusk-mid) 62%, var(--dusk-low) 100%);
  animation: dusk 11s cubic-bezier(.4,0,.5,1) .6s both;
}
/* every value above night is a token of the live site's sky ramp */
@keyframes dusk {
  0%   { --dusk-top: #2A1215; --dusk-mid: #55240F; --dusk-low: #96421F; --flush: 1; }
  22%  { --dusk-top: #24101A; --dusk-mid: #4A1F0E; --dusk-low: #8A3D1F; --flush: .85; }
  45%  { --dusk-top: #1D1016; --dusk-mid: #331619; --dusk-low: #55240F; --flush: .5; }
  70%  { --dusk-top: #190E13; --dusk-mid: #1E1010; --dusk-low: #2C130D; --flush: .18; }
  100% { --dusk-top: #150B0F; --dusk-mid: #170C10; --dusk-low: #1D1016; --flush: 0; }
}

/* the sun: the mark's own disc and colours, its cap standing on the bottom
   edge of the screen, going down */
.sky > .dusk-sun {
  position: fixed; inset: auto; left: 50%; bottom: 0;
  --d: clamp(170px, 46vw, 300px);
  width: var(--d); height: var(--d); border-radius: 50%;
  background: linear-gradient(180deg, #F6D394 0%, #F0C27A 18%, #E8A94E 36%, #C4603A 70%);
  box-shadow: 0 0 calc(var(--d) * .22) calc(var(--d) * .04) rgba(240,194,122,.35),
              0 0 calc(var(--d) * .6) calc(var(--d) * .12) rgba(196,96,58,.28);
  transform: translate(-50%, calc((.56 + var(--sink)) * 100%));
  animation: sun-set 7s cubic-bezier(.45,0,.7,1) .6s both;
}
@keyframes sun-set { from { --sink: 0; } to { --sink: .75; } }

/* the stars come out as the light goes */
#stars { opacity: var(--stars); animation: stars-out 11s ease-in .6s both; }
@keyframes stars-out { 0% { --stars: 0; } 35% { --stars: .12; } 100% { --stars: 1; } }

/* phones: the first screen is the countdown standing over the horizon — the
   dates begin just under the fold, so nothing is ever set on top of the sun.
   --fold is where the countdown starts and --screen is the screen's height;
   the script in the page measures both ONCE, in pixels. They must not follow
   the viewport live: a phone's address bar hides and returns while you
   scroll, and in some in-app browsers that resizes the viewport units — the
   layout then shifted under the reader's thumb and the dates jumped. */
@media (max-width: 899px) {
  .count { min-height: calc(var(--screen, 100svh) - var(--fold, 330px)); justify-content: center; padding-bottom: 100px; }
  .halves { row-gap: 26px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .sky > .dusk-sun { --d: 150px; }
  .count { padding-bottom: 70px; }
}

/* phones: the page's scroll is the evening */
@supports (animation-timeline: scroll()) {
  @media (max-width: 899px) {
    .sky > .dusk, #stars { animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-timeline: scroll(root); }
    /* the sun is down within the first 140px of scroll: it must be gone
       before the dates travel up over the place where it stood. In pixels,
       not a share of the page, so it cannot drift if the page's height does. */
    .sky > .dusk-sun { animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0px 140px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky > .dusk, .sky > .dusk-sun { display: none; }
  #stars { opacity: 1; }
}