/* ============================================================
   The guest-filled parts: the wall, the playlist, the board
   ============================================================ */

.quiet{color:var(--ink-faint); font-style:italic; font-size:.92rem; margin:0}

/* ---------- who is coming + the playlist ---------- */
.wall-grid{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:960px; margin:0 auto; align-items:start;
}
.wall-side{min-width:0}

.wall-count{display:flex; align-items:baseline; gap:.7rem; margin:0 0 1.4rem}
.wall-num{
  font-family:var(--serif); font-size:clamp(2.6rem,6vw,3.6rem);
  color:var(--terracotta-dark); line-height:1; font-variant-numeric:tabular-nums;
}
.wall-lab{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}

.wall-names{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  display:inline-block; padding:.42rem .95rem; border-radius:999px;
  background:var(--stone-50); border:1px solid var(--stone-300);
  font-family:var(--serif); font-size:1.02rem; color:var(--green);
  animation:chipIn .5s cubic-bezier(.2,.8,.3,1) both;
}
section:nth-of-type(even) .chip{background:#fff}
.chip.small{font-size:.9rem; color:var(--ink-soft); padding:.32rem .8rem}
@keyframes chipIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.wall-title{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--marigold-deep); margin:0 0 1.1rem; font-weight:600;
}
.playlist{list-style:none; margin:0; padding:0; counter-reset:pl}
.playlist li{
  counter-increment:pl; padding:.6rem 0 .6rem 2.2rem;
  border-bottom:1px solid var(--stone-200); position:relative;
}
.playlist li:last-child{border-bottom:0}
.playlist li::before{
  content:counter(pl,decimal-leading-zero); position:absolute; left:0; top:.72rem;
  font-size:.66rem; letter-spacing:.1em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.playlist li.quiet{padding-left:0}
.playlist li.quiet::before{content:''}
.song-t{display:block; font-family:var(--serif); font-size:1.1rem; color:var(--green); line-height:1.3}
.song-a{display:block; font-size:.82rem; color:var(--ink-faint); margin-top:.1rem}
.wall-foot{margin:1.2rem 0 0; font-size:.85rem; color:var(--ink-faint)}

/* ---------- song requests in the RSVP form ---------- */
.songs{border-top:1px solid var(--stone-300); padding-top:1.4rem; margin-top:.4rem}
.songs-lead{margin:0; font-family:var(--serif); font-size:1.15rem; color:var(--green)}
.songs-sub{margin:.2rem 0 .9rem; font-size:.85rem; color:var(--ink-faint)}
.song-row{display:grid; grid-template-columns:1.35fr 1fr; gap:.6rem; margin-bottom:.6rem}

/* ---------- arrivals & carpooling ---------- */
.carpool{
  margin:2.5rem 0 .5rem; padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--stone-50); border:1px solid var(--stone-200); border-radius:1rem;
}
section:nth-of-type(even) .carpool{background:#fff}
.carpool h3{color:var(--green); margin:0 0 .5rem}
.carpool-lead{color:var(--ink-soft); font-size:.94rem; margin:0 0 1.3rem; max-width:64ch}

.carpool-gate{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.carpool-gate input{
  flex:1 1 180px; max-width:260px; padding:.75rem 1rem;
  border:1px solid var(--stone-300); border-radius:.5rem;
  font-family:var(--sans); font-size:1rem; letter-spacing:.08em;
  text-transform:uppercase; background:#fff; color:var(--ink);
}
.carpool-gate input:focus{outline:2px solid var(--terracotta); outline-offset:1px}
.carpool-err{color:#9B3B2E; font-size:.88rem; margin:.8rem 0 0; min-height:1em}

.carpool-board{overflow-x:auto; margin-bottom:1.2rem}
.cp-table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px}
.cp-table td{padding:.75rem .8rem; border-bottom:1px solid var(--stone-200); vertical-align:top}
.cp-table tr:last-child td{border-bottom:0}
.cp-who strong{display:block; font-family:var(--serif); font-size:1.05rem; color:var(--green); font-weight:400}
.cp-contact{display:block; font-size:.8rem; color:var(--ink-faint); margin-top:.15rem}
.cp-dir{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold-deep); white-space:nowrap}
.cp-air{font-family:var(--serif); color:var(--terracotta-dark); white-space:nowrap}
.cp-when{color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums}
.cp-seats{color:var(--ink-faint); font-size:.82rem; white-space:nowrap}
.cp-note{color:var(--ink-soft)}

.carpool-add{border-top:1px solid var(--stone-200); padding-top:1rem}
.carpool-add summary{
  cursor:pointer; list-style:none; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--terracotta-dark); font-weight:600; padding:.3rem 0;
}
.carpool-add summary::-webkit-details-marker{display:none}
.carpool-add summary::before{content:'+ '; font-size:1.1em; line-height:1}
.carpool-add[open] summary::before{content:'– '}

.carpool-form{
  display:grid; gap:.9rem 1rem; margin-top:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.carpool-form label{display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--ink-soft)}
.carpool-form label.wide,
.carpool-form .wide{grid-column:1 / -1}
.carpool-form input,
.carpool-form select{
  padding:.65rem .8rem; border:1px solid var(--stone-300); border-radius:.45rem;
  font-family:var(--sans); font-size:.95rem; background:#fff; color:var(--ink);
}
.carpool-form input:focus,
.carpool-form select:focus{outline:2px solid var(--terracotta); outline-offset:1px}
.carpool-form button{margin-top:.4rem}

@media(max-width:560px){
  .song-row{grid-template-columns:1fr}
  .cp-table{min-width:480px}
}