/* =========================================================
   DESHWISE — Design System
   Masthead editorial identity: deep indigo ink, marigold accent,
   warm grey paper. Fraunces for English display heads, Hind for
   body copy + all Hindi text + UI chrome.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Hind:wght@400;500;600;700&display=swap');

:root{
  /* -- palette -- */
  --ink:        #16213E;
  --marigold:   #E2A33B;
  --marigold-deep: #B87F1E;
  --teal:       #1F6F64;
  --red-flag:   #B23A2E;
  --paper:      #F6F4EF;

  /* -- semantic tokens (light) -- */
  --bg:            #F6F4EF;
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     #EFEBE1;
  --masthead-bg:   #16213E;
  --masthead-text: #F6F4EF;
  --text:          #191E2B;
  --text-soft:     #5B5F6B;
  --text-on-ink:   #F6F4EF;
  --border:        #E3DFD3;
  --border-strong: #C9C3B2;
  --accent:        #E2A33B;
  --accent-text:   #16213E;
  --focus:         #1F6F64;
  --shadow: 0 1px 2px rgba(22,33,62,0.06);

  /* -- category signal colours (used narrowly: left-border + pill) -- */
  --cat-india:   #B23A2E;
  --cat-daily:   #B87F1E;
  --cat-health:  #1F6F64;
  --cat-youth:   #2E5C8A;
  --cat-money:   #7A5C1E;
  --cat-tech:    #4B3F8C;
  --cat-science: #14707A;
  --cat-sports:  #A6461C;
  --cat-nature:  #2E6B3E;
  --cat-safety:  #8C2F2F;

  /* -- type -- */
  --font-display: 'Fraunces', 'Hind', Georgia, serif;
  --font-body:    'Hind', 'Noto Sans Devanagari', -apple-system, sans-serif;

  /* -- scale -- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-s: 3px; --radius-m: 6px;
  --max-width: 1240px;
}

[data-theme="dark"]{
  --bg:            #10162A;
  --bg-elevated:   #171E36;
  --bg-sunken:     #0C1120;
  --masthead-bg:   #0C1120;
  --masthead-text: #F1EEE5;
  --text:          #EDEAE2;
  --text-soft:     #A8ACC0;
  --text-on-ink:   #F1EEE5;
  --border:        #262E4C;
  --border-strong: #333E63;
  --shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--space-5); }
@media (max-width:640px){ .container{ padding:0 var(--space-4); } }

.lang-hi, [lang="hi"]{ font-family:var(--font-body); }

/* ---------- headings ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--text); letter-spacing:-0.01em; }
html[data-lang="hi"] h1, html[data-lang="hi"] h2, html[data-lang="hi"] h3, html[data-lang="hi"] h4{
  font-family:var(--font-body); font-weight:700; letter-spacing:0;
}
.eyebrow-free{ /* marker class: intentionally no eyebrow labels used */ }

/* ---------- masthead ---------- */
.masthead{
  background:var(--masthead-bg);
  color:var(--masthead-text);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(246,244,239,0.08);
}
.masthead-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; font-size:13px; color:rgba(246,244,239,0.65);
  border-bottom:1px solid rgba(246,244,239,0.08);
}
.masthead-top .date{ display:flex; align-items:center; gap:var(--space-4); }
.masthead-main{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{
  display:flex; flex-direction:column; line-height:1;
}
.brand .wordmark{
  font-family:var(--font-display); font-weight:700; font-size:30px;
  color:var(--text-on-ink); letter-spacing:-0.02em;
}
.brand .wordmark span{ color:var(--marigold); }
.brand .tagline{
  font-size:11.5px; color:rgba(246,244,239,0.6); margin-top:3px; font-family:var(--font-body);
}
.masthead-actions{ display:flex; align-items:center; gap:var(--space-4); }
.icon-btn{
  background:transparent; border:1px solid rgba(246,244,239,0.25); color:var(--text-on-ink);
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:rgba(246,244,239,0.1); border-color:rgba(246,244,239,0.45); }
.lang-toggle{
  display:flex; border:1px solid rgba(246,244,239,0.25); border-radius:999px; overflow:hidden; font-size:12.5px; font-weight:600;
}
.lang-toggle button{
  background:transparent; border:none; color:rgba(246,244,239,0.7); padding:6px 12px; cursor:pointer;
}
.lang-toggle button.active{ background:var(--marigold); color:var(--ink); }
.hamburger{ display:none; }

.nav-strip{ border-top:1px solid rgba(246,244,239,0.08); }
.nav-strip .container{ display:flex; align-items:center; gap:var(--space-6); overflow-x:auto; scrollbar-width:none; }
.nav-strip .container::-webkit-scrollbar{ display:none; }
.nav-strip a{
  white-space:nowrap; font-size:13.5px; font-weight:600; color:rgba(246,244,239,0.78);
  padding:11px 0; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.nav-strip a:hover, .nav-strip a.current{ color:var(--text-on-ink); border-color:var(--marigold); }
.nav-strip a.trending-link{ color:var(--marigold); }

@media (max-width:900px){
  .nav-strip{ display:none; }
  .hamburger{
    display:inline-flex; background:transparent; border:1px solid rgba(246,244,239,0.25);
    width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; cursor:pointer; color:var(--text-on-ink);
  }
  .brand .tagline{ display:none; }
  .masthead-top{ font-size:11.5px; }
}

.mobile-drawer{
  position:fixed; inset:0; background:rgba(12,17,32,0.6); z-index:80;
}
.mobile-drawer-panel{
  background:var(--masthead-bg); color:var(--text-on-ink); width:82%; max-width:360px; height:100%;
  padding:var(--space-5); overflow-y:auto;
}
.mobile-drawer-panel .close-drawer{ background:none; border:none; color:var(--text-on-ink); font-size:24px; cursor:pointer; }
.mobile-drawer-panel .drawer-group{ margin-top:var(--space-5); }
.mobile-drawer-panel .drawer-group h4{ color:var(--marigold); font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; font-family:var(--font-body); margin-bottom:var(--space-2); }
.mobile-drawer-panel .drawer-group a{ display:block; padding:8px 0; font-size:15px; color:rgba(246,244,239,0.85); border-bottom:1px solid rgba(246,244,239,0.08); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-m); font-weight:600; font-size:14.5px;
  cursor:pointer; border:1px solid transparent; transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--marigold); color:var(--ink); }
.btn-primary:hover{ background:var(--marigold-deep); }
.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--text); }
.btn-outline:hover{ border-color:var(--text); }
.btn-ghost-invert{ background:transparent; border-color:rgba(246,244,239,0.35); color:var(--text-on-ink); }
.btn-ghost-invert:hover{ background:rgba(246,244,239,0.1); }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-block{ width:100%; }

/* ---------- tags / badges ---------- */
.tag{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:0.02em;
  padding:4px 10px; border-radius:999px; color:#fff;
}
.tag-india{ background:var(--cat-india); } .tag-daily{ background:var(--cat-daily); }
.tag-health{ background:var(--cat-health); } .tag-youth{ background:var(--cat-youth); }
.tag-money{ background:var(--cat-money); } .tag-tech{ background:var(--cat-tech); }
.tag-science{ background:var(--cat-science); } .tag-sports{ background:var(--cat-sports); }
.tag-nature{ background:var(--cat-nature); } .tag-safety{ background:var(--cat-safety); }

.badge-verified{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--teal);
}
.badge-verified svg{ width:14px; height:14px; }
.badge-breaking{
  display:inline-flex; align-items:center; gap:6px; background:var(--red-flag); color:#fff;
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:3px;
}

/* ---------- section header ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-5);
  border-bottom:2px solid var(--text); padding-bottom:var(--space-3);
}
.section-head h2{ font-size:24px; }
.section-head .see-all{ font-size:13.5px; font-weight:600; color:var(--teal); white-space:nowrap; }
.section{ padding:var(--space-8) 0; }
.section-tight{ padding:var(--space-7) 0; }
.section-alt{ background:var(--bg-sunken); }

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1.55fr 1fr; gap:var(--space-6); padding:var(--space-7) 0 var(--space-6); }
.hero-feature{ position:relative; border-radius:var(--radius-m); overflow:hidden; background:var(--ink); min-height:440px; }
.hero-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.82; }
.hero-feature .overlay{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(12,17,32,0.92) 0%, rgba(12,17,32,0.55) 45%, rgba(12,17,32,0.05) 75%);
}
.hero-feature .content{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-6); color:#fff; }
.hero-feature h1{ font-size:38px; line-height:1.12; color:#fff; margin:var(--space-3) 0 var(--space-3); }
.hero-feature .dek{ color:rgba(255,255,255,0.82); font-size:15.5px; max-width:56ch; }
.hero-feature .meta{ color:rgba(255,255,255,0.65); font-size:13px; margin-top:var(--space-3); }
.hero-secondary{ display:flex; flex-direction:column; gap:var(--space-4); }
.mini-story{ display:flex; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.mini-story:last-child{ border-bottom:none; padding-bottom:0; }
.mini-story img{ width:104px; height:78px; object-fit:cover; border-radius:var(--radius-s); flex-shrink:0; }
.mini-story h4{ font-size:15px; line-height:1.32; }
.mini-story .meta{ font-size:12px; color:var(--text-soft); margin-top:6px; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-feature{ min-height:340px; }
  .hero-feature h1{ font-size:28px; }
}

/* ---------- article cards / grid ---------- */
.grid{ display:grid; gap:var(--space-5); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; }
.card img{ aspect-ratio:4/2.7; object-fit:cover; border-radius:var(--radius-s); margin-bottom:var(--space-3); }
.card .tag{ align-self:flex-start; margin-bottom:var(--space-2); }
.card h3{ font-size:17px; line-height:1.32; }
.card .excerpt{ font-size:13.5px; color:var(--text-soft); margin-top:6px; }
.card .meta{ font-size:12px; color:var(--text-soft); margin-top:var(--space-2); }
.card:hover h3{ color:var(--marigold-deep); }
[data-theme="dark"] .card:hover h3{ color:var(--marigold); }

.card-row{ display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4) 0; border-bottom:1px solid var(--border); }
.card-row:last-child{ border-bottom:none; }
.card-row .rank{ font-family:var(--font-display); font-size:26px; color:var(--border-strong); width:34px; flex-shrink:0; }
.card-row img{ width:88px; height:66px; object-fit:cover; border-radius:var(--radius-s); flex-shrink:0; }
.card-row h4{ font-size:14.5px; line-height:1.32; }

/* ---------- panel cards (myth/fact, did-you-know, 1-min knowledge) ---------- */
.panel-card{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:var(--space-5); box-shadow:var(--shadow);
}
.panel-card h4{ font-size:15.5px; margin-bottom:var(--space-2); }
.panel-card p{ font-size:13.5px; color:var(--text-soft); }

.myth-fact{ border-left:3px solid var(--marigold); }
.myth-fact .row{ display:flex; gap:10px; margin-bottom:10px; }
.myth-fact .row:last-child{ margin-bottom:0; }
.myth-fact .label{ font-size:11px; font-weight:700; letter-spacing:0.03em; flex-shrink:0; width:44px; padding-top:2px; }
.myth-fact .label.myth{ color:var(--red-flag); }
.myth-fact .label.fact{ color:var(--teal); }
.myth-fact p{ font-size:13.5px; color:var(--text); margin:0; }

.know-card{ border-left:3px solid var(--teal); }
.today-list{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); }
.today-item{ display:flex; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.today-item:last-child{ border-bottom:none; }
.today-item .num{ font-family:var(--font-display); font-size:20px; color:var(--marigold-deep); width:28px; flex-shrink:0; }
[data-theme="dark"] .today-item .num{ color:var(--marigold); }
.today-item p{ font-size:14px; color:var(--text); }
.today-item .cat{ font-size:11.5px; color:var(--text-soft); margin-top:3px; }

/* ---------- newsletter ---------- */
.newsletter-band{ background:var(--ink); color:#fff; border-radius:var(--radius-m); padding:var(--space-7); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.newsletter-band h3{ color:#fff; font-size:24px; margin-bottom:8px; }
.newsletter-band p{ color:rgba(255,255,255,0.7); font-size:14px; max-width:44ch; }
.newsletter-form{ display:flex; gap:10px; flex-shrink:0; }
.newsletter-form input{
  padding:12px 14px; border-radius:var(--radius-m); border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06); color:#fff; width:240px;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.45); }
@media (max-width:800px){ .newsletter-band{ flex-direction:column; align-items:flex-start; } .newsletter-form{ width:100%; } .newsletter-form input{ width:100%; } }

.social-follow{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.social-follow a{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  padding:8px 14px; border:1px solid var(--border-strong); border-radius:999px;
}
.social-follow a:hover{ border-color:var(--marigold); color:var(--marigold-deep); }

/* ---------- footer ---------- */
.site-footer{ background:var(--masthead-bg); color:rgba(246,244,239,0.7); padding:var(--space-8) 0 var(--space-6); margin-top:var(--space-8); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-6); }
.footer-grid h5{ color:var(--text-on-ink); font-size:13px; font-family:var(--font-body); font-weight:700; margin-bottom:var(--space-3); }
.footer-grid a{ display:block; font-size:13.5px; padding:5px 0; color:rgba(246,244,239,0.68); }
.footer-grid a:hover{ color:var(--marigold); }
.footer-bottom{ border-top:1px solid rgba(246,244,239,0.12); margin-top:var(--space-6); padding-top:var(--space-5); display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:var(--space-3); }
.footer-bottom .demo-note{ color:var(--marigold); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- reading progress bar (premium editorial touch) ---------- */
.reading-progress{ position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:60; }
.reading-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--marigold), var(--marigold-deep)); transition:width .1s ease-out; }

/* ---------- drop cap (classic magazine opening) ---------- */
.article-body > p:first-of-type::first-letter{
  float:left; font-family:var(--font-display); font-weight:700; font-size:64px; line-height:0.82;
  padding:6px 10px 0 0; color:var(--marigold-deep); letter-spacing:-0.01em;
}
[data-theme="dark"] .article-body > p:first-of-type::first-letter{ color:var(--marigold); }
html[data-lang="hi"] .article-body > p:first-of-type::first-letter{ font-family:var(--font-body); }

/* ---------- refined content boxes ---------- */
.pull-summary{ position:relative; padding-left:calc(var(--space-5) + 4px); }
.pull-summary::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px; background:linear-gradient(180deg, var(--teal), var(--marigold)); }
.pull-summary h4{ display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.04em; font-size:12.5px; color:var(--teal); }
[data-theme="dark"] .pull-summary h4{ color:var(--marigold); }

.sources-box{ background:var(--bg-elevated); box-shadow:var(--shadow); }
.sources-box h4{ text-transform:uppercase; letter-spacing:0.04em; color:var(--text-soft); }

.faq-item summary{ transition:color .15s ease; }
.faq-item summary:hover{ color:var(--teal); }

/* ---------- refined hero image treatment ---------- */
.article-hero-img img{ box-shadow:0 8px 30px -12px rgba(22,33,62,0.35); }
[data-theme="dark"] .article-hero-img img{ box-shadow:0 8px 30px -12px rgba(0,0,0,0.6); }
.article-inline-img img{ box-shadow:0 6px 20px -10px rgba(22,33,62,0.3); }

/* ---------- refined byline ---------- */
.article-byline{ position:relative; }
.article-byline img{ box-shadow:0 2px 8px rgba(22,33,62,0.15); }

/* ---------- polished type badge + tag row ---------- */
.article-head .tag, .article-head .badge-breaking{ letter-spacing:0.03em; }

/* ---------- subtle heading rhythm ---------- */
.article-body h2{ position:relative; padding-top:4px; }
.article-body h2::before{ content:''; position:absolute; top:0; left:0; width:36px; height:3px; background:var(--marigold); border-radius:2px; }
/* ---------- article page ---------- */
.article-head{ max-width:760px; margin:0 auto; padding:var(--space-7) var(--space-5) var(--space-5); }
.article-head .tag{ margin-bottom:var(--space-3); }
.article-head h1{ font-size:36px; line-height:1.18; margin-bottom:var(--space-3); }
.article-head .dek{ font-size:18px; color:var(--text-soft); font-family:var(--font-display); font-style:italic; line-height:1.45; }
.article-byline{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border); }
.article-byline img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.article-byline .name{ font-size:14px; font-weight:600; }
.article-byline .meta{ font-size:12.5px; color:var(--text-soft); }
.article-hero-img{ max-width:900px; margin:0 auto; padding:0 var(--space-5); }
.article-hero-img img{ width:100%; border-radius:var(--radius-m); aspect-ratio:16/9; object-fit:cover; }
.article-hero-img figcaption{ font-size:12.5px; color:var(--text-soft); margin-top:8px; }

.article-layout{ max-width:760px; margin:0 auto; padding:var(--space-7) var(--space-5); display:grid; gap:var(--space-7); }
.toc{ background:var(--bg-elevated); border:1px solid var(--border); border-left:3px solid var(--teal); border-radius:var(--radius-m); padding:var(--space-5); }
.toc h4{ font-size:13px; text-transform:none; margin-bottom:var(--space-3); }
.toc ol{ list-style:none; counter-reset:toc; }
.toc li{ counter-increment:toc; font-size:14px; padding:5px 0; }
.toc li::before{ content:counter(toc) '. '; color:var(--teal); font-weight:600; }
.toc a:hover{ color:var(--teal); }

.article-body{ font-size:17.5px; line-height:1.75; }
.article-body p{ margin-bottom:var(--space-5); }
.article-body h2{ font-size:24px; margin:var(--space-7) 0 var(--space-4); }
.article-body h3{ font-size:19px; margin:var(--space-6) 0 var(--space-3); }
.article-body ul, .article-body ol{ margin:0 0 var(--space-5); padding-left:22px; list-style:disc; }
.article-body ol{ list-style:decimal; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{ border-left:3px solid var(--marigold); margin:var(--space-6) 0; padding:var(--space-2) 0 var(--space-2) var(--space-5); font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--text); }

.pull-summary{ background:var(--bg-sunken); border-radius:var(--radius-m); padding:var(--space-5); }
.pull-summary h4{ font-size:14px; margin-bottom:var(--space-3); }
.pull-summary ul{ list-style:none; padding:0; }
.pull-summary li{ font-size:14.5px; padding:6px 0 6px 22px; position:relative; }
.pull-summary li::before{ content:'✓'; position:absolute; left:0; color:var(--teal); font-weight:700; }

.sources-box{ border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--space-5); }
.sources-box h4{ font-size:13px; margin-bottom:var(--space-3); }
.sources-box li{ font-size:13.5px; padding:5px 0; color:var(--text-soft); }
.sources-box li a{ color:var(--teal); }

.faq-item{ border-bottom:1px solid var(--border); padding:var(--space-4) 0; }
.faq-item summary{ font-size:15.5px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--text-soft); }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ font-size:14.5px; color:var(--text-soft); margin-top:var(--space-3); }

.share-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:var(--space-5) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.share-row .lbl{ font-size:13px; font-weight:600; color:var(--text-soft); margin-right:4px; }
.share-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.share-btn:hover{ border-color:var(--teal); color:var(--teal); }

.tags-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tags-row a{ font-size:12.5px; padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px; color:var(--text-soft); }
.tags-row a:hover{ border-color:var(--text); color:var(--text); }

.disclosure-note{ font-size:12.5px; color:var(--text-soft); background:var(--bg-sunken); padding:var(--space-3) var(--space-4); border-radius:var(--radius-s); }

.ad-slot{
  border:1px dashed var(--border-strong); border-radius:var(--radius-m); background:var(--bg-sunken);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft); font-size:12.5px;
  letter-spacing:0.02em; padding:var(--space-4); min-height:90px;
}

/* ---------- category page ---------- */
.category-hero{ padding:var(--space-6) 0; border-bottom:3px solid var(--text); }
.category-hero h1{ font-size:32px; }
.category-hero p{ color:var(--text-soft); margin-top:8px; max-width:64ch; }
.subcat-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--space-4); }
.subcat-pills a{ font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--border-strong); }
.subcat-pills a.active{ background:var(--text); color:var(--bg); border-color:var(--text); }
.filter-row{ display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-5); flex-wrap:wrap; }
.filter-row select{ padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--bg-elevated); }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:var(--space-7); }
.pagination a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); border-radius:var(--radius-s); font-size:13.5px; }
.pagination a.active{ background:var(--text); color:var(--bg); border-color:var(--text); }

.category-featured{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:center; margin-bottom:var(--space-7); padding-bottom:var(--space-7); border-bottom:1px solid var(--border); }
.category-featured img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-m); box-shadow:0 10px 30px -14px rgba(22,33,62,0.3); }
.category-featured h2{ font-size:26px; line-height:1.25; margin:var(--space-3) 0 var(--space-3); }
.category-featured .excerpt{ color:var(--text-soft); font-size:14.5px; }
.category-featured .meta{ font-size:12.5px; color:var(--text-soft); margin-top:var(--space-3); }
@media (max-width:800px){ .category-featured{ grid-template-columns:1fr; } }

/* ---------- search ---------- */
.search-hero{ padding:var(--space-7) 0 var(--space-5); text-align:center; }
.search-box{ max-width:640px; margin:0 auto; position:relative; }
.search-box input{ width:100%; padding:16px 50px 16px 20px; border-radius:999px; border:1.5px solid var(--border-strong); background:var(--bg-elevated); font-size:16px; }
.search-box button{ position:absolute; right:6px; top:6px; bottom:6px; width:44px; border-radius:50%; border:none; background:var(--ink); color:#fff; cursor:pointer; }
.search-chips{ display:flex; gap:8px; justify-content:center; margin-top:var(--space-4); flex-wrap:wrap; }
.search-chips button{ font-size:12.5px; padding:6px 13px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; cursor:pointer; }
.search-meta{ color:var(--text-soft); font-size:13.5px; margin-bottom:var(--space-5); }
.no-results{ text-align:center; padding:var(--space-8) 0; }

/* ---------- author page ---------- */
.author-hero{ display:flex; gap:var(--space-6); align-items:center; padding:var(--space-7) 0; border-bottom:1px solid var(--border); }
.author-hero img{ width:110px; height:110px; border-radius:50%; object-fit:cover; }
.author-hero h1{ font-size:28px; }
.author-hero .role{ color:var(--marigold-deep); font-weight:600; font-size:14px; margin-top:4px; }
[data-theme="dark"] .author-hero .role{ color:var(--marigold); }
.author-hero p.bio{ color:var(--text-soft); margin-top:10px; max-width:60ch; font-size:14.5px; }
.author-stats{ display:flex; gap:var(--space-6); margin-top:var(--space-4); }
.author-stats div{ font-size:13px; color:var(--text-soft); }
.author-stats strong{ display:block; font-family:var(--font-display); font-size:22px; color:var(--text); }

/* ---------- legal / about pages ---------- */
.prose-page{ max-width:760px; margin:0 auto; padding:var(--space-7) var(--space-5); }
.prose-page h1{ font-size:32px; margin-bottom:var(--space-3); }
.prose-page .updated{ color:var(--text-soft); font-size:13px; margin-bottom:var(--space-6); }
.prose-page h2{ font-size:20px; margin:var(--space-7) 0 var(--space-3); scroll-margin-top:90px; }
.prose-page p{ margin-bottom:var(--space-4); color:var(--text); font-size:15.5px; }
.prose-page ul{ list-style:disc; padding-left:22px; margin-bottom:var(--space-4); }
.prose-page li{ margin-bottom:6px; font-size:15.5px; }
.trust-nav{ display:flex; flex-wrap:wrap; gap:8px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--space-4); margin-bottom:var(--space-6); }
.trust-nav a{ font-size:13px; padding:6px 12px; border-radius:999px; background:var(--bg-sunken); }

/* ---------- admin ---------- */
.admin-body{ background:var(--bg-sunken); min-height:100vh; }
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.admin-side{ background:var(--masthead-bg); color:rgba(246,244,239,0.8); padding:var(--space-5); }
.admin-side .brand-mini{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; margin-bottom:var(--space-6); }
.admin-side .brand-mini span{ color:var(--marigold); }
.admin-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-s); font-size:13.5px; font-weight:600; color:rgba(246,244,239,0.75); margin-bottom:2px; }
.admin-nav a.active, .admin-nav a:hover{ background:rgba(246,244,239,0.08); color:#fff; }
.admin-main{ padding:var(--space-6); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-6); }
.admin-topbar h1{ font-size:22px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-6); }
.kpi-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--space-5); box-shadow:var(--shadow); }
.kpi-card .label{ font-size:12.5px; color:var(--text-soft); }
.kpi-card .value{ font-family:var(--font-display); font-size:28px; margin:6px 0; }
.kpi-card .delta{ font-size:12px; color:var(--teal); font-weight:600; }
.admin-panel{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); margin-bottom:var(--space-6); }
.admin-panel .panel-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.admin-panel .panel-head h3{ font-size:15px; }
table.admin-table{ width:100%; border-collapse:collapse; }
table.admin-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-soft); padding:10px var(--space-5); border-bottom:1px solid var(--border); font-weight:600; }
table.admin-table td{ padding:12px var(--space-5); border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
table.admin-table tr:last-child td{ border-bottom:none; }
.status-pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; display:inline-block; }
.status-draft{ background:#E9E4D8; color:#6B6250; }
.status-review{ background:#FDECC8; color:#8A5B0B; }
.status-scheduled{ background:#DCE7F4; color:#2E5C8A; }
.status-published{ background:#DCEDE6; color:#1F6F64; }
.status-updated{ background:#E4E0F7; color:#4B3F8C; }
.status-archived{ background:#EAEAEA; color:#767676; }
.row-actions button{ background:none; border:none; color:var(--teal); font-size:12.5px; font-weight:600; cursor:pointer; margin-right:10px; }
.field{ margin-bottom:var(--space-4); }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:6px; }
.field input, .field textarea, .field select{ width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--bg); }
.checklist-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.checklist-item:last-child{ border-bottom:none; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(12,17,32,0.55); display:none; align-items:center; justify-content:center; z-index:100; padding:var(--space-5); }
.modal-backdrop.open{ display:flex; }
.modal-box{ background:var(--bg-elevated); border-radius:var(--radius-m); max-width:560px; width:100%; max-height:86vh; overflow-y:auto; padding:var(--space-6); }
.modal-box h3{ font-size:18px; margin-bottom:var(--space-4); }

@media (max-width:900px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-side{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4); }
  .admin-nav{ display:none; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   Motion graphics layer — subtle, performance-friendly.
   Everything here is opt-in via classes toggled by main.js,
   uses only transform/opacity (GPU-cheap, no layout shift),
   and is fully neutralised by the prefers-reduced-motion
   block already defined above.
   ========================================================= */

/* scroll-reveal: elements start slightly lower + transparent,
   main.js's IntersectionObserver adds .is-visible when they
   enter the viewport */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* hero load-in (plays once, no scroll trigger needed) */
@keyframes dwFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.hero-feature .content > *{ animation:dwFadeUp .6s ease both; }
.hero-feature .content > *:nth-child(2){ animation-delay:.08s; }
.hero-feature .content > *:nth-child(3){ animation-delay:.16s; }
.hero-feature .content > *:nth-child(4){ animation-delay:.24s; }

/* card image hover zoom — container clips, image scales */
.card{ overflow:hidden; }
.card img{ transition:transform .5s ease; }
.card:hover img{ transform:scale(1.045); }
.hero-feature{ overflow:hidden; }
.hero-feature img{ transition:transform .6s ease; }
.hero-feature:hover img{ transform:scale(1.03); }

/* smoother mobile drawer: always in DOM, slides + fades instead
   of a hard display:none/block swap */
.mobile-drawer{ opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; }
.mobile-drawer.open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.mobile-drawer-panel{ transform:translateX(-100%); transition:transform .3s ease; }
.mobile-drawer.open .mobile-drawer-panel{ transform:translateX(0); }

/* back-to-top button */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--bg-elevated); color:var(--text); box-shadow:0 4px 16px rgba(22,33,62,0.18);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .15s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .25s ease, transform .25s ease; }
.back-to-top:hover{ background:var(--marigold); color:var(--ink); border-color:var(--marigold); }

/* button press feel (kept subtle, on top of existing .btn:active) */
.btn, .icon-btn, .share-btn{ transition:transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease; }

/* category-rail cards: gentle lift on hover, no layout shift (shadow only) */
.card, .panel-card{ transition:box-shadow .25s ease, transform .25s ease; }
.card:hover{ transform:translateY(-3px); }
.panel-card:hover{ box-shadow:0 10px 28px -14px rgba(22,33,62,0.25); }
/* ---------- utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.demo-banner{ background:var(--marigold); color:var(--ink); text-align:center; font-size:12.5px; font-weight:700; padding:8px var(--space-4); }
.demo-banner a{ text-decoration:underline; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--marigold); color:var(--ink); padding:10px 16px; z-index:200; }
.skip-link:focus{ left:var(--space-4); top:var(--space-4); }

.table-wrap{overflow-x:auto;margin:24px 0}.table-wrap table{width:100%;border-collapse:collapse;min-width:560px}.table-wrap th,.table-wrap td{border:1px solid var(--border,#ddd);padding:10px 12px;text-align:left;vertical-align:top}.table-wrap th{font-weight:700;background:var(--bg-sunken,#f5f5f5)}.article-callout{margin:24px 0;padding:16px 18px;border-left:4px solid var(--teal,#0f766e);background:var(--bg-sunken,#f5f5f5);border-radius:6px}#art-body ul,#art-body ol{padding-left:24px;margin:14px 0 22px}#art-body li{margin:7px 0}

.article-inline-img{ margin:var(--space-6) 0; }
.article-inline-img img{ width:100%; border-radius:var(--radius-m); aspect-ratio:16/10; object-fit:cover; }
.article-inline-img figcaption{ font-size:12.5px; color:var(--text-soft); margin-top:8px; }