/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — Aged broadsheet with saffron pulse
   Palette: ivory / ink / saffron / muted-crimson / steel
   Signature: ruled column grid with drop-caps + category tiles
═══════════════════════════════════════════════════ */
:root{
  --ivory:      #F8F4EC;
  --ivory-2:    #EEE8D8;
  --ivory-3:    #E2D9C4;
  --ink:        #1C1812;
  --ink-2:      #3B3425;
  --ink-3:      #6E6248;
  --ink-4:      #A89B7E;
  --saffron:    #C8760A;
  --saffron-2:  #E8941A;
  --crimson:    #8B2020;
  --steel:      #4A5568;
  --rule:       rgba(28,24,18,.18);
  --rule-heavy: rgba(28,24,18,.55);
  --serif:      'Playfair Display', Georgia, serif;
  --body:       'Source Serif 4', Georgia, serif;
  --sans:       'DM Sans', system-ui, sans-serif;
  --mono:       'DM Mono', monospace;
  --col-gap:    20px;
  --trans:      .18s ease;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:16px; }
body{ background:var(--ivory); color:var(--ink); font-family:var(--body); line-height:1.65; min-height:100vh; }

/* ── Loading screen ─────────────────────────────── */
#loading-screen{
  position:fixed; inset:0; background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9000; gap:18px; transition:opacity .4s;
}
.loader-masthead{ font-family:var(--serif); font-size:36px; font-weight:900; color:var(--ink); letter-spacing:.04em; border-bottom:3px double var(--rule-heavy); padding-bottom:10px; }
.loader-sub{ font-family:var(--sans); font-size:12px; color:var(--ink-4); letter-spacing:.15em; text-transform:uppercase; }
.loader-dots span{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--saffron); margin:0 2px; animation:pulse 1s ease-in-out infinite; }
.loader-dots span:nth-child(2){ animation-delay:.2s; }
.loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes pulse{ 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ── Shell ─────────────────────────────────────── */
#shell{ display:flex; flex-direction:column; min-height:100vh; }

/* ── Masthead ─────────────────────────────────── */
#masthead{
  background:var(--ivory);
  border-bottom:1px solid var(--rule-heavy);
  text-align:center;
  padding:0 24px 0;
  position:relative;
}
/* Decorative rule pair above title */
.masthead-rule-top{
  height:6px;
  background:var(--ink);
  margin-bottom:3px;
}
.masthead-rule-thin{ height:1px; background:var(--saffron); margin-bottom:16px; }

.masthead-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--sans); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--rule);
  padding-bottom:8px; margin-bottom:14px;
}
.masthead-date{ display:flex; align-items:center; gap:8px; }
.masthead-edition{ text-align:right; }
.masthead-price{
  font-family:var(--mono); font-size:10px; color:var(--ink-4);
  border:1px solid var(--rule-heavy); padding:1px 6px; letter-spacing:.04em;
}

.masthead-title{
  font-family:var(--serif); font-weight:900; font-size:clamp(46px,6.5vw,84px);
  color:var(--ink); line-height:1; letter-spacing:-.02em;
  margin-bottom:5px;
}
.masthead-title em{ color:var(--saffron); font-style:normal; }
.masthead-tagline{
  font-family:var(--sans); font-size:11px; color:var(--ink-3);
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:0;
}
/* Ruled separator below tagline */
.masthead-rule-bottom{
  display:flex; align-items:center; gap:0; margin:12px 0 0;
}
.masthead-rule-bottom span{ flex:1; height:3px; background:var(--ink); }
.masthead-rule-bottom em{ width:18px; height:3px; background:var(--saffron); }
.masthead-rule-bottom i{ flex:1; height:1px; background:var(--ink); margin-top:1px; }
/* Second thin rule */
.masthead-double{ border-bottom:1px solid var(--rule); margin-bottom:0; padding-bottom:1px; }

/* ── Section nav bar ──────────────────────────── */
#section-nav{
  background:var(--ink);
  display:flex; align-items:center;
  overflow-x:auto; scrollbar-width:none;
  flex-shrink:0;
}
#section-nav::-webkit-scrollbar{ display:none; }
.snav-btn{
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  color:rgba(248,244,236,.65); letter-spacing:.1em; text-transform:uppercase;
  padding:9px 18px; border:none; background:none; cursor:pointer;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:2px solid transparent;
  white-space:nowrap; display:flex; align-items:center; gap:6px;
  transition:color var(--trans), background var(--trans), border-color var(--trans);
}
.snav-btn:hover{ color:var(--ivory); background:rgba(255,255,255,.08); }
.snav-btn.active{ color:var(--saffron-2); border-bottom-color:var(--saffron); }

/* Right-aligned nav group */
.nav-right-group{ margin-left:auto; display:flex; align-items:center; flex-shrink:0; }
.translate-wrap{
  display:flex; align-items:center; gap:10px;
  padding:0 16px; height:100%;
  border-left:1px solid rgba(255,255,255,.1); flex-shrink:0;
}
.translate-label{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgb(248 244 236); white-space:nowrap; }
#google_translate_element{ display:flex; align-items:center; min-height:28px; }
.goog-te-gadget-simple{ background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.18)!important; padding:5px 12px!important; border-radius:3px!important; font-family:var(--sans)!important; font-size:10.5px!important; letter-spacing:.06em; cursor:pointer; box-shadow:none!important; display:inline-flex; align-items:center; transition:background var(--trans), border-color var(--trans); }
.goog-te-gadget-simple:hover{ background:rgba(255,255,255,.14)!important; border-color:var(--saffron)!important; }
.goog-te-gadget-simple .goog-te-menu-value,.goog-te-gadget-simple .goog-te-menu-value span,.goog-te-gadget-simple span{ color:var(--ivory)!important; }
.goog-te-gadget-icon{ display:none!important; }
.goog-te-banner-frame{ display:none!important; }
.skiptranslate iframe{ display:none; }
#search-bar-wrap{ display:flex; align-items:center; padding:0 12px; height:100%; border-left:1px solid rgba(255,255,255,.1); }
#search-bar{ background:rgba(255,255,255,.1); border:none; outline:none; color:var(--ivory); font-family:var(--sans); font-size:11px; padding:5px 10px; border-radius:2px; width:160px; transition:background var(--trans); }
#search-bar:focus{ background:rgba(255,255,255,.18); }
#search-bar::placeholder{ color:rgba(248,244,236,.4); }

/* ── Main layout ────────────────────────────────── */
#content{ flex:1; max-width:1340px; margin:0 auto; padding:28px 20px 48px; width:100%; }

/* ═══════════════════════════════════════════════════
   CATEGORY TILES — replaces drawer dynamic indexer
═══════════════════════════════════════════════════ */
.cat-tiles-section{
  margin-bottom:28px;
}
.cat-tiles-header{
  display:flex; align-items:baseline; gap:14px;
  border-top:3px solid var(--ink);
  padding-top:10px; margin-bottom:16px;
}
.cat-tiles-header h2{ font-family:var(--serif); font-size:20px; font-weight:700; font-style:italic; color:var(--ink); }
.cat-tiles-rule{ flex:1; height:1px; background:var(--rule); }
.cat-tiles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.cat-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px 10px 14px;
  background:var(--ivory-2);
  border:1px solid var(--ivory-3);
  border-top:3px solid var(--rule-heavy);
  cursor:pointer;
  text-align:center;
  transition:background var(--trans), border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  border-radius:2px;
  position:relative; overflow:hidden;
}
.cat-tile::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--saffron); opacity:0; transition:opacity var(--trans);
}
.cat-tile:hover::before{ opacity:1; }
.cat-tile:hover{
  background:#fff;
  border-color:var(--ivory-3);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(28,24,18,.1);
}
.cat-tile.active{
  background:var(--ink);
  border-color:var(--ink);
}
.cat-tile.active::before{ opacity:1; }
.cat-tile.active .cat-tile-icon,
.cat-tile.active .cat-tile-label{ color:var(--ivory); }
.cat-tile.active .cat-tile-count{ background:rgba(248,244,236,.12); color:rgba(248,244,236,.65); border-color:rgba(248,244,236,.2); }
.cat-tile-icon{ font-size:26px; line-height:1; }
.cat-tile-label{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.04em; color:var(--ink); text-transform:capitalize; line-height:1.2; }
.cat-tile-count{ font-family:var(--mono); font-size:10px; color:var(--ink-4); background:var(--ivory); border:1px solid var(--ivory-3); border-radius:20px; padding:2px 8px; margin-top:2px; }

/* ── FRONT PAGE ─────────────────────────────────── */
.front-hero{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:var(--col-gap);
  border-bottom:1px solid var(--rule);
  padding-bottom:24px; margin-bottom:24px;
}
/* Broadsheet vertical rule between hero columns */
.front-hero > .front-hero-text{ border-right:1px solid var(--rule); padding-right:22px; }
.front-hero > .front-hero-img{ padding-left:4px; }

.hero-kicker{
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--saffron);
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.hero-kicker::after{ content:''; flex:1; height:1px; background:var(--saffron); opacity:.4; }
.hero-headline{
  font-family:var(--serif); font-size:clamp(28px,3.5vw,50px); font-weight:700;
  font-style:italic; line-height:1.08; color:var(--ink); margin-bottom:12px;
}
.hero-deck{
  font-family:var(--body); font-size:15.5px; color:var(--ink-2);
  line-height:1.6; margin-bottom:14px;
  border-left:3px solid var(--saffron); padding-left:14px;
}
.hero-byline{
  font-family:var(--sans); font-size:10.5px; color:var(--ink-4);
  letter-spacing:.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:5px 0;
}
.hero-byline span{ color:var(--ink-3); }
.hero-body{
  font-family:var(--body); font-size:15px; color:var(--ink-2);
  line-height:1.78; column-count:2; column-gap:22px;
  column-rule:1px solid var(--rule);
  overflow:hidden; cursor:pointer;
}
.hero-body p{ margin-bottom:12px; text-align:justify; hyphens:auto; }
.hero-body p:first-child::first-letter{
  font-family:var(--serif); font-size:4.2em; font-weight:900;
  float:left; line-height:.82; margin-right:6px; margin-top:4px;
  color:var(--saffron);
}

/* ── Image styles ─────────────────────────────── */
.front-hero-img{ position:relative; }
.article-img{ width:100%; height:280px; object-fit:cover; filter:sepia(.15) contrast(1.05); display:block; border:1px solid var(--ivory-3); }
.img-placeholder{ width:100%; height:280px; background:var(--ivory-2); display:flex; align-items:center; justify-content:center; border:1px solid var(--ivory-3); color:var(--ink-4); font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.img-caption{ font-family:var(--sans); font-size:10px; color:var(--ink-4); margin-top:6px; line-height:1.4; padding-top:5px; border-top:1px solid var(--rule); font-style:italic; }

/* ── Article card grid ──────────────────────────── */
.col-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  border-top:1px solid var(--rule);
  padding-top:14px;
}
.article-card{
  margin:0; background:transparent;
  border:1px solid rgba(46,32,24,.2);
  border-radius:3px; padding:16px;
  cursor:pointer; display:flex; flex-direction:column; gap:9px;
  transition:border-color var(--trans), box-shadow var(--trans), transform var(--trans), background var(--trans);
  position:relative; overflow:hidden;
}
/* Column-rule style top accent */
.article-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--saffron); opacity:0; transition:opacity var(--trans);
}
.article-card:hover::after{ opacity:1; }
.article-card:hover{
  border-color:rgba(200,118,10,.5);
  background:rgba(200,118,10,.028);
  box-shadow:0 4px 18px rgba(28,24,18,.09), 0 1px 4px rgba(28,24,18,.05);
  transform:translateY(-2px);
}
.card-kicker{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--saffron); }
.card-headline{ font-family:var(--serif); font-size:17px; font-weight:700; line-height:1.25; color:var(--ink); }
.card-deck{ font-family:var(--body); font-size:12.5px; color:var(--ink-3); line-height:1.55; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:9.5px; color:var(--ink-4); letter-spacing:.05em; margin-top:auto; }
.card-img{ width:100%; height:140px; object-fit:cover; filter:sepia(.1) contrast(1.04); display:block; border:1px solid var(--ivory-3); }
.card-img-placeholder{ width:100%; height:100px; background:var(--ivory-2); display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-family:var(--sans); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--ivory-3); }

/* ── ARTICLE DETAIL ─────────────────────────────── */
#detail-section{ display:none; }
.detail-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11px; color:var(--saffron);
  cursor:pointer; margin-bottom:20px; letter-spacing:.05em; text-transform:uppercase;
  border:none; background:none; transition:gap var(--trans);
}
.detail-back:hover{ gap:8px; }
.detail-back::before{ content:'←'; }
.detail-wrap{ display:grid; grid-template-columns:1fr 300px; gap:32px; }
.detail-kicker{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--saffron); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.detail-kicker::after{ content:''; flex:1; height:1px; background:var(--saffron); opacity:.35; }
.detail-headline{ font-family:var(--serif); font-size:clamp(26px,3vw,44px); font-weight:700; font-style:italic; line-height:1.08; color:var(--ink); margin-bottom:14px; }
.detail-deck{ font-family:var(--body); font-size:15px; color:var(--ink-2); border-left:3px solid var(--saffron); padding-left:14px; margin-bottom:16px; line-height:1.6; font-style:italic; }
.detail-byline-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--sans); font-size:10px; color:var(--ink-4);
  letter-spacing:.08em; text-transform:uppercase;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:8px 0; margin-bottom:20px;
}
.detail-share{ display:flex; gap:6px; margin-left:auto; }
.share-pill{ font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border:1px solid var(--rule-heavy); background:none; color:var(--ink-3); cursor:pointer; border-radius:2px; transition:background var(--trans), color var(--trans), border-color var(--trans); }
.share-pill:hover{ background:var(--ink); color:var(--ivory); }
.share-pill.primary{ background:var(--saffron); color:#fff; border-color:var(--saffron); }
.share-pill.primary:hover{ background:var(--crimson); border-color:var(--crimson); }
.detail-body{ font-family:var(--body); font-size:15.5px; color:var(--ink-2); line-height:1.82; column-count:2; column-gap:24px; column-rule:1px solid var(--rule); overflow:hidden; }
.detail-body p{ margin-bottom:14px; text-align:justify; hyphens:auto; }
.detail-body p:first-child::first-letter{ font-family:var(--serif); font-size:4.5em; font-weight:900; float:left; line-height:.8; margin-right:7px; margin-top:5px; color:var(--saffron); }

/* ── Subheadings & inline figures ───────────────── */
.hero-body .article-subhead,
.detail-body .article-subhead{
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:18px; color:var(--ink);
  column-span:all; clear:both;
  margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--rule);
  break-after:avoid;
}
.detail-body .article-subhead{ font-size:21px; margin:24px 0 10px; }
.inline-figure{ margin:4px 0 16px; max-width:280px; break-inside:avoid; }
.inline-figure:nth-of-type(odd){ float:right; margin-left:22px; margin-right:0; }
.inline-figure:nth-of-type(even){ float:left; margin-right:22px; margin-left:0; }
.inline-figure-img{ width:100%; max-width:280px; height:auto; object-fit:cover; display:block; filter:sepia(.08) contrast(1.03); border:1px solid var(--ivory-3); padding:4px; background:var(--ivory); box-sizing:border-box; }
.inline-figure figcaption{ font-family:var(--sans); font-size:10px; color:var(--ink-4); margin-top:6px; padding:0 4px; line-height:1.4; font-style:italic; text-align:center; border-top:1px solid var(--rule); padding-top:4px; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar-gallery{ margin-bottom:18px; }
.sidebar-img-wrap{ margin-bottom:16px; }
.sidebar-img{ width:100%; max-height:220px; display:block; object-fit:cover; filter:sepia(.12) contrast(1.05); border:1px solid var(--ivory-3); padding:4px; background:var(--ivory); box-sizing:border-box; }
.sidebar-caption{ font-family:var(--sans); font-size:9.5px; color:var(--ink-4); margin-top:5px; line-height:1.4; font-style:italic; border-top:1px solid var(--rule); padding-top:4px; }
.sidebar-meta-box{ background:var(--ivory-2); border:1px solid var(--ivory-3); padding:14px; margin-bottom:14px; }
.smb-label{ font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-4); margin-bottom:3px; }
.smb-val{ font-family:var(--mono); font-size:11px; color:var(--ink-2); word-break:break-all; }
.smb-rule{ height:1px; background:var(--rule); margin:10px 0; }
.srel-head{ font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:12px; }
.srel-item{ padding:9px 0; border-bottom:1px solid var(--rule); cursor:pointer; transition:color var(--trans); }
.srel-item:hover .srel-title{ color:var(--saffron); }
.srel-label{ font-family:var(--sans); font-size:9px; color:var(--saffron); letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px; }
.srel-title{ font-family:var(--serif); font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; }

/* ── Section header ─────────────────────────────── */
.section-header{ display:flex; align-items:baseline; gap:14px; border-top:3px solid var(--ink); padding-top:10px; margin-bottom:18px; }
.section-header h2{ font-family:var(--serif); font-size:22px; font-weight:700; font-style:italic; color:var(--ink); }
.section-header-rule{ flex:1; height:1px; background:var(--rule); }
.section-header-count{ font-family:var(--sans); font-size:10px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; }

/* Category badge in section header */
.section-cat-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--ivory);
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px 3px 8px; margin-left:4px;
}
.section-cat-badge .badge-icon{ font-size:14px; }

/* ── Load more ──────────────────────────────────── */
.load-more-row{ text-align:center; padding:24px 0; border-top:1px solid var(--rule); margin-top:8px; }
.load-more-btn{ font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; padding:9px 28px; border:1.5px solid var(--ink); background:none; color:var(--ink); cursor:pointer; transition:background var(--trans), color var(--trans); }
.load-more-btn:hover{ background:var(--ink); color:var(--ivory); }
.load-more-btn:disabled{ opacity:.4; cursor:default; }

/* ── Empty/loading state ────────────────────────── */
.empty-state{ text-align:center; padding:60px 20px; font-family:var(--sans); font-size:12px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; border:1px dashed var(--rule); grid-column:1/-1; }
.inline-loader{ display:flex; align-items:center; justify-content:center; gap:12px; padding:40px; font-family:var(--sans); font-size:11px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; }

/* ── Footer ─────────────────────────────────────── */
#footer{
  background:var(--ink); color:rgba(248,244,236,.55);
  text-align:center; padding:20px;
  font-family:var(--sans); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
#footer a{ color:var(--saffron); text-decoration:none; }
#footer a:hover{ text-decoration:underline; }

/* ── Toast ──────────────────────────────────────── */
#toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--ink); color:var(--ivory); padding:10px 20px; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:0; pointer-events:none; transition:all .25s; z-index:8000; border-radius:2px; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ── Category off-canvas drawer (legacy, kept for compat) ── */
.category-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(28,24,18,.45); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.category-overlay.open{ opacity:1; visibility:visible; }
.category-drawer{ position:fixed; top:0; left:0; height:100%; z-index:1001; width:340px; max-width:88vw; background:var(--ivory); border-right:3px double var(--ink); box-shadow:8px 0 30px rgba(28,24,18,.18); transform:translateX(-100%); transition:transform .35s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; }
.category-drawer.open{ transform:translateX(0); }
body.drawer-open{ overflow:hidden; }
.cat-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px 16px; border-bottom:1px solid var(--ivory-3); }
.cat-drawer-title{ font-family:var(--serif); font-weight:900; font-size:24px; letter-spacing:.02em; }
.cat-drawer-close{ background:none; border:1px solid var(--ivory-3); cursor:pointer; width:32px; height:32px; border-radius:50%; font-size:14px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:background var(--trans), color var(--trans), border-color var(--trans); }
.cat-drawer-close:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.category-list{ flex:1; overflow-y:auto; padding:14px 16px 32px; display:flex; flex-direction:column; gap:8px; }
.category-list::-webkit-scrollbar{ width:6px; }
.category-list::-webkit-scrollbar-thumb{ background:var(--ivory-3); border-radius:3px; }
.cat-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:var(--ivory-2); border:1px solid var(--ivory-3); border-left:3px solid transparent; padding:13px 16px; cursor:pointer; font-family:var(--sans); border-radius:2px; transition:background var(--trans), border-color var(--trans), transform var(--trans); }
.cat-item:hover{ background:#fff; border-left-color:var(--saffron); transform:translateX(3px); }
.cat-item.active{ background:var(--ink); border-color:var(--ink); border-left-color:var(--saffron); }
.cat-item.active .cat-item-name,.cat-item.active .cat-item-count{ color:var(--ivory); }
.cat-item-name{ font-size:14.5px; font-weight:500; letter-spacing:.01em; color:var(--ink); text-transform:capitalize; }
.cat-item-count{ font-family:var(--sans); font-size:11px; letter-spacing:.05em; color:var(--ink-3); background:var(--ivory); border:1px solid var(--ivory-3); border-radius:20px; padding:2px 10px; min-width:30px; text-align:center; flex-shrink:0; }
.cat-item.active .cat-item-count{ background:rgba(248,244,236,.12); border-color:rgba(248,244,236,.25); }
.cat-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:60px 0; color:var(--ink-3); }
.cat-loading-msg{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ── Responsive ─────────────────────────────────── */
@media(max-width:900px){
  .front-hero{ grid-template-columns:1fr; }
  .front-hero > .front-hero-text{ border-right:none; padding-right:0; }
  .front-hero-img{ order:-1; }
  .article-img,.img-placeholder{ height:200px; }
  .hero-body{ column-count:1; }
  .detail-wrap{ grid-template-columns:1fr; }
  .detail-body{ column-count:1; }
  .detail-sidebar{ order:-1; }
  .translate-label{ display:none; }
  .cat-tiles-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
}
@media(max-width:760px){
  .inline-figure,.inline-figure:nth-of-type(odd),.inline-figure:nth-of-type(even){ float:none; width:100%; max-width:100%; margin:0 0 16px; }
  .inline-figure-img{ max-width:100%; }
}
@media(max-width:600px){
  .col-grid{ grid-template-columns:1fr; }
  .masthead-title{ font-size:38px; }
  .masthead-top{ flex-wrap:wrap; gap:6px; }
  .category-drawer{ width:86vw; }
  #search-bar{ width:120px; }
  .cat-tiles-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }
.detail-main {
    max-width: 100ch;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
    display: none;
}
.smb-val {
    display: none;
}

body {
	background: transparent !important;
	top: 0px !important;
}