/* Layout: a Regency love letter that becomes a film. One centered column for reading, broken by full-bleed
   pinned scenes: the estate entrance, the hero that folds into an arched portrait, the stardust cosmos,
   a floating gallery, and the estate rising from the fog at the end. */
:root{
  --white:#fffafa;
  --blush:#fcf1f2;
  --rose-100:#f8e1e5;
  --rose-200:#f0c6ce;
  --rose:#d98597;
  --rose-deep:#a5455d;
  --ink:#3a2a2e;
  --muted:#7a6166;
  --line:#f0d5da;
  --card:#ffffff;
  --night:#2a0e1a;
  --night-2:#16060d;
  --display:'EB Garamond',Garamond,Georgia,serif;
  --fell:'IM Fell English','EB Garamond',Georgia,serif;
  --fellsc:'IM Fell English SC','EB Garamond',Georgia,serif;
  --cap:'Cinzel','Trajan Pro','EB Garamond',Georgia,serif;
  --script:'Pinyon Script','Snell Roundhand',cursive;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --ui:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --ca:0;
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d98597' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 41V15C3 8 8 3 15 3h26'/%3E%3Cpath d='M9 33V18c0-5 4-9 9-9h15'/%3E%3Cpath d='M15 15c3-3 8-1 6 3-2 3-6 0-3-2'/%3E%3C/g%3E%3Ccircle cx='41' cy='3' r='1.6' fill='%23d98597'/%3E%3Ccircle cx='3' cy='41' r='1.6' fill='%23d98597'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:84px}
body{background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .36 0 0 0 0 .42 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);font-family:var(--display);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--rose-deep)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}
::selection{background:var(--rose-200)}
.label{font-family:var(--fellsc);font-size:15px;letter-spacing:.16em;color:var(--rose)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
h2{font-weight:400;font-size:clamp(36px,6.4vw,56px);line-height:1.1;text-wrap:balance;
  text-shadow:calc(var(--ca)*1px) 0 rgba(217,80,120,.35),calc(var(--ca)*-1px) 0 rgba(160,140,255,.28)}
.amp{font-family:var(--script);font-weight:400;color:var(--rose);font-size:1.05em;line-height:0}
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block}

/* atmosphere canvases + cursor */
#mist{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#flutter{position:fixed;inset:0;width:100%;height:100%;z-index:105;pointer-events:none}
main,footer{position:relative;z-index:1}
#cursor{position:fixed;left:0;top:0;z-index:130;pointer-events:none;opacity:0;transition:opacity .3s}
#cursor.on{opacity:1}
#cursor .ring{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--rose-deep);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#fff;text-transform:uppercase;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s}
#cursor .ring span{opacity:0;transition:opacity .2s}
#cursor .dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--rose-deep)}
#cursor.hover .ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(217,133,151,.18)}
#cursor.view .ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(165,69,93,.88);border-color:transparent}
#cursor.view .ring span{opacity:1}
#cursor.dark .ring{border-color:#ffd7e0}#cursor.dark .dot{background:#ffd7e0}

/* drifting fog strips */
.fog{position:absolute;left:0;width:200%;pointer-events:none;background-repeat:repeat-x;background-size:50% 100%;
  background-image:
   radial-gradient(ellipse 22% 48% at 12% 62%,var(--fc,rgba(255,255,255,.95)),transparent 72%),
   radial-gradient(ellipse 28% 40% at 38% 72%,var(--fc,rgba(255,255,255,.9)),transparent 70%),
   radial-gradient(ellipse 20% 55% at 63% 58%,var(--fc2,rgba(252,232,236,.9)),transparent 72%),
   radial-gradient(ellipse 26% 45% at 88% 70%,var(--fc,rgba(255,255,255,.9)),transparent 70%);
  animation:drift var(--sp,60s) linear infinite}
.fog.rev{animation-direction:reverse}
@keyframes drift{to{transform:translateX(-50%)}}

/* HUD (igloo-style annotations) */
.hud{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--rose-deep)}
.hud-corner{position:absolute;z-index:3;max-width:44vw}
.hud-corner.tl{top:calc(env(safe-area-inset-top,0px) + 18px);left:var(--gutter-l)}
.hud-corner.tr{top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--gutter-r);text-align:right}
.hud-corner.bl{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);left:var(--gutter-l)}
.hud-corner.br{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);right:var(--gutter-r);text-align:right}
.hud .slash{opacity:.55}

/* ---------- entrance gate ---------- */
.gate{position:fixed;inset:0;z-index:100;overflow:hidden;background:linear-gradient(180deg,#f3c6d1 0%,#f9dfe3 34%,#fff0ed 62%,#fffaf6 100%)}
.gate.gone{display:none}
.scene{position:absolute;inset:0;transition:transform 2.3s cubic-bezier(.65,0,.25,1)}
.sun{position:absolute;left:50%;bottom:34vh;width:74vmin;height:74vmin;transform:translate(-50%,50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,240,.95) 0%,rgba(255,236,226,.55) 35%,rgba(255,236,226,0) 70%)}
.facade{position:absolute;left:0;right:0;bottom:0;width:100%;height:80vh}
.gate .fog{transition:opacity .9s ease}
.gate.opening .fog,.gate.opening .hud-corner{opacity:0;transition:opacity .6s}
.gate-copy{position:absolute;top:0;left:0;right:0;text-align:center;padding:calc(env(safe-area-inset-top,0px) + 9vh) var(--gutter-r) 0 var(--gutter-l);transition:opacity .5s ease}
.gate-copy .label{color:var(--rose-deep)}
.gate-names{font-family:var(--script);font-size:clamp(54px,10vw,108px);line-height:1.05;color:var(--rose-deep);margin:6px 0 0;text-shadow:0 2px 24px rgba(255,255,255,.7)}
.gate-sub{font-family:var(--fell);font-style:italic;color:var(--muted);font-size:clamp(18px,2.3vw,22px)}
.enter{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 7vh);transform:translate(-50%,12px);z-index:3;opacity:0;pointer-events:none;
  border:1px solid var(--rose-deep);background:rgba(255,250,250,.88);backdrop-filter:blur(6px);color:var(--rose-deep);
  font-family:var(--fellsc);font-size:16px;letter-spacing:.14em;padding:13px 30px 12px;border-radius:999px;cursor:pointer;
  box-shadow:0 0 0 6px rgba(255,250,250,.45),0 14px 30px -18px rgba(165,69,93,.6);transition:background .3s,color .3s,opacity .8s,transform .8s;white-space:nowrap}
.gate.ready .enter{opacity:1;transform:translate(-50%,0);pointer-events:auto;animation:breathe 3.2s ease-in-out infinite}
.enter:hover{background:var(--rose-deep);color:#fff}
.enter .hint{display:block;font-family:var(--fell);font-style:italic;font-size:13px;letter-spacing:.02em;opacity:.8}
@keyframes breathe{50%{box-shadow:0 0 0 12px rgba(255,250,250,.15),0 14px 30px -18px rgba(165,69,93,.6)}}
.loader{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8.5vh);transform:translateX(-50%);z-index:3;text-align:center;transition:opacity .5s}
.loader .bar{width:160px;height:1px;background:rgba(165,69,93,.2);margin:10px auto 0;position:relative;overflow:hidden}
.loader .bar i{position:absolute;inset:0;background:var(--rose-deep);transform-origin:left;transform:scaleX(0)}
.gate.ready .loader{opacity:0}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#fff 0%,#fff8f6 60%,#fbe9ec 100%);opacity:0;pointer-events:none;transition:opacity .7s ease;z-index:4}
.gate.opening .gate-copy,.gate.opening .enter{opacity:0;pointer-events:none;animation:none}
.gate.opening .flash{transition-delay:1.6s;opacity:1}
.door-l,.door-r{transition:transform 1.5s cubic-bezier(.5,0,.2,1) .25s;transform-box:fill-box}
.door-l{transform-origin:left center}.door-r{transform-origin:right center}
.gate.opening .door-l,.gate.opening .door-r{transform:scaleX(.08)}
.gate.fading{opacity:0;transition:opacity .9s ease}

/* ---------- header + sound ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter-r) 14px var(--gutter-l);transition:background .4s,border-color .4s,color .4s;
  background:rgba(255,250,250,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar.dark{background:rgba(30,10,18,.45);border-color:rgba(255,210,222,.15)}
.topbar.dark .brand,.topbar.dark nav a{color:#ffe3ea}
.brand{font-family:var(--fell);font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .4s}
.brand .amp{font-size:1.3em}
.topbar nav{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.topbar nav a{color:var(--muted);text-decoration:none;transition:color .4s}
.topbar nav a:hover{color:var(--rose-deep)}
.music{position:fixed;z-index:60;left:var(--gutter-l);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;align-items:center;gap:10px;
  background:rgba(255,250,250,.86);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);cursor:pointer;box-shadow:0 8px 20px -14px rgba(58,42,46,.5)}
.music[hidden]{display:none}
.bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.bars i{width:2px;background:var(--rose);height:3px}
.music.playing .bars i{animation:eq 1s ease-in-out infinite}
.music.playing .bars i:nth-child(2){animation-delay:.2s}.music.playing .bars i:nth-child(3){animation-delay:.4s}.music.playing .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{50%{height:12px}}

/* ---------- hero: full photo folds into an arched portrait over giant marquee type ---------- */
.hero{height:280vh;position:relative;padding:0}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#fff6f6 0%,var(--rose-100) 70%,#f3cdd5 100%)}
.marquee{position:absolute;left:0;width:100%;white-space:nowrap;font-family:var(--cap);font-weight:600;font-size:clamp(64px,13vw,210px);line-height:1;letter-spacing:-.01em;pointer-events:none;will-change:transform}
.marquee .track{display:inline-block}
.marquee em{font-family:var(--script);font-style:normal;font-weight:400;font-size:1.05em;color:var(--rose);letter-spacing:0;padding:0 .12em}
.marquee.m1{top:15%;color:var(--rose-deep)}
.marquee.m2{top:58%;color:transparent;-webkit-text-stroke:1.5px var(--rose-deep)}
.marquee.m2 em{-webkit-text-stroke:0;color:var(--rose)}
.hero-card{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,42,46,.15) 0%,rgba(58,42,46,0) 32%,rgba(70,30,45,.58) 100%);pointer-events:none}
.hero-card .fog{bottom:-8%;height:42%;z-index:1;opacity:.75}
.hero-card .fog.f2{bottom:-14%;height:34%;--sp:44s;opacity:.9}
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;color:#fff;padding:0 var(--gutter-r) clamp(70px,13vh,130px) var(--gutter-l)}
.hero-copy .label{color:rgba(255,255,255,.92)}
.hero-copy h1{font-weight:400;font-size:clamp(52px,10.5vw,112px);line-height:1;margin:12px 0 16px;text-wrap:balance;text-shadow:0 4px 30px rgba(60,20,35,.35)}
.hero-copy h1 .amp{color:#ffd9e1;font-size:1.08em}
.hero-copy p{font-family:var(--fell);font-size:clamp(18px,2.3vw,22px)}
.hero-copy .addr{font-family:var(--ui);font-size:14px;opacity:.9;margin-top:2px}
.hero-copy>*{opacity:0;transform:translateY(16px);transition:opacity 1.2s ease,transform 1.2s ease}
body.entered .hero-copy>*{opacity:1;transform:none}
body.entered .hero-copy>*:nth-child(2){transition-delay:.3s}
body.entered .hero-copy>*:nth-child(3){transition-delay:.6s}
body.entered .hero-copy>*:nth-child(4){transition-delay:.8s}
.signature{position:absolute;left:50%;top:50%;z-index:4;width:min(980px,120vw);transform:translate(-50%,-50%) rotate(-8deg);text-align:center;pointer-events:none}
.signature .ink{display:inline-block;font-family:var(--script);font-size:clamp(110px,19vw,270px);line-height:1.2;color:#fff;padding:0 .2em;
  text-shadow:0 0 24px rgba(255,170,195,.9),0 0 60px rgba(217,90,125,.55);clip-path:inset(0 100% 0 0)}
.signature .nib{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 14px 6px rgba(255,190,210,.95),0 0 40px 14px rgba(230,110,145,.5);opacity:0}
.hero-hud{position:absolute;z-index:5;opacity:0}
.hero-hud .ln{display:block;height:1px;background:var(--rose-deep);margin-top:8px;transform-origin:left}
.hero-hud.r .ln{transform-origin:right}
.scroll-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);z-index:6;color:#fff;text-align:center}
.scroll-hint i{display:block;width:1px;height:34px;margin:8px auto 0;background:linear-gradient(#fff,transparent);animation:hint 2s ease-in-out infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- sections ---------- */
section{position:relative;padding-block:clamp(70px,12vw,120px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.col{max-width:780px;margin:0 auto;position:relative}
.wide{max-width:1100px;margin:0 auto;position:relative}
.center{text-align:center}
.lead{font-family:var(--fell);color:var(--muted);max-width:620px;margin:18px auto 0;font-size:clamp(19px,2.3vw,21px)}
.tint{background:linear-gradient(180deg,rgba(252,241,242,0),rgba(252,241,242,.7) 25%,rgba(252,241,242,.7) 75%,rgba(252,241,242,0))}
.flourish{display:block;width:min(260px,70%);height:auto;margin:16px auto 0;overflow:visible}
.flourish path{fill:none;stroke:var(--rose);stroke-width:1.3;stroke-linecap:round}
.flourish .leaf{fill:var(--rose-200);stroke:var(--rose)}
.flourish .gem{fill:var(--rose);stroke:none}
.ornate{position:relative}
.ornate::before,.ornate::after{content:"";position:absolute;width:34px;height:34px;background:var(--corner) center/contain no-repeat;pointer-events:none;opacity:.8}
.ornate::before{top:8px;left:8px}
.ornate::after{bottom:8px;right:8px;transform:rotate(180deg)}
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.contours path{fill:none;stroke:rgba(217,133,151,.28);stroke-width:1}

/* manifesto: words light up as you scroll */
.manifesto{padding-block:clamp(110px,18vw,200px);overflow:hidden}
.manifesto .big{position:relative;font-family:var(--cap);font-weight:600;font-size:clamp(30px,5.2vw,74px);line-height:1.12;letter-spacing:.005em;text-align:center;max-width:1180px;margin:0 auto;text-transform:uppercase}
.manifesto .big em{font-family:var(--fell);font-style:italic;font-weight:400;text-transform:none;color:var(--rose);font-size:1.12em;letter-spacing:0}
.manifesto .big .w{display:inline-block;opacity:.13;transition:none}
.manifesto .lead{position:relative}
.manifesto .seal-mark{display:block;margin:0 auto 26px;text-align:center}

/* cosmos: WebGL stardust (night) */
.to-night{height:45vh;background:linear-gradient(180deg,rgba(255,250,250,0),#8a4a5f 55%,var(--night))}
.to-dawn{height:60vh;background:linear-gradient(180deg,var(--night),#6e3249 22%,#c98799 52%,#f3d3da 78%,rgba(255,250,250,0))}
.cosmos{height:540vh;padding:0;background:var(--night)}
.cosmos-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#ffe6ec;
  background:radial-gradient(ellipse at 50% 45%,#4f1c33 0%,var(--night) 55%,var(--night-2) 100%)}
.cosmos-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,214,226,.18) 1px,transparent 1.2px);background-size:34px 34px;opacity:.7;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos-stage.nogl{background:radial-gradient(circle at 20% 30%,rgba(255,220,230,.5) 1px,transparent 2px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,rgba(255,200,215,.45) 1px,transparent 2px) 0 0/130px 130px,radial-gradient(ellipse at 50% 45%,#4f1c33 0%,var(--night) 60%,var(--night-2) 100%)}
.cosmos-stage.nogl #gl{display:none}
.c-caps{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10vh);text-align:center;padding:0 var(--gutter-r) 0 var(--gutter-l);z-index:3}
.c-cap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.c-cap.on{opacity:1;transform:none}
.c-cap .hud{color:#f6b8c8}
.c-cap h3{font-family:var(--fell);font-style:italic;font-weight:400;font-size:clamp(36px,6.4vw,78px);line-height:1.05;margin-top:8px;color:#fff3f6;text-shadow:0 0 30px rgba(230,110,150,.45)}
.c-hud{position:absolute;z-index:3;color:#f8c6d3;opacity:0;transition:opacity .6s}
.c-hud.on{opacity:1}
.c-hud .ln{display:block;width:120px;height:1px;background:linear-gradient(90deg,#f8c6d3,transparent);margin-top:8px}
.c-hud.r .ln{background:linear-gradient(270deg,#f8c6d3,transparent);margin-left:auto}
.c-hud.l{left:max(6vw,var(--gutter-l));top:24%}
.c-hud.r{right:max(6vw,var(--gutter-r));top:62%;text-align:right}
.c-count{position:absolute;right:var(--gutter-r);top:calc(env(safe-area-inset-top,0px) + 84px);color:#f6b8c8;z-index:3}
.c-progress{position:absolute;left:var(--gutter-l);right:var(--gutter-r);top:calc(env(safe-area-inset-top,0px) + 76px);height:1px;background:rgba(255,214,226,.15);z-index:3}
.c-progress i{position:absolute;inset:0;background:#f6b8c8;transform-origin:left;transform:scaleX(0)}
.c-tip{position:absolute;left:var(--gutter-l);top:calc(env(safe-area-inset-top,0px) + 92px);color:rgba(246,184,200,.7);z-index:3}

/* floating gallery (scattered, parallax, develops from grey to color) */
.gallery-sec{padding-bottom:clamp(90px,14vw,180px);overflow:hidden}
.g-head{font-family:var(--cap);font-weight:600;font-size:clamp(40px,8vw,120px);line-height:1;text-transform:uppercase;text-align:center;letter-spacing:-.005em}
.g-head em{font-family:var(--fell);font-style:italic;font-weight:400;text-transform:none;color:var(--rose)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);margin-top:clamp(50px,8vw,100px);position:relative}
.g-item{grid-column:var(--c);margin-top:var(--mt,0);position:relative;cursor:zoom-in;--g:1}
.g-item .cap{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--muted)}
.g-item .cap b{font-weight:400;color:var(--rose-deep)}
.g-frame{position:relative;overflow:hidden;background:var(--rose-100);border-radius:4px;aspect-ratio:var(--ar,3/4)}
.g-item.arch .g-frame{border-radius:999px 999px 4px 4px}
.g-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(var(--g)) contrast(calc(1 + var(--g)*.05));transform:scale(calc(1.12 - (1 - var(--g))*.12));transition:transform .2s linear}
.g-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#f3a7ba,#b65a73);mix-blend-mode:soft-light;opacity:calc(var(--g)*.85);pointer-events:none}
.g-item:hover .g-frame img{filter:grayscale(0)}
.g-item:hover .g-frame::after{opacity:0}
.g-item button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:zoom-in}

/* date band + countdown */
.band-date{position:relative;z-index:1;overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose-deep);
  padding:14px 0;border-block:1px solid var(--line);background:rgba(252,241,242,.85)}
.band-date .track{display:inline-block;animation:ticker 40s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,20px);margin-top:40px}
.count>div{border-top:1px solid var(--rose-200);padding-top:18px;text-align:center}
.count b{display:block;font-family:var(--cap);font-weight:600;font-size:clamp(54px,11vw,150px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.count span{display:block;margin-top:10px}
.count-note{font-family:var(--fell);font-style:italic;color:var(--muted);margin-top:22px}

/* on the day: rose vine */
.tl{position:relative;padding-left:64px;margin-top:40px}
.vine{position:absolute;left:0;top:0;width:56px;height:100%;overflow:visible}
.vine .stem{fill:none;stroke:#b9c6ad;stroke-width:2;stroke-linecap:round}
.vine .lf{fill:#d8e2cf;stroke:#a7b49b;stroke-width:1}
.timeline{display:grid;gap:16px}
.slot{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px 28px;box-shadow:0 18px 34px -32px rgba(58,42,46,.6)}
.slot h3{font-weight:400;font-size:clamp(25px,3.4vw,31px);line-height:1.2}
.slot time{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.slot p{grid-column:1/-1;font-family:var(--fell);font-style:italic;font-size:17px;color:var(--muted)}
.slot.key{border-color:var(--rose-200);background:linear-gradient(135deg,#fff,var(--rose-100))}
.slot.key time{color:var(--rose-deep)}
.bud{position:absolute;left:-55px;top:50%;width:34px;height:34px;margin-top:-17px;transform:scale(0) rotate(-120deg);transition:transform .9s cubic-bezier(.3,1.6,.5,1)}
.bud.on{transform:scale(1) rotate(0)}
.tentative{font-family:var(--fell);font-style:italic;font-size:16px;color:var(--muted);text-align:center;margin-top:20px}
.venue-card{margin-top:28px;border-radius:4px;border:1px solid var(--line);background:rgba(252,241,242,.85);padding:26px 30px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.venue-card h3{font-weight:400;font-size:28px;line-height:1.2}
.venue-card address{font-style:normal;font-family:var(--ui);font-size:15px;color:var(--muted)}
.pill{display:inline-block;border:1px solid var(--rose-deep);border-radius:999px;padding:10px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);text-decoration:none;transition:background .3s,color .3s}
.pill:hover{background:var(--rose-deep);color:#fff}

/* story: a sealed letter */
.story{display:grid;grid-template-columns:4fr 6fr;gap:clamp(28px,5vw,56px);align-items:start;margin-top:54px}
.cameo{position:sticky;top:110px;aspect-ratio:4/5;border-radius:50%;padding:10px;background:#fff;box-shadow:0 0 0 1px var(--rose-200),0 30px 50px -36px rgba(58,42,46,.7)}
.cameo-in{width:100%;height:100%;border-radius:50%;overflow:hidden}
.cameo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.letter{background:#fffdfc;border:1px solid var(--line);border-radius:3px;padding:64px clamp(24px,5vw,54px) 48px;box-shadow:0 30px 60px -40px rgba(58,42,46,.6);min-width:0;
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(240,198,206,.25) 33px 34px)}
.seal{position:absolute;left:50%;top:-38px;width:84px;height:84px;margin-left:-42px;filter:drop-shadow(0 8px 10px rgba(120,30,55,.3))}
.letter .dear{font-family:var(--script);font-size:38px;color:var(--rose-deep);line-height:1.2;margin-bottom:14px}
.letter p{font-size:19px;line-height:1.75;color:#45343a}
.letter p+p{margin-top:1em}
.letter h3{font-family:var(--fellsc);font-weight:400;font-size:18px;letter-spacing:.14em;color:var(--rose);margin:30px 0 6px}
.letter .drop::first-letter{font-family:var(--fell);float:left;font-size:70px;line-height:.8;padding:8px 10px 0 0;color:var(--rose-deep)}
.letter .sign{margin-top:28px;font-family:var(--fell);font-style:italic;color:var(--muted)}
.letter .sign .script{font-family:var(--script);font-style:normal;font-size:40px;color:var(--rose-deep);line-height:1.1}

/* rsvp */
.form{margin-top:36px;text-align:left}
.field{margin-bottom:22px}
.field>label,.field>.flabel{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
input[type=text],input[type=email],select,textarea{width:100%;font-family:var(--display);font-size:18px;color:var(--ink);background:var(--card);border:1px solid var(--rose-200);border-radius:4px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--rose-deep);box-shadow:0 0 0 3px rgba(217,133,151,.18)}
textarea{min-height:110px;resize:vertical}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;gap:10px;border:1px solid var(--rose-200);border-radius:4px;padding:12px 14px;background:var(--card);cursor:pointer;font-size:17px;transition:all .2s}
.seg label::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--rose);flex:none;transition:all .2s}
.seg input:checked+label{background:var(--rose-100);border-color:var(--rose)}
.seg input:checked+label::before{background:var(--rose-deep);border-color:var(--rose-deep);box-shadow:inset 0 0 0 3px var(--rose-100)}
.seg input:focus-visible+label{outline:2px solid var(--rose-deep);outline-offset:2px}
.guest{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.hidden{display:none!important}
.send{width:100%;border:0;border-radius:4px;background:var(--rose-deep);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:17px;cursor:pointer;transition:background .3s}
.send:hover{background:#86344a}
.send:disabled{opacity:.6;cursor:wait}
.err{color:#a3283f;font-size:17px;text-align:center;margin-top:12px}
.formnote{font-family:var(--fell);font-style:italic;font-size:16px;color:var(--muted);text-align:center;margin-top:12px}
.thanks{text-align:center;padding:30px 0}
.thanks .script{font-family:var(--script);font-size:64px;color:var(--rose-deep);line-height:1.1}
.signoff{margin-top:44px;text-align:center}
.signoff .script{font-family:var(--script);font-size:44px;color:var(--rose-deep);line-height:1.2}

/* gifts */
.gift-art{width:min(230px,60%);margin:26px auto 4px;display:block}
.gifts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;text-align:left}
.gift{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:30px 28px;box-shadow:0 18px 34px -32px rgba(58,42,46,.6)}
.gift h3{font-weight:400;font-size:27px;line-height:1.2;margin:6px 0 8px}
.gift p{font-family:var(--fell);font-style:italic;color:var(--muted)}
.gift .soon{margin-top:14px;display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);background:var(--rose-100);border-radius:999px;padding:6px 14px}

/* footer: the estate emerging from the fog */
footer{text-align:center;padding:30px 0 calc(env(safe-area-inset-bottom,0px) + 80px);overflow:hidden;background:linear-gradient(180deg,rgba(252,241,242,0),rgba(252,233,237,.95))}
.footer-stage{position:relative;max-width:1150px;margin:0 auto;padding:0 var(--gutter-r) 0 var(--gutter-l)}
.footer-art svg{width:100%;height:auto;display:block}
.footer-stage .fog{bottom:-4%;height:55%;opacity:.95}
.footer-stage .fog.f2{bottom:20%;height:40%;--sp:70s;opacity:.7}
.footer-name{font-family:var(--cap);font-weight:600;font-size:clamp(40px,9.5vw,150px);line-height:1;color:var(--rose-deep);margin-top:26px;text-transform:uppercase;padding:0 var(--gutter-r) 0 var(--gutter-l)}
.footer-name em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--rose);text-transform:none}
footer .cap{color:var(--muted);margin-top:16px;padding:0 var(--gutter-r) 0 var(--gutter-l)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(40,24,30,.94);display:grid;place-items:center;padding:40px 16px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,1100px);max-height:80vh;border-radius:6px}
.lightbox .lb-cap{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);text-align:center;color:#f6b8c8}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer;padding:10px 16px}
.lb-close{top:calc(env(safe-area-inset-top,0px) + 10px);right:max(10px,env(safe-area-inset-right,0px))}
.lb-prev{left:max(4px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-next{right:max(4px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}

@media (max-width:700px){
  body{font-size:18px}
  .topbar nav{gap:14px}
  .topbar nav .opt{display:none}
  .story{grid-template-columns:1fr}
  .cameo{position:relative;top:0;width:min(300px,80%);margin:0 auto}
  .gifts{grid-template-columns:1fr}
  .guest{grid-template-columns:1fr}
  .slot{padding:20px 20px}
  .tl{padding-left:46px}
  .vine{width:40px}
  .bud{left:-44px;width:28px;height:28px;margin-top:-14px}
  .facade{height:70vh}
  .enter{bottom:calc(env(safe-area-inset-bottom,0px) + 4vh)}
  .loader{bottom:calc(env(safe-area-inset-bottom,0px) + 6vh)}
  .hero{height:240vh}
  .marquee.m1{top:18%}.marquee.m2{top:62%}
  .cosmos{height:460vh}
  .c-hud.l{top:16%}.c-hud.r{top:66%}
  .c-hud .ln{width:70px}
  .hud-corner{max-width:46vw;font-size:10px}
  .gate-copy{padding-top:calc(env(safe-area-inset-top,0px) + 106px)}
  .gallery{grid-template-columns:repeat(2,1fr);row-gap:0}
  .g-item{grid-column:auto!important;margin-top:var(--mmt,0)!important}
  .g-item.wide-m{grid-column:1 / -1!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s!important;animation:none!important}
  #mist,#flutter,#cursor{display:none}
  .hero{height:auto}.hero-stage{position:relative;height:100vh}
  .cosmos{height:auto}.cosmos-stage{position:relative}
  .cosmos-stage{height:auto;padding:140px 16px 120px}
  .c-caps{position:relative;bottom:auto}
  .c-cap{position:relative;opacity:1;transform:none;margin-bottom:40px}
  .c-hud,.c-progress,.c-count,.c-tip,.signature,.hero-hud,.marquee{display:none}
  .g-item{--g:0}
  .manifesto .big .w{opacity:1}
}