/* ===== Global & background ===== */
* { box-sizing: border-box; }
html, body { height: 100%; background-color: #000; }
@supports (-webkit-touch-callout: none) { body { background-color: #000 !important; } }

body {
  margin: 0;
  font-family: 'Kosugi Maru', Helvetica, Arial, sans-serif;
  color: #fff;
  overflow: hidden;             /* keep background video full-bleed */
  -webkit-text-size-adjust: 100%;
}

/* Background video */
.bg-video {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;                  /* under the UI */
  pointer-events: none;
  background-color: #000;      /* shows instantly while video buffers */
}

/* ===== Desktop header (hidden by default; shown at ≥1026px) ===== */
header {
  display: none;
  padding-top: 2vh;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  position: relative;
}
header a { text-decoration: none; color: inherit; }

/* Center content */
.center-content {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
.center-content h2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 18px;
  text-shadow:
    0 0 4px rgba(255,255,255,0.4),
    0 0 10px rgba(255,255,255,0.4),
    0 1px 0 rgba(0,0,0,0.35);
}
.cta-button {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow:
    0 0 6px rgba(255,255,255,0.25),
    inset 0 0 6px rgba(255,255,255,0.25);
}
.cta-button:hover {
  background: white; color: black;
  box-shadow:
    0 0 12px rgba(255,255,255,0.2),
    0 0 28px rgba(255,255,255,0.2);
}

/* Corner links (desktop positions; mobile overrides below) */
.corner-link {
  position: fixed; z-index: 2;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none; color: white;
  text-transform: lowercase;
  transition: opacity .2s ease;
}
.corner-link:hover { opacity: .7; }
.top-left  { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }
.bottom-right { bottom: 20px; right: 20px; }
.bottom-left  { bottom: 20px; left: 20px; }

/* ===== Footer ===== */
footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(45px + env(safe-area-inset-bottom, 0px)); /* desktop default */
  display: flex;
  align-items: center;    /* keep icons & button aligned vertically */
  gap: 16px;              /* overall gap (row gap on mobile when stacked) */
  z-index: 2;
}

/* If you wrapped your icons: keep spacing consistent on all screens */
footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;              /* icon-to-icon gap (stable on all sizes) */
}

footer a { text-decoration: none; font-size: 1.2rem; color: white; }
footer a:hover { opacity: .7; }

/* Copyright */
.footer-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: .6rem; color: white; opacity: .9;
  white-space: nowrap;
  z-index: 1; /* under links/icons so taps target links */
}

/* Subtle glow */
body, header a, .corner-link, footer a {
  text-shadow:
    0 0 6px rgba(255,255,255,0.18),
    0 0 18px rgba(255,255,255,0.18);
}

/* ===== Mobile-first TOP BAR (default ON) ===== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  padding: 0 12px;
  z-index: 2;
}
.top-bar a {
  text-decoration: none; color: white;
  font-weight: 700; text-transform: lowercase;
}
.top-bar .site-title a { font-size: 1.3rem; }
.top-bar .nav-link { font-size: 1rem; }

/* On mobile widths, hide the *desktop* top-corner links; keep bottom corners */
.corner-link.top-left,
.corner-link.top-right { display: none; }

/* Mobile: bottom corners + icons share a line */
.corner-link.bottom-left,
.corner-link.bottom-right {
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: 1rem;
}
footer {
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}

/* Mobile copyright: tiny, wraps, full width, sits under everything */
.footer-bottom {
  left: 0; right: 0; transform: none;
  bottom: max(4px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: clamp(0.36rem, 1.4vw, 0.52rem);
  max-width: 95%;
  margin: 0 auto;
  padding: 0 6px;
  white-space: normal; /* allow wrapping */
  line-height: 1.2;
  z-index: 1;
}

/* Mobile landscape: slightly smaller + more space above copyright */
@media (orientation: landscape) and (max-width: 1025px) {
  .top-bar { top: max(6px, env(safe-area-inset-top, 0px)); padding: 0 10px; }
  .top-bar .site-title a { font-size: 1.15rem; }
  .top-bar .nav-link { font-size: 0.9rem; }

  footer {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .corner-link.bottom-left,
  .corner-link.bottom-right {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    font-size: 0.95rem;
  }
  .footer-bottom {
    bottom: max(6px, env(safe-area-inset-bottom));
    font-size: clamp(0.32rem, 1.1vw, 0.44rem);
    max-width: 96%;
    padding: 0 8px;
    line-height: 1.15;
  }
}

/* ===== Desktop/tablet breakpoint: switch to header + top corners ===== */
@media (min-width: 1026px) {
  header { display: block; }
  .corner-link.top-left,
  .corner-link.top-right { display: block; }

  .top-bar { display: none; }

  .corner-link.bottom-left,
  .corner-link.bottom-right {
    bottom: 20px;
    font-size: 1.2rem;
  }
  footer {
    bottom: calc(45px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
  }
  .footer-bottom {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    white-space: nowrap;
    font-size: .6rem;
  }
}

/* 1) Obvious interactivity for top nav */
.corner-link,
.top-bar a { cursor: pointer; }
.top-bar a:hover,
.corner-link:hover { opacity: 0.7; }

/* 2) Make 100% sure nothing blocks clicks on nav */
.top-bar, .corner-link { pointer-events: auto; }

/* (Safety) Ensure the stacking order is clear */
.top-bar, .corner-link { z-index: 5; }
footer                 { z-index: 4; }
.center-content        { z-index: 3; }
.footer-bottom         { z-index: 2; }
.bg-video              { z-index: 0; }  /* already non-interactive */

/* ===== Footer: Subscribe button (matches .cta-button) ===== */

/* Ensure button inherits CTA styling and aligns with icons */
footer .cta-button {
  border-width: 2px;
  border-radius: 25px;
  line-height: 1;
}

/* Smaller variant to sit beside icons */
footer .cta-button.small-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
  margin-left: 0;
  white-space: nowrap;
}

/* Tiny tweaks for very narrow phones */
@media (max-width: 420px) {
  footer { gap: 10px; }
  footer a { font-size: 1.1rem; }
  footer .cta-button.small-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
    margin-left: 6px;
  }
}

/* Keep icons on their own row; button centered on next row (small screens) */
@media (max-width: 480px) {
  footer {
    flex-wrap: wrap;                 /* allow 2 rows */
    justify-content: center;
    gap: 12px;                       /* spacing between rows/items */
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
  }

  footer .social-icons {
    display: flex;
    flex-wrap: nowrap;               /* keep icons on one line */
    justify-content: center;
    gap: 16px;                       /* keep normal icon spacing */
    flex-basis: 100%;                /* this row takes full width */
    order: 1;
  }

  footer .cta-button.small-btn {
    flex-basis: auto;                /* size to text */
    width: auto;                     /* no stretching */
    margin-left: 0;
    align-self: center;
    order: 2;                        /* always below icons */
  }

  .footer-bottom {
    bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* Tiny devices: nudge icon size & gaps down so they stay on one line */
@media (max-width: 280px) {
  footer { gap: 8px; }
  footer a { font-size: 1rem; }
}

/* Global: tighten space between icons/button and copyright */
footer { 
  bottom: calc(34px + env(safe-area-inset-bottom, 0px)); /* was 45px */
  gap: 16px;
}

/* ===== MUSIC PAGE: fully fluid album art + button (smooth across sizes) ===== */

/* Album art responds to BOTH width and height:
   - min 160px
   - preferred = the smaller of 60vw or 45vh
   - max 360px
*/
.center-content .album-art {
  width: clamp(160px, min(60vw, 45vh), 360px);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* Fix album art sizing only on mobile landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .center-content .album-art {
    width: clamp(100px, 32vh, 240px);
  }
}

/* Keep a consistent gap and scale the button gently with viewport (only in center-content) */
.center-content .cta-button {
  margin-top: clamp(10px, 2vh, 16px);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  padding: clamp(6px, 1.2vh, 10px) clamp(12px, 2.2vw, 20px);
}

/* ===== Album art lightbox (pure CSS) ===== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;                  /* above nav/footer/video */
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);     /* optional softness */
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 0 24px rgba(0,0,0,0.6);
  border-radius: 8px;             /* matches your rounded look */
}

/* Triggered when anchor #art-lightbox is targeted */
.lightbox:target {
  display: flex;
}

/* Prevent background scrolling on iOS when lightbox is open */
.lightbox:target body {
  overflow: hidden