/* ══════════════════════════════════════════════════════════════════
   Rodney's New York Comedy Club — V3 "Uptown" (navy, orange, paper)

   Tailwind (CDN) does the layout work. This file holds the color
   tokens, the semantic classes the whole site shares (buttons, inputs,
   labels, the amber date tag, the paper card), keyframes, and the dev
   device-preview overlay. Every class here is prefixed rn- and defined
   exactly once (the reduced-motion block only overrides).

   Spacing lives in the markup as Tailwind utilities, on one rhythm:
   a page opens with pt-14 md:pt-20 and closes with pb-16 md:pb-24; a
   section rule is border-t-2 border-rn-line2 pt-12 md:pt-16; sections
   sit mb-16 md:mb-20 apart; the container is max-w-[1320px] px-4 md:px-6.
   List rows (shows, comics) are py-5 md:py-6 with a hairline between.

   The tokens below are mapped to Tailwind color names in
   components/layout/head.php (text-rn-ink, bg-rn-brand, ...), so
   recoloring the site is one edit to this :root block.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────────
   Taken from the club's current website: a deep navy page, white
   type, orange for every button, amber for dates and small accents,
   and white "paper" cards that float on the navy. The logo is the
   white version on navy and the black version on paper. */
:root {
  --rn-ground:      #12134a;   /* page: the club's navy */
  --rn-surface:     #1a1c5e;   /* cards, quiet bands */
  --rn-surface-2:   #262a7a;   /* raised row, image placeholder */
  --rn-ink:         #ffffff;   /* headings, primary type */
  --rn-ink-2:       #d9dbf1;   /* body copy */
  --rn-muted:       #9b9fcf;   /* labels, meta */
  --rn-line:        #2b2e78;   /* hairlines */
  --rn-line-2:      #3a3e95;   /* heavy rule */
  --rn-brand:       #ff6a13;   /* orange fill: every button */
  --rn-brand-dark:  #ff7f36;   /* orange hover (lighter, we are on dark) */
  --rn-brand-text:  #ffa303;   /* amber as type: dates, eyebrows */
  --rn-brand-soft:  #332660;   /* tinted ground: show nights, selected tiers */
  --rn-on-brand:    #ffffff;   /* type on orange */
  --rn-secondary:   #ffa303;   /* amber fill: strip, date tags, selling-fast */
  --rn-night:       #0c0d33;   /* deeper navy: utility bar, footer */
  --rn-night-2:     #16184a;   /* raised surface on deep navy */
  --rn-night-text:  #b4b7dd;   /* muted type on deep navy */
  --rn-pop:         #ffa303;   /* amber again: progress bars, rings */
  --rn-paper:       #ffffff;   /* the white card */
  --rn-paper-text:  #4a4d7c;   /* body copy on paper */
  --rn-paper-line:  #e3e5f2;   /* hairline on paper */
  --rn-shadow:      0 24px 50px -20px rgba(0,0,0,.6);
}

::selection { background: var(--rn-brand); color: #ffffff; }
html { color-scheme: dark; }
body {
  background: var(--rn-ground);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

#tag-detail-page {
  padding-top: 20px;
}

/* Alpine: hide elements until x-show/x-if has evaluated */
[x-cloak] { display: none !important; }

/* Display face for titles. Literata is the serif the club already
   uses on its site; set heavy and a touch tight. */
.rn-display {
  font-family: 'Literata', Georgia, serif;
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  line-height: 1.02;
}

/* ─── The logo ────────────────────────────────────────────────────
   The wordmark on transparent. It is wide (1.79:1), so it sits on the
   left of the header and big in the footer. */
.rn-logo { display: block; }
.rn-logo img { display: block; height: 100%; width: auto; }

/* ─── The stage photo ─────────────────────────────────────────────
   Behind the hero, the active show's photo runs across the whole band
   at low strength, cooled toward the navy; the wash fades it out
   completely at the bottom so the band dissolves into the page, and
   softens it at the edges and under the copy. */
.rn-stage-photo { filter: saturate(.75) contrast(1.05); }
.rn-stage-wash {
  background:
    linear-gradient(180deg, rgba(18,19,74,.25) 0%, rgba(18,19,74,0) 20%, rgba(18,19,74,.1) 50%, rgba(18,19,74,.85) 85%, rgba(18,19,74,1) 100%),
    linear-gradient(90deg, rgba(18,19,74,.5) 0%, rgba(18,19,74,.1) 35%, rgba(18,19,74,0) 60%, rgba(18,19,74,.25) 100%);
}

/* ─── The deck ────────────────────────────────────────────────────
   The three poster cards in the hero. The front card is the show that
   is up; the two behind peek out above it, smaller and darker, and
   every card takes 700ms to move when the deck turns, fanned a few
   degrees so the edges read as separate posters. .rn-panel-wash is the
   navy wash under the glass label on the front card, .rn-panel-dim the
   darker veil on the two behind; .rn-glass is the label. */
.rn-deck { transform-origin: 50% 0%; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.rn-deck-0 { transform: translate(0, 0) rotate(0) scale(1); filter: saturate(1); }
.rn-deck-1 { transform: translate(18px, -30px) rotate(3deg) scale(.95); filter: saturate(.7); }
.rn-deck-2 { transform: translate(-18px, -58px) rotate(-3deg) scale(.9); filter: saturate(.5); }
.rn-panel-wash { background: linear-gradient(180deg, rgba(12,13,51,.1) 0%, rgba(12,13,51,0) 25%, rgba(12,13,51,.15) 55%, rgba(12,13,51,.82) 100%); }
.rn-panel-dim  { background: linear-gradient(180deg, rgba(12,13,51,.45) 0%, rgba(12,13,51,.75) 100%); }
.rn-glass { background: rgba(12,13,51,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); }

/* "Next up": a small outlined pill with a pulsing orange dot */
.rn-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; color: var(--rn-ink); padding: .4rem .8rem .4rem .7rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.rn-live::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--rn-brand); animation: rnPulse 1.8s ease-out infinite; }
@keyframes rnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,106,19,.6); }
  100% { box-shadow: 0 0 0 10px rgba(255,106,19,0); }
}

/* The newsletter form as one pill: the field and the button share a border */
.rn-pillform { display: flex; align-items: center; gap: .5rem; padding: 6px 6px 6px 22px; border-radius: 9999px; background: var(--rn-ground); border: 2px solid var(--rn-line-2); transition: border-color .15s ease, box-shadow .15s ease; }
.rn-pillform:focus-within { border-color: var(--rn-brand); box-shadow: 0 0 0 3px rgba(255,106,19,.25); }
.rn-pillform input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--rn-ink); font-weight: 500; font-size: 1rem; }
.rn-pillform input::placeholder { color: var(--rn-muted); }

/* ─── Paper ───────────────────────────────────────────────────────
   The white card that floats on the navy: the gift certificate. Type inside it uses the ground
   color for titles and --rn-paper-text for body. */
.rn-paper {
  background: var(--rn-paper); color: var(--rn-ground);
  border-radius: 24px; box-shadow: var(--rn-shadow);
}

/* ─── Date tag ────────────────────────────────────────────────────
   The site's date marker: an amber tile with a soft corner, the day
   big in the serif and the month under it in navy. Default is 64x72.
   .rn-tag-brand is the orange variant for step numbers and
   confirmations. */
.rn-tag {
  width: 64px; height: 72px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--rn-secondary); color: var(--rn-ground);
  border-radius: 14px; line-height: 1;
}
.rn-tag-day   { font-family: 'Literata', Georgia, serif; font-weight: 800; font-size: 1.75rem; line-height: 1; }
.rn-tag-month { font-size: .6875rem; font-weight: 700; margin-top: 5px; }
.rn-tag-lg { width: 88px; height: 100px; border-radius: 18px; }
.rn-tag-lg .rn-tag-day { font-size: 2.625rem; }
.rn-tag-lg .rn-tag-month { font-size: .8125rem; }
/* .rn-tag-sm sits over a thumbnail in a phone-width list row */
.rn-tag-sm { width: 46px; height: 52px; border-radius: 10px; }
.rn-tag-sm .rn-tag-day { font-size: 1.25rem; }
.rn-tag-sm .rn-tag-month { font-size: .5625rem; margin-top: 3px; }
/* .rn-tag { display:flex } beats Tailwind hidden. The large tile is
   desktop-only; the small tile sits on the phone thumbnail. */
@media (max-width: 767px) {
  #cc-show-grid .rn-tag.hidden { display: none; }
  #cc-show-grid .rn-toggle.hidden,
  #cc-show-grid .rn-seg.hidden { display: none; }
  #cc-show-grid .rn-ticket-cta { max-width: 100%; }
}
@media (min-width: 768px) {
  #cc-show-grid .rn-tag.md\:hidden { display: none; }
}
.rn-tag-brand { background: var(--rn-brand); color: var(--rn-on-brand); }

/* ─── Shared semantic classes ────────────────────────────────────
   Size (padding, font-size) stays inline in Tailwind so a row button
   and a hero button can differ; these set only shape + color. Every
   button is a pill. */

/* Primary: orange pill, white type */
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--rn-brand); color: var(--rn-on-brand);
  font-weight: 700; border-radius: 9999px; border: 2px solid var(--rn-brand);
  box-shadow: 0 10px 24px -12px rgba(255,106,19,.7);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.rn-btn:hover { background: var(--rn-brand-dark); border-color: var(--rn-brand-dark); }
.rn-btn:active { transform: translateY(1px); }

/* Secondary: navy pill, white type (a second action on paper or amber) */
.rn-btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--rn-ground); color: var(--rn-ink);
  font-weight: 700; border-radius: 9999px; border: 2px solid var(--rn-ground);
  transition: background-color .15s ease, border-color .15s ease;
}
.rn-btn-dark:hover { background: var(--rn-surface-2); border-color: var(--rn-surface-2); }

/* Ghost: white outline pill, fills on hover */
.rn-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: var(--rn-ink);
  font-weight: 700; border-radius: 9999px; border: 2px solid rgba(255,255,255,.7);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rn-btn-ghost:hover { background: var(--rn-ink); color: var(--rn-ground); border-color: var(--rn-ink); }

/* Sold out: same height as a row button, hairline, no action */
.rn-btn-off {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--rn-muted);
  font-weight: 700; border-radius: 9999px; border: 2px solid var(--rn-line-2);
  cursor: not-allowed;
}

/* Buy tickets and Sold out share one box, including the arrow on Buy tickets. */
.rn-ticket-cta {
  box-sizing: border-box;
  width: 10rem;
  height: 3rem;
  padding: 0 1.5rem;
  justify-content: center;
  white-space: nowrap;
}

/* Segmented control (list / grid toggle) and the toggle buttons */
.rn-seg { display: inline-flex; align-items: center; border: 2px solid var(--rn-line-2); border-radius: 9999px; padding: 3px; background: var(--rn-surface); }
.rn-seg-btn { width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--rn-muted); transition: background-color .15s ease, color .15s ease; }
.rn-seg-btn:hover { color: var(--rn-ink); }
.rn-seg-btn-on { background: var(--rn-ink); color: var(--rn-ground); }
.rn-seg-btn-on:hover { color: var(--rn-ground); }
.rn-toggle { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; padding: .55rem 1rem; border-radius: 9999px; border: 2px solid var(--rn-line-2); background: var(--rn-surface); color: var(--rn-ink); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.rn-toggle:hover { border-color: var(--rn-ink); }
.rn-toggle-on { background: var(--rn-ink); color: var(--rn-ground); border-color: var(--rn-ink); }
.rn-toggle-on:hover { background: var(--rn-ink); }

/* Stepper (ticket and add-on quantities) */
.rn-stepper { display: inline-flex; align-items: center; border: 2px solid var(--rn-line-2); border-radius: 9999px; overflow: hidden; background: var(--rn-surface); flex-shrink: 0; }
.rn-stepper button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--rn-ink); transition: background-color .15s ease; }
.rn-stepper button:hover { background: var(--rn-surface-2); }
.rn-stepper span { width: 44px; text-align: center; font-weight: 700; font-size: 1.125rem; color: var(--rn-ink); }

/* Small amber label with an orange dot, sentence case */
.rn-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 700; color: var(--rn-brand-text);
}
.rn-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 9999px; background: var(--rn-brand); }

/* Sub-section heading */
.rn-section-title { font-size: 1.25rem; font-weight: 700; color: var(--rn-ink); letter-spacing: -.01em; line-height: 1.2; }

/* Quiet label (drawer group names, footer columns) */
.rn-label { font-size: .75rem; font-weight: 700; color: var(--rn-muted); }

/* Date / time text used in show rows and detail panels */
.rn-date { font-size: .875rem; font-weight: 700; color: var(--rn-brand-text); white-space: nowrap; }
.rn-time { font-size: .875rem; font-weight: 700; color: var(--rn-ink); white-space: nowrap; }

/* Success copy (promo and gift codes applied) */
.rn-ok { color: #7ee2a0; }

/* Status chip. .rn-chip-hot for Selling fast, .rn-chip-off for Sold out */
.rn-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  padding: .35rem .7rem; border-radius: 9999px;
  background: var(--rn-surface-2); color: var(--rn-ink);
  box-shadow: inset 0 0 0 1px var(--rn-line-2);
}
.rn-chip-hot { background: var(--rn-secondary); color: var(--rn-ground); box-shadow: none; }
.rn-chip-off { background: transparent; color: var(--rn-muted); }

/* Form input: raised field, hairline, orange on focus */
.rn-input {
  background: var(--rn-surface); border: 2px solid var(--rn-line); border-radius: 14px;
  color: var(--rn-ink); font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rn-input:focus { outline: none; border-color: var(--rn-brand); box-shadow: 0 0 0 3px rgba(255,106,19,.25); }
.rn-input::placeholder { color: var(--rn-muted); }

/* Coupon: struck original, amber new price */
#event-view-page .ticket-price.slashed,
#event-view-page .breakdown-base-original.slashed,
#event-view-page .breakdown-fee-original.slashed,
.evc-checkout-page .original.slashed {
  color: var(--rn-muted);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
#event-view-page .ticket-price-wrapper [class^="discount-price-"]:not(:empty),
#event-view-page [class^="discount-breakdown-"]:not(:empty),
.evc-checkout-page .discounted:not(:empty) {
  margin-left: 0.4rem;
  color: var(--rn-brand-text);
  font-weight: 700;
  text-decoration: none;
}
.evc-checkout-page .discounted:empty { display: none; }
.evc-checkout-page .rn-display .original.slashed {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Card: raised navy, hairline, orange hairline on hover */
.rn-card {
  background: var(--rn-surface); border: 1.5px solid var(--rn-line); border-radius: 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rn-card-hover:hover { border-color: var(--rn-brand); box-shadow: var(--rn-shadow); }

/* Round icon button (nav arrows, social, close) */
.rn-icon-btn {
  width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.45); color: var(--rn-ink); background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rn-icon-btn:hover { background: var(--rn-ink); color: var(--rn-ground); border-color: var(--rn-ink); }
/* The icon button's own display beats Tailwind's lg:hidden, so the
   phone menu control has to be hidden here once the desktop bar shows. */
@media (min-width: 1024px) {
  #rn-main-nav button.rn-icon-btn { display: none; }
}

/* Headshot: a soft-cornered print, orange ring on hover */
.rn-headshot { border-radius: 18px; overflow: hidden; background: var(--rn-surface-2); box-shadow: 0 0 0 2px var(--rn-line); transition: box-shadow .2s ease; }
.group:hover .rn-headshot { box-shadow: 0 0 0 2px var(--rn-brand); }

/* ─── Hero photo ─────────────────────────────────────────────────
   The active slide zooms in slowly while it is up. The 7s runs a
   little past the 6s slide timer so the zoom never stops early. */
.rn-hero-zoom { animation: rnHeroZoom 7s ease-out forwards; }
@keyframes rnHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ─── Animation ──────────────────────────────────────────────────
   Page transition, announcement marquee, hero entrance + slide timer. */
.rn-view-fade { animation: rnFadeIn 0.3s ease; }
@keyframes rnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The announcement strip in the nav. It holds twelve identical copies,
   so sliding by -50% loops seamlessly. */
.rn-marquee { animation: rnMarquee 90s linear infinite; will-change: transform; }
@keyframes rnMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Title and description keep a fixed slot (the mockup's three-line
   title and the clamped blurb) so a short title or a missing blurb
   does not pull the date and the buttons up, and a longer one does
   not push them down. */
.rn-hero-title,
.rn-hero-desc {
  max-height: 3lh;
  overflow: hidden;
}

.rn-hero-fade { animation: rnHeroFadeUp 0.6s ease both; }
.rn-hero-fade-delay-1 { animation-delay: 0.1s; }
.rn-hero-fade-delay-2 { animation-delay: 0.2s; }
@keyframes rnHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Segment of the hero slide rail; the 6s matches the carousel timer */
.rn-hero-progress { width: 0%; animation: rnHeroProgress 6s linear forwards; }
@keyframes rnHeroProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-view-fade,
  .rn-hero-fade,
  .rn-hero-progress,
  .rn-card,
  .rn-hero-zoom,
  .rn-deck,
  .rn-live::before,
  .rn-marquee { animation: none; transition: none; }
  .rn-hero-progress { width: 100%; }
}

/* ─── Device preview (dev only) ──────────────────────────────────
   Backs the mobile-frame overlay in components/layout/promo-button.php,
   which is not rendered when APP_ENV=production. */
.rn-device-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rn-device-preview-frame {
  width: 390px;
  height: 100%;
  max-height: 844px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
  background: #12134a;
}

/* Controls carried by shared show markup: same look as the Rodney pills. */
.rn-btn-ghost-night {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: var(--rn-ink);
  font-weight: 700; border-radius: 9999px; border: 2px solid rgba(255,255,255,.7);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rn-btn-ghost-night:hover { background: var(--rn-ink); color: var(--rn-ground); border-color: var(--rn-ink); }
.rn-icon-btn-36 { width: 36px; height: 36px; }
.rn-icon-btn-40 { width: 40px; height: 40px; }

@media (max-width: 640px) {
  .rn-pillform { flex-wrap: wrap; border-radius: 24px; padding: 10px; }
  .rn-pillform input { width: 100%; padding: 8px 10px; }
  .rn-pillform .rn-btn { width: 100%; }
}

/* Footer menus share the phone width so the 2nd and 3rd levels sit side by side. */
.rn-footer-menu,
.rn-footer-submenu {
  width: min(14rem, calc((100vw - 2.5rem) / 2));
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .rn-footer-menu { width: 14rem; }
  .rn-footer-submenu { width: 12rem; }
}

/* Page titles match the mockup: Literata, up to 112px. */
.rn-page-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.02;
  color: var(--rn-ink);
  font-size: 3.75rem;
}
@media (min-width: 768px) {
  .rn-page-title { font-size: 4.5rem; }
}
@media (min-width: 1024px) {
  .rn-page-title { font-size: 6rem; }
}
@media (min-width: 1280px) {
  .rn-page-title { font-size: 7rem; }
}

/* Light shells copied from other venues sit on the navy page.
   Nested white cards (forms, modals) stay paper. */
main.bg-white,
section.venue-view-fade.bg-white,
.venue-view-fade.bg-white {
  background-color: transparent;
  color: var(--rn-ink);
}
main.bg-white :is(.text-neutral-900, .text-neutral-800, .text-black),
section.venue-view-fade.bg-white :is(.text-neutral-900, .text-neutral-800, .text-black),
.venue-view-fade.bg-white :is(.text-neutral-900, .text-neutral-800, .text-black) {
  color: var(--rn-ink);
}
main.bg-white .bg-white :is(.text-neutral-900, .text-neutral-800, .text-black),
section.venue-view-fade.bg-white .bg-white :is(.text-neutral-900, .text-neutral-800, .text-black),
.venue-view-fade.bg-white .bg-white :is(.text-neutral-900, .text-neutral-800, .text-black) {
  color: #171717;
}
main.bg-white :is(.text-neutral-700, .text-neutral-600, .text-neutral-500, .text-neutral-400),
section.venue-view-fade.bg-white :is(.text-neutral-700, .text-neutral-600, .text-neutral-500, .text-neutral-400),
.venue-view-fade.bg-white :is(.text-neutral-700, .text-neutral-600, .text-neutral-500, .text-neutral-400) {
  color: var(--rn-muted);
}
main.bg-white .bg-white :is(.text-neutral-700, .text-neutral-600, .text-neutral-500, .text-neutral-400),
.venue-view-fade.bg-white .bg-white :is(.text-neutral-700, .text-neutral-600, .text-neutral-500, .text-neutral-400) {
  color: #525252;
}
main.bg-white :is(.border-neutral-200, .border-neutral-300),
.venue-view-fade.bg-white :is(.border-neutral-200, .border-neutral-300) {
  border-color: var(--rn-line);
}