/* ============================================================
   Reverb Presents Tickets - global stylesheet
   Source of truth: build/index.html + build/event.html mockups.
   Iron Rule 39: every section's CSS lives between SECTION markers
   and is REPLACED in place on rebuild, never appended.
   Iron Rule 60: 1500-line budget, no duplicate selectors.
   ============================================================ */

/* SECTION:tokens START */
:root {
  --bg: #0A0A0A;
  --bg-nav: #080B10;
  --card: #0D0D0D;
  --card-raised: #131313;
  --border: #1E1E1E;
  --border-soft: rgba(255, 255, 255, 0.09);
  --accent: #FC4E20;
  --accent-hover: #FF6A3D;
  --accent-border: rgba(252, 78, 32, 0.45);
  --text: #FFFFFF;
  --text-muted: #AFADAF;
  --text-soft: #D2CFCF;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
}
/* SECTION:tokens END */

/* SECTION:base START */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
/* SECTION:base END */

/* SECTION:nav START */
/* Source: build/index.html - .container (index.html:54-58), shared .btn
   system (index.html:61-93), SECTION:nav (index.html:95-125), responsive
   (index.html:620). Rules copied verbatim per Iron Rule 51; comma-prefixed
   live selectors map mockup classes to the Theme Builder output where the
   DOM differs (Elementor Pro nav-menu nesting, boxed container inner).
   "base fold" = property folded in from the mockup base reset
   (index.html:39-52) because the live stylesheet has no global reset. */

.container {
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons (shared) - index.html:61-93 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 14px 24px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  text-decoration: none; /* base fold: index.html:50 */
}
.btn:hover { transform: translateY(-2px); }
/* Class-pair selectors (0,2,0): the Elementor kit emits a global link color
   (.elementor-kit-168 a, 0,1,1) that outranks the mockup's bare .btn--solid
   (0,1,0), turning solid-button text orange-on-orange. Iron Rule 45(d). */
.btn--solid, .btn.btn--solid { background: var(--accent); color: var(--text); }
.btn--solid:hover, .btn.btn--solid:hover { background: var(--accent-hover); color: var(--text); }
.btn--outline, .btn.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn--outline:hover, .btn.btn--outline:hover { border-color: rgba(255, 255, 255, 0.6); color: var(--text); }
.btn--outline-accent, .btn.btn--outline-accent {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.btn--outline-accent:hover { border-color: var(--accent); }
.btn__arrow { width: 13px; height: 13px; flex: none; }

/* Nav bar - index.html:95-125 */
.nav {
  background: var(--bg-nav);
  position: relative;
  z-index: 10;
}
.nav__inner,
#reverb-nav > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}
.nav__logo img {
  height: 44px;
  width: auto;
  max-width: 100%; /* base fold: index.html:49 */
  display: block;  /* base fold: index.html:49 */
}
.nav__links {
  display: flex;
  gap: 44px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* Live mapping: Elementor Pro nav-menu nests nav > ul inside the
   .nav__links wrapper (mockup: bare anchors, index.html:653-658) */
.nav__links .elementor-nav-menu {
  display: flex;
  gap: 44px;
  margin: 0;        /* base fold: index.html:39 */
  padding: 0;       /* base fold: index.html:39 */
  list-style: none; /* base fold: index.html:51 */
}
.nav__link,
#reverb-nav .nav__links .elementor-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  transition: transform 0.15s ease, color 0.15s ease;
  display: inline-block;
  text-decoration: none; /* base fold: index.html:50 */
  padding: 0;            /* live mapping: zero Elementor Pro item padding */
}
.nav__link:hover,
#reverb-nav .nav__links .elementor-item:hover {
  transform: translateY(-2px);
  color: var(--accent-hover);
}
.nav__cta { padding: 13px 22px; }
/* Live mapping: the mockup CTA carries an inline SVG arrow
   (index.html:661, sized by .btn__arrow index.html:93). rfmwpe_button has
   no SVG slot and rfmwpe_html strips <svg> via wp_kses_post, so the
   identical arrow renders as a pseudo-element background (white stroke =
   --text on the solid button, hover included). */
.nav__cta::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='8%207%2017%207%2017%2016'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Live mapping: WP menu 'main' also contains a Get Tickets item; the
   chrome renders that CTA as the separate .nav__cta button per the mockup
   DOM (index.html:659-662), so the in-menu duplicate (tagged nav__cta-item
   by rebuild/rebuild-header.php) is hidden inside the centered group. */
/* #id specificity (1,1,0) beats Elementor Pro's .elementor-nav-menu>li
   (0,2,1) which overrode the class-pair form of this rule (Iron Rule 6) */
#reverb-nav .nav__cta-item { display: none; }

@media (max-width: 960px) {
  /* #id prefix (1,1,0): Elementor Pro's own widget rule
     .elementor-widget-nav-menu:not(:has(...)):not([class*=...]) weighs
     (0,3,0) and beats the mockup's bare .nav__links (Iron Rule 6). */
  .nav__links,
  #reverb-nav .nav__links { display: none; }
}
/* SECTION:nav END */

/* SECTION:footer START */
/* Source: build/index.html SECTION:footer (index.html:527-606), responsive
   (index.html:616-617, 637). Rules copied verbatim per Iron Rule 51 with
   comma-prefixed live mappings. Margin shorthands fold in the mockup base
   reset (index.html:39) where noted; #id selectors (Iron Rule 6) beat
   Elementor post CSS by specificity alone (Iron Rule 16). Iron Rule 19:
   homepage footer spec wins over event.html deltas. */

.footer { padding-top: 64px; padding-bottom: 32px; }
.footer__grid,
#reverb-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.3fr 0.7fr 0.7fr;
  gap: 56px;
}
.footer__brand { border-right: 1px solid var(--border); padding-right: 40px; }
.footer__logo,
#reverb-footer-brand .footer-brand__logo img {
  height: 46px;
  width: auto;
  margin: 0 0 24px; /* mockup: margin-bottom 24px (index.html:535) + base fold */
  display: block;   /* base fold: index.html:49 */
}
/* Live mapping: rfmwpe_footer_brand wraps the logo img in a home-link
   anchor (mockup: bare img, index.html:929) */
#reverb-footer-brand .footer-brand__logo {
  display: block;
  text-decoration: none;
}
.footer__tagline,
#reverb-footer-brand .footer-brand__tagline {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 28px; /* mockup: margin-bottom 28px (index.html:540) + base fold */
}
.footer__social,
#reverb-footer-brand .footer-social {
  display: flex;
  gap: 22px;
}
.footer__social-link,
#reverb-footer-brand .footer-social__link {
  color: var(--text);
  display: inline-flex;
  transition: transform 0.15s ease, color 0.15s ease;
  text-decoration: none; /* base fold: index.html:50 */
}
.footer__social-link:hover,
#reverb-footer-brand .footer-social__link:hover {
  transform: translateY(-2px);
  color: var(--accent-hover);
}
.footer__social-link svg,
#reverb-footer-brand .footer-social__link svg {
  width: 20px;
  height: 20px;
}
.footer__heading {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 22px;              /* mockup: margin-bottom 22px (index.html:555) + base fold */
  font-family: var(--font-body); /* base fold: heading inherits Inter body font (index.html:44) */
  color: var(--text);            /* base fold: index.html:43 */
}
.footer__signup-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 24px; /* mockup: margin-bottom 24px (index.html:561) + base fold */
  max-width: 300px;
}
.signup-form { display: flex; max-width: 420px; }
/* Live mapping: mockup base sets form controls to inherit the body font (index.html:52) */
.signup-form input,
.signup-form button {
  font-family: inherit;
}
.signup-form__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #2A2A2A;
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 15px 18px;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
}
.signup-form__input::placeholder { color: var(--text-muted); }
.signup-form__input:focus { border-color: #3a3a3a; }
.signup-form__submit {
  background: var(--accent);
  border: none;
  border-radius: 0 6px 6px 0;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.signup-form__submit:hover { transform: translateY(-2px); background: var(--accent-hover); }
.signup-form__submit svg { width: 18px; height: 18px; }
.footer__list,
.footer__list .elementor-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;        /* base fold: index.html:39 */
  padding: 0;       /* base fold: index.html:39 */
  list-style: none; /* base fold: index.html:51 */
}
.footer__list a {
  font-size: 14.5px;
  color: var(--text-muted);
  display: inline-block;
  transition: transform 0.15s ease, color 0.15s ease;
  text-decoration: none; /* base fold: index.html:50 */
  padding: 0;            /* live mapping: zero Elementor Pro item padding */
}
.footer__list a:hover {
  transform: translateY(-2px);
  color: var(--text);
}
.footer__bottom {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 60px 0 0; /* mockup: margin-top 60px (index.html:605) + base fold */
}

@media (max-width: 1180px) {
  .footer__grid,
  #reverb-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer__brand,
  #reverb-footer-brand {
    border-right: none;
    padding-right: 0;
  }
}
@media (max-width: 640px) {
  .footer__grid,
  #reverb-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/* SECTION:footer END */

/* SECTION:hero START */
/* Source: build/index.html SECTION:hero (index.html:127-205), responsive
   (index.html:610-611, 621, 628-629, 640). Rules copied verbatim per Iron
   Rule 51 with comma-prefixed live mappings. The shared .btn and .container
   systems already live in SECTION:nav - referenced, never redefined
   (Iron Rules 49/50). Live DOM notes:
   - The mockup's .hero__bg div does not exist live: the bg image renders
     natively on container #reverb-hero (Elementor classic bg, center 35% /
     cover, Iron Rule 4); its opacity + gradient layers render on
     #reverb-hero::before below.
   - rfmwpe_section_header component_name 'hero-copy' emits __eyebrow /
     __heading / __accent / __desc ('hero' itself is unusable as component
     root: the widget root div would inherit these .hero section rules).
   - rfmwpe_icon_band component_name 'hero-perks' emits the perks row; the
     pasted mockup SVGs keep class perk__icon, so that rule needs no
     comma-prefix. */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg); /* mockup background: var(--bg) (index.html:131); -color form so the native Elementor bg image survives the cascade */
}
/* .hero__bg (index.html:133-138) + .hero__bg::after (index.html:139-146).
   Live fold: the mockup paints the image at opacity .7 over var(--bg);
   with the image at full alpha on the container, 0.7*img + 0.3*bg is
   reproduced by a bottom rgba(10,10,10,.3) layer under the two verbatim
   gradients. Content sits above via .hero__inner z-index 1. */
#reverb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.35) 35%, rgba(10, 10, 10, 0.6) 78%, rgba(10, 10, 10, 0.98) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.72) 40%, rgba(10, 10, 10, 0.3) 62%, rgba(10, 10, 10, 0.5) 100%),
    rgba(10, 10, 10, 0.3);
}
/* .hero__inner (index.html:147-156). Padding 56px/24px is set natively on
   the container (index.html:56, 154-155) and lands on the boxed inner. */
.hero__inner,
#reverb-hero > .e-con-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 490px;
  gap: 64px;
  align-items: center;
}
.hero__eyebrow,
.hero-copy__eyebrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block; /* live mapping: widget emits a span (mockup <p>, index.html:671) */
}
.hero__title,
.hero-copy__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 106px;
  line-height: 0.98;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0; /* base fold: index.html:39 */
}
.hero__title-accent,
.hero-copy__accent { color: var(--accent); display: block; }
.hero__lead,
.hero-copy__desc {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.6;
  margin: 26px 0 0; /* mockup margin-top 26px (index.html:179) + base fold */
  max-width: 420px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}
/* Live mapping: the mockup Browse Events button carries an inline SVG arrow
   (index.html:677, sized by .btn__arrow index.html:93). rfmwpe_button has no
   SVG slot, so the identical arrow renders as a pseudo - same technique and
   asset as .nav__cta::after in SECTION:nav. */
.hero__cta::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='8%207%2017%207%2017%2016'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero__perks,
.hero-perks {
  display: flex;
  gap: 44px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.perk,
.hero-perks__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.perk__icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  flex: none;
}
.perk__label,
.hero-perks__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .hero__title,
  .hero-copy__heading { font-size: 84px; }
  .hero__inner,
  #reverb-hero > .e-con-inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
}
@media (max-width: 960px) {
  .hero__inner,
  #reverb-hero > .e-con-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero__title,
  .hero-copy__heading { font-size: 60px; }
  .hero__perks,
  .hero-perks { gap: 24px; }
}
@media (max-width: 420px) {
  .hero__title,
  .hero-copy__heading { font-size: 50px; }
}
/* SECTION:hero END */

/* SECTION:featured START */
/* Source: build/index.html SECTION:featured (index.html:207-251), responsive
   (index.html:622, 641). Rules copied verbatim per Iron Rule 51. Live DOM:
   rfmwpe_event_card (variant 'featured', component_name 'featured-card')
   reproduces the mockup class names 1:1 - no comma-prefix mappings needed.
   The shared .btn system (.btn--solid on the CTA) lives in SECTION:nav.
   "base fold" = property folded in from the mockup base reset
   (index.html:39-52) because the live stylesheet has no global reset. */

.featured-card {
  background: #101114;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}
.featured-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.featured-card__badge svg { width: 14px; height: 14px; color: var(--accent); }
.featured-card__art {
  width: 100%;
  aspect-ratio: 320 / 238;
  object-fit: cover;
  border-radius: 6px;
  max-width: 100%; /* base fold: index.html:49 */
  display: block;  /* base fold: index.html:49 */
}
.featured-card__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 4px;
}
.featured-card__meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.featured-card__meta-row svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.featured-card__cta { width: 100%; padding: 16px 24px; font-size: 14px; }

@media (max-width: 960px) {
  .featured-card { max-width: 520px; }
}
@media (max-width: 420px) {
  .featured-card { padding: 14px; }
}
/* SECTION:featured END */

/* SECTION:countdown START */
/* Source: build/index.html SECTION:countdown (index.html:253-307), responsive
   (index.html:625, 634-636). Rules copied verbatim per Iron Rule 51 with
   comma-prefixed live mappings. Live DOM notes:
   - Strip = container #reverb-countdown-strip with verbatim class
     'countdown'; the mockup's STRIP-level divider divs (index.html:735,757)
     are real empty containers with class 'countdown__divider' (#id-prefixed
     live rule outranks Elementor's .e-con width/flex defaults, Iron Rule 6).
   - Timer = rfmwpe_countdown component_name 'countdown-timer' ('countdown'
     itself would inherit the strip chrome). The widget renders units only,
     so the mockup's IN-TIMER dividers (index.html:741,746,751) paint as
     centered pseudos and the unit gap widens to 69px (34 + 1 + 34) - the
     mockup spacing stays exact. Widget emits spans for digit/label (mockup
     divs) - display:block folded in.
   - Widget flex items are the .elementor-widget wrappers; the CTA's
     margin-left:auto (index.html:306) moves to its wrapper class
     .countdown__cta-item (set via _css_classes in the rebuild script).
   - The mockup CTA's inline mail SVG (index.html:764, sized 15px by
     .countdown__cta svg.btn__arrow index.html:307) renders as a
     .countdown__cta::after pseudo (accent stroke - .btn--outline-accent
     text color never changes on hover) - same technique as .nav__cta /
     .hero__cta in SECTION:nav / SECTION:hero. */

.countdown-wrap { padding-top: 12px; }
.countdown {
  background: #111111;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 20px 30px;
  flex-wrap: wrap;
}
.countdown__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0; /* base fold: index.html:39 */
}
.countdown__label-sub { color: var(--accent); display: block; }
.countdown__timer {
  display: flex;
  align-items: center;
  gap: 34px;
}
/* Live mapping: widget unit gap 69px = mockup 34px gap + 1px divider + 34px
   gap (index.html:736-756). */
.countdown-timer {
  display: flex;
  align-items: center;
  gap: 69px;
}
.countdown__unit,
.countdown-timer__unit {
  text-align: center;
  min-width: 52px;
  position: relative; /* live fold: anchors the in-timer divider pseudo */
}
.countdown__digit,
.countdown-timer__number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  display: block; /* live mapping: widget emits spans (mockup divs, index.html:738) */
}
.countdown__unit-label,
.countdown-timer__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
  display: block; /* live mapping: widget emits spans (mockup divs, index.html:739) */
}
.countdown__divider,
#reverb-countdown-strip .countdown__divider {
  width: 1px;
  height: 44px;
  background: var(--border);
  flex: none;
}
/* Live mapping: in-timer dividers (index.html:741,746,751) centered in the
   69px unit gap. */
.countdown-timer__unit + .countdown-timer__unit::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 44px;
  background: var(--border);
}
.countdown__note {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 0 6px; /* mockup: margin-left 6px (index.html:302) + base fold */
}
.countdown__note-strong { color: var(--text); display: block; }
.countdown__note-muted { color: var(--text-muted); display: block; }
.countdown__cta { padding: 15px 26px; } /* margin-left:auto lives on the wrapper below */
.countdown__cta-item { margin-left: auto; } /* live mapping: flex item = widget wrapper (index.html:306) */
.countdown__cta::after {
  content: "";
  width: 15px;  /* mockup: .countdown__cta svg.btn__arrow 15px (index.html:307) */
  height: 15px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FC4E20'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='4'%20width='20'%20height='16'%20rx='2'/%3E%3Cpolyline%20points='2,6%2012,13%2022,6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 960px) {
  .countdown__cta,
  .countdown__cta-item { margin-left: 0; }
}
@media (max-width: 640px) {
  .countdown { gap: 22px; padding: 20px; }
  .countdown__timer,
  .countdown-timer { gap: 18px; }
  .countdown__divider,
  #reverb-countdown-strip .countdown__divider { display: none; }
  .countdown-timer__unit + .countdown-timer__unit::before { display: none; }
}
/* SECTION:countdown END */

/* SECTION:drops START */
/* Source: build/index.html SECTION:drops (index.html:309-441), responsive
   (index.html:623, 630-631). Rules copied verbatim per Iron Rule 51 with
   comma-prefixed live mappings. "base fold" = property folded in from the
   mockup base reset (index.html:39-52). Live DOM notes:
   - Section = container #drops (the literal id: nav DROPS + hero 'See
     Upcoming Drops' anchor /#drops). Head/grid = containers
     #reverb-drops-head / #reverb-drops-grid; the fr grid template has no
     native Elementor control, so it rides the verbatim rule with the #id
     comma-prefix (Iron Rule 45d, same as #reverb-hero > .e-con-inner).
   - h2 = rfmwpe_heading .drops__title. Its leading equalizer SVG
     (index.html:775) renders as ::before (accent data URI) - the widget
     has no icon slot and rfmwpe_inline_kses strips <svg>; the verbatim
     .drops__title svg rule is kept for the mockup record.
   - View-all = rfmwpe_button .drops__view-all; its arrow (index.html:780)
     is ::after with a currentColor MASK (not a fixed background) so the
     hover accent -> accent-hover shift (index.html:338) stays exact.
   - Cards = rfmwpe_event_card variant 'drop' - mockup classes 1:1, no
     comma-prefixes needed. Grid items are the .elementor-widget wrappers,
     so an equal-height chain hands the stretch down to .drop-card (mockup
     grid stretches the article directly). */

.drops { padding-top: 64px; padding-bottom: 24px; }
.drops__head,
#reverb-drops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.drops__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;                     /* base fold: index.html:39 */
  font-family: var(--font-body); /* base fold: index.html:44 */
  color: var(--text);            /* base fold: index.html:43 */
}
.drops__title svg { width: 30px; height: 24px; color: var(--accent); flex: none; }
/* Live mapping: the mockup h2 carries an inline equalizer SVG
   (index.html:775) - rendered as a pseudo, same technique as .nav__cta /
   .hero__cta / .countdown__cta (accent stroke = --accent). */
.drops__title::before {
  content: "";
  width: 30px;
  height: 24px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2024'%20fill='none'%20stroke='%23FC4E20'%20stroke-width='2.5'%20stroke-linecap='round'%3E%3Cline%20x1='3'%20y1='9'%20x2='3'%20y2='15'/%3E%3Cline%20x1='9'%20y1='5'%20x2='9'%20y2='19'/%3E%3Cline%20x1='16'%20y1='1'%20x2='16'%20y2='23'/%3E%3Cline%20x1='23'%20y1='5'%20x2='23'%20y2='19'/%3E%3Cline%20x1='29'%20y1='9'%20x2='29'%20y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.drops__view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform 0.15s ease, color 0.15s ease;
  text-decoration: none; /* base fold: index.html:50 */
}
.drops__view-all:hover { transform: translateY(-2px); color: var(--accent-hover); }
.drops__view-all svg { width: 16px; height: 16px; }
/* Live mapping: mockup arrow SVG (index.html:780) as a currentColor-mask
   pseudo so it follows the link's hover color shift (index.html:338). */
.drops__view-all::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E") center / contain no-repeat;
}
.drops__grid,
#reverb-drops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* Live mapping: grid items are the widget wrappers - equal-height chain so
   .drop-card stretches like the mockup grid child (footer bars align). */
#reverb-drops-grid > .elementor-widget-rfmwpe_event_card,
#reverb-drops-grid .elementor-widget-rfmwpe_event_card > .elementor-widget-container,
#reverb-drops-grid .drop-card { height: 100%; }
.drop-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.drop-card:hover { transform: translateY(-2px); border-color: #2c2c2c; }
.drop-card__media { position: relative; }
.drop-card__art {
  width: 100%;
  aspect-ratio: 265 / 200;
  object-fit: cover;
  border-radius: var(--radius-sm);
  max-width: 100%; /* base fold: index.html:49 */
  display: block;  /* base fold: index.html:49 */
}
.drop-card__chip {
  position: absolute;
  top: 2px;
  left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
}
.drop-card__chip svg { width: 13px; height: 13px; color: var(--text); }
.drop-card__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.drop-card__badge--neutral {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text);
}
.drop-card__body { padding: 20px 10px 10px; display: flex; flex-direction: column; flex: 1; }
.drop-card__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;                     /* base fold: index.html:39 */
  font-family: var(--font-body); /* base fold: index.html:44 */
  color: var(--text);            /* base fold: index.html:43 */
}
.drop-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 24px;
}
.drop-card__meta-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--text-muted);
}
.drop-card__meta-row svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.drop-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-decoration: none; /* base fold: index.html:50 */
}
.drop-card__footer:hover { transform: translateY(-2px); border-color: var(--accent); }
.drop-card__cta {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
}
.drop-card__price { font-size: 14.5px; color: var(--text-muted); }
.drop-card__footer-icon { width: 18px; height: 18px; color: var(--accent); flex: none; }

@media (max-width: 960px) {
  .drops__grid,
  #reverb-drops-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .drops__grid,
  #reverb-drops-grid { grid-template-columns: 1fr; }
  .drops__head,
  #reverb-drops-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* SECTION:drops END */

/* SECTION:features START */
/* Source: build/index.html SECTION:features (index.html:443-525), responsive
   (index.html:612-615, 624, 632-633). Rules copied verbatim per Iron Rule 51
   with comma-prefixed live mappings. "base fold" = property folded in from
   the mockup base reset (index.html:39-52). Live DOM notes:
   - Band = container #reverb-features-band .night; the fr grid template
     rides the verbatim rule with the #id comma-prefix (Iron Rule 45d).
   - Mockup .night::before image layer (index.html:456-465): a static-CSS
     url() cannot point at the media library, so the image is a REAL
     absolutely-positioned container #reverb-features-bg .night__bg with
     the artwork set natively (Iron Rule 11); this rule carries the strip
     geometry + opacity. Z-order matches the mockup: in-flow children keep
     z-index 1, and the .night::after gradient pseudo (kept verbatim,
     mapped onto the band container) paints above the image div in DOM
     order.
   - Intro copy = rfmwpe_section_header component 'night-copy' ('night'
     itself would inherit the band chrome - same deviation as 'hero-copy');
     mockup classes .night__eyebrow/.night__title comma-mapped.
   - 'Our Story' arrow SVG (index.html:885) = .night__cta::after pseudo,
     identical technique + data URI as .hero__cta (white stroke -
     .btn--outline text stays white on hover).
   - Tiles = rfmwpe_card_box 'feature-card' - mockup classes 1:1. Grid
     items are the widget wrappers, so an equal-height chain hands the
     stretch down to .feature-card. */

.night-wrap { padding-top: 40px; padding-bottom: 40px; }
.night,
#reverb-features-band {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 300px repeat(4, 1fr);
  gap: 24px;
  padding: 36px;
}
/* Live substitute for .night::before (index.html:456-465): the night-lasers
   image is set natively on this empty container; geometry + opacity here. */
.night__bg,
#reverb-features-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  opacity: 0.85;
}
.night::after,
#reverb-features-band::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.25) 55%, #0D0D0D 96%);
}
.night__intro,
#reverb-features-intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 0;
}
.night__eyebrow,
.night-copy__eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block; /* live mapping: widget emits a span (mockup <p>, index.html:881) */
}
.night__title,
.night-copy__heading {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 26px;              /* mockup: margin-bottom 26px (index.html:498) + base fold */
  font-family: var(--font-body); /* base fold: index.html:44 */
  color: var(--text);            /* base fold: index.html:43 */
}
.night__cta { padding: 12px 22px; font-size: 12.5px; }
/* Live mapping: the mockup Our Story button carries an inline SVG arrow
   (index.html:885, sized by .btn__arrow index.html:93). rfmwpe_button has
   no SVG slot, so the identical arrow renders as a pseudo - same technique
   and asset as .nav__cta / .hero__cta. */
.night__cta::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='8%207%2017%207%2017%2016'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Live mapping: grid items are the widget wrappers - equal-height chain so
   .feature-card stretches like the mockup grid child. */
#reverb-features-band > .elementor-widget-rfmwpe_card_box,
#reverb-features-band .elementor-widget-rfmwpe_card_box > .elementor-widget-container,
#reverb-features-band .feature-card { height: 100%; }
.feature-card {
  position: relative;
  z-index: 1;
  background: var(--card-raised);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 24px 20px;
  transition: transform 0.15s ease;
}
.feature-card:hover { transform: translateY(-2px); }
.feature-card__icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 22px; }
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card__title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 14px;              /* mockup: margin-bottom 14px (index.html:519) + base fold */
  font-family: var(--font-body); /* base fold: index.html:44 */
  color: var(--text);            /* base fold: index.html:43 */
}
.feature-card__text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0; /* base fold: index.html:39 */
}

@media (max-width: 1180px) {
  .night,
  #reverb-features-band { grid-template-columns: 1fr 1fr 1fr; }
  .night__intro,
  #reverb-features-intro { grid-column: 1 / -1; }
  /* mockup: .night::before, .night::after reflow to a 300px top band
     (index.html:614-615); ::before maps to the real .night__bg container */
  .night__bg,
  #reverb-features-bg,
  .night::after,
  #reverb-features-band::after { width: 100%; bottom: auto; height: 300px; }
  .night::after,
  #reverb-features-band::after { background: linear-gradient(180deg, rgba(13, 13, 13, 0.45) 0%, #0D0D0D 96%); }
}
@media (max-width: 960px) {
  .night,
  #reverb-features-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .night,
  #reverb-features-band { grid-template-columns: 1fr; padding: 24px; }
  .night__title,
  .night-copy__heading { font-size: 30px; }
}
/* SECTION:features END */

/* SECTION:event-layout START */
/* Source: build/event.html SECTION:page-glow (event.html:84-91), SECTION:
   back-link (event.html:93-107), SECTION:layout (event.html:109-115),
   responsive (event.html:666). Rules copied verbatim per Iron Rule 51 with
   comma-prefixed live mappings. Live DOM notes:
   - The mockup's div.page-top > main.container pair is ONE boxed Elementor
     container #reverb-event-top (main.page-top, boxed 1328, pad 0 24) -
     the glow paints full-width on the element, content sits in the inner.
   - #reverb-event-main carries css class event-layout; the #id comma
     selector outweighs Elementor's .e-con flex display (Iron Rule 6/16),
     same technique as #reverb-hero > .e-con-inner. */

.page-top {
  position: relative;
  background:
    radial-gradient(900px 420px at 22% 8%, rgba(252, 78, 32, 0.07), transparent 65%),
    radial-gradient(700px 500px at 78% 30%, rgba(252, 78, 32, 0.05), transparent 60%),
    var(--bg);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 36px 0 28px;
  transition: color 0.2s ease, transform 0.2s ease;
  text-decoration: none; /* base fold: event.html:29 */
}
.back-link:hover { color: var(--accent-hover); transform: translateY(-2px); }
.back-link svg { width: 16px; height: 16px; }
/* Live mapping: the mockup's LEADING arrow SVG (event.html:723) renders as
   a currentColor-mask pseudo so it follows the hover color shift
   (event.html:106) - same technique as .drops__view-all::after. */
.back-link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2012H5M12%2019l-7-7%207-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2012H5M12%2019l-7-7%207-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.event-layout,
#reverb-event-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 492px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1180px) {
  .event-layout,
  #reverb-event-main { grid-template-columns: 1fr; }
}
/* SECTION:event-layout END */

/* SECTION:event-hero START */
/* Source: build/event.html SECTION:event-hero (event.html:117-154),
   responsive (event.html:667, 677-679). Rules copied verbatim per Iron
   Rule 51 with comma-prefixed live mappings. Live DOM notes:
   - rfmwpe_section_header component_name 'event-hero-copy' emits
     __eyebrow / __heading / __accent / __desc ('event-hero' itself is
     unusable as component root: the widget root div would inherit this
     grid rule); its widget wrapper carries the mockup .event-hero__body.
   - The artwork is a core image widget whose wrapper carries
     .event-hero__art; the widget nests the img one div deep, hence the
     height chain below (grid align-items stretch fills the column). */

.event-hero,
#reverb-event-hero {
  display: grid;
  grid-template-columns: 444px minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}
.event-hero__art {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
/* Live mapping: img fill through the Elementor image widget's inner div. */
.event-hero__art > div { height: 100%; }
.event-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%; /* base fold: event.html:28 */
  display: block;  /* base fold: event.html:28 */
}
.event-hero__body { padding-top: 26px; }
.event-hero__eyebrow,
.event-hero-copy__eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 18px;
  display: block; /* live mapping: widget emits a span (mockup <p>, event.html:736) */
}
.event-hero__title,
.event-hero-copy__heading {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  font-size: 58px;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 24px; /* margin-bottom 24px (event.html:148) + base fold (event.html:18) */
}
.event-hero__title-accent,
.event-hero-copy__accent { color: var(--accent); }
.event-hero__sub,
.event-hero-copy__desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6; /* base fold: event.html:25 */
  margin: 0;        /* base fold: event.html:18 */
}

@media (max-width: 1180px) {
  .event-hero,
  #reverb-event-hero { grid-template-columns: minmax(260px, 444px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .event-hero,
  #reverb-event-hero { grid-template-columns: 1fr; }
  .event-hero__body { padding-top: 0; }
  .event-hero__title,
  .event-hero-copy__heading { font-size: 52px; }
}
/* SECTION:event-hero END */

/* SECTION:event-meta START */
/* Source: build/event.html SECTION:event-meta (event.html:156-188),
   responsive (event.html:680-684). Rules copied verbatim per Iron Rule 51.
   rfmwpe_icon_band component_name 'event-meta' (cell_layout label_sub)
   emits the mockup class names 1:1 - zero comma-mappings needed; the
   pasted mockup SVGs keep class event-meta__icon. */

.event-meta {
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  margin-top: 40px;
}
.event-meta__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 15px;
  border-left: 1px solid var(--border);
  flex: 1 1 auto;
}
.event-meta__item:first-child { border-left: 0; }
.event-meta__icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.event-meta__label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
.event-meta__sub {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .event-meta { flex-wrap: wrap; }
  .event-meta__item { flex: 0 0 50%; min-width: 0; }
  .event-meta__item:nth-child(odd) { border-left: 0; }
  .event-meta__item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .event-meta__label { white-space: normal; }
}
/* SECTION:event-meta END */

/* SECTION:event-proof START */
/* Source: build/event.html SECTION:social-proof (event.html:190-213) +
   .divider (event.html:214), responsive (event.html:685-687). Rules copied
   verbatim per Iron Rule 51. rfmwpe_social_proof_strip component_name
   'social-proof' emits the mockup class names 1:1 - zero comma-mappings;
   item SVGs are unclassed direct children as in the mockup. The .divider
   rule styles the live EMPTY container identically to the mockup hr. */

.social-proof {
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  margin-top: 26px;
  padding: 16px 24px;
}
.social-proof__going {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 24px;
  border-right: 1px solid var(--border);
}
.social-proof__avatars {
  width: 92px;
  border-radius: 999px;
  flex-shrink: 0;
  max-width: 100%; /* base fold: event.html:28 */
  display: block;  /* base fold: event.html:28 */
}
.social-proof__count {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}
.social-proof__urgency { color: var(--accent); font-size: 13.5px; font-weight: 700; }
.social-proof__items { display: flex; flex: 1; justify-content: space-evenly; gap: 10px; padding-left: 14px; }
.social-proof__item { display: flex; align-items: center; gap: 10px; }
.social-proof__item svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.social-proof__item span { color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.4; }
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 34px 0;
}

@media (max-width: 760px) {
  .social-proof { flex-direction: column; align-items: flex-start; gap: 18px; }
  .social-proof__going { border-right: 0; padding-right: 0; }
  .social-proof__items { flex-direction: column; padding-left: 0; gap: 14px; }
}
/* SECTION:event-proof END */

/* SECTION:event-about START */
/* Source: build/event.html SECTION:about (event.html:216-226). Rules copied
   verbatim per Iron Rule 51 with comma-prefixed live mappings:
   - h2.about__label = rfmwpe_section_header component 'about' __heading.
   - Each paragraph is its own rfmwpe_heading p widget, so the mockup's
     sibling margin rhythm (margin-bottom 20px + p:last-child reset,
     event.html:225-226) cannot ride the p elements across widget wrappers;
     it renders as the .about__text container's native 20px flex gap and
     the p margins are zeroed here (live fold, byte-identical spacing). */

.about__label,
.about__heading {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 20px;              /* margin-bottom 20px (event.html:224) + base fold (event.html:18) */
  font-family: var(--font-body); /* base fold: h2 inherits body font (event.html:23) */
}
.about__text p {
  max-width: 560px;
  margin: 0; /* live fold: 20px rhythm = container flex gap (see header note) */
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6; /* base fold: event.html:25 */
}
/* SECTION:event-about END */