:root{--green:#143c31;--deep:#0b2825;--cream:#f8f6ef;--gold:#d4b472;--text:#17342d;--muted:#5e746d;--line:#dcded3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0;background:#f5f6f1;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px max(24px,calc((100vw - 1120px)/2));background:#102f2a;color:#f7f2e4;border-bottom:1px solid #dabf8252}
.society-brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.brand-symbol{width:46px;height:46px;display:block;color:#e0c58b}.brand-symbol svg{width:100%;height:100%}.brand-name{font:750 15px/1.2 Georgia,serif;letter-spacing:.12em}.brand-name small{display:block;font:700 9px/1.8 system-ui,sans-serif;letter-spacing:.29em;color:#e2c98e}.season-tag{font-size:10px;font-weight:750;letter-spacing:.16em;color:#e8d7b2;border:1px solid #e0c58a65;padding:10px 15px;border-radius:99px;white-space:nowrap}
.main-wrap{max-width:1120px;margin:0 auto;padding:0 24px 60px}
.invitation{position:relative;text-align:center;padding:72px 20px 50px;background:linear-gradient(150deg,#164539,#0d2a28);color:#fdf8ed;border-radius:0 0 30px 30px;box-shadow:0 19px 55px #122d2533}
.gold-line{width:46px;height:3px;margin:0 auto 24px;background:var(--gold);border-radius:9px}.eyebrow,.section-prefix{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}.eyebrow{color:#e7cf9a;margin:0 0 12px}
h1{font:400 clamp(42px,7.5vw,82px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.035em;margin:12px 0 19px}h1 em{font-weight:400;color:#edce92;display:block}.intro{max-width:680px;margin:0 auto;color:#d7e3db;font-size:clamp(16px,2vw,19px);line-height:1.7}
.event-facts{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;max-width:830px;margin:42px auto 0;background:#ffffff0c;border:1px solid #dac59166;border-radius:14px;overflow:hidden;text-align:left}
.event-fact{padding:20px 22px;min-width:0}.event-fact+.event-fact{border-left:1px solid #dac59138}.fact-label{display:block;color:#ecd2a3;font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.event-fact strong{font-size:15px;color:#fff;font-weight:650;line-height:1.45}
.response-card{max-width:760px;margin:36px auto 58px;padding:35px clamp(22px,5vw,54px) 30px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 50px #163a3020}
.section-prefix{color:#9b7c40;margin:0 0 10px}.response-card h2,.guest-section h2{font:400 clamp(30px,4vw,39px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:0 0 12px}.response-card h2{color:#173f34}.response-description{color:var(--muted);line-height:1.65;margin:0 0 28px}
form label{display:block;font-size:13px;font-weight:750;margin-bottom:10px}input{width:100%;min-height:54px;padding:13px 16px;border:1px solid #b8c9bd;border-radius:10px;background:#f8faf7;font:inherit;font-size:16px;color:#1a3a31;outline:none}input:focus-visible{border-color:#b18a42;box-shadow:0 0 0 3px #e4cb9466}input:disabled{opacity:.7}
.response-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.respond{min-height:58px;border-radius:10px;border:1px solid #1c4939;font:750 15px/1.3 inherit;cursor:pointer;padding:12px 10px;transition:background .12s,transform .12s}.respond.yes{background:#184c3a;color:white}.respond.no{background:#fff;color:#184b39;border-color:#a7c1b4}.respond span{font-size:19px;font-weight:800;padding-right:7px}.respond:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.respond:focus-visible{outline:3px solid #c9a55b;outline-offset:3px}.respond:disabled{opacity:.6;cursor:wait}
.form-message{min-height:22px;margin:15px 0 0;color:#24614d;font-size:13px;font-weight:650;line-height:1.45}.form-message.error{color:#a44035}.response-note{margin:16px 0 0;padding-top:14px;border-top:1px solid #e4e8e1;color:#6b7c73;font-size:12px;line-height:1.6}
.guest-section{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px clamp(22px,5vw,43px) 34px;box-shadow:0 8px 32px #1736290c}.list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.guest-section h2{margin-bottom:0}.guest-total{display:flex;align-items:baseline;gap:8px;background:#eaf1e9;padding:12px 18px;border-radius:12px;color:#184b3a}.guest-total strong{font:400 30px Georgia,serif}.guest-total span{font-size:12px;font-weight:700}.guest-note{color:var(--muted);font-size:14px;margin:14px 0 24px}.guest-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0}.guest-list li{display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:51px;background:#f5f8f4;border:1px solid #e5ebe3;border-radius:10px;font-size:14px;font-weight:650;color:#284b3d;overflow-wrap:anywhere}.guest-list li::before{content:"✓";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#dbece0;color:#23724b;font-weight:800}.guest-list li.guest-placeholder{grid-column:1/-1;justify-content:center;color:#66786c;font-weight:500}.guest-list li.guest-placeholder::before{display:none}.guest-footer{color:#7a8c81;font-size:12px;margin:20px 0 0}.site-footer{max-width:1120px;margin:0 auto;padding:0 24px 30px;display:flex;justify-content:space-between;gap:18px;color:#738278;font-size:12px}
@media(max-width:750px){.site-head{padding:16px 21px}.main-wrap{padding:0 16px 48px}.invitation{padding:58px 17px 30px;border-radius:0 0 23px 23px}.event-facts{grid-template-columns:1fr;max-width:510px;margin-top:28px}.event-fact{padding:16px 21px}.event-fact+.event-fact{border-left:none;border-top:1px solid #dac59138}.response-card{margin:22px auto 33px}.guest-list{grid-template-columns:repeat(2,minmax(0,1fr))}.guest-total{padding:9px 12px}.guest-total strong{font-size:25px}}
@media(max-width:490px){.brand-name{font-size:13px}.season-tag{font-size:9px;padding:8px 10px}.site-head{gap:8px}.brand-symbol{width:39px;height:39px}.guest-list{grid-template-columns:1fr}.response-actions{grid-template-columns:1fr}.guest-section{padding:25px 20px}.list-heading{align-items:flex-start}.guest-total{flex-direction:column;gap:0}.site-footer{flex-direction:column;gap:5px}.invitation{padding-top:45px}}
@media(prefers-reduced-motion:reduce){.respond{transition:none}}
/* 2026 presentation invitation: one compact page; expandable guest list. */
.guest-reveal{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;margin:20px 0 0;border:1px solid #a4b9ab;border-radius:10px;background:#f0f5ed;color:#174634;font:750 15px/1.3 Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s}
.guest-reveal:hover{background:#e0eee0}.guest-reveal:focus-visible{outline:3px solid #c9a55b;outline-offset:3px}
.guest-section[hidden]{display:none!important}
.response-card .guest-section{margin:18px 0 0;padding:20px 0 0;border:0;border-top:1px solid #dce3db;border-radius:0;background:transparent;box-shadow:none}
.response-card .guest-section h2{font-size:clamp(26px,3vw,31px)}
.response-card .guest-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.response-card{margin:24px auto 40px}
.invitation{padding-top:48px;padding-bottom:32px}
.event-facts{margin-top:26px}
.main-wrap{padding-bottom:26px}
@media(max-width:600px){
 .invitation{padding-top:36px;padding-bottom:23px}
 .intro{font-size:15px}
 .response-card{padding-top:25px;padding-bottom:22px}
 .response-card .guest-list{grid-template-columns:1fr}
}

/* Mobile RSVP: show the complete invitation and both responses in the first viewport.
   The expandable guest list is the only part intended to scroll. */
@media (max-width: 750px) {
  html { scroll-padding-top: 0; }
  body { min-width: 0; }
  .site-head {
    padding: 9px 14px;
    min-height: 49px;
    gap: 8px;
  }
  .brand-symbol { width: 29px; height: 29px; }
  .brand-name { font-size: 12px; line-height: 1.05; }
  .brand-name small { font-size: 8px; line-height: 1.3; letter-spacing: .16em; }
  .season-tag { padding: 6px 8px; font-size: 8px; letter-spacing: .06em; }
  .main-wrap { padding: 0 10px 5px; }
  .invitation {
    padding: 14px 12px 13px;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
  }
  .gold-line, .eyebrow, .intro { display: none; }
  .invitation h1 {
    font-size: clamp(28px, 7.6vw, 39px);
    line-height: 1.07;
    margin: 0;
    letter-spacing: -.03em;
  }
  .invitation h1 em { display: inline; }
  .event-facts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 2px 12px;
    max-width: none;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 9px;
  }
  .event-fact {
    display: flex;
    gap: 7px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 2px 0;
  }
  .event-fact:first-child { grid-column: 1/-1; }
  .event-fact + .event-fact { border: 0; }
  .fact-label {
    font-size: 9px;
    letter-spacing: .09em;
    margin: 0;
    flex: none;
  }
  .event-fact strong { font-size: 12px; line-height: 1.3; }
  .response-card {
    margin: 10px auto 0;
    padding: 14px 15px 13px;
    border-radius: 14px;
    box-shadow: 0 5px 20px #163a3012;
  }
  .response-card > .section-prefix, .response-description, .response-note { display: none; }
  .response-card h2 {
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 12px;
  }
  form label { font-size: 12px; margin: 0 0 5px; }
  input { min-height: 46px; height: 46px; padding: 8px 12px; }
  .response-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 10px;
  }
  .respond {
    min-height: 53px;
    font-size: 13px;
    line-height: 1.18;
    padding: 8px 5px;
  }
  .respond span { font-size: 17px; padding-right: 2px; }
  .form-message { margin: 8px 0 0; min-height: 16px; font-size: 12px; }
  .guest-reveal { min-height: 45px; margin: 12px 0 0; font-size: 14px; }
  .response-card .guest-section { padding-top: 14px; }
  .site-footer { display: none; }
}
@media (max-width: 380px) {
  .site-head { padding: 8px 11px; }
  .brand-name { font-size: 11px; }
  .season-tag { font-size: 7px; }
  .main-wrap { padding: 0 7px 5px; }
  .invitation { padding: 12px 10px; }
  .invitation h1 { font-size: clamp(26px, 8vw, 30px); }
  .event-facts { padding: 7px 9px; gap: 1px 5px; }
  .event-fact strong { font-size: 11px; }
  .response-card { padding: 12px 12px 11px; }
  .response-card h2 { font-size: 25px; margin-bottom: 10px; }
  .respond { min-height: 52px; font-size: 12px; }
  .guest-reveal { min-height: 43px; }
}
/* When opening the list it can scroll normally; never trap the page. */

/* 2026 presentation: balanced single-viewport mobile layout, with normal scrolling
   when the member intentionally expands the guest list or opens the keyboard. */
@media (max-width: 750px) {
  body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .site-head {
    flex: 0 0 auto;
    min-height: 53px;
    padding: 10px 15px;
  }
  .brand-symbol { width: 34px; height: 34px; }
  .brand-name { font-size: 13px; line-height: 1.13; }
  .brand-name small { font-size: 9px; line-height: 1.4; }
  .season-tag { font-size: 9px; padding: 8px 10px; }
  .main-wrap {
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(8px,1.6svh,15px);
    padding: 0 12px clamp(8px,1.25svh,14px);
  }
  .invitation {
    flex: 0 0 clamp(185px,35svh,315px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(12px,2svh,20px) 18px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 22px #122d251d;
  }
  .gold-line { display: block; margin: 0 auto 11px; width: 38px; height: 2px; }
  .eyebrow { display: block; margin: 0 0 5px; font-size: 10px; letter-spacing: .17em; }
  .invitation h1 {
    margin: 0;
    font-size: clamp(33px,9.5vw,44px);
    line-height: 1.08;
  }
  .invitation h1 em { display: block; }
  .intro { display: none; }
  .event-facts {
    margin: clamp(12px,2.3svh,20px) 0 0;
    gap: 4px 12px;
    padding: 11px 12px;
  }
  .event-fact { gap: 7px; padding: 2px 0; }
  .fact-label { font-size: 10px; }
  .event-fact strong { font-size: 12px; line-height: 1.3; }
  .response-card {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(18px,3svh,29px) clamp(17px,4vw,28px);
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .response-card > .section-prefix { display: block; font-size: 10px; margin: 0; }
  .response-card h2 {
    font-size: clamp(28px,7vw,34px);
    margin: 0;
  }
  .response-description { display: none; }
  #presentationForm { width: 100%; }
  form label { font-size: 13px; margin-bottom: 7px; }
  input { min-height: 50px; height: 50px; padding: 10px 13px; }
  .response-actions { gap: 10px; margin-top: 12px; }
  .respond { min-height: 58px; font-size: 13px; padding: 9px 6px; }
  .respond span { font-size: 17px; }
  .form-message { margin: 10px 0 0; min-height: 17px; font-size: 12px; }
  .response-note { display: none; }
  .guest-reveal {
    width: 100%;
    flex: 0 0 auto;
    margin: 8px 0 0;
    min-height: 49px;
    font-size: 14px;
  }
  .site-footer { display: none; }
}
@media (max-width: 750px) and (min-height: 730px) {
  .invitation { flex-basis: clamp(255px,37svh,345px); }
  .intro {
    display: block;
    max-width: 410px;
    margin: 11px auto 0;
    font-size: 14px;
    line-height: 1.42;
  }
  .response-description {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }
  .response-note {
    display: block;
    margin: 7px 0 0;
    padding-top: 8px;
    font-size: 11px;
  }
}
@media (max-width: 750px) and (max-height: 620px) {
  .site-head { min-height: 46px; padding: 7px 12px; }
  .brand-symbol { width: 29px; height: 29px; }
  .brand-name { font-size: 11px; }
  .brand-name small { font-size: 8px; }
  .season-tag { font-size: 8px; padding: 6px 9px; }
  .main-wrap { gap: 8px; padding: 0 8px 7px; }
  .invitation { flex-basis: 34svh; min-height: 167px; padding: 10px 12px; }
  .gold-line,.eyebrow { display: none; }
  .invitation h1 { font-size: clamp(29px,8.2vw,36px); }
  .event-facts { margin-top: 12px; padding: 8px 10px; gap: 3px 8px; }
  .event-fact strong { font-size: 11px; }
  .response-card { padding: 12px 14px; }
  .response-card > .section-prefix { display: none; }
  .response-card h2 { font-size: 27px; }
  form label { margin-bottom: 5px; font-size: 12px; }
  input { min-height: 46px; height: 46px; }
  .respond { min-height: 52px; font-size: 12px; }
  .response-actions { margin-top: 9px; }
  .form-message { margin-top: 7px; min-height: 17px; }
  .guest-reveal { min-height: 44px; margin-top: 6px; }
}
/* The guest list is intentionally permitted to extend the page and scroll. */
@media (max-width: 750px) {
  body:has(#guestSection:not([hidden])) .main-wrap { flex: 1 0 auto; }
  body:has(#guestSection:not([hidden])) .response-card { justify-content: flex-start; gap: 12px; }
}

/* Select an RSVP response before deliberately confirming it. */
.respond.is-selected {
  border-color:#b89047;
  outline:2px solid #d5ad5e;
  outline-offset:0;
  box-shadow:0 0 0 3px #d5ad5e33;
}
.respond.no.is-selected { background:#eff5ed; color:#133f2c; }
.confirm-rsvp {
  display:block;
  width:100%;
  min-height:52px;
  margin:13px 0 0;
  border:0;
  border-radius:10px;
  background:#c5a05d;
  color:#112c24;
  font:800 15px/1.25 Inter,system-ui,sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s;
}
.confirm-rsvp:not(:disabled):hover { background:#e0b971; }
.confirm-rsvp:focus-visible { outline:3px solid #173f32; outline-offset:3px; }
.confirm-rsvp:disabled { cursor:not-allowed; opacity:.55; }
@media(max-width:750px) {
  .confirm-rsvp { min-height:51px; margin-top:10px; font-size:14px; }
  .invitation { flex-basis:clamp(175px,32svh,295px); }
  .response-card { padding-top:clamp(14px,2.3svh,22px); padding-bottom:clamp(12px,2svh,18px); }
  .response-description { display:none; }
  .response-note { display:none; }
  .response-actions { margin-top:9px; }
  .guest-reveal { margin-top:6px; }
}
@media(max-width:750px) and (min-height:730px) {
  .invitation { flex-basis:clamp(235px,34svh,315px); }
  .response-description { display:block; }
  .response-note { display:none; }
}
@media(max-width:750px) and (max-height:620px) {
  .invitation { flex-basis:29svh; min-height:147px; }
  .response-card { padding-top:9px; padding-bottom:9px; }
  .confirm-rsvp { min-height:43px; margin-top:7px; font-size:13px; }
  .respond { min-height:46px; }
  .response-actions { margin-top:7px; }
  .guest-reveal { min-height:42px; margin-top:5px; }
  .form-message { margin-top:5px; }
}

/* A selected answer must not cause any scroll on compact 568px phones. */
@media(max-width:750px) and (max-height:620px) {
  .invitation { flex-basis:27svh; min-height:141px; }
  .response-card { padding-top:8px; padding-bottom:8px; }
  .form-message { font-size:11px; line-height:1.22; }
}

/* Event information must NEVER be clipped by the mobile hero's flex basis.
   Date takes one full row; Where and Time are separate, readable columns. */
@media (max-width:750px) {
  .invitation {
    box-sizing: border-box;
    min-height: max-content;
    flex-shrink: 0;
    overflow: visible;
  }
  .event-facts {
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
    grid-auto-rows: auto;
    gap: 5px 11px;
    width: 100%;
    padding: 9px 12px;
    overflow: visible;
  }
  .event-fact {
    min-width: 0;
    padding: 1px 0;
    border: none!important;
    overflow: visible;
  }
  .event-fact:first-child {
    grid-column: 1/-1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .event-fact:nth-child(2),
  .event-fact:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .event-fact strong, .event-fact .fact-label {
    min-width: 0;
    height: auto;
    flex: none;
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
  }
}
@media (max-width:750px) and (max-height:620px) {
  .invitation {
    flex: 0 0 auto;
    min-height: 176px;
    padding: 10px 11px;
  }
  .event-facts {
    margin: 8px 0 0;
    padding: 7px 10px;
    gap: 3px 8px;
  }
  .event-fact strong {font-size:11px;}
  .response-card { flex:1 1 0; }
}

/* A little extra breathing room for the form on compact but not tiny phones. */
@media (max-width:750px) and (min-height:621px) and (max-height:729px) {
  .site-head { padding-block:8px; min-height:51px; }
  .main-wrap { gap:8px; padding-bottom:6px; }
  .response-card { padding-top:12px; padding-bottom:12px; }
}

/* RSVP management dialog */
.guest-edit{background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;flex:1;min-height:44px;padding:4px;overflow-wrap:anywhere}
.guest-edit:hover{text-decoration:underline}.guest-edit:focus-visible{outline:3px solid #b89047;border-radius:4px}
.rsvp-editor{width:min(440px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #b8c9bd;border-radius:18px;padding:24px;color:#17342d;background:#fff}
.rsvp-editor::backdrop{background:#0b2825b8}.rsvp-editor h2{font:30px Georgia,serif;margin:0 0 10px}
.rsvp-editor label{margin:14px 0 6px}.rsvp-editor select{width:100%;min-height:48px;padding:10px;border:1px solid #b8c9bd;border-radius:10px;font:inherit;background:#f8faf7}
#editPerson{font-weight:700;overflow-wrap:anywhere}#editMessage{font-size:13px;line-height:1.5;min-height:40px}
.edit-actions{display:grid;gap:10px}.edit-actions button{min-height:46px;border:1px solid #a4b9ab;border-radius:9px;background:#edf3eb;color:#17342d;font:700 14px system-ui;cursor:pointer}
.edit-actions #editSave{background:#184c3a;color:white}.edit-actions .danger{background:#fff2ee;color:#972f25;border-color:#d7aaa4}
.edit-actions button:disabled{opacity:.5;cursor:wait}