/* The vocabulary the APPLIER writes, for pages that keep style.css.
 *
 * WHY. The homepage is where the applier owns the most - HERO-NEXT, EVENTS,
 * EVENTS-COUNT, PAST-EVENTS, TICKER-EVENTS - and it links production's
 * style.css. rru.css is installed by the release but nothing links it there.
 *
 * MEASURED IN A BROWSER, on the rehearsal homepage: eleven classes the port
 * writes were present in the DOM with a rule count of ZERO in every stylesheet
 * the page loads -
 *
 *   .doorcard .doorcard-eyebrow .doorcard-name .event-when .event-where
 *   .event-price .event-meta-row .poster .btn-primary (x5) .btn-quiet
 *   .event-card--lead
 *
 * - so the whole hero doorcard and every card interior and CTA rendered as
 * unstyled centred text. The screenshot showed it; no markup test could.
 *
 * WHY NOT JUST LINK rru.css THERE. rru.css also restyles body, .section-title,
 * .night, .explore-card and the rest, and the homepage's other content is
 * production markup that style.css is meant to own. This file carries only
 * rules whose every class the port emits.
 *
 * TWO DELIBERATE OVERRIDES, and they are the only ones. `.hero-line` and
 * `.events-grid` are also declared by style.css; every other class here has no
 * rule in it. Both are intended: the applier now owns the whole hero section
 * in the selected Doorlist composition, and the upcoming grid carries the
 * lead-card treatment that composition specifies. This file loads after
 * style.css, so equal-specificity rules win. Nothing else in it can override
 * anything, because nothing else is defined twice.
 *
 * GENERATED from css/rru.css by scratchpad/build_regions_css.py. Edit rru.css
 * and regenerate; do not hand-edit this file.
 */

/* Namespaced so nothing production declares is overridden. */
:root {
  --rru-bg: #080010;
  --rru-cyan: #00f0ff;
  --rru-font-body: 'DM Sans', 'Inter', system-ui, sans-serif;
  --rru-font-display: 'Clash Display', 'Arial Black', sans-serif;
  --rru-gap: 16px;
  --rru-gutter: 20px;
  --rru-line: rgba(255,255,255,0.10);
  --rru-line-strong: rgba(255,255,255,0.18);
  --rru-muted: rgba(255,255,255,0.62);
  --rru-pink: #ff2d87;
  --rru-r: 16px;
  --rru-r-pill: 9999px;
  --rru-r-sm: 10px;
  --rru-stub: 80px;
  --rru-surface: #0f0020;
  --rru-surface-2: #160033;
  --rru-tap: 48px;
  --rru-text: #ffffff;
  --rru-tier: 1200px;
}
/* Declared inside a rule below rather than at :root: --accent, --focal, --gap-past */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--rru-tap); padding: 0 22px;
  font-family: var(--rru-font-body); font-size: 0.9375rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; text-align: center;
  border-radius: var(--rru-r-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, background-color .12s ease;
}

.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.btn-primary { background: var(--rru-pink); color: #12000a; border-color: var(--rru-pink); }

.btn-primary:hover { background: #ff4d9c; }

.btn-secondary {
  background: rgba(8,0,16,.72); color: var(--rru-text);
  border-color: var(--rru-line-strong); backdrop-filter: blur(6px);
}

.btn-secondary:hover { background: rgba(8,0,16,.92); border-color: rgba(255,255,255,.35); }

.btn-quiet { background: none; color: var(--rru-cyan); border-color: transparent; padding-inline: 8px; }

.btn-quiet:hover { text-decoration: underline; }

.btn-block { width: 100%; }

.hero { position: relative; isolation: isolate; }

.hero-media { position: absolute; inset: 0; z-index: -2; }

.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,0,16,.74) 0%, rgba(8,0,16,.54) 42%, rgba(8,0,16,.96) 100%),
    radial-gradient(120% 70% at 50% 20%, rgba(255,45,135,.16), transparent 60%);
}

.hero-inner { max-width: var(--rru-tier); margin-inline: auto; padding: 44px var(--rru-gutter) 32px; text-align: center; }

.wordmark { display: flex; align-items: flex-end; gap: 0; max-width: 100%; }

.wordmark img { height: min(96px, calc((100vw - 2 * var(--rru-gutter)) / 8.61)); width: auto; }

.hero .wordmark { justify-content: center; margin-inline: auto; }

.hero-line { color: var(--rru-muted); font-size: clamp(1rem, 2.2vw, 1.1875rem); }

.hero .hero-line { margin: 16px auto 0; max-width: 46ch; }

.hero--doorlist { background: linear-gradient(180deg, rgba(255,45,135,.12), transparent 55%), var(--rru-bg); }

.hero--doorlist .hero-media, .hero--doorlist::after { display: none; }

.hero--doorlist .hero-inner {
  max-width: var(--rru-tier); margin-inline: auto; text-align: left;
  padding: clamp(20px, 4vw, 44px) var(--rru-gutter) clamp(24px, 3.5vw, 40px);
  display: grid; gap: clamp(16px, 2.6vw, 22px);
}

.hero--doorlist .hero-line { margin: 12px 0 0; max-width: 46ch; }

.hero--doorlist .wordmark { display: block; margin: 0; max-width: 100%; }

.hero--doorlist .wordmark-solo { width: 100%; max-width: 440px; height: auto; }

.hero--doorlist .wordmark-row  { display: none; }

.doorcard {
  display: grid; gap: 12px;
  max-width: 560px;   
  padding: clamp(16px, 4vw, 22px);
  background: linear-gradient(180deg, rgba(255,45,135,.10), rgba(15,0,32,.92) 42%), var(--rru-surface);
  border: 1px solid var(--rru-line-strong); border-radius: var(--rru-r);
}

.doorcard-eyebrow {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rru-cyan);
}

.doorcard-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rru-cyan); flex: none; }

.doorcard-when {
  margin: 0; font-size: clamp(1rem, 3vw, 1.1875rem);
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--rru-cyan);
}

.doorcard-name {
  margin: 0; font-family: var(--rru-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 5.2vw, 2.375rem); line-height: 1.05;
}

.doorcard-name a { color: inherit; text-decoration: none; }

.doorcard-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.doorcard-price { margin: 0; font-size: 1.125rem; font-weight: 700; }

.doorcard-meta { margin: 0; font-size: .9375rem; color: var(--rru-muted); }

/* THE FLYER IN THE DOORCARD (rru_render._doorcard_poster; Juan, 2026-09-12).
   A thumb column beside the eyebrow, the date and the name, at every width:
   the buyer recognises the flyer they saw elsewhere without the ticket
   action moving off screen. The countdown, the buy row and the address keep
   the card's full width below it. The name's row is the flexible one, so a
   poster taller than the three lines of text extends that row rather than
   spacing the lines apart. The box is a fixed 4:5, so every poster reads the
   same size and nothing shifts while the image loads. A card without a
   poster carries none of this and lays out exactly as before. */
.doorcard--poster {
  grid-template-columns: clamp(96px, 30%, 150px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "poster eyebrow" "poster when" "poster name"
                       "countdown countdown" "buy buy" "meta meta";
  column-gap: 14px; align-items: start;
}

.doorcard--poster .doorcard-poster { grid-area: poster; }
.doorcard--poster .doorcard-eyebrow { grid-area: eyebrow; }
.doorcard--poster .doorcard-when { grid-area: when; }
.doorcard--poster .doorcard-name { grid-area: name; }
.doorcard--poster .event-countdown { grid-area: countdown; }
.doorcard--poster .doorcard-buy { grid-area: buy; }
.doorcard--poster .doorcard-meta { grid-area: meta; }

.doorcard-poster {
  display: block; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--rru-line-strong); border-radius: calc(var(--rru-r) - 6px);
  background: #0a0018;
}

.doorcard-poster picture, .doorcard-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-figure { display: none; }

/* The hero art's pause control means something only once /js/rru-hero-art.js
   has taken the figure over (it sets data-motion). Before that - or with no
   JavaScript, or no canvas - the figure is a still and the control would be an
   inert button, so it stays out of sight and out of the tab order. */
.hero-figure .rru-art:not([data-motion]) .rru-art__pause { visibility: hidden; }

@media (min-width: 900px) {
  .hero--doorlist .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
    
    grid-template-areas: "intro intro" "door figure";
    column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .hero--doorlist .hero-intro { grid-area: intro; }
  .hero--doorlist .doorcard { grid-area: door; justify-self: start; width: 100%; }
  .hero--doorlist .hero-figure { grid-area: figure; align-self: stretch; display: block;
    position: relative; overflow: hidden;
    border: 1px solid var(--rru-line-strong); border-radius: var(--rru-r);
    background: #0a0018;
    min-height: 300px;
    max-height: 520px; }
  .hero--doorlist .hero-figure picture,
  .hero--doorlist .hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero--doorlist .hero-figure img { object-fit: cover; object-position: 50% var(--rru-focal, 24%); }
  .hero--doorlist .hero-figure::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(255,45,135,.16), transparent 46%, rgba(8,0,16,.44)); }
  /* THE HERO ART fills the figure's box (rru_render.render_hero_art, [data-art]).
     The component's own frame, radius and 390px study height belong to the
     preview, not to this box; and the photo's tint overlay above would paint
     over the canvas and take the clicks meant for the pause control. */
  .hero--doorlist .hero-figure[data-art] .rru-art { position: absolute; inset: 0;
    height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .hero--doorlist .hero-figure[data-art]::after { content: none; }
  /* The photo rule above (`.hero-figure img` absolute, cover) would also catch
     the art's wordmark: measured as a 356x44 cropped strip with the caption
     hidden behind it. The wordmark is in-flow art, not a cover image. */
  .hero--doorlist .hero-figure[data-art] .rru-art__center img { position: static;
    width: 100%; height: auto; object-fit: initial; object-position: initial; }
  .hero--doorlist .wordmark-solo { display: none; }
  .hero--doorlist .wordmark-row { display: flex; align-items: stretch;
    aspect-ratio: 1326 / 154;                  
    width: 100%; max-width: min(100%, 827px); }
  .hero--doorlist .wordmark-row img { height: 100%; width: auto; }
}

.event-when { font-size: 0.875rem; font-weight: 600; letter-spacing: .04em; color: var(--rru-cyan); text-transform: uppercase; }

.event-name {
  margin: 2px 0 0; font-family: var(--rru-font-display); font-weight: 700;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem); line-height: 1.12;
}

.event-name a { color: inherit; text-decoration: none; }

.event-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.event-where { font-size: 0.9375rem; color: var(--rru-muted); margin: 6px 0 0; }

.event-where.is-tbd { font-style: italic; }

.event-price { font-size: 1rem; font-weight: 700; }

.event-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

.event-meta-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 10px; }

.poster {
  position: relative; aspect-ratio: 3 / 4; background: #0a0018;
  border: 1px solid var(--rru-line); border-radius: var(--rru-r-sm); overflow: hidden;
}

.poster img { width: 100%; height: 100%; object-fit: contain; }

.poster-empty {
  display: grid; place-content: center; gap: 6px; height: 100%; padding: 20px; text-align: center;
  color: var(--rru-muted); font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase;
}

.poster-empty span { font-family: var(--rru-font-display); font-size: 1.375rem; color: rgba(255,255,255,.30); letter-spacing: 0; text-transform: none; }

.events-grid-past { --rru-gap-past: 14px; gap: var(--rru-gap-past); }

.event-card-past {
  padding: 0; overflow: hidden; gap: 0;
  
  background: var(--rru-surface);
  border-color: rgba(255,255,255,0.07);
}

.event-card-past:hover { border-color: var(--rru-line-strong); }

.poster.event-card-image { position: relative; aspect-ratio: auto; overflow: visible; }

.event-card-past .event-card-image {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--rru-surface-2);
}

.event-card-past .event-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  
  filter: saturate(0.75) brightness(0.78);
  transition: filter .35s ease, transform .35s ease;
}

.event-card-past:hover .event-card-image img {
  filter: saturate(1) brightness(0.92); transform: scale(1.03);
}

.event-card-past .event-card-image .poster-empty { position: absolute; inset: 0; }

.past-badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 5px 10px; border-radius: var(--rru-r-pill);
  background: rgba(8,0,16,0.78); border: 1px solid var(--rru-line-strong);
  color: var(--rru-text); font-size: 0.6875rem; letter-spacing: .12em;
  text-transform: uppercase; backdrop-filter: blur(6px);
}

.event-card-body {
  display: flex; flex-direction: column; gap: 8px; padding: var(--rru-gap);
  
  flex: 1;
}

.event-card-past .event-name { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); }

.event-meta-display { display: flex; flex-direction: column; gap: 2px; }

.event-date-display { color: var(--rru-cyan); font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; }

.event-venue-display {
  color: var(--rru-muted); font-size: 0.8125rem;
  
  overflow-wrap: anywhere;
}

.past-cta-text { margin: 4px 0 0; color: var(--rru-muted); font-size: 0.8125rem; }

.btn-past { align-self: flex-start; padding-inline: 0; margin-top: auto; }

.events-grid-past .events-empty { grid-column: 1 / -1; }

.events-grid { display: grid; gap: var(--rru-gap); grid-template-columns: 1fr; container-type: inline-size; container-name: evgrid; }

@media (min-width: 700px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1100px) {
  .events-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.event-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--rru-surface); border: 1px solid var(--rru-line);
  border-radius: var(--rru-r); padding: var(--rru-gap); gap: 12px;
}

.event-card .event-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rru-r); }

.event-card .event-actions { position: relative; z-index: 1; }

@media (max-width: 699px) {
  .events-grid { gap: 10px; }
  .events-grid .event-card { display: grid;
    grid-template-columns: var(--rru-stub) minmax(0, 1fr);
    column-gap: 12px; row-gap: 6px;
    align-items: start;
    padding: 14px; border-radius: var(--rru-r-sm);
    grid-template-areas: "stub when" "stub name" "stub where" "stub price" "act act"; }
  .events-grid .event-card > .poster { grid-area: stub; aspect-ratio: 3/4; border-radius: 6px; }
  .events-grid .event-card > .poster img { object-fit: cover; }
  .events-grid .event-card > .event-when { grid-area: when;  font-size: .8125rem; }
  .events-grid .event-card > .event-name { grid-area: name;  font-size: 1.0625rem; line-height: 1.15; }
  .events-grid .event-card > .event-where { grid-area: where; }
  .events-grid .event-card > .event-meta-row { grid-area: price; }
  .events-grid .event-card > .event-actions { grid-area: act; margin-top: 0; padding-top: 0; }
  .events-grid .event-card > .event-actions .btn-primary { flex: 1 1 100%; min-width: 0; }
  .events-grid .event-card > .event-actions .btn-quiet { display: none; }
  .events-grid .event-card:has(.poster-empty) { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "when" "name" "where" "price" "act"; }
  .events-grid .event-card:has(.poster-empty) > .poster { display: none; }
  .events-grid .event-card--lead { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stub" "when" "name" "where" "price" "act";
    padding: var(--rru-gap); border-radius: var(--rru-r); }
  .events-grid .event-card--lead > .poster { aspect-ratio: 3/4; border-radius: var(--rru-r-sm); }
  .events-grid .event-card--lead > .poster img { object-fit: contain; }
  .events-grid .event-card--lead > .event-name { font-size: 1.25rem; }
}

.events-grid .event-card > .poster { display: block; }

.events-empty {
  text-align: center; padding: 40px 20px;
  background: var(--rru-surface); border: 1px dashed var(--rru-line-strong); border-radius: var(--rru-r);
}

.events-empty p { color: var(--rru-muted); margin: 0 0 16px; }

.events-empty .btn { margin: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .5s cubic-bezier(.22,.8,.3,1) both; }
  .rise-2 { animation-delay: .07s; }
}

.is-live {
  display: inline-block; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: .75em; color: var(--rru-accent, #ff2e93);
}

.event-card--live { outline: 2px solid var(--rru-accent, #ff2e93); outline-offset: 2px; }

.event-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1rem; }

.events-grid .event-card .event-name a { color: inherit; text-decoration: none; }

.events-grid .event-card .event-name a:hover { text-decoration: underline; }

#events .events-grid > .event-card > .poster.event-card-image img {
  object-fit: contain;
}

@media (max-width: 699px) {
  #events .events-grid > .event-card:not(.event-card--lead) > .poster.event-card-image img { object-fit: cover; }
}

#events .events-grid > .event-card > .poster.event-card-image {
  height: auto; min-height: 0;
}

.hero.hero--doorlist {
  min-height: 0;
  display: block;
  align-items: initial;
  justify-content: initial;
  overflow: visible;

  
  padding-block: calc(69px + env(safe-area-inset-top)) 0;
}

.hero.hero--doorlist .hero-inner {
  padding-block: clamp(24px, 3.2vw, 44px) clamp(18px, 2.4vw, 30px);
}

.hero--doorlist ~ #rru-live-ticker { display: none; }

.hero--doorlist ~ #events .eyebrow { display: none; }

.hero--doorlist ~ #events .section-title {
  margin: 0; font-family: var(--rru-font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.08;
  letter-spacing: -0.01em;
  
  text-transform: none;
}

.hero--doorlist ~ #events .section-header { margin-bottom: 0; }

.hero--doorlist ~ #events .events-grid > .events-countline {
  grid-column: 1 / -1; order: -1;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--rru-gap); flex-wrap: wrap; margin: 0;
}

.hero--doorlist ~ #events .events-countline > p {
  margin: 0; font-family: var(--rru-font-body); font-size: 0.9375rem;
  letter-spacing: normal; text-transform: none; color: var(--rru-muted);
}

.hero--doorlist ~ #events { padding-top: clamp(28px, 4.5vw, 52px); }

@media (max-width: 899px) {
  .hero--doorlist ~ #events { padding-top: 26px; }
}

/* THE SOUNDTRACK trigger (rru_render.render_music_panel; Codex package
   RRU-MUSIC-AND-FUNCLUB, 2026-09-12) stands where the BPM badge stood: top
   right of the hero from 1100px, a right-aligned block under the grid below
   that. The badge's own breakpoint was 900px; measured on the candidate, a
   232px control at the right gutter crosses the wordmark row (which ends at
   x=847) at every width from 900 to 1098px and clears it from 1099px, so the
   break is 1100px. Its look is the package's (rru-music.css); only its place
   on this page is decided here. `:not([hidden])` keeps the script's reveal in
   charge - these rules must never show a control before it can work.
   z-index 10 is the value the badge carried, kept so the control sits above
   the hero's other positioned children (.hero-media and the ::after wash).
   Nothing overlays the hero any more: the twelve-hour takeover that used to
   cover it at z-index 5 is removed with this release. */
@media (min-width: 1100px) {
  .hero.hero--doorlist .rru-music-trigger:not([hidden]) {
    position: absolute; top: calc(69px + env(safe-area-inset-top) + 12px);
    right: var(--rru-gutter); bottom: auto; left: auto; z-index: 10;
  }
}

@media (max-width: 1099px) {
  .hero.hero--doorlist .rru-music-trigger:not([hidden]) {
    position: static; display: flex; width: max-content; max-width: calc(100% - 2 * var(--rru-gutter));
    margin: 4px var(--rru-gutter) 0 auto;
  }
}

.hero.hero--doorlist .hero-line { opacity: 1; transform: none; }

#events .events-grid-past { --rru-gap-past: 14px; gap: var(--rru-gap-past); }

#events .events-grid-past .events-empty { grid-column: 1 / -1; }

#events .events-grid { display: grid; gap: var(--rru-gap); grid-template-columns: 1fr; container-type: inline-size; container-name: evgrid; }

@media (min-width: 700px) {
  #events .events-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1100px) {
  #events .events-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 699px) {
  #events .events-grid { gap: 10px; }
  #events .events-grid .event-card { display: grid;
    grid-template-columns: var(--rru-stub) minmax(0, 1fr);
    column-gap: 12px; row-gap: 6px;
    align-items: start;
    padding: 14px; border-radius: var(--rru-r-sm);
    grid-template-areas: "stub when" "stub name" "stub where" "stub price" "act act"; }
  #events .events-grid .event-card > .poster { grid-area: stub; aspect-ratio: 3/4; border-radius: 6px; }
  #events .events-grid .event-card > .poster img { object-fit: cover; }
  #events .events-grid .event-card > .event-when { grid-area: when;  font-size: .8125rem; }
  #events .events-grid .event-card > .event-name { grid-area: name;  font-size: 1.0625rem; line-height: 1.15; }
  #events .events-grid .event-card > .event-where { grid-area: where; }
  #events .events-grid .event-card > .event-meta-row { grid-area: price; }
  #events .events-grid .event-card > .event-actions { grid-area: act; margin-top: 0; padding-top: 0; }
  #events .events-grid .event-card > .event-actions .btn-primary { flex: 1 1 100%; min-width: 0; }
  #events .events-grid .event-card > .event-actions .btn-quiet { display: none; }
  #events .events-grid .event-card:has(.poster-empty) { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "when" "name" "where" "price" "act"; }
  #events .events-grid .event-card:has(.poster-empty) > .poster { display: none; }
  #events .events-grid .event-card--lead { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stub" "when" "name" "where" "price" "act";
    padding: var(--rru-gap); border-radius: var(--rru-r); }
  #events .events-grid .event-card--lead > .poster { aspect-ratio: 3/4; border-radius: var(--rru-r-sm); }
  #events .events-grid .event-card--lead > .poster img { object-fit: contain; }
  #events .events-grid .event-card--lead > .event-name { font-size: 1.25rem; }
}

#events .events-grid .event-card > .poster { display: block; }

#events .events-grid .event-card .event-name a { color: inherit; text-decoration: none; }

#events .events-grid .event-card .event-name a:hover { text-decoration: underline; }