
:root {
    --cream: #faf8f4;
    --ink: #1a1714;
    --gold: #b8965a;
    --gold-light: #d4b07a;
    --warm-gray: #9a9189;
    --rule: #e0d9cf;
    /* 7 event accent colors */
    --c1: #5a3d3d; --c2: #3d5a4e; --c3: #4a3d5c;
    --c4: #5a4a2a; --c5: #2a4a5a; --c6: #4a2a3d; --c7: #3d4a2a;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--cream); color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.7; overflow-x: hidden; }

  /* ── HERO ── */
  .hero {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 60px 30px; position: relative;
    background:
      radial-gradient(ellipse at 20% 80%, rgba(184,150,90,0.09) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(184,150,90,0.06) 0%, transparent 55%),
      var(--cream);
  }
  .hero::before, .hero::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:1px; background:linear-gradient(to bottom,transparent,var(--gold),transparent); }
  .hero::before { top:0; height:80px; } .hero::after { bottom:0; height:80px; }
  .corner { position:absolute; width:60px; height:60px; opacity:0.4; }
  .corner.tl { top:24px; left:24px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
  .corner.tr { top:24px; right:24px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); }
  .corner.bl { bottom:24px; left:24px; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold); }
  .corner.br { bottom:24px; right:24px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); }
  .eyebrow { font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:28px; animation:fadeUp 1s ease both; }
  .names { font-family:'Cormorant Garamond',serif; font-size:clamp(3.5rem,10vw,7.5rem); font-weight:300; line-height:.95; animation:fadeUp 1s .15s ease both; }
  .names .amp { font-style:italic; color:var(--gold); font-size:.7em; display:block; line-height:1.3; }
  .hero-rule { width:80px; height:1px; background:var(--gold); margin:32px auto; animation:scaleIn .8s .35s ease both; }
  .hero-date { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-style:italic; color:var(--warm-gray); margin-bottom:10px; animation:fadeUp 1s .4s ease both; }
  .hero-sub { font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); animation:fadeUp 1s .5s ease both; }
  .scroll-cue { position:absolute; bottom:100px;  transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--warm-gray); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; animation:fadeUp 1.2s .8s ease both; }
  .scroll-cue span { display:block; width:1px; height:40px; background:linear-gradient(to bottom,var(--gold),transparent); animation:pulse 2s 1s infinite; }

  /* ── SHARED ── */
  section { padding:80px 24px; }
  .section-label { font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; text-align:center; }
  .section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.2rem); font-weight:400; text-align:center; line-height:1.1; margin-bottom:12px; }
  .divider { width:48px; height:1px; background:var(--gold); margin:20px auto 48px; }

  /* ── INTRO ── */
  .intro-section { max-width:620px; margin:0 auto; text-align:center; padding:60px 24px; }
  .intro-section p { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:300; line-height:1.9; color:#3a3530; }

  /* ── DATE GROUP HEADERS ── */
  .events-section { background:white; }
  .events-wrap { max-width:920px; margin:0 auto; }
  .date-group { margin-bottom:48px; }
  .date-group:last-child { margin-bottom:0; }
  .date-heading {
    font-size:.65rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--warm-gray); padding:0 0 14px;
    border-bottom:1px solid var(--rule); margin-bottom:0;
    display:flex; align-items:center; gap:16px;
  }
  .date-heading::after { content:''; flex:1; height:1px; background:var(--rule); }

  /* ── EVENT BLOCK ── */
  .event-block { display:grid; grid-template-columns:70px 1fr; gap:0 28px; padding:28px 0; border-bottom:1px solid var(--rule); transition:all .3s; }
  .event-block:last-child { border-bottom:none; }
  .event-number { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; line-height:1; color:var(--rule); padding-top:2px; text-align:right; transition:color .3s; }
  .event-block:hover .event-number { color:var(--gold-light); }
  .event-tag { display:inline-block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; padding:3px 9px; border-radius:2px; margin-bottom:10px; font-weight:400; }
  .event-name { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; line-height:1.1; margin-bottom:6px; }
  .event-date-time { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
  .event-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:12px; }
  .meta-label { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:2px; }
  .meta-value { font-size:.82rem; color:var(--ink); font-weight:400; }

  /* event color theming */
  .ev1 .event-tag { background:rgba(90,61,61,.1); color:var(--c1); }
  .ev2 .event-tag { background:rgba(61,90,78,.1); color:var(--c2); }
  .ev3 .event-tag { background:rgba(74,61,92,.1); color:var(--c3); }
  .ev4 .event-tag { background:rgba(90,74,42,.1); color:var(--c4); }
  .ev5 .event-tag { background:rgba(42,74,90,.1); color:var(--c5); }
  .ev6 .event-tag { background:rgba(74,42,61,.1); color:var(--c6); }
  .ev7 .event-tag { background:rgba(61,74,42,.1); color:var(--c7); }

  /* ── RSVP SECTION ── */
  .rsvp-section { background:var(--cream); }
  .rsvp-wrap { max-width:740px; margin:0 auto; }
  .rsvp-intro { text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--warm-gray); margin-bottom:50px; font-style:italic; }

  /* ── RSVP CARD ── */
  .rsvp-card { border:1px solid var(--rule); background:white; margin-bottom:16px; border-radius:2px; overflow:hidden; transition:box-shadow .3s; }
  .rsvp-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.06); }
  .rsvp-card-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; gap:14px; }
  .rsvp-card-left { flex:1; min-width:0; }
  .rsvp-card-tag { display:inline-block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; padding:3px 8px; border-radius:2px; margin-bottom:6px; font-weight:400; }
  .rsvp-card-name { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rsvp-card-when { font-size:.7rem; letter-spacing:.08em; color:var(--warm-gray); text-transform:uppercase; margin-top:2px; }
  .attend-btns { display:flex; gap:8px; flex-shrink:0; }
  .attend-btn { font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 16px; border:1px solid var(--rule); background:transparent; cursor:pointer; transition:all .2s; border-radius:2px; color:var(--warm-gray); white-space:nowrap; }
  .attend-btn.yes.active { background:var(--ink); border-color:var(--ink); color:white; }
  .attend-btn.no.active { background:#f0ede8; border-color:#ccc; color:var(--warm-gray); text-decoration:line-through; }

  /* rsvp card color tagging */
  .rc1 .rsvp-card-tag { background:rgba(90,61,61,.1); color:var(--c1); }
  .rc2 .rsvp-card-tag { background:rgba(61,90,78,.1); color:var(--c2); }
  .rc3 .rsvp-card-tag { background:rgba(74,61,92,.1); color:var(--c3); }
  .rc4 .rsvp-card-tag { background:rgba(90,74,42,.1); color:var(--c4); }
  .rc5 .rsvp-card-tag { background:rgba(42,74,90,.1); color:var(--c5); }
  .rc6 .rsvp-card-tag { background:rgba(74,42,61,.1); color:var(--c6); }
  .rc7 .rsvp-card-tag { background:rgba(61,74,42,.1); color:var(--c7); }

  /* ── RSVP FORM ── */
  .rsvp-form-wrap { border-top:1px solid var(--rule); padding:24px; display:none; }
  .rsvp-form-wrap.open { display:block; animation:slideDown .3s ease; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .form-field { display:flex; flex-direction:column; gap:5px; }
  .form-field label { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); font-weight:400; }
  .form-field input { border:none; border-bottom:1px solid var(--rule); background:transparent; padding:8px 0; font-family:'Jost',sans-serif; font-size:.88rem; font-weight:300; color:var(--ink); outline:none; transition:border-color .2s; border-radius:0; }
  .form-field input:focus { border-bottom-color:var(--gold); }
  .form-field input::placeholder { color:#ccc; }

  /* stepper */
  .stepper-wrap { display:flex; flex-direction:column; gap:5px; }
  .stepper-wrap label { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); font-weight:400; }
  .stepper-row { display:flex; align-items:center; gap:0; width:fit-content; }
  .stepper-btn { width:38px; height:38px; border:1px solid var(--rule); background:transparent; font-size:1.1rem; color:var(--warm-gray); cursor:pointer; transition:all .2s; border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .stepper-btn:hover { border-color:var(--gold); color:var(--gold); }
  .stepper-value { width:54px; height:38px; border:none; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--cream); text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--ink); outline:none; -moz-appearance:textfield; }
  .stepper-value::-webkit-inner-spin-button, .stepper-value::-webkit-outer-spin-button { -webkit-appearance:none; }
  .stepper-hint { font-size:.68rem; color:var(--warm-gray); margin-top:4px; }

  /* email notice */
  .email-notice { font-size:.72rem; color:var(--warm-gray); margin-top:14px; padding:10px 14px; background:#fdf9f3; border-left:2px solid var(--gold); border-radius:0 2px 2px 0; }
  .email-notice strong { color:var(--gold); }

  .submit-rsvp-btn { margin-top:20px; font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; padding:13px 32px; background:var(--ink); color:white; border:none; cursor:pointer; transition:background .2s,transform .15s; border-radius:2px; }
  .submit-rsvp-btn:hover { background:#2e2924; transform:translateY(-1px); }
  .submit-rsvp-btn:disabled { opacity:.5; cursor:default; transform:none; }

  .rsvp-submitted { display:none; padding:16px 18px; border-radius:2px; text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic; margin-top:14px; }
  .rsvp-submitted.show { display:block; animation:fadeUp .4s ease; }
  .rc1 .rsvp-submitted,.rc2 .rsvp-submitted,.rc3 .rsvp-submitted,
  .rc4 .rsvp-submitted,.rc5 .rsvp-submitted,.rc6 .rsvp-submitted,
  .rc7 .rsvp-submitted { background:#f7f4ee; color:#6a5a3a; }

  /* ── SETUP SECTION ── */
  .setup-section { background:var(--ink); padding:70px 24px; }
  .setup-wrap { max-width:860px; margin:0 auto; }
  .setup-section .section-label { color:var(--gold); }
  .setup-section .section-title { color:var(--cream); }
  .setup-section .divider { background:var(--gold); opacity:.5; }
  .setup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px; margin-top:36px; }
  .setup-card { background:#252016; padding:28px 24px; position:relative; overflow:hidden; }
  .setup-card::before { content:attr(data-step); position:absolute; top:-10px; right:14px; font-family:'Cormorant Garamond',serif; font-size:5rem; font-weight:300; color:rgba(255,255,255,.04); line-height:1; }
  .setup-card h3 { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
  .setup-card p { font-size:.82rem; color:#9a9183; line-height:1.7; margin-bottom:10px; }
  .pill { display:inline-block; font-size:.68rem; padding:3px 9px; background:rgba(184,150,90,.15); color:var(--gold-light); border-radius:2px; }

  /* domain ideas */
  .domain-ideas { margin:44px 0 0; border-top:1px solid rgba(255,255,255,.07); padding-top:44px; }
  .domain-ideas h3 { font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; text-align:center; }
  .domain-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
  .domain-pill { font-family:'Cormorant Garamond',serif; font-size:1rem; padding:7px 18px; border:1px solid rgba(184,150,90,.3); color:var(--cream); border-radius:2px; transition:all .2s; }
  .domain-pill:hover { border-color:var(--gold); background:rgba(184,150,90,.08); }
  .domain-pill .tld { color:var(--gold); }

  /* ── FOOTER ── */
  footer { background:var(--ink); border-top:1px solid rgba(255,255,255,.06); padding:44px 24px; text-align:center; color:#5a5245; font-size:.76rem; letter-spacing:.08em; }
  footer a { color:var(--gold); text-decoration:none; }
  .heart { color:var(--gold); margin:0 4px; }

  /* ── KEYFRAMES ── */
  @keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
  @keyframes scaleIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }
  @keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

  /* ── RESPONSIVE ── */
  @media(max-width:600px){
    .event-block { grid-template-columns:1fr; gap:6px; }
    .event-number { text-align:left; font-size:2.2rem; }
    .rsvp-card-header { flex-direction:column; align-items:flex-start; gap:12px; }
    .form-row { grid-template-columns:1fr; } }