html, body { margin: 0; min-height: 100%; background: #f3eee5; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
*, *::before, *::after { box-sizing: border-box; }
:root { --ivory: #f3eee5; --ivory-2: #ece5d8; --ink: #141210; --ink-soft: #6b645a; --line: rgba(20,18,16,.14);
        --gold-a: #8e6b2c; --gold-b: #c9a04e; --gold-c: #f3dea2;
        --gold: linear-gradient(100deg, #8e6b2c 0%, #c9a04e 22%, #f3dea2 38%, #c9a04e 52%, #8e6b2c 70%, #c9a04e 86%, #f3dea2 100%); }
.gl { position: relative; overflow: clip; color: var(--ink); background: var(--ivory); font-family: 'Inter Tight', system-ui, sans-serif; }
.gl-grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url(../assets/grain.svg); }
.gl-gold { background: var(--gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
           animation: gl-shine 7s ease-in-out infinite; }
@keyframes gl-shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* loader */
.gl-loader { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.gl-curtain { position: absolute; left: 0; right: 0; height: 50.5%; background: #141210; }
.gl-curtain--a { top: 0; } .gl-curtain--b { bottom: 0; }
.gl-loader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ivory); }
.gl-count { font-family: 'Bodoni Moda', Georgia, serif; font-size: 64px; font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.gl-bar { width: 140px; height: 1px; background: rgba(243,238,229,.2); overflow: hidden; }
.gl-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-a), var(--gold-c), var(--gold-b)); transform-origin: 0 50%; transform: scaleX(0); }
.gl-loader-word { font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: rgba(243,238,229,.6); }
.gl.is-ready .gl-loader { display: none; }

/* top bar */
.gl-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; padding: 18px 20px;
          font-size: 11px; letter-spacing: .26em; text-transform: uppercase; mix-blend-mode: difference; color: #f3eee5; pointer-events: none; }
.gl-top em { font-style: normal; margin-left: 6px; }

/* hero */
.gl-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 90px 20px 70px; overflow: hidden; }
.gl-light { position: absolute; width: 520px; height: 520px; left: 0; top: 0; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
            background: radial-gradient(circle, rgba(243,222,162,.55) 0%, rgba(201,160,78,.22) 32%, rgba(201,160,78,0) 66%); mix-blend-mode: multiply; }
.gl-title { position: relative; margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; line-height: .86; letter-spacing: -.035em;
            font-size: clamp(84px, 26vw, 230px); }
.gl-line { display: block; overflow: hidden; padding: .04em 0 .26em; margin-bottom: -.2em; }
.gl-line:nth-child(2) { text-align: right; }
.gl-word { display: inline-block; }
.gl-word--b { font-style: italic; padding-right: .06em; }
.gl-word .char { display: inline-block; }
.gl-word--b .char { background: var(--gold); background-size: 340% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
                    padding: .04em 0 .26em; margin: -.04em 0 -.26em; }
.gl-hero-foot { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 34px; }
.gl-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.gl-mask > span { display: inline-block; }
.gl-invite { margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 24px; }
.gl-hero-date { margin: 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.gl-leaf { position: absolute; width: 26px; opacity: .9; filter: drop-shadow(0 8px 10px rgba(142,107,44,.25)); }
.gl-leaf--1 { top: 18%; left: 12%; rotate: -24deg; } .gl-leaf--2 { top: 62%; right: 10%; width: 20px; rotate: 32deg; } .gl-leaf--3 { top: 30%; right: 26%; width: 14px; rotate: 70deg; }
.gl-scrollcue { position: absolute; left: 20px; bottom: 24px; width: 1px; height: 46px; background: var(--line); overflow: hidden; }
.gl-scrollcue span { position: absolute; left: 0; top: 0; width: 1px; height: 46px; background: var(--ink); transform-origin: 0 0; animation: gl-cue 2.2s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes gl-cue { 0% { transform: scaleY(0); transform-origin: 0 0; } 45% { transform: scaleY(1); transform-origin: 0 0; } 55% { transform: scaleY(1); transform-origin: 0 100%; } 100% { transform: scaleY(0); transform-origin: 0 100%; } }

/* marquee */
.gl-marquee { position: relative; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--ink); color: var(--ivory); }
.gl-marquee-track { display: flex; width: max-content; will-change: transform; }
.gl-marquee-row { display: flex; align-items: center; flex-shrink: 0; }
.gl-marquee-row span { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 44px; line-height: 1; padding: 0 22px; white-space: nowrap; }
.gl-marquee-row i { font-style: normal; font-size: 16px; color: var(--gold-b); }

/* statement */
.gl-statement { padding: 110px 22px 110px; }
.gl-statement-label { margin: 0 0 26px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.gl-statement-text { margin: 0; max-width: 680px; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(30px, 8.4vw, 54px); line-height: 1.16; letter-spacing: -.01em; }
.gl-statement-text .word { display: inline-block; }

/* horizontal details */
.gl-h { position: relative; height: 100svh; overflow: hidden; background: var(--ivory-2); }
.gl-h-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.gl-panel { position: relative; flex: 0 0 100vw; width: 100vw; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 70px 26px; border-right: 1px solid var(--line); }
.gl-panel-label { margin: 0 0 18px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.gl-panel-label b { font-weight: 500; color: var(--ink); margin-right: 10px; }
.gl-panel-num { margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(170px, 56vw, 340px); line-height: .8; letter-spacing: -.05em; padding-right: .06em; }
.gl-panel-sub { margin: 18px 0 0; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 30px; }
.gl-panel-time { margin: 8px 0 0; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.gl-panel-big { margin: 0; max-width: 560px; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(40px, 11vw, 76px); line-height: 1.04; letter-spacing: -.02em; }
.gl-panel-menu { margin: 0; max-width: 560px; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: clamp(30px, 8.6vw, 52px); line-height: 1.18; }
.gl-h-progress { position: absolute; left: 26px; right: 26px; bottom: 30px; height: 1px; background: var(--line); z-index: 2; }
.gl-h-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-a), var(--gold-c), var(--gold-b)); transform-origin: 0 50%; transform: scaleX(0); }

/* note + close */
.gl-note { padding: 80px 26px 20px; }
.gl-note p { margin: 0 auto; max-width: 420px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.gl-close { position: relative; padding: 80px 22px 110px; text-align: center; }
.gl-seal { position: relative; width: 150px; height: 150px; margin: 0 auto 34px; }
.gl-seal-ring { width: 100%; height: 100%; animation: gl-spin 22s linear infinite; }
.gl-seal-ring text { font-family: 'Inter Tight', sans-serif; font-size: 11.5px; letter-spacing: 3.2px; fill: var(--gold-a); }
.gl-seal-leaf { position: absolute; left: 50%; top: 50%; width: 30px; margin: -25px 0 0 -15px; }
@keyframes gl-spin { to { rotate: 360deg; } }
.gl-thanks { margin: 0 0 -.16em; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: clamp(64px, 20vw, 150px); line-height: .9; letter-spacing: -.03em; padding: .04em .08em .26em; display: inline-block; }
.gl-close-pre { margin: 28px 0 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.gl-sign { margin: 8px 0 0; font-family: 'Bodoni Moda', Georgia, serif; font-size: 30px; }

/* without the pinned scroll (reduced motion or no JS), panels stack */
.gl:not(.is-motion) .gl-h { height: auto; }
.gl:not(.is-motion) .gl-h-track { flex-direction: column; width: auto; }
.gl:not(.is-motion) .gl-panel { width: auto; flex: none; height: auto; min-height: 70svh; border-right: 0; border-bottom: 1px solid var(--line); }
.gl:not(.is-motion) .gl-h-progress { display: none; }
.gl:not(.is-motion) .gl-loader { display: none; }

@media (min-width: 768px) {
  .gl-hero { padding: 110px 6vw 80px; }
  .gl-statement { padding: 150px 6vw; }
  .gl-panel { padding: 90px 8vw; }
  .gl-marquee-row span { font-size: 64px; }
  .gl-leaf { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-gold, .gl-seal-ring, .gl-scrollcue span { animation: none; }
}

/* card */
.gl-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px; border-radius: 14px; background: #f3eee5; color: #141210; text-align: center; font-family: 'Inter Tight', sans-serif; }
.gl-card-date { font-family: 'Bodoni Moda', Georgia, serif; font-size: 52px; line-height: .9; background: linear-gradient(100deg,#8e6b2c,#f3dea2,#c9a04e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-card-month { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; }
.gl-card-title { margin: 8px 0 0; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 21px; }