/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Tags: responsive-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,featured-images,full-width-template,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready
Version: 3.0.27.1552108555
Updated: 2019-03-09 05:15:55

*/

.ds-vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Events CPT — [unsilent_events] / [unsilent_events_archive] row styling,
   matching the live site's lime date-badge + city/time layout. */
.un-events-list {
    max-width: 700px;
    margin: 0 auto;
}

.un-event-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* The whole row is the click target: the city link is stretched over it, and
   the arrow at the right edge says so. */
.un-event-row .un-event-city::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.un-event-city:focus-visible {
    outline: none;
}

.un-event-city:focus-visible::after {
    outline: 2px solid #96ca6a;
    outline-offset: -2px;
    border-radius: 4px;
}

.un-event-arrow {
    margin-left: auto;
    flex: 0 0 auto;
    padding-right: 8px;
    color: #96ca6a;
    font-family: "Archivo Black", sans-serif;
    font-size: 34px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.un-event-row:hover .un-event-arrow {
    transform: translateX(4px);
}

.un-event-row:hover .un-event-city {
    text-decoration: underline;
}

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

.un-event-row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.un-event-date-badge {
    flex: 0 0 auto;
    width: 80px;
    background-color: #96ca6a;
    color: #0f0c2f;
    text-align: center;
    padding: 10px 0;
    border-radius: 4px;
    font-family: "Archivo Black", sans-serif;
    line-height: 1.2;
}

.un-event-date-month {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.un-event-date-day {
    display: block;
    font-size: 28px;
}

.un-event-date-badge-tbd {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.un-event-date-tbd {
    display: block;
    font-size: 14px;
    letter-spacing: 0.05em;
    padding: 6px 0;
}

.un-event-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.un-event-city {
    font-family: "Archivo Black", sans-serif;
    color: #68b4db;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

a.un-event-city:hover {
    text-decoration: underline;
}

.un-event-venue {
    color: #ffffff;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 15px;
    opacity: 0.85;
}

.un-event-time {
    color: #ffffff;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.un-events-year {
    color: #ffffff;
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 10px;
}

.un-events-empty {
    color: #ffffff;
    font-family: "Alegreya Sans", sans-serif;
    text-align: center;
    padding: 40px 0;
}

/* Chronological / A-Z-by-city sort toggle above an events list — see
   js/events-sort-toggle.js, which does the actual re-sorting. */
.un-events-sort-toggle {
    max-width: 700px;
    margin: 0 auto 16px;
    display: flex;
    gap: 8px;
}

.un-events-sort-btn {
    font-family: "Archivo Black", sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
}

.un-events-sort-btn:hover {
    border-color: #68b4db;
}

.un-events-sort-btn.is-active {
    background-color: #68b4db;
    border-color: #68b4db;
    color: #0f0c2f;
}

/* "Past Years" links list — on /schedule (pointing into each
   /schedule-{year} archive) and repeated on each archive page itself so
   you can hop between years without going back to /schedule first. */
.un-events-years {
    max-width: 700px;
    margin: 20px auto 0;
}

.un-events-years-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.un-events-years-list a {
    display: inline-block;
    color: #68b4db !important;
    font-family: "Archivo Black", sans-serif;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 8px 16px;
}

.un-events-years-list a:hover {
    border-color: #68b4db;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .un-event-row {
        gap: 16px;
    }
    .un-event-date-badge {
        width: 64px;
    }
    .un-event-city {
        font-size: 17px;
    }
}

/* Single event page — /schedule/{event-slug} */
.un-event-single {
    max-width: 700px;
    margin: 0 auto;
    color: #ffffff !important;
    font-family: "Alegreya Sans", sans-serif;
}

.un-event-back {
    display: inline-block;
    color: #ffffff !important;
    font-family: "Alegreya Sans", sans-serif;
    text-decoration: none;
    opacity: 0.8;
    margin-bottom: 24px;
}

.un-event-back:hover {
    opacity: 1;
    text-decoration: underline;
}

.un-event-single-city {
    font-family: "Archivo Black", sans-serif;
    color: #68b4db !important;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.un-event-single-datetime,
.un-event-single-schedule {
    /* Match the description's font size (20px, the block's own inherited
       base) rather than running smaller — date/time and the itinerary
       read as part of the same body copy, not a separate label style. */
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.un-event-single-schedule {
    /* The date/time line above is already bold via its own <strong> tags
       (server-rendered); the itinerary text has no such wrapping, so bump
       its weight to match — same bold-white treatment the old Squarespace
       site used for this line. */
    font-weight: 700;
}

.un-event-single-presenter {
    color: #96ca6a !important;
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 16px;
}

.un-event-single-sponsors {
    margin-bottom: 24px;
}

.un-event-single-sponsors p {
    margin: 0;
    padding-bottom: 0;
    line-height: 1.7;
}

.un-event-single-sponsors-label,
.un-event-single-address p:first-child {
    /* "Sponsored By:" and "Meeting place:" labels — same green, all-caps
       Archivo Black treatment as the "Presented by" line, so the three
       section labels stand out from the body text. */
    color: #96ca6a;
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
}

.un-event-single-address {
    margin-bottom: 24px;
}

.un-event-single-address p:not(:first-child) {
    opacity: 0.9;
}

.un-event-single-address p {
    margin: 0;
    /* Divi's parent theme gives every <p> a 1em padding-bottom, which made
       each address line sit a full paragraph-gap apart. Zero it so the lines
       space like wrapped lines inside the description (line-height 1.7);
       the block's own margin-bottom supplies the gap after it. */
    padding-bottom: 0;
    line-height: 1.7;
}

/* Side margins are deliberate, not decorative: a full-width map iframe
   swallows touch-drag as map-pan instead of page-scroll on mobile, so a
   reader whose thumb lands on the map gets stuck. Keeping a visible
   strip of page background on both sides gives a touch-scroll target
   that isn't inside the iframe, even though the map itself (now the
   last thing on the page, see un_event_single_content()) is a dead end
   either way once you reach it. */
.un-event-map {
    margin: 24px 20px;
    border-radius: 4px;
    overflow: hidden;
}

.un-event-map iframe {
    display: block;
    width: 100%;
}

.un-event-single-description {
    margin-bottom: 24px;
    line-height: 1.7;
}

.un-event-single-description a {
    color: #68b4db !important;
}

.un-event-single-contact {
    margin-bottom: 24px;
}

.un-event-single-contact a {
    color: #96ca6a !important;
}

.un-event-cta {
    text-align: center;
}

.un-event-cta-button {
    display: inline-block;
    background-color: #96ca6a;
    color: #0f0c2f !important;
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 6px;
}

.un-event-cta-button:hover {
    opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Landing splash page (post ID 47, page_on_front) — full-bleed fixes */
/* ------------------------------------------------------------------ */

/* Global Body (post 41) wraps every page's Post Content in its own
   outer Divi section, which carries Divi's default section padding
   (~50-54px top/bottom) and a global dark-navy background color. On
   every other page that's an invisible, harmless gap below the real
   (visible) header. On the Landing page the "header" is an explicit
   0-height Theme Builder section (see empty header/footer layouts),
   so that default wrapper padding is what was rendering as a solid
   navy/white-looking bar above and below the splash image instead of
   letting it run edge-to-edge. Scope the fix to this page only —
   don't touch Global Body's own markup/settings, which every other
   page still relies on. */
body.page-id-47 #page-container,
body.page-id-47 #et-main-area,
body.page-id-47 #main-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* The empty header/footer Theme Builder layouts (50, 55) force their own
   inner Divi section to min-height/height:0, but that doesn't zero out
   that section's PADDING — and below the 981px breakpoint Divi's generic
   responsive section padding (e.g. `.et_pb_section{padding:50px 0}` /
   `54px 0`) still applies since it targets a different CSS property than
   the height override, reintroducing a solid-color bar exactly the height
   of that leftover padding. Zero the header/footer tag itself (and its
   inner section) directly so no responsive padding can sneak back in at
   any width. */
body.page-id-47 header.et-l--header,
body.page-id-47 footer.et-l--footer,
body.page-id-47 header.et-l--header .et_pb_section,
body.page-id-47 footer.et-l--footer .et_pb_section {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
}

body.page-id-47 .et-l--body > .et_builder_inner_content > .et_pb_section,
body.page-id-47 .et-l--body > .et_builder_inner_content > .et_pb_section > .et_pb_row,
body.page-id-47 .et-l--body > .et_builder_inner_content > .et_pb_section > .et_pb_row > .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: none !important;
}

/* The real cause of the visible "boxed" gap/letterboxing: Divi's generic
   `.et_pb_row:not([class*=et_flex_column]){width:var(--content-width);
   max-width:var(--content-max-width);margin:auto}` rule still matches our
   *flex* rows (their class list contains "et_flex_row", not
   "et_flex_column", so the :not() doesn't exclude them) and boxes Global
   Body's own wrapper row to the site's default content width (~1080px).
   Since the Landing page's real splash section lives *inside* that boxed
   wrapper (via the Post Content module), it never actually reaches full
   viewport width no matter what its own settings say. Force the wrapper
   row/column back to 100% so the nested splash section can be truly
   full-bleed. */
body.page-id-47 .et-l--body > .et_builder_inner_content > .et_pb_section > .et_pb_row,
body.page-id-47 .et-l--body > .et_builder_inner_content > .et_pb_section > .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
}

/* The Landing panel (logo, tagline, ENTER, player) is one Divi text module —
   its background, padding, corners, width, position and text sizes are all
   ordinary settings in the Divi builder (page "Landing"), not CSS. Only the
   SoundCloud player widget itself is styled in this file (un-sc-* below). */

/* Global Footer — center the social icon row.
   Divi 5's flex-based module layout means the module's own "Module Alignment"
   (text-align:center utility classes) has no visual effect on a flex container's
   children — flex items are centered with justify-content, not text-align. The
   builder UI doesn't expose a justify-content control for this module, so this
   is scoped site-wide (not page-specific) since the footer is a Theme Builder
   template shared by every page. */
footer.et-l--footer .et_pb_social_media_follow {
    justify-content: center;
}

/* Participate page (post 11) — Track 1-4 buttons (Stream a Track /
   Download a Track), module classes et_pb_button_2 through
   et_pb_button_9. FOUR stacked gotchas here, all confirmed via
   getComputedStyle()/getBoundingClientRect() in a live browser session
   (reading the generated CSS text alone was actively misleading — the
   rule can be present and "winning" the cascade and still not visually
   apply, see #4), all worth remembering for future Divi 5.13 work:
   1) Divi's own base stylesheet ships
      `.et_pb_module:not(.et_block_module){max-width:max-content}`,
      which applies to ANY module — not just the button, but its parent
      `divi/group` container too (it also carries the `et_pb_module`
      class). That shrink-wraps the GROUP to its content width.
   2) The module's own `width:80%` (set via block content,
      module.decoration.sizing) DOES generate the expected
      `.et_pb_button_2{width:80%}` rule — but Divi 5.13 puts it in the
      *deferred* per-page stylesheet
      (`et-core-unified-...-deferred-N.min.css`), loaded async (looked
      like a viewport/intersection trigger). Observed loading, then NOT
      present in `document.styleSheets` moments later on a fresh reload —
      genuinely unreliable. (Re-tested 2026-09-27: the *group's* own
      `flexDirection`/`alignItems`/`rowGap` layout, set the same way via
      module.decoration.layout, renders fine without CSS — confirmed by
      removing those 4 properties from this rule and reloading. Only the
      per-button width is the actual bug; the CSS below has been trimmed
      to just that.)
   3) The real, final blocker: Divi wraps every button `<a class="
      et_pb_button">` in its own `<div class="et_pb_button_module_wrapper
      et_pb_button_N_wrapper">`, and THAT wrapper div — not the `<a>` tag
      — is the actual flex item inside the `divi/group` container. With
      `align-items:center` (not the flex default `stretch`), a flex item
      with no explicit width shrink-wraps to its own content. Setting
      `width:80%` on the inner `<a>` only gives it a percentage of its
      immediate containing block, which is the STILL-shrink-wrapped
      wrapper div — a circular sizing dependency that converges back to
      ~content width no matter what percentage or `!important` is used on
      the `<a>` itself. Confirmed by setting `element.style.width` with
      `!important` priority directly via JS on the `<a>` — even that had
      zero visual effect, proving the constraint wasn't a stylesheet
      cascade/specificity problem at all, but this wrong-element problem.
      The fix has to size the WRAPPER div, not just the inner `<a>`.
   4) Conclusion: don't fight Divi's generated CSS for this — rebuild the
      whole button-group layout as fully self-contained rules in the
      child theme's always-synchronously-loaded stylesheet, sizing both
      the wrapper (the real flex item) and the inner `<a>` (100% of its
      now-correctly-sized wrapper), instead of layering overrides on top
      of an async, shrink-wrapped foundation.
   Scoped to these two groups + 8 buttons only — not the Apple iOS/
   Android buttons/group, which should keep their natural size/layout. */
body.page-id-11 .et_pb_group_1,
body.page-id-11 .et_pb_group_2 {
    width: 100% !important;
    max-width: none !important;
}

body.page-id-11 .et_pb_button_2_wrapper,
body.page-id-11 .et_pb_button_3_wrapper,
body.page-id-11 .et_pb_button_4_wrapper,
body.page-id-11 .et_pb_button_5_wrapper,
body.page-id-11 .et_pb_button_6_wrapper,
body.page-id-11 .et_pb_button_7_wrapper,
body.page-id-11 .et_pb_button_8_wrapper,
body.page-id-11 .et_pb_button_9_wrapper {
    width: 80% !important;
    max-width: none !important;
}

body.page-id-11 .et_pb_button_2,
body.page-id-11 .et_pb_button_3,
body.page-id-11 .et_pb_button_4,
body.page-id-11 .et_pb_button_5,
body.page-id-11 .et_pb_button_6,
body.page-id-11 .et_pb_button_7,
body.page-id-11 .et_pb_button_8,
body.page-id-11 .et_pb_button_9 {
    width: 100% !important;
    max-width: none !important;
    text-align: center;
    box-sizing: border-box;
}

/* Participate page: the hero band, Step 1/2 boxes, Step 3 photo grid and social icons
   are ordinary Divi module settings now (page "Participate"). What stays in CSS: the
   track-button sizing above (Divi's generated CSS collapses those buttons), plus the
   Step 3 lightbox and the Stream/Download alignment grid below. */

/* Step 3 photo grid lightbox (Participate page). Markup/behavior built by
   js/step3-lightbox.js; this is purely the modal's visual styling. Hidden
   by default (display:none) and shown by adding .un-lightbox-open. */
.un-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
}

.un-lightbox.un-lightbox-open {
    display: flex;
}

.un-lightbox-stage {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.un-lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.un-lightbox-caption {
    background: #000;
    color: #fff;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 14px 20px;
    max-width: 90vw;
    white-space: pre-wrap;
    text-align: center;
}

.un-lightbox-close,
.un-lightbox-prev,
.un-lightbox-next {
    position: fixed;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.un-lightbox-close {
    top: 20px;
    right: 30px;
    font-size: 42px;
}

.un-lightbox-prev,
.un-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    padding: 20px;
}

.un-lightbox-prev {
    left: 10px;
}

.un-lightbox-next {
    right: 10px;
}

@media (max-width: 600px) {
    .un-lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 32px;
    }
    .un-lightbox-prev,
    .un-lightbox-next {
        font-size: 24px;
        padding: 12px;
    }
}

/* Contact page (post ID 12): the intro text + form now sit in a shared
   translucent box for contrast against the background photo. Divi's own
   .et_contact_bottom_container (captcha + Submit) is hardcoded
   flex-wrap:nowrap, which overflowed the box on narrow screens once the
   box's padding reduced the available width — let it wrap there. */
@media (max-width: 480px) {
    body.page-id-12 .et_contact_bottom_container {
        flex-wrap: wrap !important;
        row-gap: 15px;
    }
}

/* Mobile hamburger dropdown menu (.et_mobile_menu, shown below Divi's
   mobile breakpoint). Ships with Divi's stock white background and white
   link text — background wins visually (link color gets overridden by a
   more specific Divi rule elsewhere), leaving near-illegible dark-gray-
   on-white text, and it clashes with the dark-navy design used
   everywhere else on the site regardless. Confirmed via
   getComputedStyle() before fixing: background-color and color were both
   rgb(255,255,255). #0f0c2f matches the site's actual body background
   (getComputedStyle(document.body).backgroundColor) — there's no Divi
   Global Color token for it; it's set as a one-off value, not a
   reusable global color, so match the literal rendered value instead of
   a token. Global (not page-scoped): the Theme Builder header — and its
   mobile menu — is shared by every page. */
.et_mobile_menu {
    background-color: #0f0c2f !important;
}

.et_mobile_menu li {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.et_mobile_menu li a {
    color: #ffffff !important;
}

.et_mobile_menu li a:hover,
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a {
    color: #96ca6a !important;
}

.et_mobile_menu .sub-menu {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #96ca6a !important;
    border-top-width: 3px !important;
}

/* Desktop dropdown — separate markup from the mobile menu above
   (.et-menu, not .et_mobile_menu), Divi's own fullwidth-menu module. */
.et-menu .sub-menu {
    border: 1px solid #96ca6a !important;
    border-top-width: 3px !important;
    /* Divi fixes dropdowns at 240px, wrapping "About Unsilent Night" and
       "2025 Press Release" onto two lines. Size to the widest item instead. */
    width: max-content !important;
    min-width: 240px;
}

.et-menu .sub-menu li {
    /* Divi lays these out inline-block; with a shrink-to-fit parent that
       would put every item side by side, so stack them. */
    display: block !important;
}

.et-menu .sub-menu li,
.et-menu .sub-menu li a {
    width: auto !important;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* SoundCloud mini player — Landing page (front page)                 */
/* ------------------------------------------------------------------ */

/* A custom small play/pause button + link, replacing SoundCloud's own
   bundled visual widget (waveform/artwork, ~300px tall). Real playback
   still happens through SoundCloud's Widget JS API, just driven by our
   own tiny UI instead of their chrome — see js/soundcloud-mini-player.js. */
.un-sc-mini-player {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 16px auto 0;
    justify-content: center;
}

.un-sc-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #96ca6a;
    border: none;
    cursor: pointer;
    color: #0f0c2f;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.un-sc-play-btn:hover {
    opacity: 0.9;
}

.un-sc-play-btn .un-sc-icon-pause {
    display: none;
}

.un-sc-mini-player.is-playing .un-sc-icon-play {
    display: none;
}

.un-sc-mini-player.is-playing .un-sc-icon-pause {
    display: inline;
}

.un-sc-link {
    color: #ffffff !important;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 14px;
    text-decoration: underline;
    opacity: 0.85;
}

.un-sc-link:hover {
    opacity: 1;
}

/* Plain text label beside the button when there is no link to follow
   (Home plays a clip hosted on this site). */
.un-sc-label {
    color: #ffffff;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 16px;
    opacity: 0.85;
}

/* Present in the DOM (the Widget API needs a real iframe to control) but
   not visually taking up space — not display:none, since some browsers
   deprioritize/throttle audio in display:none iframes. */
.un-sc-hidden-widget {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Press Quotes page: each quote is its own Text module — a plain
   <blockquote> plus an attribution paragraph — and its color/size come from
   the module's own Design > Quote Text settings in Divi, so editors never
   touch HTML or classes. The one thing Divi has no setting for is the parent
   theme's default 5px colored left border + margins on every <blockquote>;
   this removes them for every Text module's blockquote (the page's own
   padding/margin settings handle indent and spacing). */
.et_pb_text_inner blockquote {
    border-left: none;
    margin: 0 0 0.3em;
    padding: 0;
}

/* Multi-paragraph quotes (Home > How It All Began): space the paragraphs. */
.et_pb_text_inner blockquote p + p {
    margin-top: 0.8em;
}

/* Phil's long quote (Home > How It All Began) carries one large opening mark and one
   large closing mark instead of a quote mark on every paragraph. They sit inline: the
   opening mark leads the first line, the closing mark ends the last line. Drawn here,
   not typed into the text, so editors only deal with plain paragraphs. The
   .un-long-quote class is set on the module in Divi (Advanced > CSS ID & Classes). */
.un-long-quote blockquote p:first-child::before,
.un-long-quote blockquote p:last-child::after {
    color: #96ca6a;
    font-family: "Archivo Black", sans-serif;
    font-size: 2.6em;
    line-height: 0;
    vertical-align: -0.3em;
}

.un-long-quote blockquote p:first-child::before {
    content: "\201C";
    margin-right: 0.12em;
}

.un-long-quote blockquote p:last-child::after {
    content: "\201D";
    margin-left: 0.12em;
}

/* Participate "Stream a Track" / "Download a Track" — line up the two
   button stacks. The descriptions wrap to different line counts, so the
   buttons started at different heights. On desktop, make the row a 2-column
   grid whose 3 rows (heading, description, buttons) are shared by both
   columns via subgrid: each row is as tall as the taller cell, so the first
   button in each column starts at the same y. Stacked layout (<981px) is
   unchanged. */
@media (min-width: 981px) {
    body.page-id-11 .et_pb_row_5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
        row-gap: 30px;
    }

    body.page-id-11 .et_pb_row_5 > .et_pb_column {
        display: grid !important;
        grid-row: span 3;
        grid-template-rows: subgrid;
        max-width: none !important;
        width: auto !important;
    }
}

/* Home — quotes column centered narrower than the full-width row. Divi row
   width/height/image-fill and row-level layout (justifyContent, margin) are
   all settable in the builder and ARE set there now; only this column's own
   max-width genuinely has no effect when the column is a flex item set to
   fill its row (flexType 24_24) inside a full-bleed row — confirmed by
   testing both "maxWidth" alone and "maxWidth"+"width" together in the
   column's own Divi settings, neither rendered at any window width. */
body.page-id-10 .et_pb_row_4 .et_pb_column {
    max-width: 800px !important;
}

/* Home — CTA buttons row. The page body is capped at 80% of the window, so
   at ~1000-1250px windows the three buttons at their default size (20px
   type, 20px side padding) are wider than the row and wrap to two lines.
   Divi's per-button font-size/padding decoration settings ARE the right
   controls for this in principle, but don't render here: these buttons sit
   inside a Group module, and Divi 5.13 silently drops a nested module's
   font-related decoration once it's one level deeper than a plain
   row > column (same bug documented on the Landing panel above — padding
   alone, via module.decoration.spacing, does render; only the font size
   doesn't). Confirmed by setting button.decoration.font.desktop.value.size
   directly in the block's own JSON and finding it has zero effect. */
@media (min-width: 981px) {
    body.page-id-10 .et_pb_group_0 .et_pb_button {
        font-size: 18px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Schedule page map of this year's locations. */
.un-events-map {
    width: 100%;
    height: 420px;
    margin: 0 0 30px;
    border: 1px solid #68B4DB;
    border-radius: 6px;
    background: #0a0a1f;
    position: relative;
    z-index: 0;
}

.un-events-map .leaflet-popup-content {
    color: #111;
    font-size: 15px;
    line-height: 1.5;
}

.un-events-map .leaflet-popup-content a {
    color: #2a6f99;
    font-weight: bold;
}

@media (max-width: 767px) {
    .un-events-map {
        height: 320px;
    }
}

/* Standard OSM tiles, inverted into a dark palette to match the site
   (markers/popups/controls live in other panes, so they're unaffected). */
.un-events-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(200deg) brightness(0.85) contrast(0.9) saturate(0.7);
}

.un-event-single .un-events-map {
    margin-top: 20px;
}

/* Site-wide: the gap between the header and the start of a page's content
   looked large everywhere (Home, Schedule, About, etc.) — both the shared
   Theme Builder "Body" wrapper section and each page's own first section
   carry Divi's own fluid default top padding (a CSS custom property /
   container-query-based value, not something set per page — none of our
   pages have an explicit top spacing value of their own). Halving both
   here, at each of Divi's own breakpoints, is the one change that affects
   every page consistently rather than patching each page's first section
   individually. Only the TOP padding is touched — bottom padding (spacing
   before the footer) and padding on any section further down a page are
   untouched. */
.et-l--body > .et_builder_inner_content > .et_pb_section,
.et_pb_post_content_0_tb_body .et_builder_inner_content > .et_pb_section:first-child {
    padding-top: 27px !important;
}

@media (max-width: 980px) {
    .et-l--body > .et_builder_inner_content > .et_pb_section,
    .et_pb_post_content_0_tb_body .et_builder_inner_content > .et_pb_section:first-child {
        padding-top: 20px !important;
    }
}

@media (max-width: 767px) {
    .et-l--body > .et_builder_inner_content > .et_pb_section,
    .et_pb_post_content_0_tb_body .et_builder_inner_content > .et_pb_section:first-child {
        padding-top: 14px !important;
    }
}

/* ------------------------------------------------------------------ */
/* In The News — grouped list rows (date / source / headline link)       */
/* ------------------------------------------------------------------ */

.un-press-list {
    max-width: 900px;
    margin: 0 auto;
}

.un-press-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.un-press-row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.un-press-date {
    flex: 0 0 100px;
    color: #96ca6a;
    font-weight: 700;
}

.un-press-source {
    flex: 0 0 170px;
    color: #ffffff;
    font-style: italic;
}

.un-press-title {
    flex: 1 1 auto;
    color: #ffffff;
    /* The headline is the link (there is no separate "More Info" column), so a
       soft underline signals that it is clickable; it firms up on hover. */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 4px;
}

.un-press-title:hover {
    text-decoration-color: #96ca6a;
}

.un-press-title-plain {
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 600px) {
    .un-press-row {
        flex-wrap: wrap;
    }

    .un-press-date {
        flex-basis: auto;
    }

    .un-press-source {
        flex-basis: 100%;
        order: 1;
    }

    .un-press-title {
        order: 2;
        flex-basis: 100%;
    }
}