/*
Theme Name: Anna & James Wedding
Description: Demo wedding website with RSVP form, by VowsNest.
Version: 1.0
Author: VowsNest
Text Domain: annajames
*/
:root{--green:#263a2e;--sage:#dfe8dc;--lilac:#b9a7d1;--lilac-d:#6f5a94;--paper:#fcfcfa;--line:#d5dbd2;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Karla',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--green);font:1.08rem/1.7 var(--sans)}
a{color:var(--lilac-d)}
:focus-visible{outline:3px solid var(--lilac-d);outline-offset:3px}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;padding:20px 24px;border-bottom:1px solid var(--line)}
.nav a{color:var(--green);text-decoration:none}
.nav a:hover{color:var(--lilac-d)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 .4em}
.hero{background:var(--sage);text-align:center;padding:90px 24px 80px;position:relative;overflow:hidden}
.hero svg{position:absolute;width:240px;opacity:.55;color:var(--lilac-d)}
.hero .l{left:-40px;top:20px}.hero .r{right:-40px;bottom:10px;transform:rotate(180deg)}
.hero p{margin:0}
.hero .kicker{font-size:1.15rem}
h1{font-size:clamp(3.4rem,13vw,7.5rem);letter-spacing:-.01em;margin:.15em 0}
h1 span{font-style:italic;color:var(--lilac-d);font-weight:400}
.hero .when{font:500 clamp(1.4rem,4vw,2rem) var(--serif)}
.count{display:flex;justify-content:center;gap:26px;margin-top:32px;font-family:var(--serif)}
.count b{display:block;font-size:2.4rem;font-weight:500;line-height:1}
.count small{font:.9rem var(--sans)}
.section{padding:72px 0}
.section h2{font-size:clamp(2.2rem,6vw,3.2rem);text-align:center;margin-bottom:.6em}
.section p{max-width:38em;margin-left:auto;margin-right:auto}
.tint{background:var(--sage)}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:560px}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.timeline time{font:600 1.5rem var(--serif);color:var(--lilac-d)}
.timeline h3{font-size:1.5rem;margin:0}
.timeline p{margin:0}
.venue{text-align:center}
.btn{display:inline-block;background:var(--green);color:#fff;border:0;padding:14px 32px;border-radius:4px;font:600 1rem var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--lilac-d)}
form.rsvp{display:grid;gap:18px;max-width:560px;margin:0 auto}
form.rsvp label,form.rsvp fieldset{font-weight:600;display:grid;gap:6px;border:0;padding:0;margin:0}
form.rsvp legend{font-weight:600;margin-bottom:6px;padding:0}
form.rsvp .opt{display:flex;gap:22px;font-weight:400}
form.rsvp .opt label{display:flex;gap:8px;align-items:center;font-weight:400}
form.rsvp input[type=text],form.rsvp input[type=email],form.rsvp input[type=number],form.rsvp select,form.rsvp textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--green);width:100%}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 18px;border-radius:4px;margin:0 auto 22px;max-width:560px}
.notice.ok{background:#e4f2e8}.notice.err{background:#f9e3e5}
.foot{text-align:center;padding:40px 24px;border-top:1px solid var(--line);font-size:.95rem}
@media(max-width:560px){.timeline li{grid-template-columns:1fr;gap:0}.hero svg{width:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}