/* THEME */

:root{
  color-scheme: dark;

  --bg-color:#050609;
  --nav-bg:rgba(5,6,9,.7);
  --panel-color:rgba(255,255,255,.045);
  --panel-strong-color:rgba(255,255,255,.075);
  --border-color:rgba(255,255,255,.12);
  --section-border-color:rgba(255,255,255,.10);
  --button-border-color:rgba(255,255,255,.25);
  --hover-border-color:rgba(215,182,106,.38);
  --hover-bg-color:rgba(255,255,255,.04);  
/*  --hover-gradient-bg-color:linear-gradient(90deg,rgba(215,182,106,.02) 0%,rgba(215,182,106,.14) 50%,rgba(215,182,106,.02) 100%);*/
  --hover-gradient-bg-color:linear-gradient(to top,rgba(215,182,106,.16) 0%,rgba(215,182,106,.08) 25%,transparent 60%);
  --map-bg-color:rgba(255,255,255,.025);
  
  --note-border:1px solid rgba(215,182,106,.17);
  --note-background:rgba(215,182,106,.035);  
  --lyrics-border:1px solid rgba(215,182,106,.12);
  
  --accent-border:3px solid #d8bf74;

  --text-color:#f5f0e8;
  --heading-color:rgba(245,240,232,.94);
  --rich-text-color:rgba(245,240,232,.68);
  --article-text-color:rgba(245, 240, 232, .80);
  --short-text-color:rgba(245,240,232,.70);
  --muted-text-color:rgba(245,240,232,.60);
  --menu-text-color: rgba(245,240,232,.72);
  --button-text-color:rgba(245,240,232,.80);
  --gold-color:#d7b66a;
  --dark-color:#11100c;

  --max-width:1180px; 
  --page-width:880px;
  --content-width:800px;
  --narrow-width:700px;
  --archive-raw-width:800px;
  --article-shel-w: 980px;
/*  --release-detail-shel-w: 980px;*/

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;

  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4.5rem;
  --space-xxl:5.8rem;

  --shadow-soft:0 20px 60px rgba(0,0,0,.28);
  --shadow-strong:0 30px 90px rgba(0,0,0,.45);

  --ease:cubic-bezier(.22,1,.36,1);
  
  --hero-bg-image:url("/assets/images/bg/page-hero-default-bg.webp");
  --intro-bg-image:url("/assets/images/bg/intro-default-bg.webp");
  
  --2-col-min:380px;
  --3-col-min:280px;
  --2-grids:repeat(auto-fit,minmax(min(100%,var(--2-col-min)),1fr));
  --3-grids:repeat(auto-fit,minmax(min(100%,var(--3-col-min)),1fr));
  --catalog-thumb-w:150px;
  
/*  --boxshadow-more: 0 0 10px rgba(215,182,106,.22),0 0 60px rgba(215,182,106,.08),0 14px 40px rgba(0,0,0,.32);*/
  --boxshadow-more: 0 0 5px rgba(215,182,106,.22),0 0 30px rgba(215,182,106,.08),0 14px 20px rgba(0,0,0,.32);
  --boxshadow-less: 0 36px 110px rgba(0,0,0,.38);
  --btn-shadow: 0 0 24px rgba(215,182,106,.22),0 0 60px rgba(215,182,106,.08),0 14px 40px rgba(0,0,0,.32);
}

/* LIGHT THEME */

[data-theme="light"]{
  color-scheme: light;

  --bg-color:#f4efe6;
  --panel-color:rgba(255,255,255,.66);
  --panel-strong-color:rgba(255,255,255,.86);
  --border-color:rgba(20,15,10,.13);
  --section-border-color:rgba(255,255,255,.10);
  --button-border-color:rgba(255,255,255,.25);

  --text-color:#191510;
  --muted-text-color:rgba(25,21,16,.66);
  --gold-color:#9f742f;

  --shadow-soft:0 18px 50px rgba(60,45,25,.14);
  --shadow-strong:0 28px 80px rgba(60,45,25,.22);
}


/* ============== BASE ==================================================*/

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

html{
  background:var(--bg-color);
  color:var(--text-color);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter, sans-serif;
  line-height:1.6;
  background:
    radial-gradient(circle at top left, rgba(215,182,106,.12), transparent 34rem),
    var(--bg-color);
  color:var(--text-color);
}

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

/*svg{
	max-width:100px;
}
*/
svg path{
    fill:var(--icon-color,currentColor);
}


a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

h1{
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:.92;
  letter-spacing:-.06em;
}

h2{
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1;
  letter-spacing:-.05em;
}

h3{
  font-size:clamp(1.35rem,2vw,1.8rem);
  line-height:1.2;
  letter-spacing:-.03em;
}

h4{
  font-size:1.15rem;
  line-height:1.3;
  letter-spacing:-.02em;
}

h5{
  font-size:.95rem;
  line-height:1.4;
  letter-spacing:.02em;
  text-transform:uppercase;
}

p.xl{
	font-size:2rem;
	font-weight:500;	
}

h1,h2,h3,h4,h5{
  margin:0;
  font-weight:650;
}

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


.site-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-main{
  flex:1;
}

/*.wide-wrap{
  width:min(100% - 2rem,var(--max-width));
  margin-inline:auto;
}*/

/*.narrow-wrap{
  width:min(100% - 2rem,var(--content-width));
  margin-inline:auto;
}*/

/* ============== header ==================================================*/
.skip-link{
  position:absolute;
  left:-9999px;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  z-index:2000;
  padding:.75rem 1rem;
  background:var(--gold-color);
  color:#000;
  border-radius:var(--radius-sm);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
/*  background: linear-gradient(180deg, rgba(5,6,9,.70), rgba(5,6,9,.35), transparent 0%);*/
  background: linear-gradient(180deg, rgba(5,6,9,.70), rgba(5,6,9,.35), rgba(5,6,9,.15));
  backdrop-filter: blur(12px);
}

.site-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding:0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*gap: 24px;*/
}

.site-brand {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space:nowrap;
}

.header-nav{
  margin-left:auto;
}


.nav-list {
  display: flex;
  gap:2.2rem;
  align-items: center;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--menu-text-color);
  list-style:none;
}


.site-brand a,
.nav-list a{
  transition:
  color .25s var(--ease),
  opacity .25s var(--ease);
}

.nav-list a:hover,
.nav-list a.current,
.nav-list a[aria-current="page"],
.site-brand a:hover{
  color: var(--gold-color);
}

.nav-list a.current {
  text-shadow: 0 0 22px rgba(215,182,106,.26);
  font-weight:600;
}

header .archive-nav, .mobile-menu-toggle{
  display:none;
}

/* ============== hero-section ==================================================*/
.hero-section,
.page-hero{
  position: relative;  
  display:flex;
  align-items:flex-end;
  overflow: hidden;
  isolation:isolate;
  background:transparent;
  /* min-height: 100svh;
  display: grid;
  align-items:center;*/
}

.hero-section > *,
.page-hero > *{
  position:relative;
  z-index:1;
}

.home-hero{
  min-height:100svh;
}

.feature-hero{
  margin-top:3rem;
}

.hero-bg, .intro-bg{
  position: absolute;
  inset:0;
  background-size:cover;
  background-position:center bottom;
  background-position:center bottom;
  background-repeat:no-repeat;
  z-index:-1;

/*heavy overlay*/
/*background-image:
  linear-gradient(
  90deg, 
  rgba(5,6,9,.82) 0%, 
  rgba(5,6,9,.42) 45%, 
  rgba(5,6,9,.76) 100%
  ),
  linear-gradient(
  180deg, 
  rgba(5,6,9,.24) 0%, 
  rgba(5,6,9,.18) 45%, 
  rgba(5,6,9,.76) 100%
  ),
  var(--hero-bg-image);*/
  
background-image:
  linear-gradient(
  90deg, 
  rgba(5,6,9,.35) 0%, 
  rgba(5,6,9,.25) 45%, 
  rgba(5,6,9,.35) 100%
  ),
  linear-gradient(
  180deg, 
  rgba(5,6,9,.75) 0%, 
  rgba(5,6,9,.20) 45%, 
  rgba(5,6,9,.75) 100%
  ),
  var(--hero-bg-image);  

}


.hero-bg{
  border-bottom:1px solid var(--border-color);	
}


.hero-wrap, .section-wrap {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto; 
}

.hero-wrap{
	padding: 9rem 1.5rem 3rem 1.5rem;
  
}

.section-wrap{
  	padding:7rem 1.5rem 5rem;
}

.card-list-section .section-wrap{
  padding:3rem 1.5rem;
}


.hero-section h1{
  margin:0;
  max-width:var(--content-width);
  font-size:clamp(3.2rem,7.8vw,7rem);
  line-height:1.1;
  letter-spacing:-.06em;
}

.intro-block,.section-text{
  max-width:var(--content-width);
  margin-top:1.5rem;
  color:var(--short-text-color);
  font-size:1.08rem;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
/*  gap: 14px;*/
/*  margin-top: 34px;*/
  gap: 1rem;
  margin-top:3rem;
}

.action-btn,
.btn-float{
/*  min-height: 48px;*/
  color: var(--button-text-color);
  min-height:3rem; 
  padding:0.85rem 1.5rem;
  border-radius: 999px;
  border:1px solid var(--button-border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  box-shadow:var(--btn-shadow);
}

.action-btn:hover,
.btn-float:hover {
  transform: translateY(-2px);
  background:var(--hover-gradient-bg-color);
  border-color:var(--hover-border-color);
  color: var(--gold-color);
}

.primary-btn {
  background: var(--gold-color);
  color:var(--dark-color);
}
.primary-btn:hover{
  background:var(--gold-color);	
  color:var(--dark-color);
}

.primary-btn, .ghost-btn{
	min-width:12rem;	
}

.single-btn{
	margin-top:1.5rem;
}


/* ==============  section  ==================================================*/

.section-head {
  text-align:center;
  margin-bottom:3rem;
}

.card-list-section .section-head{
	  margin-bottom:5rem;
}

.eyebrow,
.section-label,
.card-eyebrow,
.cta_text{
  margin:0 0 .75rem;
  color: var(--gold-color);
  font-size: .75rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 800;
  
}

.section-title{
  margin:0 0 1rem;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height:1;
}


.section-text {
   margin: 1rem auto;
   max-width:var(--narrow-width);
/*same property as intro-block*/
}

.section-action {
  margin-top:5rem;
  text-align: center;
  display:flex;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
}

.card-list-section .section-action {
  margin-top:7rem;	
}

.section-action a {
  padding: 1rem 3rem;
  min-width:18rem;
}

.section-action a:hover {
  color: var(--gold-color);
}




/* =====card common */


.card-grid{
  display:grid;
  grid-template-columns:var(--2-grids);
  gap:2rem;
  justify-content:center; 
}

.card-list-section .card-grid{
  row-gap:2rem;	
}

.card-link{
  display:flex;
  flex-direction:column;
  width:auto;
  height:100%;
  overflow: hidden;
  border-radius:1.7rem;
  border:1px solid var(--border-color);
  background:
    radial-gradient(circle at 80% 10%, rgba(215,182,106,.075), transparent 34%),
    rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:var(--boxshadow-less);
}


.card-link:hover {
  transform: translateY(-5px);
  border-color:var(--hover-border-color);
  background:
    radial-gradient(circle at 80% 10%, rgba(215,182,106,.11), transparent 36%),
    rgba(255,255,255,.06);
}


.card-body{
	padding:1rem;	
}

.card-eyebrow{
	margin:0.5rem 0;
    font-size: .7rem;
}

.card-body h3{
	margin:0;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  font-weight:500;
}

.excerpt{
  color:var(--short-text-color);
}

.card-link img{
  transition:transform .7s var(--ease);
  width:100%;
  height:auto;
}

.card-link:hover img{
  transform:scale(1.07);
}

.release-card .card-image{
	margin:1rem 1rem 0;
	overflow: hidden;
	border-radius:1.1rem;
}

.release-card img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.reflection-card img{
  aspect-ratio:16/10;
  object-fit:cover;
}

/* ============== section common  ==================================================*/

.quote-section .quote-panel{
	text-align:center;
	margin:auto;
	max-width:var(--content-width);
}

.quote-section h3{
	font-size:clamp(2rem,3vw,3rem);
}


.showcase-card{
  overflow:hidden;
  display:grid;
  grid-template-columns:var(--2-grids);
  gap:2.5rem;
  align-items:center;
  padding:3rem; 
  min-height:500px;	
  border-radius:2rem;;
  border: 1px solid var(--border-color);
  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;  
  box-shadow:var(--boxshadow-more);
}

.showcase-card h1, .showcase-card h2 {
  margin:0;
  text-shadow:0 8px 34px rgba(0,0,0,.64);  
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.showcase-card h1 {
	letter-spacing: -.03em;	
	line-height:1;
}

.showcase-card-text{
	  font-size:1.2rem;
	  color:var(--short-text-color);	
}

.hero-showcase-card{
  min-height:auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  gap:3rem;
  background:
    radial-gradient(circle at 24% 50%, rgba(215,182,106,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  backdrop-filter: blur(14px);
  box-shadow:var(--boxshadow-less);
}

.hero-showcase-card h1{
	line-height:1.1;
	font-size: clamp(2.3rem, 4.5vw, 3.7rem);
}

.hero-showcase-card img {
  width:100%;
  object-fit: cover;
  margin-inline: auto;
  border-radius: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}



.single-col-showcase-card{
  overflow:hidden; 
  display:flex;
  align-items:center;
  justify-content:center;  
  text-align:center;
  padding:4rem; 
  min-height:500px;	
  border-radius:2rem;;
  border:1px solid var(--border-color);
  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;
  box-shadow:var(--boxshadow-more);
  
}

.single-col-showcase-card h2 {
	margin:0;
	text-shadow:0 8px 34px rgba(0,0,0,.64);
    font-size: clamp(3rem, 9vw, 7rem);
}

.single-col-showcase-card p{
	font-size:2rem;
	font-weight:500;
	max-width:var(--content-width);

}


/* ==============  page  ==================================================*/



.hero-heading{
	text-align:center;
	margin:auto;
	margin-bottom:5rem;
/*	max-width:var(--narrow-width);*/	
}

.page-title{
	margin:0;
    text-shadow: 0 8px 34px rgba(0,0,0,.64);
	font-size:clamp(2.8rem,6.5vw,5.9rem);
}

.page-intro{
   color:var(--short-text-color);
   font-size:1.1rem;
}


.page-card{
	padding:0;
	gap:0;
}

.page-card .text-panel{
	padding:3.5rem;
}



.page-card .media-panel{
	height:100%;
	display:block;
}

.page-card img {
  height:100%;
  display:block;
  border-radius:0;
  border:none;
  box-shadow:none;
}


.note {
  padding:1rem;
  border-radius:18px;
  border:var(--note-border);
  background:var(--note-background);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
.note p{margin:0;}
.note-text{}


.text-card-grid{
	grid-template-columns:var(--3-grids);
}

.text-card{
	padding: clamp(1.5rem, 3vw, 2.2rem);
}
.text-card h3 {
  	margin: 1rem 0;
  	font-size: clamp(1.45rem, 3vw, 2.25rem);
}

.text-card .excerpt{
	margin-bottom:1.5rem;
}


.no_link-card{
    pointer-events:none;
}


.cta_text{
 	margin-top:auto;
}


/* ==============  Footer  ==================================================*/
.site-footer{
  margin-top:var(--space-xxl);
  padding:3.5rem 0 5rem;
  border-top:1px solid var(--section-border-color);
}

.footer-inner{
  width:min(100% - 2rem,var(--max-width));
  margin-inline:auto;
}

.footer-links{
  display:grid;
  gap:1.5rem;
  justify-items:center;
}

.footer-links .nav-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem 2rem;
  margin:0;
  padding:0;
  list-style:none;
}

.footer-links a{
  font-size:0.9rem;
  letter-spacing: .1em;
  text-transform:none;
  color:var(--muted-text-color);
  position:relative;
  transition:
  color .25s var(--ease),
  opacity .25s var(--ease);
}

.footer-links a.current,
.footer-links a[aria-current="page"],
.footer-links a:hover{
  color: var(--gold-color);
}

.footer-copy{
  margin:2rem 0 0;
  color:var(--muted-text-color);
  font-size:.9rem;
  text-align:center;
}


/* ==============  social-links ==================================================*/

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top:1.5rem;
/*  justify-content: center;*/
}

.footer-social-links{
	justify-content:center;
	margin:0 auto 1.5rem;
}


.social-links a {
  width:2.7rem;
  height:2.7rem;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  border-radius:999px;
}

.social-links svg {
    width:1.7rem;
    height:1.7rem;
    display:block;
}



/* ==============  lighting  ==================================================*/

.section-light-right{
  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(215,182,106,.11),
      transparent 40%
    );
}

.section-light-left{
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(215,182,106,.10),
      transparent 38%
    );
}

.section-light-center{
  background:
    radial-gradient(
      circle at center,
      rgba(215,182,106,.12),
      transparent 40%
    );
	
}

.section-light-bottom{
  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(215,182,106,.12),
      transparent 40%
    );
}



/* ==============  Mobile Menu  ==================================================*/
.nav-list a{
  position:relative;
}

.nav-list a::before{
  content:"";

  position:absolute;
  left:-.9rem;
  top:50%;

  width:.35rem;
  height:1px;

  background:var(--gold-color);

  opacity:0;
  transform:
    translateY(-50%)
    translateX(.35rem);

  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease);
}

.nav-list a:hover::before,
.nav-list a.current::before,
.nav-list a[aria-current="page"]::before{
  opacity:1;
  transform:
    translateY(-50%)
    translateX(0);
}


mobile-menu-toggle{
    display:none;	
}