/* A host's event page in their theme and title font. event-style.js puts data-ev-theme on
   <html> for an event's own page, or on the panel an event opens in from a list. */
:root, [data-ev-theme] {
  --ev-bg: var(--bg);
  --ev-surface: #fff;
  --ev-text: var(--primary);
  --ev-muted: var(--text-secondary);
  --ev-accent: var(--accent);
  --ev-on-accent: #fff;
  --ev-border: var(--border);
}
:root { --ev-title-font: 'DM Serif Display', Georgia, serif; }
/* A diagonal gradient of two or three neighbouring colours, under a card edged in its own ink. */
[data-ev-theme="classic"] {
  --ev-bg: linear-gradient(135deg, #fbf6ef, #f6e6dd);
  --ev-surface: rgba(255, 255, 255, 0.7); --ev-text: #3b1f4a; --ev-muted: #6b5d6f; --ev-accent: #A3472F; --ev-on-accent: #ffffff;
}
[data-ev-theme="paper"] {
  --ev-bg: linear-gradient(135deg, #f3e9d4, #ddc59a);
  --ev-surface: rgba(255, 250, 240, 0.5); --ev-text: #2b2118; --ev-muted: #57472f; --ev-accent: #2b2118; --ev-on-accent: #f5ecd9; --ev-border: rgba(43, 33, 24, .3);
}
[data-ev-theme="plum"] {
  --ev-bg: linear-gradient(135deg, #2a0c23, #58193f, #8f4436);
  --ev-surface: rgba(26, 6, 22, 0.18); --ev-text: #fff4ea; --ev-muted: #ecd5de; --ev-accent: #e9a58c; --ev-on-accent: #2a0c23; --ev-border: rgba(255, 244, 234, .28);
}
[data-ev-theme="mint"] {
  --ev-bg: linear-gradient(135deg, #a6ebcb, #4fbf93);
  --ev-surface: rgba(255, 255, 255, 0.25); --ev-text: #2a0c23; --ev-muted: #4a2040; --ev-accent: #2a0c23; --ev-on-accent: #a6ebcb; --ev-border: rgba(42, 12, 35, .25);
}
[data-ev-theme="clay"] {
  --ev-bg: linear-gradient(135deg, #80301f, #9e432e, #ab5236);
  --ev-surface: rgba(58, 18, 10, 0.16); --ev-text: #fff4ea; --ev-muted: #fff0e8; --ev-accent: #fff4ea; --ev-on-accent: #80301f; --ev-border: rgba(255, 244, 234, .3);
}
[data-ev-theme="forest"] {
  --ev-bg: linear-gradient(135deg, #123526, #1f4d3a, #3f6b36);
  --ev-surface: rgba(10, 31, 22, 0.18); --ev-text: #f4efe2; --ev-muted: #dbe9df; --ev-accent: #a6ebcb; --ev-on-accent: #123526; --ev-border: rgba(244, 239, 226, .28);
}
[data-ev-theme="lake"] {
  --ev-bg: linear-gradient(135deg, #13294b, #1d4a73, #1d6a78);
  --ev-surface: rgba(10, 24, 48, 0.18); --ev-text: #f4f1ea; --ev-muted: #dfe8f2; --ev-accent: #f4f1ea; --ev-on-accent: #13294b; --ev-border: rgba(244, 241, 234, .28);
}
[data-ev-theme="sun"] {
  --ev-bg: linear-gradient(135deg, #f8d660, #f6b97e);
  --ev-surface: rgba(255, 255, 255, 0.25); --ev-text: #2b1d0e; --ev-muted: #4f3a1a; --ev-accent: #2b1d0e; --ev-on-accent: #f8d660; --ev-border: rgba(43, 29, 14, .3);
}
[data-ev-theme="ink"] {
  --ev-bg: linear-gradient(135deg, #121212, #2a1424, #521c46);
  --ev-surface: rgba(0, 0, 0, 0.18); --ev-text: #ffffff; --ev-muted: #d4cbd1; --ev-accent: #ffffff; --ev-on-accent: #121212; --ev-border: rgba(255, 255, 255, .3);
}

/* Where a theme paints: the whole page, or the panel an event opens in */
html[data-ev-theme] body { background: var(--ev-bg); background-attachment: fixed; }
/* Theme colours reach only the event itself; the site's own boxes on the page keep theirs. */
html[data-ev-theme] :is(main.ev, .event-layout, .event-panel, .event-more-links) { color: var(--ev-text); }
html[data-ev-theme] body .club-detail-main { background: transparent; }
/* An event opened from a list themes the whole page while it is open, its phone sheet too. */
html[data-ev-theme] .event-panel { background: var(--ev-bg); background-attachment: fixed; color: var(--ev-text); }
html[data-ev-theme] nav.crumbs { background: transparent; }
html[data-ev-theme] nav.crumbs :is(a, span) { color: var(--ev-muted); }
html[data-ev-theme] :is(.digest-box, .correction-box, .cta-section) { color: var(--primary); background-color: var(--bg); border-radius: 18px; }
html[data-ev-theme] .correction-box { padding: 16px 20px; }
html[data-ev-theme] body { min-height: 100vh; }

[data-ev-theme] .brand { color: var(--ev-text); }
[data-ev-theme] :is(.card, .rsvp, .ios, .event-card, .event-body) { color: var(--ev-text); }
[data-ev-theme] .card { background: var(--ev-surface); border-color: var(--ev-border); box-shadow: none; }
[data-ev-theme] .event-card { background: none; border: 0; box-shadow: none; }
[data-ev-theme] :is(.card h1, .event-head h1) { font-family: var(--ev-title-font); color: var(--ev-text); }
[data-ev-theme] :is(.share-meta, .rsvp h2, .ios h2, .event-when, .event-body h2, .event-host, .event-row-name) { color: var(--ev-text); }
[data-ev-theme] :is(.event-row-meta, .event-row-time, .event-going-note) { color: var(--ev-muted); }
[data-ev-theme] .event-row { border-color: var(--ev-border); }
[data-ev-theme] :is(.share-body, .eyebrow, .rsvp-or, .waitlist-note, .event-body p, .event-body li) { color: var(--ev-muted); }
[data-ev-theme] :is(.app-btn, .waitlist-form button, .event-actions .btn-primary) { background: var(--ev-accent); border-color: var(--ev-accent); color: var(--ev-on-accent); }
[data-ev-theme] :is(.btn-ghost, .event-actions a:not(.btn-primary), .event-actions button) { border-color: var(--ev-border); background: var(--ev-surface); color: var(--ev-text); }
[data-ev-theme] :is(.ios, .event-where a) { border-color: var(--ev-border); color: var(--ev-text); }

/* Layout: the details, then the map beside them on a computer and below on a phone.
   Stickers sit where the host put them on the title card (event-style.js). */
.ev-art { display: contents; }
/* The poster: a fixed shape whose date, title and place are sized in units of its width
   (cqw), so it lays out identically everywhere and drawings stay on what they circle. */
.is-event { padding: 0; container-type: inline-size; }
.share-card.is-event > :not(.ev-art) { margin-inline: 20px; }
.share-card.is-event > :last-child { margin-bottom: 20px; }
.share-card.is-event > .eyebrow { display: none; }
.is-event .ev-art { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 3cqw; aspect-ratio: 16 / 10; padding: 6cqw; border-bottom: 1px solid var(--ev-border); }
/* Each date of a series is its own page, so its heading carries the date the poster shows below it. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-event .ev-art h1 { margin: 0; font-size: var(--title-size, 8cqw); line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.is-event .ev-art-meta { margin-top: auto; }
.is-event .ev-art .share-meta { margin: 0; font-size: 4cqw; line-height: 1.3; }
.ev-date { display: grid; justify-items: center; width: 58px; padding: 7px 0 5px; border-radius: 14px; background: var(--ev-accent); color: var(--ev-on-accent); font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ev-date strong { font-size: 24px; letter-spacing: 0; }
.is-event .ev-date { width: 13cqw; padding: 1.4cqw 0 1.1cqw; border-radius: 2.6cqw; font-size: 2.1cqw; }
.is-event .ev-date strong { font-size: 5.2cqw; }
.ev-side { margin-top: 20px; }
.ev-map { height: 240px; border: 1px solid var(--ev-border); border-radius: 18px; overflow: hidden; z-index: 0; }
.ev-directions { display: inline-block; margin-top: 10px; color: var(--ev-text); font: 600 14px Arial, sans-serif; }

/* Stickers go over everything on the page, including the cards and map they hang onto. */
.ev-stickers { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ev-sticker { position: absolute; left: var(--x); top: var(--y); font-size: calc(48px * var(--s)); font-size: calc(13cqw * var(--s)); line-height: 1; translate: -50% -50%; rotate: var(--r); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); animation: ev-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ev-note { color: var(--c); font: 400 calc(22px * var(--s)) / 1.1 var(--ev-title-font); font-size: calc(5.5cqw * var(--s)); white-space: nowrap; filter: none; }
/* A drawing keeps its shape: its box is in card widths, placed from its first point. */
.ev-draw { overflow: visible; translate: none; filter: none; width: calc(var(--w) * var(--s) * 100cqw); height: calc(var(--h) * var(--s) * 100cqw); margin: calc(var(--oy) * var(--s) * 100cqw) 0 0 calc(var(--ox) * var(--s) * 100cqw); }
.ev-draw polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ev-shape { overflow: visible; filter: none; width: calc(var(--ww) * var(--s) * 100cqw); height: calc(var(--hh) * var(--s) * 100cqw); }
.ev-shape * { stroke-linecap: round; stroke-linejoin: round; }
/* A phone has no room past the card's sides, so stickers stay just inside them. */
@media (max-width: 600px) { .ev-sticker:not(.ev-shape, .ev-draw) { left: clamp(6%, var(--x), 94%); } }
@keyframes ev-pop { from { scale: .3; opacity: 0; } }
.ev-sticker.ev-still { animation: none; }
@media (prefers-reduced-motion: reduce) { .ev-sticker { animation: none; } }

@media (min-width: 900px) {
  main.ev { max-width: 1000px; padding-top: 32px; }
  .ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .ev-side { position: sticky; top: 24px; margin-top: 0; }
  .ev-map { height: 360px; }
}

/* Who's going, the group, and the one RSVP button */
.ev-going { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.ev-faces { display: flex; }
.ev-face { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--ev-surface, #fff); border-radius: 50%; background: var(--ev-accent); color: var(--ev-on-accent); font: 700 13px Arial, sans-serif; object-fit: cover; }
.ev-face:first-child { margin-left: 0; }
.ev-going .share-meta { margin: 0; }
.rsvp-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font-size: 17px; cursor: pointer; }

/* A styled event opened from a list, and on its own listing page: the details block takes
   the theme, with the title card as the decorations' anchor. */
.event-layout[data-ev-theme] { color: var(--ev-text); }
.event-layout[data-ev-theme] .event-head .is-event { margin-bottom: 14px; }
.is-event .ev-art a { color: inherit; }
.event-layout[data-ev-theme] :is(.event-where a, .event-before a, .event-body a) { color: var(--ev-text); }

/* Its row in the list */
.event-row.is-styled { position: relative; padding-left: 10px; border-left: 4px solid var(--row-accent); border-radius: 4px; }
.event-row.is-styled .event-row-name { font-family: var(--row-font); font-size: 17px; }
.event-row-sticker { margin-right: 6px; }
.event-head .is-event .ev-art { border-bottom: 0; }
[data-ev-theme] .event-row-date { color: var(--ev-muted); }
/* The host's initial, in the theme's colours on an event page. */
.event-head .event-host .group-avatar:not([style]) { background: var(--ev-accent, var(--accent)); color: var(--ev-on-accent, #fff); }

/* Printed, an event is a flyer: the poster, when and where, what to know and its link. */
.ev-print-url { display: none; }
@media print {
  @page { margin: 12mm; }
  html, body, html[data-ev-theme] body { background: #fff !important; }
  :is(.skip-link, .site-nav, nav.crumbs, footer, .event-actions, .event-going-note, .ev-going, .event-side,
    .digest-box, .correction-box, .cta-section, .event-more-links, .event-panel-close,
    section[aria-labelledby="dates-heading"], section[aria-labelledby="nearby-heading"]) { display: none !important; }
  .event-layout { display: block !important; color: #000; }
  .event-layout .card.is-event { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; box-shadow: none; }
  .event-body, .event-host { color: #000 !important; }
  .event-body a, .event-host { text-decoration: none; }
  .ev-print-url { display: block; margin: 12px 0 0; font: 600 16pt/1.2 Arial, sans-serif; color: #000; }
  /* An event open from a list prints alone, without the list, filters and map. */
  .event-browser:has(.event-panel:not([hidden])) > :not(.event-panel),
  .event-browser:has(.event-panel:not([hidden])) ~ *,
  main:has(.event-panel:not([hidden])) > :not(.event-browser),
  .event-panel-back { display: none !important; }
  .event-panel:not([hidden]) { position: static !important; transform: none !important; inset: auto !important; max-height: none !important; overflow: visible !important; background: #fff !important; }
}