:root{
  --ivory:#f5f0e5; --burg:#6b1f2e; --ox:#561822; --gold:#b8a070; --rule:#dccfb1; --marble:#e4e0d8; --linen:#e8dfcc; --wood:#c9a67c; --ink:#3a2a26;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font:400 1.05rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:12px;border:1px solid var(--gold);pointer-events:none;z-index:50}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.75rem,5vw,4rem)}
.caps{text-transform:uppercase;letter-spacing:.16em;font-weight:500;font-size:.8rem}
.x{font-stretch:125%}

.brand{display:block;padding-top:clamp(2rem,4vw,3rem);font:600 clamp(1.05rem,2.3vw,1.9rem)/1.15 var(--sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--burg)}

.hero{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,4vw,4.5rem);align-items:start;padding-top:clamp(1.75rem,4vw,3.5rem)}
.hero h1{font:400 clamp(2rem,5.3vw,5.4rem)/1.02 var(--sans);font-stretch:125%;letter-spacing:.005em;text-transform:uppercase;color:var(--ox)}
.hero h1 .l{display:block;min-height:1.02em;white-space:nowrap}
.js .hero h1 .l{visibility:hidden}
.caret{display:inline-block;width:.06em;height:.8em;margin-left:.08em;background:var(--burg);vertical-align:-.04em;animation:blink .8s steps(1) infinite}
.caret.off{opacity:0;transition:opacity .6s}
@keyframes blink{50%{opacity:0}}

.sub{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:clamp(1.25rem,2.4vw,2rem)}
.sub .born{font:600 1.05rem var(--sans);font-stretch:125%;letter-spacing:.34em;text-transform:uppercase;color:var(--burg)}
.sub i{width:42px;height:1px;background:var(--gold)}
.sub a{font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--burg);border-bottom:1px solid var(--burg);padding-bottom:.15rem}
.sub a:hover{color:var(--ox);border-color:var(--gold)}

.pieces{display:grid;grid-template-columns:1fr;gap:1.75rem;max-width:28rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.sq{position:relative;aspect-ratio:1;overflow:hidden;background:var(--c);border:1px solid var(--rule)}
.sq svg,.sq img{position:absolute;inset:0;width:100%;height:100%}
.sq img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.piece:hover .sq img{transform:scale(1.05)}
.piece .caps{display:block;margin-top:.7rem;color:var(--ox);font-size:.85rem}

/* arch: hero photo slot with marble until a photo is added */
.archwrap{position:sticky;top:2.5rem;justify-self:center;width:100%;max-width:26rem}
.arch{position:relative;aspect-ratio:3/4.3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--marble);outline:1px solid var(--gold);outline-offset:9px}
.arch svg,.arch img{position:absolute;inset:0;width:100%;height:100%}
.arch img{object-fit:cover}
.seal{position:absolute;left:-2.2rem;bottom:2.2rem;width:5.6rem;height:5.6rem;filter:drop-shadow(0 1px 0 rgba(86,24,34,.08))}
.seal text{font-family:var(--sans);font-weight:600}
.seal .ring{transform-origin:50px 50px;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* invitation */
.arrived{position:relative;margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3.6vw,3rem);background:#ece7dd;border:1px solid var(--gold);outline:1px solid rgba(184,160,112,.55);outline-offset:6px;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;align-items:center}
.arrived h2{font:400 clamp(1.5rem,3vw,2.5rem)/1.08 var(--sans);font-stretch:125%;letter-spacing:.06em;text-transform:uppercase;color:var(--ox)}
.arrived form{display:flex;gap:.7rem;flex-wrap:wrap}
.arrived input{flex:1 1 13rem;padding:.95rem 1rem;border:1px solid var(--burg);background:var(--ivory);font:400 1rem var(--sans);color:var(--ink);border-radius:0}
.arrived input::placeholder{color:#8f7d70}
.arrived button{padding:.95rem 1.5rem;border:1px solid var(--burg);background:var(--burg);color:var(--ivory);font:500 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.arrived button:hover{background:transparent;color:var(--burg)}
#msg{grid-column:2;min-height:1.4rem;margin-top:-.8rem;color:var(--burg);font-weight:500}

footer{margin-top:2.25rem;padding:1rem 0 2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#7d6c62}
footer a:hover{color:var(--burg)}

.js .sub,.js .pieces,.js .archwrap,.js .arrived{opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s ease}
.js.done .sub,.js.done .pieces,.js.done .archwrap,.js.done .arrived{opacity:1;transform:none}
.js.done .pieces{transition-delay:.2s}.js.done .archwrap{transition-delay:.15s}.js.done .arrived{transition-delay:.45s}

@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:clamp(1.7rem,8vw,3.6rem)}
  .archwrap{order:3;position:relative;top:auto;max-width:17rem;justify-self:start;margin-left:2rem}
  .arrived{grid-template-columns:1fr}
  #msg{grid-column:1}
}
@media(prefers-reduced-motion:reduce){
  .js .sub,.js .pieces,.js .archwrap,.js .arrived{opacity:1;transform:none;transition:none}
  .caret,.seal .ring{animation:none}html{scroll-behavior:auto}
}