/* 2023 — "Meadow Hang". Reference: vintage botanical illustration / herbarium plate.
   Soft sage, line drawings, specimen-plate elegance, Fraunces serif. */

:root {
    --sage:    #EEF0E6;
    --cream:   #F5F4EC;
    --moss:    #5E7548;
    --deep:    #3A4A2C;
    --ink:     #2C2E22;
    --soft:    #7A8068;
    --line:    #C8CCB8;
    --berry:   #9C4A3C;
    --max:     460px;
    --ease:    cubic-bezier(.2,.7,.2,1);
    --serif:   'Fraunces', serif;
    --sans:    'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--sage); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.herbarium-frame { text-align:center; color:var(--moss); margin-bottom:16px; opacity:.85; }
.sprig { width:84px; height:112px; }

.cover-wrap { position:fixed; inset:0; z-index:100; background:var(--sage); display:flex; transition:opacity .6s var(--ease), visibility .6s; }
.cover-wrap.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.cover-inner { max-width:var(--max); width:100%; margin:auto; padding:40px 30px; display:flex; flex-direction:column; min-height:100%; }
.cover-eyebrow { font-family:var(--sans); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--moss); margin-bottom:14px; }
.cover-title { font-family:var(--serif); font-weight:500; font-size:clamp(3rem,15vw,4.6rem); line-height:.95; letter-spacing:-.02em; color:var(--deep); margin-bottom:auto; }
.cover-title em { font-style:italic; color:var(--berry); }
.cover-recipient { font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin:20px 0; }
.for-label { color:var(--soft); font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; margin-right:8px; }
#guestName { font-family:var(--serif); font-weight:500; }
.open-btn { background:var(--moss); color:var(--cream); border:none; border-radius:999px; font-family:var(--serif); font-weight:500; font-style:italic; font-size:1.05rem; padding:13px 24px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; width:100%; transition:transform .2s var(--ease); -webkit-user-select:none; user-select:none; }
.open-btn:active { transform:scale(.98); }
.open-btn .arrow { transition:transform .2s; }
.open-btn:hover .arrow { transform:translateX(4px); }
.cover-footnote { margin-top:14px; font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--soft); text-align:center; }

.invite-body { display:none; }
.invite-body.is-open { display:block; }
.section { max-width:var(--max); margin:0 auto; padding:48px 30px 8px; }
.section-eyebrow { font-family:var(--sans); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--moss); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.section-eyebrow::after { content:''; flex:1; height:1px; background:var(--moss); opacity:.25; }
.welcome-message { font-family:var(--serif); font-size:1.25rem; line-height:1.5; }
.welcome-host { margin-top:14px; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--soft); }
.savedate-name { font-family:var(--serif); font-weight:500; font-size:clamp(2rem,9vw,2.8rem); line-height:1; color:var(--deep); margin-bottom:6px; }
.savedate-date { font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--moss); margin-bottom:24px; }
.savedate-date sup { font-size:.6em; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--moss); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.35); }
.cd-unit { padding:14px 6px; text-align:center; border-right:1px solid var(--line); }
.cd-unit:last-child { border-right:none; }
.cd-num { display:block; font-family:var(--serif); font-weight:500; font-size:1.9rem; line-height:1; color:var(--deep); font-variant-numeric:tabular-nums; }
.cd-label { font-family:var(--sans); font-size:.58rem; letter-spacing:.15em; text-transform:lowercase; color:var(--soft); font-style:italic; }
.schedule-list { display:flex; flex-direction:column; gap:16px; }
.schedule-item { background:rgba(255,255,255,.4); border:1px solid var(--line); border-radius:12px; padding:18px; display:grid; gap:6px; }
.schedule-name { font-family:var(--serif); font-weight:500; font-size:1.4rem; color:var(--deep); margin-bottom:6px; }
.schedule-item p { font-size:.92rem; color:var(--ink); display:flex; align-items:center; gap:8px; }
.schedule-item p i { color:var(--moss); }
.schedule-map-link { margin-top:8px; align-self:flex-start; font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--moss); border-bottom:1px solid var(--moss); padding-bottom:2px; display:inline-flex; align-items:center; gap:6px; }
.bring-card, .weather-card { border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; background:rgba(255,255,255,.4); }
.bring-card { border-left:3px solid var(--moss); }
.weather-card { border-left:3px solid var(--berry); }
.card-label { font-family:var(--serif); font-style:italic; font-weight:500; font-size:1rem; color:var(--moss); margin-bottom:6px; }
.weather-card .card-label { color:var(--berry); }
.bring-note, .weather-note { font-family:var(--serif); font-size:1.05rem; line-height:1.45; }
.rsvp-body { min-height:0; }
.invite-footer { max-width:var(--max); margin:0 auto; padding:48px 30px 56px; text-align:center; }
.footer-thanks { font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--deep); margin-bottom:6px; }
.footer-credit { font-family:var(--sans); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--soft); }
[data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }

/* RSVP form — styled to match the herbarium cards; the platform injects
   js/rsvp_user.js which binds #rsvp-form's ids and swaps states. */
#rsvp-form { background:rgba(255,255,255,.4); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:5px; }
.form-field label { font-family:var(--sans); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--moss); }
.form-control { font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:10px 12px; width:100%; -webkit-appearance:none; appearance:none; }
select.form-control { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235E7548' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }
.form-control::placeholder { color:var(--soft); opacity:.7; }
.form-control:focus-visible, .form-control:focus { outline:2px solid var(--moss); outline-offset:1px; border-color:var(--moss); }
.form-field-pair { flex-direction:row; gap:12px; }
.form-field-pair > .form-field { flex:1; }
#rsvp-form .error { display:block; font-family:var(--sans); font-size:.72rem; color:var(--berry); min-height:1em; }
#submit-button { background:var(--moss); color:var(--cream); border:none; border-radius:999px; font-family:var(--serif); font-weight:500; font-style:italic; font-size:1.05rem; padding:13px 24px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; width:100%; margin-top:2px; transition:transform .2s var(--ease), opacity .2s var(--ease); -webkit-user-select:none; user-select:none; }
#submit-button:hover .arrow { transform:translateX(4px); }
#submit-button:active { transform:scale(.98); }
#submit-button:disabled { opacity:.55; cursor:default; }
#submit-button .arrow { transition:transform .2s; }
#rsvp-form .loading { display:none; font-family:var(--sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); text-align:center; }
#rsvp-form .thank-you-message h3 { font-family:var(--serif); font-weight:500; font-size:1.6rem; color:var(--deep); margin-bottom:6px; }
#rsvp-form .thank-you-message p { font-family:var(--serif); font-size:1rem; color:var(--ink); margin-bottom:4px; }
#rsvp-form .thank-you-message small { font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; color:var(--soft); }
@media (max-width:360px) { .form-field-pair { flex-direction:column; gap:14px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } [data-reveal] { opacity:1; transform:none; } }