/*
 * Sol Vyon — Official Website
 *
 * © 2026 Sol Vyon · Dynamic Upload Music
 * All rights reserved.
 *
 * This source code is part of the official Sol Vyon website.
 * It may not be copied, modified, distributed or reused,
 * in whole or in part, without explicit permission.
 *
 * https://solvyonmusic.com
 */

/* ===============================
   1) Theme 
   =============================== */
:root{
  --line-space: var(--space-3);


  /* Layout */
  --max: 980px;
  --radius: 16px;
  --tile-w: 220px;

  /* Spacing */
  --space-1: 10px;
  --space-2: 18px;
  --space-3: 28px;
  --space-4: 44px;
  --space-5: 72px;

  /* Core colors (default) */
  --bg: #0f1012;
  --text: #111111;
  --muted: #555555;
  --line: #e8e8e8;

  /* Core colors — Dark (baseline) */
  --text-dark-base: rgb(140, 144, 148);
  --text-dark-muted: rgba(140, 144, 148, 0.65);
  --text-dark-heading: rgb(214, 217, 221);

  /* Surfaces */
  --panel: rgba(255,255,255,0.35);
  --panel-hover: rgba(255,255,255,0.55);
  --panel-25: rgba(255,255,255,0.25);
  --panel-30: rgba(255,255,255,0.30);
  --panel-35: rgba(255,255,255,0.35);
  --panel-40: rgba(255,255,255,0.40);
  --panel-45: rgba(255,255,255,0.45);
  --panel-55: rgba(255,255,255,0.55);
  --soft-black: rgba(0,0,0,0.35);

  /* Interactive */
  --border-hover: rgba(0,0,0,0.18);
  --border-hover-2: #d5d5d5;
  --ink-hover: rgba(0,0,0,0.04);

  /* Field background */
  --field-bg: rgba(255,255,255,0.55);

  /* Error */
  --danger: #8a1f3d;

  /* Background field (atmosphere) */
  --field-a: rgba(255, 0, 140, 0.08);
  --field-b: rgba(0, 200, 255, 0.09);
  --field-c: rgba(255, 120, 200, 0.09);

  --field-wash-1: rgba(255,255,255,0.03);
  --field-wash-2: rgba(255,255,255,0.00);
  --field-wash-3: rgba(255,255,255,0.03);

  --field-base: #ffffff;

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: 140ms;
  --t-med: 220ms;
  --t-slow: 420ms;
}


/* ===============================
   Separator rhythm (global)
   Robust version (works even if blocks are not adjacent siblings)
   =============================== */

.album-section{
  display: flow-root;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
}

main.album > .album-section:last-of-type{
  padding-bottom: var(--space-3);
}

/* Normalize inner margins so they don't add extra space around separators */
.album-section > :first-child{ margin-top: 0; }
.album-section > :last-child{ margin-bottom: 0; }
.album-section .text > :first-child{ margin-top: 0; }
.album-section .text > :last-child{ margin-bottom: 0; }

/* Line for every section except the first one on a page */
.album-section:not(:first-child){
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

/* Manual toggle (preferred) */
html[data-theme="dark"]{
  color-scheme: dark;

  --bg: #0f1012;
  --text: var(--text-dark-base);
  --muted: var(--text-dark-muted);
  --heading: var(--text-dark-heading);
  --line: rgba(255,255,255,0.14);

  --panel: rgba(255,255,255,0.06);
  --panel-hover: rgba(255,255,255,0.10);
  --panel-25: rgba(255,255,255,0.06);
  --panel-30: rgba(255,255,255,0.06);
  --panel-35: rgba(255,255,255,0.06);
  --panel-40: rgba(255,255,255,0.10);
  --panel-45: rgba(255,255,255,0.10);
  --panel-55: rgba(255,255,255,0.10);
  --soft-black: rgba(255,255,255,0.06);

  --border-hover: rgba(255,255,255,0.22);
  --border-hover-2: rgba(255,255,255,0.22);
  --ink-hover: rgba(255,255,255,0.06);

  --field-bg: rgba(255,255,255,0.07);

  --danger: #ff6a93;

  /* Atmosphere: darker, calmer */
  --field-a: rgba(255, 0, 140, 0.10);
  --field-b: rgba(0, 200, 255, 0.10);
  --field-c: rgba(255, 120, 200, 0.10);

  --field-wash-1: rgba(255,255,255,0.03);
  --field-wash-2: rgba(255,255,255,0.00);
  --field-wash-3: rgba(255,255,255,0.03);

  --field-base: #0f1012;
}

html[data-theme="light"]{
  color-scheme: light;
}

/* Optional: if no manual theme set, follow OS */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg: #0f1012;
    --text: var(--text-dark-base);
    --muted: var(--text-dark-muted);
    --heading: var(--text-dark-heading);
    --line: rgba(255,255,255,0.14);

    --panel: rgba(255,255,255,0.06);
    --panel-hover: rgba(255,255,255,0.10);
    --panel-25: rgba(255,255,255,0.06);
    --panel-30: rgba(255,255,255,0.06);
    --panel-35: rgba(255,255,255,0.06);
    --panel-40: rgba(255,255,255,0.10);
    --panel-45: rgba(255,255,255,0.10);
    --panel-55: rgba(255,255,255,0.10);
    --soft-black: rgba(255,255,255,0.06);

    --border-hover: rgba(255,255,255,0.22);
    --border-hover-2: rgba(255,255,255,0.22);
    --ink-hover: rgba(255,255,255,0.06);

    --field-bg: rgba(255,255,255,0.07);

    --danger: #ff6a93;

    --field-a: rgba(255, 0, 140, 0.10);
    --field-b: rgba(0, 200, 255, 0.10);
    --field-c: rgba(255, 120, 200, 0.10);

    --field-base: #0f1012;
  }
}

/* ===============================
   2) Reset
   =============================== */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* ===============================
   3) Base
   =============================== */

body{
  background: transparent;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* Kill white wrappers (keep your atmosphere visible) */
body > *,
main{
  background: transparent !important;
}

/* Media */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

/* ===============================
   Global Page Motion
   =============================== */

body{
  animation: page-in 160ms ease-out both;
}

@keyframes page-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
}

/* ===============================
   4) Atmospheric Background
   =============================== */

body::before{
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 900px at 20% 50%, var(--field-a), transparent 65%),
    radial-gradient(1400px 1000px at 50% 45%, var(--field-b), transparent 65%),
    radial-gradient(1200px 900px at 80% 55%, var(--field-c), transparent 65%),

    linear-gradient(
      to bottom,
      var(--field-wash-1),
      var(--field-wash-2) 50%,
      var(--field-wash-3)
    ),

    var(--field-base);

  animation: solvyon-field 12s ease-in-out infinite;
}

/* Motion */
@keyframes solvyon-field{
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(6deg); }
  100% { filter: hue-rotate(0deg); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

/* Safari fallback (keeps your original intent) */
@supports (-webkit-touch-callout: none){
  body::before{
    animation: none;
  }
}

/* ===============================
   5) Typography
   =============================== */

h1, h2, h3{
  margin: 0 0 var(--space-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1{
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 650;
}

h2{
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 650;
}

p{
  margin: 0 0 var(--space-2);
}

.muted{
  color: var(--muted);
}

/* ===============================
   6) Layout
   =============================== */

main{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

@media (max-width: 540px){
  main{
    padding: var(--space-4) var(--space-2);
  }
}

/* ===============================
   7) Header / Navigation
   =============================== */

.album-section .site-header{
  background: transparent;
}

.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand{
  margin-bottom: var(--space-2);
  opacity: 0.75;
}

.brand a{
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.brand a:hover{
  color: var(--text-dark-heading);
}

.nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

.nav a{
  font-size: 0.85rem;
  color: var(--muted);
}

.nav a:hover{
  text-decoration: none;
  color: var(--text);
}

.theme-toggle{
  appearance: none;
  border: 0px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  line-height: 1;
  opacity: 0.75;
  margin-left: auto;
}

.theme-toggle:hover{
  opacity: 1;
}


/* ===============================
   8) Home
   =============================== */

.tagline{
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 1.05rem;
}

.home{
  padding-top: var(--space-3);
}

.home-logo{
  display: flex;
  justify-content: center;
  margin: 0;
}

.home-logo svg{
  width: 350px;
  max-width: 85vw;
  height: auto;
  opacity: 0.9;
  filter:
    drop-shadow(0 0 10px rgba(212, 180, 90, 0.18))
    drop-shadow(0 0 22px rgba(0, 170, 170, 0.08));
}

/* Intro */
.intro{
  text-align: center;
  max-width: 60ch;
  margin: var(--space-3) auto 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.intro p{
  color: var(--text);
}

.intro strong{
  font-weight: 650;
}

.home .intro > :last-child{
  margin-bottom: 0;
}

/* Featured */
.featured{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.featured ul{
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.featured li a{
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 120ms ease, border-color 120ms ease;
}

.featured li a:hover{
  transform: translateY(-1px);
  border-color: var(--border-hover-2);
  text-decoration: none;
}

/* Tiles */
.tiles{
  margin-top: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: grid;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, var(--tile-w));
  justify-content: center;
}

.tile{
  display: block;
  padding: var(--space-1) var(--space-1);
  width: var(--tile-w);
  max-width: var(--tile-w);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(6px);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  text-align: center;
}

.tile:hover{
  transform: translateY(-1px);
  border-color: var(--border-hover);
  background: var(--panel-hover);
  text-decoration: none;
}

.tile h3{
  margin: 0 0 3px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.tile p{
  margin: 0;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   9) Music Overview
   =============================== */

.music .text{
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.music-visual{
  margin: var(--space-5) 0 var(--space-6);
}

.music-visual img{
  max-width: 50%;
  height: auto;
  border-radius: 20px;
}

/* Release grid (cards) */
.release-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
}

.release-card{
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.release-card:hover{
  transform: translateY(-2px);
  border-color: var(--border-hover-2);
  background: var(--panel-hover);
  text-decoration: none;
}

/* Center content in the two Music cards */
.music .release-card{
  display: flex;
  align-items: center;      /* vertikal */
  justify-content: center;  /* horizontal */
  text-align: center;
}

.music .release-card .release-meta{
  width: 100%;
}

.music .release-card h3{
  margin: 0;
}

.release-cover{
  aspect-ratio: 1 / 1;
  background: var(--soft-black);
}

.release-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.release-meta{
  padding: var(--space-2);
}

.release-meta h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.release-sub{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===============================
   10) Text Pages
   =============================== */

.text{
  margin-top: var(--space-3);
  max-width: 76ch;
}

/* Prevent extra vertical gap after intro text blocks (before the first separator line) */
main > .text > :last-child{
  margin-bottom: 0;
}


.text a{
  text-decoration: underline;
}

/* ===============================
   11) Albums
   =============================== */

.album-grid{
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.album-card{
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-30);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

html[data-theme="dark"] .album-card{
  background: var(--panel);
}

.album-card:hover{
  transform: translateY(-2px);
  border-color: var(--border-hover-2);
  background: var(--panel-45);
  text-decoration: none;
}

html[data-theme="dark"] .album-card:hover{
  background: var(--panel-hover);
}

.album-cover{
  aspect-ratio: 1 / 1;
  background: var(--soft-black);
}

.album-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-meta{
  padding: var(--space-1) var(--space-2) var(--space-2);
  text-align: left;
}

.album-meta h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.album-meta p{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Album detail */
.album-hero{
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
  text-align: left;
  margin-bottom: var(--space-3);
}

.album-cover{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-30);
}

html[data-theme="dark"] .album-cover{
  background: var(--panel);
}

.album-cover img{
  width: 100%;
  height: auto;
}

.album-info h1{
  margin: 0 0 var(--space-2);
}

.album-sub{
  margin-top: 6px;
  margin-bottom: var(--space-2);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.album-sub span{
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.album-meta .album-subtitle{
  line-height: 1.35;
  margin-top: 6px;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.album-meta .album-year{
  color: rgba(214,216,218,0.62);
  font-size: 0.9em;
  margin-top: var(--space-2);
}

.album-intro{
  max-width: 80ch;
  line-height: 1.55;
}

.album-intro p{
  color: var(--muted);
  margin: 0 0 1em 0;
}

.album-intro p:last-child{
  margin-bottom: 0;
}

/* Tracklist */
.album-tracklist ol{
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
}

.album-tracklist li{
  margin: 0 0 8px;
  color: var(--text);
}

/* Gallery */
.album-gallery{
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.album-shot{
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-25);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

html[data-theme="dark"] .album-shot{
  background: var(--panel);
}

.album-shot:hover{
  transform: translateY(-2px);
  border-color: var(--border-hover-2);
  background: var(--panel-40);
  text-decoration: none;
}

html[data-theme="dark"] .album-shot:hover{
  background: var(--panel-hover);
}

.album-shot img{
  width: 100%;
  height: auto;
}

/* Store logos */
.album-stores .album-links{
  margin-top: var(--space-2);
  display: grid;
  gap: 14px 22px;
  align-items: center;
  justify-items: center;
}

html[data-theme="dark"] .album-stores img,
html[data-theme="dark"] .album-buy-list img{
  opacity: 0.72;
  filter: grayscale(100%) brightness(1.35) contrast(1.05);
  transition: opacity 140ms ease, filter 140ms ease;
}

html[data-theme="dark"] .album-stores a:hover img,
html[data-theme="dark"] .album-buy-list a:hover img{
  opacity: 1;
  filter: none;
}

html[data-theme="dark"] img[src*="shazam"]{
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 6px;
}

html[data-theme="dark"] img[src*="youtube"]{
  opacity: 0.65;
}

@media (min-width: 760px){
  .album-stores .album-links{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 520px) and (max-width: 759px){
  .album-stores .album-links{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.album-stores .album-links a{
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 120ms ease, transform 120ms ease;
  text-decoration: none;
}

.album-stores .album-links a:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.album-stores .album-links img{
  width: 150px;
  height: 75px;
  object-fit: contain;
  display: block;
}

/* -------- Album buy links (stores) -------- */
.album-buy-list{
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;

  display: grid;
  gap: 14px 22px;
  align-items: center;
  justify-items: center;
}

/* Desktop: max. 3 */
@media (min-width: 760px){
  .album-buy-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Medium: 2 */
@media (min-width: 520px) and (max-width: 759px){
  .album-buy-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column by default */

.album-buy-list li{
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.album-buy-list a{
  border-bottom: none;
  opacity: 0.85;
  transition: opacity 120ms ease, transform 120ms ease;
}

.album-buy-list a:hover{
  opacity: 1;
  transform: translateY(-1px);
  text-decoration: none;
}

.album-buy-list img{
  width: 150px;
  height: 75px;
  object-fit: contain;
  display: block;
}

/* =========================================================
   Album – Tracklist with preview players
   ---------------------------------------------------------
   Layout: left = track text, right = audio preview
   Uses :has() for progressive enhancement
   ========================================================= */

/* Track list container */
.tracklist{
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

/* One track row */
.track{
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 10px 22px;
  align-items: center;
  margin: 0 0 var(--space-2);
}

/* Track text (left column) */
.track-line{
  min-width: 0; /* prevent overflow in grid */
  line-height: 1.4;
}

/* Preview column (right) */
.track-preview{
  width: 100%;
  justify-self: end;
}

.track-preview-label{
  margin: 0 0 4px;
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* Audio player */
.track-player{
  width: 100%;
  opacity: 0.85;
  transition: opacity 120ms ease;
}

.track-player:hover{
  opacity: 1;
}

audio{
  accent-color: var(--accent);
}

/* ---------------------------------------------------------
   Collapse preview column if no audio exists
   --------------------------------------------------------- */
.track:not(:has(audio)){
  grid-template-columns: 1fr;
}

.track:not(:has(audio)) .track-preview{
  display: none;
}

/* Fallback help for older browsers */
.track-preview:empty{
  display: none;
}

/* ---------------------------------------------------------
   Mobile: stack vertically
   --------------------------------------------------------- */
@media (max-width: 760px){
  .track{
    grid-template-columns: 1fr;
  }

  .track-preview{
    justify-self: start;
    margin-top: 6px;
  }
}

/* ===============================
   12) Releases Page
   =============================== */

.release-section{
  border-top: 1px solid var(--line);
  padding-top: var(--space-1);
  padding-bottom: var(--space-3);
}

.credits-section{
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

main.releases .text > :last-child{
  margin-bottom: 0;
}

.release-row{
  margin: 0;
  padding: var(--space-2) 0;
  display: flow-root;
  border-top: 1px solid var(--line);
}

.release-row:first-child{
  border-top: 0;
}

.release-row:first-child{
  border-top: 0;
  padding-top: 0;
}

.release-row + .release-row .text > :first-child{ margin-top: 0; }
.release-row .text > :last-child{ margin-bottom: 0; }

/* ===============================
   Releases Page — spacing fix
   =============================== */

/* 1) Kill global separator rhythm on the releases page for these blocks */
main.releases .release-row,
main.releases .credits-section{
  margin-top: 0;
  padding-top: 0;
}

/* 2) Top line (release-section): remove extra space directly below the line */
main.releases .release-section{
  padding-top: 1;
  padding-bottom: 0;
}

/* 3) Rows: keep your intended rhythm without the global double-spacing */
main.releases .release-row{
  padding: var(--space-3) 0;
}

/* First row: no line, no extra top padding (so the top line hugs tighter) */
main.releases .release-row:first-child{
  border-top: 0;
  padding-top: 0;
}

/* 4) Credits: keep only ONE clean rhythm under the credits line */
main.releases .credits-section{
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}


/* ===============================
   13) Projects Page
   =============================== */

.project-row{
  margin: 0;
  padding: 0;
  display: flow-root;
  border-top: 1px solid var(--line);
}

/* No line above the very first row */
.project-row:first-child{
  border-top: 0;
}

/* No line above the very first row */
.project-row:first-child{
  border-top: 0;
  padding-top: 0;
}


/* Separator only between rows */
.project-row + /* Prevent inner text margins from adding extra spacing */
.project-row .text > :first-child{ margin-top: 0; }
.project-row .text > :last-child{ margin-bottom: 0; }


/* ===============================
   14) About / Press / Contact / Legal
   =============================== */

.about-signature{
  margin-top: var(--space-3);
  font-size: 0.95rem;
  color: var(--muted);
  opacity: 0.65;
  letter-spacing: 0.015em;
}

.about-copyright{
  display: flex;
  justify-content: center;
  padding: 0 0;
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.65;
  letter-spacing: 0.02em;
}

/* About: reduce bottom padding so copyright sits closer to signature */
main.about{
  padding-bottom: var(--space-3);
}

.about-glyph{
  display:flex;
  margin-top:2rem;
}

.about-glyph svg{
  width:72px;
  height:auto;
  opacity:0.75;
}

.press-intro,
.contact-intro{
  color: var(--muted);
}

.contact-email{
  margin-top: var(--space-2);
  text-align: center;
}

.contact-email a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal{
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  opacity: 0.75;
}

.legal h2{
  margin-top: 0;
  font-size: 1.0rem;
}

.legal h3{
  margin-top: 0;
  font-size: 1.5rem;
}

.legal .legal-block + .legal-block{
  margin-top: var(--space-3);
}

/* Contact form */
.contact-form{
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.contact-form form{
  display: grid;
  gap: var(--space-2);
}

.contact-form label{
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea{
  font: inherit;
  color: var(--text);
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field-bg);
}

.contact-form textarea{
  resize: vertical;
}

.btn{
  justify-self: center;
  padding: 12px 18px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: transparent;
}

.btn:hover{
  background: var(--ink-hover);
}

.field-error{
  color: var(--danger);
}

.form-success{
  text-align: center;
  color: var(--muted);
}

.form-error{
  text-align: center;
  color: var(--danger);
}

/* Honeypot hidden offscreen */
.honeypot{
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ===============================
   15) Misc Gallery
   =============================== */

.gallery{
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.shot img{
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ===============================
   16) Visuals Page
   =============================== */

.visuals-credits{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

main.visuals .album-meta{
  padding-top: var(--space-2);
}

main.visuals .album-card .album-meta{
  padding: var(--space-1) var(--space-2) var(--space-2);
}

main.visuals .album-card .album-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.gallery .shot{
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.gallery .shot img{
  transition: transform 220ms ease, opacity 160ms ease;
}

.gallery .shot:hover{
  transform: translateY(-2px);
}

.gallery .shot:hover img{
  opacity: 0.85;
}

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.lightbox[hidden]{
  display: none;
}

.lightbox-image{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.lightbox-close{
  position: fixed;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover{
  color: #fff;
}

.lightbox-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.75;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.lightbox-nav:hover{
  opacity: 1;
  background: rgba(255,255,255,0.10);
}

.lightbox-prev{ left: 18px; }
.lightbox-next{ right: 18px; }

.lightbox-counter{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  backdrop-filter: blur(6px);
}

@media (max-width: 520px){
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
}

/* ===============================
   17) Error Page
   =============================== */

.error{
  padding-top: var(--space-5);
}

.error .text{
  color: var(--muted);
}

/* ===============================
   18) Exceptions
   =============================== */

/* Album tracklist header */
.album-tracklist .tracklist-head{
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  align-items: start;
  column-gap: 22px;
  row-gap: 0;
}

.album-tracklist{
  padding-bottom: 1px;
  overflow: auto;
}

/* Preview label sits above the player column */
.album-tracklist .tracklist-head-preview{
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.8;
}

@media (max-width: 720px){
  .album-tracklist .tracklist-head{
    grid-template-columns: 1fr;
  }

  .album-tracklist .tracklist-head-preview{
    display: none;
  }
}

/* =========================================================
   GLOBAL SEPARATOR SYSTEM
   One line — one rhythm (final authority)
   ========================================================= */

.tiles,
.featured,
.legal,
.visuals-credits,
.contact-form,
.album-section:not(:first-child),
.release-row,
.project-row{
  margin-top: var(--line-space);
  padding-top: var(--line-space);
}

.tiles > :first-child,
.featured > :first-child,
.legal > :first-child,
.visuals-credits > :first-child,
.contact-form > :first-child,
.album-section > :first-child,
.release-row > :first-child,
.project-row > :first-child{
  margin-top: 0;
}

.tiles > :last-child,
.featured > :last-child,
.legal > :last-child,
.visuals-credits > :last-child,
.contact-form > :last-child,
.album-section > :last-child,
.release-row > :last-child,
.project-row > :last-child{
  margin-bottom: 0;
}

html, body{ background: var(--bg); }

:root{ color-scheme: dark light; }
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }