/* Golden Connection — site styles
   Design: "Golden Hour Light" — the page background is one long sunset:
   daylight cream at the top, night plum at the bottom; the whole page "sets"
   as you scroll, and the mark's horizon line recurs as a divider the sun
   sinks through, chapter by chapter.

   THE THREE VOICES — every text node is exactly one of:
   1. --font-display  ceremony: h2, card titles, italic asides, the hero date
   2. --font-caps     the wordmark speaking: all-caps data, TWO sizes, TWO trackings
   3. --font-body     plain talk: body copy, always 17px on φ leading
   Type scale: base 17px stepped by √φ=1.272 (two steps = φ):
   11 · 13.5 · 17 · 21.5 · 27.5 · 35 · 44.5 · 56.5 · 72 */

:root {
  --plum: #1D1016;
  --gold: #E8A94E; --gold-light: #F0C27A; --gold-pale: #F6D394;
  --terracotta: #C4603A; --rust: #8A3D1F;
  --cream: #F5E7D3;
  /* ink ramp on the light (daylight) half */
  --ink: #33201C;
  --ink-soft: #5C3A28;
  /* text ramp on the dark (night) half */
  --sand: #EFDFC8;
  --sand-soft: #D5BCA1;

  /* voices */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', sans-serif;
  --font-caps: 'Montserrat', 'Jost', sans-serif;

  /* φ sizes */
  --fs-caps-sm: 11px;    /* 17/φ, +0.5 for hinting */
  --fs-caps-lg: 13.5px;  /* 17/√φ */
  --fs-body:    17px;
  --fs-lead:    21.5px;  /* 17·√φ — italic asides */
  --fs-title:   27.5px;  /* 17·φ — card titles, hero date */
  --fs-h2-min:  35px;    /* 17·φ·√φ */
  --fs-h2:      44.5px;  /* 17·φ² */
  --fs-h2-max:  56.5px;  /* 17·φ²·√φ — invite display only */

  --lh-body: 1.618; --lh-title: 1.272; --lh-display: 1.08; --lh-caps: 1.4;

  /* exactly two caps trackings site-wide */
  --track-wide: 0.3em;   /* ceremonial eyebrows, wordmark */
  --track-caps: 0.15em;  /* data caps: labels, times, buttons, legal */

  --w-display: 600; --w-display-it: 500; --w-body: 400; --w-caps: 500;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x twice: `hidden` for old engines, `clip` (no scroll container,
   reliable on iOS) where supported — the invite stage's ghost sun is wider
   than a phone viewport and must never cause side-scroll */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip;
  background: linear-gradient(180deg,
  #F7EBD2 0%, #F3DDAE 9%, #EFC98F 18%, #E0A45C 27%,
  #C4703C 36%, #8A4A2B 46%, #4A2530 55%, #1D1016 66%); }
body {
  font-family: var(--font-body); font-weight: var(--w-body);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink);
  position: relative; overflow-x: hidden; overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* the sky: one fixed gradient whose stops ANIMATE with scroll — the zenith
   runs a ramp step ahead of the horizon, so the page darkens from above
   while the horizon keeps glowing. */
@property --sky-top { syntax: '<color>'; inherits: false; initial-value: #F3DDAE; }
@property --sky-mid { syntax: '<color>'; inherits: false; initial-value: #F7EBD2; }
@property --sky-bot { syntax: '<color>'; inherits: false; initial-value: #F7EBD2; }
.sky {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-bot) 100%);
  animation: sunset linear both;
  animation-timeline: scroll(root);
}
@keyframes sunset {
  0%   { --sky-top: #F3DDAE; --sky-mid: #F7EBD2; --sky-bot: #F7EBD2; }
  9%   { --sky-top: #EFC98F; --sky-mid: #F3DDAE; --sky-bot: #F7EBD2; }
  18%  { --sky-top: #E0A45C; --sky-mid: #EFC98F; --sky-bot: #F3DDAE; }
  27%  { --sky-top: #C4703C; --sky-mid: #E0A45C; --sky-bot: #EFC98F; }
  36%  { --sky-top: #8A4A2B; --sky-mid: #C4703C; --sky-bot: #E0A45C; }
  46%  { --sky-top: #4A2530; --sky-mid: #8A4A2B; --sky-bot: #C4703C; }
  55%  { --sky-top: #1D1016; --sky-mid: #4A2530; --sky-bot: #8A4A2B; }
  66%  { --sky-top: #150A0F; --sky-mid: #1D1016; --sky-bot: #381B28; }
  100% { --sky-top: #150A0F; --sky-mid: #1D1016; --sky-bot: #381B28; }
}
@supports not (animation-timeline: scroll()) {
  .sky { position: absolute; animation: none; background: linear-gradient(180deg,
    #F7EBD2 0%, #F3DDAE 9%, #EFC98F 18%, #E0A45C 27%,
    #C4703C 36%, #8A4A2B 46%, #4A2530 55%, #1D1016 66%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky { position: absolute; animation: none; background: linear-gradient(180deg,
    #F7EBD2 0%, #F3DDAE 9%, #EFC98F 18%, #E0A45C 27%,
    #C4703C 36%, #8A4A2B 46%, #4A2530 55%, #1D1016 66%); }
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* ---- type roles ---- */
.eyebrow {
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-lg); letter-spacing: var(--track-wide); text-indent: var(--track-wide);
  text-transform: uppercase; line-height: var(--lh-caps);
}
h2 {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(var(--fs-h2-min), 5.5vw, var(--fs-h2));
  line-height: var(--lh-display); letter-spacing: 0.01em; text-wrap: balance;
}
.btn {
  display: inline-block;
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-lg); letter-spacing: var(--track-caps); text-transform: uppercase;
  padding: 16px 44px; border-radius: 100px;
  color: var(--cream); background: var(--plum);
  box-shadow: 0 18px 34px -18px rgba(29, 16, 22, 0.65);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -18px rgba(29, 16, 22, 0.7); }
.btn-gold {
  color: var(--plum);
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 18px 38px -16px rgba(232, 169, 78, 0.55);
}
.btn-gold:hover { box-shadow: 0 24px 46px -16px rgba(232, 169, 78, 0.65); }

/* every UI dot is a tiny sun — the ⊙ of the wordmark */
.dot,
.know-card .k-label::before,
.sch-row::before {
  background: radial-gradient(circle at 38% 32%, var(--gold-pale), var(--gold) 55%, var(--terracotta));
}

/* ---- hero — the brand claims the top of the sky ---- */
.hero { min-height: 92vh; display: flex; align-items: center; text-align: center; padding-top: 55px; padding-bottom: 55px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 34px; width: 100%; }

/* group 1 — brand: lockup + tagline read as one mark;
   brand→plate = 34+21 = 55px, a φ step above the 34px plate→CTA gap */
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-bottom: 21px; }
.hero-lockup {
  width: min(377px, 74%); height: auto;  /* 144 · 233 · 377 — the horizon family */
  filter: drop-shadow(0 0 34px rgba(240, 194, 122, 0.4));
}
.hero .eyebrow { color: var(--terracotta); }

/* group 2 — invitation plate: label + date framed by size S of the horizon system */
.hero-event { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.horizon { display: block; }
.horizon-end { transform: scaleX(-1); }
.hero-label {
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-sm); letter-spacing: 0.26em; text-indent: 0.26em;
  text-transform: uppercase; color: var(--terracotta);
}
.hero-date {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 18px;
  font-family: var(--font-display); font-weight: var(--w-display-it);
  font-size: clamp(21px, 5.2vw, var(--fs-title)); line-height: 1.2;
  letter-spacing: 0.08em; text-indent: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.hero-date .seg { display: inline-flex; align-items: baseline; gap: 18px; }
.hero-date .seg[hidden] { display: none; }
.dot { width: 4px; height: 4px; border-radius: 50%; align-self: center; }

/* ---- sections — φ rhythm: chapter seams get a divider, breaths stay plain ---- */
section { padding-block: clamp(44px, 7vw, 72px); }
.shead {
  display: flex; flex-direction: column; align-items: center; gap: 10.5px;
  text-align: center; margin-bottom: clamp(27px, 4.5vw, 44px);
}

/* THE HORIZON SYSTEM — one curve, two sizes, one stroke.
   The mark's land line is a single master curve. It appears at exactly two
   sizes: S = 144 when it frames text (the hero plate pair, sunless),
   L = 233 = 144·φ when it stands alone (chapter seams + the coda).
   Stroke is always 2.4 viewBox units. The sun is always ⌀21, centered at
   x = 116.5, and sinks in half-diameter steps: above → kissing → set
   (its memory becomes the invite stage) → afterglow only, at the coda.
   Deliberately NOT animated — still waypoints that anchor the motion. */
.hr { display: flex; justify-content: center; margin-block: clamp(34px, 5vw, 55px); }
.hr svg { width: min(233px, 66vw); height: auto; }

/* a seam that carries a divider trades one φ step of padding for it */
section:has(+ .hr) { padding-bottom: clamp(27px, 4.5vw, 45px); }
.hr + section { padding-top: clamp(27px, 4.5vw, 45px); }

/* afternoon: good to know — warm glass cards over the moving sky */
.know { color: var(--ink); }
.know .eyebrow { color: var(--rust); }
.know-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 22px; max-width: 920px; margin: 0 auto;
}
.know-card {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 10.5px;
  padding: 30px 30px 32px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 249, 238, 0.78), rgba(255, 240, 217, 0.5));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(196, 96, 58, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 24px 44px -28px rgba(90, 40, 20, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.know-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 30px 52px -26px rgba(90, 40, 20, 0.55);
}
.know-card .k-label {
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-sm); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--rust);
  display: flex; align-items: center; gap: 9px;
}
.know-card .k-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.know-card .k-title {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--fs-title); line-height: var(--lh-title);
}
.know-card .k-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); text-wrap: pretty; }

/* dusk edge: schedule — the evening as a sun path */
.schedule { color: var(--cream); }
.schedule .eyebrow { color: var(--gold-pale); }
.sch-grid { max-width: 640px; margin: 0 auto; position: relative; }
.sch-grid::before {
  content: ''; position: absolute; left: 3px; top: 28px; bottom: 28px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 169, 78, 0.45) 18%, rgba(232, 169, 78, 0.45) 82%, transparent);
}
.sch-row { position: relative; display: flex; gap: 26px; align-items: baseline; padding: 19px 8px 19px 30px; }
.sch-row::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 14px rgba(232, 169, 78, 0.7);
}
.sch-row.golden {
  border-radius: 12px;
  background: radial-gradient(ellipse 70% 120% at 24% 50%, rgba(232, 169, 78, 0.12), rgba(232, 169, 78, 0) 70%);
}
.sch-time {
  width: 72px; flex-shrink: 0;
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-lg); letter-spacing: var(--track-caps); color: var(--gold-pale);
}
.sch-desc { flex: 1; font-size: var(--fs-body); color: var(--sand); text-wrap: pretty; }
.hl { font-size: 1.272em; color: var(--gold-pale); }

/* night: moments */
.moments { color: var(--cream); }
.moments .eyebrow { color: var(--gold); }
.m-photo img {
  width: 100%; aspect-ratio: 16/8; object-fit: cover; object-position: center 62%;
  border-radius: 14px; border: 1px solid rgba(232, 169, 78, 0.25);
  box-shadow: 0 34px 70px -38px rgba(0, 0, 0, 0.8);
}
.m-caption { text-align: center; margin-top: 21.5px; font-size: var(--fs-lead); color: var(--sand-soft); }

/* the italic aside voice — hero has none; these three share it */
.hl, .m-caption {
  font-family: var(--font-display); font-style: italic; font-weight: var(--w-display-it);
}

/* night: location — one quiet line close to its heading (17·√φ = 21.5) */
.location { color: var(--cream); }
.location .eyebrow { color: var(--gold); }
.location .shead { margin-bottom: 21.5px; }
.loc-text { max-width: 560px; margin: 0 auto; text-align: center; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sand); text-wrap: pretty; }

/* night: invite — the manifesto on its afterglow stage */
.invite { color: var(--cream); text-align: center; padding-bottom: clamp(55px, 8vw, 89px); }
.invite .eyebrow { color: var(--gold); }
.invite-inner { isolation: isolate; }
.invite h2 { position: relative; font-size: clamp(var(--fs-h2-min), 6vw, var(--fs-h2-max)); margin-top: 10.5px; }
.invite h2 em { font-style: italic; color: var(--gold-light); text-shadow: 0 0 21px rgba(240, 194, 122, 0.28); }
/* the message stage — the set sun's memory rises once more behind the words.
   Halo 987px, ghost disc 610px (Fibonacci); the disc sits φ-low (61.8%)
   behind the headline so its upper limb crowns them. This IS sun state III. */
.invite h2::before,
.invite h2::after {
  content: ''; position: absolute; left: 50%; top: 61.8%;
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: -1;
}
.invite h2::before {
  width: min(144vmin, 987px); height: min(144vmin, 987px);
  background: radial-gradient(closest-side,
    rgba(196, 96, 58, 0.10),
    rgba(196, 96, 58, 0.045) 45%,
    rgba(196, 96, 58, 0) 72%);
}
.invite h2::after {
  width: min(89vmin, 610px); height: min(89vmin, 610px);
  background: radial-gradient(closest-side,
    rgba(246, 211, 148, 0.10),
    rgba(232, 169, 78, 0.065) 46%,
    rgba(232, 169, 78, 0.045) 61.8%,
    rgba(196, 96, 58, 0.10) 76%,
    rgba(196, 96, 58, 0) 81%);
}
.invite p {
  max-width: 560px; margin: 21.5px auto 0; text-align: left;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sand-soft); text-wrap: pretty;
}
.invite p + p { margin-top: 13.5px; }
.invite-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* whole idea-blocks drift up as they enter; range is viewport-normalized so
   short heads and tall photos fade over comparable distances (23.6% = φ⁻³) */
@supports (animation-timeline: view()) {
  .shead, .know-card, .sch-grid, .m-photo, .m-caption, .loc-text, .invite-inner,
  .foot-horizon, .foot-brand, .foot-legal {
    animation: rise 1s ease both;
    animation-timeline: view();
    animation-range: cover 0% cover 23.6%;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(13px); }
    to   { opacity: 1; transform: none; }
  }
  /* the manifesto arrives one φ-step slower — 38.2% = φ⁻² */
  .invite-inner { animation-range: cover 0% cover 38.2%; }
}
@media (prefers-reduced-motion: reduce) {
  .shead, .know-card, .sch-grid, .m-photo, .m-caption, .loc-text, .invite-inner,
  .foot-horizon, .foot-brand, .foot-legal,
  .btn, .know-card { animation: none; transition: none; }
}

/* ---- coda — divider IV: the sun has set; the page signs its name.
   Ending rhythm: CTA → 89 breath → last horizon → 55 → mark → 55 → legal ---- */
.foot {
  color: var(--sand-soft); text-align: center;
  padding-top: 0;
  padding-bottom: calc(clamp(44px, 7vw, 72px) + env(safe-area-inset-bottom, 0px));
}
.foot-horizon {
  display: block; width: min(233px, 66vw); height: auto;
  margin: 0 auto clamp(34px, 5vw, 55px);
}
.foot-brand { position: relative; display: inline-block; }
.foot-brand::before { /* afterglow tied to the mark: φ box 115·φ² × 115·φ */
  content: ''; position: absolute; left: 50%; top: 34px;
  width: 301px; height: 186px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(219, 128, 158, 0.28), rgba(219, 128, 158, 0) 70%);
  pointer-events: none;
}
.foot-mark { position: relative; width: 115px; height: auto; margin: 0 auto; }
.foot-word {
  position: relative; margin-top: 18px;
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-lg); letter-spacing: var(--track-wide); text-indent: var(--track-wide);
  text-transform: uppercase; color: var(--sand);
}
.foot-line { position: relative; margin-top: 8px; font-size: 13.5px; }
.foot-legal {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin-top: clamp(34px, 5vw, 55px);
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-sm); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.foot-legal a { color: rgba(213, 188, 161, 0.72); transition: color 0.3s ease; }
.foot-legal a:hover { color: var(--gold-pale); }
.foot-legal .dot { width: 4px; height: 4px; border-radius: 50%; }

/* language switcher — the same quiet caps as the legal row */
.foot-lang {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  margin-top: clamp(28px, 4.5vw, 44px);
}
.foot-lang a {
  font-family: var(--font-caps); font-weight: var(--w-caps);
  font-size: var(--fs-caps-sm); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: rgba(213, 188, 161, 0.6); padding: 8px 10px; border-radius: 99px;
  transition: color 0.3s ease, background 0.3s ease;
}
.foot-lang a:hover { color: var(--gold-pale); background: rgba(232, 169, 78, 0.08); }
.foot-legal { margin-top: 14px; }