/* =====================================
   ARTICLE LIST V2
===================================== */

:root{

   --bg:#ffffff;
   --text:#111111;
   --muted:#666666;

   --card:#ffffff;
   --border:#e8e8e8;

   --radius:24px;

   --container:1280px;

   --shadow:
   0 18px 40px rgba(0,0,0,.06);

}

/* =====================================
   THEMES
===================================== */

.theme-light{

   --bg:#ffffff;
   --text:#111111;
   --muted:#666666;
   --card:#ffffff;
   --border:#e8e8e8;

}

.theme-paper{

   --bg:#f6f1e7;
   --text:#2d2d2d;
   --muted:#6b6b6b;
   --card:#fbf8f2;
   --border:#ddd4c4;

}

.theme-dark{

   --bg:#101010;
   --text:#f5f5f5;
   --muted:#a3a3a3;
   --card:#181818;
   --border:#2c2c2c;

}

/* =====================================
   RESET
===================================== */

*{

   margin:0;
   padding:0;

   box-sizing:border-box;

}

html{

   scroll-behavior:smooth;

}

body{

   background:var(--bg);

   color:var(--text);

   font-family:
   Inter,
   Arial,
   sans-serif;

   line-height:1.7;

}

img{

   display:block;

   max-width:100%;

}

a{

   color:inherit;

   text-decoration:none;

}

button{

   font-family:inherit;

}

.container{

   max-width:
   var(--container);

   margin:auto;

   padding:
   0 24px;

}

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

.header{

   position:sticky;

   top:0;

   z-index:1000;

   background:var(--bg);

   border-bottom:
   1px solid var(--border);

   backdrop-filter:
   blur(12px);

}

.headerContainer{

   height:78px;

   display:flex;

   align-items:center;

   justify-content:space-between;

}

.logoLink img{

   width:54px;
   height:54px;

}

.desktopNav{

   display:flex;

   gap:42px;

}

.desktopNav a{

   color:var(--muted);

   font-weight:500;

   transition:.25s;

}

.desktopNav a:hover{

   color:var(--text);

}

.navActions{

   display:flex;

   gap:12px;

}

/* =====================================
   ICON BUTTONS
===================================== */

.iconBtn{

   width:44px;
   height:44px;

   border:
   1px solid var(--border);

   border-radius:14px;

   background:var(--card);

   cursor:pointer;

   display:flex;

   align-items:center;

   justify-content:center;

}

.iconBtn img{

   width:18px;
   height:18px;

}

/* =====================================
   DROPDOWNS
===================================== */

.dropdownWrap{

   position:relative;

}

.dropdownMenu{

   position:absolute;

   top:56px;

   right:0;

   display:none;

   min-width:78px;

   background:var(--card);

   border:
   1px solid var(--border);

   border-radius:16px;

   overflow:hidden;

   box-shadow:
   var(--shadow);

   z-index:1000;

}

.dropdownMenu.active{

   display:block;

}

.langItem{

   width:100%;

   height:54px;

   border:none;

   background:none;

   color:var(--text);

   font-weight:600;

   cursor:pointer;

}

.langItem:hover{

   background:
   rgba(0,0,0,.04);

}

.themeItem{

   width:100%;

   height:54px;

   border:none;

   background:none;

   display:flex;

   align-items:center;

   justify-content:center;

   cursor:pointer;

}

.themeItem:hover{

   background:
   rgba(0,0,0,.04);

}

.themeItem img{

   width:18px;
   height:18px;

}

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

.articlesHero{

   padding:
   120px 0 90px;

   text-align:center;

}

.heroBadge{

   display:inline-flex;

   align-items:center;

   justify-content:center;

   padding:
   10px 18px;

   border:
   1px solid var(--border);

   border-radius:999px;

   color:var(--muted);

   margin-bottom:24px;

   font-size:13px;

}

.articlesHero h1{

   font-size:72px;

   line-height:1.05;

   margin-bottom:20px;

}

.articlesHero p{

   max-width:760px;

   margin:auto;

   color:var(--muted);

   font-size:20px;

   margin-bottom:34px;

}

.searchWrap{

   max-width:720px;

   margin:auto;

}

.searchWrap input{

   width:100%;

   height:66px;

   border:
   1px solid var(--border);

   border-radius:20px;

   background:var(--card);

   color:var(--text);

   padding:
   0 24px;

   font-size:16px;

}

/* =====================================
   SECTIONS
===================================== */

.articlesSection{

   padding:
   90px 0;

}

.sectionHeader{

   margin-bottom:36px;

}

.sectionHeader h2{

   font-size:42px;

}

/* =====================================
   FEATURED MAGAZINE
===================================== */

.featuredMagazine{

   display:grid;

   grid-template-columns:
   2fr 1fr;

   gap:28px;

}

.featuredHeroCard{

   min-height:620px;

   border:
   1px solid var(--border);

   border-radius:28px;

   overflow:hidden;

   background:var(--card);

}

.featuredHeroCard img{

   width:100%;

   height:360px;

   object-fit:cover;

}

.featuredHeroContent{

   padding:30px;

}

.featuredSide{

   display:flex;

   flex-direction:column;

   gap:28px;

}

.featuredCard{

   background:var(--card);

   border:
   1px solid var(--border);

   border-radius:24px;

   overflow:hidden;

}

.featuredCard img{

   width:100%;

   height:200px;

   object-fit:cover;

}

.featuredContent{

   padding:22px;

}

/* =====================================
   CATEGORY CARDS
===================================== */

.categoriesGrid{

   display:grid;

   grid-template-columns:
   repeat(
      auto-fit,
      minmax(220px,1fr)
   );

   gap:24px;

}

.categoryCard{

   height:120px;

   border:
   1px solid var(--border);

   border-radius:24px;

   background:var(--card);

   display:flex;

   align-items:center;

   justify-content:center;

   font-size:20px;

   font-weight:600;

   cursor:pointer;

   transition:.25s;

}

.categoryCard:hover{

   transform:
   translateY(-5px);

   box-shadow:
   var(--shadow);

}

/* =====================================
   ARTICLE GRID
===================================== */

.articlesGrid{

   display:grid;

   grid-template-columns:
   repeat(
      3,
      minmax(0,1fr)
   );

   gap:30px;

}

.articleCard{

   background:var(--card);

   border:
   1px solid var(--border);

   border-radius:24px;

   overflow:hidden;

   display:flex;

   flex-direction:column;

   transition:.25s;

}

.articleCard:hover{

   transform:
   translateY(-6px);

   box-shadow:
   var(--shadow);

}

.articleCard img{

   width:100%;

   aspect-ratio:16/9;

   object-fit:cover;

}

.articleContent{

   flex:1;

   display:flex;

   flex-direction:column;

   padding:24px;

}

.articleCategory{

   display:inline-flex;

   width:max-content;

   padding:
   6px 12px;

   border-radius:999px;

   background:
   rgba(0,0,0,.05);

   color:var(--muted);

   font-size:12px;

   font-weight:600;

}

.articleContent h3{

   margin-top:16px;

   margin-bottom:14px;

   font-size:24px;

   line-height:1.35;

}

.articleContent p{

   color:var(--muted);

}

.articleMeta{

   margin-top:auto;

   padding-top:22px;

   display:flex;

   align-items:center;

   justify-content:space-between;

}

.articleArrow{

   width:20px;
   height:20px;

   flex-shrink:0;

}

/* =====================================
   PAGINATION
===================================== */

.pagination{

   display:flex;

   align-items:center;

   justify-content:center;

   gap:10px;

   margin-top:60px;

}

.pageButton{

   min-width:46px;

   height:46px;

   border:
   1px solid var(--border);

   border-radius:14px;

   background:var(--card);

   color:var(--text);

   cursor:pointer;

}

.pageButton.active{

   background:#111111;

   color:#ffffff;

   border-color:#111111;

}

/* =====================================
   NEWSLETTER
===================================== */

.newsletterSection{

   padding:
   100px 0;

}

.newsletterCard{

   padding:70px;

   border:
   1px solid var(--border);

   border-radius:32px;

   background:var(--card);

   text-align:center;

}

.newsletterCard h2{

   font-size:48px;

   margin-bottom:16px;

}

.newsletterCard p{

   max-width:700px;

   margin:auto;

   color:var(--muted);

   margin-bottom:30px;

}

.newsletterForm{

   max-width:650px;

   margin:auto;

   display:flex;

   gap:14px;

}

.newsletterForm input{

   flex:1;

   height:58px;

   border:
   1px solid var(--border);

   border-radius:16px;

   padding:
   0 18px;

   background:var(--bg);

   color:var(--text);

}

.newsletterForm button{

   height:58px;

   padding:
   0 30px;

   border:none;

   border-radius:16px;

   background:#111111;

   color:#ffffff;

   cursor:pointer;

}

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

.footer{

   border-top:
   1px solid var(--border);

   padding:
   80px 0 30px;

}

.footerTop{

   display:grid;

   grid-template-columns:
   2fr 1fr 1fr;

   gap:50px;

}

.footerLogo img{

   width:72px;

}

.footerBrand p{

   max-width:420px;

   color:var(--muted);

   margin-top:18px;

}

.footerNavigation,
.footerResources{

   display:flex;

   flex-direction:column;

   gap:12px;

}

.footerBottom{

   margin-top:50px;

   padding-top:24px;

   border-top:
   1px solid var(--border);

   text-align:center;

   color:var(--muted);

}

/* =====================================
   TABLET
===================================== */

@media(max-width:1100px){

   .featuredMagazine{

      grid-template-columns:1fr;

   }

   .articlesGrid{

      grid-template-columns:
      repeat(2,1fr);

   }

   .articlesHero h1{

      font-size:54px;

   }

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

   .desktopNav{

      display:none;

   }

   .articlesHero h1{

      font-size:38px;

   }

   .articlesHero p{

      font-size:17px;

   }

   .articlesGrid{

      grid-template-columns:1fr;

   }

   .newsletterCard{

      padding:40px 24px;

   }

   .newsletterForm{

      flex-direction:column;

   }

   .footerTop{

      grid-template-columns:1fr;

   }

}
/* =====================================
   DARK MODE FIX PACK V2.1
===================================== */

.theme-dark .categoryCard{
   color:#ffffff;
   background:#181818;
   border-color:#2c2c2c;
}

.theme-dark .categoryCard:hover{
   background:#202020;
}

/* =====================================
   FEATURED HERO HEIGHT FIX
===================================== */

.featuredHeroCard{
   min-height:auto !important;
   height:auto;
}

.featuredHeroContent{
   padding:24px 28px 28px;
}

.featuredHeroContent h2{
   font-size:32px;
   line-height:1.2;
   margin-bottom:12px;
}

.featuredHeroContent p{
   color:var(--muted);
   margin-bottom:14px;
}

.featuredMeta{
   display:flex;
   gap:14px;
   color:var(--muted);
   font-size:14px;
}

/* =====================================
   FEATURED CATEGORY
===================================== */

.featuredCategory{
   display:inline-flex;
   align-items:center;
   justify-content:center;

   padding:6px 12px;

   border-radius:999px;

   background:rgba(255,255,255,.08);

   color:var(--muted);

   font-size:12px;
   font-weight:600;

   margin-bottom:14px;
}

.theme-light .featuredCategory,
.theme-paper .featuredCategory{
   background:rgba(0,0,0,.05);
}

/* =====================================
   ARTICLE META FIX
===================================== */

.articleMeta{
   margin-top:18px;

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

   gap:12px;

   padding-top:0;

   border-top:none;
}

.articleMeta span{
   font-size:13px;
   color:var(--muted);
   line-height:1.4;
}

/* =====================================
   REMOVE BLACK BAR ISSUE
===================================== */

.articleMeta::before,
.articleMeta::after{
   display:none !important;
   content:none !important;
}

.articleCard::before,
.articleCard::after{
   display:none !important;
   content:none !important;
}

/* =====================================
   ARROW FIX
===================================== */

.articleArrow{
   width:18px !important;
   height:18px !important;
   opacity:.85;
}

.articleCard:hover .articleArrow{
   transform:translateX(4px);
   transition:.25s;
}

/* =====================================
   PAGINATION DARK MODE
===================================== */

.theme-dark .pageButton{

   background:#181818;

   color:#ffffff;

   border-color:#2c2c2c;

}

.theme-dark .pageButton:hover{

   background:#222222;

}

.theme-dark .pageButton.active{

   background:#ffffff;

   color:#111111;

   border-color:#ffffff;

}

/* =====================================
   NEWSLETTER FIX
===================================== */

.theme-dark .newsletterForm input{

   background:#181818;

   border-color:#2c2c2c;

   color:#ffffff;

}

.theme-dark .newsletterForm input::placeholder{

   color:#8f8f8f;

}

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

.theme-dark .footer a{

   color:#cfcfcf;

}

.theme-dark .footer a:hover{

   color:#ffffff;

}

/* =====================================
   FEATURED SIDE CARDS
===================================== */

.featuredCard h3{
   font-size:20px;
   line-height:1.3;
   margin-bottom:10px;
}

.featuredCard p{
   color:var(--muted);
   font-size:14px;
}

/* =====================================
   DARK MODE CARD IMPROVEMENT
===================================== */

.theme-dark .articleCard,
.theme-dark .featuredCard,
.theme-dark .featuredHeroCard,
.theme-dark .newsletterCard{

   background:#181818;

   border-color:#262626;

}

.theme-dark .articleCard:hover{

   border-color:#383838;

}

/* =====================================
   LIBRARY GATEWAY
===================================== */

.libraryGateway{
   padding:110px 0;
}

.libraryGatewayShell{
   position:relative;
   overflow:hidden;
   padding:64px;
   border:1px solid var(--border);
   border-radius:34px;
   background:
      radial-gradient(circle at 92% 8%, rgba(190,145,57,.16), transparent 34%),
      linear-gradient(145deg, var(--card), var(--bg));
   box-shadow:0 28px 70px rgba(27,22,13,.08);
}

.libraryGatewayShell::before{
   content:"";
   position:absolute;
   top:0;
   left:64px;
   width:110px;
   height:3px;
   background:linear-gradient(90deg,#a97318,#e0b95e);
}

.libraryGatewayIntro{
   position:relative;
   z-index:1;
   max-width:780px;
   margin-bottom:42px;
}

.libraryGatewayEyebrow{
   display:inline-flex;
   align-items:center;
   gap:10px;
   margin-bottom:16px;
   color:#a97318;
   font-size:12px;
   font-weight:800;
   letter-spacing:.16em;
   text-transform:uppercase;
}

.libraryGatewayEyebrow::before{
   content:"";
   width:28px;
   height:1px;
   background:currentColor;
}

.libraryGatewayIntro h2{
   max-width:680px;
   margin-bottom:16px;
   font-size:clamp(34px,4.2vw,54px);
   line-height:1.08;
   letter-spacing:-.035em;
}

.libraryGatewayIntro p{
   max-width:700px;
   color:var(--muted);
   font-size:17px;
}

.libraryGatewayGrid{
   position:relative;
   z-index:1;
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:22px;
}

.libraryGatewayCard{
   position:relative;
   min-height:310px;
   padding:34px;
   border:1px solid var(--border);
   border-radius:25px;
   display:flex;
   flex-direction:column;
   overflow:hidden;
   transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.libraryGatewayCard::after{
   content:"";
   position:absolute;
   right:-70px;
   bottom:-90px;
   width:220px;
   height:220px;
   border:1px solid rgba(190,145,57,.24);
   border-radius:50%;
   transition:transform .4s ease;
}

.libraryGatewayCard:hover{
   transform:translateY(-7px);
   border-color:rgba(169,115,24,.5);
   box-shadow:0 24px 55px rgba(27,22,13,.12);
}

.libraryGatewayCard:hover::after{
   transform:scale(1.12);
}

.libraryGatewayCard:focus-visible{
   outline:3px solid rgba(190,145,57,.5);
   outline-offset:4px;
}

.libraryGatewayCardPrimary{
   color:#f8f3e8;
   border-color:#24211d;
   background:
      linear-gradient(135deg,rgba(208,165,76,.16),transparent 55%),
      #151412;
}

.libraryGatewayCardSecondary{
   background:rgba(255,255,255,.42);
}

.libraryGatewayNumber{
   position:absolute;
   top:24px;
   right:28px;
   color:rgba(190,145,57,.42);
   font-size:56px;
   font-weight:800;
   line-height:1;
   letter-spacing:-.06em;
}

.libraryGatewayLabel{
   position:relative;
   z-index:1;
   width:max-content;
   margin-bottom:35px;
   padding:7px 11px;
   border:1px solid rgba(190,145,57,.32);
   border-radius:999px;
   color:#bd8b32;
   font-size:11px;
   font-weight:750;
   letter-spacing:.09em;
   text-transform:uppercase;
}

.libraryGatewayCard h3{
   position:relative;
   z-index:1;
   max-width:75%;
   margin-bottom:12px;
   font-size:28px;
   line-height:1.2;
}

.libraryGatewayCard p{
   position:relative;
   z-index:1;
   max-width:88%;
   margin-bottom:28px;
   color:var(--muted);
   font-size:15px;
}

.libraryGatewayCardPrimary p{
   color:rgba(248,243,232,.66);
}

.libraryGatewayAction{
   position:relative;
   z-index:1;
   display:inline-flex;
   align-items:center;
   gap:12px;
   width:max-content;
   margin-top:auto;
   padding-bottom:5px;
   border-bottom:1px solid currentColor;
   color:#bd8b32;
   font-size:14px;
   font-weight:750;
}

.libraryGatewayAction span{
   transition:transform .25s ease;
}

.libraryGatewayCard:hover .libraryGatewayAction span{
   transform:translateX(5px);
}

.theme-dark .libraryGatewayShell{
   background:
      radial-gradient(circle at 92% 8%,rgba(190,145,57,.13),transparent 34%),
      linear-gradient(145deg,#191816,#101010);
   box-shadow:0 28px 70px rgba(0,0,0,.24);
}

.theme-dark .libraryGatewayCardSecondary{
   background:#1c1b19;
}

.theme-dark .libraryGatewayCard:hover{
   border-color:rgba(208,165,76,.48);
   box-shadow:0 24px 55px rgba(0,0,0,.3);
}

@media(max-width:900px){
   .libraryGatewayShell{
      padding:48px 36px;
   }

   .libraryGatewayShell::before{
      left:36px;
   }

   .libraryGatewayGrid{
      grid-template-columns:1fr;
   }

   .libraryGatewayCard{
      min-height:285px;
   }
}

@media(max-width:560px){
   .libraryGateway{
      padding:72px 0;
   }

   .libraryGatewayShell{
      padding:40px 20px 20px;
      border-radius:26px;
   }

   .libraryGatewayShell::before{
      left:20px;
   }

   .libraryGatewayIntro{
      margin-bottom:30px;
   }

   .libraryGatewayIntro p{
      font-size:15px;
   }

   .libraryGatewayCard{
      min-height:300px;
      padding:28px 24px;
      border-radius:21px;
   }

   .libraryGatewayNumber{
      top:22px;
      right:22px;
      font-size:46px;
   }

   .libraryGatewayCard h3{
      max-width:82%;
      font-size:24px;
   }

   .libraryGatewayCard p{
      max-width:100%;
   }
}

/* =====================================
   ARTICLE INDEX POLISH V3
===================================== */

.articlesHero{
   position:relative;
   overflow:hidden;
   background:radial-gradient(circle at 18% 18%,rgba(190,145,57,.12),transparent 28%),radial-gradient(circle at 82% 72%,rgba(190,145,57,.08),transparent 30%);
}

.searchWrap{position:relative;}
.searchWrap input{
   padding-right:64px;
   box-shadow:0 18px 46px rgba(37,28,12,.07);
   transition:border-color .2s,box-shadow .2s,transform .2s;
}
.searchWrap input:focus{
   outline:none;
   border-color:rgba(169,115,24,.58);
   box-shadow:0 20px 52px rgba(37,28,12,.11),0 0 0 4px rgba(190,145,57,.11);
   transform:translateY(-2px);
}
.searchClear{
   position:absolute;top:50%;right:14px;width:38px;height:38px;border:0;border-radius:12px;
   background:rgba(190,145,57,.12);color:#a97318;font-size:24px;line-height:1;cursor:pointer;
   transform:translateY(-50%);
}
.searchClear[hidden]{display:none;}

.sectionHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.articleResultsCount{color:var(--muted);font-size:14px;}

.featuredHeroCard img,.featuredCard img,.articleCard>img{
   width:100%;height:auto;aspect-ratio:1200/620;object-fit:cover;background:var(--card);
}

/* Keep the large featured card visually filled when the side stack sets row height. */
.featuredHeroCard{
   display:flex;
   flex-direction:column;
}

.featuredHeroContent{
   display:flex;
   flex:1;
   flex-direction:column;
}

.featuredHeroContent .featuredMeta{
   margin-top:auto;
   padding-top:18px;
}

@media(max-width:1100px){
   .featuredHeroContent .featuredMeta{
      margin-top:18px;
      padding-top:0;
   }
}

.categoryCard[aria-pressed="true"]{
   color:#fff;border-color:#a97318;background:linear-gradient(135deg,#171512,#2a2113);
   box-shadow:0 16px 35px rgba(94,65,18,.2);
}

.articlesEmptyState{
   grid-column:1/-1;padding:72px 24px;border:1px dashed var(--border);border-radius:24px;
   text-align:center;background:var(--card);
}
.articlesEmptyState>span{
   display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:18px;
   background:rgba(190,145,57,.12);color:#a97318;font-size:25px;font-weight:800;
}
.articlesEmptyState h3{font-size:25px;margin-bottom:8px;}
.articlesEmptyState p{color:var(--muted);}
.articlesEmptyState button{
   margin-top:22px;padding:12px 20px;border:0;border-radius:13px;color:#fff;background:#171512;cursor:pointer;
}

.pageButton:focus-visible,.categoryCard:focus-visible,.searchClear:focus-visible,.articlesEmptyState button:focus-visible{
   outline:3px solid rgba(190,145,57,.48);outline-offset:3px;
}

@media(max-width:768px){
   .sectionHeader{align-items:flex-start;flex-direction:column;gap:7px;}
   .articlesHero{padding:88px 0 68px;}
}

/* =====================================
   LARGE-SCREEN ARTICLE INDEX
   No effect at 1440px or below.
===================================== */

@media(min-width:1600px){
   .container{max-width:1520px;padding-inline:40px}
   .articlesHero{padding:126px 0 104px}
   .articlesHero h1{max-width:1080px;font-size:78px}
   .articlesHero p{max-width:860px;font-size:22px}
   .searchWrap{max-width:840px}
   .articlesSection{padding:112px 0}
   .sectionHeader h2{font-size:48px}
   .featuredMagazine{grid-template-columns:2.1fr 1fr;gap:34px}
   .featuredHeroCard{min-height:700px}
   .featuredHeroContent{padding:36px}
   .featuredSide{gap:34px}
   .featuredContent{padding:26px}
   .categoriesGrid,.articlesGrid{gap:30px}
   .categoryCard{height:138px;font-size:22px}
   .articleContent{padding:28px}
   .articleContent h3{font-size:26px}
   .libraryGatewayShell{padding:76px}
}

@media(min-width:2560px){
   .container{max-width:1800px;padding-inline:56px}
   .articlesHero{padding:150px 0 124px}
   .articlesHero h1{max-width:1613px;font-size:90px}
   .articlesHero p{max-width:940px;font-size:24px}
   .searchWrap{max-width:940px}
   .searchWrap input{height:74px;font-size:18px}
   .articlesSection{padding:132px 0}
   .sectionHeader h2{font-size:54px}
   .featuredHeroCard{min-height:780px}
   .featuredHeroContent{padding:42px}
   .articlesGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
   .categoryCard{height:150px;font-size:23px}
   .articleContent{padding:30px}
   .libraryGatewayShell{padding:92px}
}