/* ===============================
   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 */
.articles_hero{
   position: relative;
   width: 1200px;
   height: 400px;

   margin: 0 auto;

   overflow: hidden;

   background: url('../images/articles/articles_hero_bg.jpg') center center no-repeat;
}
.articles_hero_content{
   position: absolute;

   top: 50%;
   left: 550px;

   width: 430px;

   transform: translateY(-50%);

   text-align: left;
}
.articles_hero_content h1{
   margin: 0;
   text-align: left;

   font-family: 'Cormorant', serif;
   font-size: 58px;
   font-weight: 500;
   line-height: 1;

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

   color: #F1EEE5;
}
.articles_hero_accent{
   display: block;

   width: 48px;
   height: 1px;

   margin: 18px 0 18px;

   background: rgba(227, 203, 115, 0.7);
}
.articles_hero_subtitle{
   margin: 0;
   text-align: left;

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

   color: rgba(241, 238, 229, 0.78);
}
.articles_hero_note{
   position: absolute;

   top: 120px;
   right: 2px;

   width: 95px;

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

   text-align: center;
}
.articles_hero_note_star{
   margin-bottom: 12px;

   font-size: 16px;
   line-height: 1;

   color: #E3CB73;

   text-shadow: 0 0 10px rgba(227, 203, 115, 0.35);
}
.articles_hero_note_line{
   width: 1px;
   height: 80px;

   margin-bottom: 14px;
   background: rgba(227, 203, 115, 0.35);
}
.articles_hero_note p{
   margin: 0;
   text-align: right;

   position: relative;
   top: -90px;
   left: -50px;

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

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

   color: #9299AA;
}

/* Filter Bar */
.articles_library{
   width: 1200px;
   margin: 0 auto;
}
/* hide radio buttons */
.articles_library > input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

/* Filter Bar */
.article_filter{
   display: flex;
   align-items: center;
   justify-content: space-between;

   padding: 28px 50px 26px;
   
   border-bottom: 1px solid rgba(227, 203, 115, 0.35);
}
.article_filter_links{
   display: flex;
   align-items: center;

   gap: 22px;
}
.article_filter_links label{
   position: relative;

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

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

   color: #9299AA;

   cursor: pointer;

   transition: color 0.25s ease;
}
.article_filter_links label:hover{
   color: #F1EEE5;
}
.article_filter_links > span{
   color: rgba(227, 203, 115, 0.35);

   font-size: 10px;
}
.article_count{
   margin: 0;

   font-family: 'PlexMono', monospace;
   font-size: 10px;

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

   color: #9299AA;
}

/* active filter */
#filter_all:checked
~ .article_filter
label[for="filter_all"],

#filter_reflections:checked
~ .article_filter
label[for="filter_reflections"],

#filter_art:checked
~ .article_filter
label[for="filter_art"] {
   color: #E3CB73;
}
.article_filter_links label::after{
   content: "";

   position: absolute;

   left: 50%;
   bottom: -10px;

   width: 0;
   height: 1px;

   transform: translateX(-50%);

   background: #E3CB73;

   transition: width 0.25s ease;
}
#filter_all:checked
~ .article_filter
label[for="filter_all"]::after,

#filter_reflections:checked
~ .article_filter
label[for="filter_reflections"]::after,

#filter_art:checked
~ .article_filter
label[for="filter_art"]::after {
   width: 24px;
}

#filter_reflections:checked
~ .articles_grid
.article_card:not(.reflections) {
   display: none;
}

#filter_art:checked
~ .articles_grid
.article_card:not(.art) {
   display: none;
}

/* Articles Grid */
.articles_grid{
   width: 100%;
   box-sizing: border-box;

   padding: 42px 50px 60px;
}
.article_card_featured{
   width: 100%;
   max-width: 1100px;
   height: 280px;

   margin: 0 auto;

   background: #11172A;

   border: 1px solid rgba(227, 203, 115, 0.35);

   overflow: hidden;

   transition: 
      border-color 0.3s ease,
      transform 0.3s ease,
      box-shadow 0.3s, ease; 
}
.article_card_featured:hover{
   transform: translateX(-2px);
   border-color: rgba(227, 203, 115, 0.5);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.article_card_link{
   width: 100%;
   height: 100%;

   display: flex;

   color: inherit;
   text-decoration: none;
}
.article_card_image{
   width: 460px;
   height: 280px;

   flex-shrink: 0;

   overflow: hidden;
}
.article_card_image img{
   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition: transform 0.5s ease;
}
.article_card_featured:hover .article_card_image img{
   transform: scale(1.025);
}
/*Content*/
.article_card_content{
   flex: 1;

   padding: 34px 42px 32px;

   box-sizing: border-box;

   display: flex;
   flex-direction: column;

   text-align: left;
}
/*Meta*/
.article_card_meta{
   display: flex;
   align-items: center;
   gap: 10px;

   margin-bottom: 18px;

   font-family: "PlexMono", monospace;
   font-size: 10px;
   font-weight: 400;

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

   color: #E3CB73;
}
.article_card_meta span[aria-hidden="true"]{
   color: rgba(227, 203, 115, 0.35);
}
.article_card_meta time{
   color: #9299AA;
}
/*Title*/
.article_card_content h2{
   max-width: 500px;

   margin: 0 0 15px;

   font-family: 'Cormorant', serif;
   font-size: 34px;
   font-weight: 500;

   line-height: 1.08;
   letter-spacing: 0.01em;

   color: #F1EEE5;
   text-align: left;
}
/*Description */
.article_card_description{
   max-width: 400px;
   margin: 0;
   font-family: 'Manrope', sans-serif;
   font-size: 13px;
   font-weight: 400;

   line-height: 1.65;

   color: #9299AA;

   text-align: left;
}
/*CTA*/
.article_class_footer{
   display: flex;
   align-items: center;
   gap: 10px;

   margin-top: auto;
}
.article_card_read{
   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 600;

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

   color: #E3CB73;
}
.article_card_arrow{
   position: relative;
   font-size: 15px;
   color: #E3CB73;
   transition: transform 0.25s ease;
}
.article_card_featured:hover .article_card_arrow{
   transform: translateX(5px);
}