:root{
  --bg:#F3F6F1; --paper:#FBFCFA; --ink:#25322B; --muted:#5A675B;
  --olive:#65733F; --line:rgba(90,105,75,.32); --bar:rgba(101,115,63,.34);
  --wash1:rgba(160,186,210,.50); --wash2:rgba(233,200,195,.55); --wash3:rgba(180,196,150,.50);
  --grain:.20;
  --serif:"Cormorant Infant","Noto Serif Georgian",Georgia,serif;
  --script:"Marck Script","Cormorant Infant",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17201B; --paper:#202B25; --ink:#EAF0E6; --muted:#A9B5A6;
    --olive:#B5C48F; --line:rgba(205,220,190,.26); --bar:rgba(181,196,143,.28);
    --wash1:rgba(70,105,140,.30); --wash2:rgba(150,90,95,.20); --wash3:rgba(90,125,80,.26);
    --grain:.10;
  }
}
:root[data-theme="dark"]{
  --bg:#17201B; --paper:#202B25; --ink:#EAF0E6; --muted:#A9B5A6;
  --olive:#B5C48F; --line:rgba(205,220,190,.26); --bar:rgba(181,196,143,.28);
  --wash1:rgba(70,105,140,.30); --wash2:rgba(150,90,95,.20); --wash3:rgba(90,125,80,.26);
  --grain:.10;
}

*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
html.locked,html.locked body{overflow:hidden}
body{
  margin:0; color:var(--ink); font-family:var(--serif);
  font-size:clamp(1.15rem,1.08rem + .3vw,1.3rem); line-height:1.6;
  font-variant-numeric:lining-nums;
  background:
    radial-gradient(55vmax 40vmax at 6% 2%,var(--wash1),transparent 65%),
    radial-gradient(50vmax 38vmax at 104% 28%,var(--wash2),transparent 65%),
    radial-gradient(60vmax 45vmax at -4% 62%,var(--wash3),transparent 65%),
    radial-gradient(50vmax 38vmax at 100% 92%,var(--wash1),transparent 65%),
    var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .34 0 0 0 0 .28 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1,h2,h3,p{margin:0}
h2{font-weight:300;font-style:italic;font-size:clamp(2.1rem,6.5vw,3.2rem);line-height:1.15;text-align:center}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.sec{position:relative;max-width:1040px;margin:0 auto;padding:clamp(3.5rem,9vw,6.5rem) 1.25rem}
.narrow{max-width:640px;text-align:center}
.lead{color:var(--muted);margin-top:1rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:.55rem 1.7rem;border:1px solid var(--olive);border-radius:999px;
  background:transparent;color:var(--olive);font:inherit;font-size:1.05rem;
  cursor:pointer;text-decoration:none;transition:background .25s,color .25s;
}
.btn:hover{background:var(--olive);color:var(--paper)}
.btn.solid{background:var(--olive);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--olive)}

/* ───────── Gate (intro) ───────── */
.gate{
  position:fixed;inset:0;z-index:60;display:block;padding:0;border:0;overflow:hidden;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.leaf{
  position:absolute;top:0;bottom:0;width:50.3%;display:block;
  background:#F7F7F2;overflow:hidden;
  transition:transform 1.4s cubic-bezier(.7,0,.2,1) .3s,opacity .4s 1.4s;
  will-change:transform;
}
.leaf.l{left:0;transform-origin:0 50%}
.leaf.r{right:0;transform-origin:100% 50%}
.gate.opening .leaf.l{transform:perspective(1400px) rotateY(86deg);opacity:0}
.gate.opening .leaf.r{transform:perspective(1400px) rotateY(-86deg);opacity:0}
.gate-names{
  position:absolute;left:0;right:0;top:calc(11% + env(safe-area-inset-top,0px));
  text-align:center;font-size:clamp(1.7rem,6vw,2.3rem);font-style:italic;font-weight:300;
}
.hint{
  position:absolute;left:0;right:0;bottom:calc(13% + env(safe-area-inset-bottom,0px));
  text-align:center;font-style:italic;color:var(--muted);font-size:1.25rem;
}
.gate.opening .hint,.gate.opening .gate-names{opacity:0;transition:opacity .5s}

/* ───────── Hero ───────── */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:clamp(1.5rem,5vw,3.5rem) 1rem}
.arch{
  position:relative;width:min(470px,90vw);min-height:min(84svh,720px);
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  padding:20% 8% 15%;overflow:hidden;
  border:1px solid var(--line);border-radius:999px 999px 0 0;
  box-shadow:0 0 0 9px var(--bg),0 0 0 10px var(--line);
  background:
    radial-gradient(70% 45% at 50% 10%,var(--wash1),transparent 70%),
    radial-gradient(60% 40% at 92% 58%,var(--wash2),transparent 70%),
    radial-gradient(70% 45% at 8% 96%,var(--wash3),transparent 70%),
    var(--paper);
}
.invite{font-style:italic;color:var(--muted);font-size:1.2rem}
.names{display:flex;flex-direction:column;margin:1.3rem 0 1.1rem;font-weight:300}
.names:focus{outline:none}
.name{font-style:italic;font-size:clamp(3.5rem,15.5vw,5.6rem);line-height:.95;letter-spacing:-.01em;overflow-wrap:anywhere}
.name.a{align-self:flex-start;margin-left:2%}
.name.b{align-self:flex-end;margin-right:2%}
.amp{align-self:center;margin:-.05em 0;color:var(--olive);font-family:var(--script);font-style:normal;font-size:clamp(2.4rem,10vw,3.8rem);line-height:1}
.date{font-size:1.55rem;letter-spacing:.03em}
.rise{opacity:0}
.opened .rise{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) calc(.7s + var(--d,0s)) both}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ───────── Countdown ───────── */
.count{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2rem}
.count>div{padding:.3rem .2rem;border-left:1px solid var(--line)}
.count>div:first-child{border-left:0}
.count b{display:block;font-weight:300;font-size:clamp(2.4rem,10vw,4.2rem);line-height:1.1;font-variant-numeric:lining-nums tabular-nums}
.count span{color:var(--muted);font-style:italic;font-size:1.05rem}

/* ───────── Timeline ───────── */
.timeline{position:relative;list-style:none;margin:2.5rem 0 0;padding:0}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.event{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center;padding:2.2rem 0}
.event::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bg);border:1.5px solid var(--olive)}
.event .txt{text-align:right}
.event:nth-child(even) .txt{order:2;text-align:left}
.event:nth-child(even) .art{order:1;justify-self:end}
.event .t{display:block;font-size:clamp(2.4rem,8vw,3.4rem);font-weight:300;line-height:1;color:var(--olive)}
.event h3{margin-top:.5rem;font-weight:400;font-style:italic;font-size:1.7rem;line-height:1.25}
.event p{margin-top:.3rem;color:var(--muted)}
.event .btn{margin-top:1.1rem;min-height:42px;font-size:1rem}
.art{
  width:min(270px,72vw);aspect-ratio:5/6;overflow:hidden;background:#F1F4EE;
  border:1px solid var(--line);border-radius:999px 999px 6px 6px;
  outline:1px solid var(--line);outline-offset:7px;
}
.art svg{display:block;width:100%;height:100%}
@media (max-width:720px){
  .timeline::before{left:5px}
  .event{grid-template-columns:1fr;gap:1.4rem;padding:2rem 0 2rem 2.2rem}
  .event::before{left:5px;top:3.6rem}
  .event .txt,.event:nth-child(even) .txt{order:0;text-align:left}
  .event:nth-child(even) .art{order:0;justify-self:start}
}

footer{padding:3rem 1rem 4.5rem;text-align:center;color:var(--muted)}
footer .fn{display:block;color:var(--ink);font-weight:300;font-style:italic;font-size:2rem;line-height:1.2}

/* Georgian typography: upright letters, tuned sizes */
h2,.invite,.event h3,.count span,.field span,.status,.hint{font-style:normal}
h2{font-size:clamp(1.9rem,5.6vw,2.7rem);line-height:1.25}
.event h3{font-size:1.45rem}

/* Names: copperplate script in metallic gold, & between two fine rules */
:root{
  --display:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --gold:linear-gradient(172deg,#7E5F22 0%,#C4A050 30%,#8C6B29 52%,#D2B460 74%,#8F6E2B 100%);
  --gold-line:#B0914A;
}
.name,.gate-names,footer .fn{
  font-family:var(--display);font-style:normal;font-weight:400;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.name{font-size:clamp(4.4rem,20vw,7rem);line-height:1.05;letter-spacing:0;padding:.1em .3em .2em;margin:-.05em 0}
.name.a{align-self:center;margin-left:0;margin-right:8%}
.name.b{align-self:center;margin-right:0;margin-left:10%}
.amp{
  align-self:stretch;display:flex;align-items:center;gap:1rem;margin:0;
  color:#A98536;font-family:var(--serif);font-style:italic;font-size:2rem;line-height:1;
}
.amp::before,.amp::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.amp::after{background:linear-gradient(270deg,transparent,var(--gold-line))}
.gate-names{font-size:clamp(2.6rem,10vw,3.6rem);line-height:1.2;padding:.1em .3em .2em}
footer .fn{font-size:clamp(2.6rem,9vw,3.4rem);line-height:1.2;padding:.1em .3em .2em}

/* Cover: the photo is split across the two gate leaves */
.leaf .pic{position:absolute;top:0;bottom:0;width:198.8%;background:url("../img/cover.jpg") center / min(720px,118vw) auto no-repeat}
.leaf.l .pic{left:0}
.leaf.r .pic{right:0}
.gate .hint{color:#6E6650}

/* Closing message: one gold rule and three centred lines, styled like the date under the names */
.closing{max-width:640px;margin:0 auto;padding:clamp(2.5rem,7vw,4rem) 1.25rem 0;text-align:center}
.closing .rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-line) 25%,var(--gold-line) 75%,transparent)}
.closing p{margin-top:1.6rem;color:var(--muted);line-height:1.6}
.closing p span{display:block}

/* Green branches in the arch corners */
.sprig{position:absolute;bottom:-6px;width:31%;aspect-ratio:120/200;color:var(--olive);opacity:.75;pointer-events:none}
.sprig.l{left:-2%}
.sprig.r{right:-2%;transform:scaleX(-1)}

/* Music button */
.music{
  position:fixed;z-index:45;
  right:calc(1rem + env(safe-area-inset-right,0px));
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:var(--paper);color:var(--olive);cursor:pointer;
  transition:background .25s,color .25s;
}
.music:hover{background:var(--olive);color:var(--paper)}
.music svg{display:block;width:22px;height:22px}
.music .slash{display:none}
.music[aria-pressed="false"] .slash{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rise{opacity:1}
}