/*
Theme Name: Askari Fashion
Theme URI: https://askarifashion.com
Author: Hammad Yousaf
Author URI: https://askarifashion.com
Description: A luxury editorial fashion journal theme. Black + gold opulent aesthetic inspired by Vogue, Business of Fashion and Harper's Bazaar. Designed for couture, runway, designer and beauty editorial content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: askari-fashion
Tags: blog, magazine, editorial, fashion, luxury, dark, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================================
   ASKARI FASHION — MAISON DE COUTURE
   Black + gold opulent luxury aesthetic
   ============================================================= */

:root{
  --bg:#0a0907;
  --bg-2:#100e0a;
  --ink:#f4ecdd;
  --ink-dim:#a89c84;
  --ink-soft:#766b58;
  --gold:#c8a96a;
  --gold-bright:#e6c98a;
  --gold-deep:#8a6a35;
  --cream:#f6efe1;
  --line:rgba(200,169,106,.22);
  --line-strong:rgba(200,169,106,.45);
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --display:"Italiana", "Cormorant Garamond", serif;
  --sans:"Inter", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .3s ease}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.container{max-width:1320px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.container{padding:0 22px}}

/* ============= TYPOGRAPHY ============= */
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:400}
.eyebrow.dark{color:var(--gold-deep)}
.display{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.6vw,82px);line-height:1.02;letter-spacing:-.01em}
.display.centered{text-align:center}
.display.small{font-size:clamp(28px,3.5vw,48px)}
.italic{font-family:var(--serif);font-style:italic;font-weight:300}
.gold{color:var(--gold);background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:19px;line-height:1.65;color:var(--ink);margin-bottom:24px;max-width:560px}
.muted{color:var(--ink-dim)}
.centered{text-align:center}

/* ============= LOADER ============= */
.loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;animation:loaderOut 1.6s ease 1.2s forwards}
.loader-inner{text-align:center}
.loader-mark{font-family:var(--display);font-size:72px;color:var(--gold);margin-bottom:18px;animation:fadeUp .8s ease forwards}
.loader-line{height:1px;width:120px;background:var(--gold);margin:0 auto 18px;transform-origin:left;animation:lineGrow 1.6s ease forwards}
.loader-text{font-family:var(--sans);font-size:10px;letter-spacing:.5em;color:var(--ink-dim)}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============= MARQUEE ============= */
.marquee{background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));color:#1a1308;font-family:var(--sans);font-size:11px;letter-spacing:.36em;text-transform:uppercase;overflow:hidden;padding:10px 0;font-weight:500}
.marquee-track{display:flex;gap:60px;white-space:nowrap;animation:marquee 40s linear infinite}
.marquee span{flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============= NAV (Vogue/BoF editorial style, two rows) ============= */
.nav{position:sticky;top:0;z-index:100;background:rgba(10,9,7,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-top{max-width:1440px;margin:0 auto;padding:18px 48px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav-date{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);justify-self:start}
.brand{justify-self:center;text-align:center}
.brand-word{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);letter-spacing:.32em;color:var(--ink);line-height:1;display:inline-block}
.brand-word .italic{color:var(--gold);font-style:italic;font-family:var(--serif);letter-spacing:.04em;font-weight:300}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:14px}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:all .3s}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.cta-link{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:11px 22px;transition:all .3s;font-weight:500}
.cta-link:hover{background:var(--gold);color:#1a1308}
.cta-link.small{padding:9px 18px;font-size:10px}
.nav-links{display:flex;justify-content:center;gap:42px;padding:14px 48px 16px;border-top:1px solid var(--line)}
.nav-links a{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;position:relative;padding:4px 0}
.nav-links a:hover{color:var(--gold)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .35s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.search-bar{padding:14px 48px;border-top:1px solid var(--line);background:var(--bg-2)}
.search-bar form{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px;color:var(--ink-dim)}
.search-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-family:var(--serif);font-size:20px;padding:6px 0}
.search-bar input::placeholder{color:var(--ink-soft);font-style:italic}
.search-close{font-size:28px;color:var(--ink-dim);transition:color .3s;line-height:1}
.search-close:hover{color:var(--gold)}
@media(max-width:880px){
  .nav-top{grid-template-columns:auto 1fr auto;padding:14px 22px 12px}
  .nav-date{display:none}
  .brand{justify-self:start;text-align:left}
  .nav-links{gap:18px;padding:10px 16px 12px;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .nav-links a{font-size:10px;letter-spacing:.24em;white-space:nowrap}
  .search-bar{padding:14px 22px}
  .cta-link.small{display:none}
}

/* ============= BUTTONS ============= */
.btn{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;padding:18px 36px;border:1px solid var(--gold);transition:all .35s ease;font-weight:500;text-align:center}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1308}
.btn-gold:hover{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.btn-ghost{color:var(--gold);background:transparent}
.btn-ghost:hover{background:var(--gold);color:#1a1308}
.btn.full{width:100%}

/* ============= HERO ============= */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:120px 48px 80px}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 70% 30%,rgba(200,169,106,.18),transparent 50%),
  radial-gradient(ellipse at 20% 80%,rgba(138,106,53,.12),transparent 55%),
  linear-gradient(135deg,#0a0907 0%,#15110a 50%,#0a0907 100%);
}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(200,169,106,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(200,169,106,.04) 1px,transparent 1px);
  background-size:80px 80px;opacity:.6}
.hero-bg::after{content:"";position:absolute;right:-15%;top:-10%;width:70%;height:120%;
  background:radial-gradient(circle,rgba(230,201,138,.16),transparent 60%);
  filter:blur(40px)}
.hero-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-content{position:relative;max-width:1320px;margin:0 auto;width:100%;z-index:2}
.hero-title{font-family:var(--display);font-size:clamp(56px,10vw,168px);line-height:.95;letter-spacing:-.02em;margin:28px 0 32px}
.hero-title .line{display:block;animation:heroLine 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-title .line:nth-child(1){animation-delay:.2s}
.hero-title .line:nth-child(2){animation-delay:.45s;margin-left:clamp(40px,12vw,180px);font-style:italic;font-weight:300;font-family:var(--serif)}
.hero-title .line:nth-child(3){animation-delay:.7s;margin-left:clamp(20px,6vw,80px)}
@keyframes heroLine{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:19px;line-height:1.6;color:var(--ink);max-width:560px;margin:0 0 40px;animation:fadeUp 1s ease .95s both}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp 1s ease 1.1s both}
.hero-meta{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:90px auto 0;max-width:1320px;width:100%;padding-top:30px;border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);z-index:2;animation:fadeUp 1s ease 1.25s both}
.hero-meta span{color:var(--gold);margin-right:14px;font-weight:500}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:10px;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
.scroll-hint span{display:block;margin-top:8px;font-size:18px}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media(max-width:768px){
  .hero{padding:80px 22px 60px}
  .hero-meta{grid-template-columns:1fr;gap:14px;margin-top:50px}
  .hero-title .line:nth-child(2){margin-left:24px}
  .hero-title .line:nth-child(3){margin-left:12px}
}

/* ============= ACCOLADES ============= */
.accolades{background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.accolades-track{display:flex;justify-content:center;gap:42px;flex-wrap:wrap;font-family:var(--display);font-size:18px;color:var(--ink-dim);letter-spacing:.15em}
.acc-item{transition:color .3s}
.acc-item:hover{color:var(--gold)}
.acc-dot{color:var(--gold-deep);font-size:10px;align-self:center}

/* ============= MANIFESTO / SPLIT ============= */
section.manifesto, section.atelier, section.appointment{padding:140px 0;position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.split.reverse .split-left{order:2}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:50px}
  .split.reverse .split-left{order:0}
  section.manifesto, section.atelier, section.appointment{padding:90px 0}
}
.manifesto{background:var(--bg-2)}
.lede strong{color:var(--gold);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.stat-num{font-family:var(--display);font-size:48px;color:var(--gold);line-height:1}
.stat-lbl{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-top:10px}

/* ============= COLLECTIONS ============= */
.collections{padding:140px 0;background:var(--bg)}
.section-head{text-align:center;margin-bottom:80px}
.section-head .eyebrow{display:block;margin-bottom:18px}
.section-head.light .eyebrow{color:var(--gold-bright)}
.sub-lede{max-width:600px;margin:24px auto 0;color:var(--ink-dim);font-size:17px;line-height:1.6}
.collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media(max-width:760px){.collection-grid{grid-template-columns:1fr}}
.col-card{position:relative;overflow:hidden;background:#0d0b08;border:1px solid var(--line);transition:transform .6s ease,border-color .6s ease}
.col-card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.col-img{height:520px;background-size:cover;background-position:center;position:relative;transition:transform 1.2s ease}
.col-card:hover .col-img{transform:scale(1.06)}
.col-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,9,7,.85))}
.col-img-1{background-image:url("https://images.unsplash.com/photo-1594761051556-eda73c93e07e?auto=format&fit=crop&w=1200&q=80")}
.col-img-2{background-image:url("https://images.unsplash.com/photo-1566174053879-31528523f8ae?auto=format&fit=crop&w=1200&q=80")}
.col-img-3{background-image:url("https://images.unsplash.com/photo-1617059062296-eb8327ff6a25?auto=format&fit=crop&w=1200&q=80")}
.col-img-4{background-image:url("https://images.unsplash.com/photo-1591348278863-a8fb3887e2aa?auto=format&fit=crop&w=1200&q=80")}
.col-meta{padding:32px 36px 38px;position:relative;z-index:2}
.col-no{font-family:var(--sans);font-size:11px;letter-spacing:.4em;color:var(--gold);margin-bottom:10px}
.col-meta h3{font-family:var(--display);font-size:34px;margin-bottom:12px;color:var(--ink)}
.col-meta p{color:var(--ink-dim);line-height:1.6;margin-bottom:20px;font-size:16px}
.arrow-link{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
.arrow-link span{transition:transform .3s ease}
.arrow-link:hover span{transform:translateX(6px)}

/* ============= EDITORIAL ============= */
.editorial{padding:140px 0;background:#050402;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ed-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,360px);gap:14px}
.ed-tile{background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform .8s ease}
.ed-tile:hover{transform:scale(1.02)}
.ed-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.7));pointer-events:none}
.ed-tag{position:absolute;left:20px;bottom:18px;font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);z-index:2}
.ed-1{grid-column:span 2;grid-row:span 2;background-image:url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1200&q=80")}
.ed-2{grid-column:span 2;background-image:url("https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1200&q=80")}
.ed-3{grid-column:span 2;background-image:url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1200&q=80")}
.ed-4{grid-column:span 2;background-image:url("https://images.unsplash.com/photo-1485518882345-15568b007407?auto=format&fit=crop&w=1200&q=80")}
.ed-5{grid-column:span 1;background-image:url("https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?auto=format&fit=crop&w=1200&q=80")}
.ed-6{grid-column:span 1;background-image:url("https://images.unsplash.com/photo-1496661269814-a841e78df103?auto=format&fit=crop&w=1200&q=80")}
@media(max-width:900px){.ed-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,260px)}
  .ed-1,.ed-2,.ed-3,.ed-4,.ed-5,.ed-6{grid-column:span 2;grid-row:auto}
  .ed-5,.ed-6{grid-column:span 1}}

/* ============= ATELIER ============= */
.atelier{background:var(--bg-2)}
.atelier-img{height:620px;background:url("https://images.unsplash.com/photo-1558769132-cb1aea458c5e?auto=format&fit=crop&w=1200&q=80") center/cover;position:relative}
.atelier-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);transform:translate(20px,20px)}
.atelier-list{list-style:none;margin-top:24px}
.atelier-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink);display:flex;gap:14px;align-items:flex-start}
.atelier-list li span{color:var(--gold);font-size:11px;margin-top:5px}

/* ============= PRESS ============= */
.press{padding:140px 0;background:var(--bg);text-align:center}
.quote-mark{font-family:var(--display);font-size:140px;line-height:0.5;color:var(--gold);margin-bottom:30px;opacity:.6}
.quote{font-family:var(--display);font-size:clamp(28px,3.5vw,46px);line-height:1.3;max-width:980px;margin:0 auto 28px;color:var(--ink);font-style:italic;font-weight:400}
.quote-author{font-family:var(--sans);font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:70px}
.press-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:48px;padding-top:50px;border-top:1px solid var(--line)}
.press-logos span{font-family:var(--display);font-size:22px;color:var(--ink-soft);letter-spacing:.18em;transition:color .3s}
.press-logos span:hover{color:var(--gold)}

/* ============= APPOINTMENT ============= */
.appointment{background:#050402}
.contact-row{margin-top:40px;display:grid;gap:22px}
.c-lbl{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.c-val{font-family:var(--display);font-size:20px;color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#0d0b08;padding:44px;border:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:span 2}
.form label{font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.form input, .form select, .form textarea{background:transparent;border:none;border-bottom:1px solid var(--line);padding:12px 0;color:var(--ink);font-family:var(--serif);font-size:17px;outline:none;transition:border-color .3s}
.form input:focus, .form select:focus, .form textarea:focus{border-color:var(--gold)}
.form select option{background:#0d0b08;color:var(--ink)}
.form textarea{resize:vertical;font-family:var(--serif)}
.form .btn{grid-column:span 2;margin-top:10px}
.thanks{grid-column:span 2;text-align:center;font-family:var(--display);font-size:18px;color:var(--gold);opacity:0;transition:opacity .4s;font-style:italic}
.thanks.show{opacity:1}
@media(max-width:680px){.form{grid-template-columns:1fr;padding:28px}.field.full,.form .btn,.thanks{grid-column:span 1}}

/* ============= NEWSLETTER ============= */
.newsletter{padding:120px 0;background:var(--bg-2);border-top:1px solid var(--line);text-align:center}
.news-form{display:flex;max-width:520px;margin:36px auto 0;border:1px solid var(--gold);background:#0d0b08}
.news-form input{flex:1;background:transparent;border:none;padding:18px 22px;color:var(--ink);font-family:var(--serif);font-size:16px;outline:none}
.news-form button{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1308;padding:0 30px;font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;transition:filter .3s}
.news-form button:hover{filter:brightness(1.08)}

/* ============= FOOTER ============= */
.footer{background:#000;padding:90px 0 40px;border-top:1px solid var(--line);color:var(--ink-dim)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
.foot-brand{font-family:var(--display);font-size:28px;color:var(--gold);letter-spacing:.18em;margin-bottom:10px}
.foot-tag{font-family:var(--serif);font-size:15px;color:var(--ink-dim);max-width:280px;line-height:1.6}
.foot-h{font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer a{display:block;padding:6px 0;font-family:var(--serif);font-size:16px;color:var(--ink-dim);transition:color .3s}
.footer a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;padding-top:30px;border-top:1px solid var(--line);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:600px){.foot-bottom{flex-direction:column;gap:10px;text-align:center}}

/* ============= REVEAL ============= */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============= SELECTION ============= */
::selection{background:var(--gold);color:#1a1308}

/* ============= SCROLLBAR ============= */
::-webkit-scrollbar{width:10px;background:#000}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-deep),var(--gold));border:2px solid #000}

/* ============= FEATURED COVER STORY ============= */
.featured{padding:130px 0;background:var(--bg-2)}
.featured-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
@media(max-width:900px){.featured-grid{grid-template-columns:1fr;gap:40px}.featured{padding:80px 0}}
.featured-img{height:640px;background:url("https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1400&q=80") center/cover;position:relative}
.featured-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);transform:translate(-18px,18px)}
.featured-text .display{margin:18px 0 24px}
.meta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:26px 0 30px}
.meta-author strong{color:var(--gold);font-weight:500}
.meta-dot{color:var(--gold-deep);font-size:8px}
.arrow-link.big{font-size:13px;letter-spacing:.38em;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:6px}

/* ============= POSTS GRID ============= */
.posts{padding:140px 0;background:var(--bg)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}
.post{background:#0d0b08;border:1px solid var(--line);transition:transform .5s,border-color .5s;overflow:hidden;cursor:pointer}
.post:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.post-img{height:280px;background-size:cover;background-position:center;transition:transform 1s ease}
.post:hover .post-img{transform:scale(1.05)}
.post-meta{padding:26px 28px 32px}
.post-cat{font-family:var(--sans);font-size:10px;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;display:inline-block;margin-bottom:14px}
.post-meta h3{font-family:var(--display);font-size:24px;line-height:1.2;color:var(--ink);margin-bottom:12px}
.post-meta p{color:var(--ink-dim);font-size:15px;line-height:1.55;margin-bottom:20px}
.post-foot{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);padding-top:16px;border-top:1px solid var(--line)}
.post-foot span:first-child{color:var(--gold)}
.p-1{background-image:url("https://images.unsplash.com/photo-1558769132-cb1aea458c5e?auto=format&fit=crop&w=1000&q=80")}
.p-2{background-image:url("https://images.unsplash.com/photo-1551803091-e20673f15770?auto=format&fit=crop&w=1000&q=80")}
.p-3{background-image:url("https://images.unsplash.com/photo-1594761051556-eda73c93e07e?auto=format&fit=crop&w=1000&q=80")}
.p-4{background-image:url("https://images.unsplash.com/photo-1542295669297-4d352b042bca?auto=format&fit=crop&w=1000&q=80")}
.p-5{background-image:url("https://images.unsplash.com/photo-1591348278863-a8fb3887e2aa?auto=format&fit=crop&w=1000&q=80")}
.p-6{background-image:url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1000&q=80")}

/* ============= CATEGORIES ============= */
.categories{padding:140px 0;background:#050402;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat{background:var(--bg);padding:42px 34px 36px;display:block;transition:background .4s,transform .4s;position:relative}
.cat:hover{background:#15110a}
.cat-no{font-family:var(--sans);font-size:10px;letter-spacing:.4em;color:var(--gold-deep);display:block;margin-bottom:18px}
.cat h4{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:10px;transition:color .3s}
.cat:hover h4{color:var(--gold)}
.cat p{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}

/* ============= EDITOR'S LETTER ============= */
.editor{padding:140px 0;background:var(--bg-2)}
.editor-img{height:620px;background:url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=1200&q=80") center/cover;position:relative}
.editor-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);transform:translate(18px,18px)}
.signature{font-family:var(--display);font-size:20px;color:var(--gold);margin-top:30px}
.signature em{color:var(--ink-dim);font-style:italic;font-family:var(--serif);font-size:16px}

/* ============= POPULAR LIST ============= */
.popular{padding:140px 0;background:var(--bg)}
.pop-list{list-style:none;max-width:920px;margin:0 auto}
.pop-list li{display:grid;grid-template-columns:80px 1fr 40px;gap:24px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:padding .3s}
.pop-list li:first-child{border-top:1px solid var(--line)}
.pop-list li:hover{padding-left:14px}
.pop-no{font-family:var(--display);font-size:48px;color:var(--gold);line-height:1}
.pop-body h4{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:6px;transition:color .3s}
.pop-list li:hover h4{color:var(--gold)}
.pop-cat{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim)}
.pop-arrow{color:var(--gold);font-size:22px;text-align:right}
@media(max-width:600px){.pop-list li{grid-template-columns:50px 1fr 24px;gap:14px;padding:22px 0}.pop-no{font-size:32px}.pop-body h4{font-size:19px}}

/* ============= SUBSCRIBE ============= */
.subscribe{padding:140px 0;background:#050402;border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.subscribe::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(200,169,106,.12),transparent 60%);pointer-events:none}
.subscribe-inner{position:relative;z-index:2}
.subscribe .eyebrow{display:block;margin-bottom:18px}
.big-muted{font-size:19px;line-height:1.6;max-width:620px;margin:24px auto 40px;color:var(--ink-dim)}
.news-form.big{max-width:560px}
.news-form.big input{font-size:18px;padding:22px 24px}
.fine-print{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:24px}

/* =============================================================
   PHASE 2 — EDITORIAL BLOG COMPONENTS
   ============================================================= */

/* COVER GRID (featured posts magazine-style) */
.featured-grid-sec{padding:140px 0;background:var(--bg)}
.cover-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;grid-auto-rows:520px}
@media(max-width:1000px){.cover-grid{grid-template-columns:1fr 1fr;grid-auto-rows:380px}.cover-big{grid-column:span 2}}
@media(max-width:640px){.cover-grid{grid-template-columns:1fr;grid-auto-rows:340px}.cover-big{grid-column:span 1}}
.cover{position:relative;overflow:hidden;display:block;background:#000;border:1px solid var(--line);transition:border-color .5s}
.cover:hover{border-color:var(--line-strong)}
.cover.cover-big{grid-row:span 1}
.cover-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s ease}
.cover:hover .cover-img{transform:scale(1.06)}
.cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.92));padding:32px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);z-index:2}
.cover-overlay h3{font-family:var(--display);font-size:clamp(20px,1.8vw,32px);line-height:1.15;margin:10px 0 8px;color:#fff}
.cover-big .cover-overlay h3{font-size:clamp(28px,2.6vw,46px)}
.cover-meta{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.post-cat.light{background:var(--gold);color:#1a1308;padding:5px 10px;font-family:var(--sans);font-size:10px;letter-spacing:.32em;font-weight:500;align-self:flex-start;border:none;margin-bottom:0}
.c-1{background-image:url("https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1600&q=80")}
.c-2{background-image:url("https://images.unsplash.com/photo-1551803091-e20673f15770?auto=format&fit=crop&w=1400&q=80")}
.c-3{background-image:url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1400&q=80")}

/* POSTS + TRENDING (2-column layout) */
.posts-and-trending{padding:130px 0;background:var(--bg-2)}
.layout-2col{display:grid;grid-template-columns:1.7fr 1fr;gap:80px;align-items:start}
@media(max-width:1000px){.layout-2col{grid-template-columns:1fr;gap:60px}}
.col-head{margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.col-head .display{margin-top:14px}
.post-row{display:grid;grid-template-columns:240px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.post-row:first-of-type{padding-top:0}
.post-row-img{display:block;height:200px;background-size:cover;background-position:center;transition:transform .8s ease;border:1px solid var(--line)}
.post-row-img:hover{transform:scale(1.02)}
.post-row-body h3{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.2;margin:10px 0 12px;color:var(--ink)}
.post-row-body h3 a:hover{color:var(--gold)}
.post-row-body p{color:var(--ink-dim);font-size:16px;line-height:1.6;margin-bottom:18px}
.post-row-body .post-foot{padding:0;border:none;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.post-row-body .post-foot span:first-child{color:var(--gold)}
@media(max-width:700px){.post-row{grid-template-columns:1fr;gap:16px}.post-row-img{height:240px}}

/* TRENDING SIDEBAR */
.trending-col{position:sticky;top:160px;display:flex;flex-direction:column;gap:30px}
@media(max-width:1000px){.trending-col{position:static}}
.trending-card{background:#0d0b08;border:1px solid var(--line);padding:36px 30px}
.trending-card .eyebrow{display:block}
.trend-list{list-style:none}
.trend-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.trend-list li:last-child{border-bottom:none}
.trend-list li>span{font-family:var(--display);font-size:24px;color:var(--gold);line-height:1}
.trend-list li a{font-family:var(--display);font-size:18px;line-height:1.25;color:var(--ink);display:block;transition:color .3s}
.trend-list li a:hover{color:var(--gold)}
.trend-list li p{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.sub-card .muted.small{font-size:14px;line-height:1.5;color:var(--ink-dim);margin-bottom:18px}
.news-form.small{margin:0;border:1px solid var(--gold);display:flex;background:#000}
.news-form.small input{flex:1;background:transparent;border:none;padding:12px 14px;color:var(--ink);font-family:var(--serif);font-size:14px;outline:none}
.news-form.small button{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1308;padding:0 18px;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500}

/* INSTAGRAM GRID */
.instagram{padding:140px 0;background:var(--bg);border-top:1px solid var(--line)}
.inline-link{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px}
.inline-link:hover{color:var(--gold-bright)}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:50px}
@media(max-width:800px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
.ig-tile{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative;overflow:hidden;display:block;transition:transform .6s ease,filter .4s}
.ig-tile:hover{transform:scale(1.04);filter:brightness(1.1)}
.ig-tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.4)}
.ig-1{background-image:url("https://images.unsplash.com/photo-1485518882345-15568b007407?auto=format&fit=crop&w=600&q=80")}
.ig-2{background-image:url("https://images.unsplash.com/photo-1496661269814-a841e78df103?auto=format&fit=crop&w=600&q=80")}
.ig-3{background-image:url("https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=600&q=80")}
.ig-4{background-image:url("https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?auto=format&fit=crop&w=600&q=80")}
.ig-5{background-image:url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=600&q=80")}
.ig-6{background-image:url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=600&q=80")}

/* CONTACT SECTION */
.contact-sec{padding:140px 0;background:#050402;border-top:1px solid var(--line)}
.contact-sec .form{background:#0d0b08}

/* =============================================================
   ARTICLE PAGE
   ============================================================= */

/* READING PROGRESS */
.progress-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:transparent;pointer-events:none}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-bright),var(--gold));transition:width .1s linear}

/* ARTICLE HERO */
.article-hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;padding:120px 48px 80px;overflow:hidden}
@media(max-width:768px){.article-hero{padding:80px 22px 50px;min-height:70vh}}
.article-hero-img{position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1800&q=85") center/cover;z-index:1}
.article-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,7,.4) 0%,rgba(10,9,7,.55) 60%,rgba(10,9,7,.95) 100%);z-index:2}
.article-hero-inner{position:relative;z-index:3;max-width:1100px;margin:0 auto;width:100%}
.article-cat-tag{display:inline-block;background:var(--gold);color:#1a1308;padding:8px 16px;font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;margin-bottom:32px}
.article-title{font-family:var(--display);font-size:clamp(40px,7vw,108px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);max-width:1100px;margin-bottom:36px;animation:fadeUp 1s ease both}
.article-title .italic{font-family:var(--serif);font-style:italic;font-weight:300}
.article-meta{font-family:var(--sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.article-meta strong{color:var(--gold);font-weight:500}

/* ARTICLE BODY LAYOUT (share bar + content) */
.article-layout{display:grid;grid-template-columns:80px 1fr;gap:60px;max-width:1100px;margin:90px auto;padding:0 48px}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:30px;padding:0 22px;margin:60px auto}}
.share-bar{position:sticky;top:200px;display:flex;flex-direction:column;align-items:center;gap:16px;align-self:start;height:fit-content}
.share-lbl{font-family:var(--sans);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);writing-mode:vertical-rl;margin-bottom:14px}
.share-btn{width:40px;height:40px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:all .3s}
.share-btn:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.share-btn.copied{color:var(--gold);border-color:var(--gold)}
@media(max-width:900px){.share-bar{flex-direction:row;position:static}.share-lbl{writing-mode:horizontal-tb;margin:0 8px 0 0}}

.article-content{max-width:760px;font-family:var(--serif);font-size:20px;line-height:1.75;color:var(--ink)}
.article-content p{margin-bottom:30px}
.article-content .lead-para{font-size:24px;line-height:1.6;color:var(--ink);font-weight:400;margin-bottom:40px}
.article-content .lead-para::first-letter{font-family:var(--display);font-size:5em;float:left;line-height:.85;padding:4px 14px 0 0;color:var(--gold)}
.article-content h2{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);line-height:1.2;color:var(--ink);margin:60px 0 24px;letter-spacing:-.01em}
.article-content h3{font-family:var(--display);font-size:26px;color:var(--ink);margin:40px 0 16px}
.article-content strong{color:var(--gold);font-weight:500}
.article-content em{font-style:italic;color:var(--ink)}
.article-content .article-list{list-style:none;margin:30px 0;padding:0}
.article-content .article-list li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative;font-size:18px;line-height:1.6}
.article-content .article-list li::before{content:"\2756";position:absolute;left:0;top:14px;color:var(--gold);font-size:10px}
.pull-quote{font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1.3;color:var(--gold);font-style:italic;font-weight:400;text-align:center;padding:50px 0;margin:40px -20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inline-figure{margin:50px -40px}
@media(max-width:900px){.inline-figure{margin:40px 0}}
.inline-figure-img{height:540px;background-size:cover;background-position:center}
.f-1{background-image:url("https://images.unsplash.com/photo-1551803091-e20673f15770?auto=format&fit=crop&w=1600&q=85")}
.f-2{background-image:url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1600&q=85")}
.inline-figure figcaption{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink-dim);letter-spacing:.04em;padding:14px 0 0;border-bottom:1px solid var(--line);padding-bottom:14px}
.inline-figure figcaption span{display:block;color:var(--ink-soft);font-style:italic;margin-top:4px}
.article-end{text-align:center;font-family:var(--display);font-size:24px;color:var(--gold);margin:60px 0 20px;letter-spacing:.5em}

/* AUTHOR BIO */
.author-sec{padding:80px 0;background:var(--bg-2);border-top:1px solid var(--line)}
.author-card{display:grid;grid-template-columns:140px 1fr;gap:40px;max-width:1100px;margin:0 auto;align-items:start;padding:0 48px}
@media(max-width:768px){.author-card{grid-template-columns:1fr;gap:24px;padding:0 22px;text-align:center}}
.author-avatar{width:140px;height:140px;border:1px solid var(--gold);background:linear-gradient(135deg,var(--gold-deep),var(--gold));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:48px;color:#1a1308}
@media(max-width:768px){.author-avatar{margin:0 auto}}
.author-body .eyebrow{display:block;margin-bottom:10px}
.author-name{font-family:var(--display);font-size:36px;color:var(--ink);margin-bottom:6px}
.author-role{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold);margin-bottom:18px}
.author-bio{font-size:17px;line-height:1.7;color:var(--ink-dim);margin-bottom:20px;max-width:680px}
.author-links{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.author-links a{color:var(--gold)}
.author-links a:hover{color:var(--gold-bright)}

/* PREV / NEXT */
.prev-next{padding:80px 0;background:var(--bg);border-top:1px solid var(--line)}
.prev-next .container{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:700px){.prev-next .container{grid-template-columns:1fr}}
.pn-card{padding:34px;border:1px solid var(--line);transition:all .4s;background:#0d0b08;display:block}
.pn-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.pn-card.right{text-align:right}
.pn-lbl{font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.pn-title{font-family:var(--display);font-size:24px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.pn-cat{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}

/* RELATED */
.related{padding:130px 0;background:var(--bg-2);border-top:1px solid var(--line)}

/* article body global tweaks */
.article-body{font-size:17px}