/* ==========================================================================
   VARIABLES: site-wide sizing & spacing tokens
   -------------------------------------------------------------------------- */
/* These CSS variables let you quickly adjust max page width, side gutters,
   and vertical gaps between sections, without hunting through the file. */
:root{
  --page-max: 1100px;   /* desktop content width for subpages */
  --gutter: 24px;       /* default side padding for subpages (desktop/tablet) */
  --section-gap: 32px;  /* uniform vertical spacing between content sections */
}

/* ==========================================================================
   BASE: typography, colors, and link behavior
   -------------------------------------------------------------------------- */
/* Global font, background, baseline line-height, and default text color */
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #2900ff;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

/* Link color & hover effect */
a {
  color: #ff0;
  text-decoration: underline;
  transition: all 0.3s ease;
}
a:hover { color: #000000;
}

/* ==========================================================================
   HERO / INTRO (index heading + vertical centering wrapper)
   -------------------------------------------------------------------------- */
/* Big welcome heading on the index page */
.heading {
  font-size: 42px;
  color: #fff;
  letter-spacing: 3px;
  line-height: 44px;
  text-align: center;
  margin: 10px 0;
}

/* Flex wrapper that centers the intro content vertically on the index page */
.vertical-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2900ff;
}


/* ==========================================================================
   SUBPAGE LAYOUT: wrappers, gutters, and consistent section spacing
   -------------------------------------------------------------------------- */
/* The main subpage body settings (font sizing and background color) */
body.subpage {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  background-color: #2900ff;
}

/* The full-page section wrapper on subpages (gives full-height feel) */
body.subpage .body_section {
  min-height: 100vh;
  padding-bottom: 30px;
  background-color: #2900ff;
}

/* Each content section on subpages:
   - centers content
   - applies side gutters
   - limits width on large screens */
body.subpage .content{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: block;
}

}

/* --- RESTORE RELIABLE SPACING BETWEEN SECTIONS & AFTER MEDIA --- */

/* 1) Sections should always be separated by a top margin */
.content + .content { margin-top: var(--section-gap);
}

/* 2) Media blocks themselves should leave a bumper below */
.content .videocontainer,
.content .playlist-trigger { margin-bottom: var(--section-gap);
}

.playlist-trigger { cursor: pointer;
}

.playlist-trigger{ position: relative;
}

.playlist-trigger::after{
  content:"";
  position:absolute;
  inset:0;
  border:4px solid transparent;   /* no layout shift */
  pointer-events:none;
}

.playlist-trigger:hover::after,
.playlist-trigger:focus-within::after{
  border-color:#ff0;               /* full rectangle, no “brackets” */
}

/* keep a bumper after media blocks */
.content .videocontainer,
.content .playlist-trigger{ margin-bottom: var(--section-gap);
}

/* ==========================================================================
   SUBPAGE TYPOGRAPHY: section headers and body copy
   -------------------------------------------------------------------------- */
/* Subpage section header:
   - inline block with top/bottom white lines
   - fixed text size (doesn't scale with window)
   - tightened padding so the lines are closer to the text */
body.subpage .body-header {
  display: inline-block;
  align-self: flex-start;
  color: #fff;
  font-size: 39px;      /* fixed; matches your preference */
  letter-spacing: 0;
  line-height: 1;
  margin: 14px 0 0px;  /* tidy space around the header */
  padding-top: 7px;     /* tightened spacing to lines */
  padding-bottom: 7px;  /* tightened spacing to lines */
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
}

/* Subpage body copy:
   - bold yellow text
   - comfortable line-height
   - no extra left/right padding so it aligns with media below */
body.subpage .body-text {
  padding: 0px 5px;
  color: #ff0;
  font-size: 1.3em;
  line-height: 1.25em;
  font-weight: bold;
  margin-bottom: 8px;              /* keep it tight to media below when adjacent */
  padding-left: 0 !important;    /* ensure no nudge off left edge */
  padding-right: 0 !important;   /* ensure no nudge off right edge */
}

/* ==========================================================================
   MEDIA: video containers & playlist cover images
   -------------------------------------------------------------------------- */
/* GLOBAL video container baseline:
   - makes videos block-level, full width of their container
   - the *position* and width on each page are controlled by page-specific rules */
.videocontainer {
  display: block;
  width: 100%;
  position: relative;
}

/* When body text sits directly above a video, remove extra gap between them */
.content .body-text + .videocontainer{ margin-top: 0 !important;
}

/* Videos themselves stretch to their container width and keep aspect ratio */
.videocontainer video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  background-color: #000;
}

/* INDEX-ONLY video container:
   - centers the reel and keeps the original size/spacing you liked
   - change these values if you want to adjust the homepage reel */
body:not(.subpage) .videocontainer{
  width: 68%;
  margin: 10px auto;  /* <-- these 'auto' values center the index video */
}

/* SUBPAGE video container:
   - full-width inside the section
   - no accidental bottom padding (removes old 60% hack) */
body.subpage .videocontainer{
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--section-gap);
  padding-bottom: 0 !important;
}

/* Optional 16:9 responsive helper for embedded iframes (kept for future use) */
body.subpage .embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

body.subpage .embed-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Playlist cover images:
   - behave like the responsive video container (fill section width)
   - predictable spacing below so sections never overlap */
.full-width-image,
.playlist-trigger img{
  display:block;
  width:100%;
  height:auto;
}

.playlist-trigger{
  display:block;
  margin: 0 0 var(--section-gap);
}

/* Keep text-to-media tight when they are adjacent (but still keep the bumper after media) */
.content .body-text + .playlist-trigger{ margin-top: 0 !important;
}

/* ==========================================================================
   NAVIGATION: desktop link bar (index + subpages)
   -------------------------------------------------------------------------- */
/* The row of big GIF buttons */
.link-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-color: #2900ff;
  flex-wrap: wrap;
  gap: 10px;
}

.link-bar a {
  display: block;
  border: 8px solid #ff0;
  box-shadow: 6px 6px 3px rgba(0,0,0,.77);
  padding: 16px 8px 12px 8px; /* top right bottom left */
  transition: none !important;
}

.link-bar a:hover {
  border-color: red;
  box-shadow: 0 0 3px #000;
  filter: invert(100%);
}

/* Default button image size on the index page */
.link-bar a img { height: 45px;
}

/* Subpage variant of the link bar (smaller buttons) */
.link-bar.page a {
  border: 8px solid #ff0;
  box-shadow: 6px 6px 3px rgba(0,0,0,.77);
  padding: 14px 8px 10px 8px;
  transition: none !important;
}

.link-bar.page a:hover,
.link-bar.page a.is-current {
  border-color: red;
  box-shadow: 0 0 3px #000;
  filter: invert(100%);
}

.link-bar.page a img { height: 30px;
}

/* Padding around subpages navigation bar */
.link-bar.page {
  padding-top: 20px;
  padding-bottom: 60px;
}

/* On tablet/phone, left-pin the BEANZ button and let the rest follow */
@media (max-width: 991px) {
  .link-bar.page { justify-content: flex-start;
  }
  .link-bar.page a:first-child { margin-right: auto;
  }
}

/* ==========================================================================
   NAVIGATION: brand button (BEANZ text) used in desktop bar and mobile
   -------------------------------------------------------------------------- */
/* Desktop BEANZ button (text style, not GIF) */
.link-bar.page .brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 19px 14px 20px 11px; /* top right bottom left */
  border: 8px solid #ff0;
  background-color: #2900ff;
  color: #ff0;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 6px 6px 3px rgba(0,0,0,.77);
  transition: color .15s, border-color .15s;
}

.link-bar.page .brand-link:hover,
.link-bar.page .brand-link.is-current {
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 0px #000;
  filter: none;
}

/* Remove easing on BEANZ text button (snap feel) */
.link-bar.page .brand-link,
.navbar .brand-link { transition: none !important;
}

/* ==========================================================================
   NAVIGATION: mobile navbar + full-screen dropdown
   -------------------------------------------------------------------------- */
/* Hidden on desktop; shows hamburger on small screens */
.navbar {
  display: none;
  justify-content: flex-end;
  padding: 10px;
  background-color: #2900ff;
  position: relative;
  z-index: 1000;
}

/* Mobile BEANZ button (if/when used inside navbar) */
.navbar .brand-link,
.navbar .brand-link:link,
.navbar .brand-link:visited {
  border: 8px solid #ff0;
  color: #ff0;
  background-color: #2900ff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 28px;
  padding: 19px 14px 20px 11px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-style: italic;
  box-shadow: 6px 6px 3px rgba(0,0,0,.77);
  transition: color .15s, border-color .15s, box-shadow .15s;
}

.navbar .brand-link:hover,
.navbar .brand-link:focus,
.navbar .brand-link:active,
.navbar .brand-link.is-current {
  border-color: #00ffff !important;
  color: #00ffff !important;
  background-color: #2900ff !important;
  box-shadow: 0 0 3px #000;
}

/* Hamburger button styles */
.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border: 6px solid #ff0;
  background-color: #1a27c0;
  color: #ff0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 4px 4px 3px rgba(0,0,0,.77);
}

.navbar .menu-button {
  width: 45px;
  height: 45px;
  padding: 0;
  box-sizing: content-box;
  -webkit-appearance: none;
  appearance: none;
  transition: none !important;
}

.navbar .menu-button:hover,
.navbar .menu-button:focus,
.navbar .menu-button:active {
  border-color: #00ffff !important;
  color: #00ffff !important;
  box-shadow: 0 0 0px #000;
}

/* CLOSED state: never paints, never transitions on resize */
.nav-menu{
  position: fixed;
  inset: 0;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(41,0,255,0.0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;

  transform: translateY(-110vh);     /* push fully off-canvas */
  transition: none;                  /* <- key: no anim while closed */
  opacity: 0;                        /* do not paint */
  visibility: hidden;                /* do not paint */
  pointer-events: none;
  z-index: 9999;
}

/* OPEN state: animate in */
.nav-menu.open{
  transform: translateY(0);
  transition: transform .25s ease-out, opacity .15s linear;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Desktop hard-off */
@media (min-width: 992px){
  .nav-menu{
    transform: translateY(-110vh) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.nav-menu.open{ transform: translateY(0); pointer-events: auto;
}

.nav-menu a.is-current { display: none !important;
}

/* BEANZ text (not GIF) when shown inside the dropdown */
.nav-menu .brand-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 24px 14px 25px 11px;
  border: 6px solid #ff0;
  background-color: #2900ff;
  color: #ff0;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 45px;
  text-decoration: none;
  box-shadow: 4px 4px 3px rgba(0,0,0,.77);
  transition: none !important;
}

.nav-menu .brand-link:hover,
.nav-menu .brand-link:focus,
.nav-menu .brand-link:active {
  border-color: #00ffff;
  color: #00ffff;
  background-color: #2900ff;
  box-shadow: 4px 4px 3px #000;
}

/* Dropdown link cards + hover */
.nav-menu a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 6px solid #ff0;
  background-color: #2900ff;
  box-shadow: 4px 4px 3px rgba(0,0,0,.77);
  padding: 10px;
  transition: none !important;
}

.nav-menu a:hover { border-color: #00ffff;
}

.nav-menu a:hover img { filter: invert(100%);
}

.nav-menu a img { height: 50px; width: auto;
}

/* Tiny alignment fix for some GIF labels */
.nav-menu a img[alt="VIDEOZ"],
.nav-menu a img[alt="AUDIOZ"],
.nav-menu a img[alt="SOCIALZ"] {
  margin-top: 3px;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   MODAL PLAYER (shared)
   -------------------------------------------------------------------------- */
/* Full-screen dark overlay with centered modal content for playlists */
#video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}

.modal-overlay { position: absolute; inset: 0; z-index: 1;
}

.modal-content {
  position: relative;
  z-index: 2;
  background: #000;
  padding: 10px;
  width: min(90vw, 1000px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.modal-close {
  position: absolute;
  top: 5px; right: 10px;
  font-size: 2em;
  color: #ffff00;
  cursor: pointer;
}

.modal-close:hover { color: #0cb2ff;
}

#modal-video {
  width: 100%;
  max-height: calc(90vh - 150px);
  background: #000;
}

/* keep modal elements in their own stacking context */
.modal-content { position: relative; isolation: isolate;
}

/* make the close button the topmost thing + big click target */
.modal-close{
  position: absolute;
  top: 8px; right: 10px;
  z-index: 10;              /* above video */
  width: 40px; height: 40px;/* larger hit area */
  display: flex; align-items: center; justify-content: center;
  line-height: 1;           /* avoid baseline offset */
  cursor: pointer;
  pointer-events: auto;
}

/* (defensive) don’t let the video eat clicks over the button area */
#modal-video { pointer-events: auto;
}

/* ==========================================================================
   PLAYLIST THUMBNAILS (inside modal)
   -------------------------------------------------------------------------- */
/* The thumbnail strip wrapper beneath the modal video */
.thumbnail-container {
  width: 100%;
  max-width: 800px;
  height: 100px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

/* The horizontal scrolling row of thumbs */
.thumbnails {
  display: flex;
  gap: 10px;
  padding: 0 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.thumbnails::-webkit-scrollbar { display: none;
}

/* Individual thumbnail styling */
.thumbnail {
  flex: 0 0 auto;
  width: 140px;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.thumbnail:hover { border-color: #ff0;
}

/* Arrow buttons to scroll the thumbnail strip left/right */
.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 30px;
  color: #ffff00;
  cursor: pointer;
  z-index: 3;
}

.scroll-button:hover { color: #0cb2ff;
}

#scrollLeft { left: 0;
}

#scrollRight { right: 0;
}

/* ==========================================================================
   FOOTER: big mailto button
   -------------------------------------------------------------------------- */
/* Centered CTA email button with thick yellow border */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}

.big-button {
  display: inline-block;
  padding: 20px 25px;
  border: 10px solid #ff0;
  background-color: #1a27c0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  margin: 0 auto 30px auto;
}

/* ==========================================================================
   AUDIOZ: two-column sections (left = header+player, right = copy)
   -------------------------------------------------------------------------- */
.content.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gutter);
}

/* Make the native <audio> (or audio.js) player full width */
.content.split audio{ 
  width: 100%;
  display: block;
  margin-top: 10px;
}

/* If audio.js is used, keep its skin full-width too */
.audiojs{ width: 100% !important;
}

/* Stack on phones */
@media (max-width: 767px){
  .content.split{ grid-template-columns: 1fr;
  }
  .content.split .right{ margin-top: 4px;
  }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS: desktop ↔ mobile adjustments
   -------------------------------------------------------------------------- */

/* ≤ 991px (tablet/phone) */
@media (max-width: 991px) {
  .link-bar,
  .link-bar.page { display: none;
  }

  body.subpage .body-text { font-size: 1.1rem;
  }

  .navbar { display: flex;
  }

  /* Mild constraint for index video on tablet phones */
  body:not(.subpage) .videocontainer { width: 95%; max-width: 100%;
  }

  /* Subpages: BEANZ on left, hamburger on right */
  body.subpage .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  body.subpage .navbar .brand-link { margin-right: auto;
  }
  body.subpage .menu-button { margin-left: auto;
  }
}

/* ≥ 992px (desktop) */
@media (min-width: 992px) {
  .navbar { display: none !important;
  }
  .nav-menu {
    transform: translateY(-100%) !important;
    pointer-events: none !important;
  }
  body.subpage .body-text { font-size: 1.125rem;
  }
}

/* ≥ 1400px (big desktops) */
@media (min-width: 1400px) {
  body.subpage .body-text { font-size: 1.35rem;
  }
}

/* ≤ 767px (phones) */
@media (max-width: 767px) {
  .heading { font-size: 32px; line-height: 1.3;
  }
  body.subpage .body-text { font-size: 1rem;
  }

  /* Subpages go edge-to-edge on phones */
  body.subpage .content { padding-left: 0 !important; padding-right: 0 !important;
  }
  body.subpage .body-text { margin-bottom: 0 !important;
  }

  /* Index video */
  body:not(.subpage) .videocontainer { width: 100%; margin: 20px auto;
  }

  /* Mobile dropdown link sizing */
  .nav-menu a { font-size: 1.1em; padding: 10px;
  }
}

/* ≤ 479px (small phones) */
@media (max-width: 479px) {
  .heading { font-size: 24px; line-height: 1.3; text-align: center;
  }
  .nav-menu a { font-size: 1em; padding: 12px;
  }
  body.subpage .body-text { font-size: 0.9rem;
  }
}

/* ==========================================================================
   MEDIA: audio player helpers
   -------------------------------------------------------------------------- */

/* Audio block top offset in split sections */
.content.split audio,
.content.split .audiojs { margin-top: 10px;
}

/* Hide native controls once audio.js enhances the element */
.audiojs audio {
  display: none !important;
  width: 0 !important; height: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ==========================================================================
   AUDIOZ PAGE TWEAKS (scoped via :has to AUDIOZ tab)
   -------------------------------------------------------------------------- */

  /* ---------- Container & gutters ---------- */
  body.audioz {
    --container-max: 1100px;                 /* final effective values */
    --aud-gutter: clamp(12px, 3vw, 32px);
  }
  body.audioz .content {
    max-width: var(--container-max);
    padding-left: var(--aud-gutter);
    padding-right: var(--aud-gutter);
  }
  body.audioz .content.split {
    display: grid;
    column-gap: var(--gutter);
    align-items: start;
  }
  body.audioz .content.split .right {
    padding-top: 40px; /* copy slightly lower than header line on desktop */
  }
  @media (max-width: 767px){
    /* AUDIOZ only: make the split grid's row-gap smaller on phones */
    body.audioz {
      --gutter: 4px; /* try 6–10px to taste */
    }
  }
  

  /* ---------- Make REM/MSR/EMS headers span full left column ---------- */
  body.audioz .body-header.rem,
  body.audioz .body-header.msr,
  body.audioz .body-header.ems {
    display: block;
    width: 100%;
  }

  /* ---------- Deterministic header wrapping ---------- */
  body.audioz .body-header {
    inline-size: auto; text-wrap: initial; white-space: normal;
  }
  @media (min-width: 992px) {
    .body-header.rem .w1, .body-header.rem .w2 { display: inline;
	}
    .body-header.rem .w3 { display: block;
	}
    .body-header.msr .w1, .body-header.ems .w1 { display: block;
	}
    .body-header.msr .w3, .body-header.ems .w3 { display: block;
	}
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
    .body-header.rem .w1, .body-header.rem .w2, .body-header.rem .w3 { display: block;
	}
    .body-header.msr .w1, .body-header.ems .w1,
    .body-header.msr .w3, .body-header.ems .w3 { display: block;
	}
  }
  
  @media (max-width: 767px) {
    .body-header span { display: inline;
	}
  }

  /* ---------- Desktop/tablet alignments ---------- */
  @media (min-width: 768px) {
  /* Desktop/tablet: lift copy for first 3; align DJing copy with player */
  body.audioz section.content.split:has(.body-header.rem, .body-header.msr, .body-header.ems) .right{
       padding-top: 6px !important;  /* was 40px */
     }
    /* DJ sets: copy flush with player */
    body.audioz
    .content.split:not(:has(.body-header)) .right {
      padding-top: 0 !important;
    }
  }

  /* ---------- Phones (≤767px) general AUDIOZ tweaks ---------- */
  @media (max-width: 767px) {
	  
    /* Keep a little side padding on phones */
    body.audioz .content {
      padding-left: 12px !important; padding-right: 12px !important;
    }

    /* Slightly smaller headers for the first 3 sections */
    body.audioz .body-header.rem,
    body.audioz .body-header.msr,
    body.audioz .body-header.ems {
      font-size: 39px; /* was 39px */
    }

    /* Player → Copy gap small (first 3 sections) */
    body.audioz
    .content.split:has(.body-header.rem) .right,
    body.audioz
    .content.split:has(.body-header.msr) .right,
    body.audioz
    .content.split:has(.body-header.ems) .right {
      padding-top: 0 !important; margin-top: 0 !important;
    }

    /* Copy → NEXT header gap larger after first 3 sections */
    body.audioz
    .content.split:has(.body-header.rem) + .content,
    body.audioz
    .content.split:has(.body-header.msr) + .content,
    body.audioz
    .content.split:has(.body-header.ems) + .content {
      margin-top: 48px !important; /* > default 32px */
    }

    /* DJ sets: small player → copy gap */
    body.audioz
    .content.split:not(:has(.body-header)) .right {
      padding-top: 0 !important;
      margin-top: 8px !important;
    }

    /* Guard against stray padding on that left column */
    body.audioz
    .content.split:has(> .left > .body-header):not(:has(.audiojs, audio, .videocontainer, .playlist-trigger, iframe, .embed-container))
    + .content.split > .left {
      padding-top: 0 !important;
    }
	
  }

  /* ---------- Small phones (≤479px) AUDIOZ padding ---------- */
  @media (max-width: 479px) {
    body.audioz .content {
      padding-left: 10px !important; padding-right: 10px !important;
    }
  }
  /* Phones ≤767px — DJING header → first player gap equals top-3 (global, wins) */
  @media (max-width: 767px){
    body.subpage main.body_section > section.content.split:nth-of-type(4) + section.content.split{
      margin-top: 0 !important;                 /* kill the 32px section gap */
    }
    body.subpage main.body_section > section.content.split:nth-of-type(4) + section.content.split > .left > .audiojs,
    body.subpage main.body_section > section.content.split:nth-of-type(4) + section.content.split > .left > audio{
      margin-top: 4px !important;              /* match top-3 player offset */
    }
  }
  @media (max-width: 767px){
    .content.split{ grid-template-columns: 1fr;
	}
    .content.split .right{ margin-top: 4px;
	}
  }
  
  /* WRITINGZ: script-page images full-width with a uniform in-between gap */
  .script-image{
    display:block;
    width:100%;
    height:auto;
    margin:0;                /* no per-image bottom gap */
  }
  .script-image + .script-image{
    margin-top:12px;         /* ← set your consistent gap here */
  }

  /* keep text → first image tight */
  .content .body-text + .script-image{ margin-top:0 !important;
  }

}