@import 'pages.css';

/*====== pages overwrite===========*/

.nav-card-media{
   max-width:var(--catalog-thumb-w);
}

.nav-card-thumb {
  aspect-ratio:4/3;
}

/*==================*/

.intro-bg{	 
/*  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%, #050609 100%),
	 var(--page-image);*/
	 
/*    background-image:
    linear-gradient(90deg, rgba(5,6,9,.90) 50%, rgba(5,6,9,.70) 70%, rgba(5,6,9,.55) 90%),
    linear-gradient(180deg, rgba(5,6,9,.30) 0%, rgba(5,6,9,.30) 45%, rgba(5,6,9,.55) 90%),
	 var(--page-image);*/
/*	 background:none;*/

  background-size:100% auto;
  background-position:top;
  background-repeat:no-repeat;
  
  
  
  background-image:
    linear-gradient(
	90deg, 
	rgba(5,6,9,.75) 50%, 
	rgba(5,6,9,.70) 70%, 
	rgba(5,6,9,.75) 90%
	),
    linear-gradient(
	180deg, 
	rgba(5,6,9,.20) 0%, 
	rgba(5,6,9,.20) 45%, 
	rgba(5,6,9,.20) 90%
	),
	 var(--page-image);

}



.article-shell,
.section-light{
	position: relative;
	overflow: hidden;
	max-width:var(--article-shel-w);
	margin:auto;

}

.reading-area{
	max-width:70ch;	
	margin:auto;
}

.article-shell{
	padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4.8rem) clamp(2rem, 5vw, 3.4rem);
	padding: 4rem 1.5rem 5rem;
	border: 1px solid var(--border-color);
	border-radius: clamp(26px, 4vw, 38px);
	background:
    radial-gradient(circle at 50% -8%, rgba(215, 182, 106, .072), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .018) 42%, rgba(255, 255, 255, .011));
	box-shadow:var(--boxshadow-less);
  	backdrop-filter: blur(12px);
}


.article-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(var(--article-shel-w), 100%);
  height:50vh;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(215, 182, 106, .055), transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(77, 96, 116, .055), transparent 30%);
  opacity: .86;
}


.article-head{
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0;
  text-align:left;
}

.article-meta{
	margin-bottom:1.5rem;
    display:flex;
    flex-wrap:wrap;
    gap:0.7rem;
    color:var(--gold-color);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.article-meta > * + *::before{
    content:'•';
    margin-right:1rem;
    opacity:.6;
	color:var(--muted-text-color);
}


.article-title {
  margin: 0 0 clamp(1rem, 2.4vw, 1.35rem);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1;
  letter-spacing: -.025em;
}

.article-body, 
.detail-excerpt{
	font-size: clamp(1.08rem, 1.48vw, 1.2rem);
}

.detail-excerpt{
	text-align:center;
  padding:0.7rem;
  border-radius:18px;
  border:1px solid var(--section-border-color);
  background:var(--map-bg-color);	
}


.article-body h2 {
  margin:1.5rem 0;
  color: var(--heading-color);
  font-size: clamp(1.55rem, 3.5vw, 2.4rem);
  letter-spacing: -.035em;
}

.article-body p {
  margin: 0 0 1.5em;
  color: var(--article-text-color);
  font-size: clamp(1.08rem, 1.48vw, 1.2rem);
  letter-spacing: .002em;
  text-wrap: pretty;
}


.article-body p:first-of-type::first-letter{
    float:left;
    font-size:4.5rem;
    line-height:.82;
    font-weight:700;
    margin:.1em .1em 0 0;
    color:var(--gold-color);
}




/*.rich-text h3 {
  margin:1rem 0 0.5rem;
  color: var(--heading-color);
  font-size: 1.3rem;
  letter-spacing: .03em;
}

.rich-text h4 {
  margin:1rem 0 0.5rem;
  color: var(--heading-color);
  font-size: 1.1rem;
  letter-spacing: .05em;
}

.rich-text p,
.rich-text li {
  color:var(--rich-text-color);
  line-height: 1.8;
}

.rich-text p {
  margin:0 0 2rem;
}*/