:root {
  color-scheme: light dark;
  --bg: #faf6ef;
  --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #fdf0e4 0%, #faf6ef 55%);
  --fg: #26221d;
  --muted: #857c6c;
  --accent: #b0502e;
  --accent-soft: #f3e2d8;
  --card: #ffffff;
  --border: #ece3d4;
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 12px 32px -16px rgba(60, 40, 20, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #2a1d16 0%, #1a1714 55%);
    --fg: #f1ece2;
    --muted: #a89d8a;
    --accent: #e08a5f;
    --accent-soft: #3a271d;
    --card: #23201b;
    --border: #382f26;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px -16px rgba(0, 0, 0, 0.5);
  }
}

/* Per-event visual identity (e.g. 6-agosto's Chinese-cuisine theme) overrides these
   same tokens so every component (cards, inputs, buttons, checkbox) re-themes for
   free — forced regardless of system light/dark preference, same as .hero-full does. */
body.theme-china {
  --bg: #0d1320;
  --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #182338 0%, #0d1320 55%);
  --fg: #ece1c4;
  --muted: #b9ac8a;
  --accent: #c9a668;
  --accent-soft: rgba(201, 166, 104, 0.18);
  --card: #232f4a;
  --border: rgba(201, 166, 104, 0.32);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 45px -20px rgba(0, 0, 0, 0.7);
}

body.theme-china button {
  color: #171f2e;
}

/* Cozinha Peruana (Evento Nº3) - palette lifted from the menu's own
   visual-identity study (menu-drafts/Peru/identidade-visual.html): cobalt
   blue background, cream type, gold hairlines. --accent is a lightened
   --achiote (the poster's orange llama) rather than the poster's literal
   --achiote/--cochineal/--rust swatches - all three were too dark to stay
   legible once reused as plain text (kicker, legend pill, its own
   accent-soft tint, in that order of attempts). Lightening achiote instead
   of falling back to --gold keeps it visually distinct from --hero-tan
   (also gold, used for the subtitle) so the page still reads as having
   two warm tones, not one flat gold accent everywhere. */
body.theme-peru {
  --bg: #153c69;
  --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #1d4d82 0%, #153c69 55%);
  --fg: #efe3cb;
  --muted: #8695a6;
  --accent: #f28b3d;
  --accent-soft: rgba(242, 139, 61, 0.18);
  --card: #1d4d82;
  --border: rgba(201, 154, 59, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 45px -20px rgba(0, 0, 0, 0.7);
}

body.theme-peru button {
  color: #153c69;
}

/* The shared legend pill (colored text on its own accent-soft tint) never
   clears good contrast against this theme's midtone blue card, whichever
   hue --accent ends up being - swap to cream-on-dark-scrim instead, the
   same pairing already carrying the rest of the card's body text. */
body.theme-peru legend {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.28);
}

/* Cozinha Coreana (Evento Nº4) - palette locked from the menu's own
   identity study (emcomun-menus.md): obangsaek's five flavor colors stay
   reserved as one-per-dish ink seals, so the site only borrows a single
   one - hongwha rose-red, the historic royal-court dye - as --accent,
   never a spread palette. Base is hanji paper + ink black, forced light
   even in dark system mode (unlike China/Peru's forced-dark treatment) -
   restraint is the actual differentiator here, so the UI has to read as
   ink-on-paper rather than adopt this series' usual jewel-tone drama. */
body.theme-coreia {
  --bg: #f2ece0;
  --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #f7f2e6 0%, #f2ece0 55%);
  --fg: #1c1a17;
  --muted: #8a8175;
  --accent: #b6383f;
  --accent-soft: rgba(182, 56, 63, 0.14);
  --card: #f8f4ea;
  --border: rgba(28, 26, 23, 0.14);
  --shadow: 0 1px 2px rgba(40, 36, 30, 0.05), 0 14px 34px -18px rgba(40, 36, 30, 0.2);
}

/* SupperTasco (public/supper-tasco/) - the casual afternoon-tardeo sibling
   to the 5-country dinner series, not part of that numbering. Reuses the
   landing page's own component system (.landing-hero/.landing-section/etc,
   root-token driven) rather than .hero-full's --hero-* tokens, since this
   page borrows the brand landing page's layout, not the per-dinner RSVP
   page's. Amber/mustard forced regardless of system light/dark, same
   reasoning as .theme-china. */
body.theme-tasco {
  --bg: #f6ecd9;
  --bg-gradient: radial-gradient(ellipse 900px 500px at 50% -10%, #fbf3df 0%, #f6ecd9 55%);
  --fg: #2b2016;
  --muted: #8a7355;
  --accent: #b3791f;
  --accent-soft: #f0dfb0;
  --accent-2: #3a5738;
  --card: #fffaf0;
  --border: #e6d3a3;
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 12px 32px -16px rgba(60, 40, 20, 0.2);
}

* { box-sizing: border-box; }

html {
  background: var(--bg-gradient);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-gradient);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

body.event-page {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

body.event-page.scroll-unlocked {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.logo {
  height: 34px;
  width: auto;
  display: block;
}

@media (prefers-color-scheme: dark) {
  .logo, .hero-logo {
    filter: brightness(1.3) saturate(1.05);
  }
}

.hero-logo {
  height: 46px;
  width: auto;
  margin: 0 auto 1.75rem;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.event-title,
.confirmation h2,
#closed-card h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
}

.event-title {
  font-size: 1.55rem;
  margin: 0;
  letter-spacing: -0.01em;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: var(--shadow);
}

#form-card,
#closed-card,
#confirmation-card {
  border-top: 3px solid var(--accent);
}

.hero-full {
  --hero-ink: #4a2818;
  --hero-ink-2: #6b3a22;
  --hero-bloom: rgba(232, 152, 108, 0.45);
  --hero-cream: #f6ede0;
  --hero-tan: #cbb79f;
  --hero-accent: #e2935f;
  --hero-border: rgba(246, 237, 224, 0.16);

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background:
    radial-gradient(900px 600px at 82% -6%, var(--hero-bloom) 0%, transparent 60%),
    radial-gradient(1100px 700px at 12% 108%, rgba(176, 80, 46, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--hero-ink-2) 0%, var(--hero-ink) 70%);
  color: var(--hero-cream);
  overflow: hidden;
}

.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-frame {
  position: absolute;
  inset: clamp(10px, 3vw, 28px);
  border: 1px solid var(--hero-border);
  border-radius: 18px;
  pointer-events: none;
}

.hero-full.theme-china {
  --hero-ink: #171f2e;
  --hero-ink-2: #1e2a3f;
  --hero-bloom: rgba(201, 166, 104, 0.08);
  --hero-cream: #ece1c4;
  --hero-tan: #b9ac8a;
  --hero-accent: #c9a668;
  --hero-border: rgba(201, 166, 104, 0.4);
}

.hero-full.theme-italia {
  --hero-ink: #f4ead9;
  --hero-ink-2: #f0d7ab;
  --hero-bloom: rgba(168, 92, 62, 0.13);
  --hero-cream: #3a2c22;
  --hero-tan: #235f7a;
  --hero-accent: #5c4530;
  --hero-border: rgba(92, 69, 48, 0.35);
}

.hero-full.theme-peru {
  --hero-ink: #153c69;
  --hero-ink-2: #1d4d82;
  --hero-bloom: rgba(242, 139, 61, 0.28);
  --hero-cream: #efe3cb;
  --hero-tan: #c99a3b;
  --hero-accent: #f28b3d;
  --hero-border: rgba(201, 154, 59, 0.55);
}

.hero-full.theme-peru .event-title {
  text-shadow: 0 4px 32px rgba(242, 139, 61, 0.35);
}

/* Inverted vs. every other theme here - light hanji-ink roles instead of
   a dark jewel-tone panel, same restraint argument as the root tokens
   above. --hero-cream (usually the pale text color) holds the ink black,
   --hero-ink (usually the dark background) holds the hanji paper - the
   role names stay, same trick .theme-italia already uses for its light
   hero. No text-shadow override (unlike .theme-peru) - a glow reads as
   ornament, which is exactly what this dinner's identity argues against. */
.hero-full.theme-coreia {
  --hero-ink: #f2ece0;
  --hero-ink-2: #e8dfc9;
  --hero-bloom: rgba(28, 26, 23, 0.05);
  --hero-cream: #1c1a17;
  --hero-tan: #6b6155;
  --hero-accent: #b6383f;
  --hero-border: rgba(28, 26, 23, 0.16);

  /* Replaces .hero-full's base multi-layer bloom/gradient stack (including
     its hardcoded orange accent bloom, never themed per-cuisine) with a
     single soft radial - uncoated-paper depth instead of a spotlight,
     lightest behind the title/Obangsaek block, only ~3-5% darker at the
     edges. background-color is the flat fallback if the image fails. */
  background-color: #f2eadc;
  background-image:
    radial-gradient(
      ellipse at 50% 38%,
      #f7f1e6 0%,
      #f3ecdf 48%,
      #eee5d6 75%,
      #e9dfce 100%
    );
  background-repeat: no-repeat;
  background-size: cover;
}

/* Evento Nº4 hero refinements - scoped to .theme-coreia only. Shares
   .hero-full's shell (canvas, padding, centering, max-width, logo scale,
   .cta-btn's responsive collapse) with every other event page on purpose,
   so this stays visually part of the same series - only type scale, the
   two-line Hangul/tagline identity block, the five obangsaek markers, and
   the CTA's ink-seal treatment are Korea-specific. */
.hero-full.theme-coreia .kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}

.hero-full.theme-coreia .event-title {
  font-size: clamp(52px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.obangsaek-id {
  margin: 1.1rem 0 0;
}

.obangsaek-line {
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hero-cream);
  margin: 0;
}

.obangsaek-tagline {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--hero-tan);
  margin: 8px 0 0;
}

.color-markers {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.color-marker {
  width: 11px;
  height: 11px;
  border-radius: 0;
  flex: none;
}

.color-marker--hollow {
  background: transparent;
  border: 1px solid var(--hero-cream);
}

.hero-full.theme-coreia .date-block-day {
  font-size: clamp(34px, 4.5vw, 46px);
  line-height: 1;
  font-weight: 500;
}

.hero-full.theme-coreia .date-block-detail {
  font-size: 14px;
  letter-spacing: 0.14em;
  margin-top: 16px;
}

.theme-coreia .cta-btn {
  width: min(60%, 490px);
  min-width: 320px;
  margin: 0 auto;
  height: 64px;
  padding: 0;
  border-radius: 3px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.theme-coreia .cta-btn:focus-visible {
  outline: 2px solid var(--hero-cream);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .theme-coreia .cta-btn {
    width: calc(100% - 48px);
    min-width: 0;
  }
}

.hero-spacer {
  height: 3rem;
}

/* Mobile only, Korea only - the type-scale mandate (title 52-72px, date
   34-46px) stays untouched; the air comes from trimming the hero's own
   padding and the gaps around it instead, since those were tuned for the
   shorter single-line-subtitle version of this hero, not the current
   two-line identity block + five-marker row. */
@media (max-width: 640px) {
  .hero-full.theme-coreia {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }

  .hero-full.theme-coreia .hero-logo-mark {
    margin-bottom: 1.25rem;
  }

  .hero-full.theme-coreia .kicker {
    margin-bottom: 14px;
  }

  .hero-full.theme-coreia .obangsaek-id {
    margin-top: 0.75rem;
  }

  .hero-full.theme-coreia .obangsaek-tagline {
    margin-top: 14px;
  }

  .hero-full.theme-coreia .color-markers {
    margin-top: 14px;
  }

  .hero-full.theme-coreia .hero-spacer {
    height: 2rem;
  }

  .hero-full.theme-coreia .date-block {
    margin-bottom: 1.5rem;
  }

  .theme-coreia .cta-btn {
    margin-top: 1.25rem;
  }

  .hero-full.theme-coreia .date-block-detail {
    margin-top: 12px;
  }
}

.hero-full .hero-logo-mark {
  height: 46px;
  margin: 0 0 2.25rem;
}

.cuisine-glyphs {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--hero-tan);
  margin: 2.25rem 0;
}

.event-subtitle {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--hero-tan);
  margin: 0.75rem 0 0;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.25rem 0;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.countdown-value {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--hero-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

.countdown-sep {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.2rem;
  color: var(--hero-tan);
  opacity: 0.5;
  margin-bottom: 1.2rem;
}

@media (max-width: 420px) {
  .countdown-value,
  .countdown-sep {
    font-size: 1.6rem;
  }

  .countdown {
    gap: 0.4rem;
  }
}

.hero-full > * {
  position: relative;
}

.hero-full .hero-logo {
  height: 46px;
  margin: 0 0 2.25rem;
  filter: brightness(1.15) saturate(1.05);
}

.hero-full .kicker {
  color: var(--hero-accent);
  margin-bottom: 0.9rem;
}

.hero-full .event-title {
  font-size: 3rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 620px;
  margin: 0;
  color: var(--hero-cream);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.75rem 0;
}

.ornament span {
  width: 28px;
  height: 1px;
  background: var(--hero-border);
}

.ornament i {
  width: 6px;
  height: 6px;
  background: var(--hero-accent);
  transform: rotate(45deg);
  font-style: normal;
}

.invite-copy {
  max-width: 400px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--hero-tan);
  margin: 0 0 2rem;
}

.inline-logo {
  height: 1.7em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.15em 0 0.3em;
  transform: translateY(-0.05em);
  filter: brightness(1.15) saturate(1.05);
  white-space: nowrap;
}

/* Same idea as .inline-logo but sized to match surrounding body text
   instead of standing out larger - used mid-sentence in prose. */
.inline-logo-text {
  height: 1.5em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.08em;
  transform: translateY(-0.12em);
  color: currentColor;
  white-space: nowrap;
}

.date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 2.25rem;
}

.date-block-day {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--hero-cream);
}

.date-block-detail {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

.cta-btn {
  width: auto;
  padding: 1rem 2.75rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--hero-cream);
  color: var(--hero-ink);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}

.cta-btn:hover:not(:disabled) {
  filter: brightness(0.97);
}

@media (max-width: 640px) {
  .hero-full .event-title {
    font-size: 2.1rem;
  }
}

.form-card-header {
  margin-bottom: 1.75rem;
}

.form-card-header .logo,
#closed-card .logo,
#confirmation-card .logo {
  margin-bottom: 1.5rem;
}

.form-card-header .kicker {
  margin-bottom: 0.4rem;
}

.form-card-header .event-title {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.form-card-header .ornament {
  margin: 1.5rem 0 0;
}

.form-card-header .ornament span {
  background: var(--border);
}

.form-card-header .ornament i {
  background: var(--accent);
}

fieldset {
  border: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
}

fieldset + fieldset {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

legend {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.4em 0.85em;
  margin-bottom: 0.5rem;
  width: auto;
}

legend::before {
  content: "⚠";
  font-size: 0.95em;
  line-height: 1;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#rsvp-form > label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

#rsvp-form input[type="text"],
#rsvp-form input[type="tel"],
#rsvp-form input[type="email"] {
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 0.3rem 0.1rem 0.55rem;
}

#rsvp-form input[type="text"]:focus,
#rsvp-form input[type="tel"]:focus,
#rsvp-form input[type="email"]:focus {
  border-bottom-width: 2px;
  border-bottom-color: var(--accent);
  box-shadow: none;
}

textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}

.checkbox-row input {
  margin-top: 0.2rem;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

/* Marks this as a new question (whether to reveal the guest sub-form
   below), not another item in the pairing list right above it - that
   list's plain-weight rows made it blend in otherwise. */
.guest-toggle {
  font-weight: 700;
  margin-top: 1.5rem;
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The base price is worth more visual weight than the surrounding .note
   lines (address/dogs) now that there's a whole pairing step adding to
   it below - otherwise it reads as just another aside and gets lost. */
.price-line {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0.4rem 0;
}

/* Pairing choice reuses the fieldset/legend pattern but isn't a warning
   like the allergy disclaimer, so it opts out of that legend's ⚠ pill. */
.pairing-fieldset {
  margin-bottom: 1.25rem;
}

/* fieldset.pairing-fieldset legend (not just .pairing-fieldset legend)
   matches the per-theme "body.theme-X legend" overrides' specificity
   (0,1,2) - without this, e.g. body.theme-peru's dark pill scrim still
   wins over the plain-label look attempted below. */
fieldset.pairing-fieldset legend {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.5rem;
}

.pairing-fieldset legend::before {
  content: none;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.radio-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.pairing-price {
  color: var(--muted);
  font-size: 0.85rem;
}

.waitlist-banner {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--fg);
  font-size: 0.95rem;
}

.disclaimer {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-size: 0.87rem;
  color: var(--muted);
  margin-top: 1.25rem;
  margin-bottom: 1.1rem;
}

button {
  width: 100%;
  padding: 0.85rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

button:hover:not(:disabled) {
  filter: brightness(1.06);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error {
  color: #c0392b;
  font-size: 0.88rem;
  margin: -0.6rem 0 1rem;
  display: none;
}

.hidden {
  display: none !important;
}

.confirmation h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.payment-box {
  background: var(--accent-soft);
  border: none;
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.25rem 0;
  text-align: center;
}

.payment-box .phone {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin: 0.4rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

td:first-child {
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.group-heading-row td {
  padding-top: 1.5rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  white-space: normal;
}

.group-heading-row:first-child td {
  padding-top: 0.6rem;
}

.group-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  opacity: 0.8;
}

.pill.paid {
  background: #dff3e3;
  color: #256d3a;
}

.pill.unpaid {
  background: var(--accent-soft);
  color: var(--accent);
}

.small-btn {
  width: auto;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 8px;
  white-space: nowrap;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wa-btn {
  display: inline-block;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
}

.wa-btn-sent {
  opacity: 0.45;
}

.danger-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: #c0392b;
}

.table-scroll {
  overflow-x: auto;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.tab-btn {
  width: auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6rem 0.2rem;
  margin-bottom: -1px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel.hidden {
  display: none;
}

.template-editor {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.template-editor h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.template-editor .placeholders {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.template-editor textarea {
  min-height: 6rem;
}

.template-editor .small-btn {
  margin-top: 0.25rem;
}

.event-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.event-summary-header h3 {
  margin-bottom: 0.3rem;
}

.event-summary-header .placeholders {
  margin: 0;
}

.header-status-pill {
  margin-left: 0.4rem;
}

.event-edit-form {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.datetime-pair {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.datetime-pair input {
  margin-bottom: 0;
}

.cta-btn--static {
  display: inline-block;
  text-align: center;
  cursor: default;
  opacity: 0.9;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.top-bar button {
  width: auto;
  padding: 0.55rem 1.1rem;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.admin-label {
  color: var(--muted);
  font-weight: 600;
}

/* Landing page (/) — brand home, distinct from any single event's .theme-*
   override, built from the same base tokens so it stays warm/on-brand
   regardless of light/dark. */

main.landing-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.landing-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem;
  z-index: 2;
}

.landing-brand {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.landing-nav-links {
  /* Desktop: cluster with the Instagram icon on the right (auto margin eats
     the space between brand and links) - true center-of-viewport looks fine
     on a narrow phone screen but leaves a huge dead gap next to "emcomun" on
     a wide desktop screen, so that treatment is mobile-only (see below). */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* Mobile: true centering instead of the desktop's right cluster - a phone
   screen is narrow enough that right-clustered links still read as
   lopsided. A 1fr/auto/1fr grid centers the links regardless of the
   brand's width, with no counterweight element needed on the right
   (formerly the Instagram icon, now removed) - the empty third column
   still reserves equal space, keeping the middle column centered. */
@media (max-width: 720px) {
  .landing-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .landing-nav-links {
    margin-left: 0;
  }

  /* SupperTasco's nav still carries this icon (only the main site's was
     removed) - pin it to the grid's right column same as before. */
  .landing-nav-ig {
    justify-self: end;
  }
}

.landing-nav-links a {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  transition: color 0.15s ease;
}

.landing-nav-links a:hover {
  color: var(--accent);
}

.landing-nav-ig {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}

.landing-nav-ig:hover {
  color: var(--accent);
}

.landing-nav-ig svg {
  width: 20px;
  height: 20px;
}

.landing-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  overflow: hidden;
  background: var(--accent-soft);
  /* Forces this onto its own GPU-composited layer immediately on load,
     instead of at the moment scrolling starts. Some mobile Safari versions
     visibly re-rasterize a full-viewport background-image at a different
     scale right when the page is first promoted to a scrolling composited
     layer - a one-time "zoom" jump at the very start of the first scroll.
     Pre-promoting the layer up front means that switch already happened
     before the user ever scrolls, so there's nothing left to visibly jump. */
  transform: translateZ(0);
  will-change: transform;
}

.landing-hero-frame {
  position: absolute;
  inset: clamp(10px, 3vw, 24px);
  border: 2px solid var(--fg);
  pointer-events: none;
}

/* Photo hero variant: real event photography instead of a flat color block.
   Text flips to light since it now sits over a dark-overlaid photo. */
body.has-hero-photo .landing-hero {
  background:
    linear-gradient(180deg, rgba(24, 16, 12, 0.5) 0%, rgba(24, 16, 12, 0.22) 45%, rgba(24, 16, 12, 0.75) 100%),
    url("/photos/hero.jpg") center/cover no-repeat;
}

body.has-hero-photo .landing-hero-frame {
  border-color: rgba(246, 237, 224, 0.55);
}

body.has-hero-photo .landing-kicker {
  color: #f0d7ab;
}

body.has-hero-photo .landing-tagline,
body.has-hero-photo .landing-logo-mark {
  color: #f6ede0;
}

body.has-hero-photo .landing-chip {
  color: #f6ede0;
  border-color: rgba(246, 237, 224, 0.6);
}

body.has-hero-photo .landing-nav .landing-brand,
body.has-hero-photo .landing-nav-links a,
body.has-hero-photo .landing-nav-ig {
  color: #f6ede0;
}

body.has-hero-photo .landing-nav-links a:hover,
body.has-hero-photo .landing-nav-ig:hover {
  color: #e2935f;
}

/* SupperTasco hero-photo experiment - "does it work" check with a real
   venue photo (the actual restaurant space) instead of the flat amber
   background. Separate class from .has-hero-photo (which is hardcoded to
   /photos/hero.jpg for the main landing page) so the two pages don't
   collide; same dark-overlay + light-text technique either way. */
body.has-tasco-hero-photo .landing-hero {
  background:
    linear-gradient(180deg, rgba(24, 16, 12, 0.55) 0%, rgba(24, 16, 12, 0.3) 45%, rgba(24, 16, 12, 0.8) 100%),
    url("/photos/tasco-venue-web.jpg") center/cover no-repeat;
}

body.has-tasco-hero-photo .landing-hero-frame {
  border-color: rgba(246, 237, 224, 0.55);
}

body.has-tasco-hero-photo .landing-kicker {
  color: #f0d7ab;
}

body.has-tasco-hero-photo .tasco-title {
  color: #f6ede0;
}

body.has-tasco-hero-photo .landing-tagline {
  color: #f6ede0;
}

body.has-tasco-hero-photo .landing-chip {
  color: #f6ede0;
  border-color: rgba(246, 237, 224, 0.6);
}

body.has-tasco-hero-photo .landing-nav .landing-brand,
body.has-tasco-hero-photo .landing-nav-links a,
body.has-tasco-hero-photo .landing-nav-ig {
  color: #f6ede0;
}

body.has-tasco-hero-photo .landing-nav-links a:hover,
body.has-tasco-hero-photo .landing-nav-ig:hover {
  color: #e2935f;
}

/* "gelados"/"quentes" in the tagline are colored inline via var(--accent-2)/
   var(--accent) (theme-tasco's dark green/amber, tuned for the flat cream
   background) - too low-contrast against the photo. Since they're CSS
   custom properties, not hardcoded inline colors, redefining them here
   re-resolves the same inline `style="color: var(--accent-2)"` without
   touching the HTML. */
body.has-tasco-hero-photo {
  --accent-2: #8fd19e;
}

.landing-kicker {
  position: relative;
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
  margin: 0 0 1.75rem;
}

.landing-logo-mark {
  position: relative;
  width: 100%;
  max-width: min(78vw, 640px);
  height: auto;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* Text-only stand-in for .landing-logo-mark on pages with no bespoke
   wordmark asset (e.g. SupperTasco) - same centerpiece role, same accent
   color, just set type instead of an SVG. */
/* Fredoka (700) - closest free match found to the real emcomun wordmark
   after comparing several rounded display faces at the real logo's actual
   tracking density. The letterform style alone (Baloo 2/Rubik/Fredoka at
   normal tracking) wasn't the deciding factor - the real logo's signature
   trait is its extreme negative tracking (letters continuously overlapping,
   not just tight). Superseded by a real custom typeface (below) - see
   /Users/mbz/Desktop/emcomun/typeface/docs/DESIGN.md for how "S p r T a s"
   were traced from an AI reference image in the logo's style and "e c o u"
   reused verbatim from logo.svg's real paths, then compiled into an actual
   OTF/TTF/WOFF2 font (not an SVG hack) with real GPOS kerning. */
@font-face {
  font-family: "SupperTascoDisplay";
  src: url("/fonts/SupperTasco-Regular.woff2") format("woff2"),
       url("/fonts/SupperTasco-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.tasco-title {
  position: relative;
  font-family: "SupperTascoDisplay", "Fredoka", ui-rounded, sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 12vw, 6rem);
  line-height: 1;
  color: var(--accent);
  margin: 0 0 2rem;
}

/* Space Mono stand-in for .event-title (which is set in Fraunces - not
   loaded on any SupperTasco page, so it'd silently fall back to Georgia)
   on the RSVP form-card/closed-card/confirmation-card headings. */
.tasco-event-heading {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.01em;
}

/* CTA on the SupperTasco landing hero, linking out to its separate RSVP
   page (public/supper-tasco/rsvp/) - .cta-btn isn't reusable here, it's
   built on --hero-* tokens that only exist inside .hero-full. */
.landing-cta-btn {
  position: relative;
  display: inline-block;
  margin-top: 2.5rem;
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 2.25em;
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--fg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-cta-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--fg);
}

/* Back link on the standalone SupperTasco RSVP page (public/supper-tasco/rsvp/),
   which has no .landing-nav of its own. */
.tasco-back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}

.tasco-back-link:hover {
  color: var(--accent);
}

.landing-tagline {
  position: relative;
  width: 100%;
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--fg);
  max-width: 640px;
  margin: 0 auto;
}

.landing-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.landing-chip {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1.5px solid var(--fg);
  padding: 0.5em 0.9em;
}

.landing-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

.landing-section + .landing-section {
  border-top: 2px solid var(--fg);
}

.landing-heading {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 0 1.75rem;
}

.landing-about-headline {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

/* Forced break after the first sentence on mobile only - on desktop the
   headline fits on one line, so the <br> is suppressed there. */
.landing-about-headline br,
.landing-tagline-break {
  display: none;
}

@media (max-width: 720px) {
  .landing-about-headline br,
  .landing-tagline-break {
    display: block;
  }
}

.landing-about p {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
}

.landing-about p:last-child {
  margin-bottom: 0;
}

/* Contained (not full-bleed) gallery, matching the rest of the page's
   column width. Each column is a real element (not CSS multi-col) so it can
   be scroll-parallaxed by the inline script - a couple of columns drift up,
   others drift down, so the gallery has real movement instead of sitting as
   static rigid blocks.

   The viewport wrapper reserves real (non-negative-margin) padding as a
   buffer zone the drifting columns paint into, so they can never overlap the
   section above/below - and align-items: flex-start keeps each column's own
   box exactly as tall as its own images, instead of being stretched to match
   the tallest column and leaving dead space at the bottom of shorter ones. */
.landing-gallery-viewport {
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 1.5rem;
  overflow: hidden;
}

.landing-gallery-grid {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.landing-gallery-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  will-change: transform;
}

/* 8 items across 4 equal columns, 2 each, all at the same 3:4 ratio (the
   video is cropped to match, see below) - equal count at equal width means
   every column naturally ends at the same height without needing the
   width-ratio math the 7-item layout required. */

.landing-gallery-item {
  margin: 0;
  overflow: hidden;
}

.landing-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* The video is natively 9:16 (taller than the 3:4 photos), which would
   unbalance its column's total height against the other three. Cropping it
   to match the photos' 3:4 ratio keeps every column's math equal. */
.landing-gallery-item video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.landing-gallery-arrow {
  display: none;
}

@media (max-width: 720px) {
  /* Swipeable, centered, infinite one-photo-at-a-time carousel instead of
     the 4-across grid, which becomes tiny/cramped at phone widths.
     display: contents on the column wrappers removes their own box from
     layout so their photos become direct scroll-snap children of the grid -
     no HTML restructuring needed, and it doesn't disturb the desktop
     column/parallax setup. scroll-snap-align: center plus the inline
     script's cloned first/last photos (see below the gallery markup) is
     what makes the previous/next photo peek in on both sides, including at
     the real first/last photo, and what makes the loop feel infinite. */
  .landing-gallery-viewport {
    padding: 40px 0;
    position: relative;
  }

  .landing-gallery-grid {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.6rem;
    padding: 0 11%;
    /* Tell the browser this element only handles horizontal swipes, so a
       fast swipe on the photo itself doesn't get ambiguously interpreted
       as a pinch/double-tap zoom gesture - that native zoom, not the CSS
       hover effect, is what was actually causing the "not smooth" zoom. */
    touch-action: pan-x;
  }

  .landing-gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .landing-gallery-col {
    display: contents;
  }

  .landing-gallery-col[data-speed] {
    transform: none !important;
  }

  .landing-gallery-item {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .landing-gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--fg);
    background: rgba(250, 246, 239, 0.85);
    color: var(--fg);
    z-index: 3;
  }

  .landing-gallery-arrow svg {
    width: 18px;
    height: 18px;
  }
}

.dinner-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 2px solid var(--fg);
  border-top: 4px solid var(--accent);
  padding: 1.5rem 1.75rem;
}

/* Only a[href].dinner-card gets the hover lift - e.g. SupperTasco's card,
   which links to a real page. Plain div.dinner-card (TBA entries with no
   page yet, dated dinners which deliberately don't link to RSVP) stays
   static with no hover affordance. */
a.dinner-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.dinner-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--fg);
}

.dinner-card + .dinner-card {
  margin-top: 1rem;
}

.dinner-card .kicker {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.dinner-card h3 {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.dinner-card .dinner-meta {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

.dinners-empty {
  text-align: center;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9rem;
  padding: 1rem 0;
}

.landing-footer {
  text-align: center;
  padding: 3.5rem 1.5rem 4.5rem;
}

.landing-footer a {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1.5px solid var(--fg);
  padding: 0.6em 1.1em;
}

.landing-footer a:hover {
  background: var(--fg);
  color: var(--bg);
}

@media (max-width: 480px) {
  .landing-tagline {
    font-size: 1.05rem;
  }

  .landing-chips {
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  table, thead, tbody, th, tr, td {
    display: block;
  }

  thead {
    display: none;
  }

  tbody tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.75rem;
  }

  tbody tr:last-child {
    margin-bottom: 0;
  }

  tbody td {
    border: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
  }

  tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }

  tbody td[data-label="Ações"] {
    display: block;
    margin-top: 0.5rem;
  }

  tbody td[data-label="Ações"]::before {
    display: block;
    margin-bottom: 0.5rem;
  }

  .actions {
    justify-content: flex-start;
  }

  tbody tr.group-heading-row {
    border: none;
    padding: 0;
    margin-bottom: 0.4rem;
  }

  tbody tr.group-heading-row td {
    padding: 1.2rem 0 0.4rem;
  }

  tbody tr.group-heading-row:first-child td {
    padding-top: 0;
  }
}