/* ============================================================
   SPLP LAW BLOG — Stylesheet
   Default: Light Mode  |  Night: body.night class
   Theme: White & Gold editorial luxury
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── Variables: Light (default) ────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dark:   #A07830;
  --gold-muted:  rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.32);

  --bg:          #FAFAF7;
  --bg-secondary:#F3F0E8;
  --bg-card:     #FFFFFF;
  --bg-header:   rgba(250,250,247,0.96);

  --text:        #1A1A18;
  --text-muted:  #5A5A52;
  --text-light:  #8A8A7E;
  --text-on-gold:#1A1A18;

  --border:      rgba(26,26,24,0.1);
  --shadow:      0 4px 30px rgba(26,26,24,0.07);
  --shadow-card: 0 2px 16px rgba(26,26,24,0.06);

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'EB Garamond', Georgia, serif;
  --font-ui:     'Montserrat', sans-serif;

  --radius:      2px;
  --header-h:    72px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --transition:  0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Night Mode ─────────────────────────────────────────────── */
body.night {
  --bg:          #0F0F0D;
  --bg-secondary:#181816;
  --bg-card:     #1C1C19;
  --bg-header:   rgba(15,15,13,0.96);
  --text:        #F0EDE4;
  --text-muted:  #9A9A8E;
  --text-light:  #6B6B5E;
  --border:      rgba(201,168,76,0.13);
  --shadow:      0 4px 30px rgba(0,0,0,0.4);
  --shadow-card: 0 2px 20px rgba(0,0,0,0.28);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  transition:background var(--transition),color var(--transition);
  line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ── Subtle paper grain ─────────────────────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:.35;
}

/* ============================================================
   READING PROGRESS + SCROLL TOP
   ============================================================ */
.reading-progress{
  position:fixed;top:0;left:0;height:3px;
  background:var(--gold);width:0%;z-index:9000;
  transition:width .1s linear;
}
.scroll-top{
  position:fixed;bottom:2rem;right:2rem;
  width:42px;height:42px;
  background:var(--gold);color:var(--text-on-gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--transition),transform var(--transition);
  z-index:500;
  box-shadow:0 4px 20px rgba(201,168,76,0.35);
}
.scroll-top.visible{opacity:1;pointer-events:all;}
.scroll-top:hover{transform:translateY(-3px);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  background:var(--bg-header);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gold-border);
  transition:background var(--transition),border-color var(--transition);
}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0 2rem;
  height:100%;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;
}
.logo{display:flex;flex-direction:column;line-height:1;gap:3px;}
.logo-main{
  font-family:var(--font-display);font-size:1.6rem;
  font-weight:900;color:var(--gold);letter-spacing:.12em;
}
.logo-sub{
  font-family:var(--font-ui);font-size:.5rem;font-weight:600;
  letter-spacing:.28em;color:var(--text-muted);text-transform:uppercase;
}
.main-nav{display:flex;gap:2rem;align-items:center;}
.nav-link{
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
  transition:color var(--transition);position:relative;padding-bottom:2px;
}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;right:100%;
  height:1px;background:var(--gold);transition:right var(--transition);
}
.nav-link:hover,.nav-link.active{color:var(--gold);}
.nav-link:hover::after,.nav-link.active::after{right:0;}
.header-right{display:flex;align-items:center;gap:.75rem;}
.search-toggle,.night-toggle{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:color var(--transition),background var(--transition);
}
.search-toggle:hover,.night-toggle:hover{color:var(--gold);background:var(--gold-muted);}

/* Night toggle icons — light mode shows sun, dark mode shows moon */
.icon-moon{display:none;}
body.night .icon-sun{display:none;}
body.night .icon-moon{display:block;}

.hamburger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text-muted);transition:var(--transition);}

/* Search bar */
.search-bar-wrap{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg-header);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gold-border);
  padding:1rem 2rem;display:none;
}
.search-bar-wrap.open{display:block;animation:slideDown .2s ease;}
.search-bar-inner{max-width:640px;margin:0 auto;display:flex;gap:1rem;align-items:center;}
#search-input{
  flex:1;background:none;border:none;
  border-bottom:1px solid var(--gold-border);padding:.5rem 0;
  font-family:var(--font-body);font-size:1.1rem;color:var(--text);outline:none;
}
#search-input::placeholder{color:var(--text-light);}
#search-close{color:var(--text-muted);font-size:1rem;transition:color var(--transition);}
#search-close:hover{color:var(--gold);}

/* Category dropdown */
.category-dropdown{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:999;
  background:var(--bg-card);border-bottom:1px solid var(--gold-border);
  padding:1.5rem 2rem;display:none;box-shadow:var(--shadow);
}
.category-dropdown.open{display:block;animation:slideDown .2s ease;}
.category-dropdown-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.75rem;}
.cat-pill{
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  padding:.4rem 1rem;border:1px solid var(--gold-border);border-radius:50px;
  color:var(--text-muted);cursor:pointer;transition:all var(--transition);
  text-decoration:none;display:inline-block;
}
.cat-pill:hover,.cat-pill.active{background:var(--gold);color:var(--text-on-gold);border-color:var(--gold);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:calc(var(--header-h) + 5rem);padding-bottom:4rem;
  text-align:center;position:relative;background:var(--bg);
}
.hero::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:1px;height:60px;background:linear-gradient(to bottom,var(--gold),transparent);
}
.hero-inner{animation:fadeUp .8s ease both;}
.hero-eyebrow{
  font-family:var(--font-ui);font-size:.62rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;
}
.hero-title{
  font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);
  font-weight:900;line-height:1.1;color:var(--text);margin-bottom:1.5rem;
}
.hero-title em{font-style:italic;color:var(--gold);}
.hero-sub{font-family:var(--font-body);font-size:1.15rem;color:var(--text-muted);line-height:1.8;}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-content{max-width:1280px;margin:0 auto;padding:4rem 2rem;}

/* ============================================================
   FEATURED CARD
   ============================================================ */
.featured-section{margin-bottom:4rem;}
.featured-card{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg-card);border:1px solid var(--gold-border);
  box-shadow:var(--shadow);overflow:hidden;
  transition:box-shadow var(--transition);
}
.featured-card:hover{box-shadow:0 8px 50px rgba(201,168,76,.14);}
.featured-badge{
  font-family:var(--font-ui);font-size:.58rem;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);padding:.3rem .8rem;
  display:inline-block;margin-bottom:1.2rem;
}
.featured-img{aspect-ratio:4/3;background:var(--bg-secondary);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.featured-img img{width:100%;height:100%;object-fit:cover;}
.placeholder-art{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--gold-muted) 100%);display:flex;align-items:center;justify-content:center;}
.featured-body{padding:3rem;display:flex;flex-direction:column;justify-content:center;}
.article-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.meta-cat{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.meta-sep{color:var(--gold);opacity:.4;}
.meta-date,.meta-author{font-family:var(--font-ui);font-size:.68rem;color:var(--text-light);letter-spacing:.05em;}
.featured-title{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;line-height:1.25;color:var(--text);margin-bottom:1rem;transition:color var(--transition);}
.featured-card:hover .featured-title{color:var(--gold);}
.featured-excerpt{font-size:1.05rem;color:var(--text-muted);line-height:1.8;margin-bottom:2rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.read-more{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);transition:gap var(--transition);}
.read-more:hover{gap:1rem;}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.filter-btn{
  font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:.45rem 1.1rem;border:1px solid var(--border);border-radius:50px;
  color:var(--text-muted);transition:all var(--transition);text-decoration:none;display:inline-block;
}
.filter-btn:hover,.filter-btn.active{background:var(--gold);color:var(--text-on-gold);border-color:var(--gold);}

/* ============================================================
   ARTICLES GRID
   ============================================================ */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:4rem;}
.article-card{
  background:var(--bg-card);border:1px solid var(--border);
  transition:all var(--transition);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.article-card::before{content:'';position:absolute;bottom:0;left:0;right:100%;height:2px;background:var(--gold);transition:right var(--transition);}
.article-card:hover::before{right:0;}
.article-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
.card-img{aspect-ratio:16/9;background:var(--bg-secondary);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.article-card:hover .card-img img{transform:scale(1.04);}
.card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.card-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.35;margin-bottom:.75rem;color:var(--text);transition:color var(--transition);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.article-card:hover .card-title{color:var(--gold);}
.card-excerpt{font-size:.95rem;color:var(--text-muted);line-height:1.75;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1.25rem;}
.card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--border);}
.card-tags{display:flex;gap:.4rem;flex-wrap:wrap;}
.tag{font-family:var(--font-ui);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .55rem;background:var(--gold-muted);color:var(--gold-dark);border-radius:2px;}
body.night .tag{color:var(--gold-light);}
.card-read-time{font-family:var(--font-ui);font-size:.62rem;color:var(--text-light);}
.empty-state{grid-column:1/-1;text-align:center;padding:5rem 2rem;}
.empty-state h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-muted);margin-bottom:.5rem;}
.empty-state p{font-size:.9rem;color:var(--text-light);}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2rem;}
.page-btn{font-family:var(--font-ui);font-size:.68rem;font-weight:600;padding:.5rem .9rem;border:1px solid var(--border);color:var(--text-muted);transition:all var(--transition);text-decoration:none;display:inline-block;}
.page-btn:hover,.page-btn.active{background:var(--gold);color:var(--text-on-gold);border-color:var(--gold);}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section{
  background:var(--bg-secondary);border:1px solid var(--gold-border);
  padding:4rem;margin-bottom:4rem;text-align:center;position:relative;overflow:hidden;
}
.about-section::before{
  content:'SPLP';position:absolute;font-family:var(--font-display);
  font-size:12rem;font-weight:900;color:var(--gold);opacity:.04;
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
}
.about-section h2{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text);margin-bottom:1rem;}
.about-section p{font-size:1.1rem;color:var(--text-muted);max-width:600px;margin:0 auto;line-height:1.9;}
.about-section a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--gold-border);padding:3rem 2rem 1.5rem;}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border);}
.footer-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:900;color:var(--gold);letter-spacing:.1em;}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap;}
.footer-links a{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);transition:color var(--transition);}
.footer-links a:hover{color:var(--gold);}
.footer-copy{max-width:1280px;margin:0 auto;font-family:var(--font-ui);font-size:.65rem;color:var(--text-light);letter-spacing:.08em;text-align:center;}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-page-wrap{max-width:780px;margin:0 auto;padding:calc(var(--header-h) + 4rem) 2rem 6rem;}
.article-page-header{margin-bottom:2.5rem;text-align:center;}
.article-page-cats{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap;}
.article-page-cat{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-border);padding:.3rem .8rem;transition:all var(--transition);text-decoration:none;}
.article-page-cat:hover{background:var(--gold);color:var(--text-on-gold);}
.article-page-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.2;color:var(--text);margin-bottom:1.5rem;}
.article-page-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;}
.article-page-meta span{font-family:var(--font-ui);font-size:.7rem;color:var(--text-light);letter-spacing:.08em;}
.article-page-meta .author{color:var(--gold);font-weight:500;}
.article-divider{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem;}
.article-divider::before,.article-divider::after{content:'';flex:1;height:1px;background:var(--gold-border);}
.article-divider span{font-family:var(--font-display);font-size:1.2rem;color:var(--gold);}
.article-page-body{font-family:var(--font-body);font-size:1.15rem;line-height:1.9;color:var(--text);}
.article-page-body p{margin-bottom:1.5rem;}
.article-page-body h2{font-family:var(--font-display);font-size:1.65rem;font-weight:700;margin:2.5rem 0 1rem;color:var(--text);}
.article-page-body h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;margin:2rem 0 .8rem;color:var(--text);}
.article-page-body blockquote{border-left:3px solid var(--gold);padding:1rem 0 1rem 2rem;margin:2rem 0;font-style:italic;color:var(--text-muted);font-size:1.2rem;}
.article-page-body ul,.article-page-body ol{padding-left:2rem;margin-bottom:1.5rem;}
.article-page-body li{margin-bottom:.5rem;}
.article-page-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.article-page-body strong{font-weight:600;}
.article-page-body img{border-radius:var(--radius);margin:1.5rem 0;}

/* Ad boxes */
.ad-box{background:var(--bg-secondary);border:1px dashed var(--gold-border);padding:1.5rem;text-align:center;margin:2.5rem 0;min-height:90px;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.65rem;letter-spacing:.1em;color:var(--text-light);text-transform:uppercase;}
.ad-box.has-content{background:transparent;border:none;padding:1.5rem 0;display:block;text-align:initial;}

/* Tags row */
.article-page-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0;}
.article-page-tag{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .8rem;border:1px solid var(--gold-border);color:var(--text-muted);text-decoration:none;transition:all var(--transition);}
.article-page-tag:hover{border-color:var(--gold);color:var(--gold);}

/* Share bar */
.share-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:2rem 0;}
.share-label{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-light);}
.share-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.5rem 1rem;border:1px solid var(--border);color:var(--text-muted);transition:all var(--transition);cursor:pointer;text-decoration:none;background:none;}
.share-btn:hover{border-color:var(--gold);color:var(--gold);}
.share-btn.whatsapp:hover{border-color:#25D366;color:#25D366;}
.share-btn.twitter:hover{border-color:#1DA1F2;color:#1DA1F2;}
.share-btn.facebook:hover{border-color:#1877F2;color:#1877F2;}
.share-btn.linkedin:hover{border-color:#0A66C2;color:#0A66C2;}

/* Prev/Next nav */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);}
.article-nav-item{padding:1.25rem;border:1px solid var(--border);transition:border-color var(--transition),background var(--transition);text-decoration:none;display:block;}
.article-nav-item:hover{border-color:var(--gold);background:var(--gold-muted);}
.nav-dir{font-family:var(--font-ui);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;}
.nav-art-title{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.article-nav-item.next{text-align:right;}

/* Comments */
.comments-section{margin-top:3rem;}
.comments-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.comment-form{margin-bottom:2.5rem;}
.comment-form h4{font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.form-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.form-field label{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.form-field input,.form-field textarea{background:var(--bg-secondary);border:1px solid var(--border);padding:.7rem 1rem;font-family:var(--font-body);font-size:1rem;color:var(--text);outline:none;transition:border-color var(--transition);resize:vertical;}
.form-field input:focus,.form-field textarea:focus{border-color:var(--gold);}
.btn-submit{font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:.75rem 2rem;background:var(--gold);color:var(--text-on-gold);transition:background var(--transition);}
.btn-submit:hover{background:var(--gold-dark);}
.comment-list{display:flex;flex-direction:column;gap:1.5rem;}
.comment-item{padding:1.5rem;background:var(--bg-secondary);border-left:2px solid var(--gold);}
.comment-header{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap;}
.comment-name{font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--text);}
.comment-date{font-family:var(--font-ui);font-size:.65rem;color:var(--text-light);}
.comment-text{font-size:1rem;color:var(--text-muted);line-height:1.7;}

/* ============================================================
   ADMIN STYLES
   ============================================================ */
.admin-wrap{min-height:100vh;background:var(--bg);padding:calc(var(--header-h) + 2rem) 2rem 4rem;}
.admin-inner{max-width:1100px;margin:0 auto;}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--gold-border);flex-wrap:wrap;gap:1rem;}
.admin-title{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--text);}
.admin-title span{color:var(--gold);}
.admin-nav-tabs{display:flex;gap:0;border:1px solid var(--gold-border);overflow-x:auto;}
.admin-tab{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.65rem 1.3rem;color:var(--text-muted);border-right:1px solid var(--gold-border);transition:all var(--transition);text-decoration:none;display:inline-block;white-space:nowrap;}
.admin-tab:last-child{border-right:none;}
.admin-tab:hover,.admin-tab.active{background:var(--gold);color:var(--text-on-gold);}
.admin-section-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:1.5rem;}
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;}
.admin-form-full{grid-column:1/-1;}
.admin-field{display:flex;flex-direction:column;gap:.4rem;}
.admin-label{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.admin-input,.admin-textarea,.admin-select{background:var(--bg-card);border:1px solid var(--border);padding:.75rem 1rem;font-family:var(--font-body);font-size:1rem;color:var(--text);outline:none;transition:border-color var(--transition);width:100%;}
.admin-input:focus,.admin-textarea:focus,.admin-select:focus{border-color:var(--gold);}
.admin-textarea{resize:vertical;min-height:180px;line-height:1.6;}
.admin-select{cursor:pointer;}
.admin-hint{font-family:var(--font-ui);font-size:.6rem;color:var(--text-light);margin-top:.2rem;}
.admin-btn-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem;}
.btn-primary{font-family:var(--font-ui);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.8rem 2rem;background:var(--gold);color:var(--text-on-gold);transition:background var(--transition);}
.btn-primary:hover{background:var(--gold-dark);}
.btn-secondary{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.8rem 1.5rem;border:1px solid var(--border);color:var(--text-muted);transition:all var(--transition);text-decoration:none;display:inline-block;}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
.btn-danger{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.5rem 1rem;border:1px solid #E53E3E;color:#E53E3E;transition:all var(--transition);}
.btn-danger:hover{background:#E53E3E;color:white;}
.btn-sm{padding:.4rem .9rem;font-size:.6rem;}
.admin-articles-list{display:flex;flex-direction:column;gap:1rem;}
.admin-article-item{background:var(--bg-card);border:1px solid var(--border);padding:1.25rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;transition:border-color var(--transition);}
.admin-article-item:hover{border-color:var(--gold-border);}
.admin-art-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.3rem;}
.admin-art-meta{font-family:var(--font-ui);font-size:.62rem;color:var(--text-light);letter-spacing:.08em;}
.admin-art-meta span{color:var(--gold);}
.admin-art-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.status-badge{font-family:var(--font-ui);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:50px;}
.status-published{background:rgba(72,187,120,.12);color:#38A169;}
.status-draft{background:rgba(237,137,54,.12);color:#C05621;}
.status-pending{background:rgba(66,153,225,.12);color:#2B6CB0;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);padding:1.5rem;text-align:center;}
.stat-num{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:var(--gold);display:block;}
.stat-label{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);}
.ad-preview{background:var(--bg-secondary);border:1px dashed var(--gold-border);padding:1rem;margin-top:.5rem;min-height:80px;font-family:var(--font-ui);font-size:.65rem;color:var(--text-light);display:flex;align-items:center;justify-content:center;}
.global-ads-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.flash-success{background:rgba(72,187,120,.1);border:1px solid rgba(72,187,120,.3);color:#38A169;padding:1rem;font-family:var(--font-ui);font-size:.8rem;margin-bottom:1.5rem;}
.flash-error{background:rgba(229,62,62,.1);border:1px solid rgba(229,62,62,.3);color:#E53E3E;padding:1rem;font-family:var(--font-ui);font-size:.8rem;margin-bottom:1.5rem;}
.admin-toolbar{background:var(--bg-secondary);border:1px solid var(--gold-border);padding:.5rem .75rem;display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem;}
.toolbar-btn{font-family:var(--font-ui);font-size:.68rem;font-weight:500;padding:.3rem .6rem;border:1px solid var(--border);color:var(--text-muted);transition:all .2s;cursor:pointer;background:var(--bg-card);}
.toolbar-btn:hover{border-color:var(--gold);color:var(--gold);}
.toolbar-sep{width:1px;background:var(--border);margin:0 .2rem;}
.content-editor{min-height:360px;background:var(--bg-card);border:1px solid var(--border);padding:1.25rem;font-family:var(--font-body);font-size:1.05rem;line-height:1.8;color:var(--text);outline:none;transition:border-color .2s;}
.content-editor:focus{border-color:var(--gold);}
.content-editor p{margin-bottom:1rem;}
.content-editor h2{font-family:var(--font-display);font-size:1.4rem;margin:1.5rem 0 .75rem;color:var(--text);}
.content-editor h3{font-family:var(--font-display);font-size:1.15rem;margin:1.2rem 0 .6rem;color:var(--text);}
.content-editor blockquote{border-left:3px solid var(--gold);padding:.5rem 0 .5rem 1.5rem;margin:1rem 0;color:var(--text-muted);font-style:italic;}
.content-editor a{color:var(--gold);}
[contenteditable=true]:empty:before{content:attr(placeholder);color:var(--text-light);font-style:italic;pointer-events:none;}
.char-count{font-family:var(--font-ui);font-size:.62rem;color:var(--text-light);text-align:right;margin-top:.25rem;}
.img-preview{max-width:100%;max-height:200px;object-fit:cover;margin-top:.75rem;border:1px solid var(--border);}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:2rem;}
.login-card{background:var(--bg-card);border:1px solid var(--gold-border);padding:3rem;width:100%;max-width:420px;box-shadow:var(--shadow);}
.login-logo{text-align:center;margin-bottom:2.5rem;}
.login-logo .l-main{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:var(--gold);letter-spacing:.12em;display:block;}
.login-logo .l-sub{font-family:var(--font-ui);font-size:.55rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--text-muted);}
.login-title{font-family:var(--font-ui);font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);text-align:center;margin-bottom:2rem;}

/* Toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--text);color:var(--bg);padding:.8rem 1.5rem;font-family:var(--font-ui);font-size:.72rem;font-weight:500;z-index:9999;opacity:0;transform:translateY(1rem);transition:all .3s ease;pointer-events:none;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.gold{background:var(--gold);color:var(--text-on-gold);}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .4s ease both;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .articles-grid{grid-template-columns:repeat(2,1fr);}
  .featured-card{grid-template-columns:1fr;}
  .featured-img{aspect-ratio:16/9;}
  .global-ads-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .main-nav{display:none;flex-direction:column;position:absolute;top:var(--header-h);left:0;right:0;background:var(--bg-header);backdrop-filter:blur(14px);padding:1.5rem 2rem;border-bottom:1px solid var(--gold-border);gap:1.2rem;}
  .main-nav.open{display:flex;}
  .hamburger{display:flex;}
  .articles-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .admin-form-grid{grid-template-columns:1fr;}
  .admin-header{flex-direction:column;align-items:flex-start;}
  .about-section{padding:2.5rem 1.5rem;}
  .admin-article-item{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .article-nav{grid-template-columns:1fr;}
  .article-nav-item.next{text-align:left;}
  .share-bar{gap:.5rem;}
  .share-btn{padding:.4rem .7rem;font-size:.6rem;}
  .header-inner{padding:0 1rem;}
  .main-content{padding:2rem 1rem;}
  .featured-body{padding:1.5rem;}
  .login-card{padding:2rem 1.5rem;}
  .admin-wrap{padding:calc(var(--header-h) + 1rem) 1rem 3rem;}
  .admin-nav-tabs{overflow-x:auto;}
}