:root {
    --cream:    #FAF7F2;
    --cream2:   #F3EDE3;
    --cream3:   #EAE0D0;
    --ink:      #1C1712;
    --ink2:     #4A4035;
    --ink3:     #7A6E62;
    --purple:   #6B517D;
    --purple2:  #563F64;
    --purple3:  #947CA8;
    --gold:     #987436;
    --gold2:    #B9903F;
    --gold3:    #E1C275;
    --border:   #DDD4C4;
    --shadow-lg:0 8px 40px rgba(28,23,18,0.14);
    --r:        6px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--cream); color: var(--ink); font-family: 'Libre Baskerville', serif; font-size: 14px; line-height: 1.5; min-height: 100vh; }

  .header { background: var(--purple); padding: 60px 24px 50px; text-align: center; }
  .header-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold2); }
  .header-h1 { font-family: 'Great Vibes', cursive; font-size: 56px; font-weight: 400; color: var(--cream); margin-top: 8px; }
  .header-h1 em { font-style: italic; color: var(--gold3); }
  .header-sub { margin-top: 14px; color: rgba(250,247,242,0.75); font-size: 14px; }
  .header-actions { margin-top: 28px; }

  .btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 26px; border: none; border-radius: var(--r); font-family: 'Libre Baskerville', serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }
  .btn-primary { background: var(--gold); color: #fff; }
  .btn-primary:hover { background: var(--gold2); }
  .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--ink2); }
  .btn-outline:hover { background: var(--cream2); }
  .btn-block { width: 100%; justify-content: center; }

  main { max-width: 640px; margin: 0 auto; padding: 40px 24px 80px; }
  section { margin-bottom: 40px; }
  .section-title { font-family: 'Great Vibes', cursive; font-size: 38px; font-weight: 400; color: var(--purple); margin-bottom: 16px; }

  .schedule-item { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .schedule-time { flex-shrink: 0; width: 80px; font-weight: 500; color: var(--gold); }
  .schedule-title { font-weight: 500; }
  .schedule-desc { color: var(--ink3); font-size: 13px; margin-top: 2px; }
  .content-text { white-space: pre-wrap; }
  .accordion { border-top: 1px solid var(--border); }
  .accordion-item { border-bottom: 1px solid var(--border); }
  .accordion-item summary { cursor: pointer; list-style: none; padding: 15px 28px 15px 0; color: var(--purple); font-family: 'Libre Baskerville', serif; font-size: 16px; font-weight: 700; font-style: italic; position: relative; }
  .accordion-item summary::-webkit-details-marker { display: none; }
  .accordion-item summary::after { content: '+'; position: absolute; right: 4px; top: 13px; color: var(--gold); font-size: 20px; font-weight: 400; }
  .accordion-item[open] summary::after { content: '-'; }
  .accordion-item summary:focus-visible { outline: 2px solid var(--purple3); outline-offset: 3px; }
  .accordion-content { padding: 0 0 16px; color: var(--ink2); font-size: 13px; white-space: pre-wrap; }

  /* MODAL */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(28,23,18,0.5); align-items: center; justify-content: center; padding: 20px; z-index: 100; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--cream); border-radius: 10px; box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 28px; }
  .modal-title { font-family: 'Libre Baskerville', serif; font-size: 20px; font-weight: 700; font-style: italic; color: var(--purple); margin-bottom: 16px; }
  .form-group { margin-bottom: 14px; }
  .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--ink2); margin-bottom: 5px; }
  .form-input, .form-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; font-family: 'Libre Baskerville', serif; font-size: 14px; color: var(--ink); outline: none; }
  .form-input:focus, .form-select:focus { border-color: var(--purple3); }
  .form-hint { font-size: 12px; color: var(--ink3); margin-top: 4px; }
  .form-error { font-size: 13px; color: #C0392B; margin-bottom: 12px; }
  .form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .form-check input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--purple); }
  .form-check span { font-size: 13px; color: var(--ink2); }
  .modal-close { float: right; background: none; border: none; font-size: 20px; color: var(--ink3); cursor: pointer; line-height: 1; }

  .party-card { border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-bottom: 12px; background: #fff; }
  .party-name { font-weight: 500; margin-bottom: 10px; }
  .invitation-note { color: var(--purple); font-size: 12px; margin: -4px 0 12px; }
  .party-saved { font-size: 12px; color: var(--purple3); margin-left: 8px; }
  .rsvp-confirmation { align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .rsvp-confirmation .form-hint { flex: 1 1 100%; margin-top: 0; color: var(--ink2); }

  .rsvp-toggle { display: flex; gap: 8px; }
  .btn-toggle { flex: 1; background: transparent; border: 1px solid var(--border); color: var(--ink2); }
  .btn-toggle:hover { background: var(--cream2); }
  .btn-toggle.active { background: var(--gold); border-color: var(--gold); color: #fff; }