/* ===============================
   Author: {Marina}
   Date:   {August 2026}
   
   Notes:
   Hand coded for Build a Website
   from Scratch with HTML & CSS
   by Marina VFX
   
   Colour Palette:
   ---------------
   Void:		         #070912
   Deep Space:			#11172A
   Field Blue:			#19243D
   Starlight:			#F1EEE5
   Cosmic Dust:      #9299AA
   Marina Gold:      #E3CB73
   Stellar Gold:     #F1DFA0
   Quantum Violet:   #685B88
   =============================== */
/* Fonts */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/IBMPlexMono-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
}
/* General */
*{
   margin: 0;
   padding: 0;
   text-align: center;
   position: relative;
   list-style: none;
}
html {
   scroll-behavior: smooth;
}
#articles_tab {
   color: #E3CB73;
}
/* Hero */
.article_hero{
   position: relative;

   width: 1200px;
   height: 520px;
   margin: 0 auto;

   padding: 70px 65px;
   box-sizing: border-box;

   display: flex;
   align-items: center;

   overflow: hidden;

   background-color: #070912;
}
.article_back{
   position: absolute;

   top: 24px;
   left: 28x;

   z-index: 3;

   display: flex;
   align-items: center;
   gap: 8px;

   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 500;

   letter-spacing: 0.14em;
   text-transform: uppercase;

   color: #9299AA;

   text-decoration: none;

   transition: color 0.25s ease, transform 0.25s ease;
}
.article_back:hover{
   color: #E3CB73;
   transform: translateX(-3px);
}
.article_back span:first-child{
   color: #E3CB73;
   font-size: 14px;
}

.article_hero_content{
   position: relative;
   z-index: 2;

   text-align: left;
}
.article_hero_category{
   margin: 0 0 18px;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;

   letter-spacing: 0.2em;
   text-transform: uppercase;

   color: #F1DFA0;
}
.article_hero h1{
   margin: 0 0 22px;

   text-align: left;

   font-family: 'Cormorant', serif;
   font-size: 50px;
   font-weight: 500;
   line-height: 0.98;

   letter-spacing: 0.025em;

   color: #F1EEE5;
}
.article_hero h1 span{
   text-align: left;
   
   display: block;
   color: #F1DFA0;
}
.article_hero_subtitle{
   width: 470px;
   text-align: left;

   margin: 0 0 26px;

   font-family: 'Cormorant', serif;
   font-size: 22px;
   font-weight: 400;
   font-style: italic;

   line-height: 1.35;

   color: #9299AA;
}
.article_hero_meta{
   display: flex;
   align-items: center;
   gap: 10px;

   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 400;

   letter-spacing: 0.06em;

   color: #9299AA;
}
/* Articles Section */
.article_section{
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;

   display: grid;
   grid-template-columns: 48px minmax(0, 950px) 160px;
   
   column-gap: 28px;

   padding: 44px 50px;
   box-sizing: border-box;

   background: #070912;
}
.article_section_image{
   grid-template-columns: 48px minmax(0, 870px) 240px;
}
.article_section_first{
   border-top: 1px solid rgba(227, 203, 115, 0.16);
}
.article_section_last{
   border-bottom: 1px solid rgba(227, 203, 115, 0.16);
}

/* Numaber and Vertical line */
.article_section_marker{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.article_section_number{
   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;

   letter-spacing: 0.12em;

   color: #E3CB73;
}
.article_section_line{
   width: 1px;
   height: 54px;

   margin-top: 14px;

   background: rgba(227, 203, 115, 0.5);
}

/* Main Article Column */
.article_section_content{
   text-align: left;
}
.article_section_content h2{
   margin: 0 0 18px;

   text-align: left;

   font-family: 'Cormorant', serif;
   font-size: 31px;
   font-weight: 500;
   line-height: 1.12;

   letter-spacing: 0.01em;

   color: #F1EEE5;
}
.article_section_content p{
   margin: 0 0 16px;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.75;

   color: #9299AA;
   color: rgba(241, 238, 229, 0.72);
}
.article_section_content p:last-child{
   margin-bottom: 0;
}
.article_section_content em{
   font-family: 'Cormorant', serif;
   font-size: 1.08em;
   color: #F1EEE5;
}
.article_quote{
   margin: 22px 0 26px;
   padding: 4px 0 4px 22px;

   text-align: left;

   border-left: 1px solid rgba(227, 203, 115, 0.55);

   font-family: 'Cormorant', serif;
   font-size: 21px;
   font-weight: 400;
   font-style: italic;
   line-height: 1.5;

   color: #F1EEE5;

   text-shadow: 0 0 18px rgba(227, 203, 115, 0.06);
}
/* Right emphasized thought */
.article_side_note{
   align-self: start;

   display: flex;
   gap: 14px;

   margin-top: 52px;
}
.article_side_note_line{
   width: 1px;
   height: 58px;

   flex-shrink: 0;

   background: rgba(227, 203, 115, 0.5);
}
.article_side_note blockquote{
   margin: 0;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 500;
   line-height: 1.7;

   letter-spacing: 0.22em;
   text-transform: uppercase;

   color: #9299AA;
}

/* Right emphasized image */
.article_side_image{
   align-self: start;
   margin: 52px 0 0;
}
.article_side_image img{
   display: block;

   width: 100%;
   height: auto;

   border-radius: 2px;

   border: 1px solid rgba(227, 203, 115, 0.5);
   box-sizing: border-box;

   box-shadow: 0 0 12px rgba(227, 203, 115, 0.25);
}
.article_side_image figcaption{
   margin-top: 10px;

   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   line-height: 1.5;

   color: #9299AA;
}
/* Emphasis Break */
.article_emphasis_break{
   width: 1200px;
   height: 240px;

   margin: 0 auto;

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

   padding: 40px 70px;
   box-sizing: border-box;

   overflow: hidden;
   position: relative;

   background: url(../images/articles/quote_bg.jpg) center center no-repeat;

   border-top: 1px solid rgba(227, 203, 115, 0.18);
   border-bottom: 1px solid rgba(227, 203, 115, 0.18);
}

.article_emphasis_inner{
   position: relative;
   z-index: 2;

   width: 100%;
   max-width: 760px;
   margin: 0 auto;

   display: flex;
   flex-direction: column;
   align-items: center;

   text-align: center;
}

.article_emphasis_icon{
   width: 18px;
   height: 18px;

   display: block;
   margin-bottom: 18px;

   filter: drop-shadow(0 0 7px rgba(227, 203, 115, 035));
}
.article_emphasis_quote{
   margin: 0;

   font-family: 'Cormorant', serif;
   font-size: 34px;
   font-weight: 500;
   font-style: normal;
   line-height: 1.25;

   letter-spacing: 0.015em;

   color:#F1EEE5;
}

/* Final Line */
.article_final_line{
   margin-top: 28px !important;
   margin-bottom: 0 !important;

   font-family: 'Cormorant', serif;
   font-size: 20px !important;
   font-weight: 500;
   font-style: italic;
   line-height: 1.5 !important;

   color: #F1EEE5;

   position: relative;
   padding-top: 22px;
}
.article_final_line::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;

   width: 42px;
   height: 1px;

   background: rgba(227, 203, 115, 0.55);
}