/* =========================================================
   HORDES OF HELL — Official Website Stylesheet
   Design tokens: void black, marble, oxide red, weathered
   bronze, antique gold. Signature element: cracked stele panels.
   ========================================================= */

:root{
  --void:#0b0906;
  --stone:#17130e;
  --stone-2:#1f1a13;
  --marble:#e7ddc7;
  --marble-dim:#b7ac96;
  --oxide:#7c2020;
  --oxide-bright:#a92c2c;
  --bronze:#67704f;
  --bronze-dim:#454d36;
  --gold:#ab8331;
  --crack:rgba(231,221,199,0.09);
  --shadow-deep: 0 30px 60px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--marble);
  font-family:'EB Garamond', serif;
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(124,32,32,0.10), transparent 45%),
    radial-gradient(ellipse at 85% 10%, rgba(103,112,79,0.08), transparent 40%);
}

::selection{ background:var(--oxide); color:var(--marble); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.eyebrow{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--bronze);
}

h1,h2,h3{
  font-family:'Cinzel', serif;
  font-weight:700;
  letter-spacing:0.03em;
  margin:0;
  color:var(--marble);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:13px;
  padding:14px 28px;
  border:1px solid var(--marble-dim);
  color:var(--marble);
  background:transparent;
  cursor:pointer;
  transition:all .35s ease;
}
.btn:hover, .btn:focus-visible{ background:var(--oxide); border-color:var(--oxide); }
.btn.solid{ background:var(--oxide); border-color:var(--oxide); }
.btn.solid:hover, .btn.solid:focus-visible{ background:var(--oxide-bright); border-color:var(--oxide-bright); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn[disabled]{ opacity:0.4; cursor:not-allowed; }
.btn[disabled]:hover{ background:transparent; border-color:var(--marble-dim); }

/* ---------- Greek key / meander divider ---------- */
.meander{
  height:14px;
  width:100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'><path d='M0 0 H14 V10 H24 V4 H34 V10 H44 V0 H56 V14 H0 Z' fill='%23453a2a'/></svg>");
  background-repeat:repeat-x;
  background-size:56px 14px;
  opacity:0.55;
}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw;
  background:linear-gradient(to bottom, rgba(11,9,6,0.92), rgba(11,9,6,0));
  backdrop-filter:blur(2px);
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:38px; width:auto; filter:invert(1) brightness(0.92); }
nav ul{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
nav a{
  font-family:'Oswald', sans-serif;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--marble-dim);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:all .3s ease;
}
nav a:hover, nav a:focus-visible{ color:var(--marble); border-bottom-color:var(--oxide-bright); }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  position:relative;
  padding:140px 6vw 90px;
  background:
    radial-gradient(circle at 50% 32%, rgba(124,32,32,0.14), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, #0e0b08 60%, var(--stone) 100%);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(231,221,199,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,221,199,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, black, transparent 70%);
  pointer-events:none;
}
.hero-bg-slot{ position:absolute; inset:0; z-index:0; }
.hero-bg-slot img{
  width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease;
}
.hero-bg-slot img.loaded{ opacity:0.28; }
.hero-bg-slot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,9,6,0.55) 0%, rgba(11,9,6,0.85) 75%, var(--stone) 100%);
}
.ember{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--oxide-bright); opacity:0; filter:blur(0.3px);
  animation:rise 9s linear infinite;
}
@keyframes rise{
  0%{ opacity:0; transform:translateY(0) translateX(0); }
  10%{ opacity:0.8; } 90%{ opacity:0.5; }
  100%{ opacity:0; transform:translateY(-90vh) translateX(20px); }
}
.hero-logo{
  width:min(560px, 78vw); height:auto;
  filter:invert(1) brightness(0.95) drop-shadow(0 0 55px rgba(124,32,32,0.45));
  position:relative; z-index:2;
  animation:reveal 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes reveal{
  from{ opacity:0; transform:translateY(24px) scale(0.97); filter:invert(1) brightness(0.95) blur(6px); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.hero .eyebrow{ position:relative; z-index:2; margin-bottom:22px; }
.hero-sub{
  position:relative; z-index:2;
  font-family:'EB Garamond', serif; font-style:italic; font-size:20px;
  color:var(--marble-dim); max-width:560px; margin:26px auto 40px;
}
.hero-actions{ position:relative; z-index:2; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--marble-dim); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue::after{
  content:''; width:1px; height:34px; background:linear-gradient(var(--marble-dim), transparent);
  animation:pulse-line 2.2s ease-in-out infinite;
}
@keyframes pulse-line{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* ---------- Stele sections (signature element) ---------- */
.stele{ position:relative; padding:120px 6vw; max-width:1180px; margin:0 auto; }
.stele::before{
  content:''; position:absolute; inset:18px 0; background:var(--stone);
  clip-path: polygon(0% 3%, 6% 0%, 16% 2.4%, 29% 0%, 44% 2.2%, 58% 0%, 73% 2.6%, 88% 0%, 100% 2.2%, 100% 96.5%, 91% 100%, 77% 97.2%, 62% 100%, 47% 97.4%, 32% 100%, 17% 97%, 7% 100%, 0% 96.8%);
  box-shadow: inset 0 0 0 1px var(--crack), var(--shadow-deep);
  z-index:-1;
}
.stele-mark{ display:flex; align-items:baseline; gap:18px; margin-bottom:56px; }
.stele-mark .glyph{
  font-family:'Cinzel Decorative', serif; font-size:15px; color:var(--gold);
  border:1px solid var(--gold); padding:6px 12px;
}
.stele-mark h2{ font-size:clamp(28px, 3.4vw, 42px); }
.stele-mark .rule{ flex:1; height:1px; background:var(--crack); }

/* ---------- News ---------- */
.news-list{ display:flex; flex-direction:column; }
.news-item{ display:grid; grid-template-columns:120px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--crack); }
.news-item:last-child{ border-bottom:1px solid var(--crack); }
.news-date{ font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.16em; color:var(--bronze); text-transform:uppercase; }
.news-item h3{ font-family:'Cinzel',serif; font-size:19px; margin-bottom:6px; font-weight:700; }
.news-item p{ margin:0; color:var(--marble-dim); font-size:16.5px; }

/* ---------- Generic image slot system ----------
   Each slot renders a fallback graphic behind an <img>.
   JS adds .loaded to the img when it successfully loads,
   and .empty to the wrapper when it 404s (no file yet). */
.img-slot{ position:relative; overflow:hidden; background:var(--stone-2); }
.img-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.img-slot img.loaded{ opacity:1; }
.img-slot.empty img{ display:none; }

/* ---------- Music ---------- */
.music-grid{ display:grid; grid-template-columns:340px 1fr; gap:64px; align-items:start; }
.ep-art{
  aspect-ratio:1/1; position:relative;
  background:
    radial-gradient(circle at 50% 42%, #241d13 0%, #120f0a 70%),
    repeating-linear-gradient(45deg, rgba(231,221,199,0.02) 0 2px, transparent 2px 8px);
  border:1px solid var(--crack); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-deep);
}
.ep-art svg{ width:72%; height:72%; }
.ep-art .img-slot{ position:absolute; inset:0; background:transparent; }
.ep-caption{ font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--marble-dim); margin-top:14px; text-align:center; }
.ep-title{ font-size:clamp(24px,2.6vw,32px); margin-bottom:8px; }
.ep-desc{ color:var(--marble-dim); max-width:56ch; margin:16px 0 34px; }
.tracklist{ list-style:none; margin:0 0 36px; padding:0; }
.tracklist li{ display:flex; align-items:center; gap:20px; padding:16px 0; border-top:1px solid var(--crack); font-family:'Oswald', sans-serif; }
.tracklist li:last-child{ border-bottom:1px solid var(--crack); }
.track-num{ color:var(--gold); font-size:13px; width:22px; }
.track-name{ flex:1; color:var(--marble); font-size:16px; letter-spacing:0.02em; }
.track-feat{ color:var(--marble-dim); font-size:13px; font-style:italic; font-family:'EB Garamond', serif; }
.stream-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Bio ---------- */
.bio-copy{ max-width:70ch; color:var(--marble-dim); font-size:19px; margin-bottom:20px; }
.bio-copy strong{ color:var(--marble); font-weight:600; }
.band-photo{ aspect-ratio:21/9; margin-bottom:56px; box-shadow:var(--shadow-deep); }
.band-photo .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, rgba(231,221,199,0.03) 0 2px, transparent 2px 10px);
}
.band-photo .fallback span{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--marble-dim); opacity:0.5; }
.lineup{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1px; background:var(--crack); }
.member{ background:var(--stone); padding:26px 22px 30px; text-align:left; }
.member-photo{ width:74px; height:74px; border-radius:50%; margin-bottom:16px; border:1px solid var(--crack); }
.member-photo .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, var(--stone-2) 0%, var(--stone) 100%);
  font-family:'Cinzel', serif; color:var(--gold); font-size:22px;
}
.member .role{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--oxide-bright); margin-bottom:8px; display:block; }
.member .mname{ font-family:'Cinzel', serif; font-size:19px; font-weight:700; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.gallery-grid .img-slot{ aspect-ratio:4/5; border:1px solid var(--crack); }
.gallery-grid .img-slot .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative', serif; color:var(--crack); font-size:22px;
}
.gallery-grid .img-slot img{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; background:rgba(11,9,6,0.94); z-index:200;
  display:none; align-items:center; justify-content:center; padding:6vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; box-shadow:var(--shadow-deep); }
.lightbox-close{
  position:absolute; top:26px; right:5vw; font-family:'Oswald',sans-serif; letter-spacing:0.2em;
  text-transform:uppercase; font-size:12px; color:var(--marble); background:none; border:1px solid var(--crack);
  padding:10px 18px; cursor:pointer;
}

/* ---------- Live ---------- */
.live-empty{ border:1px dashed var(--crack); padding:56px 40px; text-align:center; }
.live-empty p{ color:var(--marble-dim); margin:14px 0 0; }
.live-empty .glyph-big{ font-family:'Cinzel Decorative', serif; color:var(--gold); font-size:28px; }
.date-list{ list-style:none; margin:0; padding:0; }
.date-list li{ display:grid; grid-template-columns:160px 1fr auto; gap:20px; align-items:center; padding:22px 0; border-top:1px solid var(--crack); }
.date-list li:last-child{ border-bottom:1px solid var(--crack); }
.date-list .d{ font-family:'Oswald',sans-serif; letter-spacing:0.1em; color:var(--gold); }
.date-list .v{ font-family:'Cinzel',serif; font-size:17px; }
.date-list .city{ color:var(--marble-dim); font-size:15px; }

/* ---------- Merch ---------- */
.merch-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--crack); padding:20px 28px; margin-bottom:44px; flex-wrap:wrap;
}
.merch-banner .eyebrow{ margin:0; }
.merch-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:28px; }
.product{ text-align:left; }
.product .img-slot{ aspect-ratio:1/1; border:1px solid var(--crack); margin-bottom:14px; }
.product .img-slot .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--marble-dim); opacity:0.5;
}
.product h3{ font-size:16px; margin-bottom:4px; }
.product .price{ font-family:'Oswald',sans-serif; font-size:13px; color:var(--marble-dim); }

/* ---------- Footer / Connect ---------- */
footer{ padding:100px 6vw 50px; text-align:center; background:linear-gradient(180deg, var(--stone) 0%, #0d0a07 100%); position:relative; }
footer h2{ font-size:clamp(28px,4vw,46px); margin-bottom:18px; }
footer .hero-sub{ margin:0 auto 40px; }
.social-row{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:70px; }
.social-row a{ font-family:'Oswald', sans-serif; font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; border:1px solid var(--crack); padding:14px 26px; transition:all .3s ease; }
.social-row a:hover, .social-row a:focus-visible{ border-color:var(--bronze); color:var(--bronze); background:rgba(103,112,79,0.08); }
.foot-legal{ font-family:'Oswald', sans-serif; font-size:11px; letter-spacing:0.12em; color:var(--marble-dim); opacity:0.6; }

/* ---------- Reveal on scroll ---------- */
/* Reveal-on-scroll: content is visible by default (fail-safe if JS is off/blocked).
   Only when the <html> element has the 'js' class do we hide it for the animation. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.js .reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-logo, .js .reveal, .ember, .scroll-cue::after{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}

@media (max-width: 880px){
  .music-grid{ grid-template-columns:1fr; }
  .ep-art{ max-width:340px; margin:0 auto; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  nav{ display:none; }
  .nav-toggle{ display:block; font-family:'Oswald',sans-serif; letter-spacing:0.2em; font-size:11px; text-transform:uppercase; color:var(--marble); background:none; border:1px solid var(--crack); padding:10px 16px; cursor:pointer; }
  nav.open{ display:flex; position:fixed; inset:0; background:var(--void); flex-direction:column; align-items:center; justify-content:center; z-index:99; }
  nav.open ul{ flex-direction:column; text-align:center; gap:30px; }
  nav.open a{ font-size:16px; }
  .date-list li{ grid-template-columns:1fr; gap:6px; text-align:left; }
}

/* =========================================================
   MULTI-PAGE ADDITIONS — breadcrumb, subpage hero, shop
   ========================================================= */

/* active nav link */
nav a.active{ color:var(--marble); border-bottom-color:var(--oxide-bright); }

/* subpage hero (smaller than the home hero) */
.subhero{
  position:relative; padding:150px 6vw 70px; text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(124,32,32,0.16), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, #0e0b08 70%, var(--stone) 100%);
}
.subhero::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(231,221,199,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,221,199,0.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%, black, transparent 72%);
  pointer-events:none;
}
.subhero h1{
  font-size:clamp(38px, 6vw, 74px); position:relative; z-index:2;
  letter-spacing:0.06em;
}
.subhero .eyebrow{ position:relative; z-index:2; margin-bottom:20px; }
.subhero p{
  position:relative; z-index:2; color:var(--marble-dim); font-style:italic;
  font-size:19px; max-width:620px; margin:22px auto 0;
}

/* breadcrumb */
.breadcrumb{
  max-width:1180px; margin:0 auto; padding:26px 6vw 0;
  font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--marble-dim);
}
.breadcrumb a{ color:var(--bronze); }
.breadcrumb a:hover{ color:var(--marble); }
.breadcrumb .sep{ margin:0 10px; color:var(--crack); }
.breadcrumb .current{ color:var(--marble); }

/* shop grid */
.shop{ max-width:1180px; margin:0 auto; padding:80px 6vw 120px; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:36px; }
.shop-card{ text-align:left; }
.shop-card .img-slot{ aspect-ratio:1/1; border:1px solid var(--crack); margin-bottom:16px; background:var(--stone); transition:border-color .3s ease; }
.shop-card:hover .img-slot{ border-color:var(--oxide); }
.shop-card .img-slot .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--marble-dim); opacity:0.5;
}
.shop-card h3{ font-size:18px; margin-bottom:6px; }
.shop-card .price{ font-family:'Oswald',sans-serif; font-size:14px; color:var(--gold); letter-spacing:0.08em; }
.shop-card .soon{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--marble-dim); opacity:0.6; margin-top:4px; }
.shop-note{
  border:1px dashed var(--crack); padding:26px 30px; margin-bottom:52px; text-align:center;
  color:var(--marble-dim); font-style:italic;
}

/* generic page section wrapper (non-stele) */
.page-section{ max-width:1180px; margin:0 auto; padding:80px 6vw; }
.page-section.tight{ padding:50px 6vw; }

/* back-to-home footer link row already covered by footer */

/* =========================================================
   SLIDESHOW — responsive, mobile-first
   ========================================================= */
.slideshow{
  position:relative; width:100%; max-width:1180px; margin:0 auto;
  aspect-ratio:16/9; overflow:hidden; background:var(--stone);
  border:1px solid var(--crack); box-shadow:var(--shadow-deep);
}
.slideshow .slides{ position:absolute; inset:0; }
.slideshow .slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  background-size:cover; background-position:center;
}
.slideshow .slide.active{ opacity:1; }
.slideshow .slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,9,6,0.15) 0%, rgba(11,9,6,0.55) 100%);
}
.slideshow .caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:22px 26px;
  font-family:'Cinzel', serif; font-size:clamp(15px,2vw,20px); letter-spacing:0.04em;
  color:var(--marble); text-shadow:0 2px 12px rgba(0,0,0,0.7);
}
/* arrows */
.slideshow .nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:rgba(11,9,6,0.5); border:1px solid var(--crack); color:var(--marble);
  cursor:pointer; font-size:20px; transition:all .3s ease; user-select:none;
}
.slideshow .nav-arrow:hover, .slideshow .nav-arrow:focus-visible{ background:var(--oxide); border-color:var(--oxide); }
.slideshow .nav-arrow.prev{ left:14px; }
.slideshow .nav-arrow.next{ right:14px; }
.slideshow .nav-arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* dots */
.slideshow .dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; gap:9px;
}
.slideshow .dot{
  width:9px; height:9px; border-radius:50%; background:rgba(231,221,199,0.35);
  cursor:pointer; transition:all .3s ease; border:none; padding:0;
}
.slideshow .dot.active{ background:var(--oxide-bright); transform:scale(1.25); }
.slideshow .dot:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* mobile: taller aspect so portrait shots read better */
@media (max-width: 680px){
  .slideshow{ aspect-ratio:4/5; }
  .slideshow .caption{ padding:16px 18px; }
  .slideshow .nav-arrow{ width:40px; height:40px; font-size:18px; }
  .slideshow .dots{ bottom:56px; }
}

/* audio toggle button (fixed corner) */
.audio-toggle{
  position:fixed; bottom:20px; right:20px; z-index:120;
  width:52px; height:52px; border-radius:50%;
  background:rgba(11,9,6,0.82); border:1px solid var(--bronze); color:var(--marble);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:20px; transition:all .3s ease; backdrop-filter:blur(4px);
}
.audio-toggle:hover, .audio-toggle:focus-visible{ background:var(--oxide); border-color:var(--oxide); }
.audio-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width: 680px){
  .audio-toggle{ width:46px; height:46px; bottom:16px; right:16px; font-size:18px; }
}

@media (prefers-reduced-motion: reduce){
  .slideshow .slide{ transition:none; }
}