/*
Theme Name: Aalochana Dainik
Theme URI: https://aalochanadainik.com
Author: Aalochana Dainik
Description: Heavy, dense Nepali-first newsroom. Production-ready v4.1 (refactored).
Version: 4.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: aalochana

REFACTOR NOTE (v4.1):
This file was consolidated from a version that had grown by appending
override blocks to the bottom of the file every time a design changed.
Every selector now appears exactly ONCE at the top level, with the final
(previously overridden) values already applied - same visual result,
resolved ahead of time instead of at render time.

All media-query blocks are grouped at the end of the file and ordered from
the LARGEST max-width breakpoint down to the SMALLEST (1024px down to
380px). This is deliberate: on a narrow screen, multiple max-width
conditions are true at once - a 375px-wide phone matches both a
900px breakpoint and a 480px breakpoint simultaneously - so whichever rule
is LAST in the source wins. Ordering large-to-small guarantees the
narrowest, most specific rule always has the final say, which is what a
mobile override is supposed to do. The original file interleaved these
breakpoints out of order in places, which is why mobile styling could look
inconsistent.

Also fixed: an unterminated comment that had been typed without proper
comment delimiters, which corrupted the .widget.widget-ad selector and got
that entire rule silently dropped by browsers.

Going forward: edit a selector rule in place rather than appending a new
block with the same selector further down the file, and keep new media
blocks in largest-to-smallest order - both of those habits reintroduce the
bugs this refactor fixes.
*/


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --red: #C8102E;
  --red-d: #9B0B22;
  --red-l: #fde8ec;
  --gold: #E8A000;
  --gold-d: #B87A00;
  --green: #0A7C42;
  --blue: #1056B5;
  --sky-dark: #1E3A5F;
  --sky-mid: #2E5490;
  --sky-border: #3A6BA8;
  --sky-light: #EFF6FF;
  --sky-100: #DBEAFE;
  --ink: #1a1a1a;
  --muted: #5A5A5A;
  --faint: #909090;
  --div: #DCDCDC;
  --div-s: #F0F0EE;
  --bg: #F4F4F2;
  --bg2: #EAEAE8;
  --sur: #FFFFFF;
  --sur2: #FAFAF8;
  --dk-bg: #141414;
  --dk-sur: #1E1E1E;
  --dk-sur2: #252525;
  --dk-brd: #333;
  --dk-txt: #E8E8E4;
  --fn: "Mukta", serif;
  --fs: "Mukta", serif;
  --fu: "Mukta", sans-serif;
  --fun: "Hind", sans-serif;
  --xs: .72rem;
  --sm: .875rem;
  --base: 1.0625rem;
  --md: 1.125rem;
  --lg: 1.25rem;
  --xl: 1.5rem;
  --2xl: 1.875rem;
  --3xl: 2.25rem;
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --max: 1220px;
  --side: 292px;
  --r: 5px;
  --rl: 10px;
  --sh0: 0 1px 3px rgba(0,0,0,.07);
  --sh1: 0 2px 8px rgba(0,0,0,.09);
  --sh2: 0 4px 20px rgba(0,0,0,.12);
  --sh3: 0 8px 40px rgba(0,0,0,.15);
  --t: .18s ease;
  --ts: .35s ease;
}

[data-theme=dark] {
  --bg: #0F1E2E;
  --bg2: #162840;
  --sur: #1A3252;
  --sur2: #1E3A5F;
  --div: #2E5490;
  --div-s: #243F6B;
  --ink: var(--dk-txt);
  --muted: #888;
  --faint: #666;
  color-scheme: dark;
}


/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fn);
  font-size: var(--base);
  line-height: 1.7;
  color: var(--ink);
  background: #F7FAFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--ts), color var(--ts);
}

img,video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--red);
}

ul,ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input,textarea,select {
  font-family: inherit;
  font-size: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}


/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s4);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s4);
  padding: 8px 16px;
  background: var(--red);
  color: #fff;
  border-radius: 0 0 var(--r) var(--r);
  font-family: var(--fu);
  font-weight: 700;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
}


/* ============================================================
   UTILITY BAR
   ============================================================ */
#util-bar {
  background: var(--sky-dark);
  color: #bbb;
  padding: 7px 0;
  border-bottom: 2px solid var(--red);
  z-index: 100;
  position: relative;
  display: block;
}

.util-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.util-l {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.np-date {
  font-family: var(--fn);
  font-size: var(--sm);
  color: #ddd;
  white-space: nowrap;
}

.qlinks {
  display: flex;
  gap: var(--s3);
}

.qlinks a {
  color: #777;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  transition: color var(--t);
}

.qlinks a:hover {
  color: var(--gold);
}

.util-r {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.soc-row {
  display: flex;
  gap: 4px;
}

.soc-row a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sky-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #888;
  font-weight: 700;
  transition: background var(--t), color var(--t);
}

.soc-row a:hover {
  background: var(--red);
  color: #fff;
}

.dk-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sky-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border: none;
  color: #fff;
  transition: background var(--t);
}

.dk-btn:hover {
  background: var(--gold);
}


/* ============================================================
   BREAKING NEWS TICKER
   ============================================================ */
#brk-bar {
  background: var(--red);
  overflow: hidden;
  z-index: 99;
  height: 36px;
  display: flex;
  align-items: center;
}

#brk-bar > .wrap {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 var(--s4);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.brk-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.brk-label {
  background: var(--sky-dark);
  color: var(--gold);
  font-family: var(--fu);
  font-size: .60rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0 22px 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}

.brk-wrap {
  overflow: hidden;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--s4);
}

.brk-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 60s linear infinite;
  gap: var(--s10);
  align-items: center;
}

.brk-track:hover {
  animation-play-state: paused;
}

.brk-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--fn);
  font-size: .875rem;
  flex-shrink: 0;
}

.brk-item a {
  color: #fff;
}

.brk-item a:hover {
  color: var(--gold);
}

.brk-item::before {
  content: "▶";
  font-size: 6px;
  opacity: .6;
  flex-shrink: 0;
}

@keyframes ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }


/* ============================================================
   SITE HEADER
   ============================================================ */
#site-hdr {
  background: #fff;
  border-bottom: 1px solid #DBEAFE;
  padding: 10px 0;
  position: relative;
  z-index: 98;
}

.hdr-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s4);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: column;
}

.logo-img {
  height: 60px;
  width: auto;
}

.logo-link {
  display: block;
  flex-shrink: 0;
}

.site-name {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  margin: 0;
}

.site-name a {
  color: inherit;
  text-decoration: none;
}

.site-desc {
  font-family: var(--fu);
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .5px;
  margin-top: 3px;
  display: none;
}

.hdr-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  min-height: 0;
}


/* ============================================================
   PRIMARY NAV
   ============================================================ */
#pnav {
  background: var(--red);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--sh2);
}

.pnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pmenu {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex: 1;
}

.pmenu > li {
  position: relative;
}

.pmenu > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 14px;
  color: rgba(255,255,255,.92);
  font-family: var(--fun);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t);
  position: relative;
}

.pmenu > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background: var(--gold);
  transition: left var(--t), right var(--t);
}

.pmenu > li:hover > a,
.pmenu > li.current-menu-item > a,
.pmenu > li.current-menu-ancestor > a {
  color: #fff;
  background: rgba(0,0,0,.2);
}

.pmenu > li:hover > a::after,
.pmenu > li.current-menu-item > a::after,
.pmenu > li.current-menu-ancestor > a::after {
  left: 0;
  right: 0;
}

.pmenu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--sur);
  border-top: 3px solid var(--red);
  box-shadow: var(--sh3);
  border-radius: 0 0 var(--r) var(--r);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--t);
  z-index: 300;
  list-style: none;
}

.pmenu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pmenu .sub-menu li a {
  display: block;
  padding: 10px 18px;
  color: var(--ink);
  font-family: var(--fn);
  font-size: .875rem;
  border-bottom: 1px solid var(--div-s);
  transition: all var(--t);
}

.pmenu .sub-menu li:last-child a {
  border-bottom: none;
}

.pmenu .sub-menu li a:hover {
  color: var(--red);
  padding-left: 24px;
  background: var(--div-s);
}

.pnav-ctrls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
  flex-shrink: 0;
}

.pnav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  transition: background var(--t);
  cursor: pointer;
  border: none;
}

.pnav-btn:hover {
  background: rgba(255,255,255,.28);
  color: #fff;
}

.mob-tog {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.mob-tog span {
  display: block;
  height: 2px;
  width: 22px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

.mob-tog.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px,5px);
}

.mob-tog.open span:nth-child(2) {
  opacity: 0;
}

.mob-tog.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px,-5px);
}

.bnav-ad {
  background: transparent;
  border-bottom: none;
  padding: 2px 0;
  text-align: center;
  margin: 0;
}

.ad-note {
  font-family: var(--fu);
  font-size: .6rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.ad-label {
  font-family: var(--fu);
  font-size: 8px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 3px;
  display: block;
}

.sec-ad-label {
  font-family: var(--fu);
  font-size: 8px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}


/* ============================================================
   MOBILE NAV
   ============================================================ */
#mob-ov {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ts);
}

#mob-ov.open {
  opacity: 1;
  visibility: visible;
}

#mob-pan {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px,88vw);
  background: var(--sur);
  z-index: 500;
  transform: translateX(-100%);
  transition: transform var(--ts);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh3);
}

#mob-pan.open {
  transform: translateX(0);
}

.mob-hd {
  background: var(--red);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.mob-hd .site-name {
  font-size: var(--xl);
  color: #fff;
  margin: 0;
}

.mob-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: background var(--t);
}

.mob-close:hover {
  background: rgba(255,255,255,.35);
}

.mob-menu {
  padding: 6px 0;
  flex: 1;
}

.mob-menu li > a {
  display: block;
  padding: 11px 20px;
  font-family: var(--fn);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--div-s);
  transition: all var(--t);
}

.mob-menu li > a:hover {
  color: var(--red);
  padding-left: 26px;
  background: var(--div-s);
}

.mob-menu .sub-menu {
  padding: 0;
}

.mob-menu .sub-menu li a {
  padding-left: 34px;
  font-weight: 400;
  font-size: .9rem;
  background: var(--div-s);
}


/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
#srch-ov {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  z-index: 600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t);
}

#srch-ov.open {
  opacity: 1;
  visibility: visible;
}

.srch-box {
  width: min(680px,92vw);
  transform: translateY(-20px);
  transition: transform .25s;
}

#srch-ov.open .srch-box {
  transform: translateY(0);
}

.srch-form {
  display: flex;
  background: var(--sur);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh3);
}

.srch-inp {
  flex: 1;
  border: none;
  outline: none;
  padding: 18px 22px;
  font-family: var(--fn);
  font-size: var(--lg);
  background: transparent;
  color: var(--ink);
}

.srch-inp::placeholder {
  color: var(--faint);
}

.srch-sub {
  padding: 0 24px;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-weight: 700;
  font-size: .875rem;
  transition: background var(--t);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.srch-sub:hover {
  background: var(--red-d);
}

.srch-esc {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--t);
  border: none;
}

.srch-esc:hover {
  background: var(--red);
}


/* ============================================================
   SECTION HEADERS (shared)
   ============================================================ */
.sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--div);
  position: relative;
  margin-bottom: var(--s4);
}

.sec-hd::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

.sec-hd-l {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-flag {
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .57rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: var(--r);
}

.sec-ttl {
  font-family: var(--fn);
  font-size: var(--xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin: 0;
}

.view-all {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 700;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all var(--t);
}

.view-all::after {
  content: "→";
}

.view-all:hover {
  color: var(--red-d);
  gap: 8px;
}


/* ============================================================
   HERO FEATURED SECTION
   ============================================================ */
.hero-featured-sec {
  background: #0a0a0a;
  margin-bottom: var(--s6);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 3px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s4);
  height: 540px;
}

.featured-main {
  position: relative;
  overflow: hidden;
  background: #000;
  display: block;
  text-decoration: none;
  color: inherit;
}

.featured-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}

.featured-main:hover .featured-img {
  transform: scale(1.04);
}

.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.55) 38%,
    rgba(0,0,0,.1) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s8) var(--s6) var(--s6);
  z-index: 2;
  color: #fff;
}

.featured-meta-top {
  margin-bottom: var(--s3);
}

.featured-cat-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 3px;
  text-decoration: none;
  transition: background var(--t);
}

.featured-cat-badge:hover {
  background: var(--gold);
  color: #000;
}

.featured-title {
  font-family: var(--fs);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 var(--s3);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.featured-title a {
  color: #fff;
  text-decoration: none;
}

.featured-title a:hover {
  color: var(--gold);
}

.featured-meta-bottom {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .78rem;
  color: rgba(255,255,255,.7);
}

.featured-author {
  color: var(--gold);
  font-weight: 600;
}

.featured-date {
  color: rgba(255,255,255,.65);
}

.featured-views {
  color: rgba(255,255,255,.45);
}

.featured-secondary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  overflow: hidden;
}

.featured-item {
  position: relative;
  overflow: hidden;
  flex: 1;
  background: #111;
  display: block;
  text-decoration: none;
  color: #fff;
  min-height: 0;
}

.featured-item-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.featured-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}

.featured-item:hover .featured-item-image {
  transform: scale(1.07);
}

.featured-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.25) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.featured-item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s3) var(--s4);
  z-index: 2;
  color: #fff;
}

.featured-item-cat {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .50rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 2px;
  text-decoration: none;
  margin-bottom: var(--s1);
}

.featured-item-title {
  font-family: var(--fs);
  font-size: clamp(.78rem, 1vw, .92rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.featured-item-title a {
  color: #fff;
  text-decoration: none;
}

.featured-item-title a:hover {
  color: var(--gold);
}

.featured-item-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--fu);
  font-size: .60rem;
  color: rgba(255,255,255,.6);
}

.featured-item-author {
  color: rgba(255,255,255,.8);
}

.hero-sec {
  width: 100%;
  margin-bottom: var(--s6);
}

.hero-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 240px;
  gap: 3px;
  overflow: hidden;
  border-radius: var(--rl);
}

.hero-mosaic a {
  position: relative;
  overflow: hidden;
  display: block;
  color: #fff;
}

.hero-mosaic a.h1 {
  grid-column: 1;
  grid-row: 1/3;
}

.hero-mosaic a.h2 {
  grid-column: 2;
  grid-row: 1;
}

.hero-mosaic a.h3 {
  grid-column: 3;
  grid-row: 1;
}

.hero-mosaic a.h4 {
  grid-column: 2;
  grid-row: 2;
}

.hero-mosaic a.h5 {
  grid-column: 3;
  grid-row: 2;
}

.h-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
}

.hero-mosaic a:hover .h-img {
  transform: scale(1.05);
}

.h-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
}

.h-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s4);
}

.h1 .h-body {
  padding: var(--s6);
}

.h-ttl {
  font-family: var(--fs);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  margin-bottom: var(--s2);
}

.h1 .h-ttl {
  font-size: clamp(1.3rem,2.5vw,2rem);
}

.h2 .h-ttl,.h3 .h-ttl,.h4 .h-ttl,.h5 .h-ttl {
  font-size: clamp(.825rem,1.1vw,1rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--fu);
  font-size: .72rem;
  color: rgba(255,255,255,.75);
}

.h-author {
  color: var(--gold);
  font-weight: 600;
}


/* ============================================================
   PAGE LAYOUT / GRID UTILITIES
   ============================================================ */
.page-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s6) var(--s4);
  display: grid;
  grid-template-columns: 1fr var(--side);
  gap: var(--s5);
  align-items: start;
}

.single-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s6) var(--s4);
  display: grid;
  grid-template-columns: 1fr var(--side);
  gap: var(--s5);
  align-items: start;
}

.site-layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s6) var(--s4);
  display: grid;
  grid-template-columns: 1fr var(--side);
  gap: var(--s5);
  align-items: start;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--s4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--s4);
}


/* ============================================================
   NEWS CARD
   ============================================================ */
.ncard {
  background: var(--sur);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh0);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}

.ncard:hover {
  box-shadow: var(--sh2);
  transform: translateY(-3px);
}

.ncard-img-w {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg2);
  flex-shrink: 0;
}

.ncard-img,.ncard-img-w img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
  display: block;
}

.ncard:hover .ncard-img,.ncard:hover .ncard-img-w img {
  transform: scale(1.06);
}

.ncard-bdgs {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  display: flex;
  gap: 4px;
  z-index: 2;
}

.bdg {
  display: inline-block;
  font-family: var(--fu);
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 3px;
}

.bdg-cat {
  background: var(--red);
  color: #fff;
}

.ncard-body {
  padding: var(--s3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ncard-cat {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--red);
  text-decoration: none;
  transition: color var(--t);
}

.ncard-cat:hover {
  color: var(--red-d);
}

.ncard-ttl {
  font-family: var(--fs);
  font-size: var(--lg);
  font-weight: 700;
  line-height: 1.42;
  color: var(--ink);
  flex: 1;
  margin: 0;
}

.ncard-ttl a {
  color: inherit;
  transition: color var(--t);
}

.ncard-ttl a:hover {
  color: var(--red);
}

.ncard-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s2);
  border-top: 1px solid var(--div-s);
  margin-top: auto;
}

.ncard-dt {
  color: var(--faint);
  font-family: var(--fu);
  font-size: .65rem;
}

.ncard-rd {
  font-family: var(--fu);
  font-size: .70rem;
  font-weight: 700;
  color: var(--red);
}

.ncard-rd::after {
  content: " →";
}

.ncard-rd:hover {
  color: var(--red-d);
}

.ncard.card-lg .ncard-ttl {
  font-size: var(--lg);
}

.news-card {
  background: var(--sur);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh0);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}

.news-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-3px);
}

.news-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg2);
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
  display: block;
}

.news-card:hover .news-card__image {
  transform: scale(1.06);
}

.news-card__body {
  padding: var(--s4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.news-card__category {
  font-family: var(--fu);
  font-size: .60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--red);
  text-decoration: none;
}

.news-card__title {
  font-family: var(--fs);
  font-size: var(--base);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  margin: 0;
}

.news-card__title a {
  color: inherit;
}

.news-card__title a:hover {
  color: var(--red);
}

.news-card__excerpt {
  font-family: var(--fn);
  font-size: var(--sm);
  color: var(--muted);
  line-height: 1.6;
}

.news-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s3);
  border-top: 1px solid var(--div-s);
  margin-top: auto;
}

.post-date {
  color: var(--faint);
  font-family: var(--fu);
  font-size: .65rem;
}

.read-more-link {
  font-family: var(--fu);
  font-size: .65rem;
  font-weight: 700;
  color: var(--red);
}

.read-more-link:hover {
  color: var(--red-d);
}

.citem,.compact-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--div-s);
}

.citem:last-child,.compact-item:last-child {
  border-bottom: none;
}

.citem-img,.compact-item__image-wrap {
  width: 82px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
}

.citem-img img,.compact-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.citem-body,.compact-item__content {
  flex: 1;
  min-width: 0;
}

.citem-ttl,.compact-item__title {
  font-family: var(--fs);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.citem-ttl a,.compact-item__title a {
  color: inherit;
}

.citem-ttl a:hover,.compact-item__title a:hover {
  color: var(--red);
}

.citem-meta,.compact-item__meta {
  font-family: var(--fu);
  font-size: .60rem;
  color: var(--faint);
}

.lazy {
  opacity: 0;
  transition: opacity .4s;
}

.lazy.loaded {
  opacity: 1;
}


/* ============================================================
   AD STRIPS
   ============================================================ */
.sec-ad-strip {
  background: var(--sur2);
  border: 1px dashed var(--div);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  margin: var(--s3) 0;
  text-align: center;
  min-height: 96px;
  max-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  all: unset;
  width: 100%;
}

.below-nav-ad {
  background: var(--sur2);
  border-bottom: 1px solid var(--div);
  padding: 8px 0;
  text-align: center;
}

.ad-wrapper {
  display: flex;
  justify-content: center;
}

.inline-ad-strip {
  background: var(--sur2);
  border-top: 1px solid var(--div);
  border-bottom: 1px solid var(--div);
  padding: 10px 0;
  text-align: center;
  margin: var(--s8) 0;
}

.sidebar-ad-widget {
  text-align: center;
}

.art-inline-ad {
  text-align: center;
  margin: var(--s1) 0;
}


/* ============================================================
   LATEST NEWS SECTION
   ============================================================ */
.latest-sec {
  margin-bottom: var(--s8);
}

.latest-wrap {
  display: block;
  grid-template-columns: 1fr 242px;
  gap: var(--s5);
  align-items: start;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--s3);
}

.trend-rail {
  background: var(--sur);
  border-radius: var(--rl);
  border: 1px solid var(--div);
  overflow: hidden;
  border-color: var(--sky-100);
}

.trend-hd {
  background: var(--sky-dark);
  color: #fff;
  font-family: var(--fn);
  font-size: .875rem;
  font-weight: 700;
  padding: 11px 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-hd::before {
  content: "🔥";
  font-size: 14px;
}

.trend-list {
  list-style: none;
}

.trend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 9px 13px;
  border-bottom: 1px solid var(--div-s);
}

.trend-item:last-child {
  border-bottom: none;
}

.t-num {
  min-width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--div-s);
  color: var(--muted);
  font-family: var(--fu);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.t-num.top {
  background: var(--red);
  color: #fff;
}

.t-ttl {
  font-family: var(--fs);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 2px;
}

.t-ttl a {
  color: inherit;
}

.t-ttl a:hover {
  color: var(--red);
}

.t-dt {
  font-family: var(--fu);
  font-size: .60rem;
  color: var(--faint);
}


/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */
.cat-sec {
  margin-bottom: var(--s8);
}

.layout-a {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.layout-a-left {
  height: 100%;
}

.layout-a-left .ncard {
  height: 100%;
}

.layout-a-left .ncard-img-w {
  aspect-ratio: unset;
  flex: 1;
  min-height: 200px;
}

.layout-a-right {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.layout-a-right .ncard-img-w {
  aspect-ratio: 3/2;
}

.layout-a-compact {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
}

.layout-b-top {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.layout-b-bottom {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
}


/* ============================================================
   MOST READ
   ============================================================ */
.mr-sec {
  margin-bottom: var(--s8);
}

.mr-box {
  background: var(--sur);
  border-radius: var(--rl);
  border: 1px solid var(--div);
  overflow: hidden;
}

.mr-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.mr-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--div-s);
  border-right: 1px solid var(--div-s);
  transition: background var(--t);
}

.mr-item:hover {
  background: var(--div-s);
}

.mr-item:nth-child(even) {
  border-right: none;
}

.mr-item:nth-last-child(-n/**/+2) {
  border-bottom: none;
}

.mr-num {
  min-width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: var(--div-s);
  color: var(--muted);
  font-family: var(--fu);
  font-size: var(--base);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.mr-item:nth-child(1) .mr-num,.mr-item:nth-child(2) .mr-num {
  background: var(--red);
  color: #fff;
}

.mr-item:nth-child(3) .mr-num,.mr-item:nth-child(4) .mr-num {
  background: var(--ink);
  color: #fff;
}

.mr-body {
  flex: 1;
  min-width: 0;
}

.mr-ttl {
  font-family: var(--fs);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.mr-ttl a {
  color: inherit;
}

.mr-ttl a:hover {
  color: var(--red);
}

.mr-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--fu);
  font-size: .62rem;
  color: var(--faint);
}


/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */
.nl-strip {
  background: var(--ink);
  padding: var(--s10) 0;
  margin: var(--s8) 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
}

.nl-text {
  flex: 1;
}

.nl-ttl {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--s2);
}

.nl-sub {
  font-family: var(--fn);
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  margin: 0;
}

.nl-form {
  display: flex;
  background: #fff;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh2);
  min-width: 360px;
}

.nl-inp {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--fn);
  font-size: var(--base);
  color: var(--ink);
  background: transparent;
}

.nl-btn {
  padding: 0 20px;
  background: var(--red);
  color: #fff;
  font-family: var(--fn);
  font-weight: 700;
  font-size: .875rem;
  border: none;
  cursor: pointer;
  transition: background var(--t);
  white-space: nowrap;
}

.nl-btn:hover {
  background: var(--red-d);
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-col,.site-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.sticky-sidebar {
  position: sticky;
  top: calc(46px + var(--s4));
  display: flex;
  flex-direction: column;
  gap: 0.10rem;
}

.wbox {
  background: var(--sur);
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--div);
}

.wbox-hd {
  background: var(--sky-dark);
  color: #fff;
  padding: 8px 12px;
  font-family: var(--fn);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.widget {
  margin: 0;
  padding: 0;
}

.widget.widget-ad {
  padding: 0;
  text-align: center;
}

.widget.widget-ad img {
  width: 100%;
  height: auto;
  display: block;
}

.widget-title {
  font-family: var(--fn);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--div-s);
  margin-bottom: 8px;
}

.widget ul {
  list-style: none;
}

.widget li a {
  display: flex !important;
  padding: 6px 0;
  border-bottom: 1px solid var(--div-s);
  color: var(--ink);
  font-size: .875rem;
  transition: color var(--t), padding-left var(--t);
  justify-content: space-between;
  align-items: center;
}

.widget li:last-child a {
  border-bottom: none;
}

.widget li a:hover {
  color: var(--red);
  padding-left: 4px;
}

.widget-post-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.widget-post-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.widget-post-item__num {
  min-width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.widget-post-item__content {
  flex: 1;
  min-width: 0;
}

.widget-post-item__title {
  font-family: var(--fs);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 2px;
}

.widget-post-item__title a {
  color: inherit;
}

.widget-post-item__title a:hover {
  color: var(--red);
}

.widget-post-item__date {
  font-family: var(--fu);
  font-size: .60rem;
  color: var(--faint);
}

.widget-body {
  padding-top: 4px;
}

.ad-widget-inner {
  text-align: center;
}

.ad-widget-inner img {
  border-radius: var(--r);
  display: inline-block;
}


/* ============================================================
   ARCHIVE / SEARCH HEADER
   ============================================================ */
.archive-header {
  background: linear-gradient(135deg, #111 0%, #1e1e1e 100%);
  padding: var(--s8) 0 var(--s6);
}

.archive-header .container,.archive-header .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s4);
}

.archive-category-name {
  font-family: var(--fs);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--s2);
  line-height: 1.2;
}

.archive-post-count {
  font-family: var(--fu);
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  margin: var(--s2) 0 0;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-bottom: var(--s8);
}

.pagination {
  margin: var(--s8) 0;
  display: flex;
  justify-content: center;
}

.pagination ul {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination ul li a,.pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--r);
  border: 1px solid var(--div);
  font-family: var(--fu);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sur);
  transition: all var(--t);
}

.pagination ul li a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.pagination ul li span.current {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}


/* ============================================================
   SINGLE POST
   ============================================================ */
.single-main {
  min-width: 0;
}

.art-wrap {
  background: var(--sur);
  border-radius: var(--rl);
  box-shadow: var(--sh1);
  padding: var(--s8);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .65rem;
  color: var(--faint);
  margin-bottom: var(--s4);
}

.breadcrumb a {
  color: var(--red);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.bc-sep {
  opacity: .4;
}

.art-cat {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 600;
  text-transform: uppercase;
  /* letter-spacing: 1.2px; */
  color: #fff;
  background: var(--red);
  display: inline-block;
  padding: 1.5px 3px;
  border-radius: 3px;
  margin-bottom: var(--s4);
}

.art-cat:hover {
  background: var(--red-d);
  color: #fff;
}

.art-ttl {
  font-family: var(--fn);
  font-size: clamp(1.5rem,4vw,2.2rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--s4);
}

.art-lede {
  font-family: var(--fn);
  font-size: var(--lg);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.7;
  border-left: 3px solid var(--red);
  padding-left: var(--s4);
  margin: 0 0 var(--s5);
}

.art-meta {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s4) 0;
  border-top: 1px solid var(--div);
  border-bottom: 1px solid var(--div);
  margin-bottom: var(--s5);
}

.art-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.art-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--div);
}

.art-aname {
  font-family: var(--fu);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.art-dt {
  font-family: var(--fu);
  font-size: .72rem;
  color: var(--muted);
}

.art-meta-views {
  font-family: var(--fu);
  font-size: .72rem;
  color: var(--muted);
}

.art-feat {
  margin: 0 0 var(--s6);
  border-radius: var(--r);
  overflow: hidden;
}

.art-feat img {
  width: 100%;
  display: block;
  height: auto;
}

.art-feat figcaption {
  font-family: var(--fu);
  font-size: .72rem;
  color: var(--muted);
  padding: var(--s2) 0;
  font-style: italic;
}

.art-body {
  font-family: var(--fn);
  font-size: 1.093rem;
  line-height: 1.95;
  color: var(--ink);
  font-weight: 500;
}

.art-body p {
  margin-bottom: var(--s5);
  text-align: justify;
}

.art-body h2 {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s10) 0 var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--div);
}

.art-body h3 {
  font-family: var(--fs);
  font-size: var(--xl);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s8) 0 var(--s3);
}

.art-body a {
  color: var(--red);
  text-decoration: underline;
}

.art-body a:hover {
  color: var(--red-d);
}

.art-body img {
  width: 100%;
  border-radius: var(--r);
  margin: var(--s6) 0;
}

.art-body blockquote {
  border-left: 4px solid var(--red);
  margin: var(--s6) 0;
  padding: var(--s4) var(--s6);
  background: var(--div-s);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--fs);
  font-size: var(--lg);
  font-style: italic;
  color: var(--muted);
}

.art-body ul {
  margin: 0 0 var(--s5) var(--s6);
  list-style: disc;
}

.art-body ol {
  margin: 0 0 var(--s5) var(--s6);
  list-style: decimal;
}

.art-body li {
  margin-bottom: var(--s2);
}

.art-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s5) 0;
  padding: var(--s4) 0;
  border-top: 1px solid var(--div-s);
}

.art-tags-label {
  font-family: var(--fu);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.tag-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--div-s);
  border-radius: 20px;
  font-family: var(--fu);
  font-size: .65rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--div);
  transition: all var(--t);
}

.tag-chip:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.art-share {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s5) 0;
  padding: var(--s4) 0;
  border-top: 1px solid var(--div-s);
  border-bottom: 1px solid var(--div-s);
}

.art-share-label {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-family: var(--fu);
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: opacity var(--t), transform var(--t);
  text-decoration: none;
}

.share-btn:hover {
  opacity: .85;
  transform: translateY(-1px);
  color: #fff;
}

.share-btn.fb {
  background: #1877F2;
}

.share-btn.tw {
  background: #000;
}

.share-btn.wa {
  background: #25D366;
}

.share-btn.copy-link {
  background: var(--red);
}

.art-author-box {
  background: var(--div-s);
  border-radius: var(--rl);
  padding: var(--s5) var(--s6);
  margin: var(--s8) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  border: 1px solid var(--div);
}

.author-box-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sur);
  flex-shrink: 0;
  box-shadow: var(--sh1);
}

.author-box-info {
  flex: 1;
  min-width: 0;
}

.author-box-label {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: var(--s1);
}

.author-box-name {
  font-family: var(--fn);
  font-size: var(--xl);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.author-box-bio {
  font-family: var(--fn);
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.art-related {
  margin: var(--s8) 0 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
}

.art-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin: var(--s8) 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--div-s);
}

.art-nav-item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--sur2);
  border-radius: var(--r);
  border: 1px solid var(--div);
  text-decoration: none;
  transition: all var(--t);
}

.art-nav-item:hover {
  border-color: var(--red);
  background: var(--red-l);
}

.art-nav-item.next {
  text-align: right;
}

.art-nav-dir {
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--faint);
}

.art-nav-title {
  font-family: var(--fs);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   COMMENTS
   ============================================================ */
.comments-area {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 3px solid var(--red);
}

.comments-title {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--s6);
}

.comment-list {
  list-style: none;
  margin: 0 0 var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.comment-body {
  background: var(--sur2);
  border-radius: var(--rl);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--div);
}

.comment-author img {
  border-radius: 50%;
  border: 2px solid var(--div);
}

.comment-author .fn {
  font-family: var(--fu);
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
}

.comment-metadata {
  font-family: var(--fu);
  font-size: .65rem;
  color: var(--faint);
}

.comment-content p {
  font-family: var(--fn);
  font-size: var(--base);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: var(--s3);
}

.reply a {
  font-family: var(--fu);
  font-size: .72rem;
  font-weight: 700;
  color: var(--red);
}

.comment-respond {
  background: var(--sur);
  border-radius: var(--rl);
  padding: var(--s6);
  border: 1px solid var(--div);
}

.comment-reply-title {
  font-family: var(--fs);
  font-size: var(--xl);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--s5);
}

.comment-form label {
  display: block;
  font-family: var(--fu);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: var(--s2);
}

.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea {
  width: 100%;
  border: 1px solid var(--div);
  border-radius: var(--r);
  padding: 10px 14px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--t);
}

.comment-form input:focus,.comment-form textarea:focus {
  border-color: var(--red);
  outline: none;
}

.comment-form p {
  margin-bottom: var(--s4);
}

.form-submit .submit {
  display: inline-block;
  padding: 12px 28px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-family: var(--fn);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  transition: background var(--t);
}

.form-submit .submit:hover {
  background: var(--red-d);
}


/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--sky-dark);
  color: #888;
  margin-top: 0 !important;
}

.ft-main {
  padding: var(--s10) 0 var(--s8);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s8);
  border-bottom: 1px solid #2a1a1e;
}

.ft-brand h3 {
  font-family: var(--fs);
  font-size: var(--xl);
  color: #fff;
  margin: 0 0 var(--s3);
}

.ft-brand p {
  font-family: var(--fn);
  font-size: .875rem;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  margin: 0 0 var(--s4);
}

.ft-soc {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.ft-soc a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sky-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  font-weight: 700;
  transition: all var(--t);
}

.ft-soc a:hover {
  background: var(--red);
  color: #fff;
}

.ft-col-ttl {
  font-family: var(--fn);
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--s4);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
  display: block;
}

.ft-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.ft-links a {
  font-family: var(--fn);
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  transition: color var(--t);
}

.ft-links a::before {
  content: "› ";
  color: var(--red);
}

.ft-links a:hover {
  color: #fff;
}

.ft-bot {
  padding: var(--s4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  background: rgba(0,0,0,.15);
}

.ft-copy {
  font-family: var(--fu);
  font-size: .65rem;
  color: rgba(255,255,255,.35);
}

.ft-policy {
  display: flex;
  gap: var(--s4);
}

.ft-policy a {
  font-family: var(--fu);
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  transition: color var(--t);
}

.ft-policy a:hover {
  color: rgba(255,255,255,.7);
}


/* ============================================================
   PAGE / 404
   ============================================================ */
.page-content-wrap {
  max-width: 780px;
  margin: var(--s10) auto;
  padding: var(--s8);
  background: var(--sur);
  border-radius: var(--rl);
  box-shadow: var(--sh1);
}

.page-title,.article-title {
  font-family: var(--fs);
  font-size: var(--3xl);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 3px solid var(--red);
}

.article-body {
  font-family: var(--fn);
  font-size: var(--md);
  line-height: 1.9;
  color: var(--ink);
}

.article-body p {
  margin-bottom: var(--s5);
}

.article-body h2 {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 700;
  margin: var(--s8) 0 var(--s4);
}

.article-body a {
  color: var(--red);
  text-decoration: underline;
}

.error-wrap {
  max-width: 640px;
  margin: var(--s12) auto;
  padding: var(--s8) var(--s4);
  text-align: center;
}

.error-wrap .err-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--s4);
}

.error-wrap .err-code {
  font-family: var(--fu);
  font-size: 7rem;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: var(--s3);
}

.error-wrap .err-title {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--s3);
}

.error-wrap .err-msg {
  font-family: var(--fn);
  font-size: var(--md);
  color: var(--muted);
  margin-bottom: var(--s6);
}

.btn-home {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 12px 28px;
  background: var(--red);
  color: #fff;
  border-radius: var(--r);
  font-family: var(--fn);
  font-size: .9375rem;
  font-weight: 700;
  transition: all var(--t);
}

.btn-home:hover {
  background: var(--red-d);
  color: #fff;
  transform: translateY(-2px);
}

.search-form {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s5);
}

.search-field {
  flex: 1;
  border: 1px solid var(--div);
  border-radius: var(--r);
  padding: 10px 14px;
  background: var(--sur);
  color: var(--ink);
}

.search-submit {
  padding: 10px 20px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-family: var(--fn);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t);
}

.search-submit:hover {
  background: var(--red-d);
}


/* ============================================================
   UTILITIES (scroll progress, back-to-top, alignment)
   ============================================================ */
#read-prog {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gold);
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}

#back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 18px;
  box-shadow: var(--sh2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  z-index: 299;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

#back-top.show {
  opacity: 1;
  visibility: visible;
}

#back-top:hover {
  transform: translateY(-3px);
}

.alignleft {
  float: left;
  margin: 0 var(--s5) var(--s4) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--s4) var(--s5);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   HERO EDITORIAL (title -> meta -> image)
   ============================================================ */
.hero-ed-main {
  background: var(--sur);
  border-radius: var(--rl) var(--rl) 0 0;
  overflow: hidden;
  margin-bottom: var(--s3);
}

.hero-ed-text {
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--div-s);
}

.hero-ed-cat {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .60rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: var(--s3);
  text-decoration: none;
  transition: background var(--t);
}

.hero-ed-cat:hover {
  background: var(--red-d);
  color: #fff;
}

.hero-ed-title {
  font-family: var(--fs);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.hero-ed-title a {
  color: inherit;
  text-decoration: none;
}

.hero-ed-title a:hover {
  color: var(--red);
}

.hero-ed-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .8rem;
  color: var(--muted);
}

.hero-ed-author {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--ink);
}

.hero-ed-author svg,
.hero-ed-date svg,
.hero-ed-views svg {
  flex-shrink: 0;
}

.hero-ed-date {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.hero-ed-views {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--faint);
}

.hero-ed-sep {
  color: var(--div);
  font-size: .9rem;
}

.hero-ed-img-link {
  display: block;
}

.hero-ed-img-wrap {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg2);
}

.hero-ed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.hero-ed-img-link:hover .hero-ed-img {
  transform: scale(1.03);
}

.hero-ed-noimg {
  width: 100%;
  height: 100%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--div);
}

.hero-ed-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  background: var(--bg2);
  border-top: 3px solid var(--red);
}

.hero-ed-item {
  background: var(--sur);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background var(--t);
}

.hero-ed-item:hover {
  background: var(--sur2);
}

.hero-ed-item-img-link {
  display: block;
}

.hero-ed-item-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg2);
  flex-shrink: 0;
}

.hero-ed-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.hero-ed-item:hover .hero-ed-item-img {
  transform: scale(1.06);
}

.hero-ed-item-body {
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.hero-ed-item-cat {
  font-family: var(--fu);
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--red);
  text-decoration: none;
}

.hero-ed-item-cat:hover {
  color: var(--red-d);
}

.hero-ed-item-title {
  font-family: var(--fs);
  font-size: clamp(.8rem, 1.2vw, .9375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-ed-item-title a {
  color: inherit;
  text-decoration: none;
}

.hero-ed-item-title a:hover {
  color: var(--red);
}

.hero-ed-item-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--fu);
  font-size: .62rem;
  color: var(--faint);
  margin-top: auto;
  padding-top: var(--s2);
}

.hero-ed-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

.hero-ed-card-title a:hover {
  color: var(--red);
}

.hero-ed-card-author {
  font-weight: 600;
  color: var(--ink);
}

.hero-ed-card-date {
  color: var(--muted);
}

.hero-ed-card-views {
  color: var(--faint);
  font-size: .8rem;
}

.hero-ed-card-sep {
  color: var(--div);
  opacity: .5;
}

.page-main {
  min-width: 0;
}

.home-section {
  margin-bottom: var(--s6);
}

.ncard-noimg {
  width: 100%;
  height: 100%;
  background: var(--bg2);
}

.ncard-excerpt {
  font-family: var(--fn);
  font-size: var(--sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-header-inner {
  max-width: 780px;
}

.archive-header-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .57rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: var(--s3);
}

.archive-desc {
  font-family: var(--fn);
  font-size: .9375rem;
  color: rgba(255,255,255,.6);
  margin: var(--s2) 0 0;
  line-height: 1.6;
  max-width: 600px;
}

.archive-author-hd {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.archive-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}

.archive-main {
  min-width: 0;
}

.archive-empty {
  text-align: center;
  padding: var(--s12) var(--s4);
  color: var(--muted);
}

.archive-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--s4);
}

.archive-empty-title {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--s3);
}

.archive-empty-msg {
  font-family: var(--fn);
  font-size: var(--md);
  color: var(--muted);
  margin-bottom: var(--s5);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.pagination ul li a,
.pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--s3);
  border-radius: var(--r);
  border: 1px solid var(--div);
  font-family: var(--fu);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sur);
  text-decoration: none;
  transition: all var(--t);
}

.pagination ul li span.dots {
  background: transparent;
  border-color: transparent;
}

.cat-count-badge {
  background: var(--div-s);
  color: var(--muted);
  font-family: var(--fu);
  font-size: .65rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.sidebar-widget {
  background: var(--sur);
  border-radius: var(--rl);
  border: 1px solid var(--div);
  overflow: hidden;
}

.sidebar-widget .widget-title {
  background: var(--sky-dark);
  color: #fff;
  padding: 10px 14px;
  margin: 0;
  font-family: var(--fn);
  font-size: .875rem;
  font-weight: 700;
  border-bottom: none;
}

.sidebar-widget .widget-body {
  padding: var(--s3) var(--s4);
}

.cat-layout-a {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s4);
  align-items: start;
}

.cat-main-card {
  background: var(--sur);
  border: 1px solid var(--div);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: box-shadow var(--t), transform var(--t);
}

.cat-main-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}

.cat-card-img-link {
  display: block;
}

.cat-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg2);
}

.cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}

.cat-main-card:hover .cat-card-img {
  transform: scale(1.05);
}

.cat-card-noimg {
  width: 100%;
  height: 100%;
  background: var(--bg2);
}

.cat-card-body {
  padding: var(--s3) var(--s4);
}

.cat-card-title {
  font-family: var(--fs);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--s3);
  margin-bottom: var(--s2);
}

.cat-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

.cat-card-title a:hover {
  color: var(--red);
}

.cat-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .8rem;
  color: var(--muted);
}

.cat-card-meta .sep {
  color: var(--div);
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--sur);
  border: 1px solid var(--div);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh0);
}

.cat-list-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--div-s);
  background: var(--sur);
  transition: background var(--t);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.cat-list-item:first-child {
  border-top: none;
}

.cat-list-item:last-child {
  border-bottom: none;
}

.cat-list-item:hover {
  background: var(--sur2);
}

.cat-list-thumb {
  width: 104px;
  height: 88px;
  flex-shrink: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
}

.cat-list-thumb img {
  width: 100% ;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.cat-list-item:hover .cat-list-thumb img {
  transform: scale(1.06);
}

.cat-list-thumb-empty {
  width: 100%;
  height: 100%;
  background: var(--bg2);
}

.cat-list-body {
  flex: 1;
  min-width: 0;
}

.cat-list-title {
  font-family: var(--fs);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--s1);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-top: 0;
}

.cat-list-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

.cat-list-item:hover .cat-list-title a {
  color: var(--red);
}

.cat-list-meta {
  display: none;
  align-items: center;
  gap: var(--s2);
  font-family: var(--fu);
  font-size: .72rem;
  color: var(--faint);
}

.hero-ed-sec {
  background: var(--sur);
  border-bottom: none;
  padding: 0;
  margin-bottom: var(--s2);
  margin-top: 0;
}

.hero-ed-card {
  background: var(--sur);
  border-radius: var(--rl);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--div);
  transition: box-shadow var(--t);
}

.hero-ed-sec .wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
}

.hero-ed-sec .wrap > article {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid var(--red);
}

.hero-ed-sec .wrap > article:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--rl) var(--rl);
}

.hero-ed-card:hover {
  box-shadow: var(--sh2);
}

.hero-ed-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .875rem;
  color: var(--muted);
}

.hero-ed-card-img-link {
  display: block;
  position: relative;
}

.hero-ed-card-img-wrap {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg2);
}

.hero-ed-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.hero-ed-card-img-link:hover .hero-ed-card-img {
  transform: scale(1.03);
}

.cat-list-link {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.cat-list-link:hover .cat-list-title {
  color: var(--red);
}

.cat-grid-b {
  grid-template-columns: repeat(4, 1fr);
}

.hero-ed-card-excerpt-wrap {
  padding: var(--s2) var(--s6) var(--s3);
  text-align: center;
  border-top: 1px solid var(--div-s);
}

.hero-ed-card-excerpt {
  font-family: var(--fn);
  font-size: var(--md);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   SIDEBAR CATEGORY STRIP (tabbed widget)
   ============================================================ */
.sidebar-strip {
  overflow: hidden;
}

.strip-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--sky-dark);
  border-bottom: 2px solid var(--div);
}

.strip-tabs::-webkit-scrollbar {
  display: none;
}

.strip-tab {
  flex-shrink: 0;
  padding: 9px 13px;
  font-family: var(--fn);
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t), background var(--t);
  line-height: 1;
  margin-bottom: -2px;
}

.strip-tab:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.07);
}

.strip-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(255,255,255,.04);
}

.strip-panels {
  position: relative;
}

.strip-panel {
  display: flex;
  flex-direction: column;
}

.strip-panel[hidden] {
  display: none;
}

.strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.strip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--div-s);
  transition: background var(--t);
}

.strip-item:last-child {
  border-bottom: none;
}

.strip-item:hover {
  background: var(--div-s);
}

.strip-num {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--div-s);
  color: var(--muted);
  font-family: var(--fu);
  font-size: .65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background var(--t), color var(--t);
}

.strip-item:nth-child(1) .strip-num,
.strip-item:nth-child(2) .strip-num {
  background: var(--red);
  color: #fff;
}

.strip-title {
  font-family: var(--fs);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

.strip-title:hover {
  color: var(--red);
}

.strip-more {
  display: block;
  padding: 9px 13px;
  font-family: var(--fu);
  font-size: .68rem;
  font-weight: 700;
  color: var(--red);
  text-align: right;
  border-top: 2px solid var(--div-s);
  text-decoration: none;
  transition: color var(--t), background var(--t);
}

.strip-more:hover {
  color: var(--red-d);
  background: var(--red-l);
}

[data-theme=dark] .strip-tab {
  color: rgba(255,255,255,.45);
}

[data-theme=dark] .strip-tab.active {
  color: var(--gold);
}

[data-theme=dark] .strip-item:hover {
  background: var(--dk-sur2);
}

[data-theme=dark] .strip-num {
  background: var(--dk-brd);
  color: #888;
}

.hero-ed-card-text {
  padding: var(--s4) var(--s6) var(--s3);
  border-bottom: 1px solid var(--div-s);
  text-align: center;
}

.hero-ed-card-title {
  font-family: var(--fn);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 var(--s3);
  letter-spacing: -.01em;
}

.bnav-ad .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-ad-strip .sec-ad-label,
.sec-ad-label {
  display: none;
}

.sidebar-col .widget-ad,
.sidebar-col .widget.widget-ad,
.sidebar-col .wbox.widget-ad {
  all: unset;
  display: block;
  width: 100%;
  text-align: center;
}

.sidebar-col .widget-ad img,
.sidebar-col .widget.widget-ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  margin: 0;
}

.sidebar-col,
.site-sidebar {
  gap: var(--s2);
}

.sidebar-col > .wbox > .widget {
  padding: 8px 12px;
}

.sidebar-col > .wbox > .widget.widget-ad,
.sidebar-col > .widget.widget-ad {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.page-wrap,
.single-wrap,
.site-layout {
  padding-top: var(--s4);
  padding-bottom: var(--s6);
  background: transparent;
}

.grid-4.cat-grid-b {
  gap: var(--s3);
}


/* ============================================================
   ARCHIVE PAGE (header, featured post, grid)
   ============================================================ */
.arc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: 10px;
  margin-bottom: var(--s5);
  border-bottom: 3px solid var(--div);
  position: relative;
}

.arc-hd::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

.arc-hd-left {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.arc-hd-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}

.arc-flag {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .80rem;
  font-weight: 800;
  text-transform: uppercase;
  /* letter-spacing: 1.2px; */
  padding: 1.5px 3px;
  border-radius: 3px;
  flex-shrink: 0;
}

.arc-author-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--div);
  flex-shrink: 0;
}

.arc-hd-text {
  min-width: 0;
}

.arc-name {
  font-family: var(--fn);
  font-size: var(--xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-name span {
  color: var(--red);
}

.arc-desc {
  font-family: var(--fn);
  font-size: var(--sm);
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-count {
  font-family: var(--fu);
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--div-s);
  border: 1px solid var(--div);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.arc-rss {
  color: var(--faint);
  display: flex;
  align-items: center;
  transition: color var(--t);
}

.arc-rss:hover {
  color: var(--gold);
}

.arc-featured {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  margin-bottom: var(--s5);
  background: var(--sur);
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--div);
  box-shadow: var(--sh1);
  transition: box-shadow var(--t);
}

.arc-featured:hover {
  box-shadow: var(--sh2);
}

.arc-feat-img-link {
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.arc-feat-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background: var(--bg2);
}

.arc-feat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.arc-feat-img-link:hover .arc-feat-img {
  transform: scale(1.04);
}

.arc-feat-noimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg2);
}

.arc-feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.35) 0%,
    transparent 45%
  );
  pointer-events: none;
}

.arc-feat-badge {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  background: var(--red);
  color: #fff;
  font-family: var(--fu);
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 3px;
  z-index: 2;
  transition: background var(--t);
}

.arc-feat-badge:hover {
  background: var(--red-d);
  color: #fff;
}

.arc-feat-body {
  padding: var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}

.arc-feat-title {
  font-family: var(--fs);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.arc-feat-title a {
  color: inherit;
  text-decoration: none;
}

.arc-feat-title a:hover {
  color: var(--red);
}

.arc-feat-excerpt {
  font-family: var(--fn);
  font-size: var(--sm);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-feat-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--fu);
  font-size: .68rem;
  color: var(--faint);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--div-s);
}

.arc-feat-author {
  font-weight: 700;
  color: var(--ink);
}

.arc-meta-sep {
  opacity: .4;
}

.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.arc-empty {
  text-align: center;
  padding: var(--s12) var(--s4);
}

.arc-empty-icon {
  font-size: 3.5rem;
  margin-bottom: var(--s3);
}

.arc-empty-title {
  font-family: var(--fs);
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.arc-empty-msg {
  font-family: var(--fn);
  font-size: var(--md);
  color: var(--muted);
  margin-bottom: var(--s5);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ft-brand h3 a {
  color: #fff;
  text-decoration: none;
}

#site-footer .ft-main {
  border-bottom: 1px solid var(--sky-border);
}

.ncard,
.news-card,
.cat-main-card,
.cat-list,
.arc-featured,
.wbox,
.art-wrap {
  background: #fff;
}

.mr-item:nth-child(1) .mr-num,
.mr-item:nth-child(2) .mr-num {
  background: var(--red);
}

.mr-item:nth-child(3) .mr-num,
.mr-item:nth-child(4) .mr-num {
  background: var(--sky-dark);
}

.pagination ul li span.current,
.pagination ul li a:hover {
  background: var(--red);
  border-color: var(--red);
}

[data-theme=dark] #util-bar,
[data-theme=dark] .wbox-hd,
[data-theme=dark] .trend-hd,
[data-theme=dark] .strip-tabs,
[data-theme=dark] #site-footer {
  background: #071520;
}

[data-theme=dark] body {
  background: #0F1E2E;
}

.custom-logo-link,
.logo-link {
  display: inline-block;
  line-height: 1;
}

.custom-logo-link img,
.logo-img {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

.hdr-np-date {
  font-family: var(--fn);
  font-size: .68rem;
  color: var(--muted);
  line-height: 1;
}

.hdr-ad img,
.hdr-ad > * {
  max-width: 100%;
  height: auto;
}

.page-main > .home-section:last-child {
  margin-bottom: 0;
}


/* ============================================================
   RESPONSIVE (grouped, largest breakpoint to smallest)
   ============================================================ */
@media (max-width: 1024px) {
  .page-wrap,.single-wrap,.site-layout {
    grid-template-columns: 1fr;
  }

  .page-wrap .sidebar-col,
    .single-wrap .sidebar-col,
    .site-sidebar {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2,1fr);
  }

  .latest-wrap {
    grid-template-columns: 1fr;
  }

  .trend-rail {
    display: none;
  }

  .latest-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ft-main {
    grid-template-columns: 1fr 1fr;
  }

  .hero-ed-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-layout-a {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .cat-main-card {
    width: 100%;
  }

  .cat-card-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .cat-list {
    width: 100%;
  }

  .cat-list-item {
    padding: var(--s3) var(--s4);
  }

  .cat-list-thumb {
    width: 100px;
    height: 78px;
  }

  .hero-ed-card-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .hero-ed-card-title {
    font-size: clamp(1.3rem, 3vw, 2rem);
  }

  .hero-ed-card-text {
    padding: var(--s5) var(--s6);
  }

  .cat-grid-b {
    grid-template-columns: repeat(2, 1fr);
  }

  .arc-featured {
    grid-template-columns: 1fr;
  }

  .arc-feat-img-wrap {
    min-height: 220px;
    aspect-ratio: 16 / 8;
    height: auto;
  }

  .arc-feat-img {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .arc-feat-body {
    padding: var(--s4);
  }

  .arc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hdr-row {
    grid-template-columns: 1fr auto;
  }

  .hdr-ad {
    display: none;
  }

  .custom-logo-link img,
    .logo-img {
    height: 40px;
  }

  .site-name {
    font-size: var(--xl);
  }
}

@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2,1fr);
  }

  .layout-a {
    grid-template-columns: 1fr;
  }

  .layout-a-left .ncard-img-w {
    aspect-ratio: 16/9;
  }

  .layout-b-top,.layout-b-bottom,.layout-a-compact {
    grid-template-columns: repeat(2,1fr);
  }

  .nl-row {
    flex-direction: column;
  }

  .nl-form {
    min-width: 0;
    width: 100%;
  }

  .nl-text {
    text-align: center;
  }

.pmenu { display: none; }
  .hdr-ad { display: none; }
  .hdr-row { display: none; }

  /* Mobile nav bar inside #pnav */
  .pnav-row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    min-height: 50px;
    padding: 6px 0;
  }
  .mob-tog {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }
  .pnav-logo {
    grid-column: 2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pnav-logo .site-name {
    font-family: var(--fs);
    font-size: var(--xl);
    font-weight: 800;
    color: #fff;
    margin: 0;
    white-space: nowrap;
  }
  .pnav-logo .logo-img {
    height: 36px;
    width: auto;
  }
  .pnav-ctrls {
    grid-column: 3;
    justify-self: end;
    padding-right: 6px;
  }


  .hero-inner {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0;
  }

  .featured-main {
    height: 360px;
  }

  .featured-secondary {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
    height: auto;
  }

  .featured-item {
    flex: 1 1 calc(50% - 2px);
    height: 160px;
    position: relative;
    min-height: 0;
  }

  .featured-title {
    font-size: clamp(1.2rem,4vw,1.8rem);
  }

  .featured-content {
    padding: var(--s6) var(--s4) var(--s4);
  }

  .hero-ed-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .hero-ed-card-text {
    padding: var(--s3) var(--s4) var(--s2);
  }

  .hero-ed-card-title {
    font-size: clamp(1.15rem, 3.5vw, 1.75rem);
  }

  .hero-ed-card-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .trend-rail {
    display: none;
  }

  .home-section {
    margin-bottom: var(--s5);
  }

  .ft-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }
}

@media (max-width: 600px) {
  .mr-grid {
    grid-template-columns: 1fr;
  }

  .mr-item {
    border-right: none;
  }

  .mr-item:last-child {
    border-bottom: none;
  }

  .art-wrap {
    padding: var(--s5) var(--s4);
    border-radius: 0;
    box-shadow: none;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .hero-ed-text {
    padding: var(--s4) var(--s4) var(--s3);
  }

  .cat-sec {
    margin-bottom: var(--s6);
  }

  .cat-layout-a {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .cat-card-img-wrap {
    display: block;
    aspect-ratio: 16 / 10;
  }

  .cat-card-body {
    padding: var(--s4) var(--s4);
  }

  .cat-card-title {
    font-size: 1.05rem;
    margin-bottom: var(--s2);
  }

  .cat-list-item {
    gap: 10px;
    padding: 8px 10px;
  }

  .cat-list-thumb {
    width: 100px;
    height: 78px;
  }

  .cat-list-title {
    font-size: 1rem;
    -webkit-line-clamp: 4;
  }

  .cat-list-meta {
    font-size: .65rem;
  }

  .hero-ed-card-text {
    padding: var(--s4) var(--s5);
  }

  .hero-ed-card-excerpt-wrap {
    padding: var(--s3) var(--s4) var(--s4);
  }

  .arc-hd {
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .arc-name {
    font-size: var(--lg);
    white-space: normal;
  }

  .arc-desc {
    display: none;
  }

  .arc-feat-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .arc-feat-title {
    font-size: 1.1rem;
  }

  .arc-feat-excerpt {
    -webkit-line-clamp: 2;
  }

  .hdr-row {
    grid-template-columns: 1fr auto;
    gap: var(--s3);
  }

  .hdr-ad {
    display: none;
  }

  .hdr-social .soc-row {
    display: none;
  }

  .hdr-social {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .custom-logo-link img,
    .logo-img {
    height: 50px;
    max-width: 160px;
  }

  .site-name {
    font-size: var(--lg);
  }

  .np-date {
    font-size: .62rem;
  }

  #site-hdr {
    padding: 8px 0;
  }
}

@media (max-width: 580px) {
  .ft-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .grid-2,.grid-3,.grid-4 {
    grid-template-columns: 1fr;
  }

  .latest-grid {
    grid-template-columns: repeat(1,1fr);
    gap: var(--s2);
  }

  .layout-b-top,.layout-b-bottom,.layout-a-compact {
    grid-template-columns: 1fr;
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }

 .art-author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s3);
    padding: var(--s2);
  }
  /* .view-all {
    display: flex;
    justify-content: center;
    width: 100%;
  } */

  .art-author-avatar,
  .art-author-img {
    margin: 0 auto;
  }

  .art-author-content {
    width: 100%;
  }

  .art-nav {
    grid-template-columns: 1fr;
  }

  .art-nav-item.next {
    text-align: left;
  }

  .ft-bot {
    flex-direction: column;
    text-align: center;
    padding: var(--s3) 0;
  }

  .ft-policy {
    justify-content: center;
  }

  .alignleft,.alignright {
    float: none;
    margin: 0 0 var(--s4);
    width: 100%;
  }

  .featured-main {
    height: 300px;
  }

  .featured-secondary {
    flex-direction: column;
    gap: 3px;
  }

  .featured-item {
    flex: none;
    height: 130px;
  }

  .featured-item:nth-child(n/**/+3) {
    display: none;
  }

  .featured-title {
    font-size: 1.2rem;
  }

  .featured-meta-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .site-name {
    font-size: var(--xl);
  }

  .page-wrap,.single-wrap {
    padding: var(--s4) var(--s3);
  }

  .hero-ed-img-wrap {
    aspect-ratio: 4 / 3;
  }

  .hero-ed-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-ed-card-title {
    font-size: 1.35rem;
  }

  .hero-ed-card-meta {
    font-size: .72rem;
    gap: var(--s2);
  }

  .hero-ed-card-img-wrap { aspect-ratio: 16 / 10; }


  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s3);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s3);
  }

  .archive-author-hd {
    flex-direction: column;
    align-items: flex-start;
  }

  .sec-ttl {
    font-size: var(--lg);
  }

  .hero-ed-title {
    font-size: 1.35rem;
  }

  .hero-ed-meta {
    font-size: .72rem;
  }

  .hero-ed-text {
    padding: var(--s4) var(--s3) var(--s3);
  }

  .hero-ed-item-title {
    font-size: .8rem;
    -webkit-line-clamp: 2;
  }

  .hero-ed-item-body {
    padding: var(--s2) var(--s3);
  }

  .sec-hd {
    margin-bottom: var(--s4);
  }

  .mr-grid {
    grid-template-columns: 1fr;
  }

  .mr-item {
    border-right: none;
  }

  .mr-item:last-child {
    border-bottom: none;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nl-strip {
    padding: var(--s8) 0;
    margin: var(--s6) 0;
  }

  .nl-ttl {
    font-size: var(--xl);
  }

  .nl-form {
    min-width: 0;
    width: 100%;
  }

  .page-wrap, .single-wrap, .site-layout {
    padding: var(--s4) var(--s3);
  }

  .ft-main {
    grid-template-columns: 1fr;
    gap: var(--s4);
    padding: var(--s5) 0 var(--s3);
  }

  .hero-ed-card-text {
    padding: var(--s4) var(--s5);
    border-bottom: none;
  }

  .hero-ed-card {
    border-bottom: 2px solid var(--red);
  }

  .hero-ed-card:last-child {
    border-bottom: none;
  }

  .hero-ed-card-sep {
    opacity: .3;
  }

  .hero-ed-card-excerpt {
    display: none;
  }

  .cat-grid-b {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: var(--s3);
  }

  .hero-ed-card-excerpt-wrap {
    display: none;
  }

  .home-section {
    margin-bottom: var(--s4);
  }

  .sec-ad-strip {
    margin: var(--s3) 0;
    padding: var(--s2);
  }

  .bnav-ad {
    padding: 2px 0;
  }

  .ncard-body {
    padding: var(--s2) var(--s3);
  }

  .arc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }

  .arc-featured {
    border-radius: var(--r);
  }

  .brk-label {
    font-size: .55rem;
    padding: 0 10px 0 10px;
  }

  .brk-item {
    font-size: .8rem;
  }

  .page-wrap,
    .single-wrap,
    .site-layout {
    padding: var(--s3) var(--s2);
  }
}

@media (max-width: 400px) {
  .custom-logo-link img,
    .logo-img {
    height: 50px;
    max-width: 200px;
  }

  .site-name {
    font-size: var(--base);
  }
}

@media (max-width: 380px) {
  .cat-layout-a {
    gap: 8px;
  }

  .cat-list-thumb {
    width: 100px;
    height: 78px;
  }

  .cat-list-title {
    font-size: 100rem;
  }

  .cat-card-title {
    font-size: 1rem;
  }
}


@media (max-width:768px){

  .pnav-logo .custom-logo{
      max-height:60px;
      width:auto;
  }

.mob-hd{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.mob-logo{
    flex:1;
}

.mob-close{
    flex-shrink:0;
}

  .mob-logo .custom-logo{
      max-height:62px;
      /* width:auto; */
      max-width: 200px;
  }

  .mob-logo .custom-logo-link{
      display:flex;
      align-items:center;
  }

}


.pnav-logo{
    display:none;
}

@media (max-width:768px){

    .pnav-logo{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .pnav-logo .custom-logo{
        height:50px;
        width:auto;
        max-width:200px;
    }

    .mob-logo .custom-logo{
        height:70px;
        width:auto;
        max-width:250px;
    }

    .mob-logo .custom-logo-link{
        display:flex;
        align-items:center;
        width: 100%;
    }
}



/* Sidebar widget spacing fix */
.sidebar-col .wbox,
.sidebar-col .widget,
.sidebar-col .widget-ad,
.site-sidebar .wbox,
.site-sidebar .widget {
  margin-bottom: 0;
}

.sidebar-col .widget {
  padding: var(--s4) var(--s4);
}

.sidebar-col .wbox-hd {
  padding: 11px 16px;
}

/* Ad widget: no extra padding, just top/bottom breathing room */
.sidebar-col .widget.widget-ad {
  padding: 0;
}

/* Space between ad label and the ad itself */
.sidebar-col .ad-label {
  display: block;
  text-align: center;
  padding: var(--s2) 0 4px;
  font-size: 8px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.widget-post-item {
  text-align: left;
}

.widget-post-item__content {
  text-align: left;
}

.widget-post-item__title,
.widget-post-item__title a,
.widget-post-item__date {
  text-align: left;
}