@font-face{font-family:"Charming Atelier";src:url("fonts/CharmingAtelierSerif-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Charming Atelier";src:url("fonts/CharmingAtelierSerif-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Charming Atelier";src:url("fonts/CharmingAtelierSerif-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Charming Atelier";src:url("fonts/CharmingAtelierSerif-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Sam Script";src:url("fonts/SamScript.woff2") format("woff2"),url("fonts/SamScript.woff") format("woff");font-display:swap}
@font-face{font-family:"Sam Script Alt";src:url("fonts/SamScriptAlt.woff2") format("woff2"),url("fonts/SamScriptAlt.woff") format("woff");font-display:swap}
@font-face{font-family:"Dreams On Paper";src:url("fonts/DreamsOnPaper.woff") format("woff");font-display:swap}
@font-face{font-family:"Gerald and Margaret";src:url("fonts/GeraldandMargaret.woff2") format("woff2"),url("fonts/GeraldandMargaret.woff") format("woff");font-display:swap}
/* Joanne & Brendan — black ink on cream paper, hand-drawn ranch.
   Colors and fonts are set here once; change a value to change it everywhere. */
:root{
  --linen:#F4EDE5;     /* page ground */
  --paper:#FBF8F3;     /* cards */
  --blush:#EBC8C6;     /* the main pink */
  --rose:#C48A93;      /* deeper pink: buttons, accents */
  --sage:#7E8B70;      /* muted green */
  --sage-deep:#5E6A55; /* green bands, logo, headings */
  --ink:#3D4537;       /* body text */
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --display:"Bodoni Moda","Didot","Bodoni 72",serif;
  --serif:"Cormorant Garamond","Garamond","Times New Roman",serif;
  --label:"Jost","Futura","Helvetica Neue",sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --line:color-mix(in srgb,var(--sage-deep) 25%,transparent);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--linen);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.band{padding-inline:var(--gutter);padding-block:clamp(64px,10vw,120px)}
.inner{max-width:1040px;margin-inline:auto}
.label{font-family:var(--label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:.68rem}
.lines{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.lines li{font-size:1.08rem}
.center{text-align:center}
.sr{position:absolute;left:-9999px}
.dress{font-style:italic;color:var(--rose)}
.logo{display:block;background:url("images/logo.png") center/contain no-repeat;aspect-ratio:943/483}

/* Header with tabs */
.top{position:sticky;top:0;z-index:10;background:var(--linen);border-bottom:1px solid var(--line);padding-inline:var(--gutter);padding-block:calc(env(safe-area-inset-top,0px) + 14px) 14px}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px}
.top .logo{width:118px;color:var(--sage-deep)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.2vw,30px);align-items:center}
nav a{text-decoration:none;font-family:var(--label);font-weight:500;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);padding-block:6px;border-bottom:1px solid transparent;transition:border-color .2s,background .2s,color .2s}
nav a:hover{border-color:var(--rose)}
nav a.rsvp{background:var(--blush);padding:9px 16px;border:0}
nav a.rsvp:hover{background:var(--rose);color:var(--paper)}
@media (max-width:860px){
  html{scroll-padding-top:150px}
  .top .inner{flex-direction:column;gap:10px}
  .top .logo{width:104px}
  nav{width:100%}
  nav ul{flex-wrap:wrap;justify-content:center;gap:6px 18px}
  nav a{white-space:nowrap}
  nav a.rsvp{padding:6px 12px}
}

/* Lace */
.hero{background:var(--blush);padding-inline:var(--gutter);padding-block:clamp(40px,7vw,80px);overflow:hidden}
.lace{position:relative;width:min(100%,760px);margin-inline:auto;aspect-ratio:835/606;background:url("images/lace.png") center/contain no-repeat;container-type:inline-size}
.lace-text{position:absolute;inset:30% 34.6% 29% 34.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;text-align:center;color:var(--sage-deep)}
.lace-text .logo{width:100%}
.lace-text .rule{width:6cqw;height:1px;background:var(--sage)}
.lace-text .label{font-size:max(6px,1.35cqw);letter-spacing:.26em;line-height:1.6}
.under{text-align:center;margin:clamp(24px,4vw,36px) 0 0;color:var(--sage-deep);font-style:italic;font-size:1.15rem}
.who{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;margin:14px 0 0;color:var(--sage-deep)}
.linkish{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--rose);text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .hero .lace{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes settle{from{transform:scale(.97) rotate(-1deg)}to{transform:none}}
}

/* Section titles */
.sec-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(2.6rem,8vw,5.2rem);line-height:1;color:var(--sage-deep);text-align:center;margin:0 0 clamp(40px,6vw,72px);text-wrap:balance}
.sec-title .script{display:block;font-family:var(--script);text-transform:none;font-size:.62em;color:var(--rose);margin-bottom:-.05em;letter-spacing:0;line-height:1.05}
.blush{background:var(--blush)}
.blush .sec-title .script{color:var(--paper)}
.blush .dress{color:var(--sage-deep)}
.paper{background:var(--paper)}

/* Weekend */
.days{max-width:760px;margin-inline:auto}
.day{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding-block:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.day:last-child{border-bottom:1px solid var(--line)}
.day-when{display:flex;flex-direction:column;gap:2px;padding-top:.7rem}
.day-when .dow{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;line-height:1.1;color:var(--sage-deep)}
.day-when .date{font-style:italic;font-size:1.05rem}
.day-events{display:grid;gap:28px;min-width:0}
.ev h3,.event h3{font-family:var(--script);font-weight:400;margin:0 0 .2rem;font-size:clamp(2.5rem,6vw,3.4rem);line-height:1.05;color:var(--sage-deep)}
.private{background:var(--paper);padding:clamp(20px,4vw,32px);outline:1px solid var(--rose);outline-offset:-8px}
.pill{display:inline-block;background:var(--rose);color:var(--paper);padding:5px 10px;margin-bottom:10px}
@media (max-width:620px){.day{grid-template-columns:minmax(0,1fr);gap:12px;text-align:center}.day-when{padding-top:0}}

/* Travel */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(48px,8vw,96px)}
.event{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem}
.green{background:var(--sage-deep);color:var(--paper)}
.green .sec-title{color:var(--paper)}
.green .sec-title .script,.green .event h3,.green .label{color:var(--blush)}
.btn{display:inline-block;text-decoration:none;font-family:var(--label);font-weight:500;letter-spacing:.24em;font-size:.68rem;text-transform:uppercase;padding:13px 26px;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.green .btn:hover{background:var(--blush);color:var(--sage-deep);border-color:var(--blush)}
.btn.solid{background:var(--rose);color:var(--paper);border-color:var(--rose)}
.btn.solid:hover{background:var(--sage-deep);border-color:var(--sage-deep)}
.btn:disabled{opacity:.6;cursor:wait}

/* Activities */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.act{background:var(--linen);padding:36px 24px;text-align:center;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.act h3{margin:0;font-family:var(--script);font-weight:400;font-size:2.7rem;color:var(--sage-deep);line-height:1}
.act p{margin:0;font-size:1.02rem;max-width:28ch}
.act .label{color:var(--rose)}
.act .spots{font-style:italic;font-size:.98rem;color:var(--sage-deep)}
.prose{max-width:34rem;margin-inline:auto;text-align:center;font-size:1.15rem}

/* FAQ */
.faq{max-width:760px;margin-inline:auto;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-block:20px;font-size:clamp(1.2rem,2.6vw,1.45rem);font-weight:500;color:var(--sage-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--label);font-weight:400;font-size:1.3rem;color:var(--rose);flex-shrink:0;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding-bottom:24px;max-width:60ch;font-size:1.08rem}

/* RSVP */
.rsvp-card{max-width:680px;margin-inline:auto;background:var(--paper);border:1px solid var(--blush);outline:1px solid var(--blush);outline-offset:-10px;padding:clamp(40px,6vw,64px) clamp(22px,6vw,56px);display:flex;flex-direction:column;gap:1.1rem}
.rsvp-head{text-align:center;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.rsvp-head h2{font-family:var(--script);font-weight:400;margin:0;font-size:clamp(3rem,8vw,4rem);color:var(--sage-deep);line-height:1.05}
.rsvp-head .label{color:var(--rose)}
.rsvp-head p{margin:0;max-width:44ch}
.rsvp-form{display:flex;flex-direction:column;gap:30px;margin-top:12px}
.rsvp-block{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.rsvp-block h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem;letter-spacing:.06em;color:var(--sage-deep)}
.rsvp-block .sub{margin:-6px 0 0;font-style:italic;font-size:1rem}
.person{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.person .nm{font-size:1.12rem;min-width:0}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);cursor:pointer;color:var(--sage-deep);transition:background .15s,color .15s,border-color .15s}
.choice input:checked+label{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--paper)}
.choice input.no:checked+label{background:var(--rose);border-color:var(--rose)}
.choice input:focus-visible+label{outline:2px solid var(--rose);outline-offset:2px}
.choice input:disabled+label{opacity:.4;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field label{color:var(--sage-deep)}
.field input,.field textarea{font:inherit;font-size:1.05rem;padding:11px 14px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);background:var(--linen);color:var(--ink);width:100%}
.field textarea{min-height:84px;resize:vertical}
.form-foot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.note{font-style:italic;color:var(--rose);min-height:1.5em;margin:0}
.saved{color:var(--sage-deep)}

footer{background:var(--blush);color:var(--sage-deep);text-align:center;padding-inline:var(--gutter);padding-block:56px calc(env(safe-area-inset-bottom,0px) + 56px);display:flex;flex-direction:column;align-items:center;gap:14px}
footer .logo{width:150px}

/* Entry screen */
.gate{position:fixed;inset:0;z-index:50;background:var(--blush);overflow-y:auto;padding-inline:var(--gutter);padding-block:calc(env(safe-area-inset-top,0px) + 32px) calc(env(safe-area-inset-bottom,0px) + 32px);display:flex;align-items:center;justify-content:center}
.gate-card{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;color:var(--sage-deep)}
.gate-card .lace{width:100%}
.gate-card form{display:flex;flex-direction:column;gap:12px;width:min(100%,380px)}
.gate-card input{width:100%;font:inherit;font-size:1.1rem;text-align:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);background:var(--paper);color:var(--ink)}
.gate-card .btn{width:100%}
.gate .note{color:var(--sage-deep)}
.preview-tag{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:60;background:var(--sage-deep);color:var(--paper);padding:6px 10px}

.inline-link{font-family:var(--label);font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);white-space:nowrap}

/* Style guide page */
.style-hero{background:var(--blush);padding-inline:var(--gutter);padding-block:clamp(56px,9vw,104px);text-align:center}
.style-hero .sec-title{margin-bottom:20px}
.style-hero p{max-width:40ch;margin:0 auto;font-size:1.15rem;color:var(--sage-deep)}
.back{display:inline-block;margin-top:28px;color:var(--sage-deep)}
.tips{max-width:760px;margin-inline:auto;list-style:none;padding:0;display:grid;gap:14px}
.tips li{padding-left:28px;position:relative;font-size:1.1rem}
.tips li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:1px;background:var(--rose)}
.look{max-width:1040px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.look+.look{margin-top:clamp(56px,8vw,96px);padding-top:clamp(56px,8vw,96px);border-top:1px solid var(--line)}
.look-head{display:flex;flex-direction:column;gap:6px}
.look-head h2{font-family:var(--script);font-weight:400;font-size:clamp(3rem,7vw,4.2rem);line-height:1;margin:0;color:var(--sage-deep)}
.look-head .label{color:var(--rose)}
.look-head .dress{font-size:1.2rem}
.look .tips{margin:0}
.photos{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.photos img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:700px){.look{grid-template-columns:minmax(0,1fr)}}

.lines li.details{font-size:1rem;margin-top:.5rem;max-width:42ch;line-height:1.5}
@media (max-width:620px){.lines li.details{margin-inline:auto}}

.btn.soon{opacity:.7;cursor:default;border-style:dashed}
.green .btn.soon:hover{background:none;color:inherit;border-color:currentColor}

/* Sturdier Bodoni: smaller optical size thickens the hairlines (the thin N strokes) */
.sec-title,.day-when .dow,.rsvp-block h3{font-weight:500;font-variation-settings:"opsz" 10}

.lines li.gap{height:.9rem}
/* Staying There on the light band */
.paper .event h3{color:var(--sage-deep)}
.paper .event .label{color:var(--rose)}
.paper .btn{color:var(--sage-deep)}
.paper .btn:not(.soon):hover{background:var(--sage-deep);color:var(--paper);border-color:var(--sage-deep)}
#stay .pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),420px));justify-content:center}

.early-note{margin:0 0 6px;padding:14px 16px;background:color-mix(in srgb,var(--blush) 45%,var(--paper));font-size:1rem;line-height:1.5}

.return-bar{background:var(--blush);padding-inline:var(--gutter);padding-top:18px;text-align:left}
.return-bar a{font-family:var(--label);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* welcome letter: wide card, text left, small clipped photo */
#welcome{padding-block:clamp(48px,7vw,88px)}
.letter{max-width:1000px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(24px,5vw,64px);background:var(--paper);border:1px solid var(--blush);outline:1px solid var(--blush);outline-offset:-10px}
.letter.has-photo{display:grid;grid-template-columns:clamp(150px,18vw,200px) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
.letter-body p{margin:0 0 1em;font-size:1.14rem;line-height:1.7;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.letter-body p:first-child{font-size:1.24rem;color:var(--sage-deep);font-style:italic}
.letter .signoff{margin:1.4em 0 0;text-align:left;font-style:italic;color:var(--sage-deep)}
.letter .signature{display:inline-block;margin-top:.1em;font-family:var(--script);font-style:normal;font-size:2.5rem;line-height:1.1;color:var(--rose)}
.clipped{position:relative;margin:8px 0 0;transform:rotate(-3deg);background:#fff;padding:8px 8px 10px;box-shadow:0 2px 3px rgba(61,69,55,.12),0 14px 28px -12px rgba(61,69,55,.35)}
.clipped img{width:100%;aspect-ratio:2/3;object-fit:cover}
.clipped .clip{position:absolute;top:-26px;left:30%;width:22px;height:58px;transform:rotate(-8deg);color:#a3a7a0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@media (max-width:640px){
  .letter.has-photo{grid-template-columns:minmax(0,1fr)}
  .clipped{width:150px;margin:6px auto 4px}
  .letter-body p{text-align:left}
}

.soon-hero p{font-size:1.4rem;font-style:italic}

/* separate pages: show only that page's section */
body[data-page]:not([data-page="home"]) main>section{display:none}
body[data-page="weekend"] #weekend,body[data-page="stay"] #stay,body[data-page="travel"] #travel,
body[data-page="activities"] #activities,body[data-page="registry"] #registry,body[data-page="faq"] #faq,
body[data-page="rsvp"] #rsvp{display:block}
body[data-page]:not([data-page="home"]) main>section{min-height:calc(100vh - 260px)}
nav a[aria-current="page"]{border-color:var(--rose)}
nav a.rsvp[aria-current="page"]{background:var(--rose);color:var(--paper)}

.style-hero .soon-line{margin-top:22px;font-style:italic;font-size:1.25rem;color:var(--rose)}

/* =====================================================================
   NEW LOOK: cream paper, black ink, hand-drawn details.
   Colors and fonts for the whole site live in this block.
   ===================================================================== */
:root{
  --linen:#F5F0E6;     /* cream page */
  --paper:#FBF8F2;     /* cards */
  --blush:#D9CDB9;     /* oat band */
  --stone:#C4BDB0;     /* stone band */
  --rose:#6B6158;      /* warm taupe accent */
  --sage:#8A847A;
  --sage-deep:#1C1A17; /* ink: headings */
  --ink:#2A2724;       /* body text */
  --script:"Dreams On Paper","Gerald and Margaret","Bradley Hand",cursive;
  --display:"EB Garamond","Garamond","Times New Roman",serif;
  --serif:"EB Garamond","Garamond","Times New Roman",serif;
  --label:"EB Garamond","Garamond","Times New Roman",serif;
  --line:color-mix(in srgb,var(--sage-deep) 22%,transparent);
}
body{font-size:19px}
.label{font-weight:500;font-size:.78rem;letter-spacing:.22em}
:focus-visible{outline-color:var(--sage-deep)}

/* names written by hand, everywhere the logo appears */
.logo{background:none;aspect-ratio:auto;width:auto!important;line-height:1.1;color:var(--sage-deep);text-decoration:none}
.logo::before{content:"Joanne & Brendan";font-family:var(--script);font-size:1.75rem;white-space:nowrap}
.top a[href="index.html"]{text-decoration:none}
footer .logo::before{font-size:2.2rem}
.gate-card .logo::before{font-size:clamp(2.4rem,9vw,3.4rem)}

/* header */
.top{background:var(--linen)}
nav a{font-size:.78rem;color:var(--sage-deep)}
nav a:hover,nav a[aria-current="page"]{border-color:var(--sage-deep)}
nav a.rsvp{background:var(--sage-deep);color:var(--linen)}
nav a.rsvp:hover,nav a.rsvp[aria-current="page"]{background:var(--rose);color:var(--linen)}

/* home: sliding photo strip */
.hero{background:var(--linen);padding:0;overflow:hidden}
.strip-band{position:relative;background:var(--blush);padding-block:clamp(58px,9vw,118px);overflow:hidden}
.hero-word{position:absolute;left:0;right:0;text-align:center;font-family:var(--script);font-size:clamp(2.1rem,7.6vw,7rem);line-height:1;
  color:var(--linen);opacity:.85;z-index:2;pointer-events:none;white-space:nowrap}
.hero-word.w1{top:clamp(6px,1.8vw,22px)}
.hero-word.w2{bottom:clamp(0px,1vw,12px)}
.strip{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;animation:strip 150s linear infinite}
.strip img{width:clamp(150px,19vw,250px);aspect-ratio:3/4;object-fit:cover;flex:none;display:block}
@keyframes strip{to{transform:translateX(calc(-50% - clamp(5px,.7vw,9px)))}}
@media (prefers-reduced-motion:reduce){.strip{animation:none;transform:translateX(-10%)}}
.hero-info{text-align:center;padding:clamp(30px,5vw,48px) var(--gutter) 0}
.hero-date{margin:0;color:var(--sage-deep);line-height:1.9}
.hero .under{margin-top:8px;color:var(--rose)}
.hero .who{font-size:.78rem}

/* section titles: handwritten, with a little drawing on top */
.sec-title{font-family:var(--script);font-weight:400!important;text-transform:lowercase;letter-spacing:0;font-size:clamp(2.8rem,7vw,4.6rem);line-height:1.15;color:var(--sage-deep);font-variation-settings:normal}
.sec-title .script{display:inline;font-size:1em;color:inherit!important;margin:0 .22em 0 0;line-height:inherit}
.sec-title::before{content:"";display:block;margin:0 auto 18px;height:clamp(70px,9vw,104px);background:center/contain no-repeat}
#weekend .sec-title::before{background-image:url("images/draw/sunrise.png");height:clamp(60px,8vw,90px)}
#stay .sec-title::before{background-image:url("images/draw/doves-kissing.png")}
#travel .sec-title::before{background-image:url("images/draw/wagon.png")}
#activities .sec-title::before{background-image:url("images/draw/wheel.png")}
#registry .sec-title::before{background-image:url("images/draw/envelopes.png")}
#faq .sec-title::before{background-image:url("images/draw/horseshoe.png")}
.style-hero .sec-title::before{background-image:url("images/draw/lighter.png")}

/* bands: cream, oat and stone */
.blush{background:var(--blush)}
.blush .sec-title .script{color:inherit}
.paper{background:var(--linen)}
.green{background:var(--stone);color:var(--ink)}
.green .sec-title,.green .sec-title .script,.green .event h3,.green .label{color:var(--sage-deep)}
.green .btn:hover{background:var(--sage-deep);color:var(--linen);border-color:var(--sage-deep)}
.btn{font-size:.78rem}
.btn.solid{background:var(--sage-deep);color:var(--linen);border-color:var(--sage-deep)}
.btn.solid:hover{background:var(--rose);border-color:var(--rose)}
.dress,.blush .dress{color:var(--rose)}

/* weekend */
.day-when .dow{font-family:var(--display);font-size:1.35rem;letter-spacing:.08em}
.ev h3,.event h3,.act h3{color:var(--sage-deep)}
.private{background:var(--paper);outline-color:var(--sage-deep)}
.pill{background:var(--sage-deep);color:var(--linen)}

/* welcome letter */
.letter{background:var(--paper);border-color:var(--line);outline-color:var(--line)}
.letter-body p:first-child{color:var(--sage-deep)}
.letter .signature{color:var(--sage-deep);font-size:2.3rem}
.clipped img{filter:grayscale(1) contrast(1.05)}

/* faq + rsvp */
.faq summary{color:var(--sage-deep)}
.faq summary::after{color:var(--sage-deep);font-family:var(--serif)}
.rsvp-card{border-color:var(--line);outline-color:var(--line)}
.rsvp-head::before{content:"";width:150px;height:96px;background:url("images/draw/dove-envelope.png") center/contain no-repeat}
.rsvp-head h2{color:var(--sage-deep)}
.rsvp-head .label{color:var(--rose)}
.choice label{font-size:.74rem}
.choice input:checked+label{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--linen)}
.choice input.no:checked+label{background:var(--rose);border-color:var(--rose)}
.note{color:var(--rose)}
.early-note{background:color-mix(in srgb,var(--blush) 40%,var(--paper))}
.tips li::before{background:var(--sage-deep)}

/* entry screen */
.gate{background:var(--linen)}
.gate-card{gap:14px}
.gate-badge{width:clamp(110px,26vw,150px);height:auto;margin-bottom:4px}
.gate-date{color:var(--rose);margin-bottom:12px}
.gate-card input{background:var(--paper)}

/* footer */
footer{background:var(--blush);color:var(--sage-deep)}
footer::before{content:"";width:96px;height:96px;background:url("images/draw/dove-badge.png") center/contain no-repeat}
.preview-tag{background:var(--sage-deep)}
.return-bar,.style-hero{background:var(--blush)}

/* ranch map (Stay page) */
.map-block{margin-top:clamp(56px,8vw,96px);text-align:center}
.map-title{font-family:var(--script);font-weight:400;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1.1;margin:0 0 6px;color:var(--sage-deep)}
.map-hint{margin:0 0 22px;color:var(--rose);font-style:italic}
.map-hint .m{display:none}
@media (hover:none){.map-hint .d{display:none}.map-hint .m{display:inline}}
.map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
.map-scroll::-webkit-scrollbar{display:none}
.ranch-map{position:relative;width:100%;aspect-ratio:1536/1024;margin-inline:auto}
.ranch-map>img{width:100%;height:100%;display:block}
.pin{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:6px;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.pin svg{width:22px;height:20px;display:block;fill:var(--sage-deep);stroke:var(--linen);stroke-width:1.5;transition:transform .2s}
.pin:hover svg,.pin:focus-visible svg,.pin.open svg{transform:scale(1.25) translateY(-2px)}
.tip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:220px;
  background:var(--paper);border:1.5px solid var(--sage-deep);border-radius:3px;padding:9px 13px 10px;text-align:left;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:5;box-shadow:3px 3px 0 var(--sage-deep)}
.tip b{display:block;font-weight:400;font-style:italic;font-size:1.2rem;margin-bottom:2px;color:var(--sage-deep)}
.tip span{font-size:.96rem;color:var(--rose)}
.pin:hover .tip,.pin:focus-visible .tip,.pin.open .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.pin:hover,.pin:focus-visible,.pin.open{z-index:6}
.pin.edge-l .tip{left:0;transform:translateX(-8px) translateY(4px)}
.pin.edge-l:hover .tip,.pin.edge-l.open .tip,.pin.edge-l:focus-visible .tip{transform:translateX(-8px)}
.pin.edge-r .tip{left:auto;right:0;transform:translateX(8px) translateY(4px)}
.pin.edge-r:hover .tip,.pin.edge-r.open .tip,.pin.edge-r:focus-visible .tip{transform:translateX(8px)}
.pin.below .tip{bottom:auto;top:calc(100% + 4px)}
@media (max-width:640px){.ranch-map{width:760px}.pin svg{width:16px;height:15px}.pin{padding:5px}.tip{max-width:170px}.tip b{font-size:1.05rem}.tip span{font-size:.88rem}}

/* entry screen: lace over the ranch, in black and white */
.gate{background-color:var(--linen);
  background-image:linear-gradient(color-mix(in srgb,var(--linen) 55%,transparent),color-mix(in srgb,var(--linen) 55%,transparent)),url("images/landscape-bw.jpg");
  background-size:cover;background-position:center 60%}
.gate .lace{filter:grayscale(1) drop-shadow(0 2px 10px rgba(28,26,23,.25))}
.lace-text{color:var(--sage-deep)}
.lace-text .logo::before{font-size:5.6cqw}
.lace-text .rule{background:var(--sage-deep)}
.lace-text .label{color:var(--sage-deep)}
/* no lace: just the names over the ranch */
.gate .lace{background:none;filter:none;aspect-ratio:auto;width:auto;container-type:normal}
.gate .lace-text{position:static;gap:12px;margin-bottom:10px}
.gate .lace-text .logo::before{font-size:clamp(2.6rem,9vw,4rem)}
.gate .lace-text .rule{width:44px}
.gate .lace-text .label{font-size:.78rem;letter-spacing:.24em}

/* welcome note: a simple centered block of text, no card, no photo */
#welcome{padding-block:clamp(28px,4vw,44px) clamp(56px,8vw,96px)}
.letter,.letter.has-photo{display:block;max-width:780px;margin:0 auto;padding:0;background:none;border:0;outline:0;text-align:center}
.letter-body p{text-align:center;hyphens:manual;-webkit-hyphens:manual;font-size:1.12rem;line-height:1.75}
.letter-body p:first-child{font-size:1.24rem}
.letter .signoff{text-align:center}
/* room for the script's loops and swashes */
.ev h3,.event h3{margin-bottom:.45em;line-height:1.15}
.act h3{line-height:1.2;margin-bottom:.2em}
.logo::before{font-size:2rem}
footer .logo::before{font-size:2.4rem}
/* hero words: more room so the J and the g's aren't cut off */
.strip-band{padding-block:clamp(84px,14vw,200px) clamp(84px,13vw,190px)}
.hero-word.w1{top:clamp(16px,3.4vw,52px)}
.hero-word.w2{bottom:clamp(16px,3.2vw,48px)}

/* section titles: small handwritten word over a big serif word, like before */
:root{--title:"Bodoni Moda","Didot","Bodoni 72",serif}
.sec-title{font-family:var(--title);font-weight:500!important;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(2.6rem,8vw,5rem);line-height:1;font-variation-settings:"opsz" 10}
.sec-title .script{display:block;font-family:var(--script);text-transform:lowercase;font-weight:400;font-size:.6em;letter-spacing:0;line-height:1.2;margin:0 0 .02em;color:var(--rose)!important;font-variation-settings:normal}
.day-when .dow,.rsvp-block h3{font-family:var(--title);font-weight:500;font-variation-settings:"opsz" 10}

/* scroll effect: the photo strip stays put and the rest of the page slides up over it */
@media (min-width:0){
  body[data-page="home"] .hero{position:sticky;top:var(--hdr,0px);z-index:0}
  body[data-page="home"] main>section:not(.hero){position:relative;z-index:1}
  body[data-page="home"] #welcome{background:var(--linen);box-shadow:0 -14px 28px -18px rgba(28,26,23,.35)}
  body[data-page="home"] footer{position:relative;z-index:1}
}
#welcome .hero-info{padding:0 0 clamp(26px,4vw,40px)}

#welcome .under{color:var(--rose)}
#welcome .who{font-size:.78rem}

/* scattered doodles (replace the drawings that sat on top of each title) */
.sec-title::before,.rsvp-head::before{content:none;display:none}
.has-doodles{position:relative;overflow:hidden}
.doodle{position:absolute;width:calc(clamp(74px,8vw,128px) * var(--size,1));height:auto;opacity:.6;pointer-events:none;z-index:0;transform:translateY(-50%) rotate(var(--tilt,0deg))}
.doodle.left{left:clamp(10px,4vw,90px)}
.doodle.right{right:clamp(10px,4vw,90px)}
.has-doodles>*:not(.doodle){position:relative;z-index:1}
@media (max-width:1100px){
  .doodle{width:58px;opacity:.5;transform:rotate(var(--tilt,0deg))}
  .doodle:not(.first){display:none}
  .doodle.first{top:18px!important}
  .doodle.left{left:12px}.doodle.right{right:12px}
}

/* map sits above "staying there" on the Stay page; pop-ups show the name only */
.map-block{margin:0 0 clamp(64px,9vw,110px)}
.tip{padding:7px 13px 8px}
.tip b{margin:0;white-space:nowrap}

/* map back below the room block */
.map-block{margin:clamp(64px,9vw,110px) 0 0}

/* Dreams On Paper: let the big words overlap the photos, like ink written on top */
.strip-band{padding-block:clamp(58px,9vw,128px) clamp(58px,8.5vw,120px)}
.hero-word{opacity:1;font-size:clamp(2.3rem,8vw,7.4rem);text-shadow:0 1px 2px rgba(28,26,23,.28),0 0 18px rgba(28,26,23,.18)}
.hero-word.w1{top:clamp(10px,2.6vw,36px)}
.hero-word.w2{bottom:clamp(14px,2.6vw,38px)}
/* hero words in black ink, with a soft cream halo so they read over the photos */
.hero-word{color:var(--sage-deep);text-shadow:0 0 1px rgba(245,240,230,.9),0 0 10px rgba(245,240,230,.55)}

/* hero words: plain black ink */
.hero-word{filter:none}
/* every section gets a solid background so nothing shows the photos through it */
main>section:not(.hero){background-color:var(--linen)}
main>section.blush{background-color:var(--blush)}
main>section.green{background-color:var(--stone)}
/* room for the tall J at the top of the photo band */
.strip-band{padding-top:clamp(70px,10.5vw,150px)}
.hero-word.w1{top:clamp(18px,3.4vw,50px)}

/* ---------- moving drawings ---------- */
.doodle.anim{display:block}
.anim-in{position:relative;width:100%}
.anim-in img{display:block;width:100%;height:auto}
.anim-in .layer{position:absolute;inset:0;height:100%}
@media (prefers-reduced-motion:no-preference){
  /* fire: flames flicker */
  .a-fire .flame{transform-origin:55% 76%;animation:flicker 1.6s ease-in-out infinite}
  @keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}20%{transform:scale(1.03,1.08) skewX(-3deg)}45%{transform:scale(.98,.95) skewX(2deg)}70%{transform:scale(1.02,1.05) skewX(-1.5deg)}}
  /* flowers: leaves lift up and down, alternating */
  .a-daisy .leafL{transform-origin:30% 81%;animation:leafL 3.2s ease-in-out infinite}
  .a-daisy .leafR{transform-origin:36% 80%;animation:leafR 3.2s ease-in-out infinite}
  .a-sunfl .leafL{transform-origin:47% 63%;animation:leafL 3.2s ease-in-out infinite}
  .a-sunfl .leafR{transform-origin:52% 75%;animation:leafR 3.2s ease-in-out infinite}
  @keyframes leafL{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
  @keyframes leafR{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
  /* sun: rays gently sway and shimmer */
  .a-sun .rays{transform-origin:48% 50%;animation:rays 5s ease-in-out infinite}
  @keyframes rays{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.04)}}
  /* ice cream: little drips form and fall */
  .a-ice .drip{position:absolute;width:9%;aspect-ratio:1/1.35;background:var(--sage-deep);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;opacity:0;animation:drip 3.6s ease-in infinite}
  .a-ice .drip.d0{left:8%;top:57%}
  .a-ice .drip.d1{left:84%;top:54%;width:7%;animation-delay:1.8s}
  @keyframes drip{0%{opacity:0;transform:translateY(-30%) scale(.2)}18%{opacity:1;transform:translateY(0) scale(.7)}45%{opacity:1;transform:translateY(20%) scale(1,1.15)}80%{opacity:1;transform:translateY(260%) scale(.9,1.2)}100%{opacity:0;transform:translateY(330%) scale(.7)}}
  /* doves: wander around a little */
  .a-doves .anim-in{animation:wander 16s ease-in-out infinite}
  @keyframes wander{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(40px,-26px) rotate(3deg)}40%{transform:translate(90px,8px) rotate(-2deg)}60%{transform:translate(50px,34px) rotate(2deg)}80%{transform:translate(-10px,14px) rotate(-3deg)}}
  .doodle.right.a-doves .anim-in{animation-direction:reverse}
}
@media (max-width:1100px){@keyframes wander{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-8px)}}}

@media (prefers-reduced-motion:no-preference){
  /* sunrise: rays grow out from the sun, then fade, again and again */
  .a-rise .rays{transform-origin:60% 66%;animation:rise 4.5s ease-out infinite}
  @keyframes rise{0%{transform:scale(.55);opacity:0}25%{opacity:1}60%{transform:scale(1);opacity:1}100%{transform:scale(1.12);opacity:0}}
  /* lantern: flame flickers */
  .a-lamp .flame{transform-origin:51% 70%;animation:flicker 1.3s ease-in-out infinite}
  /* wagon: wheels roll */
  .a-wagon .wheel{position:absolute;height:auto;animation:roll 6s linear infinite}
  @keyframes roll{to{transform:rotate(360deg)}}
  /* doves: wings flap */
  .a-flap1 .wing{transform-origin:43% 46%;animation:flap 1.1s ease-in-out infinite}
  .a-flap2 .wingL{transform-origin:44% 44%;animation:flapL 1.1s ease-in-out infinite}
  .a-flap2 .wingR{transform-origin:47% 46%;animation:flap 1.1s ease-in-out infinite}
  @keyframes flap{0%,100%{transform:rotate(0) scaleY(1)}50%{transform:rotate(14deg) scaleY(.88)}}
  @keyframes flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
  .a-flap1 .anim-in,.a-flap2 .anim-in{animation:bob 2.2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
.a-wagon .wheel{position:absolute}

@media (prefers-reduced-motion:no-preference){
  /* envelopes: each one wiggles a different way */
  .a-env .back{transform-origin:35% 25%;animation:wigA 2.4s ease-in-out infinite}
  .a-env .front{transform-origin:65% 65%;animation:wigB 2.4s ease-in-out infinite}
  @keyframes wigA{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(4deg)}}
  @keyframes wigB{0%,100%{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
  /* bells: swing toward and away from each other */
  .a-bell .left{transform-origin:42% 38%;animation:bellL 2.2s ease-in-out infinite}
  .a-bell .right{transform-origin:68% 46%;animation:bellR 2.2s ease-in-out infinite}
  @keyframes bellL{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}
  @keyframes bellR{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-8deg)}}
  /* heart napkin: tilts a little while the heart beats */
  .a-napkin .anim-in{animation:tilt 4s ease-in-out infinite}
  .a-napkin .heart{transform-origin:48% 45%;animation:beat 1.6s ease-in-out infinite}
  @keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  @keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(.97)}45%{transform:scale(1.08)}60%{transform:scale(1)}}
  /* horseshoe: swings back and forth like it's hanging */
  .a-shoe .anim-in{transform-origin:50% 4%;animation:swing 3.2s ease-in-out infinite}
  @keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
  /* dove with letter: wing flaps */
  .a-flap3 .wing{transform-origin:56% 44%;animation:flap3 1.2s ease-in-out infinite}
  @keyframes flap3{0%,100%{transform:rotate(0) scaleY(1)}50%{transform:rotate(-12deg) scaleY(.85)}}
  .a-flap3 .anim-in{animation:bob 2.4s ease-in-out infinite}
}

@media (prefers-reduced-motion:no-preference){
  /* rings: the top ring lifts off and settles back down */
  .a-rings .upper{animation:lift 3.6s ease-in-out infinite}
  @keyframes lift{0%,20%,100%{transform:translate(0,0) rotate(0)}45%{transform:translate(4%,-14%) rotate(7deg)}65%{transform:translate(1%,-4%) rotate(2deg)}80%{transform:translate(0,0) rotate(0)}}
  /* kissing doves: lean in and nuzzle */
  .a-kiss .left{transform-origin:15% 95%;animation:nuzL 3s ease-in-out infinite}
  .a-kiss .right{transform-origin:80% 80%;animation:nuzR 3s ease-in-out infinite}
  @keyframes nuzL{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  @keyframes nuzR{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-2.5deg)}}
}
/* rehearsal dinner callout: smaller white box */
.private{display:inline-block;padding:16px 22px 18px;outline-offset:-6px}
.private h3{font-size:clamp(1.9rem,4.4vw,2.4rem)!important}
.private .pill{margin-bottom:6px}
.private{width:fit-content;min-width:min(100%,300px);justify-self:start;padding:14px 26px 16px}
.private h3{margin-bottom:.15em!important}
.private .lines{margin-top:0}
@media (max-width:620px){.private{justify-self:center}}

@media (prefers-reduced-motion:no-preference){
  /* flying dove: tail flutters (wings stay put) */
  .a-flap2 .tail{transform-origin:62% 77%;animation:tail 1.4s ease-in-out infinite}
  @keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg) scaleY(.94)}}
  /* lighter: little flame flickers */
  .a-lighter .flame{transform-origin:60% 29%;animation:flicker 1.2s ease-in-out infinite}
  /* compass: needle swings back and forth, then settles */
  .a-compass .needle{transform-origin:50% 54%;animation:seek 5s ease-in-out infinite}
  @keyframes seek{0%,100%{transform:rotate(0)}12%{transform:rotate(-40deg)}26%{transform:rotate(30deg)}38%{transform:rotate(-18deg)}50%{transform:rotate(9deg)}60%{transform:rotate(-3deg)}70%{transform:rotate(0)}}
}

@media (prefers-reduced-motion:no-preference){
  /* star: turns 40 degrees one way, then the other */
  .a-star .anim-in{transform-origin:50% 52%;animation:starturn 4s ease-in-out infinite}
  @keyframes starturn{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* coupes: lean in, clink, lean back */
  .a-cheers .front{transform-origin:38% 96%;animation:clinkF 2.6s ease-in-out infinite}
  .a-cheers .back{transform-origin:78% 88%;animation:clinkB 2.6s ease-in-out infinite}
  @keyframes clinkF{0%,100%{transform:rotate(-6deg)}40%{transform:rotate(7deg)}46%{transform:rotate(4deg)}52%{transform:rotate(7deg)}70%{transform:rotate(-6deg)}}
  @keyframes clinkB{0%,100%{transform:rotate(6deg)}40%{transform:rotate(-6deg)}46%{transform:rotate(-3deg)}52%{transform:rotate(-6deg)}70%{transform:rotate(6deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* oak: leaves puff out like they're growing, and sway */
  .a-oak .crown{transform-origin:50% 72%;animation:bloom 4.5s ease-in-out infinite}
  @keyframes bloom{0%,100%{transform:scale(.9) rotate(-2deg)}50%{transform:scale(1.05) rotate(2deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* iced drink: the ice cubes bob and turn in the glass */
  .a-iced .ice1{transform-origin:70% 57%;animation:iceA 3.2s ease-in-out infinite}
  .a-iced .ice2{transform-origin:46% 67%;animation:iceB 3.6s ease-in-out infinite}
  .a-iced .ice3{transform-origin:36% 43%;animation:iceC 4s ease-in-out infinite}
  @keyframes iceA{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-2%,-3%) rotate(-12deg)}}
  @keyframes iceB{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3%,-2.5%) rotate(14deg)}}
  @keyframes iceC{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(2%,1.5%) rotate(-8deg)}}
}

/* the welcome letter, written by hand in black ink */
:root{--letter:"Sam Script","Bradley Hand",cursive}
.letter-body p,.letter-body p:first-child{font-family:var(--letter);font-style:normal;color:var(--sage-deep);font-size:clamp(1.45rem,2.4vw,1.75rem);line-height:1.45;letter-spacing:.005em}
.letter-body{transform:rotate(-.6deg)}
.letter .signoff{font-family:var(--letter);font-style:normal;color:var(--sage-deep);font-size:clamp(1.45rem,2.4vw,1.75rem)}
.letter .signature{font-family:"Sam Script Alt",var(--letter);color:var(--sage-deep);font-size:clamp(2.2rem,4vw,2.9rem);text-shadow:none}

@media (prefers-reduced-motion:no-preference){
  /* envelopes: just the heart grows and shrinks */
  .a-env .heart1{transform-origin:38% 23%;animation:beat 1.6s ease-in-out infinite}
  /* iced drink: the whole glass tips left and right */
  .a-iced .anim-in{transform-origin:50% 92%;animation:tip 4s ease-in-out infinite}
  @keyframes tip{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* camping chair: slides gently left and right */
  .a-chair .anim-in{animation:scoot 4s ease-in-out infinite}
  @keyframes scoot{0%,100%{transform:translateX(-14px) rotate(-2deg)}50%{transform:translateX(14px) rotate(2deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* iced drink: a gentle tip, with the straw stirring around inside */
  .a-iced .anim-in{animation:tip2 4.8s ease-in-out infinite}
  @keyframes tip2{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  .a-iced .straw{transform-origin:50% 88%;animation:stir 2.4s ease-in-out infinite}
  @keyframes stir{0%,100%{transform:rotate(0) translateX(0)}25%{transform:rotate(-6deg) translateX(-2%)}50%{transform:rotate(-1deg) translateX(1.5%)}75%{transform:rotate(5deg) translateX(2%)}}
}

@media (prefers-reduced-motion:no-preference){
  /* iced drink: a little shake, then a pause */
  .a-iced .anim-in{transform-origin:50% 90%;animation:shake 3s ease-in-out infinite}
  @keyframes shake{0%,40%,100%{transform:rotate(0)}48%{transform:rotate(-6deg)}56%{transform:rotate(5deg)}64%{transform:rotate(-4deg)}72%{transform:rotate(3deg)}80%{transform:rotate(0)}}
}

@media (prefers-reduced-motion:no-preference){
  /* linked rings: the little sparkle lines blink on and off */
  .a-spark .sparkL{animation:spark 2s ease-in-out infinite}
  .a-spark .sparkR{animation:spark 2s ease-in-out infinite 1s}
  @keyframes spark{0%,100%{opacity:0;transform:scale(.85)}35%,65%{opacity:1;transform:scale(1)}}
  .a-spark .sparkL{transform-origin:20% 50%}.a-spark .sparkR{transform-origin:85% 25%}
}

@media (prefers-reduced-motion:no-preference){
  /* kissing doves: they stay together, only their tails wag */
  .a-kiss .tailL{transform-origin:24% 74%;animation:wagL 1.6s ease-in-out infinite}
  .a-kiss .tailR{transform-origin:80% 60%;animation:wagR 1.6s ease-in-out infinite .4s}
  @keyframes wagL{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
  @keyframes wagR{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* kissing doves: the whole drawing rocks a couple of degrees */
  .a-kiss2 .anim-in{transform-origin:50% 90%;animation:rock 3.2s ease-in-out infinite}
  @keyframes rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* dove with heart: flies off, then comes back to pick up the heart */
  .a-dheart .bird{animation:fetch 4.2s ease-in-out infinite}
  @keyframes fetch{0%,15%,100%{transform:translate(0,0) rotate(0)}45%{transform:translate(-16%,-14%) rotate(-6deg)}60%{transform:translate(-14%,-16%) rotate(-3deg)}85%{transform:translate(0,0) rotate(0)}}
  .a-dheart .heart{transform-origin:84% 80%;animation:beat2 4.2s ease-in-out infinite}
  @keyframes beat2{0%,15%,85%,100%{transform:scale(1)}45%{transform:scale(1.08)}60%{transform:scale(.96)}}
}
@media (prefers-reduced-motion:no-preference){
  /* lantern: flame wiggles from its base, staying attached */
  .a-lamp .flame{transform-origin:50% 60%;animation:lampwiggle 1.5s ease-in-out infinite}
  @keyframes lampwiggle{0%,100%{transform:skewX(0) scaleY(1)}25%{transform:skewX(-4deg) scaleY(1.04)}50%{transform:skewX(2deg) scaleY(.98)}75%{transform:skewX(-2deg) scaleY(1.03)}}
}

@media (prefers-reduced-motion:no-preference){
  /* heart lockets: dangle from the bow and wiggle */
  .a-locket .anim-in{transform-origin:62% 28%;animation:dangle 2.8s ease-in-out infinite}
  @keyframes dangle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
}

@media (prefers-reduced-motion:no-preference){
  /* s'mores: stars twinkle on and off at different times */
  .a-twinkle .layer{animation:twinkle 2.6s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:1}40%{opacity:0}60%{opacity:.15}}
  .a-twinkle .star0{animation-delay:0s;animation-duration:2.6s}
  .a-twinkle .star1{animation-delay:1.3s;animation-duration:3.1s}
  .a-twinkle .star2{animation-delay:0.6s;animation-duration:2.2s}
  .a-twinkle .star3{animation-delay:2.0s;animation-duration:2.8s}
  .a-twinkle .star4{animation-delay:0.3s;animation-duration:3.4s}
  .a-twinkle .star5{animation-delay:1.7s;animation-duration:2.4s}
  .a-twinkle .star6{animation-delay:0.9s;animation-duration:3.0s}
  .a-twinkle .star7{animation-delay:2.3s;animation-duration:2.7s}
}

@media (prefers-reduced-motion:no-preference){
  /* bells: the whole drawing rings back and forth from the bow */
  .a-bellw .anim-in{transform-origin:50% 25%;animation:ring 2.4s ease-in-out infinite}
  @keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-8deg)}30%{transform:rotate(7deg)}45%{transform:rotate(-5deg)}60%{transform:rotate(3deg)}75%{transform:rotate(0)}}
}
@media (prefers-reduced-motion:no-preference){
  /* sunflower: only the leaves lift, hinged where they meet the stem */
  .a-sunfl .leafL{transform-origin:44% 66%;animation:leafL2 3.2s ease-in-out infinite}
  .a-sunfl .leafR{transform-origin:48% 78%;animation:leafR2 3.2s ease-in-out infinite}
  @keyframes leafL2{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
  @keyframes leafR2{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
}
@media (prefers-reduced-motion:no-preference){
  /* dove with heart: whole drawing at rest; while apart, bird and heart are drawn separately */
  .a-dheart .base{animation:restShow 4.2s linear infinite}
  .a-dheart .bird,.a-dheart .heart{opacity:0}
  .a-dheart .bird{animation:fetch 4.2s ease-in-out infinite,apartShow 4.2s linear infinite}
  .a-dheart .heart{animation:beat2 4.2s ease-in-out infinite,apartShow 4.2s linear infinite}
  @keyframes restShow{0%,16%{opacity:1}18%,82%{opacity:0}84%,100%{opacity:1}}
  @keyframes apartShow{0%,16%{opacity:0}18%,82%{opacity:1}84%,100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){.a-dheart .bird,.a-dheart .heart{display:none}}

@media (prefers-reduced-motion:no-preference){
  /* dove with heart: flies as one piece, bobbing and tilting with each wingbeat */
  .a-glide .anim-in{transform-origin:45% 60%;animation:glide 2.4s ease-in-out infinite}
  @keyframes glide{0%,100%{transform:translate(0,0) rotate(-3deg) scaleY(1)}25%{transform:translate(4px,-7px) rotate(1deg) scaleY(.94)}50%{transform:translate(8px,-2px) rotate(3deg) scaleY(1)}75%{transform:translate(4px,4px) rotate(0) scaleY(1.04)}}
}

@media (prefers-reduced-motion:no-preference){
  /* flying dove: the whole bird tilts slowly, like it's gliding */
  .a-soar .anim-in{transform-origin:50% 50%;animation:soar 4.5s ease-in-out infinite}
  @keyframes soar{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}
}

@media (prefers-reduced-motion:no-preference){
  /* rings: jiggle left and right as one piece */
  .a-jiggle .anim-in{transform-origin:50% 60%;animation:jiggle 2.6s ease-in-out infinite}
  @keyframes jiggle{0%,40%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}90%{transform:rotate(0)}}
}

@media (prefers-reduced-motion:no-preference){
  /* wagon wheel: rolls round and round */
  .a-spin .anim-in{transform-origin:50.7% 49.6%;animation:roll 9s linear infinite}
}

/* ---------- soft storybook type: Fraunces for headings and details ---------- */
:root{--title:"Fraunces",Georgia,serif;--display:"Fraunces",Georgia,serif;--serif:"Fraunces",Georgia,serif;--label:"Fraunces",Georgia,serif}
body{font-weight:300;font-size:18px}
b,strong{font-weight:600}
.sec-title{font-family:var(--title);font-weight:600!important;font-variation-settings:"opsz" 144;letter-spacing:.02em}
.day-when .dow,.rsvp-block h3{font-family:var(--title);font-weight:600;font-variation-settings:"opsz" 30;letter-spacing:.05em}
.label,nav a,.btn,.choice label{font-weight:400}
.faq summary{font-weight:400}

/* ---------- Charming Atelier for titles, day names and all small print ---------- */
:root{--title:"Charming Atelier","Fraunces",Georgia,serif;--display:"Charming Atelier","Fraunces",Georgia,serif;--serif:"Charming Atelier","Fraunces",Georgia,serif;--label:"Charming Atelier","Fraunces",Georgia,serif}
body{font-weight:400;font-size:19px}
.sec-title{font-weight:400!important;font-variation-settings:normal;letter-spacing:.03em}
.day-when .dow,.rsvp-block h3{font-weight:400;font-variation-settings:normal;letter-spacing:.06em}
.label,nav a,.btn,.choice label,.faq summary{font-weight:400}
b,strong{font-weight:700}

/* "which one are you?" picker on the entry screen */
.choose-box{display:flex;flex-direction:column;gap:10px;width:min(100%,380px);align-items:stretch}
.choose-box .label{text-align:center;margin:0 0 4px}
.choose-btn{width:100%;background:var(--paper);text-transform:none;letter-spacing:.02em;font-size:1.05rem;padding:13px 16px}
.choose-btn:hover{background:var(--sage-deep);color:var(--linen)}
.choose-back{align-self:center;margin-top:4px;color:var(--rose)}