/*
Theme Name: NewsPress
Theme URI: https://example.com/newspress
Author: NewsPress Theme
Description: Advanced lightweight WordPress news theme — mobile responsive, SEO-optimised, structured data, editorial design.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newspress
Tags: news, magazine, blog, responsive, seo, custom-logo, featured-images
*/

/* ============================================================
   1. CSS TOKENS
   ============================================================ */
:root {
  --red:       #D0021B;
  --red-dark:  #A50116;
  --red-soft:  rgba(208,2,27,.08);
  --ink:       #0A0A0A;
  --ink-2:     #1A1A1A;
  --ink-3:     #3D3D3D;
  --ink-4:     #717171;
  --border:    #E2E2E2;
  --surface:   #F5F5F5;
  --white:     #FFFFFF;
  --gold:      #E8A020;

  --f-display: 'Playfair Display', Georgia, serif;
  --f-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --f-body:    'Lora', Georgia, serif;
  --f-mono:    'JetBrains Mono', monospace;

  --s-2xs:.625rem; --s-xs:.75rem;  --s-sm:.875rem;
  --s-md:1rem;     --s-lg:1.125rem;--s-xl:1.25rem;
  --s-2xl:1.5rem;  --s-3xl:1.875rem; --s-4xl:2.25rem;
  --s-5xl:3rem;    --s-6xl:3.75rem;

  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;
  --sp-4:1rem;    --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem;    --sp-10:2.5rem; --sp-12:3rem;
  --sp-16:4rem;   --sp-20:5rem;

  --max-site:    1320px;
  --max-article: 720px;
  --gutter:      clamp(1rem, 3vw, 1.5rem);

  --sh-1: 0 1px 4px rgba(0,0,0,.07);
  --sh-2: 0 4px 16px rgba(0,0,0,.09);
  --sh-3: 0 12px 40px rgba(0,0,0,.13);

  --ease: cubic-bezier(.25,.46,.45,.94);
  --dur:  200ms;
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:20px;
}

/* ============================================================
   2. RESET — ZERO UNDERLINES EVERYWHERE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family:var(--f-body); font-size:var(--s-md);
  line-height:1.75; color:var(--ink-3); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ──── NO UNDERLINES ON ANY LINK ──── */
a, a:link, a:visited, a:hover, a:focus, a:active {
  text-decoration: none !important;
  color: inherit;
}

img,video,svg { display:block; max-width:100%; height:auto; }
ul,ol         { list-style:none; }
button        { cursor:pointer; border:none; background:none; font:inherit; }
input,select,textarea { font:inherit; }
table         { border-collapse:collapse; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--f-display); line-height:1.15;
  font-weight:700; color:var(--ink); letter-spacing:-.02em;
}
h1 { font-size:clamp(var(--s-3xl),4.5vw,var(--s-6xl)); }
h2 { font-size:clamp(var(--s-2xl),3.5vw,var(--s-5xl)); }
h3 { font-size:clamp(var(--s-xl),2.5vw,var(--s-3xl)); }
h4 { font-size:var(--s-xl); } h5 { font-size:var(--s-lg); } h6 { font-size:var(--s-md); }
p  { margin-bottom:1.5rem; } p:last-child { margin-bottom:0; }
strong { font-weight:700; } em { font-style:italic; }

/* ============================================================
   4. UTILITIES
   ============================================================ */
.container { width:100%; max-width:var(--max-site); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link {
  position:absolute; top:-100%; left:var(--sp-4);
  background:var(--red); color:var(--white);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm);
  font-family:var(--f-sans); font-size:var(--s-sm);
  font-weight:700; z-index:9999; transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:var(--sp-4); }

/* Label */
.label {
  display:inline-block; font-family:var(--f-sans); font-size:var(--s-2xs);
  font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .75rem; border-radius:var(--r-sm);
  background:var(--red); color:var(--white); line-height:1;
}

/* ============================================================
   5. BREAKING BAR
   ============================================================ */
.breaking-bar {
  background:var(--red); color:var(--white);
  height:34px; display:flex; align-items:center; overflow:hidden;
}
.breaking-bar__badge {
  background:var(--ink); height:100%; padding:0 var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0;
  font-family:var(--f-sans); font-size:var(--s-2xs); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.breaking-bar__badge::after {
  content:''; display:block; width:6px; height:6px;
  background:var(--red); border-radius:50%;
  animation:blink 1.2s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.breaking-bar__scroll { flex:1; overflow:hidden; }
.breaking-bar__track {
  display:flex; gap:var(--sp-12); white-space:nowrap;
  animation:marquee 35s linear infinite; padding-left:100%;
}
.breaking-bar__track:hover { animation-play-state:paused; }
.breaking-bar__track a {
  font-family:var(--f-sans); font-size:var(--s-xs); font-weight:600;
  color:rgba(255,255,255,.9); transition:color var(--dur);
}
.breaking-bar__track a:hover { color:var(--white); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:500;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); box-shadow:var(--sh-1);
}
.header-wrap {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--sp-6); height:68px;
}

/* Brand */
.site-brand { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.site-brand img { height:40px; width:auto; }
.brand-name {
  font-family:var(--f-display); font-size:var(--s-2xl); font-weight:900;
  color:var(--ink); letter-spacing:-.04em; line-height:1; white-space:nowrap;
}
.brand-name em { font-style:normal; color:var(--red); }
.brand-tagline {
  font-family:var(--f-sans); font-size:var(--s-2xs);
  color:var(--ink-4); letter-spacing:.1em;
  text-transform:uppercase; display:block; margin-top:2px;
}

/* Desktop Nav */
.desktop-nav { display:flex; align-items:center; justify-content:center; height:100%; }
.desktop-nav > ul { display:flex; align-items:stretch; height:100%; gap:0; }
.desktop-nav > ul > li { position:relative; display:flex; align-items:center; }
.desktop-nav > ul > li > a {
  font-family:var(--f-sans); font-size:var(--s-sm); font-weight:600;
  color:var(--ink-3); padding:0 var(--sp-4); height:100%;
  display:flex; align-items:center; white-space:nowrap;
  position:relative; transition:color var(--dur);
}
.desktop-nav > ul > li > a::after {
  content:''; position:absolute; bottom:0;
  left:var(--sp-4); right:var(--sp-4); height:2px;
  background:var(--red); transform:scaleX(0);
  transition:transform var(--dur) var(--ease);
}
.desktop-nav > ul > li:hover > a,
.desktop-nav > ul > li.current-menu-item > a { color:var(--red); }
.desktop-nav > ul > li:hover > a::after,
.desktop-nav > ul > li.current-menu-item > a::after { transform:scaleX(1); }

/* Dropdown */
.desktop-nav .sub-menu {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--white); min-width:210px;
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  border:1px solid var(--border);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur),transform var(--dur) var(--ease);
  z-index:200; overflow:hidden;
}
.desktop-nav li:hover .sub-menu,
.desktop-nav li:focus-within .sub-menu {
  opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0);
}
.desktop-nav .sub-menu a {
  display:block; font-family:var(--f-sans); font-size:var(--s-sm);
  font-weight:500; color:var(--ink-3); padding:var(--sp-3) var(--sp-5);
  transition:background var(--dur),color var(--dur);
}
.desktop-nav .sub-menu a:hover { background:var(--surface); color:var(--red); }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.icon-btn {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); color:var(--ink-3);
  transition:background var(--dur),color var(--dur);
}
.icon-btn:hover { background:var(--surface); color:var(--red); }
.icon-btn svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-sub {
  font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  background:var(--red); color:var(--white) !important;
  padding:.55rem var(--sp-5); border-radius:var(--r-sm);
  transition:background var(--dur); white-space:nowrap;
}
.btn-sub:hover { background:var(--red-dark); }
.hamburger {
  display:none; width:40px; height:40px;
  align-items:center; justify-content:center;
  border-radius:var(--r-md); color:var(--ink-3); transition:background var(--dur);
}
.hamburger:hover { background:var(--surface); }
.hamburger svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

/* ============================================================
   7. TOPIC STRIP
   ============================================================ */
.topic-strip {
  background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.topic-strip::-webkit-scrollbar { display:none; }
.topic-strip ul { display:flex; width:max-content; min-width:100%; }
.topic-strip li a {
  display:block; font-family:var(--f-sans); font-size:var(--s-xs);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); padding:var(--sp-3) var(--sp-4);
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color var(--dur),border-color var(--dur);
}
.topic-strip li a:hover,
.topic-strip li.current-menu-item a { color:var(--red); border-bottom-color:var(--red); }

/* ============================================================
   8. SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,10,10,.96);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(80px,15vh,140px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.search-overlay.is-open { opacity:1; pointer-events:all; }
.search-inner { width:100%; max-width:700px; padding-inline:var(--gutter); }
.search-inner form { position:relative; border-bottom:2px solid rgba(255,255,255,.25); transition:border-color var(--dur); }
.search-inner form:focus-within { border-color:var(--red); }
.search-inner input[type="search"] {
  width:100%; background:transparent; border:none; outline:none;
  font-family:var(--f-display); font-size:clamp(1.8rem,5vw,3.2rem);
  font-weight:700; color:var(--white); padding:var(--sp-3) 3.5rem var(--sp-3) 0;
  caret-color:var(--red);
}
.search-inner input::placeholder { color:rgba(255,255,255,.25); }
.search-close {
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  font-size:2rem; line-height:1; color:rgba(255,255,255,.4);
  transition:color var(--dur); background:none; border:none; cursor:pointer;
}
.search-close:hover { color:var(--white); }

/* ============================================================
   9. MOBILE DRAWER
   ============================================================ */
.mobile-drawer { position:fixed; inset:0; z-index:9000; pointer-events:none; }
.mobile-drawer__bg {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .3s;
}
.mobile-drawer__panel {
  position:absolute; top:0; right:0;
  width:300px; max-width:88vw; height:100%;
  background:var(--white); transform:translateX(100%);
  transition:transform .3s var(--ease);
  overflow-y:auto; display:flex; flex-direction:column; box-shadow:var(--sh-3);
}
.mobile-drawer.open { pointer-events:all; }
.mobile-drawer.open .mobile-drawer__bg    { opacity:1; }
.mobile-drawer.open .mobile-drawer__panel { transform:translateX(0); }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border);
}
.drawer-close { font-size:1.75rem; color:var(--ink-4); line-height:1; background:none; border:none; cursor:pointer; }
.drawer-body { flex:1; padding:var(--sp-4) 0; }
.drawer-body a {
  display:flex; align-items:center;
  font-family:var(--f-sans); font-size:var(--s-md); font-weight:600;
  color:var(--ink-2); padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);
  transition:color var(--dur),background var(--dur);
}
.drawer-body a:hover { color:var(--red); background:var(--red-soft); }
.drawer-footer { padding:var(--sp-5); border-top:1px solid var(--border); }
.drawer-footer .btn-sub { display:block; text-align:center; padding:var(--sp-3); }

/* ============================================================
   10. HERO
   ============================================================ */
.hero { padding:var(--sp-8) 0; }
.hero-layout { display:grid; grid-template-columns:1fr 340px; grid-template-rows:1fr 1fr; gap:var(--sp-4); height:560px; }
.hero-primary { grid-row:1/3; position:relative; border-radius:var(--r-xl); overflow:hidden; }
.hero-primary img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.hero-primary:hover img { transform:scale(1.04); }
.hero-primary__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 45%,transparent 75%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sp-8); color:var(--white);
}
.hero-primary__cat { margin-bottom:var(--sp-3); }
.hero-primary__title { font-size:clamp(var(--s-xl),2.8vw,var(--s-4xl)); color:var(--white); line-height:1.2; margin-bottom:var(--sp-3); }
.hero-primary__meta { font-family:var(--f-sans); font-size:var(--s-xs); color:rgba(255,255,255,.65); display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.hero-tile { position:relative; border-radius:var(--r-lg); overflow:hidden; }
.hero-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.hero-tile:hover img { transform:scale(1.06); }
.hero-tile__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);
  padding:var(--sp-4); display:flex; flex-direction:column; justify-content:flex-end; color:var(--white);
}
.hero-tile__cat { margin-bottom:var(--sp-2); }
.hero-tile__title { font-size:var(--s-md); color:var(--white); line-height:1.3; }

/* ============================================================
   11. SECTION HEADER
   ============================================================ */
.section-hd { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.section-hd::after { content:''; flex:1; height:1px; background:var(--border); }
.section-hd h2,.section-hd h3 {
  font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; display:flex; align-items:center; gap:var(--sp-2);
}
.section-hd h2::before,.section-hd h3::before {
  content:''; display:block; width:3px; height:16px;
  background:var(--red); border-radius:2px;
}
.section-hd a {
  font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700;
  color:var(--red); text-transform:uppercase; letter-spacing:.07em;
  white-space:nowrap; flex-shrink:0; transition:opacity var(--dur);
}
.section-hd a:hover { opacity:.7; }

/* ============================================================
   12. CARD GRID
   ============================================================ */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.card-grid--4 { grid-template-columns:repeat(4,1fr); }
.post-card {
  display:flex; flex-direction:column; background:var(--white);
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
}
.post-card:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
.post-card__img { aspect-ratio:16/9; overflow:hidden; flex-shrink:0; }
.post-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card__img img { transform:scale(1.06); }
.post-card__body { padding:var(--sp-5); flex:1; display:flex; flex-direction:column; }
.post-card__cat { margin-bottom:var(--sp-2); }
.post-card__title {
  font-size:var(--s-lg); line-height:1.3; color:var(--ink);
  margin-bottom:var(--sp-3); display:block; transition:color var(--dur);
}
.post-card:hover .post-card__title { color:var(--red); }
.post-card__excerpt {
  font-size:var(--s-sm); color:var(--ink-4); line-height:1.65; flex:1;
  margin-bottom:var(--sp-4);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__foot {
  display:flex; align-items:center; gap:var(--sp-3);
  padding-top:var(--sp-4); border-top:1px solid var(--border);
}
.post-card__avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.post-card__meta { flex:1; font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); line-height:1.3; }
.post-card__meta strong { display:block; color:var(--ink-3); font-weight:600; }
.post-card__time { font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); white-space:nowrap; }

/* List item (sidebar / compact) */
.list-item { display:grid; grid-template-columns:1fr 100px; gap:var(--sp-4); align-items:start; padding-bottom:var(--sp-5); border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); }
.list-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.list-item__cat { margin-bottom:var(--sp-1); }
.list-item__title { font-size:var(--s-sm); font-weight:700; color:var(--ink); line-height:1.35; margin-bottom:var(--sp-1); display:block; transition:color var(--dur); }
.list-item__title:hover { color:var(--red); }
.list-item__meta { font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); }
.list-item__img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm); }

/* ============================================================
   13. SINGLE POST — DEDICATED FULL-WIDTH LAYOUT
       No sidebar, no grid. Article centred on page.
   ============================================================ */
.single-wrap { padding:var(--sp-10) 0 var(--sp-16); }

/* Narrow column: text, meta, etc. */
.art-col { max-width:var(--max-article); margin-inline:auto; padding-inline:var(--gutter); }

/* Wider column: feature image, video embeds */
.art-wide { max-width:960px; margin-inline:auto; padding-inline:var(--gutter); }

/* Breadcrumb */
.breadcrumb {
  font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4);
}
.breadcrumb a { color:var(--ink-4); transition:color var(--dur); }
.breadcrumb a:hover { color:var(--red); }
.breadcrumb__sep { color:var(--border); }

/* Article header */
.art-hd { margin-bottom:var(--sp-6); }
.art-hd__cat { margin-bottom:var(--sp-4); }
.art-hd__title {
  font-size:clamp(var(--s-3xl),4.5vw,3rem); line-height:1.15;
  letter-spacing:-.03em; color:var(--ink); margin-bottom:var(--sp-5);
}
.art-hd__dek {
  font-family:var(--f-body); font-size:clamp(var(--s-lg),2vw,var(--s-xl));
  color:var(--ink-4); font-weight:400; line-height:1.55; margin-bottom:var(--sp-6);
}

/* Byline */
.byline {
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-5) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.byline__author { display:flex; align-items:center; gap:var(--sp-3); flex:1; min-width:180px; }
.byline__avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--border); flex-shrink:0; }
.byline__name { font-family:var(--f-sans); font-size:var(--s-sm); font-weight:700; color:var(--ink); display:block; transition:color var(--dur); }
.byline__name:hover { color:var(--red); }
.byline__info { font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); }
.byline__share { display:flex; gap:var(--sp-2); align-items:center; }
.share-ico {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-3);
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.share-ico svg { width:14px; height:14px; fill:currentColor; }
.share-ico:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }

/* Featured image */
.art-hero-img { margin:var(--sp-8) 0; border-radius:var(--r-xl); overflow:hidden; }
.art-hero-img img { width:100%; max-height:540px; object-fit:cover; }
.art-hero-img figcaption { font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); padding:var(--sp-3) 0; font-style:italic; border-bottom:1px solid var(--border); }

/* Body copy */
.art-body {
  font-family:var(--f-body); font-size:clamp(var(--s-md),1.1vw,var(--s-lg));
  line-height:1.9; color:var(--ink-3);
}
.art-body > * + * { margin-top:1.5rem; }
.art-body p { margin:0; }
.art-body h2 { font-size:clamp(var(--s-2xl),3vw,var(--s-3xl)); margin-top:2.5rem; margin-bottom:.75rem; }
.art-body h3 { font-size:clamp(var(--s-xl),2vw,var(--s-2xl)); margin-top:2rem; margin-bottom:.5rem; }
.art-body h4 { font-size:var(--s-xl); margin-top:1.5rem; margin-bottom:.5rem; }
.art-body a {
  color:var(--red); border-bottom:1px solid rgba(208,2,27,.3);
  transition:border-color var(--dur),color var(--dur);
}
.art-body a:hover { color:var(--red-dark); border-bottom-color:var(--red); }
.art-body ul,.art-body ol { padding-left:1.5rem; }
.art-body ul { list-style:disc; } .art-body ol { list-style:decimal; }
.art-body li { margin-bottom:.4rem; }
.art-body blockquote {
  margin:2rem 0; padding:var(--sp-6) var(--sp-8);
  background:var(--surface); border-left:4px solid var(--red);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(var(--s-xl),2vw,var(--s-2xl)); color:var(--ink); line-height:1.5;
}
.art-body blockquote cite { display:block; margin-top:var(--sp-3); font-style:normal; font-family:var(--f-sans); font-size:var(--s-sm); color:var(--ink-4); }
.art-body pre { background:var(--ink); color:#e5e7eb; padding:var(--sp-6); border-radius:var(--r-md); overflow-x:auto; font-family:var(--f-mono); font-size:var(--s-sm); line-height:1.7; }
.art-body code { background:var(--surface); border:1px solid var(--border); padding:.1em .45em; border-radius:var(--r-sm); font-family:var(--f-mono); font-size:.875em; color:var(--red); }
.art-body pre code { background:none; border:none; padding:0; color:inherit; font-size:inherit; }
.art-body img { border-radius:var(--r-md); margin:1.5rem 0; width:100%; }
.art-body table { width:100%; font-size:var(--s-sm); margin:1.5rem 0; }
.art-body th { background:var(--ink); color:var(--white); padding:.75rem 1rem; text-align:left; font-family:var(--f-sans); font-weight:700; }
.art-body td { padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.art-body tr:nth-child(even) td { background:var(--surface); }

/* Tags */
.art-tags { margin-top:var(--sp-10); padding-top:var(--sp-6); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.art-tags__lbl { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700; color:var(--ink-4); text-transform:uppercase; letter-spacing:.08em; }
.art-tags a { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:600; color:var(--ink-3); background:var(--surface); border:1px solid var(--border); padding:.3rem .85rem; border-radius:99px; transition:all var(--dur); }
.art-tags a:hover { color:var(--red); border-color:var(--red); background:var(--red-soft); }

/* Author card */
.author-card { display:grid; grid-template-columns:88px 1fr; gap:var(--sp-6); padding:var(--sp-8); background:var(--surface); border-radius:var(--r-xl); border:1px solid var(--border); margin-top:var(--sp-10); align-items:start; }
.author-card__avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--white); box-shadow:var(--sh-1); }
.author-card__name { font-size:var(--s-xl); margin-bottom:2px; transition:color var(--dur); }
.author-card:hover .author-card__name { color:var(--red); }
.author-card__role { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--sp-3); }
.author-card__bio { font-size:var(--s-sm); color:var(--ink-4); line-height:1.65; margin-bottom:var(--sp-4); }
.author-card__link { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700; color:var(--red); background:var(--red-soft); padding:.4rem var(--sp-4); border-radius:var(--r-sm); transition:background var(--dur); display:inline-block; }
.author-card__link:hover { background:rgba(208,2,27,.15); }

/* Post nav */
.art-nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-10); }
.art-nav__item { padding:var(--sp-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); transition:box-shadow var(--dur),transform var(--dur); display:block; }
.art-nav__item:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.art-nav__item--next { text-align:right; }
.art-nav__dir { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700; color:var(--ink-4); text-transform:uppercase; letter-spacing:.07em; margin-bottom:var(--sp-2); }
.art-nav__title { font-family:var(--f-display); font-size:var(--s-md); font-weight:700; color:var(--ink); line-height:1.3; transition:color var(--dur); }
.art-nav__item:hover .art-nav__title { color:var(--red); }

/* Related */
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }

/* ============================================================
   14. PAGE LAYOUT (archives, static pages — WITH sidebar)
   ============================================================ */
.page-layout {
  display:grid; grid-template-columns:1fr 300px;
  gap:var(--sp-12); align-items:start;
  padding:var(--sp-10) 0 var(--sp-16);
}

/* Sidebar */
.widget { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); margin-bottom:var(--sp-5); }
.widget:last-child { margin-bottom:0; }
.widget__title { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:2px solid var(--red); }
.widget--nl { background:var(--ink); border-color:var(--ink); }
.widget--nl .widget__title { color:var(--white); }
.widget--nl p { font-size:var(--s-sm); color:rgba(255,255,255,.6); margin-bottom:var(--sp-4); }
.nl-form { display:flex; flex-direction:column; gap:var(--sp-3); }
.nl-form input[type="email"] { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--white); padding:.75rem var(--sp-4); border-radius:var(--r-sm); outline:none; width:100%; font-family:var(--f-sans); font-size:var(--s-sm); transition:border-color var(--dur); }
.nl-form input:focus { border-color:var(--red); }
.nl-form input::placeholder { color:rgba(255,255,255,.35); }
.nl-form button { background:var(--red); color:var(--white); font-family:var(--f-sans); font-size:var(--s-sm); font-weight:700; padding:.75rem; border-radius:var(--r-sm); transition:background var(--dur); }
.nl-form button:hover { background:var(--red-dark); }
.cat-list { display:flex; flex-direction:column; gap:var(--sp-2); }
.cat-list a { display:flex; justify-content:space-between; align-items:center; font-family:var(--f-sans); font-size:var(--s-sm); color:var(--ink-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--border); transition:color var(--dur); }
.cat-list a:last-child { border-bottom:none; }
.cat-list a:hover { color:var(--red); }
.cat-list .count { font-family:var(--f-sans); font-size:var(--s-xs); background:var(--surface); color:var(--ink-4); padding:.1rem .55rem; border-radius:99px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tag-cloud a { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:600; color:var(--ink-3); background:var(--surface); border:1px solid var(--border); padding:.3rem .8rem; border-radius:99px; transition:all var(--dur); }
.tag-cloud a:hover { color:var(--red); border-color:var(--red); background:var(--red-soft); }

/* ============================================================
   15. PAGINATION
   ============================================================ */
.pagination { display:flex; justify-content:center; align-items:center; gap:var(--sp-2); padding:var(--sp-10) 0; flex-wrap:wrap; }
.pagination a,.pagination span { font-family:var(--f-sans); font-size:var(--s-sm); font-weight:700; min-width:42px; height:42px; padding:0 var(--sp-3); display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--border); color:var(--ink-3); transition:all var(--dur); }
.pagination a:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }
.pagination .current { background:var(--red); border-color:var(--red); color:var(--white); }

/* ============================================================
   16. ARCHIVE HEADER
   ============================================================ */
.archive-hd { padding:var(--sp-10) 0 var(--sp-8); border-bottom:3px solid var(--red); margin-bottom:var(--sp-8); }
.archive-hd__type { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:var(--sp-2); }
.archive-hd h1 { margin-bottom:var(--sp-3); }
.archive-hd p { font-size:var(--s-lg); color:var(--ink-4); max-width:600px; }

/* ============================================================
   17. STATIC PAGE
   ============================================================ */
.page-hd { padding:var(--sp-10) 0 var(--sp-6); border-bottom:1px solid var(--border); margin-bottom:var(--sp-8); max-width:var(--max-article); }
.page-hd h1 { margin-bottom:var(--sp-3); }
.page-content { font-family:var(--f-body); font-size:var(--s-lg); line-height:1.85; color:var(--ink-3); max-width:var(--max-article); }
.page-content h2,.page-content h3 { margin-top:2rem; margin-bottom:.75rem; }
.page-content a { color:var(--red); border-bottom:1px solid rgba(208,2,27,.3); transition:border-color var(--dur); }
.page-content a:hover { border-bottom-color:var(--red); }
.page-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:1.5rem; }
.page-content ol { list-style:decimal; padding-left:1.5rem; margin-bottom:1.5rem; }
.page-content li { margin-bottom:.4rem; }

/* ============================================================
   18. 404
   ============================================================ */
.not-found { text-align:center; padding:var(--sp-20) var(--gutter); max-width:580px; margin:0 auto; }
.not-found__num { font-family:var(--f-display); font-size:clamp(5rem,15vw,10rem); font-weight:900; color:var(--red); line-height:1; letter-spacing:-.05em; margin-bottom:var(--sp-2); }
.not-found h1 { font-size:var(--s-3xl); margin-bottom:var(--sp-4); }
.not-found p { color:var(--ink-4); font-size:var(--s-lg); margin-bottom:var(--sp-8); }
.not-found .sf { display:flex; gap:var(--sp-2); max-width:420px; margin:0 auto var(--sp-6); }
.not-found .sf input { flex:1; padding:.8rem var(--sp-4); border:1px solid var(--border); border-radius:var(--r-sm); outline:none; font-size:var(--s-sm); transition:border-color var(--dur); }
.not-found .sf input:focus { border-color:var(--red); }
.not-found .sf button { background:var(--red); color:var(--white); font-family:var(--f-sans); font-weight:700; padding:.8rem var(--sp-5); border-radius:var(--r-sm); transition:background var(--dur); }
.not-found .sf button:hover { background:var(--red-dark); }

/* ============================================================
   19. COMMENTS
   ============================================================ */
.comments-wrap { margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:2px solid var(--border); }
.comments-title { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-8); }
.comment-thread { list-style:none; display:flex; flex-direction:column; gap:var(--sp-6); margin-bottom:var(--sp-10); }
.comment-item { display:grid; grid-template-columns:48px 1fr; gap:var(--sp-4); }
.c-avatar { width:48px; height:48px; border-radius:50%; }
.c-name { font-family:var(--f-sans); font-size:var(--s-sm); font-weight:700; color:var(--ink); }
.c-date { font-family:var(--f-sans); font-size:var(--s-xs); color:var(--ink-4); margin-bottom:var(--sp-3); }
.c-text { font-size:var(--s-sm); line-height:1.7; color:var(--ink-3); }
.c-reply { display:inline-block; margin-top:var(--sp-2); font-family:var(--f-sans); font-size:var(--s-xs); font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.05em; transition:opacity var(--dur); }
.c-reply:hover { opacity:.7; }
.children { margin-top:var(--sp-4); padding-left:var(--sp-8); border-left:2px solid var(--border); }
.comment-form-wrap h3 { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-5); }
.c-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.c-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.c-form input,.c-form textarea { width:100%; padding:.85rem var(--sp-4); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); font-family:var(--f-sans); font-size:var(--s-sm); color:var(--ink); outline:none; transition:border-color var(--dur); }
.c-form input:focus,.c-form textarea:focus { border-color:var(--red); background:var(--white); }
.c-form textarea { min-height:130px; resize:vertical; }
.c-form .c-submit { background:var(--red); color:var(--white); font-family:var(--f-sans); font-size:var(--s-sm); font-weight:700; padding:.85rem var(--sp-8); border-radius:var(--r-sm); transition:background var(--dur); width:fit-content; }
.c-form .c-submit:hover { background:var(--red-dark); }

/* ============================================================
   20. FOOTER
   ============================================================ */
.site-footer { background:#0A0A0A; color:rgba(255,255,255,.7); margin-top:var(--sp-16); }
.footer-main { display:grid; grid-template-columns:280px 1fr 1fr 1fr; gap:var(--sp-12); padding:var(--sp-16) 0 var(--sp-12); border-bottom:1px solid rgba(255,255,255,.08); }
.footer-about .brand-name { color:var(--white); font-size:var(--s-2xl); margin-bottom:var(--sp-4); display:block; }
.footer-about p { font-size:var(--s-sm); color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:var(--sp-5); }
.footer-socials { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.footer-socials a { width:36px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:all var(--dur); }
.footer-socials a:hover { background:var(--red); color:var(--white); }
.footer-socials svg { width:15px; height:15px; fill:currentColor; }
.footer-col h4 { font-family:var(--f-sans); font-size:var(--s-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:var(--sp-5); }
.footer-col ul { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-col ul li a { font-size:var(--s-sm); color:rgba(255,255,255,.45); transition:color var(--dur); }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-5) 0; }
.footer-bottom p,.footer-bottom a { font-family:var(--f-sans); font-size:var(--s-xs); color:rgba(255,255,255,.28); transition:color var(--dur); }
.footer-bottom a:hover { color:rgba(255,255,255,.7); }
.footer-bottom nav { display:flex; gap:var(--sp-5); flex-wrap:wrap; }

/* ============================================================
   21. READING PROGRESS + BACK TO TOP
   ============================================================ */
.rdg-bar { position:fixed; top:0; left:0; height:3px; background:var(--red); width:0%; z-index:9998; transition:width .12s linear; }
.top-btn { position:fixed; bottom:var(--sp-6); right:var(--sp-6); width:46px; height:46px; background:var(--red); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:700; opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity var(--dur),transform var(--dur); }
.top-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
.top-btn:hover { background:var(--red-dark); }
.top-btn svg { width:18px; height:18px; stroke:var(--white); fill:none; stroke-width:2.5; stroke-linecap:round; }

/* ============================================================
   22. WORDPRESS SPECIFICS
   ============================================================ */
.alignleft  { float:left; margin:.5rem 1.5rem 1rem 0; }
.alignright { float:right; margin:.5rem 0 1rem 1.5rem; }
.aligncenter { display:block; margin-inline:auto; }
.alignwide  { margin-inline:-2rem; }
.alignfull  { margin-inline:calc(-50vw + 50%); width:100vw; max-width:100vw; }
.screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* ============================================================
   23. RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .card-grid--4 { grid-template-columns:repeat(3,1fr); }
  .footer-main  { grid-template-columns:220px 1fr 1fr 1fr; gap:var(--sp-8); }
  .hero-layout  { height:500px; }
}

/* ≤1100px: hamburger, collapse sidebar on archives/pages */
@media (max-width:1100px) {
  .desktop-nav,.btn-sub { display:none!important; }
  .hamburger            { display:flex; }
  .hero-layout          { grid-template-columns:1fr; height:auto; grid-template-rows:420px 200px 200px; }
  .hero-primary         { grid-row:1; }
  .page-layout          { grid-template-columns:1fr; }
  .sidebar              { display:none; }
  .footer-main          { grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .card-grid            { grid-template-columns:repeat(2,1fr); }
  .related-grid         { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .hero-layout   { grid-template-rows:340px 180px 180px; }
  .card-grid     { grid-template-columns:1fr; }
  .related-grid  { grid-template-columns:1fr; }
  .art-nav       { grid-template-columns:1fr; }
  .author-card   { grid-template-columns:68px 1fr; gap:var(--sp-4); }
  .byline        { gap:var(--sp-3); }
  .c-form-row    { grid-template-columns:1fr; }
  .footer-main   { grid-template-columns:1fr; gap:var(--sp-6); padding:var(--sp-10) 0 var(--sp-8); }
  .footer-bottom { flex-direction:column; text-align:center; }
}

@media (max-width:480px) {
  .hero-layout           { grid-template-rows:260px 160px 160px; }
  .hero-primary__overlay { padding:var(--sp-5); }
  .hero-primary__title   { font-size:var(--s-xl); }
  .breaking-bar          { display:none; }
  .author-card           { grid-template-columns:1fr; text-align:center; }
  .author-card__avatar   { margin:0 auto; }
  .list-item             { grid-template-columns:1fr; }
  .list-item__img        { display:none; }
  .top-btn               { bottom:var(--sp-4); right:var(--sp-4); }
  .byline__share         { width:100%; }
}

@media print {
  .site-header,.site-footer,.sidebar,.breaking-bar,
  .topic-strip,.search-overlay,.mobile-drawer,
  .top-btn,.rdg-bar,.art-nav,.comments-wrap { display:none!important; }
  body { font-size:12pt; }
  a::after { content:" (" attr(href) ")"; font-size:.8em; color:#666; }
}