:root {
  --djd-black: #020303;
  --djd-panel: #080a0a;
  --djd-panel-light: #0d1010;
  --djd-white: #f3f4f1;
  --djd-muted: #a6abaa;
  --djd-muted-dark: #747b79;
  --djd-line: #2b3030;
  --djd-cyan: #2bc4d9;
  --djd-red: #e3342b;
  --djd-green: #29f27f;
  --djd-gold: #f3a712;
  --djd-shell: 1180px;
  --djd-gutter: 40px;
  --djd-display: Arial, Helvetica, sans-serif;
  --djd-editorial: Georgia, "Times New Roman", serif;
  --djd-metadata: "Courier New", Courier, monospace;
}

.page-home,
.page-live,
.page-hype,
.page-mantras,
.page-contact {
  background: var(--djd-black);
  color: var(--djd-white);
}

.page-live,
.page-hype,
.page-mantras,
.page-contact {
  font-family: var(--djd-display);
}

.page-live .live-shell,
.page-hype .hype-shell,
.page-mantras .info-shell,
.page-contact .info-shell {
  width: min(
    var(--djd-shell),
    calc(100% - var(--djd-gutter))
  );
  margin-right: auto;
  margin-left: auto;
}

/* Remove duplicate page branding beneath the shared navigation. */
.page-live > .site-header,
.page-hype > .site-header {
  display: none;
}

/* Canonical dark-page color system. */
.page-live,
.page-hype,
.page-mantras,
.page-contact {
  --black: var(--djd-black);
  --panel: var(--djd-panel);
  --panel-light: var(--djd-panel-light);
  --panel-2: var(--djd-panel-light);
  --white: var(--djd-white);
  --muted: var(--djd-muted-dark);
  --line: var(--djd-line);
  --line-soft: #202525;
  --cyan: var(--djd-cyan);
  --cyan-dim: #218fa0;
  --cyan-dark: #12383d;
  --red: var(--djd-red);
  --green: var(--djd-green);
  --gold: var(--djd-gold);
}

/* Canonical hero rhythm. */
.page-live .live-hero,
.page-hype .hero,
.page-mantras .info-hero,
.page-contact .info-hero {
  padding-top: 76px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--djd-line);
}

/* Display typography. */
.page-live h1,
.page-live h2,
.page-hype h1,
.page-hype h2,
.page-mantras h1,
.page-mantras h2,
.page-contact h1,
.page-contact h2 {
  font-family: var(--djd-display);
  font-weight: 1000;
}

.page-live .hero-kicker,
.page-live .section-kicker,
.page-hype .eyebrow,
.page-hype .section-kicker,
.page-mantras .info-kicker,
.page-contact .info-kicker {
  color: var(--djd-cyan);
  font-family: var(--djd-metadata);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Editorial and explanatory copy. */
.page-live .hero-deck,
.page-hype .hero-copy,
.page-mantras .info-deck,
.page-contact .info-deck {
  max-width: 760px;
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.45;
}

/* Metadata remains monospaced, but never microscopic. */
.page-live .network-status,
.page-live .preview-note,
.page-live .source-card-status,
.page-live .source-card-location,
.page-live .source-card-type,
.page-live .source-card-link,
.page-hype .hero-meta,
.page-hype .live-indicator,
.page-hype .leader-type,
.page-hype .qualified-count,
.page-hype .ranking-labels,
.page-mantras .info-footer,
.page-contact .info-footer {
  font-family: var(--djd-metadata);
  font-size: 11px;
  line-height: 1.45;
}

/* Standard section rhythm and headings. */
.page-live .map-section,
.page-live .sources-section,
.page-hype .leaders-section,
.page-hype .ranking-section,
.page-hype .places-section,
.page-hype .method-section {
  padding-top: 54px;
  padding-bottom: 54px;
  border-bottom-color: var(--djd-line);
}

.page-live .map-section h2,
.page-live .sources-section h2,
.page-hype .section-heading-row h2,
.page-hype .ranking-header h2,
.page-hype .method-section h2 {
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -1.2px;
}

/* Standard dividers and panels. */
.page-live .source-directory,
.page-live .source-card,
.page-live .live-map-shell,
.page-hype .leader-card,
.page-hype .ranking-labels,
.page-hype .ranking-row,
.page-mantras .mantra-grid,
.page-mantras .mantra,
.page-contact .contact-grid,
.page-contact .contact-block {
  border-color: var(--djd-line);
}

/* Readable footers. */
.page-live .site-footer,
.page-hype .site-footer,
.page-mantras .info-footer,
.page-contact .info-footer {
  color: var(--djd-muted-dark);
  font-family: var(--djd-metadata);
  font-size: 11px;
  line-height: 1.5;
}

/* Preserve the advertising page's tan identity. */
.page-advertise {
  background: #f4f1ea;
  color: #0b0b0b;
}

.page-advertise .djd-nav {
  background: #050606;
  color: var(--djd-white);
}

@media (max-width: 720px) {
  :root {
    --djd-gutter: 24px;
  }

  .page-live .live-hero,
  .page-hype .hero,
  .page-mantras .info-hero,
  .page-contact .info-hero {
    padding-top: 54px;
    padding-bottom: 48px;
  }

  .page-live .hero-deck,
  .page-hype .hero-copy,
  .page-mantras .info-deck,
  .page-contact .info-deck {
    font-size: 19px;
  }
}

/* ==========================================================
   PAGE-LEVEL NORMALIZATION
========================================================== */

/* One hero headline scale across feature pages. */
.page-live .live-hero h1,
.page-hype .hero h1,
.page-mantras .info-hero h1,
.page-contact .info-hero h1 {
  max-width: 1050px;
  margin-top: 14px;
  margin-bottom: 24px;
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 1000;
  line-height: .82;
  letter-spacing: -.065em;
}

/* Homepage chrome uses the same type roles. */
.page-home {
  font-family: var(--djd-display);
}

.page-home .tagline-main,
.page-home .tagline-sub,
.page-home .lead-headline,
.page-home .section-heading,
.page-home .story,
.page-home .red-headline {
  font-family: var(--djd-display);
}

.page-home .tagline-sub {
  color: var(--djd-muted-dark);
}

.page-home .updated,
.page-home .story-source,
.page-home .red-source,
.page-home .ad-label,
.page-home .copyright {
  font-family: var(--djd-metadata);
}

.page-home .updated {
  color: var(--djd-muted-dark);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .8px;
}

.page-home .section-heading,
.page-home .trending-heading {
  color: var(--djd-cyan);
  font-size: 14px;
  letter-spacing: 1.5px;
}

.page-home .story-source,
.page-home .red-source {
  font-size: 10px;
  line-height: 1.4;
}

/* Live page */
.page-live .live-hero h1 span {
  color: var(--djd-red);
}

.page-live .network-status {
  color: var(--djd-muted-dark);
}

.page-live .live-map {
  height: 540px;
}

.page-live .filter-button {
  padding: 9px 13px;
  color: var(--djd-muted);
  font-family: var(--djd-metadata);
  font-size: 11px;
}

.page-live .filter-button:hover,
.page-live .filter-button.active {
  border-color: var(--djd-cyan);
  color: var(--djd-white);
}

.page-live .map-legend {
  color: var(--djd-muted);
  font-family: var(--djd-metadata);
  font-size: 10px;
  line-height: 1.4;
}

.page-live .sources-intro {
  max-width: 760px;
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-size: 17px;
  line-height: 1.6;
}

.page-live .source-card {
  min-height: 175px;
  padding: 22px;
}

.page-live .source-card-name {
  margin-top: 14px;
  font-family: var(--djd-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}

.page-live .source-card-location,
.page-live .source-card-type {
  color: var(--djd-muted-dark);
}

.page-live .source-card-link {
  color: var(--djd-cyan);
  font-weight: 900;
}

/* Hype Meter */
.page-hype {
  background:
    radial-gradient(
      circle at 50% -15%,
      #111c1d 0,
      #070909 28%,
      var(--djd-black) 55%
    );
}

.page-hype .hero h1 span {
  -webkit-text-stroke-color: var(--djd-white);
}

.page-hype .hero-meta {
  color: var(--djd-muted-dark);
}

.page-hype .leader-card {
  min-height: 225px;
  padding: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(43, 196, 217, .07),
      transparent 55%
    ),
    var(--djd-panel);
}

.page-hype .leader-rank,
.page-hype .leader-score,
.page-hype .rank-number {
  color: var(--djd-cyan);
}

.page-hype .leader-name {
  font-family: var(--djd-display);
}

.page-hype .leader-type {
  color: var(--djd-muted-dark);
}

.page-hype .category-tab {
  min-height: 36px;
  padding: 9px 13px;
  font-family: var(--djd-display);
  font-size: 11px;
}

.page-hype .category-tab.active {
  border-color: var(--djd-cyan);
  background: var(--djd-cyan);
}

.page-hype .ranking-labels {
  color: var(--djd-muted-dark);
  font-size: 10px;
}

.page-hype .ranking-row {
  min-height: 70px;
}

.page-hype .entity-name {
  font-family: var(--djd-display);
  font-size: 18px;
}

.page-hype .hype-map {
  height: 540px;
}

/* Mantras and Contact */
.page-mantras .info-hero h1 span,
.page-contact .info-hero h1 span {
  color: var(--djd-red);
}

.page-mantras .mantra,
.page-contact .contact-block {
  min-height: 280px;
  padding: clamp(34px, 4vw, 52px);
}

.page-mantras .mantra-number,
.page-contact .contact-label {
  color: var(--djd-cyan);
  font-family: var(--djd-display);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .8px;
}

.page-mantras .mantra h2,
.page-contact .contact-block h2 {
  margin-top: 20px;
  margin-bottom: 16px;
  font-family: var(--djd-display);
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: .96;
  letter-spacing: -.04em;
}

.page-mantras .mantra p,
.page-contact .contact-block p {
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-size: 17px;
  line-height: 1.62;
}

.page-contact .contact-link {
  color: var(--djd-white);
  font-family: var(--djd-display);
  font-size: 18px;
  font-weight: 900;
  text-decoration-color: var(--djd-cyan);
  text-underline-offset: 6px;
}

/* One footer geometry for feature pages. */
.page-live .site-footer,
.page-hype .site-footer {
  width: min(
    var(--djd-shell),
    calc(100% - var(--djd-gutter))
  );
  margin-right: auto;
  margin-left: auto;
  padding: 30px 0;
}

/* Advertising retains tan, but shares the type scale and width. */
.page-advertise > .topbar {
  display: none;
}

.page-advertise .wrap {
  width: min(
    var(--djd-shell),
    calc(100% - 32px)
  );
}

.page-advertise section {
  padding-top: 54px;
  padding-bottom: 54px;
}

.page-advertise .eyebrow,
.page-advertise .section-kicker {
  font-family: var(--djd-metadata);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 1.6px;
}

.page-advertise .body-copy {
  font-family: var(--djd-editorial);
  font-size: 17px;
  line-height: 1.6;
}

/* Responsive normalization */
@media (max-width: 900px) {
  .page-live .live-map,
  .page-hype .hype-map {
    height: 460px;
  }
}

@media (max-width: 720px) {
  .page-live .live-hero h1,
  .page-hype .hero h1,
  .page-mantras .info-hero h1,
  .page-contact .info-hero h1 {
    font-size: clamp(54px, 16vw, 82px);
    letter-spacing: -.055em;
  }

  .page-live .source-card {
    min-height: 160px;
  }

  .page-mantras .mantra,
  .page-contact .contact-block {
    min-height: auto;
    padding: 32px 26px;
  }

  .page-live .live-map,
  .page-hype .hype-map {
    height: 390px;
  }
}

/* ==========================================================
   DJ DIRT LIVE SUBMISSION END CAP
========================================================== */

.page-contact .contact-wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.page-contact .live-submission {
  padding: clamp(38px, 5vw, 64px);
  background:
    linear-gradient(
      115deg,
      rgba(43, 196, 217, .10),
      transparent 58%
    ),
    var(--djd-panel);
}

.page-contact .live-submission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  align-items: end;
  gap: clamp(35px, 6vw, 80px);
}

.page-contact .live-submission h2 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(38px, 4.5vw, 62px);
}

.page-contact .live-submission p {
  max-width: 720px;
}

.page-contact .live-submission-actions {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.page-contact .submission-button {
  display: inline-block;
  padding: 15px 18px;
  border: 2px solid var(--djd-cyan);
  background: var(--djd-cyan);
  color: var(--djd-black);
  font-family: var(--djd-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  text-decoration: none;
  text-transform: uppercase;
}

.page-contact .submission-button:hover,
.page-contact .submission-button:focus-visible {
  border-color: var(--djd-white);
  background: var(--djd-white);
  outline: none;
}

.page-contact .submission-link {
  color: var(--djd-white);
  font-family: var(--djd-display);
  font-size: 14px;
  font-weight: 900;
  text-decoration-color: var(--djd-cyan);
  text-underline-offset: 6px;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .page-contact .live-submission-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
/* ==========================================================
   ELEVATOR NORMALIZATION
========================================================== */

.page-elevator {
  background:
    radial-gradient(
      circle at 50% -15%,
      #11191a 0,
      #060808 30%,
      var(--djd-black) 58%
    );
  color: var(--djd-white);
  font-family: var(--djd-editorial);
  font-weight: 400;
}

.page-elevator .elevator-header {
  padding: 76px 0 64px;
  border-bottom: 1px solid var(--djd-line);
}

.page-elevator .elevator-brand,
.page-elevator .elevator-shell {
  width: min(
    var(--djd-shell),
    calc(100% - var(--djd-gutter))
  );
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

.page-elevator .elevator-shell {
  padding: 54px 0 70px;
}

.page-elevator .elevator-djdirt-link,
.page-elevator .elevator-category,
.page-elevator .elevator-card-meta,
.page-elevator .elevator-meta,
.page-elevator .elevator-card-read,
.page-elevator .elevator-image figcaption,
.page-elevator .elevator-ad,
.page-elevator .elevator-footer {
  font-family: var(--djd-metadata);
}

.page-elevator .elevator-djdirt-link,
.page-elevator .elevator-category {
  color: var(--djd-cyan);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.page-elevator .elevator-title-row {
  margin-top: 14px;
}

.page-elevator .elevator-brand h1 {
  margin: 0;
  color: var(--djd-white);
  font-family: var(--djd-display);
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 1000;
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.page-elevator .elevator-publication-badge {
  width: clamp(78px, 9vw, 112px);
  height: clamp(78px, 9vw, 112px);
}

.page-elevator .elevator-mission {
  max-width: 760px;
  margin-top: 24px;
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 400;
  line-height: 1.55;
}

.page-elevator .elevator-index-intro,
.page-elevator .elevator-card-grid {
  width: min(900px, 100%);
  max-width: none;
}

.page-elevator .elevator-index-intro {
  margin: 0 auto 38px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--djd-line);
}

.page-elevator .elevator-index-intro p {
  margin-top: 10px;
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-size: 18px;
  line-height: 1.62;
}

.page-elevator .elevator-card {
  padding: 38px 0 42px;
  border-bottom: 1px solid var(--djd-line);
}

.page-elevator .elevator-card:first-child {
  padding-top: 0;
}

.page-elevator .elevator-card-image-link {
  margin-bottom: 25px;
}

.page-elevator .elevator-card-image {
  border: 1px solid var(--djd-line);
  background: var(--djd-panel);
}

.page-elevator .elevator-card-meta,
.page-elevator .elevator-meta {
  color: var(--djd-muted-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-elevator .elevator-card h2,
.page-elevator .elevator-headline {
  font-family: var(--djd-display);
  font-weight: 1000;
  letter-spacing: -.04em;
}

.page-elevator .elevator-card h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: .98;
}

.page-elevator .elevator-card h2 a {
  color: var(--djd-white);
  text-decoration: none;
}

.page-elevator .elevator-card h2 a:hover,
.page-elevator .elevator-card h2 a:focus-visible {
  color: var(--djd-cyan);
  outline: none;
}

.page-elevator .elevator-card p,
.page-elevator .elevator-body-copy,
.page-elevator .elevator-dek {
  color: var(--djd-muted);
  font-family: var(--djd-editorial);
  font-weight: 400;
}

.page-elevator .elevator-card p {
  max-width: 780px;
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.65;
}

.page-elevator .elevator-card-read {
  color: var(--djd-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-underline-offset: 5px;
  text-transform: uppercase;
}

.page-elevator .elevator-article {
  width: min(820px, 100%);
  max-width: none;
}

.page-elevator .elevator-headline {
  margin-bottom: 18px;
  color: var(--djd-white);
  font-size: clamp(46px, 6vw, 76px);
  line-height: .96;
}

.page-elevator .elevator-dek {
  font-size: 21px;
  line-height: 1.55;
}

.page-elevator .elevator-body-copy {
  font-size: 18px;
  line-height: 1.72;
}

.page-elevator .elevator-image figcaption {
  color: var(--djd-muted-dark);
  font-size: 11px;
  line-height: 1.5;
}

.page-elevator .elevator-links,
.page-elevator .elevator-soundcloud,
.page-elevator .elevator-footer {
  border-color: var(--djd-line);
}

.page-elevator .elevator-links a,
.page-elevator .elevator-footer a {
  color: var(--djd-cyan);
}

.page-elevator .elevator-footer {
  padding: 30px var(--djd-page-pad) 48px;
  color: var(--djd-muted-dark);
  font-size: 11px;
  line-height: 1.5;
}

/* Advertising keeps its warm paper identity. */
.page-advertise {
  font-family: var(--djd-display);
}

.page-advertise h1,
.page-advertise h2,
.page-advertise h3,
.page-advertise .global-pulse,
.page-advertise .genre-line,
.page-advertise .price,
.page-advertise .independent-price,
.page-advertise .btn {
  font-family: var(--djd-display);
}

.page-advertise .lede,
.page-advertise .same-page {
  font-family: var(--djd-editorial);
  line-height: 1.5;
}

.page-advertise .lede {
  font-size: clamp(20px, 2vw, 25px);
}

.page-advertise .price-note,
.page-advertise .protect,
.page-advertise footer {
  font-family: var(--djd-metadata);
}

@media (max-width: 720px) {
  .page-elevator .elevator-header {
    padding: 54px 0 48px;
  }

  .page-elevator .elevator-shell {
    padding: 42px 0 54px;
  }

  .page-elevator .elevator-brand h1 {
    font-size: clamp(54px, 16vw, 82px);
    letter-spacing: -.055em;
  }

  .page-elevator .elevator-title-row {
    gap: 14px;
  }

  .page-elevator .elevator-mission {
    font-size: 18px;
  }

  .page-elevator .elevator-card {
    padding: 30px 0 34px;
  }

  .page-elevator .elevator-card h2 {
    font-size: clamp(31px, 10vw, 44px);
  }

  .page-elevator .elevator-card p,
  .page-elevator .elevator-body-copy {
    font-size: 16px;
  }
}