/* ============================================================
   BLACK CROWN — official site
   Palette, type scale and layout primitives
   ============================================================ */

:root{
  --ink:#07080a;          /* page black */
  --ink-2:#0c0e11;        /* raised black */
  --ink-3:#12151a;        /* card */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --fg:#f2f1ee;           /* primary text */
  --fg-dim:#a7a49e;       /* secondary text */
  --fg-faint:#6e6b66;     /* tertiary */

  --ember:#c2410c;        /* ember orange */
  --ember-hi:#f97316;
  --gold:#c9a227;         /* rune gold */
  --blood:#7f1d1d;

  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
  --r:2px;                /* the look is hard-edged, almost no radius */

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* On very wide screens a 1200px column leaves the whole page marooned in the
   middle, so the container and the wordmark are allowed to grow. */
@media (min-width:1800px){
  :root{--wrap:1440px}
  .hero__title{font-size:clamp(64px,13vw,228px)}
}
@media (min-width:2200px){
  :root{--wrap:1600px}
}

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

html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:12px 18px;background:var(--ember);color:#fff;
}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,10vw,140px);position:relative}

/* ── type ──────────────────────────────────────────────── */

.eyebrow{
  margin:0 0 18px;
  font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--fg-faint);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ember);flex:none}

.h2{
  margin:0 0 20px;
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(34px,5.4vw,68px);
  line-height:.98;letter-spacing:.01em;text-transform:uppercase;
}

.lede{
  margin:0 0 48px;max-width:58ch;
  color:var(--fg-dim);font-size:clamp(15px,1.4vw,17px);
}

.note{
  margin:22px 0 0;max-width:56ch;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--fg-faint);
}
.note strong{color:var(--fg-dim);font-weight:600}

/* ── buttons ───────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 28px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:rgba(255,255,255,.07);border-color:var(--fg);transform:translateY(-2px)}
.btn--solid{background:var(--ember);border-color:var(--ember);color:#fff}
.btn--solid:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.btn--ghost{border-color:transparent;color:var(--fg-dim);padding-inline:14px}
.btn--ghost:hover{color:var(--fg);background:none;border-color:transparent}
.btn--small{padding:11px 20px;font-size:10px}
.btn--shop{
  border-color:var(--ember-hi);color:var(--ember-hi);
  background:rgba(249,115,22,.10);
}
.btn--shop:hover{
  background:var(--ember-hi);border-color:var(--ember-hi);color:var(--ink);
  transform:translateY(-2px);
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* Transparent over the hero so the header and the photo look like one piece.
   The bar only gets a surface once you scroll past the hero. */
.nav.is-stuck{
  background:rgba(7,8,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.nav__brand{
  font-family:Anton,Impact,sans-serif;font-size:19px;letter-spacing:.2em;
  margin-right:auto;white-space:nowrap;
}
.nav__brand span{color:var(--ember-hi)}

.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav__links a{
  position:relative;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;
  background:var(--ember-hi);transition:width .3s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__shop{color:var(--fg)!important}

.nav__right{display:flex;align-items:center;gap:16px}


/* 44x44 hit area with the three bars drawn in the middle — the button used to
   be only 26x18, which is well under a comfortable thumb target. */
.burger{display:none;width:44px;height:44px;position:relative;flex:none;margin-right:-10px}
.burger span{
  position:absolute;left:9px;width:26px;height:1.5px;background:var(--fg);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block}
  .nav__links{
    position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;padding:8px var(--gut) 28px;
    background:rgba(7,8,10,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0)}
  .nav__links a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:120px 0 clamp(40px,7vw,80px);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}

.hero__img{
  position:absolute;inset:0;
  /* Gradient fallback: if hero.jpg is missing this still renders. */
  background:
    radial-gradient(90% 70% at 72% 28%, rgba(194,65,12,.30), transparent 60%),
    radial-gradient(60% 50% at 20% 80%, rgba(127,29,29,.34), transparent 70%),
    linear-gradient(160deg,#14181d 0%,#0a0c0f 45%,#05060a 100%);
}
/* The photo runs edge to edge under the transparent nav, so the header and the
   hero read as one piece. Zooming to 166% of the hero height does two things at
   once: it brings the two of them closer, and it drops their faces to roughly
   120px from the top — clear of the menu without leaving a bare strip. */
.hero__img::before{
  content:"";position:absolute;inset:0;
  background:url("../img/hero.jpg?v=2") no-repeat;
  /* Composed for this slot: the two of them on the right, empty backdrop on the
     left for the wordmark, with headroom painted in above them so the fixed nav
     never clips their faces. The 72% focal point only bites on narrow viewports,
     where cover has to crop sideways — it keeps them in frame instead of Seren
     sliding off the edge. */
  background-size:cover;
  background-position:72% top;
}


/* On a tall phone viewport a 16:9 hero crops hard from the sides, which cuts the
   two of them out of frame. Hold the focal point on them instead of the centre. */
@media (max-width:760px){
  .hero__img::before{background-position:76% top}
  .hero__veil{
    background:
      linear-gradient(to top,var(--ink) 4%,rgba(7,8,10,.42) 48%,rgba(7,8,10,.70) 100%),
      linear-gradient(to right,rgba(7,8,10,.72) 0%,rgba(7,8,10,.35) 70%,rgba(7,8,10,.55) 100%);
  }
}

.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--ink) 2%,rgba(7,8,10,.46) 40%,rgba(7,8,10,.62) 86%,rgba(7,8,10,.80) 100%),
    /* dark at both edges: the wordmark sits left, the DSP rail sits right */
    linear-gradient(to right,var(--ink) 0%,rgba(7,8,10,.30) 45%,rgba(7,8,10,.20) 62%,rgba(7,8,10,.62) 100%);
}
.hero__grain{
  position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.hero__title{
  margin:0 0 22px;
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(64px,15vw,190px);
  line-height:.82;letter-spacing:-.01em;text-transform:uppercase;
}
.hero__title span{display:block}
.hero__title-b{
  padding-left:clamp(18px,7vw,120px);
  color:transparent;-webkit-text-stroke:1.5px var(--fg);
}

.hero__sub{margin:0 0 34px;max-width:36ch;color:var(--fg-dim);font-size:clamp(15px,1.6vw,18px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(40px,6vw,72px)}

.hero__foot{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:22px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-faint);
}
.hero__foot span{
  padding:5px 11px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-dim);
}

/* right-hand "listen now" rail */
.hero__dsp{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:20px;
}
.hero__dsp-label{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-faint);flex:none;
}

.dsp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dsp a{
  display:inline-flex;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  background:rgba(7,8,10,.45);backdrop-filter:blur(3px);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.dsp a:hover{color:var(--fg);border-color:var(--fg);background:rgba(255,255,255,.08)}

.hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  width:22px;height:36px;border:1px solid var(--line-2);border-radius:12px;
}
.hero__scroll span{
  position:absolute;left:50%;top:8px;width:2px;height:6px;margin-left:-1px;
  background:var(--ember-hi);animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:900px){.hero__scroll{display:none}}

/* Phone held sideways: a full-height hero pushes the buttons below the fold,
   so the whole block tightens up and the hero stops forcing 100svh. */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding:92px 0 36px}
  .hero__title{font-size:clamp(38px,8vw,64px)}
  .hero__sub{margin-bottom:18px;font-size:14px}
  .hero__cta{margin-bottom:22px}
  .hero__foot{padding-top:14px}
  .hero__dsp{margin-top:12px}
  .eyebrow{margin-bottom:10px}
}

/* ============================================================
   STATS
   ============================================================ */

.stats{background:var(--ink-2);border-block:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.stats__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.stats__grid{grid-template-columns:1fr}}

.stat{
  background:var(--ink-2);padding:clamp(24px,3vw,38px);
  transition:background .35s var(--ease);
}
.stat:hover{background:var(--ink-3)}
.stat__net{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
.stat__tag{
  margin:8px 0 20px;display:inline-flex;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);
}
.stat__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember-hi)}
.stat__num{
  margin:0;font-family:Anton,Impact,sans-serif;
  font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:.01em;
}
.stat__label{margin:8px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}

/* ============================================================
   LATEST RELEASE
   ============================================================ */

.release__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(32px,6vw,80px);align-items:center;
}
@media (max-width:900px){.release__grid{grid-template-columns:1fr}}

.release__art{margin:0;position:relative}
.release__art img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
}
.release__art figcaption{
  margin-top:14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
}
.release__meta{display:flex;gap:10px;margin:0 0 30px;padding:0}
.release__meta span{
  padding:6px 13px;border:1px solid var(--line);border-radius:var(--r);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);
}
.release__cta{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   VIDEOS
   ============================================================ */

.videos{background:var(--ink-2);border-block:1px solid var(--line)}

.slider{position:relative}
.slider__viewport{overflow:hidden;border:1px solid var(--line)}
.slider__track{display:flex;transition:transform .6s var(--ease)}

.slide{
  position:relative;flex:0 0 100%;display:block;
  aspect-ratio:16/9;overflow:hidden;background:#08090b;
}
.slide__thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .5s var(--ease);
  background:linear-gradient(140deg,#161b21,#080a0d);
}
.slide:hover .slide__thumb{transform:scale(1.05);filter:brightness(1.1)}

.slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,8,10,.92),transparent 55%);
}
.slide.is-playing::after,
.slide.is-playing .slide__title,
.slide.is-playing .slide__badge,
.slide.is-playing .slide__play{display:none}

.slide__badge{
  position:absolute;top:18px;left:18px;z-index:2;
  padding:7px 13px;background:var(--ember);border-radius:var(--r);
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.slide__play{
  position:absolute;left:50%;top:50%;z-index:3;
  width:clamp(58px,7vw,82px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid var(--line-2);border-radius:50%;
  background:rgba(7,8,10,.45);backdrop-filter:blur(3px);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.slide__play::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--fg);
}
.slide:hover .slide__play{background:var(--ember);border-color:var(--ember);transform:translate(-50%,-50%) scale(1.08)}

.slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}

.slide__title{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,3vw,34px);
  font-family:Cinzel,serif;font-weight:500;
  font-size:clamp(14px,1.8vw,22px);letter-spacing:.06em;
}

.slider__arrow{
  position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:3;
  width:46px;aspect-ratio:1;border:1px solid var(--line-2);border-radius:50%;
  background:rgba(7,8,10,.55);backdrop-filter:blur(4px);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.slider__arrow:hover{background:var(--ember);border-color:var(--ember)}
.slider__arrow::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:1.5px solid var(--fg);border-right:1.5px solid var(--fg);
}
.slider__arrow--prev{left:-23px}
.slider__arrow--prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.slider__arrow--next{right:-23px}
.slider__arrow--next::before{transform:translate(-70%,-50%) rotate(45deg)}
@media (max-width:900px){
  .slider__arrow--prev{left:10px}
  .slider__arrow--next{right:10px}
}

.slider__foot{
  display:flex;align-items:center;gap:20px;
  padding-top:20px;
}
.dots{display:flex;gap:8px;margin-right:auto}
/* The visible bar stays 2px, but padding gives it a 26px-tall hit area.
   background-clip keeps the padding transparent. */
.dots button{
  width:26px;height:26px;padding:12px 0;box-sizing:border-box;
  background:var(--line-2);background-clip:content-box;
  transition:background .3s var(--ease),width .3s var(--ease);
}
.dots button.is-active{background:var(--ember-hi);background-clip:content-box;width:40px}
.slider__hint,.slider__count{
  transition:color .25s var(--ease);
  margin:0;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint);
}
a.slider__hint:hover{color:var(--fg)}
@media (max-width:760px){.slider__hint{display:none}}

/* ============================================================
   DISCOGRAPHY — album picker + Spotify player
   ============================================================ */

.embed{
  border:1px solid var(--line);background:var(--ink-3);
  margin-bottom:26px;line-height:0;
}
.embed iframe{display:block;width:100%;border:0;background:var(--ink-3)}

.disco__picker{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);margin-bottom:clamp(32px,4vw,52px);
}
@media (max-width:760px){.disco__picker{grid-template-columns:1fr}}

.album{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:0;background:none;border:0;cursor:pointer;
  transition:transform .4s var(--ease);
}
.album:hover{transform:translateY(-4px)}

.album__art{
  display:block;position:relative;width:100%;overflow:hidden;
  border:1px solid var(--line);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.album__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,8,10,.75),transparent 55%);
  opacity:0;transition:opacity .4s var(--ease);
}
.album img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s var(--ease),filter .5s var(--ease)}
.album:hover img{transform:scale(1.05);filter:brightness(1.08)}
.album:hover .album__art::after{opacity:1}

.album.is-active .album__art{
  border-color:var(--ember);
  box-shadow:0 0 0 1px var(--ember),0 30px 60px -30px rgba(194,65,12,.7);
}

.album__meta{
  display:block;margin:16px 0 6px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);
}
.album__title{
  display:block;font-family:Cinzel,serif;font-weight:500;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:.05em;line-height:1.3;
  transition:color .3s var(--ease);
}
.album:hover .album__title,.album.is-active .album__title{color:var(--ember-hi)}

.album__state{
  display:inline-block;margin-top:10px;padding:5px 11px;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);
}
.album__state--out{border-color:var(--ember);color:var(--ember-hi)}

.disco__stage{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:start;
}
@media (max-width:900px){.disco__stage{grid-template-columns:1fr}}

.disco__player .embed{margin-bottom:18px}

.tracks{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);
}
.tracks[hidden]{display:none}
.tracks li{
  display:flex;align-items:center;gap:16px;
  padding:12px 18px;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--fg-dim);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tracks li:last-child{border-bottom:0}
.tracks li:hover{background:var(--ink-3);color:var(--fg)}
.tracks__n{
  font-family:Anton,Impact,sans-serif;font-size:12px;letter-spacing:.1em;
  color:var(--fg-faint);min-width:22px;flex:none;
}
.tracks__t{flex:1 1 auto;min-width:0}
.tracks__links{display:flex;gap:6px;flex:none;margin-left:auto}
.tracks__links a{
  padding:4px 9px;border:1px solid var(--line);border-radius:var(--r);
  font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.tracks__links a:hover{color:#fff;border-color:var(--ember);background:var(--ember)}
.tracks__soon{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);opacity:.55;padding:4px 2px;
}
.disco__open{display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================
   ABOUT
   ============================================================ */

.about{background:var(--ink-2);border-block:1px solid var(--line)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(32px,6vw,84px);align-items:center;
}
@media (max-width:900px){.about__grid{grid-template-columns:1fr}}

/* Placeholder portrait — swap for background-image:url("../img/about.jpg?v=2") */
.about__portrait{
  aspect-ratio:4/5;border:1px solid var(--line);
  /* Drop assets/img/about.jpg in to replace the placeholder. */
  background:
    url("../img/about.jpg?v=2"),
    radial-gradient(70% 60% at 40% 25%,rgba(201,162,39,.20),transparent 62%),
    radial-gradient(80% 70% at 70% 85%,rgba(127,29,29,.34),transparent 65%),
    linear-gradient(150deg,#161a20,#08090c);
  background-size:cover;background-position:center;
  box-shadow:0 40px 90px -35px rgba(0,0,0,.95);
}
.about__body p{margin:0 0 18px;color:var(--fg-dim);max-width:56ch}

.about__facts{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.about__facts li{
  background:var(--ink-2);padding:18px 20px;display:flex;flex-direction:column;gap:6px;
}
.about__facts strong{font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-faint)}
.about__facts span{font-family:Cinzel,serif;font-size:14px;letter-spacing:.05em}

/* ============================================================
   SHOP — the one bright section: page ember with near-black type
   ============================================================ */

.shop{
  background:var(--ink-2);border-block:1px solid var(--line);
  color:var(--fg);text-align:center;position:relative;overflow:hidden;
}
.shop::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 28% 55%,rgba(194,65,12,.22),transparent 62%);
}
.shop > .wrap{position:relative;z-index:1}

.shop__eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--fg-faint);
}
.shop__title{
  margin:0 0 14px;font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(48px,8vw,104px);line-height:.9;text-transform:uppercase;color:var(--fg);
}
.shop__lede{
  margin:0 auto clamp(40px,6vw,72px);max-width:52ch;
  color:var(--fg-dim);font-size:clamp(15px,1.4vw,17px);
}

.shop__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:center;
}
@media (max-width:820px){.shop__grid{grid-template-columns:1fr}}

.shop__badge{
  position:relative;display:block;width:min(380px,82vw);aspect-ratio:1;margin-inline:auto;
  cursor:pointer;
}
.shop__badge:hover .shop__ring text{fill:var(--ember-hi)}
.shop__badge:focus-visible{outline:2px solid var(--ember-hi);outline-offset:8px;border-radius:50%}
/* A black garment on a near-black section would vanish, so a warm pool of
   light sits behind it and the hoodie reads as a silhouette against it. */
.shop__badge::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    rgba(249,115,22,.30) 0%,
    rgba(194,65,12,.20) 38%,
    rgba(60,30,18,.14) 62%,
    transparent 74%);
  filter:blur(6px);
}
.shop__ring{position:absolute;inset:0;width:100%;height:100%;animation:ringspin 30s linear infinite}
.shop__ring text{
  font-family:Inter,sans-serif;font-size:14px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;fill:var(--fg-dim);
}
@keyframes ringspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.shop__ring{animation:none}}

/* The hoodie is a cut-out PNG sitting straight on the section — no tile,
   no frame. A soft drop-shadow is all that lifts it off the background. */
.shop__product{
  position:absolute;inset:14%;width:72%;height:72%;
  object-fit:contain;
  filter:brightness(1.22) contrast(1.06)
         drop-shadow(0 0 26px rgba(249,115,22,.30))
         drop-shadow(0 22px 34px rgba(0,0,0,.8));
  transition:transform .5s var(--ease),filter .5s var(--ease);
}
.shop__badge:hover .shop__product{filter:brightness(1.3) contrast(1.08) drop-shadow(0 0 32px rgba(249,115,22,.45)) drop-shadow(0 22px 34px rgba(0,0,0,.8))}
.shop__badge:hover .shop__product{transform:scale(1.04)}

.shop__body{text-align:left}
@media (max-width:820px){.shop__body{text-align:center}}
.shop__head{
  margin:0 0 30px;font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,4.4vw,56px);line-height:1;text-transform:uppercase;color:var(--fg);
}
.shop__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:20px 44px;border-radius:999px;background:var(--ember);color:#fff;
  font-family:Anton,Impact,sans-serif;font-size:clamp(15px,1.7vw,20px);
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 14px 34px -12px rgba(194,65,12,.9);
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.shop__btn:hover{background:var(--ember-hi);transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(249,115,22,.95)}
.shop__btn:active{transform:translateY(1px)}
.shop__note{
  margin:18px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);
}

/* ============================================================
   FOOTER — centred contact block
   ============================================================ */

.foot{
  position:relative;background:var(--ink);border-top:1px solid var(--line);
  padding-block:clamp(72px,9vw,120px);text-align:center;overflow:hidden;
}
.foot__media{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 60% at 50% 0%,rgba(194,65,12,.16),transparent 65%),
    radial-gradient(90% 70% at 80% 100%,rgba(18,21,26,.9),transparent 70%),
    linear-gradient(180deg,#0b0d10,#06070a);
}
.foot__inner{position:relative;z-index:1}

.foot__eyebrow{
  margin:0 0 20px;font-size:11px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--fg-faint);
}
.foot__mail{margin:0 0 34px}
.foot__mail a{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(24px,5vw,58px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  word-break:break-word;transition:color .3s var(--ease);
}
.foot__mail a:hover{color:var(--ember-hi)}

.foot__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:clamp(40px,6vw,64px)}
.btn--light{background:var(--fg);border-color:var(--fg);color:var(--ink)}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--dark{background:var(--ink-3);border-color:var(--line-2)}

.foot__net{
  display:flex;flex-wrap:wrap;gap:12px clamp(18px,2.6vw,34px);justify-content:center;
  margin-bottom:clamp(30px,4vw,48px);
}
.foot__net a{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  transition:color .25s var(--ease);
}
.foot__net a:hover{color:var(--ember-hi)}

.foot__legal{
  margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
}
.foot__legal a,.foot__legal button{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
  transition:color .25s var(--ease);
}
.foot__legal a:hover,.foot__legal button:hover{color:var(--fg)}
.foot__sep{opacity:.45}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* legal pages */
.legal{max-width:76ch;padding-block:clamp(120px,14vw,180px)}
.legal h1{font-family:Anton,Impact,sans-serif;font-size:clamp(32px,6vw,56px);text-transform:uppercase;margin:0 0 10px}
.legal h2{font-family:Cinzel,serif;font-size:19px;letter-spacing:.05em;margin:38px 0 12px}
.legal p,.legal li{color:var(--fg-dim)}
.legal a{color:var(--ember-hi);text-decoration:underline}

/* ============================================================
   TOUCH — small text links need a bigger target than a mouse does
   ============================================================ */
@media (hover:none){
  .tracks__links a{padding:9px 12px}
  .tracks li{padding-block:8px}
  .foot__net a{padding:8px 4px}
  .foot__legal a,.foot__legal button{padding:6px 2px}
  .nav__links a{padding-block:18px}
}