/* ============================================================
   Magdalena Tul - Signature of Soul
   Palette: warm near-black + a single gold accent
   ============================================================ */

:root{
  --ink:        #0B0907;
  --ink-2:      #120E0A;
  --ink-3:      #1A1410;
  --gold:       #D8AC55;
  --gold-lt:    #F0D9A0;
  --gold-dk:    #A8752C;
  --text:       #EDE6DB;
  --muted:      #BBAF9C;
  --line:       rgba(216,172,85,.18);
  --line-soft:  rgba(237,230,219,.09);

  --serif: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --pad:  clamp(1.25rem, 5vw, 5rem);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--gold); color:#12100C; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#14110C; padding:.9rem 1.4rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:var(--pad); top:.75rem; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; margin:0; line-height:1.08; letter-spacing:.01em; }

.eyebrow{
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.35rem;
}
.eyebrow::before{
  content:''; display:inline-block; width:2.1rem; height:1px;
  background:var(--gold); vertical-align:middle; margin-right:.85rem; opacity:.6;
}

.section-title{ font-size:clamp(2.4rem,6.5vw,4.6rem); }
.lead{ font-size:clamp(1.05rem,1rem + .55vw,1.32rem); color:#DDD4C6; line-height:1.72; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }
.section{ padding-block:clamp(5rem,11vw,9.5rem); }
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin:0; }

/* ---------- Background layers ---------- */
/* Static warm atmosphere - always painted, so the page keeps its
   mood even when WebGL is unavailable or motion is reduced. */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 75% at 50% 4%,  rgba(216,172,85,.085), transparent 60%),
    radial-gradient(85% 55% at 84% 92%,  rgba(168,117,44,.065), transparent 62%),
    radial-gradient(70% 50% at 12% 58%,  rgba(216,172,85,.035), transparent 65%);
}

#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.6s ease;
}
#bg-canvas.ready{ opacity:1; }
.page{ position:relative; z-index:1; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.05rem var(--pad);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(11,9,7,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:.7rem;
}

.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand svg{ width:38px; height:38px; flex:none; transition:transform .6s var(--ease); }
.brand:hover svg{ transform:rotate(-8deg); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text);
}
.brand-tag{
  font-size:.5rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-top:.34rem;
}

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); position:relative; padding-block:.3rem;
  transition:color .3s ease;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--text);
  align-items:center; justify-content:center; padding:0;
}
.nav-toggle span{ display:block; width:16px; height:1px; background:currentColor; position:relative; transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:16px; height:1px; background:currentColor;
  transition:transform .35s var(--ease);
}
.nav-toggle span::before{ top:-5px; }
.nav-toggle span::after{ top:5px; }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ transform:translateY(5px) rotate(45deg); }
.nav-open .nav-toggle span::after{ transform:translateY(-5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
/* Desktop: copy starts at the top, the buttons are pinned bottom-left.
   Mobile: the whole block sits at the bottom of the photo. */
.hero{ position:relative; min-height:100svh; display:flex; align-items:start; overflow:hidden; }

.hero-photo{ position:absolute; inset:0; z-index:0; background:#0B0907; }
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:68% 42%;
  opacity:.92; will-change:transform;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 4%, rgba(11,9,7,.9) 30%, rgba(11,9,7,.35) 58%, rgba(11,9,7,.12) 78%, rgba(11,9,7,.5) 100%),
    linear-gradient(180deg, rgba(11,9,7,.85) 0%, transparent 26%, transparent 62%, var(--ink) 99%);
}

/* Full-height column, so `margin-top:auto` on .hero-cta can drop the
   buttons to the bottom of the banner while the name stays at the top. */
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding-block:8rem;
  min-height:100svh;
  display:flex; flex-direction:column;
}
.hero-copy{ max-width:min(46rem,100%); display:flex; flex-direction:column; flex:1; }

.hero-name{
  font-size:clamp(3rem,6.5vw,6.5rem);
  line-height:.92; letter-spacing:.015em; margin:0;
  text-transform:uppercase; font-weight:300;
}
.hero-name .l2{ display:block; padding-left:.09em; }
.hero-name .grad{
  background:linear-gradient(102deg,var(--gold-lt) 8%,var(--gold) 42%,var(--gold-dk) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-role{
  margin:1.9rem 0 0; font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3.4vw,2rem);
  color:var(--gold-lt); margin:1.15rem 0 0; letter-spacing:.02em;
}
/* margin-top:auto pushes this to the bottom of .hero-copy; padding-top keeps
   a gap from the tagline when the viewport is short enough to close up. */
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:auto; padding-top:2.9rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:1.02rem 1.85rem; border-radius:999px; border:1px solid var(--line);
  color:var(--text); background:rgba(255,255,255,.02);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:rgba(216,172,85,.1); border-color:rgba(216,172,85,.5); transform:translateY(-2px); }
.btn-primary{ background:var(--gold); color:#14110C; border-color:var(--gold); font-weight:500; }
.btn-primary:hover{ background:var(--gold-lt); border-color:var(--gold-lt); color:#14110C; }
.btn svg{ width:13px; height:13px; flex:none; }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:2.2rem; z-index:3;
  display:flex; align-items:center; gap:.8rem;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue i{ display:block; width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue i::after{
  content:''; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(100%)} 100%{transform:translateX(100%)} }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line-soft); padding-block:1.15rem;
  overflow:hidden; background:rgba(11,9,7,.55); position:relative; z-index:2;
}
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:slide 42s linear infinite; }
.marquee span{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.marquee span b{ color:var(--gold); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   About
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.about-body p{ margin:0 0 1.35rem; color:#D6CCBD; }
.about-body p:first-of-type{ font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--text); line-height:1.68; }

.quote{
  margin:0; padding:2.1rem 0 0; border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.22rem,1.05rem + .9vw,1.85rem); line-height:1.5; color:var(--gold-lt);
}
.quote footer{
  margin-top:1.3rem; font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  /* Name pinned left, signature pinned right. */
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.quote-author{ flex:none; }
.signature{ width:58%; height:auto; opacity:.85; filter:brightness(1.15); flex:none; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border-block:1px solid var(--line-soft);
  margin-top:clamp(3.5rem,7vw,6rem);
}
.stat{ background:var(--ink); padding:2.1rem 1.2rem; text-align:center; }
.stat b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,5vw,3.1rem); color:var(--gold); line-height:1;
}
.stat span{
  display:block; margin-top:.8rem; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   Music
   ============================================================ */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.8rem,6vw,4.5rem);
}
.section-head p{ margin:0; color:var(--muted); max-width:34rem; }

.featured{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding:clamp(1.6rem,3.5vw,2.6rem); margin-bottom:clamp(3.5rem,7vw,5.5rem);
  border:1px solid var(--line-soft); border-radius:4px;
  background:linear-gradient(140deg,rgba(216,172,85,.055),rgba(255,255,255,.012) 55%);
}
.featured-art{ position:relative; border-radius:3px; overflow:hidden; aspect-ratio:1; }
.featured-art img{ width:100%; height:100%; object-fit:cover; }
.featured-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(240,217,160,.14);
}
.featured h3{ font-size:clamp(2rem,4.6vw,3.4rem); margin:.55rem 0 0; }
.badge{
  display:inline-block; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.42rem .95rem;
}

.albums{
  display:grid; gap:clamp(1.4rem,2.6vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
}
.album{ position:relative; }
.album-art{
  position:relative; aspect-ratio:1; overflow:hidden; border-radius:3px;
  background:var(--ink-2) center/cover no-repeat;
}
.album-art img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .8s ease;
  opacity:0;
}
.album-art img.loaded{ opacity:1; }
.album:hover .album-art img{ transform:scale(1.06); }
.album-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(240,217,160,.12);
  transition:box-shadow .5s var(--ease);
}
.album:hover .album-art::after{ box-shadow:inset 0 0 0 1px rgba(240,217,160,.4); }

.album h4,
.album-title{ font-family:var(--serif); font-weight:300; line-height:1.08; font-size:1.42rem; margin:1.1rem 0 .35rem; }
.album-meta{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.album-meta .dot{ opacity:.4; margin-inline:.5rem; }

.links{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.links a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted);
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background .35s var(--ease), transform .35s var(--ease);
}
.links a:hover{ color:#14110C; background:var(--gold); border-color:var(--gold); transform:translateY(-3px); }
.links svg{ width:15px; height:15px; }

/* ============================================================
   Videos
   ============================================================ */
.videos{
  display:grid; gap:clamp(1.4rem,2.6vw,2.2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
}
.video{
  position:relative; border:0; padding:0; margin:0; width:100%;
  background:var(--ink-2); border-radius:3px; overflow:hidden;
  cursor:pointer; text-align:left; color:inherit; font:inherit; display:block;
}
.video-frame{ display:block; position:relative; aspect-ratio:16/9; background:var(--ink-3); }
.video-frame img,.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.video-frame img{ opacity:.78; transition:opacity .55s var(--ease), transform 1.1s var(--ease); }
.video:hover .video-frame img{ opacity:1; transform:scale(1.04); }
.play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,9,7,.55); border:1px solid rgba(240,217,160,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.video:hover .play{ background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
.play svg{ width:17px; height:17px; margin-left:3px; fill:var(--gold-lt); transition:fill .4s var(--ease); }
.video:hover .play svg{ fill:#14110C; }
.video-title{
  display:block;
  padding:1.05rem 1.15rem 1.25rem; font-family:var(--serif);
  font-size:1.18rem; line-height:1.32; color:var(--text);
}

/* ============================================================
   Live
   ============================================================ */
.dates{ border-top:1px solid var(--line-soft); }
.date{
  display:grid; grid-template-columns:minmax(9rem,.5fr) minmax(0,2fr) minmax(0,1fr);
  gap:1.4rem 2rem; align-items:center;
  padding:clamp(1.6rem,3.2vw,2.35rem) 0; border-bottom:1px solid var(--line-soft);
  transition:background .5s var(--ease), padding-inline .5s var(--ease);
}
.date:hover{ background:rgba(216,172,85,.045); padding-inline:1.15rem; }
.date-when{
  font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.95rem); color:var(--gold); line-height:1.1;
}
.date-when small{
  display:block; font-family:var(--sans); font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:.5rem;
}
.date-what{ font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.42rem); line-height:1.35; }
.date-what small{
  display:block; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.06em; color:var(--muted); margin-top:.42rem; text-transform:none;
}
.date-where{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.empty-dates{
  padding:3.5rem 0; color:var(--muted); font-family:var(--serif);
  font-size:1.3rem; font-style:italic; border-bottom:1px solid var(--line-soft);
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.card{ background:var(--ink); padding:clamp(1.9rem,3.5vw,2.7rem); }
.card h3{
  font-family:var(--sans); font-size:.62rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.5rem;
}
.card .who{ font-family:var(--serif); font-size:1.32rem; margin:0 0 .7rem; color:var(--text); }
.card a{
  display:block; text-decoration:none; color:var(--text); margin-bottom:.5rem;
  transition:color .3s ease; word-break:break-word; font-size:.95rem;
}
.card a:hover{ color:var(--gold); }
.card .phone{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--line-soft); padding-block:clamp(3.5rem,7vw,5rem) 2.5rem; }
.footer-top{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; align-items:center; }
.footer-note{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.1rem); color:var(--text); max-width:24rem; line-height:1.32; }
.socials{ display:flex; flex-wrap:wrap; gap:.6rem; }
.socials a{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.75rem 1.3rem;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.socials a:hover{ color:#14110C; background:var(--gold); border-color:var(--gold); }
.footer-bottom{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.9rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.footer-bottom a{ color:var(--muted); text-decoration:none; padding:.45rem 0; display:inline-block; }
.footer-bottom a:hover{ color:var(--gold); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); }
.no-js .reveal, .reduced .reveal{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px){
  .about-grid{ grid-template-columns:1fr; }
  .featured{ grid-template-columns:1fr; }
  .featured-art{ max-width:400px; }
  .date{ grid-template-columns:1fr; gap:.75rem; }
  .date-when small{ display:inline; margin-left:.75rem; }
}

@media (max-width: 780px){
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:rgba(11,9,7,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    gap:2.2rem; opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
  }
  .nav a{ font-size:1.05rem; letter-spacing:.26em; color:var(--text); }
  .nav-open .nav{ opacity:1; pointer-events:auto; }
  .nav-toggle{ display:inline-flex; position:relative; z-index:2; }

  /* No backdrop blur on the header on phones. An element with
     backdrop-filter becomes the containing block for its position:fixed
     descendants, so once the header picked up .scrolled the full-screen
     menu inside it collapsed into the header strip - while opening and
     again while fading out. A solid bar does the same job here. */
  .site-header.scrolled{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(11,9,7,.94);
  }

  /* Header bar disappears into the overlay while the menu is open. */
  .nav-open .site-header{ background:transparent; border-bottom-color:transparent; }

  /* Keep the page behind the overlay still. */
  body.nav-open{ overflow:hidden; }

  /* The logo has to stay above the overlay, same as the close button. */
  .nav-open .brand{ position:relative; z-index:2; }
  .stats{ grid-template-columns:repeat(2,1fr); }

  /* Phone: the block sits at the bottom of the photo, buttons follow the
     tagline normally instead of being pushed to the very bottom. */
  .hero{ align-items:end; }
  .hero-inner{ padding-block:2rem; min-height:0; }
  .hero-copy{ flex:none; }
  .hero-cta{ margin-top:2.2rem; padding-top:0; }

  /* Stays at 3rem on a normal phone (375 px and up) and only shrinks below
     ~369 px, where "Magdalena" would otherwise run past the screen edge and
     get clipped by the body's overflow-x. */
  .hero-name{ font-size:min(3rem, 13vw); }

  /* Phone: no room for name and signature side by side, so they stack -
     name stays left, the signature sits centred underneath. */
  .quote footer{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .signature{ align-self:center; width:min(230px,70%); }

  .hero-photo img{ object-position:64% 30%; }
  .hero-photo::after{
    background:
      linear-gradient(180deg, rgba(11,9,7,.92) 0%, rgba(11,9,7,.55) 34%, rgba(11,9,7,.72) 68%, var(--ink) 98%),
      linear-gradient(90deg, rgba(11,9,7,.7), rgba(11,9,7,.28));
  }
  .scroll-cue{ display:none; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 420px){
  .stats{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; }
}

/* Motion off */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  #bg-canvas{ display:none; }
}

/* ============================================================
   Inner pages (news list, article)
   ============================================================ */
.section-page-top{ padding-top:clamp(8rem,14vw,12rem); }

.article-cover{
  width:100%; margin-top:clamp(2.2rem,5vw,3.5rem);
  border-radius:3px; box-shadow:inset 0 0 0 1px rgba(240,217,160,.14);
}

.article-body{
  max-width:64ch; margin-top:clamp(2.2rem,5vw,3.2rem);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem); line-height:1.85; color:#D6CCBD;
}
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.45rem; }
.article-body h2,.article-body h3{
  font-family:var(--serif); color:var(--text); line-height:1.2;
  margin:2.6rem 0 1rem;
}
.article-body h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.article-body h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
.article-body a{ color:var(--gold); text-underline-offset:3px; }
.article-body ul,.article-body ol{ margin:0 0 1.45rem; padding-left:1.3rem; }
.article-body li{ margin-bottom:.6rem; }
.article-body blockquote{
  margin:2rem 0; padding-left:1.4rem; border-left:2px solid var(--line);
  font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--gold-lt);
}
.article-body img{ border-radius:3px; margin:2rem 0; }

/* Laravel pagination */
.wrap nav[role="navigation"]{ margin-top:3rem; }
.wrap nav[role="navigation"] a,
.wrap nav[role="navigation"] span{
  color:var(--muted); text-decoration:none; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.wrap nav[role="navigation"] a:hover{ color:var(--gold); }

/* ============================================================
   Language switcher
   ============================================================ */
.lang-switch{
  display:flex; align-items:center; gap:.15rem;
  margin-left:.6rem; padding-left:1.1rem;
  border-left:1px solid var(--line);
}
.lang-switch a,
.lang-switch .lang-current{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; padding:.35rem .5rem; border-radius:2px;
  transition:color .3s ease, background .3s ease;
}
.lang-switch a{ color:var(--muted); }
.lang-switch a:hover{ color:var(--gold); background:rgba(216,172,85,.09); }
.lang-switch .lang-current{ color:var(--text); border-bottom:1px solid var(--gold); }

/* ============================================================
   Footer: legal row
   ============================================================ */
.footer-legal{
  display:flex; flex-wrap:wrap; gap:.4rem 1.9rem; align-items:center;
  margin-top:clamp(2.4rem,5vw,3.4rem);
}
.footer-legal a,
.footer-legal .link-button{
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.5rem 0;
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.footer-legal a:hover,
.footer-legal .link-button:hover{ color:var(--gold); }

/* ============================================================
   Content page (terms, privacy, cookies)
   ============================================================ */
.page-head{ max-width:64ch; }
.page-head .page-title{
  font-size:clamp(2.3rem,5.5vw,3.6rem); margin-top:1rem; line-height:1.06;
}
.page-updated{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:1.6rem 0 0;
}

/* A table of cookies has to stay readable on a phone: it scrolls
   inside its own box instead of stretching the page sideways. */
.table-scroll{ overflow-x:auto; margin:2rem 0; -webkit-overflow-scrolling:touch; }
.article-body table{
  width:100%; min-width:34rem; border-collapse:collapse;
  font-size:.88rem; line-height:1.6;
}
.article-body th,
.article-body td{
  text-align:left; vertical-align:top; padding:.8rem 1rem;
  border-bottom:1px solid var(--line-soft);
}
.article-body th{
  font-family:var(--sans); font-weight:500; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border-bottom-color:var(--line);
}
.article-body td code{
  font-size:.85em; color:var(--gold-lt);
  background:rgba(216,172,85,.08); padding:.15rem .4rem; border-radius:2px;
}

/* ============================================================
   Legal pages: the operator block and its gaps
   ============================================================ */
.article-body .operator-details{
  list-style:none; margin:1.6rem 0; padding:1.4rem 1.6rem;
  border:1px solid var(--line); border-radius:3px;
  background:rgba(216,172,85,.04);
}
.article-body .operator-details li{ margin:0 0 .55rem; }
.article-body .operator-details li:last-child{ margin-bottom:0; }
.article-body .operator-details strong{
  display:inline-block; min-width:8.5rem; font-weight:400; color:var(--muted);
}

/* A detail nobody has filled in yet. Deliberately hard to miss: an
   unfinished privacy policy must never look like a finished one. */
.legal-todo{
  display:inline-block; font-size:.82em; letter-spacing:.04em;
  color:#F0C063; background:rgba(240,192,99,.12);
  border:1px dashed rgba(240,192,99,.5); border-radius:2px;
  padding:.1rem .5rem;
}

/* ============================================================
   Misc additions
   ============================================================ */
.card-link{ text-decoration:none; color:inherit; display:block; }
.album-art-wide{ aspect-ratio:16/10; }
.date-tickets{ display:block; margin-top:.5rem; color:var(--gold); }
.videos-note{
  margin:2.4rem 0 0; font-size:.72rem; letter-spacing:.06em; color:var(--muted);
}
.post-excerpt{ color:var(--muted); margin:.7rem 0 0; }

/* ============================================================
   Cookie consent
   ============================================================ */
.consent{
  position:fixed; z-index:120; inset:auto 0 0 0;
  padding:0 var(--pad) clamp(1rem,3vw,1.8rem);
  animation:consent-in .5s var(--ease) both;
}
@keyframes consent-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .consent{ animation:none; } }

.consent-inner{
  max-width:var(--maxw); margin-inline:auto;
  background:rgba(18,14,10,.97);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  padding:clamp(1.5rem,3vw,2.3rem);
  display:grid; gap:1.4rem;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
}
.consent-copy{ min-width:0; }
.consent-title{ font-size:clamp(1.2rem,2.4vw,1.55rem); margin:0 0 .6rem; }
.consent-body{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.7; max-width:62ch; }
.consent-links{ margin:.9rem 0 0; display:flex; flex-wrap:wrap; gap:1.4rem; }
.consent-links a{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.consent-links a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Accept and reject are the same size and weight - refusing must not be
   made harder than agreeing. */
.consent-actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.consent-actions .btn{ white-space:nowrap; }
.btn-quiet{ border-color:transparent; color:var(--muted); }
.btn-quiet:hover{ color:var(--text); border-color:var(--line); }

.consent-prefs{ grid-column:1/-1; border-top:1px solid var(--line-soft); padding-top:1.5rem; }
.consent-prefs-title{
  font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem;
}
.consent-cat{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.1rem; cursor:pointer; }
.consent-cat input{ margin-top:.35rem; width:16px; height:16px; accent-color:var(--gold); flex:none; }
.consent-cat input:disabled{ opacity:.55; cursor:not-allowed; }
.consent-cat b{ font-weight:500; font-size:.86rem; }
.consent-cat em{
  font-style:normal; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-left:.6rem;
}
.consent-cat small{ display:block; color:var(--muted); font-size:.8rem; line-height:1.6; margin-top:.25rem; }
.consent-save{ margin-top:.4rem; }

@media (max-width: 820px){
  .consent-inner{ grid-template-columns:1fr; }
  .consent-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Matches the breakpoint where the nav becomes a full-screen overlay. */
@media (max-width: 780px){
  .lang-switch{
    margin-left:0; padding-left:0; border-left:0;
    border-top:1px solid var(--line); padding-top:1.6rem; margin-top:.4rem;
    gap:.8rem;
  }
  .lang-switch a,
  .lang-switch .lang-current{ font-size:.9rem; letter-spacing:.26em; padding:.5rem .7rem; }
}