/* 2027 — "Shore Fire". Reference: minimalist weather report / marine forecast.
   Cool charcoal, monospaced data, forecast-block layout, restrained. */

:root {
    --bg:    #0E1216;
    --panel: #161B21;
    --line:  #2A323B;
    --ink:   #E6EDF3;
    --soft:  #7A8794;
    --hot:   #F0883E;
    --cool:  #58A6FF;
    --max:   460px;
    --ease:  cubic-bezier(.2,.7,.2,1);
    --mono:  'JetBrains Mono', monospace;
    --sans:  'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.cover-wrap { position:fixed; inset:0; z-index:100; background:linear-gradient(180deg, #0E1216 0%, #0A0D11 100%); 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 24px; display:flex; flex-direction:column; min-height:100%; }
.forecast-head { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--cool); margin-bottom:8px; }
.cover-eyebrow { font-family:var(--mono); font-size:.78rem; color:var(--soft); margin-bottom:14px; }
.forecast-block { border:1px solid var(--line); background:var(--panel); padding:14px 16px; margin-bottom:24px; }
.fc-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-family:var(--mono); font-size:.82rem; }
.fc-row:last-child { border-bottom:none; }
.fc-k { color:var(--soft); letter-spacing:.06em; }
.fc-v { color:var(--ink); }
.cover-title { font-family:var(--mono); font-weight:700; font-size:clamp(2.8rem,14vw,4.2rem); line-height:.95; letter-spacing:-.01em; color:var(--ink); margin-bottom:auto; }
.cover-recipient { display:flex; align-items:baseline; gap:10px; margin:24px 0; font-family:var(--mono); font-size:.9rem; }
#guestName { color:var(--hot); }
.open-btn { background:var(--hot); color:var(--bg); border:none; font-family:var(--mono); font-weight:700; font-size:.82rem; letter-spacing:.06em; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; width:100%; transition:opacity .2s; -webkit-user-select:none; user-select:none; }
.open-btn:hover { opacity:.88; }
.open-btn .arrow { transition:transform .2s; }
.open-btn:hover .arrow { transform:translateX(4px); }
.cover-footnote { margin-top:14px; font-family:var(--mono); font-size:.72rem; color:var(--soft); letter-spacing:.04em; }

.invite-body { display:none; }
.invite-body.is-open { display:block; }
.section { max-width:var(--max); margin:0 auto; padding:40px 24px 8px; }
.section-num { font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--cool); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.welcome-message { font-family:var(--sans); font-size:1.1rem; line-height:1.55; color:var(--ink); }
.welcome-host { margin-top:12px; font-family:var(--mono); font-size:.82rem; color:var(--soft); }
.savedate-name { font-family:var(--mono); font-weight:700; font-size:clamp(2rem,9vw,2.8rem); letter-spacing:-.01em; margin-bottom:6px; }
.savedate-date { font-family:var(--mono); font-size:.85rem; color:var(--hot); letter-spacing:.04em; margin-bottom:24px; }
.savedate-date sup { font-size:.6em; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.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(--mono); font-weight:700; font-size:1.7rem; color:var(--hot); font-variant-numeric:tabular-nums; }
.cd-label { font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; color:var(--soft); }
.schedule-list { display:flex; flex-direction:column; gap:16px; }
.schedule-item { border:1px solid var(--line); background:var(--panel); padding:14px 16px; display:grid; gap:4px; }
.schedule-name { font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:6px; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.schedule-item p { font-family:var(--mono); font-size:.82rem; color:var(--ink); }
.schedule-map-link { margin-top:8px; align-self:flex-start; font-family:var(--mono); font-size:.72rem; color:var(--cool); text-decoration:none; border-bottom:1px solid var(--cool); padding-bottom:1px; }
.bring-card, .access-card { border-left:3px solid; padding:12px 16px; margin-bottom:14px; background:var(--panel); }
.bring-card { border-color:var(--hot); }
.access-card { border-color:var(--cool); }
.card-label { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; margin-bottom:6px; }
.bring-card .card-label { color:var(--hot); }
.access-card .card-label { color:var(--cool); }
.bring-note, .access-note { font-size:.92rem; line-height:1.5; color:var(--ink); }
.rsvp-body { min-height:40px; }
.rsvp-form { border:1px solid var(--line); background:var(--panel); padding:16px; display:grid; gap:14px; }
.form-row { display:grid; gap:5px; }
.form-row.two-col { grid-template-columns:1fr 1fr; gap:10px; }
.form-cell { display:grid; gap:5px; align-content:start; }
.rsvp-form label { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--soft); }
.rsvp-form input, .rsvp-form select { width:100%; background:#0E1216; color:var(--ink); border:1px solid var(--line); font-family:var(--mono); font-size:.85rem; padding:10px 12px; outline:none; -webkit-appearance:none; appearance:none; }
.rsvp-form select { 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' stroke='%237A8794' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }
.rsvp-form input:focus, .rsvp-form select:focus { border-color:var(--cool); }
.rsvp-form input::placeholder { color:#4A5560; }
.rsvp-form .error { display:block; color:#FF7B66; font-family:var(--mono); font-size:.68rem; min-height:0; }
.rsvp-form .loading { display:none; font-family:var(--mono); font-size:.72rem; color:var(--soft); letter-spacing:.06em; }
.submit-btn { margin-top:2px; background:var(--hot); color:var(--bg); border:none; font-family:var(--mono); font-weight:700; font-size:.82rem; letter-spacing:.06em; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; width:100%; transition:opacity .2s; }
.submit-btn:hover { opacity:.88; }
.submit-btn .arrow { transition:transform .2s; }
.submit-btn:hover .arrow { transform:translateX(4px); }
@media (max-width:420px) { .form-row.two-col { grid-template-columns:1fr; } }
.invite-footer { max-width:var(--max); margin:0 auto; padding:40px 24px 52px; }
.footer-thanks { font-family:var(--mono); font-weight:700; font-size:1.3rem; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.footer-credit { font-family:var(--mono); font-size:.68rem; color:var(--soft); letter-spacing:.06em; }
.link-footer { margin-top:18px; font-family:var(--mono); font-size:.68rem; color:var(--soft); letter-spacing:.06em; }
.link-footer a { color:var(--soft); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:color .2s, border-color .2s; }
.link-footer a:hover { color:var(--hot); border-color:var(--hot); }
[data-reveal] { opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } [data-reveal] { opacity:1; transform:none; } }