/* Art Bell Archive v1.5.2 — additive responsive layer. Desktop stays intact. */
.mobile-menu-toggle,.mobile-sort{display:none}
@media (min-width:761px) and (max-width:1100px){
  .layout{grid-template-columns:225px minmax(0,1fr)}
  .content{padding:28px 20px 42px}
  .filters .search{flex-basis:100%}
  .filters select{max-width:none;flex:1 1 130px}
  table{min-width:0}
  td,th{padding-left:12px;padding-right:12px}
  .hero-content{left:39%}
}
@media (max-width:760px){
  html{scroll-padding-top:12px}
  body{overflow-x:hidden;font-size:14px}
  .hero{height:222px}
  .hero-photo{width:100%;opacity:.32;background-position:center 35%}
  .hero-ufo{width:55%;opacity:.32}
  .hero-content{left:18px;right:14px;top:25px}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:.97;margin:12px 0 10px}
  .hero .eyebrow{font-size:9px;letter-spacing:1.4px}
  .hero p{font-size:12px;max-width:290px;line-height:1.45}
  .layout{display:block;max-width:none;width:100%;margin:0}
  .sidebar{padding:0!important;border:0;border-bottom:1px solid var(--line)}
  .mobile-menu-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 18px;background:#0f1d25;color:var(--mint);border:0;text-align:left;font-weight:700}
  .mobile-menu-toggle .menu-icon{font-size:20px;line-height:1}
  .mobile-menu-toggle .menu-chevron{margin-left:auto;transition:transform .15s ease}
  .mobile-menu-toggle[aria-expanded="true"] .menu-chevron{transform:rotate(180deg)}
  /* On JS-disabled browsers the full nav remains visible. */
  .sidebar nav{display:flex;flex-direction:column;white-space:normal;overflow:visible;gap:3px;padding:8px 14px 14px}
  .js-mobile .sidebar nav{display:none}
  .js-mobile .sidebar nav.is-open{display:flex}
  .sidebar nav a,.sidebar nav a.indent,.sidebar nav a.indent-sub{display:block;min-width:0;white-space:normal;font-size:13px;padding:12px 14px;min-height:44px}
  .sidebar nav a.indent{padding-left:30px}
  .sidebar nav a.indent-sub{padding-left:51px}
  .sidebar .side-bottom{display:block;padding:0 18px 16px;margin-top:0}
  .sidebar .side-bottom small{display:none}
  .sidebar .logout{margin-top:0;min-height:42px}
  .js-mobile .sidebar .side-bottom{display:none}
  .js-mobile .sidebar .side-bottom.is-open{display:block}
  .content{padding:23px 14px 38px}
  .section-top{align-items:flex-start}
  .section-top h2{font-size:31px;margin-top:9px;overflow-wrap:anywhere}
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 17px}
  .filters .search{grid-column:1/-1;min-width:0;min-height:48px}
  .filters input{font-size:16px;min-height:44px}
  .filters select{width:100%;max-width:none;min-width:0;min-height:46px;font-size:14px}
  .filters button{min-height:46px}
  .filters .clear{align-self:center;text-align:center}
  .mobile-sort{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;color:var(--muted);font-size:12px}
  .mobile-sort a{display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--line);border-radius:18px;padding:7px 10px;color:#b5c9d0}
  .mobile-sort a.selected{background:#17312f;border-color:#3e8076;color:var(--mint)}
  .table-wrap{border:0;background:transparent;overflow:visible;border-radius:0}
  table,tbody{display:block;min-width:0;width:100%}
  thead{display:none}
  .recording-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;margin:0 0 12px;padding:16px;background:#101c25;border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .recording-row td{display:block;border:0;padding:0;min-width:0}
  .recording-row td.date{grid-column:1;grid-row:1;font-size:12px;color:#a5d9d1}
  .recording-row td:nth-child(2){grid-column:2;grid-row:1;text-align:right}
  .recording-row td:nth-child(3){grid-column:1/-1;grid-row:2;overflow-wrap:anywhere;padding:7px 0 4px}
  .recording-row td:nth-child(4){grid-column:1/-1;grid-row:3}
  .recording-row .notes{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
  .recording-row .filename{font-size:11px;line-height:1.45;margin-top:8px}
  .recording-row .download{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:5px;font-size:14px}
  .group-heading{display:block;margin:18px 0 10px}
  .group-heading th{display:block;padding:11px 14px;border:1px solid #42665e;border-radius:6px;white-space:normal;overflow-wrap:anywhere}
  .empty{display:block;background:#101c25;border:1px solid var(--line);border-radius:8px;padding:26px 15px}
  .empty td{display:block;padding:0}
  .pagination{flex-direction:column;align-items:stretch;text-align:center;gap:12px;padding-top:16px}
  .pagination .pages{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .pagination .pages a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 13px}
  .pagination .pages span{align-self:center}
  .back-top{text-align:center;margin-top:22px}
  .back-top a{min-height:44px;padding:11px 20px}
  footer{padding:20px 14px;font-size:9px;letter-spacing:1px}
}
@media (max-width:370px){
  .hero{height:205px}
  .hero h1{font-size:34px}
  .filters{grid-template-columns:1fr}
  .filters .search{grid-column:auto}
  .mobile-sort{gap:5px}
  .mobile-sort a{font-size:11px;padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){.mobile-menu-toggle .menu-chevron{transition:none}}
@media (max-width:480px){
  .login-card{padding:30px 22px}
  .login-card h1{font-size:38px}
}

/* Art Bell Archive v1.5.3 — install by appending to the END of existing mobile.css.
   Keeps the desktop table and all security / sync code unchanged. */

/* Desktop: show more of Art and the saucer, with a shorter banner. */
@media (min-width:1101px) {
  .hero { height:270px; }
  .hero-photo {
    width:55%;
    background-position:center 26%;
  }
  .hero-ufo {
    width:41%;
    background-position:center top;
    background-size:100% auto;
    background-repeat:no-repeat;
  }
  .hero-content { top:29px; left:41%; }
  .hero h1 { margin:12px 0 12px; }
  .hero p { margin:0; }
}

/* Tablets: retain the broader, less-cropped art shown in the tablet reference. */
@media (min-width:761px) and (max-width:1100px) {
  .hero { height:285px; }
  .hero-photo { width:57%; background-position:center 20%; }
  .hero-ufo { width:42%; background-position:center top; background-size:100% auto; background-repeat:no-repeat; }
  .hero-content { top:35px; }
  .hero h1 { margin:12px 0 13px; }
  .hero p { margin:0; }
}

/* Phones: reverse the artwork, with the UFO on the LEFT and Art on the RIGHT.
   Both use the same existing local image files; there is no new external request. */
@media (max-width:760px) {
  .hero { height:280px; background:#050a0e; }
  .hero-photo {
    left:auto; right:0; top:0; bottom:0;
    width:65%; opacity:.83; filter:grayscale(25%);
    background-image:linear-gradient(90deg,#050a0e 0%,#050a0e25 38%,#050a0e00 75%),url('art-bell-radio.webp');
    background-position:center,center 21%;
    background-size:cover,cover;
    background-repeat:no-repeat;
  }
  .hero-ufo {
    left:0;right:auto;top:0;bottom:0;
    width:64%;opacity:.74;mix-blend-mode:normal;
    background-image:linear-gradient(90deg,#050a0e15,#050a0e99),url('ufo-poster.jpg');
    background-position:center,center top;
    background-size:cover,100% auto;
    background-repeat:no-repeat;
  }
  .hero:after {
    background:linear-gradient(0deg,#080e14ee 1%,transparent 47%),
               linear-gradient(90deg,#050a0eb0 0%,#050a0e7a 43%,#050a0e15 86%);
  }
  .hero-content { left:18px;right:auto;top:106px;width:min(59%,290px); }
  .hero .eyebrow { font-size:10px;letter-spacing:1.2px;line-height:1.4; }
  .hero h1 { font-size:clamp(32px,8vw,43px);line-height:.96;margin:10px 0 10px; }
  .hero p { max-width:240px;font-size:13px;line-height:1.35;margin:0; }

  /* Large, high-contrast navigation control with an ample touch target. */
  .mobile-menu-toggle {
    min-height:64px;padding:13px 18px;gap:14px;
    font-size:19px;font-weight:800;letter-spacing:.3px;
    background:#17332f;color:#cbfff3;
    border-top:1px solid #408c7e;border-bottom:2px solid #408c7e;
  }
  .mobile-menu-toggle .menu-icon {font-size:29px;min-width:32px;text-align:center;}
  .mobile-menu-toggle .menu-chevron {font-size:22px;}
  .sidebar nav a,.sidebar nav a.indent,.sidebar nav a.indent-sub {
    font-size:17px;line-height:1.35;min-height:50px;padding-top:13px;padding-bottom:13px;
  }
  /* Larger, more legible cards for archive listeners. */
  .recording-row {padding:18px;gap:9px 13px;}
  .recording-row td.date {font-size:17px;font-weight:700;}
  .recording-row .type {font-size:15px;}
  .recording-row .notes {font-size:18px;line-height:1.48;font-weight:650;}
  .recording-row .filename {font-size:14px;line-height:1.5;color:#a4bac5;}
  .recording-row .download {min-height:52px;font-size:17px;margin-top:8px;}
  .filters select,.filters button {min-height:50px;font-size:16px;}
  .mobile-sort {font-size:15px;}
  .mobile-sort a {font-size:15px;min-height:44px;}
  .pagination {font-size:15px;}
}

@media (max-width:370px) {
  .hero { height:265px; }
  .hero-content {top:105px;width:62%;}
  .hero h1 {font-size:31px;}
  .hero p {font-size:12px;}
  .recording-row {padding:15px;}
  .recording-row .notes {font-size:17px;}
}

/* Art Bell Archive v1.5.4 — append AFTER the v1.5.3 rules in mobile.css.
   Existing site.css, HTML, JS, and image assets remain unchanged. */

/* Desktop: compose the hero as a closer match to the tablet view.
   Scale the Art image by its height (rather than covering a wide pane)
   so the portrait is less cropped; move the saucer higher into frame. */
@media (min-width: 1101px) {
  .hero { height: 285px; }
  .hero-photo {
    inset: 0 auto 0 0;
    width: 62%;
    background-image:
      linear-gradient(90deg, transparent 9%, #050a0e45 62%, #050a0e 99%),
      url('art-bell-radio.webp');
    background-size: 100% 100%, auto 112%;
    background-position: center, left 46%;
    background-repeat: no-repeat;
    opacity: 1;
  }
  .hero-ufo {
    inset: 0 0 0 auto;
    width: 42%;
    background-image:
      linear-gradient(90deg, #050a0e 0%, #050a0e40 37%, #050a0e20 100%),
      url('ufo-poster.jpg');
    background-size: 100% 100%, 100% auto;
    background-position: center, center -78px;
    background-repeat: no-repeat;
    opacity: .78;
    mix-blend-mode: normal;
  }
  .hero-content { left: 41%; top: 34px; }
  .hero h1 { margin: 12px 0 12px; }
  .hero p { margin: 0; }
}

/* Phones: UFO stays behind; Art is in the foreground on the RIGHT.
   The left-edge mask softly blends his image into the darker sky. */
@media (max-width: 760px) {
  .hero { isolation: isolate; height: 292px; background: #080e14; }
  .hero-ufo {
    z-index: 0;
    inset: 0;
    width: 100%;
    opacity: .44;
    mix-blend-mode: normal;
    background-image:
      linear-gradient(90deg, #050a0e60, #050a0e7c 60%, #050a0ea0),
      url('ufo-poster.jpg');
    background-size: 100% 100%, auto 125%;
    background-position: center, 19% 9%;
    background-repeat: no-repeat;
  }
  .hero-photo {
    z-index: 1;
    inset: 0 0 0 auto;
    width: 67%;
    opacity: .97;
    filter: grayscale(25%);
    mix-blend-mode: normal;
    background-image: url('art-bell-radio.webp');
    background-size: auto 112%;
    background-position: 14% 38%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 23%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 23%, #000 100%);
  }
  .hero::after {
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(0deg, #080e14eb 0%, transparent 31%),
      linear-gradient(90deg, #050a0eae 0%, #050a0e7f 34%, transparent 68%);
  }
  .hero-content { z-index: 3; left: 18px; right: auto; top: 103px; width: min(61%, 290px); }
  .hero h1 { font-size: clamp(32px, 8vw, 43px); line-height: .97; margin: 10px 0; }
  .hero .eyebrow { font-size: 10px; line-height: 1.4; }
  .hero p { font-size: 13px; line-height: 1.4; max-width: 245px; }

  /* Draw the hamburger with CSS rather than relying on the iOS font glyph. */
  .mobile-menu-toggle { min-height: 70px; gap: 16px; padding: 13px 18px; font-size: 20px; }
  .mobile-menu-toggle .menu-icon {
    display: inline-flex;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 36px;
    font-size: 0 !important;
    line-height: 0;
    color: inherit;
  }
  .mobile-menu-toggle .menu-icon::before {
    content: '';
    display: block;
    width: 40px;
    height: 30px;
    background: linear-gradient(to bottom,
      currentColor 0 5px,
      transparent 5px 12px,
      currentColor 12px 17px,
      transparent 17px 24px,
      currentColor 24px 29px);
  }
}

@media (max-width: 370px) {
  .hero { height: 278px; }
  .hero-content { top: 102px; width: 62%; }
  .hero h1 { font-size: 31px; }
}

/* v1.5.5: approved standalone banner artwork.
   Append AFTER all previous v1.5.2–v1.5.4 mobile.css rules.
   The artwork contains the title/tagline already, so we visually hide the
   original HTML lettering but preserve it for screen readers.
   The hero-link remains over the entire banner and continues to reset the view.
*/
@media (min-width: 1101px) {
  .hero {
    height: clamp(230px, 16.4vw, 350px);
    background: #080e14 url('artbell-banner-desktop.webp') center center / cover no-repeat;
  }
  .hero-photo, .hero-ufo { display: none; }
  .hero::after { display: none; }
  .hero-content {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
@media (max-width: 760px) {
  .hero {
    height: clamp(280px, 76.5vw, 450px);
    background: #080e14 url('artbell-banner-phone.webp') center center / 100% 100% no-repeat;
  }
  .hero-photo, .hero-ufo { display: none; }
  .hero::after { display: none; }
  .hero-content {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
/* Between 761px and 1100px, keep the existing iPad/tablet layout. */

/* Art Bell Archive v1.5.6 — responsive banner refinements.
   Append at the very end of public/assets/mobile.css (after v1.5.5).
   Replaces previous artwork images with edge-cleaned versions of the SAME filenames.
   The title/tagline are baked into each banner image; original HTML text stays
   visually hidden but present for screen readers. Clickable banner unaffected.
*/
.hero {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0;
  box-shadow: none;
}
@media (min-width: 1101px) {
  .hero {
    background: #080e14 url('artbell-banner-desktop.webp') center center / 100% 100% no-repeat !important;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero {
    height: clamp(218px, 27.1vw, 299px) !important;
    background: #080e14 url('artbell-banner-tablet.webp') center center / 100% 100% no-repeat !important;
  }
  .hero-photo, .hero-ufo, .hero::after { display: none !important; }
  .hero-content {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
@media (max-width: 760px) {
  .hero {
    background: #080e14 url('artbell-banner-phone.webp') center center / 100% 100% no-repeat !important;
  }
}