:root{
      /* ============================================================
         URHEIM v26 — "molten gold in the dark" theme.
         Deep warm-charcoal surfaces, one glossy amber accent
         gradient, soft radial glow halos, slow ambient motion.
         The old full-bleed wallpaper is gone; the background is
         now a pure-CSS animated aurora (see body::after).
         ============================================================ */
      --bg-0:#0a0a0c;              /* page base */
      --bg-1:#0e0e11;             /* raised strips (nav band, footer band) */
      --surface:#161619;         /* card */
      --surface-2:#1d1d21;       /* nested card / input / hover */
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.14);
      --line-amber:rgba(245,179,1,.24);

      --amber:#f5b301;           /* primary accent */
      --amber-2:#ffc21a;         /* light end */
      --amber-deep:#e0890c;      /* orange end */
      --amber-grad:linear-gradient(135deg,#ffd657 0%,#f5b301 46%,#e0890c 100%);
      /* sampled straight off the gold texture .webp files (highlight / mid / specular band / shadow) */
      --gold-light:#FFF3C4;      /* the pale end of the gold ramp, for secondary copy */
      --gold-tex:linear-gradient(180deg,#FFE08C 0%,#FFC93F 17%,#F5B301 45%,#FFDD74 62%,#EDA80B 82%,#C98B08 100%);
      /* the nav + legal row: the brighter ramp the SELECTED item used to have,
         now the default for every item (no glow anywhere on those two rows) */
      --gold-nav:linear-gradient(180deg,#FFF6DC 0%,#FFE694 30%,#FFD457 62%,#FFC93F 100%);
      --silver-tex:linear-gradient(180deg,#D8D8DC 0%,#FFFFFF 15%,#9A9AA0 37%,#FFFFFF 55%,#C6C6CC 73%,#86868C 100%);
      --amber-grad-hover:linear-gradient(135deg,#ffe488 0%,#ffbe1f 46%,#f0970f 100%);
      --amber-glow:rgba(245,179,1,.35);
      --on-amber:#1c1204;        /* text on an amber fill */

      --text:#eceef2;
      --text-dim:#a6a9b2;
      --text-faint:#74777f;

      /* legacy token names kept so existing rules inherit the new look */
      --gold:#f5b301;
      --gold-strong:#e0890c;
      --gold-dark:#2a1a05;
      --brown:#0a0a0c;
      --brown-soft:#0e0e11;
      --muted:#a6a9b2;
      --muted-dark:#83868f;
      --panel-border:var(--line);
      --panel-bg:linear-gradient(180deg,#17171b,#131316);
      --media-border:var(--line-amber);
      --media-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.5);
      --header-bg:rgba(10,10,12,.72);
      --header-border:var(--line);
      --header-inset:rgba(245,179,1,.22);
      --header-shadow:0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.4);
      --footer-line:linear-gradient(90deg, rgba(245,179,1,0), rgba(245,179,1,.85), rgba(255,214,120,1), rgba(245,179,1,.85), rgba(245,179,1,0));
      --button-bg:var(--amber-grad);
      --button-bg-hover:var(--amber-grad-hover);
      --button-text:#1c1204;
      --button-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(224,137,12,.26), 0 0 0 1px rgba(245,179,1,.22);
      --button-shadow-hover:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 36px rgba(224,137,12,.42), 0 0 22px rgba(245,179,1,.34);
      --subscribe-red:linear-gradient(180deg, rgba(226,39,39,.92) 0%, rgba(192,16,16,.94) 100%);
      --subscribe-red-hover:linear-gradient(180deg, #ff3434 0%, #c40000 100%);
      --page-image:none;
      --hero-image:none;
      --radius:18px;
      --container:1320px;
      --footer-copy-color:#a6a9b2;
      --hero-dark-brown:#eceef2;

      /* glossier amber (reference-style) + radial halos */
      --amber-gloss:linear-gradient(135deg,#ffe987 0%,#fcc41f 34%,#f0a306 60%,#d98a0a 100%);
      --halo-strong:radial-gradient(circle, rgba(255,196,60,.4) 0%, rgba(245,179,1,.2) 26%, rgba(224,137,12,.07) 50%, transparent 72%);
      --halo-soft:radial-gradient(circle, rgba(245,179,1,.18) 0%, rgba(224,137,12,.06) 45%, transparent 72%);

      /* ============================================================
         FONTS — swap the family names here to restyle the whole site.
         (All are loaded from Google Fonts in each page's <head>.)
         ============================================================ */
      --font-eyebrow:'Iceland', sans-serif;          /* "URHEIM" under the nav + the © 2026 URHEIM | … legal line */
      --font-heading:'Zen Dots', sans-serif;         /* LATEST RELEASE · VIDEOS · COMMUNITY · Let us know / Contact · Clothing/Accessories/Music */
      --font-display:'Bruno Ace SC', sans-serif;     /* About URHEIM (Bio) */
      --font-echoes:'Asimovian', sans-serif;         /* Echoes of the Unspoken (Bio + Store bio) */
      --font-tags:'Tomorrow', sans-serif;            /* Pop • Rock • Ethnic • Electronic • Dance */
      --font-body:'Fahkwang', sans-serif;            /* bio copy · Preview Track · "no tour dates" · card copy · Let us know / Contact bubble text */
      --font-button:'Bakbak One', sans-serif;        /* Listen Now · Watch Now · platform buttons · Send · Enter the Shop · Checkout · Add to Cart */
      --font-store-nav:'Bruno Ace', sans-serif;      /* the /store navigation bar */
      --font-ui:'Space Grotesk','Sora', sans-serif;  /* everything else */
    }

    *{box-sizing:border-box}
    /* Scrolling answers the wheel immediately. scroll-behavior:smooth made the
       browser ease every scroll — the same lag a smooth-scroll library adds,
       just built in. */
    html{scroll-behavior:auto;scrollbar-gutter:stable;overflow-x:clip}
    body{
      margin:0;
      color:var(--text);
      font-family:'Sora','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
      /* transparent so Background.webp, painted on <html> underneath, shows
         through; html carries the fallback colour */
      background:transparent;
      overflow-x:hidden;
      overflow-y:auto;   /* no permanent scrollbar on the pages that fit */
      position:relative;
      isolation:isolate;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      zoom:0.75;
    }
    /* Background.webp is the page background now; it is painted by html::before
       further down. The old CSS aurora would only sit on top of it. */
    body::before{content:none}
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      /* only enough to keep text legible over the photograph */
      background:
        radial-gradient(120% 92% at 50% 0%, transparent 56%, rgba(0,0,0,.44) 100%),
        radial-gradient(110% 90% at 50% 100%, rgba(0,0,0,.40), transparent 62%);
      transition:opacity .24s ease;
    }
    /* the light breathes instead of sliding, so both edges stay equally lit */
    @keyframes auroraDrift{
      0%{transform:scale(1);opacity:.94}
      50%{transform:scale(1.045);opacity:1}
      100%{transform:scale(1.015);opacity:.97}
    }
    body.home-mode::after{opacity:1}

    /* ---- Smart Link — brushed-silver background with a moving specular sheen ---- */
    body.smart-link-mode{
      zoom:0.75;
      background:linear-gradient(135deg,
        #7c7f86 0%, #94979e 13%, #adafb5 25%, #85888f 40%,
        #b6b8bd 53%, #8f9299 67%, #a4a6ac 83%, #797c82 100%);
      background-size:230% 230%;
      background-attachment:fixed;
      animation:smartSilverShift 17s ease-in-out infinite;
    }
    body.smart-link-mode::before{            /* diagonal gloss streak sweeping across */
      opacity:1;
      background:linear-gradient(115deg,
        transparent 34%, rgba(255,255,255,.36) 44%, rgba(255,255,255,.60) 50%,
        rgba(255,255,255,.36) 56%, transparent 66%);
      filter:blur(4px);
      mix-blend-mode:screen;
      animation:smartSilverSheen 6.5s linear infinite;
    }
    body.smart-link-mode::after{opacity:0!important}
    body.smart-link-mode .smart-title,
    body.smart-link-mode .smart-available{color:#0c0c0f!important}
    body.smart-link-mode .smart-link-page::before{
      background:radial-gradient(52% 44% at 50% 28%, rgba(255,255,255,.55), transparent 72%);
    }
    @keyframes smartSilverShift{
      0%,100%{background-position:0% 50%}
      50%{background-position:100% 50%}
    }
    @keyframes smartSilverSheen{
      0%{transform:translate3d(-46%,0,0) scale(1.18)}
      100%{transform:translate3d(46%,0,0) scale(1.18)}
    }
    @media (prefers-reduced-motion: reduce){
      body.smart-link-mode,body.smart-link-mode::before{animation:none!important}
    }

    /* ============================================================
       MOBILE / TABLET — the desktop layout is authored at zoom:.75;
       on narrow screens that just scales a desktop down and looks
       broken, so below 900px we render at 1:1 and let the dedicated
       mobile breakpoints do the sizing.
       ============================================================ */
    @media (max-width:900px){
      body,body.smart-link-mode{zoom:1!important;}
      .page-shell{min-height:var(--shell-h, 100vh)!important;}
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}
    .container{width:min(var(--container), calc(100% - 32px));margin-inline:auto}

    header{
      position:sticky;
      top:0;
      z-index:50;
      background:#000000;
      border-bottom:none;
      box-shadow:none;
    }
    /* THE dividing line — the lower edge of the nav band. The exact same
       treatment appears above the social-icons block (.bottom-fixed-wrap::before)
       on every main page, so the nav strip reads as a bordered band. */
    header::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:1;pointer-events:none;
      background:linear-gradient(90deg, transparent, rgba(245,179,1,.6) 18%, rgba(255,222,140,.95) 50%, rgba(245,179,1,.6) 82%, transparent);
      box-shadow:0 0 12px rgba(245,179,1,.4), 0 0 30px rgba(245,179,1,.15);
      opacity:.95;
    }
    body.smart-link-mode header{display:none!important}
    /* Store = a silver / white-to-grey gradient line with a soft glow */
    body.black-bg header::after{
      background:linear-gradient(90deg, transparent, #b6b6bf 14%, #f4f4f7 50%, #b6b6bf 86%, transparent);
      box-shadow:0 0 12px rgba(255,255,255,.4), 0 0 30px rgba(200,200,210,.2);
      opacity:1;
    }
    .nav{
      min-height:74px;
      height:74px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .nav-center{
      position:relative;
      width:100%;
      min-height:74px;
      height:74px;
    }
    .nav-links{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%) !important;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:22px;
      height:46px;
      margin:0;
      font-family:'Space Grotesk','Cinzel',sans-serif;
      font-size:1.4rem;
      letter-spacing:.05em;
      white-space:nowrap;
      pointer-events:auto;
    }
    /* Flat amber. On the main site every nav label is a .webp image so this text
       is only a fallback; kept clean so nothing brown/3D can ever flash. */
    .nav-links a{
      color:var(--amber);
      position:relative;
      margin:0;
      padding:0;
      border-radius:8px;
      transition:color .16s ease, text-shadow .16s ease, transform .16s ease;
      line-height:1;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      height:46px;
      border:none;
      outline:none;
      text-shadow:0 1px 2px rgba(0,0,0,.5);
    }
    .nav-links a::after{content:none}
    .nav-links a.nav-soon{opacity:.62}
    .nav-links a.nav-active{color:var(--amber-2);text-shadow:0 0 12px rgba(245,179,1,.4)}
    .nav-links a:hover{color:var(--amber-2);transform:translateY(-2px) scale(1.05);text-shadow:0 0 12px rgba(245,179,1,.45)}

    .mobile-toggle{
      display:none;
      position:fixed;
      top:12px;
      right:12px;
      left:auto;
      z-index:101;
      border:1px solid rgba(245,179,1,.7);
      background:linear-gradient(180deg, rgba(28,24,16,.96), rgba(14,12,8,.96));
      color:var(--amber);
      width:46px;
      height:46px;
      border-radius:12px;
      box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 14px rgba(245,179,1,.18);
      cursor:pointer;
      padding:0;
      line-height:1;
      font-size:1.5rem;
      align-items:center;
      justify-content:center;
    }
    .mobile-toggle i{display:block}
    .mobile-toggle .hamburger-img{width:26px;height:26px;filter:brightness(1.5) drop-shadow(0 0 4px rgba(245,179,1,.4))}
    /* Drawer: always in the DOM, parked off-screen, slides in on .open */
    .mobile-drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease}
    .mobile-drawer-backdrop.open{opacity:1;visibility:visible}
    .mobile-drawer{display:block;position:fixed;top:0;right:0;height:100vh;width:min(80vw,340px);background:rgba(10,10,12,.96);backdrop-filter:blur(10px);border-left:1px solid var(--line-amber);z-index:99;box-shadow:-16px 0 40px rgba(0,0,0,.5);padding:86px 26px 26px;transform:translateX(105%);transition:transform .34s cubic-bezier(.4,0,.2,1);will-change:transform;pointer-events:none}
    .mobile-drawer nav{display:flex;flex-direction:column;align-items:center;gap:18px;font-family:'Space Grotesk','Cinzel',sans-serif;font-size:1.2rem}
    .mobile-drawer nav a{text-align:center;text-transform:uppercase;letter-spacing:.08em}
    .mobile-drawer nav a{font-weight:500;color:var(--text)}
    .mobile-drawer nav a.nav-active{color:var(--amber);text-shadow:0 0 14px rgba(245,179,1,.4)}
    .mobile-drawer.open{transform:translateX(0);pointer-events:auto}

    /* KROK 13 — the shell always fills exactly one screen, so the top and
       bottom strips stay pinned to the edges at every zoom level. --shell-h
       is written by site.js from the real viewport height divided by the
       page's current zoom; the calc() is only the pre-script fallback. */
    .page-shell{display:flex;flex-direction:column;min-height:var(--shell-h, calc(100vh / 0.75));}
    .main-content-wrap{flex:1;display:flex;flex-direction:column;position:relative;isolation:isolate}
    .main-content-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:radial-gradient(60% 40% at 50% 0%, rgba(245,179,1,.10), transparent 70%);
      opacity:0;
      pointer-events:none;
      transition:opacity .24s ease;
    }
    body.home-mode .main-content-wrap::before{opacity:1}
    body.smart-link-mode .main-content-wrap::before{display:none}
    body.black-bg .main-content-wrap::before{display:none}
    main{flex:1;display:flex;flex-direction:column}
    /* On /home the hero isn't stretched by the sticky-footer — the content sits
       just above the gold line + social icons (which is the divider below "Listen Now"). */
    /* /home behaves like every other page: nav top, content, then the divider +
       social icons + legal pinned to the bottom by the sticky-footer flex. */

    .hero{
      position:relative;
      padding:20px 0 46px;
      min-height:auto;
      isolation:isolate;
      overflow:hidden;
      border-top:1px solid var(--line);
      border-bottom:none;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%);
    }
    /* Optional wallpaper behind the watermark (set from /Configuration/Config.js) */
    .hero-wallpaper{
      position:absolute;inset:0;z-index:0;pointer-events:none;
      background-position:center;background-size:cover;background-repeat:no-repeat;
      opacity:0;transition:opacity .4s ease;
    }
    .hero-wallpaper.is-on{opacity:.32}
    /* Big radial gold halo + faint dot lattice behind the watermark (reference-style burst). */
    .hero::before{
      content:none;
      position:absolute;
      left:50%;top:38%;
      width:min(980px,140vw);aspect-ratio:1;
      transform:translate(-50%,-50%);
      z-index:0;
      background:
        var(--halo-strong),
        radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px) 0 0 / 34px 34px;
      -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 92%);
      mask-image:radial-gradient(closest-side, #000 40%, transparent 92%);
      pointer-events:none;
      animation:heroHaloBreathe 5.5s ease-in-out infinite;
    }
    @keyframes heroHaloBreathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
    /* (orbit ring removed on request — halo only) */
    .hero::after{content:none}
    .hero.hidden{display:none}
    .hero>*{position:relative;z-index:2}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;justify-items:center;text-align:center}
    .hero-copy{width:100%;max-width:100%;min-width:0;padding:0 12px;}
    .eyebrow,.subtitle,.about-tags,.about-body,.contact-subpage-item,.contact-subpage h2{opacity:0}
    /* store pages don't run the fade-in JS — keep their copy visible */
    body.black-bg .about-body,body.black-bg .about-tags,body.black-bg .eyebrow{opacity:1 !important}
    /* "URHEIM" line under the nav — real text, Iceland, nudged down */
    .eyebrow{display:flex;justify-content:center;margin:14px 0 2px}
    .eyebrow-text{
      font-family:var(--font-eyebrow);text-transform:uppercase;
      letter-spacing:.46em;color:var(--amber);font-size:1.5rem;font-weight:400;line-height:1;
      text-shadow:0 0 18px rgba(245,179,1,.35);padding-left:.46em;
    }
    .hero-watermark{width:min(760px, 86%);margin:2px auto 0;position:relative}
    .hero-watermark img{width:100%;height:auto;object-fit:contain;filter:none}
    .headline-rule{display:none!important}
    .subtitle{margin:8px 0 0;font-family:var(--font-ui);font-size:clamp(1.15rem, 2.3vw, 1.75rem);color:var(--text);letter-spacing:.14em;font-weight:700;text-shadow:0 2px 16px rgba(0,0,0,.6)}
    .hero-text{width:min(680px, 100%);margin:8px auto 0;color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.6;min-height:0;font-weight:400;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.8)}
    .hero-listen-wrap{margin-top:12px;display:flex;justify-content:center}

    /* Glossy amber pill buttons (reference-style: bright top highlight, dark text). */
    .hero-listen-btn,.platform,.subpage-link,.video-channel-mainbtn,.contact-submit,.youtube-cover-link{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;
      border-radius:12px;border:none;background:var(--amber-gloss);color:var(--button-text);
      font-family:var(--font-button);font-weight:400;letter-spacing:.04em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -8px 14px rgba(180,110,10,.25), 0 10px 24px rgba(224,137,12,.3), 0 0 0 1px rgba(245,179,1,.28);
      transition:background .2s ease, box-shadow .2s ease, filter .2s ease, color .2s ease, transform .16s ease;
      position:relative;overflow:hidden;text-transform:none;
    }
    .contact-submit::after{
      content:"";position:absolute;top:0;left:-60%;width:32%;height:100%;
      background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
      transform:skewX(-20deg);pointer-events:none;
      animation:goldButtonShine 4s cubic-bezier(.55,0,.1,1) infinite;
    }
    @keyframes goldButtonShine{0%{left:-60%}42%{left:130%}100%{left:130%}}
    body.black-bg .contact-submit::after{display:none}
    .hero-listen-btn{min-height:76px;padding:0 66px;font-family:var(--font-button);font-weight:400;font-size:1.62rem;letter-spacing:.06em}
    .hero-listen-btn:hover,.platform:hover,.subpage-link:hover,.contact-submit:hover,.youtube-cover-link:hover{
      background:var(--amber-grad-hover);color:var(--button-text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 14px rgba(180,110,10,.2), 0 16px 34px rgba(224,137,12,.42), 0 0 26px rgba(245,179,1,.4), 0 0 0 1px rgba(255,214,120,.5);
      filter:brightness(1.05);transform:translateY(-2px);
    }

    .subpage-shell,.smart-link-shell{display:none}
    .subpage-shell.active,.smart-link-shell.active{display:block}

    section{padding:44px 0}
    .section-title,.gold-3d-text{
      font-family:var(--font-heading);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--amber);
      filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
    }
    .section-title{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 26px;font-size:clamp(1.4rem, 2.7vw, 2.2rem);text-align:center}
    @supports (background-clip:text) or (-webkit-background-clip:text){
      .section-title,.gold-3d-text{
        background-image:var(--gold-tex);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
        color:transparent;
        animation:sectionGlow 3.4s ease-in-out infinite;
      }
    }
    /* ==== animated glows: dividing line, bubble outlines, headings ==== */
    @keyframes lineGlowPulse{0%,100%{box-shadow:0 0 6px rgba(245,179,1,.22), 0 0 16px rgba(245,179,1,.06)}50%{box-shadow:0 0 16px rgba(245,179,1,.6), 0 0 40px rgba(245,179,1,.26)}}
    @keyframes lineGlowPulseWhite{0%,100%{box-shadow:0 0 6px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.06)}50%{box-shadow:0 0 16px rgba(255,255,255,.62), 0 0 40px rgba(255,255,255,.28)}}
    @keyframes bubbleGlow{0%,100%{box-shadow:0 0 6px rgba(245,179,1,.22), 0 0 16px rgba(245,179,1,.06), 0 24px 56px rgba(0,0,0,.55)}50%{box-shadow:0 0 16px rgba(245,179,1,.6), 0 0 40px rgba(245,179,1,.26), 0 24px 56px rgba(0,0,0,.55)}}
    @keyframes bubbleGlowWhite{0%,100%{box-shadow:0 0 6px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.06), 0 24px 56px rgba(0,0,0,.6)}50%{box-shadow:0 0 16px rgba(255,255,255,.62), 0 0 40px rgba(255,255,255,.28), 0 24px 56px rgba(0,0,0,.6)}}
    @keyframes mediaGlow{0%,100%{box-shadow:0 0 6px rgba(245,179,1,.22), 0 0 16px rgba(245,179,1,.06), 0 18px 40px rgba(0,0,0,.5)}50%{box-shadow:0 0 16px rgba(245,179,1,.6), 0 0 40px rgba(245,179,1,.26), 0 18px 40px rgba(0,0,0,.5)}}
    @keyframes mediaGlowWhite{0%,100%{box-shadow:0 0 6px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.6)}50%{box-shadow:0 0 16px rgba(255,255,255,.62), 0 0 40px rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.6)}}
    @keyframes headingGlow{0%,100%{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(245,179,1,.45))}50%{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(245,179,1,.75))}}
    @keyframes headingGlowWhite{0%,100%{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,255,255,.4))}50%{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(255,255,255,.7))}}
    .eyebrow-text{animation:headingGlow 3.4s ease-in-out infinite}
    header::after,.bottom-fixed-wrap::before{animation:lineGlowPulse 3.4s ease-in-out infinite}
    body.black-bg header::after,body.black-bg .bottom-fixed-wrap::before{animation:lineGlowPulseWhite 3.4s ease-in-out infinite}
    .panel:not(.social-panel):not(.gold-fill-panel),
    .contact-subpage.open,.contact-form-card:not(.closed){animation:bubbleGlow 3.4s ease-in-out infinite}
    .youtube-channel-cover{animation:mediaGlow 3.4s ease-in-out infinite}
    .video-card{animation:none}
    body.black-bg .panel:not(.social-panel):not(.gold-fill-panel),
    body.black-bg .contact-subpage.open,body.black-bg .contact-form-card:not(.closed){animation:bubbleGlowWhite 3.4s ease-in-out infinite}
    body.black-bg .youtube-channel-cover{animation:mediaGlowWhite 3.4s ease-in-out infinite}
    body.black-bg .video-card{animation:none}
    .store-preview-card h3,.store-bio__kicker{animation:headingGlowWhite 3.4s ease-in-out infinite}

    /* "breathing" glow that dies ALL the way down, then comes back */
    @keyframes sectionGlow{
      0%,100%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(245,179,1,.5))}
      50%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(245,179,1,.8))}
    }
    .section-title::before,.section-title::after{content:"";width:min(16vw, 150px);height:1px;background:linear-gradient(90deg, transparent, rgba(245,179,1,.7));opacity:.9}
    .section-title::after{background:linear-gradient(90deg, rgba(245,179,1,.7), transparent)}
    /* Shared "bubble" outline — the same glowing gold hairline as the nav
       dividing line, on every panel / card / bubble across the subpages.
       Store pages get the monochrome version further down. */
    .panel:not(.social-panel),.subpage-card,.contact-subpage,.contact-form-card{
      position:relative;background:var(--panel-bg);
      border:1px solid rgba(255,222,140,.7);border-radius:var(--radius);
      box-shadow:0 0 12px rgba(245,179,1,.4), 0 0 30px rgba(245,179,1,.15), 0 24px 56px rgba(0,0,0,.55);
      overflow:hidden;
    }
    body.black-bg .panel:not(.social-panel),body.black-bg .subpage-card,body.black-bg .contact-subpage,body.black-bg .contact-form-card{
      border:1px solid rgba(244,244,247,.72) !important;
      box-shadow:0 0 12px rgba(255,255,255,.4), 0 0 30px rgba(200,200,210,.2), 0 24px 56px rgba(0,0,0,.6);
    }
    .social-panel,body.black-bg .social-panel{border:none!important;background:none!important;box-shadow:none!important}
    @keyframes panelBorderShimmer{0%{background-position:0% 50%}100%{background-position:280% 50%}}
    body.black-bg .panel::before{display:none}
    .panel::before{content:none}

    /* media frames get the glowing gold hairline (bio photo, music video cover,
       whole video card — NOT the inner thumb, so there's one outline per card) */
    .about-image,.video-card,.youtube-channel-cover{
      position:relative;border-radius:18px;overflow:hidden;
      border:1px solid rgba(245,179,1,.5);
      box-shadow:0 0 0 1px rgba(245,179,1,.12), 0 0 22px rgba(245,179,1,.14), 0 18px 40px rgba(0,0,0,.5);
      background:var(--panel-bg);
    }
    .video-thumb{position:relative;border-radius:0;overflow:hidden;border:0;box-shadow:none;background:var(--panel-bg)}
    body.black-bg .about-image,body.black-bg .video-card,body.black-bg .youtube-channel-cover{
      border-color:rgba(255,255,255,.5) !important;
      box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 22px rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.6);
    }
    .about-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center}
    .about-image{position:relative;z-index:6;min-height:230px;display:flex;align-items:center;justify-content:center;padding:12px;background:#000}
    .about-profile-img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
    .about-copy h3{margin:0 0 6px;font-size:2.2rem;color:var(--amber);text-transform:uppercase;letter-spacing:.24em;line-height:1.2;font-weight:400}
    .bio-echoes{color:var(--text);font-size:1.5rem;letter-spacing:.02em;margin:0 0 16px;line-height:1.2}
    .about-tags{color:var(--amber);font-size:1.02rem;margin-bottom:18px;line-height:1.9;font-weight:500;letter-spacing:.04em}
    .about-copy p{color:var(--text-dim);line-height:1.85;margin:0 0 18px}
    .about-body{color:var(--text-dim);line-height:1.85}
    .about-body p{margin:0 0 18px;font-weight:400}
    .about-body p:last-child{margin-bottom:0}
    /* first paragraph reads as a lead — bold + brighter; the rest is regular */
    .about-body .lead,.about-body p:first-child{color:var(--text-dim);font-weight:400}
    .store-bio-body{max-width:760px;margin:6px auto 0;overflow:visible;padding-bottom:14px}
    /* optional image under the Tour heading (set from content.js) */
    .tour-image{margin:0 0 22px}
    .tour-image img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line-amber);display:block}

    .release-card{display:grid;grid-template-columns:minmax(420px, 46%) 1fr;gap:28px;align-items:start;padding:22px}
    .youtube-channel-cover{position:relative;aspect-ratio:16/9;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.74)), #000;overflow:hidden}
    .youtube-cover-thumb{width:100%;height:100%;position:absolute;inset:0;background:center center / cover no-repeat;opacity:.45;filter:saturate(.9) contrast(1.02);transition:opacity .22s ease}
    .youtube-cover-inner{position:absolute;inset:0;z-index:2;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;transition:opacity .22s ease, visibility .22s ease}
    .latest-video-icon-trigger{position:relative;display:grid;place-items:center;width:170px;height:118px;background:transparent;border:none;padding:0;cursor:pointer;transition:filter .18s ease, opacity .18s ease, transform .18s ease}
    .latest-video-icon-trigger:hover{filter:none;opacity:1;transform:translateY(-1px)}
    .latest-video-icon-trigger:hover .latest-video-youtube-shape{background:rgba(0,0,0,.78)}
    .latest-video-youtube-shape{position:relative;display:block;width:142px;height:100px;border-radius:32px;background:rgba(0,0,0,.64);transition:background .18s ease}
    .latest-video-youtube-triangle{position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);display:block;width:0;height:0;border-top:19px solid transparent;border-bottom:19px solid transparent;border-left:33px solid #ffffff}
    .latest-watch-now-btn{min-height:52px;padding:0 24px;font-size:1rem;font-weight:800;letter-spacing:.04em}
    .video-card-link-layer{transition:opacity .22s ease, visibility .22s ease}
    .youtube-player-host{position:absolute;inset:0;z-index:4;background:#000;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transition:opacity .22s ease, visibility .22s ease}
    .youtube-player-host > div{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;overflow:hidden !important}
    .youtube-player-host iframe{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;border:0 !important;display:block !important}
    .youtube-channel-cover.player-active .youtube-player-host{opacity:1;visibility:visible;pointer-events:auto}
    .youtube-channel-cover.player-active .youtube-cover-thumb,.youtube-channel-cover.player-active .youtube-cover-inner,.youtube-channel-cover.player-active .video-card-link-layer{opacity:0;visibility:hidden;pointer-events:none}
    .release-meta h3{margin:0 0 10px;font-family:'Space Grotesk','Cinzel',sans-serif;font-size:1.5rem;line-height:1.2;min-height:1.2em;opacity:0;visibility:hidden}
    .release-meta h3.has-title{opacity:1;visibility:visible}
    .release-meta p{margin:0 0 18px;color:var(--muted);line-height:1.7;min-height:1.4em;opacity:0;visibility:hidden}
    .release-meta p.has-date{opacity:1;visibility:visible}
    .audio-bar{display:flex;align-items:center;gap:16px;margin:18px 0}
    .play{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line-amber);background:var(--surface-2);color:var(--amber);box-shadow:0 0 18px rgba(245,179,1,.14), inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer}
    .track{flex:1}
    .track-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px;font-weight:700}
    .progress{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid var(--line);cursor:pointer}
    .progress span{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;background:var(--amber-grad)}
    .track-time{margin-top:8px;font-size:.86rem;color:var(--text-faint);text-align:right}
    /* Spotify / Apple Music / SoundCloud / Amazon — equal width, one row, icon centred */
    .platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
    .platforms .platform{width:100%;min-width:0;justify-content:center;align-items:center;gap:9px;min-height:60px;padding:0 6px;white-space:nowrap;font-size:.98rem;font-weight:800;letter-spacing:0;border-radius:14px;overflow:hidden;border:none !important;box-shadow:none !important}
    .platforms .platform i{font-size:1.85rem;line-height:1;flex:none}
    #spotifyLink i{color:#1DB954}
    #appleMusicLink i{color:#000000}
    #soundCloudLink i{color:#ffffff}
    #amazonMusicLink i{color:#000000}
    .platforms .platform-icon-img{height:34px !important;max-width:46px !important;filter:none !important}

    /* ---- brand-styled platform buttons (icon recoloured, button in brand colour, matching glow) ---- */
    #appleMusicLink{background:#ffffff !important;color:#000000 !important}
    #appleMusicLink .platform-icon-img{filter:brightness(0) !important}
    #appleMusicLink:hover{background:#f2f2f2 !important;color:#000 !important;box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 22px rgba(255,255,255,.6) !important}

    #spotifyLink{background:#000000 !important;color:#1DB954 !important;border:none !important}
    #spotifyLink .platform-icon-img{filter:brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(541%) hue-rotate(87deg) brightness(93%) contrast(89%) !important}
    #spotifyLink:hover{background:#0a0a0a !important;color:#1DB954 !important;box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 24px rgba(29,185,84,.6), 0 0 44px rgba(29,185,84,.3) !important}

    #soundCloudLink{background:linear-gradient(135deg,#ff8800 0%,#ff5500 55%,#ff3300 100%) !important;color:#ffffff !important}
    #soundCloudLink .platform-icon-img{filter:brightness(0) invert(1) !important}
    #soundCloudLink:hover{filter:brightness(1.05);color:#fff !important;box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 26px rgba(255,102,0,.65), 0 0 46px rgba(255,68,0,.32) !important}

    #amazonMusicLink{background:#00A8E1 !important;color:#000000 !important}
    #amazonMusicLink .platform-icon-img{filter:brightness(0) !important}
    #amazonMusicLink:hover{background:#0fb6ef !important;color:#000 !important;box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 26px rgba(0,168,225,.65), 0 0 46px rgba(0,168,225,.32) !important}
    @media (max-width:720px){.platforms{grid-template-columns:repeat(4,1fr);gap:6px}.platforms .platform{min-height:52px;font-size:.66rem;padding:0 3px;gap:5px;flex-direction:column}.platforms .platform i{font-size:1.35rem}}

    .video-page-wrap{display:grid;gap:24px}
    .video-grid-18{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;margin-top:18px}
    .video-card{overflow:hidden;opacity:1;transform:none}
    .video-card.video-roll-prep{opacity:0;transform:translateY(-26px)}
    .video-card.video-roll-in{animation:videoRollIn .65s cubic-bezier(.22,.9,.22,1) forwards}
    .video-thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.95)), #000;background-size:cover;background-position:center}
    .video-thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(255,203,112,.14), transparent 20%), linear-gradient(180deg, rgba(255,213,148,.02), rgba(0,0,0,.12) 60%, rgba(0,0,0,.48))}
    .play-large{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
    .video-play-plate{position:relative;display:block;width:142px;height:100px;border-radius:32px;background:rgba(0,0,0,.64);box-shadow:none;transition:background .18s ease, transform .18s ease, opacity .18s ease}
    .video-thumb:hover .video-play-plate{background:rgba(0,0,0,.78);transform:translateY(-1px)}
    .video-play-triangle{position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);display:block;width:0;height:0;border-top:19px solid transparent;border-bottom:19px solid transparent;border-left:33px solid #ffffff}
    .video-info{display:none}
    .video-info h4{margin:0;font-size:.78rem;line-height:1.3;letter-spacing:.02em;color:var(--amber);text-shadow:0 0 12px rgba(245,179,1,.35);opacity:0;visibility:hidden}
    body.black-bg .video-info h4{color:#ffffff;text-shadow:none}
    .video-info h4.has-title{opacity:1;visibility:visible}
    .video-date{font-size:.88rem;color:var(--muted);line-height:1.4;opacity:0;visibility:hidden}
    .video-date.has-date{opacity:1;visibility:visible}

    .video-subscribe-standalone{display:none;justify-content:center;padding-top:56px;padding-bottom:22px;margin-bottom:0}
    body.video-mode .video-subscribe-standalone{display:flex}
    .video-channel-inline-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--text)}
    .video-channel-iconbox{width:72px;height:72px;display:grid;place-items:center;border-radius:16px;overflow:hidden;flex:0 0 auto}
    body.video-mode .video-channel-iconbox{transform:translateY(8px)}
    .video-channel-avatar{width:100%;height:100%;object-fit:cover}
    .video-channel-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;transform:translateX(-4px)}
    .video-channel-headline{font-family:'Space Grotesk','Cinzel',sans-serif;font-size:1.12rem}
    /* Subscribe unit — button + white count pill move together, lift on hover, NO gold glow */
    .video-channel-row{display:flex;align-items:center;justify-content:flex-start;gap:0;flex-wrap:nowrap;border-radius:10px;transition:transform .18s ease, box-shadow .18s ease}
    .video-channel-row:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
    .video-channel-mainbtn{min-height:42px;padding:0 16px;border-radius:10px 0 0 10px;border:1px solid rgba(255,90,90,.45);border-right:none;transform:none!important;background:var(--subscribe-red);color:#fff;font-size:.94rem;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.32)}
    .video-channel-mainbtn i{color:#fff}
    .video-channel-mainbtn:hover{transform:none!important;background:var(--subscribe-red-hover);color:#fff;border-color:rgba(255,110,110,.55);box-shadow:none}
    .video-channel-subs{min-height:42px;padding:0 14px;border-radius:0 10px 10px 0;border:1px solid rgba(255,255,255,.78);background:#ffffff;color:#000000;font-weight:800;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}

    .subpage-card{padding:28px}
    .subpage-join-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
    .subpage-join-item{
      position:relative;overflow:hidden;padding:40px 32px;min-height:420px;height:auto;
      display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;text-align:center;
      cursor:pointer;transition:box-shadow .3s ease;
    }
    .subpage-join-item:hover{box-shadow:0 22px 54px rgba(0,0,0,.4);z-index:2}
    .subpage-join-item i{font-size:6.6rem;transition:transform .55s cubic-bezier(.22,.9,.28,1), font-size .55s cubic-bezier(.22,.9,.28,1), margin-bottom .55s cubic-bezier(.22,.9,.28,1);flex:none}
    /* open state shrinks the icon (real layout size, not just scale) so the
       reveal + Join button always fit inside the card */
    .subpage-join-item.is-open i,.subpage-join-item:hover i{font-size:4rem;margin-bottom:0}
    .community-reveal{
      display:flex;flex-direction:column;align-items:center;gap:14px;flex:none;
      max-height:0;opacity:0;overflow:hidden;margin-top:0;max-width:100%;
      transition:max-height .75s cubic-bezier(.22,.9,.28,1), opacity .6s ease .12s, margin-top .75s cubic-bezier(.22,.9,.28,1);
    }
    .subpage-join-item.is-open .community-reveal{max-height:280px;opacity:1;margin-top:16px}
    .subpage-join-item h4{margin:0 0 2px;font-size:1.7rem}
    .community-welcome{margin:0 0 4px;color:rgba(255,255,255,.94);font-size:1.02rem;line-height:1.7;max-width:340px;min-height:1.7em}

    /* Discord & Reddit — glassy gradient brand backgrounds (not flat solid) */
    #discordCard{
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.4), transparent 42%),
        linear-gradient(150deg, #8b98ff 0%, #5865F2 48%, #414bb8 100%);
      border:3px solid #000000;border-radius:24px;
    }
    #discordCard .discord-icon,#discordCard h4{color:#ffffff}
    #discordCard .platform{background:#ffffff;color:#5865F2;border-color:#ffffff}
    #discordCard .platform:hover{background:rgba(255,255,255,.88);color:#5865F2}
    #redditCard{
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.4), transparent 42%),
        linear-gradient(150deg, #ff8a5c 0%, #FF4500 48%, #c73800 100%);
      border:3px solid #000000;border-radius:24px;
    }
    #redditCard .reddit-icon,#redditCard h4{color:#ffffff}
    #redditCard .platform{background:#ffffff;color:#FF4500;border-color:#ffffff}
    #redditCard .platform:hover{background:rgba(255,255,255,.88);color:#FF4500}
    #steamCard{
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.28), transparent 42%),
        linear-gradient(150deg, #2a475e 0%, #1b2838 55%, #0e1621 100%);
      border:3px solid #000000;border-radius:24px;
    }
    #steamCard .steam-icon,#steamCard h4{color:#ffffff}
    #steamCard .platform{background:#ffffff;color:#1b2838;border-color:#ffffff}
    #steamCard .platform:hover{background:rgba(255,255,255,.88);color:#1b2838}
    /* black outline by default; on hover each card glows in ITS OWN brand colour */
    #discordCard,#redditCard,#steamCard{transition:box-shadow .3s ease, transform .28s ease, border-color .3s ease}
    #discordCard:hover{border-color:#5865F2 !important;box-shadow:0 0 0 2px #5865F2, 0 0 28px rgba(88,101,242,.7), 0 0 60px rgba(88,101,242,.35), 0 22px 54px rgba(0,0,0,.4) !important}
    #redditCard:hover{border-color:#FF4500 !important;box-shadow:0 0 0 2px #FF4500, 0 0 28px rgba(255,69,0,.7), 0 0 60px rgba(255,69,0,.35), 0 22px 54px rgba(0,0,0,.4) !important}
    #steamCard:hover{border-color:#66c0f4 !important;box-shadow:0 0 0 2px #66c0f4, 0 0 28px rgba(102,192,244,.7), 0 0 60px rgba(102,192,244,.35), 0 22px 54px rgba(0,0,0,.4) !important}
    @media (max-width:900px){
      .subpage-join-grid{grid-template-columns:1fr}
    }

    .contact-subpage-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
    .contact-subpage,.contact-form-card{width:min(920px,100%)}
    .contact-subpage{padding:30px 26px;text-align:center;display:block;max-height:1200px;opacity:1;transform:translateY(0);transition:max-height .52s ease, opacity .32s ease, transform .32s ease, padding-top .32s ease, padding-bottom .32s ease, border-color .24s ease}
    .contact-subpage h2,.contact-form-card h2{margin:0 0 30px;font-family:'Space Grotesk','Cinzel',sans-serif;font-size:2.4rem;text-align:center;color:var(--gold)}
    .contact-subpage-list{display:grid;gap:24px;text-align:center}
    .contact-subpage-item h4{margin:0 0 10px;font-family:'Space Grotesk','Cinzel',sans-serif;font-size:1.1rem;color:var(--gold)}
    .contact-subpage-item p{margin:0;font-size:.96rem;line-height:2;color:var(--text-dim)}
    .contact-subpage-item a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:color .18s ease,border-color .18s ease,text-shadow .18s ease}
    .contact-subpage-item a:hover{color:#ffffff;border-color:rgba(255,255,255,.7);text-shadow:0 0 12px rgba(255,255,255,.4)}
    .contact-mail-trigger-wrap{display:flex;justify-content:center;margin:2px 0 6px}
    .contact-mail-trigger{display:inline-flex;align-items:center;justify-content:center;width:132px;height:132px;border:none;background:transparent;color:var(--gold);font-size:4.15rem;cursor:pointer;filter:drop-shadow(0 10px 24px rgba(0,0,0,.24));transition:transform .16s ease, filter .2s ease, opacity .2s ease, color .2s ease;text-shadow:none;opacity:.85}
    .contact-mail-trigger:hover{transform:translateY(-2px);color:var(--gold-strong);filter:drop-shadow(0 0 18px rgba(255,178,60,.18)) drop-shadow(0 10px 24px rgba(0,0,0,.24));opacity:1}
    .contact-form-card{padding:30px 26px;display:block;max-height:1800px;opacity:1;overflow:hidden;transform:translateY(0);transition:max-height .52s ease, opacity .32s ease, transform .32s ease, padding-top .32s ease, padding-bottom .32s ease, border-color .24s ease}
    .contact-form-card.closed{max-height:0;opacity:0;transform:translateY(-12px);padding-top:0;padding-bottom:0;border-color:transparent}
    .contact-subpage{max-height:0;opacity:0;overflow:hidden;transform:translateY(-12px);padding-top:0;padding-bottom:0;border-color:transparent}
    .contact-subpage.open{max-height:1200px;opacity:1;transform:translateY(0);padding-top:30px;padding-bottom:26px;border-color:rgba(245,179,1,.4)}
    body.black-bg .contact-subpage.open{border-color:rgba(255,255,255,.4) !important}
    /* a collapsed bubble must show no outline / glow at all */
    .contact-subpage:not(.open),.contact-form-card.closed{box-shadow:none !important;border-color:transparent !important}
    .contact-form{display:grid;gap:16px;text-align:left}
    .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .form-grid-3{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:16px}
    .form-field{display:grid;gap:8px}
    .form-field label{font-size:.9rem;font-weight:700;color:var(--amber)}
    .form-input,.form-textarea,.form-select,.phone-wrap select{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:12px;padding:14px 14px;font:inherit;outline:none;transition:border-color .18s ease, box-shadow .18s ease}
    .form-input:focus,.form-textarea:focus,.form-select:focus,.phone-wrap select:focus{border-color:rgba(245,179,1,.55);box-shadow:0 0 0 3px rgba(245,179,1,.14)}
    .form-input::placeholder,.form-textarea::placeholder{color:var(--text-faint)}
    .form-textarea{min-height:170px;resize:vertical}
    /* country-code select must sit ON the line, same height, fully visible */
    .phone-wrap{display:grid;grid-template-columns:minmax(128px,auto) 1fr;gap:10px;align-items:stretch}
    .phone-wrap select,.phone-wrap input{min-height:52px;height:52px}
    .phone-wrap select{padding:0 30px 0 12px;line-height:52px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
    /* The text fonts come FIRST and the emoji fonts last. Listed the other way
       round, Android took the digits from Noto Color Emoji — which carries its
       own 0-9 glyphs for keycaps, sitting on a different baseline — so "+420"
       showed the plus on the line and the numbers dropped below it. Only the
       flag, which no text font has, falls through to the emoji face now. */
    .phone-wrap select,#phoneCode,
    .phone-wrap select option,#phoneCode option{
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
    }
    .files-note,.form-note,.form-status{font-size:.84rem;color:var(--muted)}
    .contact-form-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center}
    .hidden-website{display:none}
    select option{background:#000;color:#fff}
    .field-error{border-color:#ff4d4f!important;box-shadow:0 0 0 1px rgba(255,77,79,.55), 0 0 18px rgba(255,77,79,.35)!important;animation:errorPulseDouble .72s ease}

    .smart-link-page{position:relative;min-height:calc(100vh - 74px);display:flex;align-items:center;justify-content:center;padding:72px 0 32px;overflow:hidden}
    .smart-link-page::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 45% at 50% 30%, rgba(245,179,1,.14), transparent 70%);opacity:1;pointer-events:none}
    .smart-link-page::after{content:none}
    .smart-link-inner{position:relative;z-index:2;width:min(560px, 100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
    .smart-link-top{margin-bottom:26px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
    .smart-profile-link{width:368px;height:368px;margin:0 auto 20px;position:relative;border-radius:34px;overflow:hidden;border:1px solid var(--media-border);box-shadow:0 0 0 1px rgba(242,193,78,.14), 0 18px 40px rgba(0,0,0,.34);display:block;background:rgba(0,0,0,.14)}
    .smart-profile-link img{width:100%;height:100%;object-fit:cover}
    .smart-profile-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:170px;height:118px;background:transparent;border:none;box-shadow:none;transition:filter .18s ease, opacity .18s ease}
    .smart-profile-play:hover{filter:none;opacity:1}
    .smart-profile-play:hover .smart-play-youtube-shape{background:rgba(0,0,0,.78)}
    .smart-play-youtube-shape{position:relative;display:block;width:142px;height:100px;border-radius:32px;background:rgba(0,0,0,.64)}
    .smart-play-youtube-triangle{position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);display:block;width:0;height:0;border-top:19px solid transparent;border-bottom:19px solid transparent;border-left:33px solid #ffffff}
    .smart-title{margin:0;text-align:center;font-family:'Space Grotesk','Cinzel',sans-serif;font-size:1.52rem;line-height:1.16;max-width:100%;min-height:2.8em;opacity:0;visibility:hidden}
    .smart-title.has-title{opacity:1;visibility:visible}
    .smart-available{margin:10px 0 0;text-align:center;color:#000000;font-size:1.7rem;font-weight:800;letter-spacing:.02em}
    .smart-link-card{position:relative;width:100%;padding:0;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(4,4,4,.97);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);overflow:hidden;backdrop-filter:blur(8px)}
    .smart-link-card::before{content:none}
    .smart-platform-list{display:grid;gap:0}
    .smart-platform-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:104px;padding:0 0 0 16px;border-bottom:1px solid rgba(255,255,255,.14);background:transparent;transition:background .18s ease}
    .smart-platform-row:last-child{border-bottom:none}
    .smart-platform-row:hover{background:rgba(242,193,78,.14);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35), 0 0 24px rgba(242,193,78,.22)}
    .smart-platform-name{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;min-width:0;overflow:hidden}
    .smart-platform-icon{display:block;width:auto;height:132px;max-width:290px;object-fit:contain;object-position:left center;opacity:1;visibility:visible;flex:0 1 auto}
    .smart-play-btn{min-width:104px;height:104px;border-left:1px solid rgba(255,255,255,.14);background:transparent;color:#ffffff;font-weight:800;font-size:1.15rem;letter-spacing:.08em;display:inline-flex;align-items:center;justify-content:center}
    .smart-play-btn.disabled{cursor:default;opacity:.56}

    .bottom-fixed-wrap{margin-top:auto;width:100%;position:relative;z-index:5;flex-shrink:0;background:#000000}
    /* The gold dividing line ABOVE the social icons — identical to header::after
       so the nav strip and the social strip share the same bordered look. */
    .bottom-fixed-wrap::before{
      content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:6;pointer-events:none;
      background:linear-gradient(90deg, transparent, rgba(245,179,1,.6) 18%, rgba(255,222,140,.95) 50%, rgba(245,179,1,.6) 82%, transparent);
      box-shadow:0 0 12px rgba(245,179,1,.4), 0 0 30px rgba(245,179,1,.15);
      opacity:.95;
    }
    body.black-bg .bottom-fixed-wrap::before{
      background:linear-gradient(90deg, transparent, #b6b6bf 14%, #f4f4f7 50%, #b6b6bf 86%, transparent);
      box-shadow:0 0 12px rgba(255,255,255,.4), 0 0 30px rgba(200,200,210,.2);
      opacity:1;
    }
    /* Store bottom band = same silver gradient as the top nav bar; black icons + legal on it */
    body.black-bg .bottom-fixed-wrap{background:linear-gradient(180deg,#dedee1 0%,#ececed 42%,#ffffff 100%)}
    body.black-bg .social-img{filter:brightness(0) !important}
    body.black-bg .footer-legal-img{filter:brightness(0) !important}
    body.black-bg .social:hover .social-img{filter:brightness(0) drop-shadow(0 0 10px rgba(0,0,0,.35)) !important}
    body.black-bg .footer-legal a:hover .gold-img,
    body.black-bg .footer-legal button:hover .gold-img,
    body.black-bg .footer-legal .footer-copy-item:hover .gold-img{filter:brightness(0) drop-shadow(0 0 8px rgba(0,0,0,.3)) !important}
    body.smart-link-mode .bottom-fixed-wrap::before{display:none}
    body.smart-link-mode #contact{display:none!important}
    .social-footer-stack{display:flex;flex-direction:column;gap:8px}
    .social-panel{padding:6px 0;opacity:1;width:max-content;max-width:100%;margin:0 auto;background:none!important;border:none!important;box-shadow:none!important;overflow:visible!important;z-index:1}
    .socials{overflow:visible;position:relative;z-index:1}
    .social-panel::before{display:none!important}
    /* Bare icons — no circle, no plate. Bigger. Glow (not dim) on hover. */
    .socials{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;padding:0}
    .social{
      position:relative;display:grid;place-items:center;
      width:auto;height:auto;padding:4px;border:none;background:none;box-shadow:none;border-radius:0;
      color:var(--amber);z-index:1;
      transition:transform .16s ease;
      animation:none;
    }
    .social::before{display:none}
    .social:hover{transform:translateY(-4px) scale(1.08)}
    .social:hover{transform:translateY(-4px)}
    .social:hover .social-img,.social:focus-visible .social-img{
      filter:brightness(1.4) saturate(1.22) drop-shadow(0 0 14px rgba(245,179,1,.75)) !important;
    }
    footer{padding:0 0 18px;text-align:center;color:var(--footer-copy-color)}
    .footer-line{display:block;width:min(1040px, 94%);margin:0 auto 10px;height:1px;border-radius:2px;background:var(--footer-line);opacity:1;position:relative;z-index:30;box-shadow:0 0 8px rgba(245,179,1,.2);transform:translateZ(0);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
    body.video-mode .footer-line{height:1px;opacity:1;position:relative;z-index:40;box-shadow:0 0 8px rgba(245,179,1,.25)}
    .footer-copy{opacity:1}
    /* Single row: © 2026 URHEIM | Privacy Policy | Terms of Use | Cookies Policy | Cookies Settings */
    .footer-legal{
      margin-top:12px;
      font-family:var(--font-eyebrow);
      color:var(--footer-copy-color);
      text-shadow:none;
      display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
    }
    /* the "|" between legal words is a mini dividing line — gold + glow */
    .footer-legal .sep{
      display:inline-flex;align-items:center;justify-content:center;
      color:var(--amber);opacity:1;font-family:var(--font-eyebrow);
      font-size:1.15rem;line-height:1;user-select:none;
      text-shadow:0 0 8px rgba(245,179,1,.75), 0 0 18px rgba(245,179,1,.4);
    }
    body.black-bg .footer-legal .sep{color:#000;text-shadow:none;opacity:.55}
    .footer-legal a,
    .footer-legal button,
    .footer-legal .footer-copy-item{
      color:var(--footer-copy-color);
      text-decoration:none;background:none;border:0;padding:0;margin:0;font:inherit;
      display:inline-flex;align-items:center;
      transition:color .18s ease, text-shadow .18s ease, filter .2s ease;
    }
    .footer-legal a,.footer-legal button{cursor:pointer}
    .footer-legal .footer-copy-item{cursor:default}
    body.smart-link-mode footer{display:none}
    .smart-link-bottom-bar{display:none}
    body.smart-link-mode .smart-link-bottom-bar{display:flex;position:relative;left:auto;right:auto;bottom:auto;min-height:86px;flex-direction:column;gap:6px;align-items:center;justify-content:center;background:#000000;backdrop-filter:blur(8px);border-top:none;box-shadow:0 -8px 24px rgba(0,0,0,.18);z-index:60;padding:14px 16px;color:#ffffff;text-align:center}
    .smart-link-privacy-status,.smart-link-affiliate{font-size:.98rem;line-height:1.45}
    .smart-link-affiliate{color:#ffffff}
    .smart-link-privacy-open{border:0;background:none;color:#ffffff;font:inherit;padding:0;margin:0;cursor:pointer;text-decoration:none}
    .smart-link-privacy-open strong{font-weight:800}
    .smart-link-privacy-open:hover{text-decoration:none}
    .smart-permissions-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:120}
    .smart-permissions-modal{position:fixed;inset:0;z-index:121;display:flex;align-items:center;justify-content:center;padding:18px;color:#4b4f56;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    .smart-permissions-modal[hidden],.smart-permissions-backdrop[hidden],.smart-cookie-toast[hidden]{display:none!important}
    .smart-permissions-panel{position:relative;width:min(640px, calc(100% - 20px));max-height:min(90vh, 760px);overflow:auto;background:#ffffff;border-radius:8px;padding:18px;box-shadow:0 18px 54px rgba(0,0,0,.38);text-align:left}
    .smart-permissions-close{position:absolute;top:12px;right:12px;border:0;background:none;color:#9aa0a6;font-size:2rem;line-height:1;cursor:pointer;padding:0 4px}
    .smart-permissions-panel h2{margin:0 36px 18px 0;color:#3c4043;font-size:1.36rem;line-height:1.2}
    .smart-permissions-panel p{margin:0 0 14px;line-height:1.45}
    .smart-permissions-panel a{color:#1976c9;font-weight:700;text-decoration:none}
    .smart-permissions-intro{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;margin-bottom:14px}
    .smart-permissions-avatar{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#0b0b0b}
    .smart-permission-choice{border:1px solid #dfe5eb;border-radius:4px;margin:14px 0;overflow:hidden;background:#ffffff}
    .smart-permission-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid #dfe5eb}
    .smart-permission-head h3{margin:0;color:#555;font-size:1.05rem;font-weight:400;line-height:1.2}
    .smart-permission-options{display:flex;gap:10px;align-items:center}
    .smart-permission-option{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#666;font:inherit;font-weight:700;padding:2px 4px;cursor:pointer;border-radius:8px}
    .smart-permission-option::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #d8dee5;background:#ffffff;display:inline-block}
    .smart-permission-option.active[data-value="true"]::before{border-color:#22c77a;background:#22c77a;box-shadow:inset 0 0 0 4px #22c77a}
    .smart-permission-option.active[data-value="false"]::before{border-color:#6f7782;background:#6f7782;box-shadow:inset 0 0 0 4px #6f7782}
    .smart-permission-copy{padding:12px 16px;color:#69707a}
    .smart-permission-details-btn{border:0;background:none;color:#1976c9;font:inherit;font-weight:700;padding:0;margin:0;cursor:pointer}
    .smart-permission-details{margin-top:8px;font-size:.9rem;color:#69707a}
    .smart-permissions-note{color:#69707a}
    .smart-permissions-entity{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #dfe5eb;border-radius:4px;padding:12px 14px;margin:14px 0 22px}
    .smart-permissions-entity span{display:block;color:#7a828c}
    .smart-permissions-entity strong{display:block;color:#3c4043}
    .smart-permissions-save{width:100%;min-height:46px;border:0;border-radius:4px;background:#1976c9;color:#ffffff;font:inherit;font-weight:800;cursor:pointer}
    .smart-cookie-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,16px);z-index:130;display:flex;align-items:center;gap:14px;width:min(420px, calc(100% - 28px));min-height:58px;padding:12px 16px;background:#ffffff;color:#555;border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.28);opacity:0;transition:opacity .18s ease, transform .18s ease}
    .smart-cookie-toast.visible{opacity:1;transform:translate(-50%,0)}
    .smart-toast-check{width:22px;height:22px;display:inline-block;position:relative;flex:0 0 auto}
    .smart-toast-check::before{content:"";position:absolute;left:5px;top:2px;width:8px;height:14px;border:solid #1976c9;border-width:0 3px 3px 0;transform:rotate(45deg)}
    .smart-cookie-toast button{margin-left:auto;border:0;background:none;color:#b0b0b0;font-size:1.8rem;line-height:1;cursor:pointer;padding:0}

    .fade-in-slow{animation:fadeInSlow 1s ease forwards}
    .fade-in-med{animation:fadeInSlow .9s ease forwards}
    .typewriter-target{white-space:normal}

    @keyframes fadeInSlow{from{opacity:0}to{opacity:1}}
    @keyframes videoRollIn{0%{opacity:0;transform:translateY(-26px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes errorPulseDouble{0%{box-shadow:0 0 0 0 rgba(255,77,79,0)}15%{box-shadow:0 0 0 1px rgba(255,77,79,.7),0 0 18px rgba(255,77,79,.45)}35%{box-shadow:0 0 0 1px rgba(255,77,79,.25),0 0 8px rgba(255,77,79,.15)}55%{box-shadow:0 0 0 1px rgba(255,77,79,.7),0 0 18px rgba(255,77,79,.45)}100%{box-shadow:0 0 0 1px rgba(255,77,79,.55),0 0 18px rgba(255,77,79,.35)}}

    @media (max-width:1280px){.video-grid-18{grid-template-columns:repeat(3, minmax(0, 1fr))}}
    @media (max-width:1180px){.video-grid-18{grid-template-columns:repeat(2, minmax(0, 1fr))}}
    /* Below 900px we run at zoom:1, so collapse the nav to the drawer here too
       (a full-width image nav can't fit a phone in landscape / a small tablet). */
    @media (max-width:900px){.nav-links{display:none}.mobile-toggle{display:grid}header{position:fixed;top:0;left:0;right:0}.page-shell{padding-top:74px}}
    @media (max-width:980px){
      .release-card,.about-grid,.subpage-join-grid,.form-grid-2,.form-grid-3{grid-template-columns:1fr}
      .contact-subpage,.contact-form-card{padding-left:18px;padding-right:18px}
      .smart-link-page{padding:46px 0 28px}
      .smart-profile-link{width:296px;height:296px;border-radius:30px}
      .smart-title{font-size:1.34rem}
      .smart-available{font-size:1.15rem}
      .smart-platform-row{min-height:92px;padding-left:12px}
      .smart-platform-icon{height:114px;max-width:240px}
      .smart-play-btn{height:92px;min-width:90px}
      .phone-wrap{grid-template-columns:minmax(120px,auto) 1fr}
      .hero{padding:6px 0 14px;min-height:auto;}
      .hero-watermark{width:min(520px, 76%)}
      .headline-rule{width:min(320px, 68%);margin:2px auto 6px}
      .eyebrow-text{font-size:.86rem;letter-spacing:.44em}
      .subtitle{font-size:clamp(1rem, 3.4vw, 1.4rem)}
      .hero-text{font-size:.92rem;line-height:1.5}
      .hero-listen-btn{min-height:54px;font-size:1.1rem;padding:0 34px}
      .video-subscribe-standalone{padding-top:56px}
      .latest-video-icon-trigger{width:160px;height:112px}
      .latest-video-youtube-shape{width:136px;height:96px}
      .video-play-plate{width:136px;height:96px}
      .video-channel-iconbox{width:68px;height:68px}
      .video-channel-mainbtn,.video-channel-subs{min-height:40px}
    }
    @media (max-width:640px){
      .container{width:min(100% - 16px, var(--container))}
      .community-reveal .platform{min-height:52px;padding:0 30px;font-size:1.05rem}
      .community-reveal h4{font-size:1.5rem}
      .community-welcome{font-size:1rem}
      .hero{padding:4px 0 12px;min-height:auto;}
      .hero-watermark{width:min(86%, 380px);margin:-4px auto -6px}
      .eyebrow-text{font-size:.76rem;letter-spacing:.4em}
      .headline-rule{width:min(70%, 260px);margin:2px auto 5px}
      .subtitle{font-size:1.02rem;letter-spacing:.06em}
      .hero-text{font-size:.86rem;line-height:1.48;width:min(100%, 94%);margin:6px auto 0}
      .hero-listen-wrap{margin-top:9px}
      .hero-listen-btn{min-height:48px;padding:0 24px;font-size:1rem}
      .section-title{font-size:1.3rem;gap:10px;margin:0 0 18px}
      .section-title::before,.section-title::after{width:min(12vw, 70px)}
      .release-meta h3,.about-copy h3,.contact-subpage h2,.contact-form-card h2{font-size:1.45rem}
      .about-copy p,.release-meta p,.contact-subpage-item p{font-size:.88rem;line-height:1.7}
      .platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
      .platform{justify-content:center;min-height:38px;font-size:.78rem;padding:0 8px;gap:6px}
      #subpageMusic .subpage-card{padding:16px}
      #subpageMusic .release-card{gap:12px;padding:12px;margin-top:10px!important}
      #subpageMusic .youtube-channel-cover{border-radius:16px}
      #subpageMusic .youtube-cover-inner{padding:10px;gap:10px}
      #subpageMusic .latest-video-icon-trigger{width:108px;height:76px}
      #subpageMusic .latest-video-youtube-shape{width:92px;height:64px;border-radius:18px}
      #subpageMusic .latest-video-youtube-triangle{border-top-width:12px;border-bottom-width:12px;border-left-width:21px}
      #subpageMusic .latest-watch-now-btn{min-height:36px;padding:0 14px;font-size:.78rem}
      #subpageMusic .release-meta h3{font-size:1.04rem;margin-bottom:6px}
      #subpageMusic .release-meta p{font-size:.78rem;line-height:1.45;margin-bottom:10px}
      #subpageMusic .audio-bar{gap:10px;margin:10px 0}
      #subpageMusic .play{width:42px;height:42px}
      #subpageMusic .track-title{margin-bottom:6px;font-size:.8rem}
      #subpageMusic .track-time{margin-top:5px;font-size:.72rem}
      #subpageMusic .platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
      #subpageMusic .platform{min-height:32px;padding:0 4px;gap:4px;font-size:.62rem;border-radius:10px}
      #subpageMusic .platform i{font-size:.72rem}
      .smart-link-page{padding:34px 0 24px}
      .smart-profile-link{width:252px;height:252px;border-radius:26px;margin-bottom:16px}
      .smart-profile-play{width:144px;height:100px}
      .smart-play-youtube-shape{width:122px;height:86px;border-radius:26px}
      .smart-play-youtube-triangle{border-top-width:16px;border-bottom-width:16px;border-left-width:28px}
      .smart-title{font-size:1.16rem}
      .smart-available{font-size:1.02rem}
      .smart-platform-row{min-height:78px;padding-left:8px;gap:8px}
      .smart-platform-icon{height:92px;max-width:180px}
      .smart-play-btn{min-width:74px;height:78px;font-size:.92rem}
      .social-panel{padding:4px 4px}
      .socials{flex-wrap:wrap;gap:18px;width:100%;max-width:352px;margin:0 auto;justify-content:center}
      .social{padding:0;flex:0 0 auto}
      .socials .social-img{width:56px !important;height:56px !important}
      .phone-wrap{grid-template-columns:minmax(112px,auto) 1fr}
      .video-grid-18{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
      .video-card{border-radius:12px}
      .video-thumb{border-radius:12px}
      .video-info h4{font-size:.48rem;line-height:1.15}
      .video-info{min-height:48px;padding:8px 6px 10px;gap:4px}
      .video-date{font-size:.56rem;line-height:1.15}
      .video-play-plate{width:42px;height:30px;border-radius:10px}
      .video-play-triangle{border-top-width:6px;border-bottom-width:6px;border-left-width:10px}
      .mobile-toggle{font-size:1.35rem}
      .video-channel-iconbox{width:60px;height:60px}
      .video-channel-headline{font-size:.98rem}
      .video-channel-mainbtn,.video-channel-subs{min-height:34px;font-size:.78rem}
      .video-channel-mainbtn{padding:0 12px}
      .video-channel-subs{padding:0 10px}
      /* keep the whole legal row on ONE line like desktop */
      .footer-legal{gap:3px;flex-wrap:nowrap;max-width:100%;padding:0 3px}
      .footer-legal a,.footer-legal button,.footer-legal .footer-copy-item{padding:0 !important}
      .footer-legal .sep{font-size:.62rem}
      .footer-legal .footer-legal-img{height:8.5px !important}
      .contact-mail-trigger{width:102px;height:102px;font-size:3.3rem}
      .video-subscribe-standalone{padding-top:40px;margin-bottom:8px}
      .latest-video-icon-trigger{width:144px;height:100px}
      .latest-video-youtube-shape{width:122px;height:86px;border-radius:26px}
      .latest-video-youtube-triangle{border-top-width:16px;border-bottom-width:16px;border-left-width:28px}
      .latest-watch-now-btn{min-height:46px;padding:0 20px;font-size:.92rem}
      .release-meta h3{font-size:1.22rem}
    }

    body.smart-link-mode .mobile-toggle,
    body.smart-link-mode .mobile-drawer,
    body.smart-link-mode .mobile-drawer-backdrop{display:none !important;}
  
    /* Silktide must not alter the page appearance. */
    #stcm-icon{display:none!important;visibility:hidden!important;pointer-events:none!important}
    #stcm-wrapper{--backdropBackgroundColor:transparent!important;--backdropBackgroundBlur:0!important}
    #stcm-backdrop{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
    html,body,body.silktide-consent-open{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

    /* ===== Tour page — date/city/event/tickets table ===== */
    .tour-table{display:flex;flex-direction:column;margin-top:8px}
    .tour-row{
      display:grid;grid-template-columns:150px 1fr 1.3fr 120px;gap:20px;align-items:center;
      padding:22px 8px;border-bottom:1px solid var(--panel-border);
    }
    .tour-row--head{
      padding:0 8px 14px;border-bottom:1px solid var(--line-amber);
      font-family:'Space Grotesk','Cinzel',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
    }
    .tour-row__date{font-family:'Space Grotesk','Cinzel',sans-serif;color:var(--gold);font-size:1.05rem;letter-spacing:.03em}
    .tour-row__city{color:var(--text);font-size:1rem;display:flex;flex-direction:column;gap:2px}
    .tour-row__venue{color:var(--muted);font-size:.86rem}
    .tour-row__event{color:var(--muted-dark);font-size:.98rem}
    .tour-row__tickets{
      justify-self:end;display:inline-flex;align-items:center;justify-content:center;
      min-height:38px;padding:0 20px;border-radius:10px;border:1px solid var(--line-amber);
      background:transparent;color:var(--gold);font-weight:700;font-size:.82rem;letter-spacing:.04em;
      text-transform:uppercase;transition:background .18s ease,color .18s ease;
    }
    .tour-row__tickets:hover{background:var(--button-bg);color:var(--button-text)}
    .tour-empty{padding:34px 10px;text-align:center;color:var(--muted-dark)}
    .tour-empty i{font-size:2.2rem;color:var(--gold-strong);margin-bottom:14px;display:block}
    @media (max-width:760px){
      .tour-row--head{display:none}
      .tour-row{grid-template-columns:1fr;text-align:center;gap:8px;padding:22px 10px}
      .tour-row__tickets{justify-self:center;margin-top:6px}
    }

    /* ===== Black background mode (Tour, Contact, and the whole Store section) ===== */
    body.black-bg{background:transparent}
    body.black-bg::after{display:none!important}
    /* the same soft central glow as the main-site hero, in silver */
    body.black-bg::before{
      display:block!important;
      background:
        radial-gradient(46vw 34vw at 50% 4%, rgba(255,255,255,.09), transparent 66%),
        radial-gradient(40vw 30vw at 84% 92%, rgba(210,210,220,.05), transparent 66%);
      animation:none!important;
      filter:none!important;
    }
    body.black-bg .main-content-wrap::before{display:none}
    body.black-bg .hero::before{background:#000;filter:none}

    /* Store section nav bar: white bar, black text/icons, page body stays black */
    /* Store nav bar: silver band, big spread-out labels like the main site nav */
    body.black-bg header{background:linear-gradient(180deg,#ffffff 0%,#ececed 60%,#dedee1 100%);border-bottom:none;box-shadow:none}
    body.black-bg .nav-links{font-size:1.55rem;gap:clamp(20px,2.6vw,36px);width:auto;justify-content:center}
    body.black-bg .nav-links a{letter-spacing:.06em;text-transform:uppercase}
    body.black-bg .nav-links a{color:#000000 !important;font-weight:700;text-shadow:none;background:none !important;-webkit-text-fill-color:initial !important;animation:none !important;-webkit-text-stroke:0 transparent !important;transition:transform .16s ease}
    /* hover = ZOOM, no glow / no fade */
    body.black-bg .nav-links a:hover{color:#000000;opacity:1;text-shadow:none;transform:translateY(-4px)}
    body.black-bg .nav-links a.nav-active{color:#000000;transform:none;text-shadow:0 3px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5)}
    body.black-bg .mobile-toggle{
      left:12px;right:auto;
      color:#000000;
      background:#ffffff;
      border-color:rgba(0,0,0,.28);
      box-shadow:0 4px 12px rgba(0,0,0,.18);
    }
    body.black-bg .mobile-drawer{background:rgba(255,255,255,.98)!important;border-left:1px solid #e4e4e4!important}
    body.black-bg .mobile-drawer nav a{color:#000}
    body.black-bg .mobile-drawer nav a.nav-active{color:#000;text-shadow:none;font-weight:800}
    /* Store = strictly black / white / grey. Neutralise every warm accent that
       could leak in from the main-site theme (gradients are still allowed). */
    body.black-bg .mobile-toggle{left:12px !important;right:auto !important}
    /* store dividing line: white, but keep the SAME gradient stops as
       body.black-bg header::after so the two lines match */
    body.black-bg .footer-line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent) !important;box-shadow:none !important}
    body.black-bg .hero::after{display:none}
    body.black-bg .section-title{filter:none !important}
    body.black-bg .gold-fill-panel{background:linear-gradient(180deg,#232323,#1c1c1c) !important}
    /* KROK 8 — the store table keeps the very same border shimmer and shine
       sweep as /tour, only rendered in white instead of gold. */
    body.black-bg .gold-fill-panel::before{
      background:linear-gradient(120deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.75) 22%, rgba(255,255,255,.15) 44%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.5) 82%, rgba(255,255,255,.05) 100%) !important;
    }
    body.black-bg .gold-fill-panel::after{
      background:linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent) !important;
    }
    body.black-bg .gold-fill-panel h2,body.black-bg .gold-fill-panel h3,body.black-bg .gold-fill-panel .section-title{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;text-shadow:none !important}
    body.black-bg .panel:not(.social-panel){background:#242424 !important}

    /* Neutral gray/white/black palette for shared components on Store pages */
    body.black-bg .panel:not(.social-panel){background:#242424;border-color:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 16px 42px rgba(0,0,0,.5)}
    body.black-bg .section-title{background:none;-webkit-text-fill-color:initial;color:#ffffff;text-shadow:none;-webkit-text-stroke:0 transparent;animation:headingGlowWhite 3.4s ease-in-out infinite}
    body.black-bg .section-title::before,body.black-bg .section-title::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.5))}
    body.black-bg .section-title::after{background:linear-gradient(90deg, rgba(255,255,255,.5), transparent)}
    body.black-bg .tour-row{border-bottom-color:rgba(255,255,255,.12)}
    body.black-bg .tour-row--head{border-bottom-color:#ffffff;color:#d8d8d8}
    body.black-bg .tour-row__date{color:#ffffff}
    body.black-bg .tour-row__venue{color:#b0b0b0}
    body.black-bg .tour-row__event{color:#b8b8b8}
    body.black-bg .tour-row__tickets{border-color:rgba(255,255,255,.35);color:#ffffff}
    body.black-bg .tour-row__tickets:hover{background:#ffffff;color:#111111}
    body.black-bg .tour-empty i{color:#999999}

    /* ===== Dynamic avatar images (.yt-dynamic-image) — safe placeholder
       so a pending/failed fetch never shows raw alt text or a broken-image
       icon; JS swaps the real photo in once the YouTube data loads. ===== */
    img.yt-dynamic-image{
      color:transparent;
      background:radial-gradient(circle at 32% 28%, rgba(245,179,1,.18), transparent 60%), linear-gradient(160deg,#1d1d21,#0c0c0e);
    }


/* ============================================================
   Gold-fill panels (Bio, Tour) — the whole bubble is the rich
   gold gradient, text is black, with a shine sweep across it.
   ============================================================ */
.gold-fill-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#1a1a1f,#141417) !important;
  border-color:var(--line-amber) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(245,179,1,.12), 0 24px 56px rgba(0,0,0,.55), 0 0 60px rgba(245,179,1,.06) !important;
}
.gold-fill-panel::before{
  content:"" !important;display:block !important;position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(120deg, rgba(245,179,1,.05) 0%, rgba(255,214,120,.75) 22%, rgba(245,179,1,.15) 44%, rgba(245,179,1,.05) 60%, rgba(255,214,120,.5) 82%, rgba(245,179,1,.05) 100%);
  background-size:280% 280%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:panelBorderShimmer 6s linear infinite;
}
.gold-fill-panel::after{
  content:"";position:absolute;top:0;left:-45%;width:28%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(245,179,1,.08), transparent);
  transform:skewX(-20deg);pointer-events:none;z-index:3;
  animation:goldButtonShine 5s ease-in-out infinite;
}
/* Tour / About URHEIM headings use the VIDEOS / LATEST RELEASE artwork typeface. */
.gold-fill-panel h2,.gold-fill-panel h3,.gold-fill-panel .section-title{
  background-image:var(--gold-tex) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;-webkit-text-stroke:0 transparent !important;
}
.gold-fill-panel .section-title::before,.gold-fill-panel .section-title::after{background:linear-gradient(90deg, transparent, rgba(245,179,1,.55)) !important}
.gold-fill-panel p,.gold-fill-panel .tour-empty,.gold-fill-panel .tour-row__city{color:var(--text-dim) !important}
.gold-fill-panel .about-tags,.gold-fill-panel .tour-row__date,.gold-fill-panel .tour-row--head{color:var(--amber) !important}
.gold-fill-panel .tour-row__event{color:var(--text-faint) !important}
.gold-fill-panel .tour-row{border-bottom-color:var(--line) !important}
.gold-fill-panel .tour-row--head{border-bottom-color:var(--line-amber) !important}
.gold-fill-panel .tour-empty i{color:var(--amber) !important;opacity:.85}
.gold-fill-panel .tour-row__tickets{border-color:var(--line-amber) !important;color:var(--amber) !important}
.gold-fill-panel .tour-row__tickets:hover{background:var(--amber-grad) !important;color:var(--on-amber) !important}

/* Music page: inner release-card = nested darker surface, amber hairline */
.release-card{
  background:linear-gradient(155deg,#1d1d21 0%,#161619 60%,#131316 100%) !important;
  border-color:var(--line-amber) !important;
}
.release-card::before{display:none !important}
.track-title span{color:var(--amber);font-size:1.08rem;font-weight:800}

/* Video page: the inner wrapper that holds all the videos has NO outline
   (only the outer "VIDEOS" bubble does). */
.video-grid-panel{
  position:relative;overflow:visible;
  background:transparent;
  border:0;border-radius:16px;padding:6px 0 0;
  box-shadow:none;
}
.video-grid-panel::before{content:none !important}
/* each video thumbnail lights up on hover, like the community cards */
.video-card{border:1px solid rgba(245,179,1,.4) !important;transition:box-shadow .26s ease, transform .2s ease, border-color .26s ease}
.video-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(245,179,1,.85) !important;
  box-shadow:0 0 0 1px rgba(245,179,1,.6), 0 0 26px rgba(245,179,1,.55), 0 0 52px rgba(245,179,1,.25), 0 18px 40px rgba(0,0,0,.5) !important;
}
.video-channel-headline{color:var(--amber);font-weight:700}

/* ============================================================
   Gold texture images (pre-rendered .webp assets) — universal
   glow/shine treatment + sizing for nav/heading/social-icon images.
   ============================================================ */
.gold-img{
  display:block;
  /* Each <img> carries its true width/height attributes (see the HTML), so the
     browser reserves a correctly-proportioned box before the file loads — a
     slow, blocked or 404 image can't collapse to ~0 and reflow the page. Do NOT
     set aspect-ratio here: the textures are cropped to content and every one has
     its own ratio. */
  /* ONE uniform treatment for every gold texture (nav labels, ECHOES, ©, legal
     words, social icons) so they all read at the same brightness/vibrancy as
     the social-media icons the client likes. No contrast bump, no ambient
     glow — just a light lift + a clean dark separation shadow. */
  filter:brightness(1.4) saturate(1.22) drop-shadow(0 2px 4px rgba(0,0,0,.55));
  animation:none;
  transition:filter .2s ease, transform .16s ease;
  /* Decorative artwork — never selectable, never draggable. */
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;
}

/* Nav (image-based labels) */
.nav-img-link{display:inline-flex !important;align-items:center;justify-content:center;height:52px;padding:0 2px}
.nav-img{height:52px;width:auto;max-width:none}
.nav-img-link:hover,.nav-img-link.nav-active{transform:translateY(-2px) scale(1.06)}
.nav-img-link:hover .nav-img{filter:brightness(1.42) saturate(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(245,179,1,.55))}
.nav-img-link.nav-active .nav-img{filter:brightness(1.4) saturate(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(245,179,1,.4))}
@media (max-width:900px){.nav-img,.nav-img-link{height:40px}}

/* Footer social icons — bare, larger */
.social-img{
  width:clamp(56px,6.2vw,92px);height:clamp(56px,6.2vw,92px);object-fit:contain;
  transition:filter .22s ease, transform .16s ease;
}
/* Music-page platform icons sit on an amber button — a dark rim reads better there */
.platform-icon-img{height:30px;width:auto;max-width:40px;object-fit:contain;vertical-align:middle;filter:brightness(.42) contrast(1.2) drop-shadow(0 1px 1px rgba(255,255,255,.35)) !important;animation:none !important}
/* The old .webp underscore images are gone from the HTML; if any remain, hide them. */
.footer-underscore,.hero-underscore{display:none !important}
.footer-legal-img{height:24px;width:auto;vertical-align:middle}
.footer-legal a,.footer-legal button,.footer-legal .footer-copy-item{display:inline-flex;align-items:center;padding:0 4px}
/* every legal word — and the non-linking © — lights up on hover */
.footer-legal a:hover .gold-img,
.footer-legal button:hover .gold-img,
.footer-legal .footer-copy-item:hover .gold-img{
  filter:brightness(1.6) saturate(1.2)
         drop-shadow(0 0 11px rgba(245,179,1,.9))
         drop-shadow(0 0 24px rgba(245,179,1,.5)) !important;
}
/* (the /store social + legal images are handled earlier as filter:brightness(0)
   — pure black on the silver band; the old grayscale block was removed) */

/* Homepage hero gold images */
.hero-title-img{height:46px;width:auto;margin:0 auto}
.subtitle{width:100%}
/* the wrap must be block-level & full width, otherwise a % / vw max-width on the
   image can't resolve against a shrink-to-fit parent and the artwork overflows */
.subtitle .gold-text-wrap{display:flex;width:100%;max-width:100%}
.hero-main-img{width:100%;max-width:740px;height:auto;margin:0 auto}
.hero-side-img{width:100%;max-width:600px;height:auto;margin:4px auto 0}

/* Page heading art images (Latest Release / Videos / Community) */
.heading-art-img{height:clamp(44px,6.5vw,68px);width:auto;max-width:85%}

/* Hamburger + envelope images */
.hamburger-img{width:26px;height:26px;object-fit:contain}
.envelope-img{width:96px;height:96px;object-fit:contain}
/* /store/contact envelope in the monochrome store palette */
body.black-bg .envelope-img{filter:grayscale(1) brightness(5) contrast(.85) drop-shadow(0 2px 10px rgba(0,0,0,.65)) !important}

/* ============================================================
   Gold image + real underlying text (same font as the artwork).
   The image sits on top (decorative, pointer-events:none) so it
   never captures hover/selection — the real text underneath does,
   giving a genuine text cursor and selectable/copyable content.
   ============================================================ */
/* The wrap sits inside a link/button — the link itself carries the pointer
   cursor and the click target. The gold artwork is the only visible thing. */
.gold-text-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;max-width:100%}
.gold-text-wrap .gold-img{position:relative;pointer-events:none;z-index:1;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* The real word is kept ONLY for SEO / screen readers. It is the standard
   "visually-hidden" pattern: a 1px clipped box, zero opacity, transparent
   fill, out of flow. It can never paint, never add height, never bleed an
   ancestor's -webkit-background-clip gradient, and never be seen. */
.gold-text-real{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  color:transparent;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
.font-alatsi{font-family:'Alatsi',sans-serif}
.font-acme{font-family:'Acme',sans-serif}
.font-natpark{font-family:'National Park',sans-serif;font-weight:700}
.font-boldonse{font-family:'Boldonse',cursive}
.font-aclonica{font-family:'Aclonica',sans-serif}
.font-alexandria{font-family:'Alexandria',sans-serif}

/* Play button image + playing-state visual feedback (no separate pause asset exists) */
.play-btn-img{width:56px;height:56px;object-fit:contain}
/* OFF = unchanged. PLAYING = glows. */
.play-btn-img.is-playing{animation:playGlow 1.5s ease-in-out infinite}
@keyframes playGlow{
  0%,100%{filter:brightness(1.32) saturate(1.16) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(245,179,1,0))}
  50%{filter:brightness(1.5) saturate(1.3) drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(245,179,1,.7))}
}
.play:has(.play-btn-img.is-playing){
  border-color:rgba(245,179,1,.6);
  box-shadow:0 0 26px rgba(245,179,1,.5), 0 0 50px rgba(245,179,1,.22), inset 0 1px 0 rgba(255,255,255,.06);
  animation:playRingGlow 1.5s ease-in-out infinite;
}
@keyframes playRingGlow{
  0%,100%{box-shadow:0 0 14px rgba(245,179,1,.25), inset 0 1px 0 rgba(255,255,255,.06)}
  50%{box-shadow:0 0 30px rgba(245,179,1,.6), 0 0 56px rgba(245,179,1,.28), inset 0 1px 0 rgba(255,255,255,.06)}
}

/* ============================================================
   TYPOGRAPHY MAP — every element → the family chosen in :root.
   Change the families in the :root FONTS block, not here.
   ============================================================ */
/* Iceland — "URHEIM" under the nav + the legal line */
.eyebrow-text,
.footer-copy,.footer-legal,.footer-legal .sep,
.tou-footer-links{font-family:var(--font-eyebrow) !important}

/* Zen Dots — section headings */
.section-title,
.gold-fill-panel .section-title,
.gold-fill-panel h2,
.contact-subpage h2,.contact-form-card h2,
.store-tabs a,
.store-preview-card h3,
.store-hero__title{font-family:var(--font-heading) !important}

/* "About URHEIM" — same face as LATEST RELEASE (Zen Dots) */
.about-copy h3,
.store-bio__kicker{font-family:var(--font-heading) !important}

/* Asimovian — "Echoes of the Unspoken" (main /bio + /store/bio) */
.bio-echoes,
.store-bio__title{font-family:var(--font-echoes) !important}

/* Tomorrow — genre tag line */
.about-tags{font-family:var(--font-tags) !important}

/* Fahkwang — body copy / bubble text / small labels */
.about-body,.about-body p,
.tour-empty,
.track-title span,
.video-info h4,.video-date,
.contact-subpage-item h4,.contact-subpage-item p,
.contact-form label,.form-field label,.files-note,.form-note,.form-status,
.store-preview-card p,
.store-hero__body,
.store-bio p{font-family:var(--font-body) !important}
/* email addresses keep their default face */
.contact-subpage-item a{font-family:var(--font-ui) !important}

/* Bakbak One — pill buttons (main + store) */
.hero-listen-btn,
.platform,
.youtube-cover-link,
.latest-watch-now-btn,
.hero-listen-btn.store-hero__cta,
.video-channel-subs,
.btn-store-primary,
.product-card__cta,
.checkout-panel button,
.checkout-confirm .btn-store-primary{font-family:var(--font-button) !important}

/* Bruno Ace — the /store nav bar */
body.black-bg .nav-links a,
body.black-bg .mobile-drawer nav a{font-family:var(--font-store-nav) !important}

/* ============================================================
   v26 theme — a few shared surfaces + motion housekeeping
   ============================================================ */
.mobile-drawer{background:rgba(12,12,15,.94)!important;border-left:1px solid var(--line-amber)!important}
.mobile-drawer nav a.nav-active{color:var(--amber);text-shadow:0 0 14px rgba(245,179,1,.4)}
.subpage-card,.contact-subpage,.contact-form-card,.about-image,.youtube-channel-cover{border-radius:18px}
.contact-mail-trigger{color:var(--amber)}
.contact-mail-trigger:hover{color:var(--amber-2);filter:drop-shadow(0 0 20px rgba(245,179,1,.35)) drop-shadow(0 10px 24px rgba(0,0,0,.3))}
.smart-profile-link{border-color:var(--line-amber)!important;box-shadow:0 0 0 1px rgba(245,179,1,.14), 0 22px 50px rgba(0,0,0,.5)!important}
.smart-available{color:var(--text)!important}
.smart-link-card{background:rgba(14,14,17,.96)!important;border-color:var(--line)!important}
.smart-platform-row:hover{background:rgba(245,179,1,.12)!important}

/* Honour reduced-motion: kill ambient drift / orbit / pulses / shimmers,
   keep instant states. */
@media (prefers-reduced-motion: reduce){
  body::before,.hero::before,.hero::after,.social,.social::before,
  .gold-img,.section-title,.gold-fill-panel::before,.gold-fill-panel::after,
  .video-grid-panel::before,.hero-listen-btn::after,.contact-submit::after,
  .store-marquee span,.play-btn-img.is-playing,.play:has(.play-btn-img.is-playing),
  .eyebrow-text,header::after,.bottom-fixed-wrap::before,
  .panel,.contact-subpage,.contact-form-card,.about-image,.video-card,.youtube-channel-cover,
  .store-preview-card h3,.store-preview-card p,.store-bio__kicker{
    animation:none !important;
  }
  .store-preview-card p,.about-body,.about-tags,.eyebrow{opacity:1 !important}
}

/* ============================================================
   Gold-texture gradient lettering — the same ramp the social-icon
   .webp textures use, applied to the real headings. Store pages get
   the monochrome version.
   ============================================================ */
.about-copy h3,.eyebrow-text,
.contact-subpage h2,.contact-form-card h2,
.store-preview-card h3,.store-bio__kicker{
  background-image:var(--gold-tex);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
body.black-bg .section-title,
body.black-bg .about-copy h3,body.black-bg .eyebrow-text,
body.black-bg .contact-subpage h2,body.black-bg .contact-form-card h2,
body.black-bg .store-preview-card h3,body.black-bg .store-bio__kicker{
  background-image:var(--silver-tex) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;
}

/* ============================================================
   Main-site nav: plain lettering like the /store nav (no textures),
   in the gold ramp instead of black.
   ============================================================ */
.nav-links .nav-img{display:none !important}
.nav-links .gold-text-wrap{display:inline-block;max-width:none}
.nav-links .gold-text-real{
  position:static !important;width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;border:0 !important;
  clip:auto !important;clip-path:none !important;overflow:visible !important;
  opacity:1 !important;white-space:nowrap;
  font-family:var(--font-store-nav) !important;
  font-size:1.34rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  background-image:var(--gold-tex);
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.nav-img-link{height:auto !important;padding:0 2px}
.nav-links{gap:clamp(14px,1.9vw,28px)}
.nav-img-link:hover .gold-text-real,.nav-img-link.nav-active .gold-text-real{
  filter:drop-shadow(0 0 10px rgba(245,179,1,.55));
}
.nav-img-link:hover,.nav-img-link.nav-active{transform:translateY(-1px) scale(1.04)}

/* the collapsed "Let us know" card must leave no hairline on /store/contact */
body.black-bg .contact-form-card.closed{
  opacity:0;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* the nav lettering rests with the same warm halo as the active item */
.nav-links .gold-text-real{filter:drop-shadow(0 0 8px rgba(245,179,1,.45))}
.nav-img-link:hover .gold-text-real,.nav-img-link.nav-active .gold-text-real{
  filter:drop-shadow(0 0 14px rgba(245,179,1,.75)) !important;
}

/* store pages that were still missing the metallic lettering */
body.black-bg .store-bio__title,
body.black-bg .store-tabs a .tex{
  background-image:var(--silver-tex) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;
}
body.black-bg .store-tabs a .tex{filter:drop-shadow(0 0 8px rgba(255,255,255,.4))}

/* typewriter caret — zero width so it never shifts the layout */
.tw-caret{
  display:inline-block;width:0;overflow:visible;
  border-right:2px solid currentColor;margin-right:-2px;
  animation:twBlink .8s steps(2,start) infinite;
}
@keyframes twBlink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .tw-caret{display:none} }

/* ============================================================
   Saturated gold is now the DEFAULT for the nav + headings — what the
   client liked about the "selected" item was the warm halo, so every
   item rests with it. Hover lifts, selected gets a stronger halo.
   ============================================================ */
.nav-links .gold-text-real{font-size:1.55rem;filter:none}
.nav-img-link{transition:transform .18s ease}
.nav-img-link:hover{transform:translateY(-4px) !important}
.nav-img-link:hover .gold-text-real{filter:none !important}
.nav-img-link.nav-active{transform:none !important}
.nav-img-link.nav-active .gold-text-real{
  filter:none !important;font-weight:900;
  /* the nav face ships one weight only, so thicken the glyph edges instead —
     this is what makes the selected item read bolder, exactly like /store */
  -webkit-text-stroke:.7px #FFD457;
}

/* "ECHOES OF THE UNSPOKEN" and the © / legal row become the same gradient
   lettering as the nav (the textures had the wrong glow). */
.footer-legal .gold-img{display:none !important}
.footer-legal .gold-text-wrap{display:inline-block;width:auto;max-width:none}
.footer-legal .gold-text-real{
  position:static !important;width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;border:0 !important;
  clip:auto !important;clip-path:none !important;overflow:visible !important;
  opacity:1 !important;white-space:nowrap;
  background-image:var(--gold-tex);
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.footer-legal .gold-text-real{
  font-size:1rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;filter:none;
}
.footer-legal a,.footer-legal button,.footer-legal .footer-copy-item{transition:transform .18s ease}
.footer-legal a:hover,.footer-legal button:hover,.footer-legal .footer-copy-item:hover{transform:translateY(-3px)}

body.black-bg .footer-legal .gold-text-real{
  background-image:none !important;background:none !important;
  -webkit-text-fill-color:#000000 !important;color:#000000 !important;
  -webkit-text-stroke:0 transparent !important;filter:none !important;
}

/* the pale end of the gold ramp for secondary copy */
.about-tags,
.form-field label,.contact-form label,
.contact-subpage-item h4,
.track-title span,
.eyebrow-text{
  background-image:none !important;
  -webkit-text-fill-color:var(--gold-light) !important;
  color:var(--gold-light) !important;
  text-shadow:none;
}
.eyebrow-text{filter:drop-shadow(0 0 10px rgba(255,225,150,.4))}
body.black-bg .about-tags,body.black-bg .form-field label,body.black-bg .contact-form label,
body.black-bg .contact-subpage-item h4,body.black-bg .track-title span,body.black-bg .eyebrow-text{
  -webkit-text-fill-color:#f2f2f4 !important;color:#f2f2f4 !important;
}

/* ============================================================
   /collabs — split-circle community wheel.
   Three equal 120° wedges (Discord top-left, Reddit top-right,
   Steam bottom). Hover reveals the copy; clicking merges the ring
   into one solid circle, lifts that platform's icon to the top and
   drops the description underneath it.
   ============================================================ */
.community-wheel{display:flex;justify-content:center;padding:6px 0 4px}
.cw-ring{position:relative;width:min(524px,80vw);aspect-ratio:1;border-radius:50%;isolation:isolate;
  transition:transform .5s cubic-bezier(.22,.9,.28,1)}
/* hovering a platform lifts the bubble and grows it */
.community-wheel.is-merged .cw-ring{transform:translateY(-10px) scale(1.04)}
.cw-seg{
  position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;border-radius:50%;
  transition:transform .55s cubic-bezier(.22,.9,.28,1), clip-path .55s cubic-bezier(.22,.9,.28,1),
             opacity .4s ease, filter .3s ease;
}
.cw-seg--discord{background:radial-gradient(circle at 50% 50%, #8b93ff 0%, #5865F2 55%, #3c46c4 100%);
  clip-path:polygon(50% 50%, -110% 142.4%, -110% -60%, 50% -60%); transform:translate(-8px,-8px)}
.cw-seg--reddit{background:radial-gradient(circle at 50% 50%, #ff8f5c 0%, #FF4500 55%, #cc3400 100%);
  clip-path:polygon(50% 50%, 50% -60%, 210% -60%, 210% 142.4%); transform:translate(8px,-8px)}
.cw-seg--steam{background:radial-gradient(circle at 50% 50%, #3f7ea8 0%, #2a475e 48%, #1b2838 80%, #171a21 100%);
  clip-path:polygon(50% 50%, 210% 142.4%, 210% 260%, -110% 260%, -110% 142.4%); transform:translate(0,10px)}
.cw-seg:hover{filter:brightness(1.12)}

.cw-ico{position:absolute;width:26%;aspect-ratio:1;display:grid;place-items:center;
  transform:translate(-50%,-50%);pointer-events:none;
  transition:left .55s cubic-bezier(.22,.9,.28,1), top .55s cubic-bezier(.22,.9,.28,1), width .45s ease}
.cw-seg--discord .cw-ico{left:32%;top:39%}
.cw-seg--reddit  .cw-ico{left:68%;top:39%}
.cw-seg--steam   .cw-ico{left:50%;top:71%}
.cw-ico i{font-size:clamp(2.2rem,5.4vw,3.7rem);line-height:1;color:#ffffff;filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
/* normalise the three glyphs so they read at the same optical size */
.cw-seg--discord .cw-ico i{font-size:clamp(2.0rem,4.9vw,3.35rem)}
.cw-seg--reddit  .cw-ico i{font-size:clamp(2.2rem,5.4vw,3.7rem)}
.cw-seg--steam   .cw-ico i{font-size:clamp(2.2rem,5.4vw,3.7rem)}

.cw-panel{
  position:absolute;left:50%;top:44%;width:70%;
  transform:translate(-50%,10px);text-align:center;color:#ffffff;z-index:3;
  opacity:0;visibility:hidden;pointer-events:none;
  background:none;padding:0 6px;
  transition:opacity .45s ease .06s, transform .5s cubic-bezier(.22,.9,.28,1) .06s,
             visibility .45s, background .4s ease, top .5s cubic-bezier(.22,.9,.28,1);
}
.community-wheel.is-hover .cw-panel,.community-wheel.is-merged .cw-panel{
  opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
}
.cw-panel__title{margin:0 0 6px;font-family:var(--font-heading);font-size:1.5rem;letter-spacing:.04em}
.cw-panel__text{margin:0;font-family:var(--font-body);font-size:.98rem;line-height:1.6;color:#f0f0f2}
.cw-panel__cta{
  display:none;margin:14px auto 0;padding:11px 30px;border-radius:12px;
  background:#ffffff;color:#111;font-family:var(--font-button);font-weight:400;
  font-size:1.02rem;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease;
}
.cw-panel__cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.45)}

/* merged: one solid circle, the chosen icon rides to the top, copy underneath */
.community-wheel.is-merged .cw-seg{
  clip-path:polygon(-60% -60%, 160% -60%, 160% 160%, -60% 160%);
  transform:none;opacity:0;pointer-events:none;
}
.community-wheel.is-merged .cw-seg.is-sel{opacity:1;z-index:1;pointer-events:auto}
.community-wheel.is-merged .cw-seg--steam.is-sel{background:radial-gradient(circle at 50% 50%, #66c0f4 0%, #2a475e 46%, #1b2838 78%, #171a21 100%)}
.community-wheel.is-merged .cw-seg.is-sel .cw-ico{left:50%;top:20%;width:22%}
.community-wheel.is-merged .cw-panel{top:42%;width:74%}
.community-wheel.is-merged .cw-panel__cta{display:inline-block}

@media (max-width:640px){
  .cw-panel{width:80%;padding:10px 12px}
  .cw-panel__title{font-size:1.15rem}
  .cw-panel__text{font-size:.82rem;line-height:1.5}
  .cw-panel__cta{padding:9px 22px;font-size:.9rem}
}
@media (prefers-reduced-motion: reduce){
  .cw-seg,.cw-ico,.cw-panel{transition:none !important}
}

/* the social row breaks out of the text container so 12 icons stay on one line */
@media (min-width:901px){
  .socials{
    flex-wrap:nowrap !important;
    gap:clamp(8px,1.2vw,20px) !important;
    width:min(1400px,96vw);
    position:relative;left:50%;transform:translateX(-50%);
  }
}

/* ============================================================
   Fit-on-one-screen pass for /contact, /store/bio, /store/shop,
   /store/contact. Only the CONTENT sections are tightened — the
   footer strip keeps its 44px so the bands stay aligned.
   ============================================================ */
main > section{padding:24px 0}
.panel:not(.social-panel):not(.contact-subpage):not(.contact-form-card),.subpage-card{padding-top:20px;padding-bottom:20px}
.contact-subpage.open,.contact-form-card:not(.closed){padding:20px 22px}
/* collapsed bubbles must take up NO room at all (border-box + max-height:0
   still leaves the padding behind, which is what clipped the headings) */
.contact-subpage:not(.open),.contact-form-card.closed{padding:0 !important;border-width:0 !important;margin:0 !important}
.contact-subpage.open{padding-top:20px;padding-bottom:18px}
.contact-form{gap:11px}
.contact-form-card h2,.contact-subpage h2{margin:0 0 14px;font-size:1.9rem}
.contact-subpage-list{gap:13px}
.contact-subpage-item h4{margin:0 0 4px;font-size:1rem}
.contact-subpage-item p{line-height:1.5}
.contact-mail-trigger{width:96px;height:96px;font-size:3rem}
.envelope-img{width:72px;height:72px}
.contact-mail-trigger-wrap{margin:0}
.contact-subpage-wrap{gap:12px}
.form-field label{font-size:.82rem}
.about-body{line-height:1.65}
.about-body p{margin:0 0 12px}
.store-bio-body{font-size:.95rem;padding-bottom:6px}
.store-bio__title{margin:0 0 10px}
.store-bio__kicker{margin:0 0 8px}
.brand-avatar-link{margin:6px auto 20px;width:min(300px,58vw)}
.section-title{margin:0 0 16px}

/* ===== Tour table: a rule above and below every row, buttons always shown ===== */
.tour-table{display:flex;flex-direction:column;margin-top:6px}
.tour-rule{height:2px;width:100%;background:linear-gradient(90deg,transparent,rgba(245,179,1,.55) 8%,rgba(245,179,1,.55) 92%,transparent)}
body.black-bg .tour-rule{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 8%,rgba(255,255,255,.5) 92%,transparent)}
.tour-table .tour-row{
  display:grid;grid-template-columns:1.1fr 1.2fr 1.6fr auto;align-items:center;gap:16px;
  padding:12px 8px;border-bottom:0 !important;min-height:52px;
}
.tour-row__tickets{
  justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  min-width:132px;min-height:38px;padding:0 20px;border-radius:10px;
  border:1px solid var(--line-amber);color:var(--amber);
  font-family:var(--font-button);font-size:.92rem;letter-spacing:.06em;
  text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease;
}
.tour-row__tickets:hover{transform:translateY(-2px)}
.tour-row__tickets.is-idle{opacity:.75;cursor:default}
body.black-bg .tour-row__tickets{border-color:rgba(255,255,255,.45);color:#ffffff}
@media (max-width:760px){
  .tour-table .tour-row{grid-template-columns:1fr;text-align:center;gap:6px;padding:10px 8px;min-height:0}
  .tour-row__tickets{justify-self:center;min-width:118px;min-height:34px;font-size:.84rem}
}


/* ============================================================
   NO-SCROLL PASS — /, /bio, /tour, /music, /collabs, /contact,
   /store/bio, /store/tour, /store/shop, /store/contact must all
   fit one screen. Everything below only tightens vertical rhythm;
   the footer band keeps its height so the strips stay aligned.
   ============================================================ */
/* --- contact (main + store) --- */
.contact-form{gap:8px}
.form-field{gap:4px}
.form-field label{font-size:.8rem}
.form-input,.form-textarea,.form-select,.phone-wrap select{padding:10px 13px;border-radius:10px}
.form-textarea{min-height:112px}
.contact-form-card h2,.contact-subpage h2{margin:0 0 10px;font-size:1.7rem}
.contact-mail-trigger{width:74px;height:74px;font-size:2.4rem}
.envelope-img{width:58px;height:58px}
.contact-mail-trigger-wrap{margin:0}
.contact-subpage-wrap{gap:8px}
.contact-subpage.open,.contact-form-card:not(.closed){padding:14px 22px}
.contact-subpage.open{padding-top:14px;padding-bottom:14px}
.contact-subpage-list{gap:9px}
.files-note,.form-note{margin:2px 0 0;font-size:.74rem}
.contact-form-actions{margin-top:2px}
.form-file{padding:6px 10px}

/* --- home / bio --- */
.about-grid{gap:20px}
.about-image{min-height:0}
.about-body p{margin:0 0 9px}
.about-tags{margin-top:8px}

/* The listed pages must never scroll. Above a ~900px viewport they already
   fit at the standard 0.75 zoom; below that the whole page is stepped down
   proportionally (every page together, so /store and /store/bio never drift
   out of alignment with each other). */
@media (min-width:901px) and (max-height:899px){ body{zoom:.69} }
@media (min-width:901px) and (max-height:839px){ body{zoom:.64} }
@media (min-width:901px) and (max-height:779px){ body{zoom:.60} }
@media (min-width:901px) and (max-height:729px){ body{zoom:.56} }
@media (min-width:901px) and (max-height:679px){ body{zoom:.52} }
@media (min-width:901px) and (max-height:629px){ body{zoom:.47} }
@media (min-width:901px) and (max-height:579px){ body{zoom:.43} }
@media (min-width:901px) and (max-height:539px){ body{zoom:.39} }

/* ===== KROK 4 — nav + legal row wear the Send button's own gradient =====
   --amber-gloss is exactly what /contact's Send button is painted with:
   a 135deg ramp that runs from light to dark. Scoped away from /store,
   whose legal row must stay pure black (KROK 6). */
body:not(.black-bg) .nav-links .gold-text-real,
body:not(.black-bg) .footer-legal .gold-text-real{
  background-image:var(--amber-gloss) !important;
  /* letters are far shorter than the button, so the ramp is stretched a
     little — the light-to-dark run still reads, without going muddy */
  background-size:100% 168% !important;background-position:0 0 !important;
  background-repeat:no-repeat !important;
}
/* ===== KROK 5 — unselected thin, selected bold (like the /store nav) ===== */
/* Nav and legal row are painted from one recipe — same ramp, same weight,
   same hairline. The selected nav item changes NOTHING but its weight. */
body:not(.black-bg) .nav-links .gold-text-real,
body:not(.black-bg) .footer-legal .gold-text-real{
  font-weight:400;
  -webkit-text-stroke:.3px #FFD861;
}
body:not(.black-bg) .nav-img-link.nav-active .gold-text-real{
  font-weight:900;
  -webkit-text-stroke:.3px #FFD861;   /* identical paint, heavier glyphs only */
}
/* ===== KROK 4 — hover on the legal row: lift + the LISTEN NOW glow ===== */
.footer-legal a:hover .gold-text-real,
.footer-legal button:hover .gold-text-real,
.footer-legal .footer-copy-item:hover .gold-text-real{
  filter:drop-shadow(0 0 12px rgba(245,179,1,.5)) drop-shadow(0 0 26px rgba(245,179,1,.4)) !important;
}
body.black-bg .footer-legal a:hover .gold-text-real,
body.black-bg .footer-legal button:hover .gold-text-real,
body.black-bg .footer-legal .footer-copy-item:hover .gold-text-real{
  filter:drop-shadow(0 0 8px rgba(0,0,0,.45)) !important;
}

/* the country-code select keeps a full line box after the compaction */
/* The prefix box was pinned to 52px while every other field settled around
   43px. Sizing it by content then clipped the flag emoji, which is taller than
   a plain line. It now simply stretches to the row and carries NO vertical
   padding, so the widget centres the flag and the code itself; the arrow is
   centred the same way. */
.phone-wrap{align-items:stretch}
.phone-wrap input{min-height:0 !important;height:auto !important}
.phone-wrap select{
  min-height:0 !important;height:auto !important;align-self:stretch;
  padding:0 28px 0 10px !important;
  line-height:normal !important;
  background-position:calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px) !important;
}

/* Mobile: the legal row is TEXT now (it used to be tiny gold images), so it
   needs its own size here or it runs off the right edge. */
@media (max-width:900px){
  .footer-legal{flex-wrap:wrap;justify-content:center;row-gap:4px;column-gap:4px}
  .footer-legal .gold-text-real{font-size:.58rem;letter-spacing:.045em}
  .footer-legal .sep{font-size:.58rem}
}
@media (max-width:360px){
  .footer-legal .gold-text-real,.footer-legal .sep{font-size:.52rem}
}


/* ============================================================
   KROK 15 — every outline is the dividing line, bent into a box.
   Same colour, same two-stop glow, same 3.4s breath. Store keeps
   the identical build in black & white.
   ============================================================ */
.gold-fill-panel{
  border:1px solid rgba(255,222,140,.7) !important;
  box-shadow:0 0 12px rgba(245,179,1,.4), 0 0 30px rgba(245,179,1,.15), 0 24px 56px rgba(0,0,0,.55) !important;
  animation:bubbleGlow 3.4s ease-in-out infinite;
}
.video-card,.youtube-channel-cover,.subpage-join-item{
  border:1px solid rgba(255,222,140,.7) !important;
}
body.black-bg .gold-fill-panel{
  border:1px solid rgba(244,244,247,.72) !important;
  box-shadow:0 0 12px rgba(255,255,255,.4), 0 0 30px rgba(200,200,210,.2), 0 24px 56px rgba(0,0,0,.6) !important;
  animation:bubbleGlowWhite 3.4s ease-in-out infinite;
}
body.black-bg .video-card,body.black-bg .youtube-channel-cover,
body.black-bg .subpage-join-item{
  border:1px solid rgba(244,244,247,.72) !important;
}

/* ============================================================
   KROK 3 + KROK 10 — the /tour heading glow, everywhere it was asked for.
   sectionGlow is the exact animation the TOUR heading already runs.
   ============================================================ */
@keyframes sectionGlowWhite{
  0%,100%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,255,255,.5))}
  50%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,255,255,.85))}
}
.about-copy h3,
.contact-subpage h2,.contact-form-card h2,
.gold-fill-panel h2,.gold-fill-panel h3,.gold-fill-panel .section-title{
  animation:sectionGlow 3.4s ease-in-out infinite !important;
}
body.black-bg .section-title,
body.black-bg .gold-fill-panel h2,body.black-bg .gold-fill-panel h3,
body.black-bg .gold-fill-panel .section-title,
body.black-bg .about-copy h3,
body.black-bg .contact-subpage h2,body.black-bg .contact-form-card h2,
body.black-bg .store-preview-card h3,
body.black-bg .store-bio__kicker,
body.black-bg .store-tabs a{
  animation:sectionGlowWhite 3.4s ease-in-out infinite !important;
}

/* ============================================================
   KROK 11 — the two contact headings are set in capitals.
   ============================================================ */
.contact-subpage h2,.contact-form-card h2{text-transform:uppercase;letter-spacing:.06em}

/* ============================================================
   KROK 7 — /bio takes its typography straight from /store/bio, and the
   genre line borrows the /store/shop lead face.
   ============================================================ */
.about-copy h3{
  font-size:.92rem !important;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 14px;line-height:1.2;font-weight:400;
}
.bio-echoes{
  font-size:clamp(2rem,5vw,2.9rem) !important;margin:0 0 18px;line-height:1.2;
}
.about-tags{
  font-family:'Space Grotesk','Cinzel',sans-serif !important;
  font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.02em;line-height:1.5;
}
@media (max-width:900px){
  .about-copy h3{font-size:.86rem !important}
  .bio-echoes{font-size:1.6rem !important}
  .about-tags{font-size:1rem}
}


/* ============================================================
   KROK 12 — the COMMUNITY bubble hugs the word only; the platform
   circle sits underneath it, outside the bubble.
   ============================================================ */
.community-title-card{
  width:max-content;max-width:100%;margin:0 auto 34px;
  padding:14px 40px !important;
}
.community-title-card .section-title{margin:0}
.community-wheel{display:flex;justify-content:center;padding:0 0 4px}

/* KROK 12 — the copy types itself in, left to right, on hover */
.cw-panel__text{min-height:4.8em}
.cw-panel__text .tw-caret{
  display:inline-block;width:0;border-right:2px solid rgba(255,255,255,.9);
  margin-right:-2px;animation:cwCaret .7s step-end infinite;
}
@keyframes cwCaret{0%,100%{opacity:1}50%{opacity:0}}

/* ============================================================
   KROK 16 — the platform buttons show only their icon until hovered,
   then the icon slides left and the name types itself in.
   ============================================================ */
.platforms .platform{position:relative;justify-content:center;gap:0;padding-left:10px;padding-right:10px;
  transition:background .2s ease, box-shadow .2s ease, filter .2s ease, color .2s ease, transform .16s ease}
.platform-name{
  display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;margin-left:0;
  /* one long, eased run: the pill keeps its size, the row stays centred, so
     the icon glides left by exactly half the label as it opens */
  transition:max-width .5s cubic-bezier(.25,.8,.3,1), opacity .34s ease .06s, margin-left .5s cubic-bezier(.25,.8,.3,1);
}
@media (hover:hover){
  .platforms .platform:hover .platform-name{max-width:11em;opacity:1;margin-left:8px}
}
/* the longest name (SoundCloud) still has to fit inside the pill */
.platform-name{font-size:.88em;letter-spacing:0}
.platform-name .tw-caret{
  display:inline-block;width:0;border-right:2px solid currentColor;
  margin-right:-2px;animation:cwCaret .7s step-end infinite;
}
/* touch devices have no hover — just show the names */
@media (hover:none){
  .platform-name{max-width:11em;opacity:1;margin-left:8px}
  .platforms .platform{justify-content:center}
}
@media (max-width:900px){
  .platform-name{font-size:.9em}
}


/* ============================================================
   KROK 9 — the contact card turns over in 3D. Both faces are laid
   out on top of each other; the stage is sized to whichever one is
   facing you, so the page never jumps.
   ============================================================ */
.contact-flip{perspective:1800px;width:min(920px,100%);margin:0 auto}
.contact-flip__inner{
  position:relative;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,.9,.28,1), height .5s cubic-bezier(.22,.9,.28,1);
}
.contact-flip.is-flipped .contact-flip__inner{transform:rotateY(180deg)}
.contact-flip__face{
  position:absolute;top:0;left:0;width:100%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.contact-flip__face--back{transform:rotateY(180deg)}
.contact-flip__face > .panel{width:100%;margin:0}
/* the faces are always laid out now, so the old collapse states never apply */
.contact-flip .contact-subpage,.contact-flip .contact-form-card{
  max-height:none !important;opacity:1 !important;transform:none !important;overflow:visible !important;
}
@media (prefers-reduced-motion: reduce){
  .contact-flip__inner{transition:height .2s ease}
  .contact-flip__inner,.contact-flip.is-flipped .contact-flip__inner{transform:none !important}
  .contact-flip__face{backface-visibility:visible;-webkit-backface-visibility:visible}
  .contact-flip__face--front{position:absolute;visibility:hidden}
  .contact-flip:not(.is-flipped) .contact-flip__face--front{visibility:visible}
  .contact-flip__face--back{transform:none;visibility:hidden}
  .contact-flip.is-flipped .contact-flip__face--back{visibility:visible}
  .contact-flip.is-flipped .contact-flip__face--front{visibility:hidden}
}

/* KROK 13 — /store/bio now sits in the same bubble, at the same width,
   as /store/tour, /store/shop and /store/contact. */
.store-bio-card{width:100%;margin:0 auto}
.store-bio-card .store-bio-body{max-width:820px;margin:0 auto}

/* the store table stays black & white — the gold-fill rules must not leak in */
body.black-bg .gold-fill-panel .tour-row__tickets{
  border-color:rgba(255,255,255,.45) !important;color:#ffffff !important;background:none !important;
}
body.black-bg .gold-fill-panel .tour-row__tickets:hover{
  background:#ffffff !important;color:#000000 !important;
}
body.black-bg .gold-fill-panel .tour-row__date,
body.black-bg .gold-fill-panel .about-tags,
body.black-bg .gold-fill-panel .tour-row--head{color:#ffffff !important}
body.black-bg .gold-fill-panel .tour-row__city{color:#d0d0d4 !important}
body.black-bg .gold-fill-panel .tour-row__event{color:#a8a8ae !important}
body.black-bg .gold-fill-panel .section-title::before,
body.black-bg .gold-fill-panel .section-title::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55)) !important;
}


/* ============================================================
   KROK 6 — /store/bio starts at the same height as the other store
   subpages. The watermark keeps its place; only the card moves up.
   ============================================================ */
/* the watermark keeps its own position; the card simply stops sitting so far
   below it, which is what made /store/bio read as hanging low */
/* the watermark keeps exactly the margins /store and /store/shop use — only
   the card is pulled up under it */
.store-bio-wrap .store-bio-card{margin-top:-26px}
.store-bio-card{padding-top:18px !important;padding-bottom:18px !important}
.store-bio-card .store-bio__kicker{margin:0 0 8px}
.store-bio-card .store-bio__title{margin:0 0 12px}

/* ============================================================
   KROK 7 — the store drawer opens on the same side as its hamburger.
   ============================================================ */
@media (max-width:900px){
  /* the store bar was not pinned like the main site's, which left a black
     gap under the fixed hamburger and cart */
  body.black-bg header{position:fixed;top:0;left:0;right:0;z-index:50}
  body.black-bg .mobile-drawer{
    right:auto;left:0;
    border-left:none !important;border-right:1px solid #e4e4e4 !important;
    box-shadow:16px 0 40px rgba(0,0,0,.5);
    transform:translateX(-105%);
  }
  body.black-bg .mobile-drawer.open{transform:translateX(0)}
}

/* ============================================================
   KROK 8 — phones get the desktop's single-row footer.
   ============================================================ */
@media (max-width:900px){
  .socials{
    flex-wrap:nowrap !important;
    gap:clamp(2px,1.4vw,10px) !important;
    width:100% !important;max-width:none !important;
    justify-content:center;
  }
  .socials .social-img{
    width:clamp(17px,6.2vw,30px) !important;height:clamp(17px,6.2vw,30px) !important;
  }
  .social-panel{padding:4px 0;width:100%}
  .footer-legal{
    flex-wrap:nowrap !important;
    gap:clamp(1px,.7vw,4px) !important;
    width:100%;padding:0 2px;
  }
  .footer-legal .gold-text-real,.footer-legal .sep{
    font-size:clamp(.34rem,1.55vw,.6rem) !important;letter-spacing:.02em !important;
  }
}
@media (max-width:360px){
  .footer-legal .gold-text-real,.footer-legal .sep{font-size:.34rem !important}
}

/* ============================================================
   KROK 8 — "Official Website" in the top bar, phones only.
   Same face as the /store/shop lead; same paint as the legal row.
   ============================================================ */
.mobile-brandline{display:none}
@media (max-width:900px){
  .mobile-brandline{
    display:block;width:100%;text-align:center;pointer-events:none;
    font-family:var(--font-store-nav),'Space Grotesk',sans-serif;
    text-transform:uppercase;
    font-size:clamp(.78rem,3.3vw,1.05rem);letter-spacing:.07em;line-height:1;
    background-image:var(--amber-gloss);
    background-size:100% 168%;background-position:0 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  body.black-bg .mobile-brandline{
    /* the store bar is white, so the same ramp is rebuilt in black & grey */
    background-image:linear-gradient(135deg,#4a4a4f 0%,#1c1c1f 34%,#000000 60%,#2b2b30 100%);
  }
  body.smart-link-mode .mobile-brandline{display:none}
  /* the bar keeps its 74px height; the line is simply centred inside it */
  .nav{position:relative}
  .mobile-brandline{
    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    padding:0 66px;
  }
}


/* ============================================================
   /collabs — the circle sits dead centre between the two strips.
   The COMMUNITY bubble hangs off its top edge, so it takes no room
   in the flow and cannot pull the circle off centre. Nothing else
   about the page moves: the shell height and both strips are
   untouched, so the page still cannot scroll.
   ============================================================ */
body.collabs-mode .main-content-wrap{flex:1;display:flex}
body.collabs-mode main{flex:1;display:flex;width:100%}
body.collabs-mode main > section{
  position:relative;flex:1;width:100%;padding:0;
  display:flex;align-items:center;justify-content:center;
}
body.collabs-mode main > section > .container{width:min(var(--container), calc(100% - 32px))}
.community-wheel{position:relative;display:flex;justify-content:center;padding:0}
/* The bubble is pinned to the top of the content area — the same height the
   panels on /tour, /music and /video start at — and takes no part in the flow,
   so the circle below stays exactly where it is. .panel sets position:relative
   with more weight, hence the longer selector; centring uses auto margins
   because the entrance animation writes its own transform. */
body.collabs-mode .community-title-card{
  position:absolute;top:24px;left:0;right:0;bottom:auto;
  margin:0 auto;width:max-content;max-width:92vw;z-index:2;
}
@media (max-width:900px){
  body.collabs-mode main > section{align-items:flex-start;padding-top:96px}
  body.collabs-mode .community-title-card{top:14px}
}


/* ============================================================
   The face turning away is taken out of sight halfway through the
   flip. backface-visibility alone is not enough here: the Send
   button paints its own shine layer, which Chrome keeps drawing
   through the back of the card.
   ============================================================ */
/* Only the starting state lives in CSS. The swap itself is timed in
   JavaScript: both faces stay on screen while the card turns, and the one
   that has turned away is hidden once it is edge-on, so nothing blanks out
   halfway and the Send button's shine cannot paint through the back. */
.contact-flip__face--back{visibility:hidden}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  /* Same size as the text next to it, and set in a face whose pipe runs the
     full ascender-to-descender height — exactly how the row reads on
     /terms-of-use. In the display face the bar is a short stub. */
  .footer-legal .sep{
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(.34rem,1.55vw,.6rem) !important;
    line-height:1;
  }

  /* TOUR: the three fields stack on the left, TICKETS stays on the right */
  .tour-table .tour-row{
    grid-template-columns:1fr auto !important;
    align-items:center;text-align:left !important;
    gap:2px 10px !important;padding:10px 6px !important;
  }
  .tour-row__date {grid-column:1;grid-row:1}
  .tour-row__city {grid-column:1;grid-row:2}
  .tour-row__event{grid-column:1;grid-row:3}
  .tour-row__tickets{
    grid-column:2;grid-row:1 / span 3;
    justify-self:end !important;align-self:center;margin-top:0 !important;
  }

  /* the music pills show their icon only, dead centre */
  .platform-name{display:none !important}
  .platforms .platform{justify-content:center !important;padding-left:6px;padding-right:6px}
  .platforms .platform i{margin:0}
}
@media (hover:none){
  .platform-name{display:none !important}
  .platforms .platform{justify-content:center !important}
}

@media (max-width:900px){
  /* a touch more room and a slightly smaller face so the flag and the code
     always fit side by side */
  .phone-wrap{grid-template-columns:minmax(104px,auto) 1fr;gap:8px}
  .phone-wrap select{font-size:.92rem;padding:0 24px 0 8px !important}
}


/* ============================================================
   Only the outer bubble and the video frame itself are outlined.
   The bio photo, the Latest Release inner card and the panel that
   holds the video tiles carry no border and no glow of their own.
   ============================================================ */
.about-image,
.release-card,
.video-grid-panel,
body.black-bg .about-image,
body.black-bg .release-card,
body.black-bg .video-grid-panel{
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;
}

/* ============================================================
   No rule running through the section headings.
   ============================================================ */
.section-title::before,.section-title::after,
.gold-fill-panel .section-title::before,.gold-fill-panel .section-title::after,
body.black-bg .section-title::before,body.black-bg .section-title::after,
body.black-bg .gold-fill-panel .section-title::before,
body.black-bg .gold-fill-panel .section-title::after{
  content:none !important;
  display:none !important;
}


/* ============================================================
   THE PAGE BACKGROUND — /Wallpaper/Background.webp
   It lives on <html>, not on <body>: body carries the page zoom,
   and a background painted inside that box would be scaled with
   it. On <html> the image is measured against the real viewport,
   so `cover` keeps it edge to edge at every zoom level while the
   content goes on scaling exactly as before. The bars, the
   layout and the no-scroll rule are untouched.
   ============================================================ */
html{background-color:#0a0a0c}
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:url("/Wallpaper/Background.webp");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;        /* never leaves a bare strip, at any zoom */
  background-color:#0a0a0c;
}
/* the store is strictly black and white */
html.store-mode::before{filter:grayscale(1) contrast(1.04) brightness(.96)}
@media (prefers-reduced-motion: reduce){ html::before{transition:none} }

/* the store's old silver centre-glow would sit on top of the photograph */
body.black-bg::before{content:none !important}