:root{--ink:#24241f;--muted:#73736b;--paper:#f7f5ef;--white:#fff;--line:#dedbd1;--accent:#765345;--accent-dark:#4f3329;--sage:#52685b;--danger:#a43f36;--shadow:0 20px 60px rgba(42,38,30,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink)}a{color:inherit;text-underline-offset:3px}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:99;background:#111;color:#fff;padding:.8rem 1rem}.skip-link:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.admin-header{height:74px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(247,245,239,.96);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.admin-header nav{height:100%;display:flex;align-items:center;gap:1.5rem}.admin-header nav>a{height:100%;display:inline-flex;align-items:center;position:relative;text-decoration:none;color:var(--muted);font-weight:500;transition:color .18s ease}.admin-header nav>a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}.admin-header nav>a:hover{color:var(--accent)}.admin-header nav>a.is-active{color:var(--ink);font-weight:650}.admin-header nav>a.is-active:after{transform:scaleX(1)}.admin-header nav form{margin:0}.brand{text-decoration:none;font-family:Georgia,serif;font-size:1.35rem;letter-spacing:.2em}.brand span,.site-brand span{font-style:italic}.brand-large{font-size:2rem}.link-button{border:0;background:none;padding:.35rem 0;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.link-button.warning{color:var(--danger)}.event-tabs{padding:0 clamp(1rem,4vw,4rem);display:flex;gap:.25rem;overflow:auto;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:74px;z-index:19;scrollbar-width:thin}.event-tabs a{white-space:nowrap;text-decoration:none;color:var(--muted);padding:1rem .85rem;border-bottom:2px solid transparent;font-weight:500;transition:color .18s ease,border-color .18s ease}.event-tabs a:hover,.event-tabs a:focus-visible{color:var(--accent);border-color:var(--accent)}.event-tabs a.is-active[aria-current=page]{color:var(--ink);border-color:var(--accent);font-weight:650}.admin-main{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(2rem,5vw,5rem) 0 6rem}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}.page-heading h1{font:400 clamp(2rem,5vw,4.2rem)/1 Georgia,serif;margin:.3rem 0 .8rem;letter-spacing:-.045em}.page-heading p{color:var(--muted);max-width:650px;margin:0;line-height:1.65}.eyebrow,.mini-label{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--accent)}.heading-actions,.form-actions,.card-actions,.share-actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}.button,.mini-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);padding:.75rem 1.05rem;text-decoration:none;background:#fff;color:var(--ink);cursor:pointer;border-radius:2px;font-weight:650}.button-primary{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}.button-quiet{background:transparent}.button:hover,.button:focus-visible,.mini-button:hover,.mini-button:focus-visible{transform:translateY(-1px);box-shadow:0 8px 20px rgba(30,25,20,.1)}:focus-visible{outline:3px solid rgba(75,111,203,.45);outline-offset:3px}.notice{padding:1rem 1.2rem;margin:0 0 1.5rem;border-left:4px solid var(--sage);background:#edf4ef;line-height:1.5}.notice-error{border-color:var(--danger);background:#faecea}.notice ul{margin:.5rem 0 0}.event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.event-card,.panel,.form-section,.auth-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.event-card{padding:1.5rem}.event-card-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.78rem}.event-card h2{font:400 2rem/1.1 Georgia,serif;margin:1.6rem 0 .25rem}.event-card>p{margin:0;color:var(--muted)}.status{display:inline-flex;align-items:center;min-height:25px;padding:.3rem .55rem;border-radius:99px;background:#eee;color:#555;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:800}.status-published,.status-confirmed{background:#e4f1e8;color:#2d6540}.status-draft,.status-pending{background:#f0ece3;color:#6c5e47}.status-declined,.status-revoked{background:#f6e5e3;color:#8c3f38}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1.6rem 0}.metric-grid div{padding:.8rem;background:var(--paper)}.metric-grid strong{display:block;font:400 1.5rem Georgia,serif}.metric-grid span{font-size:.68rem;color:var(--muted)}.card-actions{padding-top:1rem;border-top:1px solid var(--line)}.empty-state{padding:4rem 2rem;text-align:center;border:1px dashed #c9c3b7;background:rgba(255,255,255,.4)}.empty-state>span{font-size:2rem;color:var(--accent)}.empty-state h2{font:400 2rem Georgia,serif}.editor-form{display:grid;gap:1.25rem}.form-section{padding:clamp(1.3rem,4vw,2.4rem)}.form-section-title{display:flex;gap:1.2rem;margin-bottom:2rem}.form-section-title>span{font:italic 1rem Georgia,serif;color:var(--accent)}.form-section-title h2,.panel h2{font:400 1.55rem Georgia,serif;margin:0}.form-section-title p{margin:.4rem 0;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}.span-2{grid-column:span 2}.form-stack{display:grid;gap:1rem}label{display:grid;gap:.45rem;font-size:.82rem;font-weight:700;color:#4b4a44}input,select,textarea{width:100%;min-height:46px;padding:.75rem .85rem;border:1px solid #cfcac0;background:#fff;color:var(--ink);border-radius:2px}textarea{resize:vertical;line-height:1.55}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid rgba(118,83,69,.12)}.hint{font-weight:400;color:var(--muted)}.theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.theme-option{position:relative;border:1px solid var(--line);padding:1rem;cursor:pointer}.theme-option input{position:absolute;opacity:0;width:1px;height:1px}.theme-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.theme-option strong,.theme-option small{display:block;margin-top:.65rem}.theme-option small{color:var(--muted)}.theme-swatch{height:120px;display:grid;place-items:center;overflow:hidden}.theme-option-botanical .theme-swatch{background:linear-gradient(145deg,#e9e1d2,#f9f5eb)}.theme-option-editorial .theme-swatch{background:#181816}.theme-swatch i{width:50px;height:70px;border:1px solid #9b795f;border-radius:50% 50% 6px 6px;transform:rotate(8deg)}.theme-option-editorial i{border-color:#d1b177;border-radius:0}.section-list{display:grid;gap:.55rem}.section-row{display:grid;grid-template-columns:32px minmax(180px,.8fr) 100px 1fr;align-items:center;gap:1rem;padding:1rem;background:#fff;border:1px solid var(--line)}.drag-mark{color:#aaa}.switch{display:flex;align-items:center;gap:.65rem}.switch input{width:1px;height:1px;position:absolute;opacity:0}.switch span{width:42px;height:24px;border-radius:99px;background:#bbb;position:relative}.switch span:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.2s}.switch input:checked+span{background:var(--sage)}.switch input:checked+span:after{transform:translateX(18px)}.switch input:focus-visible+span{outline:3px solid rgba(75,111,203,.45)}.order-input{width:76px}.split-layout{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:1rem;align-items:start}.panel{padding:1.5rem}.item-list{display:grid;margin-top:1rem}.list-item{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}.list-item h3,.timeline-admin h3{margin:.25rem 0;font:400 1.3rem Georgia,serif}.list-item p,.timeline-admin p{margin:.25rem 0;color:var(--muted)}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:1.25rem}.timeline-admin article{display:grid;grid-template-columns:60px 1fr auto;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}.timeline-admin time{font-family:Georgia,serif;color:var(--accent)}.table-shell{overflow:auto;background:#fff;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;min-width:850px}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.69rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);background:#fbfaf7}td strong,td small{display:block}td small{margin-top:.3rem;color:var(--muted)}.mini-button{min-height:34px;padding:.4rem .65rem;font-size:.75rem}.inline-form{display:inline;margin-left:.5rem}.editor-narrow{max-width:780px}.upload-panel{display:grid;grid-template-columns:1.4fr 1fr 100px auto;align-items:end;gap:1rem;padding:1.4rem;background:#fff;border:1px solid var(--line);margin-bottom:1.2rem}.file-drop input{padding:.55rem}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.media-grid figure{margin:0;background:#fff;border:1px solid var(--line)}.media-grid img{width:100%;aspect-ratio:4/3;display:block;object-fit:cover}.media-grid figcaption{display:flex;justify-content:space-between;align-items:center;padding:.8rem;gap:1rem}.auth-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 15%,#e7ddd0,transparent 36%),var(--paper)}.auth-shell{width:min(440px,calc(100% - 2rem));display:grid;gap:1.5rem}.auth-shell .notice{margin-bottom:0}.auth-card{padding:clamp(1.5rem,6vw,3rem)}.auth-card h1{font:400 3rem Georgia,serif;margin:.3rem 0}.auth-card>p{color:var(--muted);line-height:1.5}.muted{color:var(--muted)}
@media(max-width:820px){.event-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.form-grid,.theme-picker,.split-layout{grid-template-columns:1fr}.span-2{grid-column:auto}.section-row{grid-template-columns:24px 1fr 80px}.heading-input{grid-column:2/-1}.upload-panel{grid-template-columns:1fr 1fr}.file-drop{grid-column:1/-1}.media-grid{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:repeat(2,1fr)}}
.theme-option-birthday .theme-swatch{position:relative;background:#ffd34e}.theme-option-birthday .theme-swatch:before{content:"";position:absolute;width:92px;height:92px;border:18px solid #b83224;border-radius:50%;right:-24px;top:-28px}.theme-option-birthday .theme-swatch:after{content:"";position:absolute;width:64px;height:5px;background:#171717;left:12px;bottom:28px;box-shadow:0 14px 0 #176b87,0 28px 0 #b83224;transform:rotate(-12deg)}.theme-option-birthday .theme-swatch i{position:relative;z-index:1;width:56px;height:70px;border:0;border-radius:0;background:#171717;transform:rotate(-5deg)}
.theme-option-birthday_glow .theme-swatch{position:relative;background:#fff9f2}.theme-option-birthday_glow .theme-swatch:before,.theme-option-birthday_glow .theme-swatch:after{content:"";position:absolute;border-radius:50%;box-shadow:inset -10px -12px 18px rgba(64,27,53,.16)}.theme-option-birthday_glow .theme-swatch:before{width:96px;height:96px;right:-20px;top:-24px;background:radial-gradient(circle at 32% 26%,#fff6f3 0 10%,#e6677f 42%,#c84d6b 100%)}.theme-option-birthday_glow .theme-swatch:after{width:70px;height:70px;left:-12px;bottom:-18px;background:radial-gradient(circle at 32% 26%,#f8f0ff 0 10%,#a78ac7 44%,#8164a3 100%)}.theme-option-birthday_glow .theme-swatch i{position:relative;z-index:1;width:84px;height:48px;border:0;border-top:3px solid #e4b769;border-radius:50%;transform:rotate(-14deg)}
.theme-option-birthday_swipe .theme-swatch{position:relative;background:#0b0b0d}.theme-option-birthday_swipe .theme-swatch:before,.theme-option-birthday_swipe .theme-swatch:after{content:"";position:absolute;inset:-18px auto -18px;width:58%;clip-path:polygon(28% 0,100% 6%,72% 100%,0 94%)}.theme-option-birthday_swipe .theme-swatch:before{left:-12px;background:linear-gradient(100deg,#15171a,#856f3c 48%,#e6d0a3 54%,#27292d 64%)}.theme-option-birthday_swipe .theme-swatch:after{right:-15px;background:linear-gradient(82deg,#26292e,#dfe3e8 38%,#62676e 46%,#111317 68%)}.theme-option-birthday_swipe .theme-swatch i{position:relative;z-index:1;width:2px;height:96px;border:0;border-radius:0;background:#d7b35a;box-shadow:0 0 10px rgba(215,179,90,.6);transform:none}
.theme-option-birthday_canvas_swipe .theme-swatch{position:relative;background:#14151a}.theme-option-birthday_canvas_swipe .theme-swatch i{position:relative;z-index:1;width:46px;height:100px;border:1px solid rgba(240,240,245,.28);border-radius:0;background:linear-gradient(160deg,#3a3f52,#1e2027 62%,#2b2f3d);transform:none}.theme-option-birthday_canvas_swipe .theme-swatch:before{content:"";position:absolute;inset:12px;border:1px dashed rgba(240,240,245,.16)}

.location-form{min-width:0}.location-label-fieldset{min-width:0;margin:.25rem 0;padding:0;border:0}.location-label-fieldset legend{margin-bottom:.65rem;font-size:.82rem;font-weight:700;color:#4b4a44}.location-label-options{display:grid;gap:.55rem}.location-label-option{position:relative;display:block;cursor:pointer}.location-label-option input{position:absolute;width:1px;height:1px;min-height:1px;opacity:0}.location-label-option span{display:grid;gap:.3rem;min-height:68px;padding:.8rem .9rem;border:1px solid #cfcac0;background:#fff}.location-label-option strong{font-size:.82rem;color:var(--ink)}.location-label-option small{font-weight:400;line-height:1.4;color:var(--muted)}.location-label-option input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px rgba(118,83,69,.22)}.location-label-option input:focus-visible+span{outline:3px solid rgba(75,111,203,.45);outline-offset:3px}.field-error{font-weight:650;color:var(--danger)}[aria-invalid="true"]:is(input,select,textarea){border-color:var(--danger)}.location-list-copy{min-width:0}.location-list-copy h3,.location-list-copy p{overflow-wrap:anywhere}.location-list-actions{display:flex;align-items:flex-start;gap:.55rem;flex-wrap:wrap}.location-list-actions form{margin:0}.list-item.is-editing{margin-inline:-.75rem;padding-inline:.75rem;background:var(--paper)}

@media(max-width:480px){.location-list-actions{flex-direction:column;align-items:flex-end}.location-label-option span{min-height:74px}}
@media(max-width:520px){.admin-header{height:64px}.admin-header nav{gap:.8rem}.event-tabs{top:64px}.admin-main{width:min(100% - 1.2rem,1180px);padding-top:2rem}.page-heading h1{font-size:2.5rem}.section-row{grid-template-columns:1fr 76px}.drag-mark{display:none}.heading-input{grid-column:1/-1}.media-grid,.upload-panel{grid-template-columns:1fr}.form-actions>.button{flex:1}.metric-grid{gap:.35rem}.panel,.form-section{padding:1rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.event-context{max-width:800px;margin:0;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.025em;line-height:1.45;overflow-wrap:anywhere}.event-tabs .event-preview-action{margin-left:.65rem;padding-inline:1.1rem;border-left:1px solid var(--line);color:var(--accent-dark);font-weight:700}.theme-form{margin-bottom:1.75rem}.theme-form .form-actions{justify-content:flex-end;margin-top:1.25rem}.design-composition-heading{margin:.25rem 0 0;padding-top:.5rem}.design-composition-heading p{margin:.4rem 0;color:var(--muted);line-height:1.55}
@media(max-width:520px){.event-tabs .event-preview-action{margin-left:.25rem}.theme-form .form-actions>.button{flex:0 1 auto}}
.monogram-editor{min-width:0;margin:0;padding:0;border:0;display:grid;gap:.65rem}.monogram-editor legend{padding:0;font-size:.82rem;font-weight:700;color:#4b4a44}.monogram-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}.monogram-editor>.hint{margin:0}

.invitations-heading {
  margin-bottom: 1.5rem;
}

.invitation-summary {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin: 0 0 1rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}

.invitation-summary-metric {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
}

.invitation-summary-metric strong {
  color: var(--ink);
  font: 400 clamp(1.65rem, 3vw, 2.25rem) / 1 Georgia, serif;
}

.invitation-summary-metric span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.invitation-summary-confirmed strong {
  color: var(--sage);
}

.invitation-summary + .table-shell {
  position: relative;
}

@media (max-width: 520px) {
  .invitations-heading {
    margin-bottom: 1.25rem;
  }

  .invitation-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.9rem 0;
  }

  .invitation-summary-metric {
    display: grid;
    gap: 0.2rem;
  }
}

.section-row-configurable {
  align-items: start;
}

.section-config-fields {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.section-config-fields > :only-child,
.section-config-fields > .privacy-hint {
  grid-column: 1 / -1;
}

.dress-inspiration-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fbfaf7;
}

.dress-inspiration-fields legend {
  padding: 0 0.35rem;
  color: var(--accent-dark);
  font: 400 1rem Georgia, serif;
}

.dress-inspiration-fields > .hint {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.55;
}

.privacy-hint {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--accent);
  background: #f4efe8;
  color: #4c4942;
  font-size: 0.84rem;
  line-height: 1.55;
}

.gift-methods-panel {
  margin-top: 2rem;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.panel-heading p {
  margin: 0.45rem 0 0;
  line-height: 1.55;
}

.gift-method-list {
  display: grid;
  margin: 1rem 0;
}

.gift-method-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.gift-method-copy {
  min-width: 0;
}

.gift-method-copy h3 {
  margin: 0.3rem 0;
  font: 400 1.35rem Georgia, serif;
  overflow-wrap: anywhere;
}

.gift-method-copy p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.gift-method-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gift-method-actions form {
  margin: 0;
}

.gift-type-fields {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
}

.gift-type-fields[hidden] {
  display: none;
}

.gift-type-fields legend {
  padding: 0 0.35rem;
  color: var(--accent-dark);
  font: 400 1.2rem Georgia, serif;
}

@media (max-width: 820px) {
  .section-config-fields {
    grid-column: 2 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  .section-config-fields > .privacy-hint {
    grid-column: auto;
  }

  .dress-inspiration-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .gift-method-summary {
    grid-template-columns: minmax(0, 1fr) 80px;
  }

  .gift-method-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .section-config-fields {
    grid-column: 1 / -1;
  }

  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-heading .button {
    width: 100%;
  }

  .gift-method-summary {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
}

.editorial-disclosure {
  min-width: 0;
}

.editorial-disclosure summary {
  min-height: 46px;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #73736b;
  background: #fbfaf7;
  cursor: pointer;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 750;
}

.editorial-disclosure summary:focus-visible {
  outline: 3px solid #4b6fcb;
  outline-offset: 3px;
}

.editorial-summary-values {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: var(--ink);
  font-weight: 450;
}

.editorial-summary-values > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.editorial-summary-values small {
  margin-left: 0.35rem;
  color: var(--muted);
}

.editorial-fields {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-top: 0;
}

.editorial-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  min-width: 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--line);
}

.editorial-field.is-custom {
  border-left-color: var(--sage);
}

.editorial-field label,
.editorial-field input,
.editorial-current {
  grid-column: 1 / -1;
}

.editorial-field input {
  border-color: #73736b;
}

.editorial-current {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.editorial-current strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.editorial-field .mini-button {
  grid-column: 2;
  justify-self: end;
}

.editorial-inactive-note,
.editorial-no-slots {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.editorial-inactive-note {
  padding: 0.7rem 0.8rem;
  border-left: 3px solid #9a8a6f;
  background: #f4efe8;
}

.editorial-reset-section {
  justify-self: start;
}

.editorial-disclosure :focus-visible {
  outline-color: #4b6fcb;
}

@media (max-width: 820px) {
  .editorial-disclosure,
  .editorial-no-slots {
    grid-column: 2 / -1;
  }
}

@media (max-width: 520px) {
  .editorial-disclosure,
  .editorial-no-slots {
    grid-column: 1 / -1;
  }

  .editorial-fields {
    padding: 0.85rem;
  }
}

/* Typography: art-directed base style plus per-role family overrides. */
.typography-base{margin-bottom:1.5rem;max-width:46rem}
.typography-base-fixed{margin:.5rem 0 0}
.typography-customised{display:inline-block;margin:.75rem 0 0;padding:.2rem .6rem;border:1px solid var(--accent);color:var(--accent);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.typography-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.typography-role{min-width:0;border:1px solid var(--line);padding:1rem}
.typography-role select{width:100%}
.typography-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.typography-preview{margin:.85rem 0 0;border:1px solid var(--line);padding:1rem;min-width:0;overflow-wrap:anywhere}
.typography-preview p{margin:0 0 .55rem;min-width:0;max-width:100%}
.typography-preview p:last-child{margin-bottom:0}
.typography-preview-name{font-size:clamp(1.6rem,4vw,2.3rem);line-height:calc(1.05 * var(--type-name-leading,1))}
.typography-preview-kicker{font-size:.66rem;line-height:1.4}
.typography-preview-title{font-size:clamp(1rem,2vw,1.3rem);line-height:calc(1.2 * var(--type-title-leading,1))}
.typography-preview-body{font-size:.9rem;line-height:1.6;color:var(--muted)}
@media(max-width:820px){.typography-roles{grid-template-columns:1fr}}

/*
 * Birthday 04 — Canvas Swipe, the per-chapter lienzo controls.
 *
 * Rendered only inside a Canvas Swipe event's section editor. Everything here
 * is presentation for three controls and one preview; no rule in this block
 * implies a fourth control, and none of it is reachable from another theme's
 * editor because the markup is not emitted there.
 */
.canvas-disclosure {
  grid-column: 2 / -1;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fbfaf7;
}

.canvas-disclosure.is-recoverable {
  border-color: var(--danger);
}

.canvas-disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4b4a44;
}

.canvas-summary-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  font-weight: 400;
  color: var(--muted);
}

.canvas-fields {
  display: grid;
  gap: 1rem;
  padding: 0.85rem;
  border-top: 1px solid var(--line);
}

.canvas-notice {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid #9a8a6f;
  background: #f4efe8;
  color: #4c4942;
  font-size: 0.84rem;
  line-height: 1.55;
}

.canvas-notice-recoverable {
  border-left-color: var(--danger);
  background: #faecea;
}

.canvas-notice ul,
.canvas-notice p {
  margin: 0.45rem 0 0;
}

.canvas-group {
  min-width: 0;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  gap: 0.6rem;
}

.canvas-group legend {
  padding: 0 0.35rem;
  color: var(--accent-dark);
  font: 400 1rem Georgia, serif;
}

.canvas-group .hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Layout and intent are real radio groups: a keyboard reaches them with the
 * arrow keys, a screen reader announces the legend, and nothing depends on
 * clicking a picture. */
.canvas-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  min-height: 44px;
  padding: 0.45rem 0.5rem;
  border: 1px solid transparent;
  font-weight: 400;
  cursor: pointer;
}

.canvas-option:has(input:checked) {
  border-color: var(--accent);
  background: #f7f2ee;
}

.canvas-option input {
  width: auto;
  min-height: 0;
  margin: 0;
  grid-row: span 2;
}

.canvas-option-label {
  font-weight: 700;
  color: var(--ink);
}

.canvas-option-hint {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* `NONE` removes the editorial layer instead of shaping it, so it is separated
 * from the structures above rather than sitting in the list as a fourth
 * column width. */
.canvas-option--none {
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

.canvas-fixed-value {
  margin: 0;
  font-size: 0.9rem;
}

/* Step L. A width this chapter's prose has outgrown is offered as unavailable
 * rather than accepted and then widened behind the host's back. It is a real
 * disabled radio, so it cannot be chosen and cannot be posted — and it is never
 * applied to the width already saved, which is why a host who is here to edit a
 * title never loses their stored composition to a control they did not touch. */
.canvas-option.is-unavailable {
  cursor: default;
  opacity: 0.62;
}

.canvas-option.is-unavailable .canvas-option-label {
  font-weight: 400;
}

.canvas-width-unavailable {
  margin: 0;
}

/* The one thing an administrator has to be told about a chapter whose stored
 * width no longer fits: what their guest is actually seeing. */
.canvas-notice-effective {
  border-left-color: #b4632a;
  background: #f8efe6;
}

/* The two bounded position controls.
 *
 * Native `input[type=range]` elements, deliberately: they are keyboard operable
 * before any script runs, arrows step them, Home and End reach the extremes, and
 * the form posts them with JavaScript off. The end labels are the whole readout —
 * there is no percentage, because the decision is visual and a number would
 * invite a host to reason about the geometry instead of their artwork. */
.canvas-axis-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

/* Each axis names itself, because "Izquierda / Derecha" and "Superior /
 * Inferior" are the ends of two different questions and a screen reader meets
 * them as a flat sequence of ranges without it. */
.canvas-axis-label {
  margin-bottom: -0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.canvas-axis-end {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.canvas-axis-slider {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The focus ring has to survive the native control's own styling, and it has to
 * be visible against the panel rather than only against the track. */
.canvas-axis-slider:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 4px;
}

.canvas-position-reset {
  justify-self: start;
}

.canvas-position-group[hidden] {
  display: none;
}

.canvas-artwork-current {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.canvas-artwork-current img {
  width: 72px;
  aspect-ratio: 1080 / 2340;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eee;
}

.canvas-artwork-current .hint {
  overflow-wrap: anywhere;
}

.canvas-artwork-empty {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed #c9c3b7;
  color: var(--muted);
  font-size: 0.85rem;
}

.canvas-picker > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.canvas-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.canvas-artwork-option {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0.4rem;
  border: 1px solid var(--line);
  font-weight: 400;
  cursor: pointer;
}

.canvas-artwork-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.canvas-artwork-option input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.canvas-artwork-option img,
.canvas-artwork-swatch {
  width: 100%;
  aspect-ratio: 1080 / 2340;
  object-fit: cover;
  background: #efece5;
}

.canvas-artwork-swatch {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.canvas-artwork-name {
  width: 100%;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Advisory, never a failure: the invitation still works, and the guest is told
 * none of this. */
.canvas-capacity {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid #b4632a;
  background: #f8efe6;
  color: #4c4942;
  font-size: 0.84rem;
  line-height: 1.55;
}

.canvas-capacity.is-quiet {
  display: none;
}

.canvas-preview {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.canvas-preview-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.canvas-preview-viewports {
  display: flex;
  gap: 0.35rem;
}

.canvas-preview-viewports .mini-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: #f7f2ee;
}

.canvas-guide-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 0.82rem;
}

.canvas-guide-toggle input {
  width: auto;
  min-height: 0;
  margin: 0;
}

/* The preview is the real invitation in an iframe, at a real viewport size, so
 * it resolves the same stage rule the guest's phone resolves. Two sizes only:
 * a reference phone and a window wide enough to show the portrait stage with
 * its surround. */
.canvas-preview-frame {
  overflow: auto;
  padding: 0.6rem;
  border: 1px solid var(--line);
  background: #24241f;
}

.canvas-preview-frame iframe {
  display: block;
  width: 390px;
  height: 844px;
  max-width: 100%;
  border: 0;
  background: #14151a;
}

.canvas-preview-frame[data-canvas-viewport="desktop"] iframe {
  width: 1024px;
  height: 640px;
}

/* Step M. The form's own submit, repeated where a host actually finishes a
 * chapter, beside that chapter's reset.
 *
 * Wraps rather than compresses: on a narrow admin the two fall onto their own
 * lines at full width instead of shrinking into two illegible halves, and
 * neither can push the panel wider than it is. */
.canvas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.35rem;
}

.canvas-actions > .button {
  min-width: 0;
}

/* Saving is the primary action and resetting is not, but resetting is also not
 * destructive — it removes this chapter's Canvas settings and nothing else, so
 * it is quiet rather than dangerous. */
.canvas-reset {
  justify-self: start;
  color: var(--accent-dark);
}

.canvas-reset-note {
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 520px) {
  .canvas-actions > .button {
    flex: 1 1 100%;
  }
}

@media (max-width: 820px) {
  .canvas-disclosure {
    grid-column: 2 / -1;
  }
}

@media (max-width: 520px) {
  .canvas-disclosure {
    grid-column: 1 / -1;
  }

  .canvas-preview-frame iframe,
  .canvas-preview-frame[data-canvas-viewport="desktop"] iframe {
    width: 100%;
  }
}

/* Step S — the two kinds of invitation, told apart.
 *
 * The list pill reuses `.status` and adds only a palette, because a mode is the
 * same sort of at-a-glance fact as a state and deserves the same shape. The two
 * colours are drawn from tokens already in this sheet rather than invented, and
 * the pill always carries its word — `Personalizada` or `Link compartido` — so
 * the colour is reinforcement and never the whole message.
 *
 * The event's default-mode radios reuse the invitation form's own label
 * treatment; `.choice-stack` only stacks them and gives each row room for the
 * one line of explanation the choice needs. */
.status-mode-personalized {
  background: #e8eef6;
  color: #33507a;
}

.status-mode-shared {
  background: #f2ecf8;
  color: #5b3f7d;
}

/* A link's answer count is not an invitation's RSVP state.
 *
 * It first reused `.status-confirmed`, and a browser assertion that reads
 * the confirmed pill to total up people caught it: the two facts look alike
 * and are not the same fact, so the count gets its own pill and
 * `.status-confirmed` keeps meaning exactly what it has always meant. */
.status-responses {
  background: #e4f1e8;
  color: #2d6540;
}

.status-responses-empty {
  background: #f0ece3;
  color: #6c5e47;
}

.choice-stack {
  display: grid;
  gap: 0.6rem;
}

.choice-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, #ddd8cd);
  border-radius: 6px;
  cursor: pointer;
}

.choice-row span {
  display: grid;
  gap: 0.2rem;
}

.choice-row small {
  color: #6c6659;
}

.choice-row:focus-within {
  outline: 3px solid #4a63a8;
  outline-offset: 2px;
}

/* Maintenance — permanent deletion.
   Destructive intent is carried by the word "Eliminar permanentemente", by the
   typed confirmation and by the outlined weight of the control, so it survives
   monochrome rendering and forced colours. Colour reinforces it; it never
   carries it alone. */
.button-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.button-danger:hover,
.button-danger:focus-visible {
  background: #8c3227;
  border-color: #8c3227;
}

.maintenance-jump {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: -1.2rem 0 1.5rem;
  color: var(--muted);
  font-size: .85rem;
}

.maintenance-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
}

.maintenance-scope label {
  grid-column: 1;
}

.maintenance-form {
  display: grid;
  gap: 1.25rem;
}

.maintenance-panel {
  padding: clamp(1.1rem, 3vw, 1.8rem);
}

.maintenance-panel .panel-heading p {
  margin: .4rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.maintenance-scope-note {
  margin: 0 0 .75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.maintenance-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maintenance-item {
  display: grid;
  gap: .55rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.maintenance-item:first-child {
  border-top: 0;
}

/* A real checkbox with a real label. The whole block is the hit target, which
   matters most on a phone, and nothing about the row is clickable except the
   choice itself. */
.maintenance-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 400;
}

.maintenance-choice input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  height: 22px;
  margin-top: .2rem;
  accent-color: var(--accent-dark);
}

.maintenance-choice-body {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.maintenance-choice-body strong {
  font-size: 1.05rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.maintenance-choice-body small,
.maintenance-slug {
  color: var(--muted);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.maintenance-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  padding-left: 2.5rem;
  color: var(--muted);
  font-size: .8rem;
}

.maintenance-responses {
  font-weight: 700;
  color: var(--ink);
}

.maintenance-item-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding-left: 2.5rem;
  font-size: .82rem;
}

.maintenance-actions {
  align-items: center;
}

.maintenance-actions .hint {
  margin: 0;
  flex: 1 1 16rem;
}

.maintenance-summary {
  padding: clamp(1.1rem, 3vw, 1.8rem);
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--danger);
}

.maintenance-summary-list {
  display: grid;
  gap: .45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.maintenance-summary-list strong {
  display: inline-block;
  min-width: 2.5ch;
  font: 400 1.35rem/1 Georgia, serif;
}

.maintenance-summary-alarm {
  font-weight: 650;
  color: var(--danger);
}

.maintenance-warning {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  background: #faecea;
  border-left: 4px solid var(--danger);
  line-height: 1.55;
}

.maintenance-confirm {
  display: grid;
  gap: 1.25rem;
}

.maintenance-impact {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.maintenance-impact:first-of-type {
  border-top: 0;
}

.maintenance-impact h3 {
  margin: 0;
  font: 400 1.45rem Georgia, serif;
  overflow-wrap: anywhere;
}

.maintenance-impact .maintenance-slug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0 .75rem;
}

.maintenance-impact-list {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.55;
}

.maintenance-typed {
  display: grid;
  gap: .45rem;
  max-width: 26rem;
  margin-top: 1rem;
}

.maintenance-typed code {
  padding: .1rem .35rem;
  background: var(--paper);
  font-size: .95em;
}

.maintenance-absorbed {
  border-left: 4px solid var(--sage);
}

.maintenance-absorbed h2 {
  font: 400 1.35rem Georgia, serif;
  margin: 0 0 .4rem;
}

@media (max-width: 620px) {
  .maintenance-scope {
    grid-template-columns: 1fr;
  }

  .maintenance-facts,
  .maintenance-item-links {
    padding-left: 0;
  }

  .maintenance-actions > .button {
    flex: 1 1 100%;
  }
}

/* Step W — the RSVP deadline, said out loud on the card.
 *
 * The event date has always been in the card's top rail. The deadline is a
 * different fact and gets a different place: a labelled strip under the title,
 * inset like `.metric-grid` so it reads as event metadata rather than as a
 * second headline competing with the names.
 *
 * Emphasis is deliberately restrained and carries no meaning on its own. Every
 * state prints its own words — `Quedan 3 dias`, `Cierra hoy`, `RSVP cerrado`,
 * `Sin fecha limite de RSVP` — and the colour only makes the two that need
 * acting on easier to find while scanning a grid. Both tones are tokens this
 * sheet already defines; no new palette, and no traffic light.
 */
.event-card > .event-rsvp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.65rem;
  margin: 1.1rem 0 0;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  border-left: 2px solid var(--line);
  color: #4b4a44;
  font-size: 0.85rem;
  line-height: 1.5;
}

.event-rsvp-deadline {
  font-weight: 650;
  color: var(--ink);
}

.event-rsvp-deadline time {
  font-variant-numeric: tabular-nums;
}

.event-rsvp-status {
  font-weight: 500;
}

/* Closing today or tomorrow is the one open state worth interrupting a scan
 * for, so it takes the sheet's own accent rather than a colour invented here. */
.event-card > .event-rsvp[data-rsvp-state="today"],
.event-card > .event-rsvp[data-rsvp-state="tomorrow"] {
  border-left-color: var(--accent);
}

.event-rsvp[data-rsvp-state="today"] .event-rsvp-status,
.event-rsvp[data-rsvp-state="tomorrow"] .event-rsvp-status {
  color: var(--accent-dark);
  font-weight: 700;
}

/* Closed is the state that sent a host looking for a broken link. */
.event-card > .event-rsvp[data-rsvp-state="closed"] {
  border-left-color: var(--danger);
}

.event-rsvp[data-rsvp-state="closed"] .event-rsvp-status {
  color: var(--danger);
  font-weight: 700;
}

@media (max-width: 520px) {
  .event-card > .event-rsvp {
    padding: 0.6rem 0.7rem;
  }
}

/* Step Z — the confirmed guests of one event, and the metric that opens them.
 *
 * The dashboard tile keeps the grid's own inset look; only hover and
 * focus-visible say that this one leads somewhere, and only this one, because a
 * card where every figure appears clickable says nothing about which is. Both
 * indications are built from tokens this sheet already defines.
 */
.metric-grid .metric-linked {
  padding: 0;
}

.metric-grid .metric-linked > a {
  display: block;
  padding: 0.8rem;
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.metric-grid .metric-linked > a:hover,
.metric-grid .metric-linked > a:focus-visible {
  background: #fff;
  border-left-color: var(--accent);
}

.metric-grid .metric-linked > a:hover strong,
.metric-grid .metric-linked > a:focus-visible strong {
  color: var(--accent-dark);
}

/* The list itself. Rows rather than a table: `table` carries an 850px minimum
 * width that is right for the invitation grid and wrong for a page a host reads
 * on a phone, so these reflow into a stack instead of scrolling sideways. */
.confirmed-explainer {
  margin: 0 0 1.75rem;
  color: var(--muted);
  line-height: 1.6;
}

.confirmed-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
}

.confirmed-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.confirmed-row:last-child {
  border-bottom: 0;
}

.confirmed-identity {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  min-width: 0;
}

/* Long family names and long single names both wrap rather than clip; nothing
 * on this page is ever truncated, because a half-printed guest is worse than a
 * taller row. */
.confirmed-name {
  font: 400 1.25rem/1.3 Georgia, serif;
  overflow-wrap: anywhere;
}

.confirmed-date {
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.confirmed-attendance {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.confirmed-attendance-phrase {
  font-weight: 650;
}

.confirmed-attendance-count {
  color: var(--muted);
  font-size: 0.85rem;
}

/* A household has no "va solo" to lead with — nothing in its data names a
 * primary guest — so the size it does know becomes the line that carries the
 * row, and every row keeps the same weight down the column. */
.confirmed-attendance > .confirmed-attendance-count:only-child {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
}

.confirmed-roster {
  min-width: 0;
}

.confirmed-roster-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.confirmed-roster ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
  line-height: 1.5;
}

.confirmed-roster li {
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .confirmed-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .confirmed-roster {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .confirmed-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1rem;
  }

  .confirmed-roster {
    grid-column: auto;
  }
}