:root{
    --bg: #FBF4EC;
    --bg-mid: #F6E8DF;
    --card: #FFFFFF;
    --card-tint: #FFF8F1;
    --ink: #3E3452;
    --ink-dim: #8A7F9C;
    --pink: #F3B9C4;
    --mint: #A7DCC5;
    --lavender: #C9B7E8;
    --butter: #F6D67E;
    --coral: #EE8266;
    --coral-dim: #D96C50;
    --border: rgba(62,52,82,0.12);
    --radius: 16px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    min-height:100vh;
  }
  .display{font-family:'Fraunces', serif;}
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- Garland / bunting ---------- */
  .garland{
    width:100%;
    overflow:hidden;
    background:var(--bg-mid);
    border-bottom:1px solid var(--border);
  }
  .garland svg{display:block;width:100%;height:auto;}

  /* ---------- Balloons ---------- */
  .balloon-field{
    position:absolute;
    inset:0;
    overflow:visible;
    pointer-events:none;
    z-index:0;
  }
  .balloon{
    position:absolute;
    width:44px;
    height:56px;
    border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;
    opacity:0.85;
    animation:bob 5s ease-in-out infinite;
  }
  .balloon::after{
    content:"";
    position:absolute;
    left:50%; bottom:-26px;
    width:1px; height:26px;
    background:rgba(62,52,82,0.25);
  }
  .balloon::before{
    content:"";
    position:absolute;
    left:50%; bottom:-6px;
    width:0; height:0;
    transform:translateX(-50%);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:6px solid inherit;
  }
  @keyframes bob{
    0%,100%{transform:translateY(0) rotate(-3deg);}
    50%{transform:translateY(-14px) rotate(3deg);}
  }
  @media (prefers-reduced-motion: reduce){
    .balloon{animation:none;}
  }

  /* ---------- Layout ---------- */
  header.hero{
    position:relative;
    max-width:920px;
    margin:0 auto;
    padding:56px 24px 40px;
    text-align:center;
    overflow:visible;
  }
  .hero-inner{position:relative; z-index:1;}
  .eyebrow{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--coral-dim);
    background:rgba(238,130,102,0.12);
    border:1px solid rgba(238,130,102,0.35);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:22px;
  }
  h1.title{
    font-size:clamp(2.2rem, 5.6vw, 3.8rem);
    font-weight:700;
    line-height:1.08;
    margin:0 0 14px;
    color:var(--ink);
  }
  h1.title em{
    font-style:normal;
    color:var(--coral);
  }
  .equation{
    display:inline-flex;
    align-items:baseline;
    gap:10px;
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(1.6rem, 4vw, 2.4rem);
    margin:6px 0 18px;
    color:var(--ink);
  }
  .equation .op{color:var(--ink-dim); font-size:0.7em;}
  .equation .n1{color:var(--pink); -webkit-text-stroke:1px var(--ink); }
  .equation .n2{color:var(--mint); -webkit-text-stroke:1px var(--ink);}
  .equation .n3{color:var(--coral);}
  .subtitle{
    font-size:18px;
    color:var(--ink-dim);
    max-width:540px;
    margin:0 auto 6px;
  }
  .location{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink-dim);
    background:var(--card);
    border:1px solid var(--border);
    padding:8px 16px;
    border-radius:999px;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .12s ease;
  }
  .location:hover{
    background:var(--card-tint);
    border-color:var(--coral);
    color:var(--coral-dim);
    transform:translateY(-1px);
  }
  .location:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}

  .datebar{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:32px 0 8px;
  }
  .day-chip{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 6px;
    width:66px;
    text-align:center;
  }
  .day-chip .wd{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    display:block;
  }
  .day-chip .num{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-weight:600;
    display:block;
    margin-top:2px;
    color:var(--ink);
  }
  .day-chip.first,.day-chip.last{
    background:var(--coral);
    border-color:var(--coral);
  }
  .day-chip.first .wd,.day-chip.last .wd{color:rgba(255,255,255,0.75);}
  .day-chip.first .num,.day-chip.last .num{color:#fff;}

  .countdown{
    margin:28px auto 0;
    display:inline-flex;
    gap:22px;
    padding:16px 28px;
    background:var(--card);
    border-radius:999px;
    border:1px solid var(--border);
  }
  .countdown .unit{text-align:center;}
  .countdown .n{
    font-family:'IBM Plex Mono', monospace;
    font-size:22px;
    color:var(--coral);
    display:block;
  }
  .countdown .l{
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }

  /* ---------- Nav tabs ---------- */
  nav.tabs{
    position:sticky; top:0; z-index:20;
    background:rgba(251,244,236,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
  }
  .tabs-inner{
    max-width:920px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px;
  }
  .tabs-left{display:flex; gap:4px;}
  .tab-btn{
    appearance:none;
    background:none;
    border:none;
    color:var(--ink-dim);
    font-family:'Work Sans', sans-serif;
    font-size:15px;
    font-weight:500;
    padding:16px 18px;
    cursor:pointer;
    border-bottom:3px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--ink);}
  .tab-btn.active{
    color:var(--coral-dim);
    border-bottom-color:var(--coral);
  }
  .tab-btn:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}

  /* ---------- Admin ---------- */
  .admin-btn{
    appearance:none;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--ink-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    transition:border-color .15s ease, color .15s ease;
  }
  .admin-btn:hover{border-color:var(--coral); color:var(--coral-dim);}
  body.is-admin .admin-btn{border-color:var(--coral); color:var(--coral-dim); background:var(--card-tint);}

  .admin-only{display:none;}
  body.is-admin .admin-only{display:inline-flex;}
  body.is-admin button.admin-only{align-items:center;}

  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(62,52,82,0.45);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-overlay.hidden{display:none;}
  .modal-box{
    position:relative;
    background:var(--card);
    border-radius:var(--radius);
    padding:28px;
    max-width:440px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 10px 40px rgba(62,52,82,0.25);
  }
  .modal-box h3{
    font-family:'Fraunces', serif;
    font-size:20px;
    margin:0 0 18px;
    color:var(--ink);
  }
  .modal-close{
    position:absolute;
    top:14px; right:14px;
    appearance:none;
    border:none;
    background:none;
    color:var(--ink-dim);
    font-size:18px;
    cursor:pointer;
    line-height:1;
    padding:4px;
  }
  .modal-close:hover{color:var(--coral-dim);}

  .add-lodging-btn{
    display:none;
    align-items:center;
    gap:6px;
    appearance:none;
    background:var(--card);
    border:1px dashed var(--coral);
    color:var(--coral-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    margin-bottom:14px;
  }
  body.is-admin .add-lodging-btn{display:inline-flex;}
  .add-lodging-btn:hover{background:var(--card-tint);}

  .lodge-card{position:relative;}
  .lodge-admin-actions{
    display:none;
    position:absolute;
    top:14px; right:14px;
    gap:6px;
  }
  body.is-admin .lodge-admin-actions{display:flex;}
  .lodge-admin-actions button{
    appearance:none;
    border:1px solid var(--border);
    background:var(--card-tint);
    border-radius:8px;
    width:28px; height:28px;
    cursor:pointer;
    font-size:13px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .lodge-admin-actions button:hover{border-color:var(--coral);}

  .guest-delete-btn{
    display:none;
    appearance:none;
    border:1px solid var(--border);
    background:var(--card-tint);
    border-radius:8px;
    width:28px; height:28px;
    cursor:pointer;
    font-size:13px;
    align-items:center; justify-content:center;
    flex-shrink:0;
  }
  body.is-admin .guest-delete-btn{display:inline-flex;}
  .guest-delete-btn:hover{border-color:var(--coral-dim);}

  main{max-width:760px; margin:0 auto; padding:40px 24px 100px;}
  section.panel{display:none;}
  section.panel.active{display:block; animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  h2.section-title{
    font-family:'Fraunces', serif;
    font-size:28px;
    font-weight:600;
    margin:0 0 6px;
    color:var(--ink);
  }
  p.section-lead{color:var(--ink-dim); margin:0 0 28px; line-height:1.55;}

  /* ---------- Form ---------- */
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
    box-shadow:0 1px 2px rgba(62,52,82,0.04);
  }
  label{
    display:block;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:8px;
    font-family:'IBM Plex Mono', monospace;
  }
  input[type=text], input[type=number], textarea{
    width:100%;
    background:var(--card-tint);
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 13px;
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:15px;
  }
  input:focus, textarea:focus{outline:2px solid var(--coral); outline-offset:1px;}
  .field{margin-bottom:22px;}
  .days-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }
  .day-toggle{position:relative;}
  .day-toggle input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0;}
  .day-toggle .box{
    display:block;
    text-align:center;
    padding:10px 4px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--card-tint);
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink-dim);
    transition:all .12s ease;
  }
  .day-toggle input:checked + .box{
    background:var(--coral);
    border-color:var(--coral);
    color:#fff;
    font-weight:600;
  }
  .day-toggle input:focus-visible + .box{outline:2px solid var(--coral); outline-offset:2px;}

  .row2{display:grid; grid-template-columns:1fr 140px; gap:16px;}
  @media (max-width:520px){.row2{grid-template-columns:1fr;} .days-grid{grid-template-columns:repeat(4,1fr);}}

  .check-field{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--card-tint);
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px 14px;
  }
  .check-field input[type=checkbox]{
    width:18px; height:18px;
    accent-color:var(--coral);
    cursor:pointer;
    flex-shrink:0;
  }
  .check-field label{
    margin:0;
    text-transform:none;
    letter-spacing:0;
    font-family:'Work Sans', sans-serif;
    font-size:14px;
    color:var(--ink);
    cursor:pointer;
  }
  .sleep-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    background:var(--lavender);
    color:#fff;
    padding:3px 9px;
    border-radius:999px;
    white-space:nowrap;
  }

  button.submit{
    appearance:none;
    border:none;
    background:var(--coral);
    color:#fff;
    font-family:'Work Sans', sans-serif;
    font-weight:600;
    font-size:15px;
    padding:13px 24px;
    border-radius:999px;
    cursor:pointer;
    transition:transform .12s ease, background .12s ease;
  }
  button.submit:hover{background:var(--coral-dim); transform:translateY(-1px);}
  button.submit:disabled{opacity:.5; cursor:default; transform:none;}
  .status-msg{margin-top:14px; font-size:14px; color:#4E9B78;}
  .status-msg.err{color:#D2544A;}

  #deadline-msg{
    display:none;
    margin:0 0 16px 0;
    padding:10px 14px;
    border-radius:8px;
    background:var(--card-tint);
    border:1px solid var(--border);
    font-size:13px;
    color:var(--ink-dim);
  }
  #deadline-msg.show{display:block;}
  #deadline-msg.closed{
    background:#FBEAE8;
    border-color:#D2544A;
    color:#B84238;
    font-weight:600;
  }
  #rsvp-fieldset:disabled{opacity:.45; pointer-events:none;}

  /* guest list */
  .guest-summary{
    display:flex; justify-content:space-between; align-items:baseline;
    margin:44px 0 16px;
  }
  .guest-summary h3{font-family:'Fraunces', serif; font-size:20px; margin:0; color:var(--ink);}
  .guest-count{font-family:'IBM Plex Mono', monospace; color:var(--coral-dim); font-size:14px;}
  .guest-list{display:flex; flex-direction:column; gap:10px;}
  .guest-row{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 16px;
    gap:12px;
  }
  .guest-row .who{font-weight:600; color:var(--ink);}
  .guest-row .days{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-dim);}
  .guest-row .cnt{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:#fff;
    background:var(--mint);
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
  }
  .empty-note{color:var(--ink-dim); font-size:14px; font-style:italic;}

  /* ---------- Lodging ---------- */
  .lodging-note{
    background:rgba(238,130,102,0.08);
    border:1px dashed rgba(238,130,102,0.4);
    border-radius:10px;
    padding:14px 16px;
    font-size:13px;
    color:var(--ink-dim);
    margin-bottom:28px;
  }
  .subsection-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--coral-dim);
    margin:0 0 14px;
  }
  .lodging-grid{display:flex; flex-direction:column; gap:16px; margin-bottom:36px;}
  .lodge-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 22px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .lodge-card.priority{
    background:linear-gradient(135deg, var(--card-tint), var(--card));
    border-color:rgba(238,130,102,0.35);
  }
  .lodge-icon{
    font-size:26px;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-mid);
    border-radius:10px;
    flex-shrink:0;
  }
  .lodge-card h4{margin:0 0 4px; font-family:'Fraunces', serif; font-size:18px; color:var(--ink);}
  .lodge-meta{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--coral-dim); margin-bottom:6px;}
  .lodge-card p{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.5;}
  .lodge-card .tag{
    display:inline-block;
    margin-top:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    background:var(--butter);
    color:var(--ink);
    padding:3px 9px;
    border-radius:999px;
  }
  .lodge-card .lodge-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--coral-dim);
    background:rgba(238,130,102,0.1);
    border:1px solid rgba(238,130,102,0.35);
    padding:5px 12px;
    border-radius:999px;
    text-decoration:none;
    transition:background .12s ease, transform .12s ease;
  }
  .lodge-card .lodge-link:hover{background:rgba(238,130,102,0.18); transform:translateY(-1px);}

  /* ---------- Articles ---------- */
  .article-list{display:flex; flex-direction:column; gap:16px; margin-top:16px;}
  .article-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 24px;
  }
  .article-date{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--coral-dim);
    margin-bottom:6px;
  }
  .article-card h4{margin:0 0 10px; font-family:'Fraunces', serif; font-size:20px; color:var(--ink);}
  .article-card .article-text{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.6; white-space:pre-wrap;}
  .article-admin-actions{
    display:none;
    position:absolute;
    top:18px; right:18px;
    gap:6px;
  }
  body.is-admin .article-admin-actions{display:flex;}
  .article-admin-actions button{
    appearance:none;
    border:1px solid var(--border);
    background:var(--card-tint);
    border-radius:8px;
    width:28px; height:28px;
    cursor:pointer;
    font-size:13px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .article-admin-actions button:hover{border-color:var(--coral);}

  footer{
    text-align:center;
    padding:30px 24px 50px;
    color:var(--ink-dim);
    font-size:13px;
  }