/* ==========================================================
   PSYCHIC HEART — site styles
   Easy things to tune are all in :root below.
   ========================================================== */

:root {
  /* --- the rotating PSYCHIC HEART ring (landing page) --- */
  --ring-size:   90vmin;   /* how big the circle is */
  --ring-shift:  0px;      /* nudge the circle left/right */
  --ring-speed:  75s;      /* seconds for one full turn — bigger = slower */
  --ring-color:  #ffffff;
  --ring-font:   104px;    /* text size, measured against a 1000-wide circle */

  /* --- the scrolling title banner (inner pages) --- */
  --banner-font: clamp(40px, 9vmin, 108px);
  --banner-h:    calc(var(--banner-font) * 1.34);
  --banner-color:#ffffff;

  /* --- the menu boxes --- */
  --sq-w:        clamp(104px, 14vmin, 176px);  /* box width */
  --sq-h:        clamp(46px, 6.2vmin, 74px);   /* box height */
  --sq-gap:      clamp(10px, 1.6vmin, 20px);
  --sq-lift:     6px;       /* how far the box "pushes down" on hover */
  --sq-ink:      #000000;
  --sq-ink-hover:#8d8d8d;   /* gray on hover */

  /* --- fonts --- */
  --impact:    Impact, "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --typewriter:"Courier Prime", "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: #000;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #000;
  font-family: var(--typewriter);
  -webkit-font-smoothing: antialiased;
}

/* landing page fills the screen exactly and never scrolls */
body.landing {
  height: 100%;
  overflow: hidden;
}

/* while a photo is open full size, stop the page behind it scrolling */
html.locked, html.locked body { overflow: hidden; }

/* ==========================================================
   BACKGROUND VIDEO
   ========================================================== */

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* very light darkening so white text stays readable over bright footage.
   Set opacity to 0 (or delete this block) to remove it. */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================
   ROTATING RING OF TEXT — landing page
   ========================================================== */

.ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--ring-size);
  height: var(--ring-size);
  margin-left: calc(var(--ring-size) / -2 + var(--ring-shift));
  margin-top:  calc(var(--ring-size) / -2);
  z-index: 2;
  pointer-events: none;
  animation: ring-spin var(--ring-speed) linear infinite;
  will-change: transform;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ring svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.4));
}

.ring text {
  font-family: var(--impact);
  font-size: var(--ring-font);
  fill: var(--ring-color);
  letter-spacing: 0;
}

/* ==========================================================
   SCROLLING TITLE BANNER — inner pages
   ========================================================== */

.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
  background: #000;   /* so page content scrolls cleanly underneath it */
}

.banner-track {
  display: flex;
  width: max-content;
  animation: banner-scroll 40s linear infinite;  /* JS sets the real speed */
  will-change: transform;
}

@keyframes banner-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.banner-track span {
  display: block;
  white-space: nowrap;
  font-family: var(--impact);
  font-size: var(--banner-font);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--banner-color);
}

/* If someone has "reduce motion" turned on, stop everything moving. */
@media (prefers-reduced-motion: reduce) {
  .ring, .banner-track { animation: none; }
}

/* ==========================================================
   CREDIT LINE ON THE LANDING PAGE
   ========================================================== */

.site-credit {
  position: fixed;
  left: clamp(16px, 3.5vw, 44px);
  bottom: clamp(14px, 3vh, 30px);
  z-index: 3;
  margin: 0;
  font-family: var(--typewriter);
  font-size: clamp(9px, 1.05vmin, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================
   RIGHT-HAND MENU
   ========================================================== */

.menu {
  position: fixed;
  top: 50%;
  right: clamp(16px, 3.5vw, 56px);
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sq-gap);
}

.menu a {
  width: var(--sq-w);
  height: var(--sq-h);
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: var(--sq-ink);
  text-decoration: none;

  font-family: var(--typewriter);
  font-weight: 700;
  font-size: clamp(12px, 1.6vmin, 18px);
  letter-spacing: 0.1em;
  text-align: center;

  box-shadow: var(--sq-lift) var(--sq-lift) 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease,
              box-shadow 0.12s ease,
              color 0.12s ease;
}

/* the "pushed down" reaction */
.menu a:hover,
.menu a:focus-visible {
  color: var(--sq-ink-hover);
  transform: translate(var(--sq-lift), var(--sq-lift));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
  outline: none;
}

/* the page you're already on */
.menu a[aria-current="page"] {
  color: var(--sq-ink-hover);
  transform: translate(var(--sq-lift), var(--sq-lift));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
}

/* ==========================================================
   INNER PAGES (MEDIA / LISTEN / CONTACT / ABOUT)
   Bare shells for now — content goes in .page-body
   ========================================================== */

.page {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  padding-top:    calc(var(--banner-h) + clamp(20px, 4vh, 46px));
  padding-right:  calc(var(--sq-w) + clamp(48px, 8vw, 120px));
  padding-bottom: 80px;
  padding-left:   clamp(24px, 6vw, 90px);
}

/* the page name, kept for screen readers and search engines —
   the moving banner is what people actually see */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.home-link {
  display: inline-block;
  font-family: var(--impact);
  font-size: clamp(22px, 3.2vmin, 38px);
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}
.home-link:hover { color: var(--sq-ink-hover); }

.page-body {
  font-family: var(--typewriter);
  color: #fff;
  font-size: clamp(14px, 1.7vmin, 18px);
  line-height: 1.8;
  max-width: 62ch;
  margin-top: clamp(20px, 4vh, 44px);
}

.page-body a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.page-body a:hover,
.page-body a:focus-visible { color: var(--sq-ink-hover); }


/* ==========================================================
   MEDIA GALLERY
   ========================================================== */

.gallery {
  margin-top: clamp(20px, 4vh, 44px);
  column-count: 3;
  column-gap: clamp(10px, 1.4vw, 18px);
}

.gallery button {
  display: block;
  width: 100%;
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.gallery .cap {
  display: block;
  margin-top: 9px;
  font-family: var(--typewriter);
  font-size: clamp(10px, 1.2vmin, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9a9a9a;
  transition: color 0.18s ease;
}

.gallery .credit {
  display: block;
  margin-top: 4px;
  font-family: var(--typewriter);
  font-size: clamp(9px, 1.05vmin, 11.5px);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6d6d6d;
  transition: color 0.18s ease;
}

.gallery button:hover .cap,
.gallery button:focus-visible .cap { color: #fff; }

.gallery button:hover .credit,
.gallery button:focus-visible .credit { color: #9a9a9a; }

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.18s ease;
}

.gallery button:hover img,
.gallery button:focus-visible img {
  opacity: 0.72;
}

.gallery button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1000px) { .gallery { column-count: 2; } }
@media (max-width: 560px)  { .gallery { column-count: 1; } }

/* ==========================================================
   FULL-SIZE IMAGE VIEWER
   ========================================================== */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}

.viewer.open { display: flex; }

.viewer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 22px);
  max-width: 88vw;
}

.viewer img {
  max-width: 88vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.viewer-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.viewer-credit {
  margin: 0;
  font-family: var(--typewriter);
  font-size: clamp(9px, 1.15vmin, 12px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #757575;
  text-align: center;
}

.viewer-credit:empty { display: none; }

.viewer-title {
  margin: 0;
  font-family: var(--typewriter);
  font-size: clamp(11px, 1.5vmin, 16px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b9b9b9;
  text-align: center;
}

.viewer-btn {
  position: absolute;
  border: 0;
  background: #fff;
  color: var(--sq-ink);
  font-family: var(--typewriter);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sq-lift) var(--sq-lift) 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.viewer-btn:hover,
.viewer-btn:focus-visible {
  color: var(--sq-ink-hover);
  transform: translate(var(--sq-lift), var(--sq-lift));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
  outline: none;
}

.viewer-close {
  top: clamp(14px, 3vh, 32px);
  right: clamp(14px, 3vw, 40px);
  width: 46px;
  height: 46px;
  font-size: 22px;
  line-height: 1;
}

.viewer-prev,
.viewer-next {
  top: 50%;
  margin-top: -23px;
  width: 46px;
  height: 46px;
  font-size: 20px;
  line-height: 1;
}

.viewer-prev { left:  clamp(10px, 2.5vw, 40px); }
.viewer-next { right: clamp(10px, 2.5vw, 40px); }

@media (max-width: 560px) {
  .viewer-close, .viewer-prev, .viewer-next { width: 38px; height: 38px; font-size: 17px; }
  .viewer-prev, .viewer-next { margin-top: -19px; }
}


/* ==========================================================
   LISTEN PAGE
   ========================================================== */

.release {
  margin-top: clamp(20px, 4vh, 44px);
  max-width: 440px;
}

.release-art {
  display: block;
  width: 100%;
  height: auto;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vmin, 20px);
  margin-top: clamp(14px, 2.4vh, 24px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sq-w);
  height: var(--sq-h);
  padding: 0 clamp(14px, 1.8vw, 24px);

  background: #fff;
  color: var(--sq-ink);
  text-decoration: none;

  font-family: var(--typewriter);
  font-weight: 700;
  font-size: clamp(12px, 1.6vmin, 18px);
  letter-spacing: 0.1em;

  box-shadow: var(--sq-lift) var(--sq-lift) 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease,
              box-shadow 0.12s ease,
              color 0.12s ease;
}

.btn:hover,
.btn:focus-visible {
  color: var(--sq-ink-hover);
  transform: translate(var(--sq-lift), var(--sq-lift));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
  outline: none;
}

.lyrics {
  margin-top: clamp(44px, 9vh, 96px);
  max-width: 62ch;
}

.song + .song { margin-top: clamp(34px, 6vh, 64px); }

.song h2 {
  font-family: var(--typewriter);
  font-weight: 700;
  font-size: clamp(15px, 1.9vmin, 21px);
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0 0 clamp(12px, 2vh, 22px);
}

.lyric {
  white-space: pre-line;          /* keeps the line and verse breaks as written */
  font-family: var(--typewriter);
  font-size: clamp(13px, 1.6vmin, 17px);
  line-height: 1.85;
  color: #d8d8d8;
}

/* ==========================================================
   PHONES
   ========================================================== */

@media (max-width: 640px) {
  :root {
    --ring-size:  92vmin;
    --ring-shift: 0px;
    --sq-w:       58px;
    --sq-h:       44px;
    --sq-gap:     6px;
    --sq-lift:    4px;
    --banner-font: clamp(30px, 11vw, 54px);
  }

  /* on a phone the menu moves to a row across the bottom,
     so the page gets the full width */
  .menu {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    background: #000;          /* so the page scrolls cleanly behind it */
    padding: 10px 9px 12px;
  }

  .menu a {
    flex: 1;
    width: auto;
    height: var(--sq-h);
    font-size: 10px;
    letter-spacing: 0.03em;
  }

  .page {
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 96px;
  }

  .btn { min-width: 0; padding: 0 18px; font-size: 12px; }

  /* clear of the menu bar now sitting along the bottom */
  .site-credit { bottom: 80px; left: 18px; }
}

/* ==========================================================
   LIVE PAGE — upcoming shows
   ========================================================== */

.shows {
  list-style: none;
  margin: clamp(20px, 4vh, 44px) 0 0;
  padding: 0;
  max-width: 780px;
}

.show {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  padding: clamp(18px, 3vh, 28px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.show:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }

.show-date {
  flex: 0 0 auto;
  width: clamp(62px, 8vw, 90px);
  text-align: center;
  font-family: var(--impact);
  color: #fff;
  line-height: 1;
}
.show-mon { display: block; font-size: clamp(15px, 1.9vmin, 21px); letter-spacing: 0.06em; text-transform: uppercase; }
.show-day { display: block; font-size: clamp(34px, 5.2vmin, 56px); }
.show-yr  { display: block; font-size: clamp(11px, 1.3vmin, 14px); letter-spacing: 0.08em; color: #8d8d8d; margin-top: 3px; }

.show-info { flex: 1; min-width: 0; }

.show-title {
  font-family: var(--typewriter);
  font-weight: 700;
  font-size: clamp(14px, 1.85vmin, 19px);
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 7px;
  line-height: 1.45;
}

.show-where,
.show-time {
  font-family: var(--typewriter);
  font-size: clamp(12px, 1.5vmin, 15px);
  line-height: 1.65;
  margin: 0 0 3px;
}
.show-where { color: #b9b9b9; }
.show-time  { color: #8d8d8d; letter-spacing: 0.06em; }

.show-notes {
  font-family: var(--typewriter);
  font-size: clamp(12px, 1.45vmin, 14px);
  line-height: 1.65;
  color: #8d8d8d;
  margin: 6px 0 0;
}

.show-btn { margin-top: 13px; height: clamp(36px, 4.6vmin, 46px); }

.shows-empty {
  font-family: var(--typewriter);
  font-size: clamp(12px, 1.6vmin, 16px);
  letter-spacing: 0.16em;
  color: #8d8d8d;
  margin: clamp(26px, 5vh, 54px) 0 0;
}

@media (max-width: 640px) {
  .show { gap: 15px; }
  .show-date { width: 54px; }
  .show-day { font-size: 34px; }
}