/* ClownRP: a clearer entrance to the city, using the existing brand and photographs. */
.clownrp-skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; background: #e9c786; color: #16120d; padding: 12px 20px; font-weight: 700; }
.clownrp-skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #e9c786; outline-offset: 5px; }
.clownrp-nav { padding: 18px 0; background: rgba(8, 7, 6, .9); backdrop-filter: blur(16px); border-bottom-color: #d4b07026; }
.clownrp-nav > div:first-child { max-width: 1440px; padding-inline: clamp(24px, 4vw, 64px); gap: 28px; }
.clownrp-nav .clownrp-nav-brand { flex-shrink: 0; gap: 10px; }
.clownrp-nav-brand .clownrp-logo { width: 42px; height: 42px; display: block; filter: none; transform: none; }
.clownrp-nav-brand > span { white-space: nowrap; font-size: 20px; letter-spacing: -.04em; }
.clownrp-nav-links { gap: clamp(14px, 1.3vw, 24px); }
.clownrp-nav-links .clownrp-nav-link { font-size: 12px; letter-spacing: .02em; color: #d7cec1; }
.clownrp-nav-links .clownrp-nav-link[aria-current] { color: #edd19f; }
.clownrp-nav-discord { margin-left: 6px; padding-left: 0; border: 0; flex-shrink: 0; }
.clownrp-nav-discord a { padding: 0 20px; height: 42px; color: #15110b; background: #e3bd78; border-color: #e3bd78; font-size: 12px; letter-spacing: 0; box-shadow: none; gap: 8px; }
.clownrp-nav-discord a:hover { color: #15110b; background: #f1d39b; }
.clownrp-nav.is-scrolled, .clownrp-nav.is-open { padding: 14px 0; box-shadow: none; }
.clownrp-nav-toggle { position: relative; z-index: 51; }
.clownrp-nav-brand { position: relative; z-index: 51; }
.clownrp-mobile-menu { padding: 90px 24px 32px; }
.clownrp-mobile-menu > div { gap: 0; }
.clownrp-mobile-menu .clownrp-nav-link--mobile { font-size: 16px; letter-spacing: .05em; padding-block: 15px; }
.clownrp-mobile-menu .clownrp-button { margin-top: 24px; padding: 18px; color: #15110b; background: #e3bd78; }
.clownrp-home { background: #090807; --clownrp-muted: #c4bdb3; }
.clownrp-home section { scroll-margin-top: 100px; }
.clownrp-home #top { height: auto; min-height: min(850px, 100svh); padding: 145px max(24px, calc((100vw - 1280px) / 2)) 90px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.clownrp-home #top > .absolute { left: 22%; }
.clownrp-home .clownrp-hero-slideshow { --hero-slide-opacity: .96; }
.clownrp-home .clownrp-hero-overlay { background: linear-gradient(90deg, #090807 0%, rgba(9,8,7,.86) 8%, rgba(9,8,7,.36) 38%, rgba(9,8,7,.04) 75%), linear-gradient(0deg, #090807 0%, transparent 18%, transparent 80%, rgba(9,8,7,.25) 100%); }
.clownrp-home .clownrp-hero-first-media img, .clownrp-home .clownrp-hero-slide { object-position: 40% center; background-position: 40% center; }
.clownrp-home-hero-content { position: relative; z-index: 10; width: 56%; max-width: 680px; }
.clownrp-home-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 1px solid #e3bd7850; border-radius: 99px; padding: 8px 16px; background: #090807a6; font-size: 12px; letter-spacing: .06em; }
.clownrp-home-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4b070; }
.clownrp-home-status.is-online .clownrp-home-status-dot { background: #90d2a4; }
.clownrp-home-status.is-offline .clownrp-home-status-dot { background: #d8a99a; }
.clownrp-home-status [data-server-label] { color: #bde0c6; font-weight: 700; font-size: 11px; }
.clownrp-home-status.is-offline [data-server-label] { color: #e3bab0; }
.clownrp-home-status-count { padding-left: 10px; border-left: 1px solid #ffffff24; color: #f8f1e7; font-variant-numeric: tabular-nums; }
.clownrp-home-status-unit { font-size: 10px; color: #c4bdb3; }
.clownrp-home-kicker { color: #e5c389; font-size: 12px; font-weight: 700; letter-spacing: .24em; margin: 26px 0 18px; }
.clownrp-home-title { font-size: clamp(88px, 8.6vw, 138px); font-weight: 900; letter-spacing: -.065em; line-height: .9; margin: 0 0 28px; color: #fcf8ef; }
.clownrp-home-title span { display: block; }
.clownrp-home-tagline { font-size: clamp(21px, 2.15vw, 30px); font-weight: 700; line-height: 1.5; letter-spacing: .015em; }
.clownrp-home-description { margin-top: 14px; font-size: 15px; line-height: 1.9; max-width: 510px; color: #ddd5c9; }
.clownrp-home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.clownrp-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 14px 26px; font-size: 14px; font-weight: 700; border-radius: 4px; transition: background .2s, border-color .2s; }
.clownrp-home-button--primary { color: #19130d; background: #e3bd78; border: 1px solid #e3bd78; }
.clownrp-home-button--primary:hover { background: #f1d39b; }
.clownrp-home-button--outline { color: #fff7e8; border: 1px solid #e3bd7870; background: #09080770; }
.clownrp-home-button--outline:hover { background: #33281b; border-color: #e3bd78; }
.clownrp-hero-pause { position: absolute; right: max(24px, calc((100vw - 1280px) / 2)); bottom: 32px; z-index: 10; color: #eee4d7; background: #090807b3; border: 1px solid #ffffff38; padding: 8px 12px; border-radius: 4px; font-size: 12px; }
.clownrp-hero-slideshow.is-paused > * { animation-play-state: paused; }
.clownrp-home-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1280px; margin-inline: auto; padding: 26px 0; border-block: 1px solid #d4b07035; }
.clownrp-home-shortcuts a { display: flex; align-items: center; gap: 20px; padding: 8px 36px; border-right: 1px solid #d4b07035; transition: color .2s; }
.clownrp-home-shortcuts a:first-child { padding-left: 0; }
.clownrp-home-shortcuts a:last-child { border: 0; }
.clownrp-home-shortcuts a:hover strong { color: #e3bd78; }
.clownrp-home-shortcuts svg { color: #e3bd78; flex-shrink: 0; width: 30px; height: 30px; }
.clownrp-home-shortcuts strong { font-size: 16px; display: block; line-height: 1.6; }
.clownrp-home-shortcuts small { font-size: 13px; color: #c4bdb3; display: block; margin-top: 3px; }
.clownrp-shortcut-arrow { margin-left: auto; color: #e3bd78; }
.clownrp-home-container { max-width: 1280px; margin-inline: auto; }
.clownrp-home-live { padding: 76px max(24px, calc((100vw - 1280px) / 2)) 64px; background: #11100e; }
.clownrp-live-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.clownrp-live-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: clamp(34px, 4.3vw, 62px); font-weight: 900; letter-spacing: -.045em; line-height: 1.15; }
.clownrp-live-heading p { color: #dfd6ca; margin-top: 12px; font-size: 19px; font-weight: 500; }
.clownrp-live-count { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #93bd9459; background: #87b68b0b; color: #b8d9bd; font-size: 13px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.clownrp-live-count > span:first-child { width: 6px; height: 6px; background: #91d89d; border-radius: 50%; }
.clownrp-live-external { flex-shrink: 0; color: #ece1cf; display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid #e3bd7866; padding-block: 8px; font-size: 14px; }
.clownrp-live-external:hover { color: #e3bd78; }
.clownrp-live-external-group { display: flex; flex-wrap: wrap; gap: 20px; }
.clownrp-live-platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.clownrp-live-platforms button { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px; border: 1px solid #4a4031; border-radius: 4px; color: #d1c7b9; font-size: 13px; }
.clownrp-live-platforms button[aria-pressed="true"] { color: #17120d; background: #e3bd78; border-color: #e3bd78; font-weight: 700; }
.clownrp-live-platforms button span { opacity: .85; font-variant-numeric: tabular-nums; }
.clownrp-live-service { position: absolute; left: 12px; bottom: 10px; background: #080808cc; border: 1px solid #ffffff30; color: #fff; border-radius: 3px; padding: 3px 8px; font-size: 11px; }
.clownrp-live-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 20px 0 26px; }
.clownrp-live-toolbar label { display: block; }
.clownrp-live-toolbar label > span { display: block; font-size: 12px; color: #c4bdb3; margin-bottom: 7px; }
.clownrp-live-search { flex: 1; max-width: 360px; min-width: 180px; }
.clownrp-live-toolbar input, .clownrp-live-toolbar select, .clownrp-live-refresh { height: 44px; color: #eee8de; background: #1b1915; border: 1px solid #4a4031; border-radius: 4px; padding: 0 14px; font: inherit; font-size: 14px; }
.clownrp-live-toolbar input { width: 100%; }
.clownrp-live-toolbar input::placeholder { color: #a9a195; }
.clownrp-live-toolbar select { width: 175px; }
.clownrp-live-refresh { cursor: pointer; }
.clownrp-live-refresh:hover { border-color: #e3bd78; }
.clownrp-live-refresh:disabled { opacity: .6; cursor: wait; }
.clownrp-live-updated { margin-left: auto; color: #bdb4a6; font-size: 12px; padding-bottom: 12px; }
.clownrp-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.clownrp-home-live .clownrp-twitch-card { border-radius: 6px; background: transparent; border: 1px solid #3a3226; box-shadow: none; transition: border-color .2s; }
.clownrp-home-live .clownrp-twitch-card:hover { transform: none; border-color: #d4b070a6; box-shadow: none; }
.clownrp-home-live .clownrp-twitch-card[hidden], .clownrp-home-live [hidden] { display: none !important; }
.clownrp-home-live .clownrp-twitch-thumb { background: #26211a; }
.clownrp-home-live .clownrp-twitch-thumb img { transition: transform .3s; }
.clownrp-home-live .clownrp-twitch-live { left: 12px; top: 12px; border-radius: 3px; background: #d72343; padding: 4px 8px; font-size: 11px; letter-spacing: .06em; }
.clownrp-live-viewers { position: absolute; top: 12px; right: 12px; padding: 5px 9px; color: #fff; background: #080808b8; font-size: 11px; border-radius: 3px; }
.clownrp-home-live .clownrp-twitch-body { padding: 16px 18px; gap: 12px; }
.clownrp-home-live .clownrp-twitch-title { font-size: 15px; line-height: 1.6; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 48px; }
.clownrp-home-live .clownrp-twitch-meta { display: flex; justify-content: space-between; gap: 12px; color: #c4bdb3; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; }
.clownrp-live-notice, .clownrp-live-empty { color: #ded4c5; background: #241e17; border: 1px solid #736042; padding: 22px; margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
.clownrp-live-empty { margin-top: 18px; }
.clownrp-live-footnote { color: #bfb6a8; font-size: 12px; margin-top: 28px; line-height: 1.8; }
.clownrp-live-footnote a { color: #e6c993; text-decoration: underline; text-underline-offset: 4px; }
.clownrp-home-sections > section + section { margin-top: 0 !important; }
.clownrp-home-sections { padding-bottom: 0; }
.clownrp-home #rules, .clownrp-home #updates, .clownrp-home #events { padding-block: 64px; }
.clownrp-home #events > div:last-child { padding-inline: 24px; }
.clownrp-home #rules .mb-16 { margin-bottom: 36px; }
.clownrp-home #rules p { font-size: 15px; line-height: 1.8; }
.clownrp-home #news { padding: 72px max(24px, calc((100vw - 1280px) / 2)); }
.clownrp-home #news > .flex { padding-bottom: 24px; margin-bottom: 30px; gap: 16px; }
.clownrp-home #news h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.3; }
.clownrp-home #news > .grid { gap: 24px; }
.clownrp-home #news .grid > a { min-width: 0; }
.clownrp-home #news h3 { font-size: 18px; font-weight: 700; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clownrp-home #news picture { width: 100%; height: 100%; display: block; }
.clownrp-home #news .grid > a > div:first-child { border-radius: 6px; }
.clownrp-home #news .tracking-\[0\.25em\] { letter-spacing: .05em; }
.clownrp-home #events .grid > a { border-radius: 6px; box-shadow: none; }
.clownrp-home #events .grid > a:hover { transform: none; }
.clownrp-home #events h3 { font-size: 17px; line-height: 1.7; }
.clownrp-home #events .mb-12 { margin-bottom: 28px; }
.clownrp-home-join { padding: 80px 24px !important; }
.clownrp-home-join h2 { font-size: clamp(27px, 3vw, 42px); line-height: 1.6; font-weight: 700; }
.clownrp-home-join .space-y-12 > * + * { margin-top: 24px; }
.home footer { padding: 48px 24px; }
.home footer > div { gap: 32px; }
.home footer p { font-size: 12px; letter-spacing: .02em; }
@media (max-width: 1399px) {
  .clownrp-nav-links { gap: 12px; }
  .clownrp-nav-links .clownrp-nav-link { font-size: 11px; }
  .clownrp-nav > div:first-child { padding-inline: 24px; gap: 20px; }
  .clownrp-home-shortcuts { margin-inline: 24px; }
}
@media (max-width: 1199px) {
  .clownrp-nav-links { display: none; }
  .clownrp-nav-toggle { display: block; }
  .clownrp-mobile-menu { display: block; }
  .clownrp-mobile-menu[hidden] { display: none; }
  .clownrp-home-live { padding-top: 56px; }
  .clownrp-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clownrp-home-shortcuts a { padding-inline: 24px; gap: 14px; }
}
@media (max-width: 767px) {
  .clownrp-nav { padding-block: 12px; }
  .clownrp-nav-brand .clownrp-logo { width: 36px; height: 36px; }
  .clownrp-nav-brand > span { font-size: 18px; }
  .clownrp-home #top { min-height: 650px; padding: 120px 24px 70px; align-items: flex-start; }
  .clownrp-home #top > .absolute { left: 0; }
  .clownrp-home .clownrp-hero-first-media img, .clownrp-home .clownrp-hero-slide { object-position: 40% center; background-position: 40% center; }
  .clownrp-home .clownrp-hero-slideshow { --hero-slide-opacity: .7; }
  .clownrp-home .clownrp-hero-overlay { background: linear-gradient(90deg, #090807d6, #09080766), linear-gradient(0deg, #090807 0%, #09080708 80%); }
  .clownrp-home-hero-content { width: 100%; }
  .clownrp-home-title { font-size: clamp(76px, 21vw, 128px); margin-bottom: 24px; }
  .clownrp-home-kicker { font-size: 10px; letter-spacing: .2em; margin-block: 24px 18px; }
  .clownrp-home-tagline { font-size: clamp(19px, 5vw, 25px); }
  .clownrp-home-description { font-size: 14px; max-width: 340px; }
  .clownrp-home-actions { gap: 10px; margin-top: 26px; }
  .clownrp-home-button { min-height: 50px; padding: 12px 16px; font-size: 12px; }
  .clownrp-hero-pause { bottom: 22px; font-size: 11px; }
  .clownrp-home-shortcuts { grid-template-columns: 1fr; padding: 8px 0; }
  .clownrp-home-shortcuts a, .clownrp-home-shortcuts a:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid #d4b07026; }
  .clownrp-home-shortcuts strong { font-size: 15px; }
  .clownrp-home-shortcuts svg { width: 24px; height: 24px; }
  .clownrp-live-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .clownrp-live-heading h2 { gap: 12px; font-size: 36px; }
  .clownrp-live-heading p { font-size: 17px; }
  .clownrp-live-count { font-size: 11px; padding: 6px 9px; }
  .clownrp-live-external { font-size: 13px; }
  .clownrp-live-toolbar { gap: 12px 8px; padding-top: 8px; }
  .clownrp-live-search { flex-basis: 100%; max-width: none; }
  .clownrp-live-updated { width: 100%; margin: 0; padding-bottom: 0; font-size: 11px; }
  .clownrp-live-grid { grid-template-columns: 1fr; gap: 20px; }
  .clownrp-home-live { padding-inline: 24px; padding-block: 44px; }
  .clownrp-home-live .clownrp-twitch-title { min-height: 0; }
  .clownrp-home #rules, .clownrp-home #updates, .clownrp-home #events, .clownrp-home #news { padding-block: 48px; }
  .clownrp-home #news > .grid { gap: 32px; }
  .clownrp-home #news h3 { font-size: 17px; }
  .clownrp-home-join { padding: 58px 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clownrp-home *, .clownrp-nav * { animation: none !important; transition: none !important; }
  .clownrp-home .clownrp-hero-first-media { opacity: var(--hero-slide-opacity); }
  .clownrp-home .clownrp-hero-slide, .clownrp-hero-pause { display: none; }
}

.clownrp-home-photos, .clownrp-home-updates { padding: 72px max(24px, calc((100vw - 1280px) / 2)); }
.clownrp-home-photos { background: #0c0b09; }
.clownrp-home #updates.clownrp-home-updates { background: #15120e; border-block: 1px solid #d4b07026; padding-block: 72px; }
.clownrp-content-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; }
.clownrp-content-kicker { display: block; color: #e3bd78; font-size: 11px; font-weight: 700; letter-spacing: .18em; margin-bottom: 12px; }
.clownrp-content-heading h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.4; font-weight: 700; letter-spacing: -.035em; }
.clownrp-content-heading p { font-size: 14px; line-height: 1.9; color: #c8bfb1; margin-top: 12px; }
.clownrp-content-more { display: inline-flex; align-items: center; gap: 18px; padding-block: 9px; border-bottom: 1px solid #e3bd7866; color: #eee2ce; font-size: 13px; white-space: nowrap; }
.clownrp-content-more:hover { color: #e3bd78; }
.clownrp-photo-grid, .clownrp-update-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.clownrp-home-photo { min-width: 0; margin: 0; }
.clownrp-photo-image { display: block; position: relative; overflow: hidden; background: #201a14; border-radius: 4px; aspect-ratio: 3 / 2; }
.clownrp-photo-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.clownrp-photo-image:hover img { transform: scale(1.025); }
.clownrp-photo-image > span { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; color: #fff; background: #080808c9; border: 1px solid #ffffff30; border-radius: 3px; font-size: 11px; }
.clownrp-home-photo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #c8bfb1; margin-top: 14px; }
.clownrp-home-photo figcaption > span { overflow-wrap: anywhere; }
.clownrp-home-photo time { font-variant-numeric: tabular-nums; }
.clownrp-home-update { min-width: 0; border-top: 2px solid #be9354; background: #1d1913; }
.clownrp-home-update > a { display: flex; flex-direction: column; height: 100%; padding: 26px; transition: background .2s; }
.clownrp-home-update > a:hover { background: #292117; }
.clownrp-home-update time { font-size: 12px; color: #d9bc8d; font-variant-numeric: tabular-nums; }
.clownrp-home-update h3 { font-size: 19px; line-height: 1.65; font-weight: 700; margin-top: 18px; overflow-wrap: anywhere; }
.clownrp-home-update p { font-size: 14px; line-height: 1.85; color: #cdc3b4; margin-block: 14px 24px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clownrp-update-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #e3bd78; margin-top: auto; padding-top: 14px; border-top: 1px solid #d4b07026; }
.clownrp-home-join > div > .space-y-8 p { font-style: normal; font-family: inherit; font-size: 15px; line-height: 1.9; }
.clownrp-home-join > div > .space-y-8 > * + * { margin-top: 18px; }
.clownrp-home-join > div > .flex:not(.pt-12) { gap: 16px; }
.clownrp-home-join > div > .flex:not(.pt-12) > a { min-height: 56px; height: auto; padding: 16px 30px; font-size: 13px; letter-spacing: .04em; }
@media (max-width: 1023px) {
  .clownrp-photo-grid, .clownrp-update-grid { gap: 18px; }
  .clownrp-home-update > a { padding: 22px; }
  .clownrp-home-update h3 { font-size: 17px; }
}
@media (max-width: 767px) {
  .clownrp-home-photos, .clownrp-home #updates.clownrp-home-updates { padding-block: 48px; }
  .clownrp-content-heading { gap: 16px; margin-bottom: 24px; }
  .clownrp-content-heading h2 { font-size: 27px; }
  .clownrp-content-heading p { font-size: 13px; }
  .clownrp-photo-grid, .clownrp-update-grid { grid-template-columns: 1fr; gap: 28px; }
  .clownrp-home-photo figcaption { margin-top: 10px; }
  .clownrp-home-update > a { padding: 24px; }
  .clownrp-home-update h3 { font-size: 19px; margin-top: 12px; }
  .clownrp-home-update p { margin-bottom: 20px; }
}
