/* 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;
  /* Below the horizon the light is not gold any more. Every edge down there —
     the horizon line, the photograph's borders — carries this instead, so the
     lower half of the page is lit by what is left of the sunset rather than by
     the same gold as the noon half. */
  --dusk-edge: color-mix(in oklab, var(--gold) 56%, #C25E78);
  /* ink ramp on the light (daylight) half */
  --ink: #33201C;
  --ink-soft: #5C3A28;
  /* text ramp on the dark (night) half */
  --sand: #EFDFC8;
  --sand-soft: #D5BCA1;

  /* Two roles, two names, and nothing else picks its own. Prose on the dark
     half of the page is one colour wherever it appears; -quiet is for asides
     that are meant to sit back — captions, legal. Sections used to choose
     between --sand and --sand-soft themselves, which is why the same kind of
     paragraph read lighter in one place than another. */
  --prose:       var(--sand);
  --prose-quiet: var(--sand-soft);
  /* one measure for every column of prose: ~60 characters at --fs-body */
  --measure: 560px;

  /* 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·φ² */

  --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,
  #F5E7D3 0%, #F6D394 9%, #F0C27A 18%, #E8A94E 27%,
  #C4603A 36%, #8A3D1F 46%, #55240F 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. */
/* ---- the sun ------------------------------------------------------------
   One disc behind the whole page. At the top it wears the sky's own colour, so
   it is invisible; as the sky darkens it separates out, crosses to the right
   and sinks past the bottom edge — the horizon is the screen's lower rim, and
   the page reads as standing above it.

   The same scroll drives where the light comes from: --lit-x/--lit-y are the
   direction a lit edge faces, and --shade/--rim are how much of each is spent.
   Bright sky, dark ink: shadow. Dark sky, warm ink: rim light. They cross over
   in the middle rather than fighting each other. */
@property --sun-x    { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --sun-y    { syntax: '<percentage>'; inherits: true; initial-value: 33%; }
@property --sun-core { syntax: '<color>'; inherits: true; initial-value: #FDF6E8; }
@property --sun-edge { syntax: '<color>'; inherits: true; initial-value: #F5E7D3; }
@property --sun-halo { syntax: '<color>'; inherits: true; initial-value: #F5E7D3; }
/* --sun-size is the disc PLUS its tear headroom: the generated outline spans
   0.84 of the box (r = .42), so 233 draws the same 196px disc as before the
   wobble — the box grew by 1/0.84, the sun did not. Same at both breakpoints.
   The headroom absorbs the tear's usual reach (band amplitude 4/65 of the
   radius, multiplied by turbulence and the rim boil); only a spike with all
   three sources aligned at their maxima can kiss the box edge, and a clipped
   spike tip is invisible. */
@property --sun-size  { syntax: '<length>'; inherits: true; initial-value: 233px; }
@property --sun-flat  { syntax: '<number>'; inherits: true; initial-value: 1; }
/* how far apart the two limbs have drifted. Light from the disc's lower edge
   crosses more air than light from its upper edge, so the bottom reddens
   first — and the lower the sun, the wider the gap. Deliberately small: a sun
   reads as one solid colour to the eye, so this is a lean, not a gradient you
   are meant to notice. Zero high up, a seventh of the way to the rim colour
   by the time it sets. */
@property --limb      { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
/* The disc does not fade. It used to be dimmed away on the photograph's own
   view timeline, which was a second way of saying what the ground already
   says by covering it — and two mechanisms for one fact drift apart. */
@property --sun-alpha { syntax: '<number>'; inherits: true; initial-value: 0.88; }
/* The light the sun casts — the glow and the aureole blend with SCREEN, and
   screen's neutral is black, not the sky's colour: at the top of the page
   the old same-colour-as-the-sky trick stopped hiding them and a pale ghost
   disc showed through the cream. This gates their alpha instead: nothing is
   cast until the sky starts leaving the disc behind. */
@property --sun-cast  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --horizon-y { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --lit-x    { syntax: '<length>'; inherits: true; initial-value: 1px; }
@property --lit-y    { syntax: '<length>'; inherits: true; initial-value: 0.9px; }
@property --shade    { syntax: '<number>'; inherits: true; initial-value: 0.16; }
@property --rim      { syntax: '<number>'; inherits: true; initial-value: 0; }

html {
  animation: sun-path linear both, sun-colour linear both;
  animation-timeline: scroll(root), scroll(root);
}
/* Where it is. It barely moves: 150 million kilometres away, so of everything on
   this page the sun should drift least — eight points of width and fourteen of
   height over the whole scroll, leaning west as it goes. */
@keyframes sun-path {
  0%   { --sun-x: 49%;   --sun-y: 33%;   --sun-flat: 1;    --horizon-y: 104%; --limb: 0%; }
  18%  { --sun-x: 50.2%; --sun-y: 34.5%; --sun-flat: 1;    --horizon-y: 92%;  --limb: 1%; }
  38%  { --sun-x: 52%;   --sun-y: 37%;   --sun-flat: 1;    --horizon-y: 76%;  --limb: 3%; }
  50%  { --sun-x: 53.2%; --sun-y: 39%;   --sun-flat: 1;    --horizon-y: 64%;  --limb: 5%; }
  57%  { --sun-x: 54.2%; --sun-y: 41%;   --sun-flat: 0.96; --horizon-y: 56%;  --limb: 7%; }
  66%  { --sun-x: 55.4%; --sun-y: 44%;   --sun-flat: 0.93; --horizon-y: 48%;  --limb: 11%; }
  /* they meet, and the line goes no further */
  73%  { --sun-x: 56.4%; --sun-y: 46.5%; --sun-flat: 0.9;  --horizon-y: 46.5%; --limb: 15%; }
  100% { --sun-x: 57%;   --sun-y: 47%;   --sun-flat: 0.9;  --horizon-y: 46.5%; --limb: 15%; }
}

/* What colour it is. This runs on the page's own scroll because it has to match
   the sky: at the top the disc wears the sky's exact colour and cannot be seen,
   and it only separates out as the light goes. Kept below white — a sun in a
   photograph of a sunset is amber, not a headlight, and there are words to read
   over it. */
@keyframes sun-colour {
  /* the disc walks the same brand ramp as the sky, one step ahead of it: the
     rim is the token, the core a shade brighter so the disc still out-glows
     its own edge, and the halo sits between the two. */
  /* the sky's own colour, so there is no disc at the top of the page at all —
     the sun appears as the sky leaves it behind, not as a circle switched on */
  0%   { --sun-core: #F5E7D3; --sun-edge: #F5E7D3; --sun-halo: #F5E7D3; --sun-cast: 0;
         --lit-x: 1px; --lit-y: 0.9px; --shade: 0.16; --rim: 0; }
  9%   { --sun-core: #FBF2DC; --sun-edge: #F5E7D3; --sun-halo: #F5E7D3; --sun-cast: 0;
         --lit-x: 0.9px; --lit-y: 0.9px; --shade: 0.155; --rim: 0.02; }
  18%  { --sun-core: #FBEBC8; --sun-edge: #F6D394; --sun-halo: #F0C27A; --sun-cast: 0.35;
         --lit-x: 0.8px; --lit-y: 0.9px; --shade: 0.15; --rim: 0.05; }
  38%  { --sun-core: #F6D394; --sun-edge: #E8A94E; --sun-halo: #E0A268; --sun-cast: 1;
         --lit-x: 0.3px; --lit-y: 0.8px; --shade: 0.11; --rim: 0.12; }
  52%  { --sun-core: #EFA95B; --sun-edge: #C4603A; --sun-halo: #C87C57;
         --lit-x: -0.1px; --lit-y: 0.75px; --shade: 0.08; --rim: 0.16; }
  64%  { --sun-core: #E2652C; --sun-edge: #A03418; --sun-halo: #B0553F;
         --lit-x: -0.5px; --lit-y: 0.65px; --shade: 0.05; --rim: 0.2; }
  /* and the air right around the disc takes the same flush, for the same
     reason and by the same amount */
  76%  { --sun-core: #B23A1C; --sun-edge: #8A3D1F; --sun-halo: #833A35;
         --lit-x: -0.8px; --lit-y: 0.5px; --shade: 0.03; --rim: 0.12; }
  88%  { --sun-core: #4A1C16; --sun-edge: #2A1210; --sun-halo: #2A1512;
         --lit-x: -1px; --lit-y: 0.4px; --shade: 0.02; --rim: 0.03; }
  100% { --sun-core: #1D1016; --sun-edge: #1D1016; --sun-halo: #1D1016; --sun-cast: 1;
         --lit-x: -1px; --lit-y: 0.4px; --shade: 0.02; --rim: 0; }
}

/* The sun is a wrapper around one painted box: the disc (::after), wearing
   the wobble clip. The rim glow sits on the WRAPPER as a drop-shadow: a
   filter on an ancestor receives the already-clipped child, so the light is
   computed from the torn silhouette itself and hugs every notch of it, every
   frame. On the disc's own element the order inverts — the clip cuts the
   filtered output — and a box-shadow only ever knows the box; both were
   tried, both wrong. (Stepped echo copies were tried too, and read as rings,
   not light.) The tear's edge itself stays crisp, as in the handoff
   prototype. The shadow wears the halo's colour, which at the top of the
   page is the sky's own — a high sun still shows nothing. The wrapper paints
   nothing itself: a clip or background here would corrupt the glow's source.
   Cost, honestly: while the edge boils, each frame re-blurs one disc-sized
   layer. One shadow, not a stack, for exactly that reason. */
.sun, .sun-halo {
  position: fixed; z-index: -1; pointer-events: none;
  left: var(--sun-x); top: var(--sun-y);
  width: var(--sun-size); height: var(--sun-size);
  /* refraction squashes the disc vertically near the horizon — the one shape
     change that is actually visible; the diameter itself never changes */
  transform: translate(-50%, -50%) scaleY(var(--sun-flat));
  opacity: var(--sun-alpha);
  /* No clip against the horizon: the photograph and the ground are opaque and
     painted over this layer, so whatever sinks below their top edge is simply
     covered. */
}
/* The rim glow, as its own element so it can carry its own blend mode and
   switch — as a drop-shadow on .sun (its previous form) it was part of the
   disc's rendered output and could never blend apart from it. The inner <b>
   is a solid silhouette in the glow colour, wearing the same wobble clip;
   the blur sits on THIS wrapper because a blur on the clipped element itself
   would be cut off by the clip. Same light, same tear-hugging every frame.
   0.08 of the box = the old drop-shadow's 0.16 radius (a drop-shadow radius
   is twice the Gaussian sigma); screen makes it add to the sky like light.
   Values settled in the tuning session of 4 Aug 2026. */
.sun-halo {
  filter: blur(calc(var(--sun-size) * 0.08));
  mix-blend-mode: screen;
}
.sun-halo b {
  position: absolute; inset: 0;
  clip-path: url(#sun-wobble);
  background: color-mix(in oklab, var(--sun-halo) calc(65% * var(--sun-cast)), transparent);
}
.sun::after {
  content: ''; position: absolute; inset: 0;
  clip-path: url(#sun-wobble);
  /* Top to bottom, not centre to edge. The radial version that used to be
     here spent the outer third of the radius fading into the rim colour and
     wore it as a dirty ring; this one is the real effect instead — the lower
     limb sits deeper into the rim colour than the upper one because its light
     came through more atmosphere. The middle stays exactly --sun-core, so at
     --limb: 0 the disc is still one flat colour. */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sun-core), #FFF2D0 var(--limb)) 0%,
    var(--sun-core) 50%,
    color-mix(in oklab, var(--sun-core), var(--sun-edge) var(--limb)) 100%);
}
/* No ambient halo element any more. The wide .sun-glow field that used to
   hang behind the disc read as a circular shadow once the outline started
   tearing — a torn sun cannot sit in front of a perfect circle of light.
   The drop-shadow above is now the disc's only light, and it follows the
   tear. */
/* ---- the wobble ---------------------------------------------------------
   Looking at a low sun means looking through moving air. The bending lives
   in index.html: the horizon script there regenerates the #sun-wobble clip
   as 96 points every frame, tearing the ones inside the atmosphere bands
   over the photograph's top edge — the algorithm from the design handoff in
   "local assets/design_handoff_gun_batimi_animasyonu". Nothing here to
   style: the clip is geometry, and the disc it cuts is the element above. */

@media (min-width: 900px) { :root { --sun-size: 338px; } }
@media (max-width: 560px) { :root { --sun-size: 183px; } }

/* No scroll timeline: no evening, and no sun either. Left visible, the fixed
   disc would hold its pale opening colours and float over the dark half of
   the static page as it scrolls past — so what remains is the page as it was
   before the sun existed. */
@supports not (animation-timeline: scroll()) {
  html { animation: none; }
  .sun, .sun-halo { display: none; }
}

/* ---- the ground ----------------------------------------------------------
   Below the horizon the page is not sky any more. One flat colour — the
   brand's own background, no gradient and no animation — so everything from
   the photograph down stands on the earth instead of hanging in air. It is a
   plain element wrapping the sections that belong to it, which is why nothing
   here is measured or scripted: its top edge is the photograph's top edge
   because the photograph is the first thing inside it. */
/* The brand background, taken down a hair — deeper and the plum stops reading
   as our colour and just goes black, which is the one thing this surface must
   not do, since it is most of the page. It keeps falling on the way down: the
   sun is gone, so the light is still going, and the last thing on the page is
   darker than the first thing under the horizon — but the fall has a floor.
   Mixed further towards black the plum stops being a colour and the page
   simply switches off, which is not the same as getting dark. */
.ground {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--plum) 92%, #000) 0%,
    color-mix(in oklab, var(--plum) 80%, #000) 42%,
    color-mix(in oklab, var(--plum) 68%, #000) 100%);
  /* the horizon flush's values — settled in the tuning session of 4 Aug 2026 */
  --flush-w: 58%; --flush-h: 7vh;
  --flush-a: 56%; --flush-b: 17%; --flush-stop: 23%;
  /* its colour: the halo leaned 60% into hot pink — still invisible at noon,
     because the halo end of the mix is the animated one; rose-ember through
     the setting, gone by night */
  --flush: color-mix(in oklab, var(--sun-halo) 40%, #FF0059);
}
/* The horizon flush: at golden hour the air along the line reddens in a band
   far wider than it is tall. Anchored to the REAL horizon — this element's
   top edge, which the photograph sits on — not to the sky gradient's
   fiction; and painted as ground's last child, so it lands OVER the sun:
   scatter between the viewer and the disc, which is where that light
   actually is. It sits ON the line and reaches only upward — the gradient's
   centre is the element's bottom edge, so nothing is painted below the
   horizon: this light belongs to the sky side, and washing the photograph
   and the sections under it was exactly what it must not do. */
.ground::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--flush-h)); height: var(--flush-h);
  pointer-events: none;
  /* overlay: the light kneads the sky's own colour instead of sitting on it */
  mix-blend-mode: overlay;
  /* same-hue fade-out — the `transparent` keyword is transparent black and
     would draw a dark fringe at the band's edge */
  background: radial-gradient(ellipse var(--flush-w) 100% at 50% 100%,
    color-mix(in oklab, var(--flush) var(--flush-a), transparent),
    color-mix(in oklab, var(--flush) var(--flush-b), transparent) var(--flush-stop),
    oklab(from var(--flush) l a b / 0) 100%);
}
/* the horizon, edge to edge, fading before it reaches the corners. The
   photograph starts on this line, so the line comes out from behind the
   picture on both sides. */
.ground::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  /* The fade starts close to the screen edge on purpose. Reaching full
     strength only at 18% meant that on a phone — where the picture leaves a
     20px strip either side — the only part of the line anyone could see was
     the part that had barely begun, and it read as no line at all. */
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--dusk-edge) 40%, transparent) 4%,
    color-mix(in oklab, var(--dusk-edge) 64%, transparent) 50%,
    color-mix(in oklab, var(--dusk-edge) 40%, transparent) 96%,
    transparent 100%);
}
/* the split: the gap that used to be the heading's bottom margin is now the
   sky section's padding, so the photograph sits flush on the horizon */
.moments-head { padding-bottom: clamp(27px, 4.5vw, 44px); }
.moments-head .shead { margin-bottom: 0; }
.moments-photo { padding-top: 0; }
/* and the picture is lifted a few pixels over the line, so the horizon passes
   behind it rather than running along its edge. Shifted, not margined: a
   negative margin here would collapse out through the section and drag the
   ground — and the line with it — up by the same amount. */
.m-photo { position: relative; top: -6px; }

@property --sky-top { syntax: '<color>'; inherits: false; initial-value: #F6D394; }
@property --sky-mid { syntax: '<color>'; inherits: false; initial-value: #F5E7D3; }
@property --sky-bot { syntax: '<color>'; inherits: false; initial-value: #F5E7D3; }
.sky {
  position: fixed; inset: 0; z-index: -1;
  /* Light at the zenith, dark at the horizon — decided 4 Aug 2026, and it is
     the realistic way round for THIS composition. The disc travels from 33%
     to 47% of the viewport and stops there; everything below it is foreground,
     not sky. Putting the bright end at the bottom of the screen therefore put
     the glow *under* the sun, which is what read as wrong. Do not "fix" this
     back on the general principle that a sunset glows at the horizon: here the
     bottom of the screen is not the horizon.
     --horizon-y is where the light gives out. It starts off the bottom of the
     screen and climbs as the evening goes, meets the sun exactly where the sun
     stops, and stays there while everything keeps darkening around it. One
     ramp, not a band: a band with a fall-off on both sides drew a visible beam
     across the middle of the screen. */
  background:
    /* The aureole: atmospheric scatter around the disc, painted INTO the sky
       so it cannot read as an object hanging behind the sun — it has no box
       and no edge of its own. Centred on the disc's own centre, in the halo
       colour, which at the top of the page is the sky's, so a high sun adds
       nothing. Kept faint on purpose (the louder .sun-glow element it
       replaces read as a circular shadow); and real scatter is smooth air —
       it does not follow the mirage tear, and must not. */
    /* the fade-out is the SAME hue at alpha zero, never the `transparent`
       keyword: that is transparent BLACK, and a gradient sinking into it
       drags its colour towards black on the way — which is exactly a dark
       ring around the sun */
    radial-gradient(circle calc(var(--sun-size) * 2.7) at var(--sun-x) var(--sun-y),
      color-mix(in oklab, var(--sun-halo) calc(12% * var(--sun-cast)), transparent),
      color-mix(in oklab, var(--sun-halo) calc(4% * var(--sun-cast)), transparent) 50%,
      oklab(from var(--sun-halo) l a b / 0) 100%),
    linear-gradient(180deg,
    var(--sky-bot) 0%,
    var(--sky-mid) calc(var(--horizon-y) - 6%),
    var(--sky-top) calc(var(--horizon-y) + 10%));
  /* screen: the aureole adds to the sky ramp like light, never muddies it */
  background-blend-mode: screen, normal;
  animation: sunset linear both;
  animation-timeline: scroll(root);
}
@keyframes sunset {
  /* The sky IS the brand ramp. Ten stops walking one list of colours —
     cream, gold-pale, gold-light, gold, terracotta, rust, and down into plum —
     with the three stops of the gradient staggered two steps apart, so the
     bottom of the screen is always two colours further into the evening than
     the top. Nothing here is invented: every value above plum is a token from
     :root, which is why the page and the mark agree. */
  0%   { --sky-bot: #F5E7D3; --sky-mid: #F5E7D3; --sky-top: #F6D394; }
  9%   { --sky-bot: #F5E7D3; --sky-mid: #F6D394; --sky-top: #F0C27A; }
  18%  { --sky-bot: #F6D394; --sky-mid: #F0C27A; --sky-top: #E8A94E; }
  27%  { --sky-bot: #F0C27A; --sky-mid: #E8A94E; --sky-top: #C4603A; }
  36%  { --sky-bot: #E8A94E; --sky-mid: #C4603A; --sky-top: #8A3D1F; }
  46%  { --sky-bot: #C4603A; --sky-mid: #8A3D1F; --sky-top: #55240F; }
  55%  { --sky-bot: #8A3D1F; --sky-mid: #55240F; --sky-top: #33150E; }
  66%  { --sky-bot: #55240F; --sky-mid: #33150E; --sky-top: #1D1016; }
  /* The sun is down by 73%. What is left above the line is afterglow, and
     afterglow goes fast — from here the ramp steepens instead of coasting to
     the end, so the sky over the horizon is genuinely dark by the footer.
     The one moment the sky is allowed any rose is right here: --sky-mid sits
     just over the horizon, which is exactly where a real sunset puts it, and
     it is a lean of five or six points of blue over green — enough to read as
     a flush against the rust around it, not enough to be a colour of its own.
     It is gone again by 88%. */
  73%  { --sky-bot: #4A1F0E; --sky-mid: #331619; --sky-top: #1D1016; }
  76%  { --sky-bot: #3C190C; --sky-mid: #291315; --sky-top: #160B0C; }
  88%  { --sky-bot: #2C130D; --sky-mid: #1E1010; --sky-top: #170D11; }
  /* the page ends past the brand background, not on it */
  /* the floor. Night on this page is deep plum, never neutral black: past
     this the colour stops being ours and the page just switches off. */
  100% { --sky-bot: #1E1010; --sky-mid: #170D11; --sky-top: #130A0E; }
}
@supports not (animation-timeline: scroll()) {
  .sky { position: absolute; animation: none; background: linear-gradient(180deg,
    #F5E7D3 0%, #F6D394 9%, #F0C27A 18%, #E8A94E 27%,
    #C4603A 36%, #8A3D1F 46%, #55240F 55%, #1D1016 66%, #150B10 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky { position: absolute; animation: none; background: linear-gradient(180deg,
    #F5E7D3 0%, #F6D394 9%, #F0C27A 18%, #E8A94E 27%,
    #C4603A 36%, #8A3D1F 46%, #55240F 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;
}
/* ---- glass ---------------------------------------------------------------
   The sun travels behind the whole page, so anything carrying type is a pane
   held up in front of it: it blurs what passes behind, takes a little of the
   sky's colour, and keeps the words legible while the disc slides past. One
   definition, driven by four custom properties. */
.glass {
  --glass-fill: linear-gradient(160deg, rgba(255, 249, 238, 0.52), rgba(255, 240, 217, 0.28));
  --glass-edge: rgba(255, 252, 245, 0.34);
  --glass-sheen: rgba(255, 255, 255, 0.5);
  --glass-drop: 0 24px 44px -28px rgba(90, 40, 20, 0.45);
  position: relative; border-radius: 20px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-drop);
}
.know-card {
  text-align: left;
  display: flex; flex-direction: column; gap: 10.5px;
  padding: 30px 30px 32px; border-radius: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.know-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 30px 52px -26px rgba(90, 40, 20, 0.5);
}
.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(--prose); 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 color-mix(in oklab, var(--dusk-edge) 30%, transparent);
  /* the horizon runs behind this picture and comes back out the other side,
     so its top edge is the one that carries the line: thicker, and brighter */
  border-top: 2px solid color-mix(in oklab, var(--dusk-edge) 52%, transparent);
  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(--prose-quiet); }

/* 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); }
/* Prose is left-aligned, in a centred column. Centred prose is ragged on both
   edges: it was what left "day of the social." stranded on its own line, and
   what made the eye change axis between this section and the next. Eyebrows
   and headings stay centred — the axis breaks once, at the head, not twice. */
.loc-text {
  max-width: var(--measure); margin: 0 auto; text-align: left;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--prose); 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; }
/* Same size as every other h2. The manifesto gets its weight from the italic
   second line and the light behind it, not from a second type scale. */
.invite h2 { position: relative; }
.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: var(--measure); margin: 0 auto; text-align: left;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--prose); 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-row {
    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%; }
  /* and it rises as one block, so its head must not rise a second time inside it */
  .invite-inner .shead { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shead, .know-card, .sch-grid, .m-photo, .m-caption, .loc-text, .invite-inner,
  .foot-horizon, .foot-row,
  .btn, .know-card { animation: none; transition: none; }
}

/* ---- coda — divider IV: the sun has set and the page stops talking.
   Ending rhythm: CTA → 89 breath → last horizon → 55 → one quiet line ---- */
.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);
  /* Nothing glows this sharply once it is properly dark. What is left after the
     sun has gone is a diffuse band, not a drawn line — so the rule is faded
     almost out and softened at the edge, enough to feel the horizon is still
     there without the eye being pulled to it. */
  opacity: 0.2;
  filter: blur(0.6px);
}
/* One line, centred, narrow: the page keeps a single vertical spine and the
   footer should not be the one place that spreads to the window's edges. The
   name is not repeated here — the hero carries it. */
.foot-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 14px;
  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-row a { color: rgba(213, 188, 161, 0.72); transition: color 0.3s ease; }
.foot-row a:hover { color: var(--gold-pale); }
.foot-row .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(213, 188, 161, 0.4);
}

/* 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); }


/* ── social ─────────────────────────────────────────────────────────
   One quiet mark under the coda, carrying the same colour and hover as
   the legal links beside it — never louder than the wordmark above. */
.foot-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0 2px 0 0; padding: 0;
  color: rgba(213, 188, 161, 0.72);
  transition: color 0.3s ease;
}
.foot-social:hover { color: var(--gold-pale); }
.foot-social svg { width: 17px; height: 17px; }