/* =========================================================
   5D VIBRATION — COMPONENTS
   ========================================================= */


/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(5,20,31,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header__row{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}

.brand img{
  width:62px;
  height:62px;
  object-fit:contain;
}

.brand__text{
  font-family:"Cinzel",Georgia,serif;
  font-weight:500;
  text-transform:uppercase;
  color:#e4bd68;
  font-size:1.22rem;
  letter-spacing:.09em;
  white-space:nowrap;
  line-height:1;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1,"kern" 1;
}

.brand__tag{
  display:block;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:.55rem;
  letter-spacing:.15em;
  color:#e4e8eb;
  margin-top:5px;
}

.nav{
  margin-left:auto;
  display:flex;
  gap:26px;
  align-items:center;
  color:#f8f5ef;
  font-size:.92rem;
}

.nav a{
  opacity:.88;
}

.nav a:hover,
.nav a[aria-current="page"]{
  opacity:1;
  color:var(--gold-2);
}

.nav-toggle{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size:1.5rem;
}

.nav.is-open{
  display:flex;
}

/* =========================================================
   GLOBAL SECTION / CONTAINER
   ========================================================= */

.section{
  padding:30px 0 24px;
}

.container{
  padding:0;
}


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

.hero{
  position:relative;
  padding:24px 0 16px;
}

.hero-card{
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

.hero-card img{
  width:100%;
  height:auto;
  display:block;
}

.hero-mobile-copy{
  display:none;
}

.hero-mobile-copy__text{
  margin:18px 0 0;
  color:#eef2f5;
  font-size:1rem;
  line-height:1.75;
  text-align:center;
}

.hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.hero__actions--mobile{
  justify-content:center;
}

.hero__motto{
  margin-top:18px;
  color:var(--gold-2);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
}


/* =========================================================
   PANELS / MESSAGE CARDS
   ========================================================= */

.panel{
  background:var(--panel);
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:42px;
}

.message-grid,
.album-grid,
.article-grid{
  display:grid;
  gap:20px;
}

.message-grid{
  grid-template-columns:repeat(3,1fr);
}

.message-card{
  padding:28px;
  text-align:center;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.98),
    rgba(249,250,251,.94)
  );
}

.message-card__icon{
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  background:radial-gradient(circle,var(--gold-2),#bf8733);
  box-shadow:var(--glow);
  font-size:1.7rem;
  color:#fff;
}

.message-card h3{
  font-family:var(--font-display);
  font-size:1.7rem;
  margin-bottom:10px;
  color:#184076;
}

.message-card p{
  line-height:1.62;
  color:#556980;
  margin:0;
}


/* =========================================================
   ALBUM CARDS
   ========================================================= */

.album-grid{
  grid-template-columns:repeat(6,1fr);
}

.album-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(9,34,52,.12);
}

.album-card__art{
  aspect-ratio:1;
  position:relative;
  overflow:hidden;
  background:#10283b;
}

.album-card__art img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.album-card:hover .album-card__art img{
  transform:scale(1.04);
}

.album-card__body{
  padding:12px 10px 14px;
}

.album-card h3{
  font-family:var(--font-display);
  font-size:1.04rem;
  margin-bottom:5px;
  color:#fff;
  display:none;
}

.album-card p{
  font-size:.82rem;
  color:#37608e;
  margin:0;
  text-align:center;
  font-weight:600;
}


/* =========================================================
   ARTICLE CARDS
   ========================================================= */

.article-grid{
  grid-template-columns:repeat(4,1fr);
}

.article-card{
  cursor:pointer;
}

.article-card__link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.article-card__link:focus-visible{
  outline:2px solid #e4bd68;
  outline-offset:4px;
  border-radius:16px;
}

.article-card__image{
  aspect-ratio:16/10;
  position:relative;
  overflow:hidden;
  background:#10283b;
}

.article-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.article-card:hover .article-card__image img{
  transform:scale(1.035);
}

.article-card__body{
  padding:18px 18px 20px;
}

.article-card h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.12;
  margin-bottom:10px;
  color:#163b73;
}

.article-card p{
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.5;
}

.card-link{
  color:#a66f20;
  font-weight:700;
  font-size:.86rem;
}


/* =========================================================
   RESOURCE PAGES
   ========================================================= */

.resource-hero{
  padding:38px 0 18px;
  color:#fff;
}

.resource-hero__shell{
  position:relative;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:34px;
  padding:42px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      135deg,
      rgba(4,28,45,.88),
      rgba(6,45,69,.62) 45%,
      rgba(58,99,132,.32)
    ),
    radial-gradient(
      circle at 70% 28%,
      rgba(255,223,169,.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 14% 18%,
      rgba(255,211,117,.16),
      transparent 24%
    );

  box-shadow:0 28px 80px rgba(7,23,35,.22);
}

.resource-hero__shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../img/hero/celestial-bg.webp') center/cover no-repeat;
  opacity:.16;
  mix-blend-mode:screen;
}

.resource-hero__shell::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-120px;
  width:430px;
  height:430px;
  border-radius:50%;
  border:1px solid rgba(255,230,184,.3);
  box-shadow:
    0 0 0 60px rgba(255,221,152,.06),
    0 0 90px rgba(255,215,125,.16);
}

.resource-hero__content,
.resource-hero__visual{
  position:relative;
  z-index:2;
}

.resource-hero__content h1{
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,6rem);
  line-height:.92;
  color:#fff6df;
  margin:10px 0 16px;
}

.resource-hero__content p{
  max-width:720px;
  line-height:1.75;
  color:#edf4f7;
  font-size:1.06rem;
  margin-bottom:0;
}

.resource-hero__motto{
  margin-top:24px;
  color:#ffd989;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.resource-hero__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.meta-pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  font-size:.84rem;
  color:#fff7ea;
}


/* =========================================================
   ALBUM VISUAL
   ========================================================= */

.album-visual{
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
}

.album-visual__halo{
  position:absolute;
  width:82%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,242,209,.28) 0%,
      rgba(247,210,132,.14) 28%,
      transparent 65%
    );
  filter:blur(2px);
}

.album-visual__main{
  position:relative;
  width:min(100%,330px);
  aspect-ratio:1;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 30px 80px rgba(3,17,26,.34),
    0 0 40px rgba(255,219,145,.20);
}

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

.album-visual__wing{
  position:absolute;
  inset:auto auto 36px 50%;
  transform:translateX(-50%);
  width:95%;
  height:64%;

  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(255,255,255,.48),
      transparent 33%
    ),
    radial-gradient(
      circle at 75% 50%,
      rgba(255,255,255,.48),
      transparent 33%
    );

  filter:blur(14px);
  opacity:.9;
}

.album-visual__thumb{
  position:absolute;
  width:108px;
  aspect-ratio:1;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 18px 35px rgba(0,0,0,.22);
}

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

.album-visual__thumb--a{
  left:6%;
  top:10%;
}

.album-visual__thumb--b{
  right:0;
  top:22%;
}

.album-visual__thumb--c{
  right:12%;
  bottom:4%;
}

.album-visual__glow{
  position:absolute;
  bottom:2%;
  left:50%;
  transform:translateX(-50%);
  width:74%;
  height:80px;

  background:
    radial-gradient(
      circle,
      rgba(255,235,180,.72) 0%,
      rgba(255,223,150,.18) 42%,
      transparent 72%
    );

  filter:blur(8px);
}


/* =========================================================
   ARTICLE VISUAL
   ========================================================= */

.article-visual{
  position:relative;
  min-height:390px;
  padding:14px;
}

.article-visual__frame{
  position:relative;
  margin-left:auto;
  width:min(100%,360px);
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 28px 80px rgba(3,17,26,.32);
}

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

.article-visual__quote,
.article-visual__chip{
  position:absolute;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fffaf0;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.article-visual__quote{
  left:0;
  bottom:8%;
  max-width:200px;
  padding:16px 18px;
  border-radius:20px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.2;
}

.article-visual__chip{
  right:0;
  top:10%;
  padding:10px 14px;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#ffe0a2;
}

.article-visual__orb{
  position:absolute;
  right:9%;
  bottom:4%;
  width:125px;
  height:125px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,242,208,.86),
      rgba(255,213,120,.18) 46%,
      transparent 72%
    );

  filter:blur(8px);
}


/* =========================================================
   CONTENT SHELL
   ========================================================= */

.content-shell{
  background:rgba(255,252,245,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:34px;
  padding:42px;
  box-shadow:0 22px 70px rgba(5,28,44,.20);
}


/* =========================================================
   LISTINGS
   ========================================================= */

.listing-grid{
  display:grid;
  gap:24px;
}

.listing-grid--albums{
  grid-template-columns:repeat(3,1fr);
}

.listing-grid--articles{
  grid-template-columns:repeat(3,1fr);
}

.album-feature-card,
.article-feature-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(15,47,69,.12);
  border:1px solid rgba(27,76,103,.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.album-feature-card:hover,
.article-feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 54px rgba(15,47,69,.18);
}

.album-feature-card__image{
  aspect-ratio:1;
  overflow:hidden;
  background:#10283b;
}

.article-feature-card__image{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#10283b;
}

.album-feature-card__image img,
.article-feature-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.album-feature-card:hover img,
.article-feature-card:hover img{
  transform:scale(1.035);
}

.album-feature-card__body,
.article-feature-card__body{
  padding:22px;
}

.album-feature-card h2,
.article-feature-card h2{
  font-family:var(--font-display);
  color:#153d72;
  line-height:1.08;
  margin:0 0 9px;
}

.album-feature-card h2{
  font-size:1.65rem;
}

.article-feature-card h2{
  font-size:1.5rem;
}

.album-feature-card p,
.article-feature-card p{
  color:#63778a;
  line-height:1.6;
  margin-bottom:14px;
}

.card-meta{
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#aa7a2f;
  font-weight:700;
  margin-bottom:10px;
}

.love-note{
  text-align:center;
  margin-top:28px;
  color:#fff4d9;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem,3vw,2.2rem);
  text-shadow:0 2px 14px rgba(7,28,40,.3);
}


/* =========================================================
   DETAIL PAGES
   ========================================================= */

.detail-shell{
  background:rgba(255,252,245,.94);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.55);
  padding:42px;
  box-shadow:0 22px 70px rgba(5,28,44,.2);
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:26px;
}

.prose{
  color:#294560;
  line-height:1.78;
  font-size:1rem;
}

.prose h2{
  font-family:var(--font-display);
  color:#153d72;
  font-size:2rem;
  margin:1.8em 0 .6em;
}

.prose blockquote{
  margin:28px 0;
  padding:20px 24px;
  border-left:4px solid var(--gold);
  background:rgba(214,168,79,.08);
  border-radius:0 18px 18px 0;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:#163b73;
}

.aside-card{
  background:#fff;
  border-radius:24px;
  padding:22px;
  box-shadow:0 14px 36px rgba(9,34,52,.12);
  border:1px solid rgba(27,76,103,.08);
}

.aside-card + .aside-card{
  margin-top:18px;
}

.aside-card h3{
  font-family:var(--font-display);
  color:#153d72;
  margin-bottom:10px;
}


/* =========================================================
   TRACK LIST
   ========================================================= */

.track-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.track{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:14px;
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 10px 26px rgba(9,34,52,.08);
  border:1px solid rgba(27,76,103,.08);
}

.track__num{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,var(--gold-2),#bf8733);
  color:#fff;
  font-weight:700;
  box-shadow:var(--glow);
}

.track__title{
  font-weight:700;
  color:#143a6f;
}

.track__meta{
  font-size:.88rem;
  color:#6a7c8b;
  margin-top:3px;
}

.track__time{
  font-weight:700;
  color:#9e7124;
}


/* =========================================================
   RELATED
   ========================================================= */

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:24px;
}

.related-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(9,34,52,.1);
  border:1px solid rgba(27,76,103,.08);
}

.related-card__image{
  aspect-ratio:16/10;
  overflow:hidden;
}

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

.related-card__body{
  padding:18px;
}

.related-card h3{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:#153d72;
  margin:0 0 8px;
}

.related-card p{
  color:#5d7285;
  line-height:1.55;
}


/* =========================================================
   STUDIO
   ========================================================= */

.studio{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(7,24,36,.96) 0%,
      rgba(7,24,36,.82) 42%,
      rgba(7,24,36,.28) 100%
    ),
    var(--studio-bg) center/cover no-repeat;

  border-radius:34px;
  padding:42px;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;

  box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.studio::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border:1px solid rgba(255,218,140,.4);
  border-radius:50%;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  box-shadow:
    0 0 50px rgba(255,207,106,.18),
    0 0 0 36px rgba(255,255,255,.03);
}

.studio__copy{
  position:relative;
  z-index:2;
  max-width:650px;
}

.studio h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:10px;
}

.studio p{
  line-height:1.7;
  color:#dce7ec;
}

.studio__sign{
  position:relative;
  z-index:2;
  text-align:right;
  color:#f0ddb2;
  font-family:var(--font-display);
  font-style:italic;
  font-size:2rem;
  line-height:1.12;
  text-shadow:0 2px 12px rgba(0,0,0,.2);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-meta a{
  color:#5d7387;
  transition:
    color .22s ease,
    transform .22s ease;
}

.footer-meta a:hover,
.footer-meta a:focus-visible{
  color:#102b42;
  transform:translateY(-1px);
}

.site-footer{
  padding:0 0 44px;
}

.footer-card{
  background:#fffdf8;
  border-radius:0 0 28px 28px;
  box-shadow:0 15px 42px rgba(7,23,35,.12);
  border-top:1px solid rgba(6,23,35,.08);

  display:grid;
  grid-template-columns:1.2fr auto 1fr auto;
  align-items:center;
  gap:20px;

  padding:22px 28px;
}

.brand--footer img{
  width:60px;
  height:60px;
}

.brand--footer .brand__text{
  color:#173047;
}

.brand--footer .brand__tag{
  color:#6b7d8a;
}

.footer-socials{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.footer-socials a{
  background:transparent;
  box-shadow:none;
  width:auto;
  height:auto;
  border-radius:0;
  padding:0;
}

.footer-social{
  display:grid;
  place-items:center;
  transition:
    transform .2s ease,
    filter .2s ease;
}

.footer-social:hover{
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.06);
}

.footer-social img{
  display:block;
  width:42px;
  height:42px;
}

.footer-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  font-size:.84rem;
  color:#5d7387;
}

.footer-mantra{
  font-size:.82rem;
  line-height:1.45;
  color:#9a7b3d;
  text-align:right;
  font-weight:600;
}


/* =========================================================
   ALBUM REFINEMENT
   ========================================================= */

.resource-hero--album .resource-hero__shell{
  background:
    linear-gradient(
      135deg,
      rgba(4,33,54,.92),
      rgba(10,71,105,.62) 48%,
      rgba(117,180,211,.26)
    ),
    radial-gradient(
      circle at 18% 18%,
      rgba(255,219,136,.16),
      transparent 26%
    ),
    radial-gradient(
      circle at 68% 56%,
      rgba(255,242,206,.14),
      transparent 22%
    );
}

.resource-hero--album .resource-hero__shell::after{
  content:"";
  position:absolute;
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  width:520px;
  height:520px;

  border:none;
  border-radius:0;
  box-shadow:none;

  background:
    url('../img/brand/logo-5d-vibration-watermark.png')
    center/contain no-repeat;

  opacity:.18;

  filter:
    drop-shadow(0 0 20px rgba(255,221,146,.16));
}

.resource-hero__shell--stacked{
  grid-template-columns:1fr;
  gap:24px;
  padding-block:44px;
}

.resource-hero__shell--stacked .resource-hero__content{
  max-width:none;
  display:flex;
  flex-direction:column;
}

.resource-hero__shell--stacked .resource-hero__content h1{
  max-width:100%;
  margin-bottom:12px;
}

.resource-hero__shell--stacked .resource-hero__content p{
  max-width:980px;
}

.resource-hero__shell--stacked .resource-hero__visual{
  display:flex;
  justify-content:center;
  width:100%;
  margin:8px auto 0;
}

.resource-hero__shell--stacked .album-visual{
  min-height:auto;
  padding-top:6px;
  width:100%;
}

.resource-hero__shell--stacked .album-visual__main{
  width:min(100%,420px);
  border-radius:34px;
}

.resource-hero__shell--stacked .album-visual__glow{
  width:68%;
}

.resource-hero__shell--stacked .album-visual__thumb{
  display:none;
}

.resource-hero__shell--stacked .album-visual__wing{
  width:100%;
  height:78%;
  bottom:10px;
  opacity:1;
}

.resource-hero__textblock{
  max-width:980px;
  margin:18px auto 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.resource-hero__textblock p{
  max-width:980px;
}

.resource-hero__textblock .resource-hero__meta{
  margin-top:18px;
}

.resource-hero__textblock .resource-hero__motto{
  margin-top:16px;
}

.resource-hero__shell--stacked .resource-hero__textblock{
  width:100%;
}

.resource-hero--album
.resource-hero__shell:not(.resource-hero__shell--stacked){
  align-items:start;
}

.resource-hero--album
.resource-hero__shell:not(.resource-hero__shell--stacked)
.resource-hero__content{
  padding-top:34px;
}


/* =========================================================
   5D VIBRATION MUSIC ONLINE
   SMART 5D GLASS PLAYER
   ========================================================= */

.hero--music{
  position:relative;
  padding:24px 0 32px;
}

.hero--music .hero-card--music{
  position:relative;
  overflow:hidden;
}

.hero--music .hero-card--music picture{
  display:block;
  width:100%;
}

.hero--music .hero-card--music picture img{
  display:block;
  width:100%;
  height:auto;
}

.hero--music .hero-audio-box{
  position:absolute;
  z-index:10;

  left:4%;
  right:auto;
  bottom:5%;

  transform:none;

  width:min(520px,42%);
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  gap:10px;

  padding:18px 20px 20px;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(5,24,39,.72),
      rgba(17,58,84,.58)
    );

  backdrop-filter:
    blur(18px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(120%);

  border:1px solid rgba(228,189,104,.34);

  box-shadow:
    0 20px 50px rgba(3,18,29,.30),
    0 0 24px rgba(228,189,104,.13),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.hero--music .hero-audio-box__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 10px;
  color:#f8f4ea;
}

.hero--music .hero-audio-box__meta strong{
  margin:0;

  font-family:"Cinzel",Georgia,serif;
  font-size:1.08rem;
  font-weight:500;

  line-height:1.25;
  letter-spacing:.04em;

  color:#e4bd68;

  text-shadow:
    0 1px 8px rgba(0,0,0,.34),
    0 0 12px rgba(228,189,104,.10);
}

.hero--music .hero-audio-box__meta span{
  margin:0;

  font-size:.82rem;
  line-height:1.4;
  letter-spacing:.05em;

  color:rgba(255,255,255,.94);

  text-shadow:
    0 1px 7px rgba(0,0,0,.34);
}

.hero--music .hero-audio-box__player{
  display:block;

  width:100%;
  max-width:100%;

  margin:0;
  padding:0;

  overflow:hidden;

  border-radius:999px;

  background:#f1f3f4;

  box-shadow:
    0 8px 22px rgba(0,0,0,.24),
    0 0 18px rgba(228,189,104,.10);

  border:1px solid rgba(255,255,255,.16);
}

.hero--music .hero-audio-box__player audio,
.hero--music #odtwarzacz{
  display:block;

  width:100%;
  max-width:100%;
  height:46px;

  margin:0;
  padding:0;

  border:0;
  border-radius:999px;

  box-sizing:border-box;
}

@media (max-width:1000px){

  .hero--music .hero-audio-box{
    left:4%;
    bottom:4%;

    width:min(500px,52%);

    transform:none;

    background:
      linear-gradient(
        135deg,
        rgba(5,24,39,.76),
        rgba(17,58,84,.64)
      );

    border:1px solid rgba(228,189,104,.32);

    box-shadow:
      0 18px 42px rgba(3,18,29,.30),
      0 0 20px rgba(228,189,104,.11),
      inset 0 1px 0 rgba(255,255,255,.09);
  }
}

@media (max-width:768px){

  .hero--music{
    padding:18px 0 24px;
  }

  .hero--music .hero-card--music{
    overflow:hidden;
  }

  .hero--music .hero-audio-box{
    position:absolute;

    left:4%;
    right:4%;
    bottom:4%;

    width:auto;

    margin:0;
    padding:14px 15px 15px;

    transform:none;

    border-radius:18px;

    background:
      linear-gradient(
        135deg,
        rgba(5,24,39,.82),
        rgba(17,58,84,.70)
      );

    backdrop-filter:
      blur(16px)
      saturate(115%);

    -webkit-backdrop-filter:
      blur(16px)
      saturate(115%);

    border:1px solid rgba(228,189,104,.30);

    box-shadow:
      0 16px 34px rgba(3,18,29,.32),
      0 0 16px rgba(228,189,104,.10),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  .hero--music .hero-audio-box__meta{
    margin-bottom:8px;
  }

  .hero--music .hero-audio-box__meta strong{
    font-size:.92rem;
  }

  .hero--music .hero-audio-box__meta span{
    font-size:.68rem;
    letter-spacing:.035em;
  }

  .hero--music .hero-audio-box__player audio,
  .hero--music #odtwarzacz{
    height:42px;
  }
}


/* =========================================================
   5D VIBRATION — MANIFESTO / MESSAGE SECTION

   WAŻNE:
   To właśnie tej części brakowało.
   Desktop: 20% logo + 5% przerwy + 75% treści.
   ========================================================= */

.message-manifesto{
  padding:44px 48px;
}

.message-manifesto__grid{
  display:grid;

  grid-template-columns:
    minmax(0,20%)
    minmax(0,75%);

  column-gap:5%;
  align-items:start;

  margin-top:30px;
}


/* LOGO COLUMN */

.message-manifesto__logo{
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding-top:4px;
}


/*
   To zabezpiecza logo przed przypadkowym przejęciem
   styli grafik artykułów / cardów / hero.
*/

.message-manifesto__logo img{
  display:block;

  width:100%;
  max-width:230px;

  height:auto;
  max-height:none;

  object-fit:contain;

  margin:0 auto;

  border:0;
  border-radius:0;

  box-shadow:none;

  filter:
    drop-shadow(
      0 18px 34px
      rgba(11,41,65,.12)
    );
}


/* CONTENT COLUMN */

.message-manifesto__content{
  min-width:0;
  width:100%;

  color:#294560;

  font-size:1rem;
  line-height:1.72;
}

.message-manifesto__content p{
  margin:0 0 22px;
}

.message-manifesto__lead{
  font-size:1.06rem;
  line-height:1.65;
  color:#173f73;
}

.message-manifesto__lead strong,
.message-manifesto__content strong{
  color:#153d72;
}

.message-manifesto__quote{
  margin-top:28px !important;

  font-family:var(--font-display);
  font-size:1.18rem;
  line-height:1.5;

  color:#173f73;
}

.message-manifesto__author{
  margin-top:18px !important;

  text-align:right;

  font-family:var(--font-display);
  font-style:italic;

  color:#173f73;
}


/* MANIFESTO MOBILE */

@media (max-width:900px){

  .message-manifesto{
    padding:30px 24px;
  }

  .message-manifesto__grid{
    grid-template-columns:1fr;

    column-gap:0;
    row-gap:26px;
  }

  .message-manifesto__logo img{
    width:min(56vw,220px);
    max-width:220px;
  }

  .message-manifesto__content{
    font-size:1rem;
  }

  .message-manifesto__author{
    text-align:left;
  }
}


/* =========================================================
   SIMPLE HERO BANNER
   ========================================================= */

.hero-banner{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  overflow:hidden;
}

.hero-banner a,
.hero-banner picture{
  display:block;
}

.hero-banner img{
  display:block;
  width:100%;
  height:auto;
}


/* =========================================================
   ARTICLE MANIFESTO LAYOUT
   Desktop: 28% image + 5% gap + 67% text
   ========================================================= */

.article-manifesto__grid{
  display:grid;

  grid-template-columns:
    minmax(0,28%)
    minmax(0,67%);

  column-gap:5%;
  align-items:start;
}

.article-manifesto__image{
  width:100%;
}

.article-manifesto__image img{
  display:block;

  width:100%;
  max-width:100%;
  height:auto;

  object-fit:contain;

  border-radius:22px;

  box-shadow:
    0 18px 45px rgba(7,31,49,.16),
    0 0 30px rgba(226,185,100,.10);
}

.article-manifesto__content{
  min-width:0;
  width:100%;

  color:#173f73;

  font-size:1.03rem;
  line-height:1.82;
}

.article-manifesto__content p{
  margin:0 0 1.35em;
}

.article-manifesto__lead{
  font-size:1.14rem;
  line-height:1.75;
  font-style:italic;
}

@media (max-width:800px){

  .article-manifesto__grid{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:28px;
  }

  .article-manifesto__image{
    width:100%;
    max-width:420px;
    margin:0 auto;
  }
}


/* =========================================================
   ARTICLE INLINE IMAGE
   Premium Gold Glow
   ========================================================= */

.article-inline-image{
  width:100%;

  display:flex;
  justify-content:center;
  align-items:center;

  margin:34px 0;

  overflow:visible;
}

.article-inline-image img{
  display:block;

  width:auto;
  max-width:90%;

  height:auto;
  max-height:none;

  object-fit:contain;

  border-radius:24px;

  border:
    1px solid
    rgba(228,189,104,.38);

  box-shadow:
    0 18px 42px rgba(7,31,49,.20),
    0 0 24px rgba(228,189,104,.16),
    0 0 52px rgba(228,189,104,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

.article-inline-image img:hover{
  transform:
    translateY(-3px)
    scale(1.006);

  box-shadow:
    0 24px 54px rgba(7,31,49,.24),
    0 0 30px rgba(228,189,104,.22),
    0 0 64px rgba(228,189,104,.12);

  filter:brightness(1.02);
}

@media (max-width:800px){

  .article-inline-image{
    margin:26px 0;
  }

  .article-inline-image img{
    max-width:100%;
    border-radius:18px;
  }
}

/* =========================================================
   SMART 5D — ALBUM DETAIL PAGE
   ========================================================= */

.album-page{
  padding:42px;
}

.album-page__intro{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:34px;
  align-items:start;
}

.album-page__cover{
  width:100%;
}

.album-page__cover img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 20px 55px rgba(8,30,47,.16),
    0 0 28px rgba(228,189,104,.12);
}

.album-page__content{
  min-width:0;
}

.album-page__kicker{
  margin:0 0 10px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#aa7a2f;
}

.album-page__title{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: .95;
  letter-spacing: .01em;
  color: #153d72;
  margin: 0 0 14px;
}

.album-page__description{
  color:#294560;
  font-size:1.02rem;
  line-height:1.82;
}

.album-page__description p{
  margin:0 0 1.2em;
}

.album-page__meta-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.album-page__tracks{
  margin-top:38px;
}

.track-list--album{
  gap:18px;
}

.track--player{
  grid-template-columns:64px 1fr;
  align-items:start;
  gap:18px;
  padding:18px 20px;
  border-radius:24px;
}

.track__main{
  min-width:0;
}

.track__player{
  margin-top:12px;
}

.track__player audio{
  display:block;
  width:100%;
  height:44px;
  border-radius:999px;
}

.track--player .track__title{
  font-size:1.18rem;
  line-height:1.2;
}

.track--player .track__meta{
  margin-top:5px;
  margin-bottom:0;
  font-size:.95rem;
  line-height:1.5;
}

@media (max-width: 980px){

  .album-page{
    padding:30px 24px;
  }

  .album-page__intro{
    grid-template-columns:1fr;
    gap:28px;
  }

  .album-page__cover{
    max-width:420px;
    margin:0 auto;
  }

  .album-page__meta-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){

  .album-page{
    padding:24px 18px;
  }

  .track--player{
    grid-template-columns:56px 1fr;
    gap:14px;
    padding:16px;
    border-radius:20px;
  }

  .track__num{
    width:56px;
    height:56px;
  }

  .track__player audio{
    height:42px;
  }
}

/* youtube */
.youtube-video{
  width:min(900px,100%);
  margin:36px auto 0;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:24px;

  border:1px solid rgba(228,189,104,.38);

  background:
    linear-gradient(
      135deg,
      rgba(8,30,48,.96),
      rgba(18,58,88,.92)
    );

  box-shadow:
    0 20px 50px rgba(7,31,49,.22),
    0 0 26px rgba(228,189,104,.16);
}

.youtube-video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:24px;
}