@layer site {
  /* Inverno theme — hero as a full-bleed background photo (neutral navy-
     charcoal, vertical gradient overlay), cherry-red accents, light cream
     sections — same palette/full-screen hero logic as Jerusalem (hero and
     body use different colors by design), but text anchored to the bottom-
     left corner (not centered) and no description/countdown/buttons
     (italic eyebrow + name + date/location line only).

     Gold was swapped for cherry-red (gold + the hero's wood-toned photo
     read as autumn, not winter). A later attempt swapped black for a
     green-tinted charcoal (`#1D2C2C`, from the user's "Winter brand
     colours" reference) — green and cherry-red are complementary, and at
     that low a saturation they turned muddy instead of contrasting.
     Readjusted to a neutral navy-charcoal (no green pull), which lets the
     cherry-red actually stand out. */
  :root {
    --color-bg: #f3f2ed;
    --color-bg-secondary: #e9e5d9;
    --color-card: #ffffff;
    --color-surface: #ffffff;
    --color-primary: #a3223e;
    --color-primary-dark: #7d1a30;
    --color-text: #2e2925;
    --color-button: #1a1a1a;
    --color-hero-bg: #1b1f28;
    --color-danger: #b91c1c;
    --color-danger-tint: rgba(185, 28, 28, 0.12);
    /* Bridge to system tokens */
    --c-radius: var(--radius-lg);
    --c-nav-h: 80px;
    --font-family: var(--font-sans);
    /* Serif only on headings (h1/h2/h3, see sites-base.css) — same
       mechanism as Jerusalem, different font (italic/classic instead of
       didone). */
    --font-heading: "Cormorant Garamond", Georgia, serif;
  }

  /* Same reason as Jerusalem (see jerusalem.css): hero and body have
     different colors by design here, so the hero text can't use
     --color-title directly (ready-made palettes pair that variable with
     the lightness of THEIR OWN --color-hero-bg, which only works if read
     on the right element — --hero-contrast exists just for that). */
  .event-theme {
    --hero-contrast: var(--color-title, #f3f2ed);
  }

  /*=========================
   HERO — full-bleed photo (not a split panel — the real difference from
   the mockup, fixed later), text in the bottom-left corner. Text content:
   italic eyebrow + name + date/location line, no description/countdown
   (explicit request, the mockup shows neither). Buttons were added later
   in a follow-up request — `.hero-content` becomes a
   `justify-content: space-between` row: text on the left edge,
   `.hero-actions` on the opposite (right) edge.
  =========================*/
  .event-theme section.hero {
    /* Cross-axis of `.hero` (which is `flex-direction: row`) is vertical —
       flex-end pushes `.hero-content` to the bottom instead of the default
       center. */
    align-items: flex-end;
  }
  .event-theme .hero-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    padding: 0 max(5%, calc((100% - 1100px) / 2)) 90px;
  }
  .event-theme .hero-text {
    /* No own `container-type` on purpose — `.hero-content` (parent)
       already declares that in sites-base.css. Duplicating `container-type`
       on a flex child with no explicit width collapses the item to almost
       zero (containment applies before content is measured) — that's
       exactly what broke the text into one word per line on the first
       attempt. The H1 now grows against the hero's full width, but the
       `clamp()` already caps the top end (`4.5rem`) well before that
       matters. */
    min-width: 0;
    max-width: 640px;
  }
  .event-theme .hero-content h1 {
    color: var(--hero-contrast);
  }
  .event-theme .hero-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: calc(22px * var(--font-size-scale, 1));
    color: var(--color-primary);
  }
  .event-theme .hero-meta {
    margin-top: 20px;
    font-size: calc(13px * var(--font-size-scale, 1));
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hero-contrast) 65%, transparent);
  }
  .event-theme .hero-actions {
    /* Skips sites-base.css's "padding steal" (meant for the default
       narrow-column layout) — here the buttons are already on the right
       edge via `.hero-content`'s own `justify-content: space-between`. */
    margin-right: 0;
    flex-shrink: 0;
  }
  /* `.btn-outline` (Add to calendar) uses --color-text/--color-border with
     !important — invisible over the dark hero. Scoped to the hero only
     (same block as Jerusalem/Jardim). */
  .event-theme .hero-actions .btn-outline {
    color: var(--hero-contrast) !important;
    border-color: color-mix(in srgb, var(--hero-contrast) 45%, transparent) !important;
  }
  .event-theme .hero-actions .btn-outline:hover {
    background: color-mix(in srgb, var(--color-hero-bg) 70%, var(--hero-contrast)) !important;
    border-color: var(--hero-contrast) !important;
  }
  @media (max-width: 768px) {
    .event-theme .hero-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
    }
    /* Same fix as Jerusalem/Jardim (see jerusalem.css) — this is a
       full-bleed hero (photo fills the whole section, text overlaid on
       top), not the default split panel. Without this, sites-base.css's
       mobile default turns the photo into a separate 260px strip ABOVE
       the text instead of staying behind it, pushing every section after
       the hero down with an empty gap where the overlay used to be. */
    .event-theme .hero-panel-image {
      position: absolute;
      inset: 0;
      height: auto;
    }
  }
  .event-theme .hero-panel-image img {
    object-position: center center;
    /* Filter on the PHOTO itself (not just the overlay below) — the user
       can swap this image freely, and a very light photo could leave the
       text unreadable even with the gradient. Darkens any photo
       predictably, before the gradient kicks in as extra reinforcement
       underneath. */
    filter: brightness(0.6) saturate(0.9);
  }
  /* `.hero-filter-sepia`/`.hero-filter-grayscale` (sites-base.css) set
     `filter` on their own — would overwrite the darkening above instead of
     stacking with it (CSS doesn't accumulate `filter` across separate
     rules). Redeclared here combining both, same specificity + loaded
     later = wins over sites-base.css without needing `!important`. */
  .event-theme .hero-panel-image img.hero-filter-sepia {
    filter: brightness(0.6) saturate(0.9) sepia(0.65);
  }
  .event-theme .hero-panel-image img.hero-filter-grayscale {
    filter: brightness(0.6) saturate(0.9) grayscale(1);
  }
  .event-theme .hero-panel-image::before {
    /* Covers the WHOLE hero with a semi-transparent tint (guarantees
       minimum readability on any photo, not just near the text), a bit
       stronger at the bottom, where the text sits. */
    background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-hero-bg) 75%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-bg) 60%, transparent) 50%,
      color-mix(in srgb, var(--color-hero-bg) 55%, transparent) 100%
    );
  }

  /*=========================
   NAV — always-dark bar (derived from --color-hero-bg), light links
  =========================*/
  .event-theme nav .nav-links a {
    color: color-mix(in srgb, var(--hero-contrast) 80%, transparent);
  }
  .event-theme nav .nav-links a:hover {
    color: var(--hero-contrast);
  }
  .event-theme .nav-menu-toggle {
    color: var(--hero-contrast);
  }

  /*=========================
   EVENT DETAILS — title first, celebrant (circular photo, centered)
   after, cards last — same order as every other theme except Jerusalem
   (which hides the title entirely). Used to reverse this via `order`
   (celebrant → title), which pushed the title out of view below the fold
   on mobile — the bug it was meant to look intentional turned out to
   just be confusing.
  =========================*/
  .event-theme #about {
    display: flex;
    flex-direction: column;
    /* Subtle diamond pattern (from the user's reference) behind the
       celebrant photo/mini bio — two crossed repeating-linear-gradients
       instead of an image, to avoid a new asset dependency. */
    background-image:
      repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--color-text) 6%, transparent) 0 1px,
        transparent 1px 26px
      ),
      repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--color-text) 6%, transparent) 0 1px,
        transparent 1px 26px
      );
  }
  .event-theme #about .info-text {
    margin-bottom: 40px;
  }
  .event-theme .celebrant-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 24px;
  }
  .event-theme .celebrant-bio .section-label {
    text-align: center;
  }
  .event-theme .celebrant-photo {
    --celebrant-photo-radius: 50%;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 220px;
  }
  .event-theme .celebrant-bio {
    align-items: center;
    max-width: 640px;
  }
  .event-theme .celebrant-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .event-theme .celebrant-bio-text {
    text-align: center;
  }

}

/* Outside `@layer site` on purpose — same reason documented in
   jerusalem.css/editor.css: inside the editor, `@layer core` is reopened
   there with `.event-theme .hero-cal-trigger { !important }`, which beats
   the override in `@layer site` above (layer priority inverts between
   `!important`s). Needs to be reopened here too, with a more specific
   selector, to win that tug-of-war — same pattern as Jerusalem/Jardim. */
@layer core {
  .event-theme .hero-actions .hero-cal-trigger {
    color: var(--hero-contrast) !important;
    border-color: color-mix(in srgb, var(--hero-contrast) 45%, transparent) !important;
  }
  .event-theme .hero-actions .hero-cal-trigger:hover {
    background: color-mix(in srgb, var(--color-hero-bg) 70%, var(--hero-contrast)) !important;
    border-color: var(--hero-contrast) !important;
  }
}