/* ============================================================
   Write For Us AI — Warm Editorial Theme
   Cream + Emerald + Charcoal · all-sans · information-dense
   ============================================================ */
:root {
  /* Warm neutrals */
  --bg: #f6f2ea;
  --bg-soft: #efe9dd;
  --surface: #fffdf8;
  --surface-2: #faf6ee;
  --ink: #1c1a16;
  --ink-soft: #514c43;
  --muted: #8d877b;
  --line: #e6dece;
  --line-strong: #d8cebb;

  /* Emerald brand */
  --brand: #0f7d54;
  --brand-ink: #0a5c3d;
  --brand-soft: #e4f1e9;
  --brand-2: #16a06a;
  --gold: #c79a3a;

  --gradient: linear-gradient(125deg, #0f7d54 0%, #16a06a 100%);
  --gradient-dark: linear-gradient(160deg, #123a2b 0%, #0a2018 100%);

  --shadow-xs: 0 1px 2px rgba(28, 26, 22, 0.06);
  --shadow-sm: 0 4px 14px rgba(28, 26, 22, 0.07);
  --shadow-md: 0 14px 34px rgba(28, 26, 22, 0.1);
  --shadow-lg: 0 30px 64px rgba(28, 26, 22, 0.16);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1280px;

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.display { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.center { text-align: center; }
.mt-32 { margin-top: 32px; }

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--ink); color: #ece7dd; font-size: 12.5px;
  letter-spacing: 0.01em; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar a { opacity: 0.78; transition: opacity 0.2s; font-weight: 500; }
.topbar a:hover { opacity: 1; }
.topbar .tb-links { display: flex; gap: 20px; }
.topbar .tb-info { color: #b9b2a4; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 248, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 26px; height: 68px; }

/* Typographic logo (text inside a rectangle) */
.logo-box {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--ink); border-radius: 10px;
  padding: 6px 8px 6px 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1;
  transition: all 0.16s; white-space: nowrap;
}
.logo-box:hover { border-color: var(--brand); transform: translateY(-1px); }
.logo-box .lb-text { text-transform: uppercase; letter-spacing: 0.01em; }
.logo-box .lb-ai {
  background: var(--gradient); color: #fff; font-size: 13px; font-weight: 800;
  padding: 5px 8px; border-radius: 6px; letter-spacing: 0.03em;
}
.logo-box.on-dark { color: #fff; border-color: rgba(255,255,255,0.28); }
.logo-box.on-dark:hover { border-color: var(--brand-2); }

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  padding: 8px 13px; border-radius: 9px; font-weight: 600; font-size: 14.5px;
  color: var(--ink-soft); transition: all 0.16s; letter-spacing: -0.01em;
}
.nav a:hover { color: var(--ink); background: var(--bg-soft); }
.nav a.active { color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: all 0.16s; color: var(--ink-soft);
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 18px; border-radius: 11px; font-weight: 700; font-size: 14.5px;
  border: none; transition: all 0.16s; font-family: var(--font-body); letter-spacing: -0.01em;
}
.btn-primary { background: var(--gradient); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #f6f2ea; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.menu-toggle { display: none; }

/* ---------------- Chips / tags ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 5px 11px; border-radius: 7px; color: #fff; background: var(--brand);
  font-family: var(--font-display);
}
.tag {
  display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); transition: all 0.16s;
}
.tag:hover { border-color: var(--brand); color: var(--brand); }

/* ---------------- Hero / featured ---------------- */
.hero { padding: 28px 0 8px; }
.home-intro {
  padding: 36px 0 28px;
  background: linear-gradient(180deg, rgba(228,241,233,0.45) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.home-intro-wrap {
  text-align: center;
}
.home-intro-wrap .chip { margin-bottom: 16px; }
.home-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 980px;
  margin: 0 auto 14px;
}
.home-intro-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 820px;
  margin: 0 auto 20px;
}
.home-intro-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  max-width: 1100px;
  margin: 0 auto 26px;
  text-align: left;
}
.home-intro-detail p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.home-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.hero-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.hero-side { display: grid; gap: 16px; }

.feature-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 420px; display: flex; align-items: flex-end; color: #fff;
  box-shadow: var(--shadow-sm); isolation: isolate; background: var(--ink);
}
.feature-card .ph { position: absolute; inset: 0; z-index: -2; transition: transform 0.6s; }
.feature-card img.ph { object-fit: cover; width: 100%; height: 100%; }
.feature-card:hover .ph { transform: scale(1.05); }
.feature-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,12,10,0.92) 0%, rgba(10,12,10,0.3) 52%, rgba(10,12,10,0) 100%);
}
.feature-card .fc-body { padding: 26px; }
.feature-card.small { min-height: 202px; }
.feature-card.small .fc-body { padding: 18px; }
.feature-card h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 6px; line-height: 1.12; }
.feature-card.small h3 { font-size: 18px; margin: 8px 0 0; font-family: var(--font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.feature-card .meta { font-size: 12.5px; opacity: 0.88; display: flex; gap: 10px; align-items: center; font-weight: 500; }

/* ---------------- Section header ---------------- */
.section { padding: 30px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-head h2 {
  font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 11px;
}
.section-head h2::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: var(--gradient); }
.section-link { font-weight: 700; color: var(--brand); font-size: 14px; }

/* ---------------- Homepage niche rows (3 latest per category) ---------------- */
.cat-sections { padding-top: 20px; padding-bottom: 48px; background: var(--bg-soft); }
.cat-blocks-empty { text-align: center; padding: 40px 20px; color: var(--muted); }

.home-niche {
  --accent: var(--brand);
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.home-niche:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.home-niche-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.home-niche-title { display: flex; align-items: flex-start; gap: 12px; }
.home-niche-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
  margin-top: 8px; flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.home-niche-title h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.15;
}
.home-niche-title p {
  font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; max-width: 520px;
}
.home-niche-link {
  font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap;
  padding-top: 4px; transition: opacity 0.16s;
}
.home-niche-link:hover { opacity: 0.75; }

.home-niche-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

.niche-post {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--line);
}
.niche-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.niche-post-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.niche-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.niche-post:hover .niche-post-thumb img { transform: scale(1.05); }
.niche-post-body { padding: 16px 17px 18px; }
.niche-post-body h4 {
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px;
}
.niche-post:hover h4 { color: var(--accent); }
.niche-post-body p {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.niche-post-meta {
  display: flex; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 500;
  padding-top: 12px; border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .home-niche-grid { grid-template-columns: 1fr; }
  .home-niche-head { flex-direction: column; align-items: flex-start; }
}

/* Full-bleed niche band */
.niche-strip {
  --niche: var(--cat-color, #0f7d54);
  padding: 44px 0;
  margin-top: 0;
}
.niche-strip + .niche-strip { margin-top: 0; }

.niche-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 28px; padding-bottom: 18px;
}
.niche-head-text { max-width: 640px; }
.niche-head h3 {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
}
.niche-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 8px;
}
.niche-desc { font-size: 14.5px; line-height: 1.5; margin-top: 8px; max-width: 520px; font-weight: 500; }
.niche-link {
  font-weight: 700; font-size: 14px; white-space: nowrap;
  padding-bottom: 3px; border-bottom: 2px solid currentColor; transition: opacity 0.16s;
}
.niche-link:hover { opacity: 0.72; }

/* Shared item reset — no card boxes */
.ni { display: block; text-decoration: none; transition: opacity 0.18s; }
.ni:hover { opacity: 0.88; }
.ni h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ni .meta { font-size: 12.5px; font-weight: 500; opacity: 0.72; }
.ni-visual { overflow: hidden; }
.ni-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ni:hover .ni-visual img { transform: scale(1.04); }

.flow-multi { /* category pages with many posts */ }

/* --- TECH: dark band, image + type columns --- */
.niche-tech {
  background: linear-gradient(180deg, #12151c 0%, #181d28 100%);
  color: #eef1ff;
}
.niche-tech .niche-head h3 { color: #eef1ff; }
.niche-tech .niche-head { border-bottom: 1px solid rgba(129,140,248,0.25); }
.niche-tech .niche-label { color: #818cf8; }
.niche-tech .niche-desc { color: #8b95ad; }
.niche-tech .niche-link { color: #a5b4fc; }
.flow-tech {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px;
}
.flow-tech.flow-multi { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.ni-tech .ni-visual { aspect-ratio: 16/10; margin-bottom: 14px; }
.ni-tech h4 { color: #eef1ff; font-size: 17px; margin-bottom: 8px; }
.ni-tech h4:hover { color: #a5b4fc; }
.ni-tech .meta { color: #6b7590; font-family: ui-monospace, monospace; font-size: 11px; }

/* --- AI / AI TOOLS: emerald editorial band --- */
.niche-ai,
.niche-ai-tools {
  background: linear-gradient(180deg, #0a2e1f 0%, #0f3d2a 100%);
  color: #ecfdf5;
}
.niche-ai .niche-head h3,
.niche-ai-tools .niche-head h3 { color: #ecfdf5; }
.niche-ai .niche-head,
.niche-ai-tools .niche-head { border-bottom: 1px solid rgba(52,211,153,0.25); }
.niche-ai .niche-label,
.niche-ai-tools .niche-label { color: #34d399; }
.niche-ai .niche-desc,
.niche-ai-tools .niche-desc { color: #6ee7b7; }
.niche-ai .niche-link,
.niche-ai-tools .niche-link { color: #6ee7b7; }

.flow-ai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.flow-ai.flow-multi { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.ni-ai .ni-visual { aspect-ratio: 16/10; margin-bottom: 14px; }
.ni-ai h4 { color: #ecfdf5; font-size: 17px; margin-bottom: 8px; }
.ni-ai h4:hover { color: #6ee7b7; }
.ni-ai .meta { color: #a7f3d0; font-size: 12px; }

/* --- FINANCE: editorial columns, rules only --- */
.niche-finance {
  background: linear-gradient(180deg, #faf3e4 0%, var(--bg) 100%);
}
.niche-finance .niche-head h3 { color: #2a2010; }
.niche-finance .niche-head { border-bottom: 2px solid #c79a3a; }
.niche-finance .niche-label { color: #9a7209; }
.niche-finance .niche-desc { color: #7a6840; }
.niche-finance .niche-link { color: #9a7209; }
.flow-finance {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.flow-finance.flow-multi { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
.ni-finance {
  padding: 0 28px; border-left: 1px solid #dcc88a;
}
.ni-finance:first-child { border-left: none; padding-left: 0; }
.flow-finance.flow-multi .ni-finance { border-left: 1px solid #dcc88a; padding: 0 20px; }
.flow-finance.flow-multi .ni-finance:nth-child(3n+1) { border-left: none; padding-left: 0; }
.ni-finance .ni-num {
  display: block; font-size: 48px; font-weight: 800; color: #e8c96a;
  line-height: 1; margin-bottom: 12px; font-family: var(--font-display);
}
.ni-finance h4 { color: #2a2010; font-size: 18px; margin-bottom: 10px; }
.ni-finance h4:hover { color: #9a7209; }
.ni-finance p { font-size: 14px; color: #6b5a38; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ni-finance .meta { color: #a08950; }

/* --- HEALTH: airy flowing list --- */
.niche-health {
  background: linear-gradient(180deg, #edf8f2 0%, transparent 100%);
}
.niche-health .niche-head h3 { color: #0d4a32; }
.niche-health .niche-head { border-bottom: 1px solid rgba(22,160,106,0.2); }
.niche-health .niche-label { color: #16a06a; }
.niche-health .niche-desc { color: #4a7560; }
.niche-health .niche-link { color: #0f7d54; }
.flow-health { display: flex; flex-direction: column; gap: 0; }
.ni-health {
  display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid rgba(22,160,106,0.12);
}
.ni-health:last-child { border-bottom: none; }
.ni-health .ni-visual { width: 100px; height: 100px; border-radius: 50%; }
.ni-health h4 { color: #0d4a32; font-size: 17px; margin-bottom: 6px; }
.ni-health h4:hover { color: #16a06a; }
.ni-health .meta { color: #5a8a70; }

/* --- TRAVEL: edge-to-edge image panels --- */
.niche-travel {
  background: linear-gradient(180deg, #e0f4fa 0%, var(--bg) 100%);
}
.niche-travel .niche-head h3 { color: #0c4a6e; }
.niche-travel .niche-head { border-bottom: 1px solid rgba(8,145,178,0.2); }
.niche-travel .niche-label { color: #0891b2; }
.niche-travel .niche-desc { color: #3d6b7a; }
.niche-travel .niche-link { color: #0e7490; }
.flow-travel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.flow-travel.flow-multi { gap: 8px; }
.ni-travel {
  position: relative; min-height: 280px; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.ni-travel .ni-visual { position: absolute; inset: 0; }
.ni-travel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,40,58,0.88) 0%, rgba(6,40,58,0.15) 55%, transparent 100%);
}
.ni-travel .ni-overlay { position: relative; z-index: 2; padding: 22px 18px; }
.ni-travel h4 { font-size: 17px; margin-bottom: 6px; }
.ni-travel .meta { color: rgba(255,255,255,0.82); }

/* --- LIFESTYLE: magazine spread --- */
.niche-lifestyle {
  background: linear-gradient(180deg, #fce8f0 0%, var(--bg) 100%);
}
.niche-lifestyle .niche-head h3 { color: #831843; }
.niche-lifestyle .niche-head { border-bottom: 1px solid rgba(219,39,119,0.2); }
.niche-lifestyle .niche-label { color: #db2777; }
.niche-lifestyle .niche-desc { color: #9d4a6a; }
.niche-lifestyle .niche-link { color: #be185d; }
.flow-lifestyle-home {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start;
}
.flow-lifestyle-side { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.ni-lifestyle-hero {
  position: relative; min-height: 340px; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.ni-lifestyle-hero .ni-visual { position: absolute; inset: 0; }
.ni-lifestyle-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(60,10,35,0.88), transparent 50%);
}
.ni-lifestyle-hero .ni-overlay { position: relative; z-index: 2; padding: 28px; }
.ni-lifestyle-hero h4 { font-size: clamp(22px, 2.5vw, 28px); margin-bottom: 8px; }
.flow-lifestyle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; margin-top: 32px; }
.ni-lifestyle-text { padding: 0 0 20px; border-bottom: 1px solid rgba(219,39,119,0.15); }
.ni-lifestyle-text h4 { color: #500724; font-size: 18px; margin-bottom: 8px; }
.ni-lifestyle-text h4:hover { color: #db2777; }
.ni-lifestyle-text p { font-size: 14px; color: #7a4058; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ni-lifestyle-text .meta { color: #9d4a6a; }

/* --- BUSINESS: typographic wire --- */
.niche-business {
  background: linear-gradient(180deg, #f5f3ff 0%, var(--bg) 100%);
}
.niche-business .niche-head h3 { color: #2e1065; }
.niche-business .niche-head { border-bottom: 2px solid #7c3aed; }
.niche-business .niche-label { color: #7c3aed; }
.niche-business .niche-desc { color: #5b4b7a; }
.niche-business .niche-link { color: #6d28d9; }
.flow-business { display: flex; flex-direction: column; }
.ni-business {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid #e9e0ff;
}
.ni-business:last-child { border-bottom: none; }
.ni-business .ni-visual { aspect-ratio: 4/3; }
.ni-business h4 { color: #1e1033; font-size: 18px; margin-bottom: 5px; }
.ni-business h4:hover { color: #7c3aed; }
.ni-business p { font-size: 14px; color: #6b5b80; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ni-business .ni-time { font-size: 13px; font-weight: 700; color: #8b7aa8; white-space: nowrap; }

/* --- MARKETING: orange growth theme --- */
.niche-marketing {
  background: linear-gradient(180deg, #fff7ed 0%, var(--bg) 100%);
}
.niche-marketing .niche-head h3 { color: #431407; }
.niche-marketing .niche-head { border-bottom: 2px solid #f97316; }
.niche-marketing .niche-label { color: #ea580c; }
.niche-marketing .niche-desc { color: #9a3412; }
.niche-marketing .niche-link { color: #c2410c; }
.flow-marketing { display: flex; flex-direction: column; }
.ni-marketing {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid #fed7aa;
}
.ni-marketing:last-child { border-bottom: none; }
.ni-marketing .ni-visual { aspect-ratio: 4/3; }
.ni-marketing h4 { color: #431407; font-size: 18px; margin-bottom: 5px; }
.ni-marketing h4:hover { color: #ea580c; }
.ni-marketing p { font-size: 14px; color: #9a3412; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ni-marketing .ni-time { font-size: 13px; font-weight: 700; color: #c2410c; white-space: nowrap; }

/* --- DEFAULT --- */
.niche-default { background: var(--bg-soft); }
.niche-default .niche-head { border-bottom: 1px solid var(--line); }
.niche-default .niche-label { color: var(--niche); }
.niche-default .niche-link { color: var(--brand); }
.flow-default {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px;
}
.ni-default .ni-visual { aspect-ratio: 16/10; margin-bottom: 12px; }
.ni-default h4 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.ni-default h4:hover { color: var(--brand); }

/* --- Category page --- */
.page-head-niche { padding: 52px 0 40px; text-align: center; border-bottom: none; }
.page-head-niche .container { max-width: var(--maxw); }
.page-head-niche .niche-label { display: block; margin-bottom: 10px; }
.page-head-niche h1 {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
  color: inherit;
}
.page-head-niche .niche-page-desc {
  max-width: 560px; margin: 12px auto 0; font-size: 16.5px; line-height: 1.55;
}

.page-head-niche-tech { background: linear-gradient(180deg, #12151c, #181d28); color: #eef1ff; }
.page-head-niche-tech .niche-label { color: #818cf8; }
.page-head-niche-tech .niche-page-desc { color: #8b95ad; }

.page-head-niche-ai,
.page-head-niche-ai-tools { background: linear-gradient(180deg, #0a2e1f, #0f3d2a); color: #ecfdf5; }
.page-head-niche-ai .niche-label,
.page-head-niche-ai-tools .niche-label { color: #34d399; }
.page-head-niche-ai .niche-page-desc,
.page-head-niche-ai-tools .niche-page-desc { color: #6ee7b7; }

.page-head-niche-marketing { background: linear-gradient(180deg, #fff7ed, var(--bg)); border-bottom: 2px solid #f97316; }
.page-head-niche-marketing h1 { color: #431407; }
.page-head-niche-marketing .niche-label { color: #ea580c; }
.page-head-niche-marketing .niche-page-desc { color: #9a3412; }

.page-head-niche-finance { background: linear-gradient(180deg, #faf3e4, var(--bg)); border-bottom: 2px solid #c79a3a; }
.page-head-niche-finance h1 { color: #2a2010; }
.page-head-niche-finance .niche-label { color: #9a7209; }
.page-head-niche-finance .niche-page-desc { color: #7a6840; }

.page-head-niche-health { background: linear-gradient(180deg, #edf8f2, var(--bg)); }
.page-head-niche-health h1 { color: #0d4a32; }
.page-head-niche-health .niche-label { color: #16a06a; }
.page-head-niche-health .niche-page-desc { color: #4a7560; }

.page-head-niche-travel { background: linear-gradient(180deg, #e0f4fa, var(--bg)); }
.page-head-niche-travel h1 { color: #0c4a6e; }
.page-head-niche-travel .niche-label { color: #0891b2; }
.page-head-niche-travel .niche-page-desc { color: #3d6b7a; }

.page-head-niche-lifestyle { background: linear-gradient(180deg, #fce8f0, var(--bg)); }
.page-head-niche-lifestyle h1 { color: #831843; }
.page-head-niche-lifestyle .niche-label { color: #db2777; }
.page-head-niche-lifestyle .niche-page-desc { color: #9d4a6a; }

.page-head-niche-business { background: linear-gradient(180deg, #f5f3ff, var(--bg)); border-bottom: 2px solid #7c3aed; }
.page-head-niche-business h1 { color: #2e1065; }
.page-head-niche-business .niche-label { color: #7c3aed; }
.page-head-niche-business .niche-page-desc { color: #5b4b7a; }

.page-head-niche-gaming { background: linear-gradient(145deg, #1a0a2e, #2d1b4e); color: #f3e8ff; }
.page-head-niche-gaming .niche-label { color: #c084fc; }
.page-head-niche-gaming .niche-page-desc { color: #a78bfa; }

.page-head-niche-default { background: var(--bg-soft); border-bottom: 2px solid var(--brand); }
.page-head-niche-default h1 { color: var(--ink); }
.page-head-niche-default .niche-label { color: var(--brand); }
.page-head-niche-default .niche-page-desc { color: var(--ink-soft); }

.niche-page-section { padding: 36px 0 48px; }
.body-niche-tech .niche-page-section { background: #181d28; }
.body-niche-tech .niche-page-section .ni-tech h4 { color: #eef1ff; }
.body-niche-tech .niche-page-section .ni-tech .meta { color: #a5b4fc; }
.body-niche-ai .niche-page-section,
.body-niche-ai-tools .niche-page-section { background: #0f3d2a; }
.body-niche-ai .ni-ai h4,
.body-niche-ai-tools .ni-ai h4 { color: #ecfdf5; }
.body-niche-ai .ni-ai .meta,
.body-niche-ai-tools .ni-ai .meta { color: #a7f3d0; }
.body-niche-marketing .niche-page-section { background: var(--bg); }
.body-niche-marketing .ni-marketing h4 { color: #431407; }
.body-niche-marketing .ni-marketing p { color: #9a3412; }
.body-niche-marketing .ni-marketing .ni-time { color: #c2410c; }
.body-niche-finance .niche-page-section { background: var(--bg); }
.body-niche-health .niche-page-section { background: var(--bg); }
.body-niche-travel .niche-page-section { background: var(--bg); }
.body-niche-lifestyle .niche-page-section { background: var(--bg); }
.body-niche-business .niche-page-section { background: var(--bg); }
.body-niche-gaming .niche-page-section { background: #1a0a2e; }
.body-niche-gaming .ni-gaming h4 { color: #f3e8ff; }
.body-niche-gaming .ni-gaming .meta { color: #a78bfa; }

/* Empty state on dark category pages */
.body-niche-tech .empty-niche,
.body-niche-ai .empty-niche,
.body-niche-ai-tools .empty-niche,
.body-niche-gaming .empty-niche { color: #c8c2b5; }
.body-niche-tech .empty-niche .display,
.body-niche-ai .empty-niche .display,
.body-niche-ai-tools .empty-niche .display,
.body-niche-gaming .empty-niche .display { color: #f6f2ea; }

.flow-gaming { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.ni-gaming .ni-visual { aspect-ratio: 16/10; margin-bottom: 14px; }
.ni-gaming h4 { font-size: 17px; margin-bottom: 8px; color: #f3e8ff; }
.ni-gaming h4:hover { color: #c084fc; }
.ni-gaming .meta { font-size: 12px; color: #a78bfa; }

@media (max-width: 900px) {
  .flow-tech, .flow-travel, .flow-default, .flow-finance, .flow-ai, .flow-gaming { grid-template-columns: 1fr; }
  .ni-finance { border-left: none !important; padding: 20px 0 !important; border-bottom: 1px solid #dcc88a; }
  .ni-finance:last-child { border-bottom: none; }
  .flow-lifestyle-home { grid-template-columns: 1fr; }
  .flow-lifestyle { grid-template-columns: 1fr; }
  .ni-business { grid-template-columns: 80px 1fr; }
  .ni-business .ni-time { grid-column: 2; justify-self: start; margin-top: 4px; }
  .ni-travel { min-height: 220px; }
}

/* ---------------- Post grid / cards ---------------- */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: all 0.2s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .thumb img { transform: scale(1.05); }
.card .thumb .chip { position: absolute; top: 12px; left: 12px; }
.card .body { padding: 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.card:hover h3 { color: var(--brand-ink); }
.card p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta {
  margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); font-weight: 500;
}
.card .meta .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient); }

/* Mini list (sidebar) */
.mini-list { display: grid; gap: 13px; }
.mini { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.mini .thumb { aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--bg-soft); }
.mini .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.mini:hover h4 { color: var(--brand); }
.mini .meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mini .rank { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--line-strong); width: 72px; text-align: center; }

/* ---------------- Layout w/ sidebar ---------------- */
.with-side { display: grid; grid-template-columns: 1fr 308px; gap: 34px; align-items: start; }
.sidebar { display: grid; gap: 22px; position: sticky; top: 90px; }
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.widget h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin-bottom: 13px; letter-spacing: -0.02em; }
.cat-list { display: grid; gap: 4px; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; transition: all 0.16s; }
.cat-list a:hover { background: var(--bg-soft); }
.cat-list .dot { width: 9px; height: 9px; border-radius: 50%; }
.cat-list .left { display: flex; align-items: center; gap: 9px; }
.cat-list .count { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.newsletter { background: var(--gradient-dark); color: #fff; border: none; }
.newsletter h3 { color: #fff; }
.newsletter p { color: rgba(255,255,255,0.72); font-size: 13.5px; margin-bottom: 13px; }
.newsletter input {
  width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08); color: #fff; margin-bottom: 9px; font-family: inherit; font-size: 14px;
}
.newsletter input::placeholder { color: rgba(255,255,255,0.5); }

/* ---------------- Single post ---------------- */
.post-hero { padding: 40px 0 14px; text-align: center; }
.post-hero .chip { margin-bottom: 14px; }
.post-hero h1 { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; max-width: 820px; margin: 0 auto 14px; }
.post-hero .lead { font-size: 18px; color: var(--ink-soft); max-width: 680px; margin: 0 auto 18px; line-height: 1.5; }
.post-meta { display: flex; gap: 14px; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.post-meta .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient); }
.post-cover { max-width: 980px; margin: 26px auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.post-cover img { width: 100%; }

.article { max-width: 728px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: #2a2720; }
.article > * + * { margin-top: 1.25em; }
.article h1, .article h2, .article h3, .article h4 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; margin-top: 1.7em; color: var(--ink);
}
.article h1 { font-size: 32px; } .article h2 { font-size: 27px; } .article h3 { font-size: 21px; }
.article p { color: #322f27; }
.article a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article ul, .article ol { padding-left: 1.35em; }
.article li + li { margin-top: 0.4em; }
.article img { border-radius: var(--radius-sm); margin: 1.5em auto; box-shadow: var(--shadow-sm); }
.article blockquote {
  border-left: 3px solid var(--brand); padding: 4px 20px; margin-left: 0;
  font-family: var(--font-display); font-size: 21px; font-weight: 600; font-style: normal; color: var(--ink);
}
.article pre { background: #16201a; color: #e6ede8; padding: 18px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 14px; }
.article code { background: var(--brand-soft); color: var(--brand-ink); padding: 2px 6px; border-radius: 5px; font-size: 0.88em; }
.article pre code { background: none; padding: 0; color: inherit; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th, .article td { border: 1px solid var(--line-strong); padding: 9px 13px; text-align: left; }
.article th { background: var(--bg-soft); font-weight: 700; }
.article figure { margin: 1.5em 0; }
.article figcaption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 7px; }

.article-foot {
  max-width: 728px; margin: 34px auto; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* ---------------- Page header (static pages only — not category niches) ---------------- */
.page-head:not(.page-head-niche) { padding: 44px 0; text-align: center; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.page-head:not(.page-head-niche) .chip { margin-bottom: 12px; }
.page-head:not(.page-head-niche) h1 { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.page-head:not(.page-head-niche) p { color: var(--ink-soft); max-width: 600px; margin: 10px auto 0; font-size: 16.5px; }

.prose { max-width: 728px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: #322f27; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin-top: 1.5em; color: var(--ink); }
.prose h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-top: 1.3em; color: var(--ink); }
.prose ul { padding-left: 1.35em; }
.prose a { color: var(--brand); text-decoration: underline; }

/* ---------------- Forms ---------------- */
.form-row { display: grid; gap: 7px; margin-bottom: 16px; }
.form-row label { font-weight: 700; font-size: 13.5px; }
.input, textarea.input, select.input {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); font-family: inherit; font-size: 14.5px; color: var(--ink); transition: border 0.16s;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.input { min-height: 116px; resize: vertical; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--ink); color: #c8c2b5; margin-top: 48px; padding: 50px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 13px; font-family: var(--font-display); font-weight: 700; }
.site-footer a { color: #c8c2b5; font-size: 14px; display: block; padding: 4px 0; transition: color 0.16s; }
.site-footer a:hover { color: var(--brand-2); }
.footer-cats a { display: block; padding: 4px 0; }
.site-footer .logo-box {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
}
.site-footer .blurb { color: #968f81; font-size: 14px; max-width: 300px; line-height: 1.6; }
.footer-bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.09);
  display: flex; justify-content: space-between; color: #847d70; font-size: 13px;
}

/* ---------------- Pagination ---------------- */
.pagination { display: flex; justify-content: center; gap: 7px; margin-top: 36px; }
.pagination button {
  min-width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--surface); font-weight: 700; cursor: pointer; transition: all 0.16s; color: var(--ink);
}
.pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------- Search overlay ---------------- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(20,18,14,0.5); backdrop-filter: blur(6px);
  z-index: 100; display: none; align-items: flex-start; justify-content: center; padding-top: 13vh;
}
.search-overlay.open { display: flex; }
.search-box {
  width: min(620px, 92vw); background: var(--surface); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow-lg); display: flex; gap: 9px; align-items: center;
}
.search-box input { flex: 1; border: none; font-size: 18px; padding: 11px; font-family: inherit; background: none; color: var(--ink); }
.search-box input:focus { outline: none; }

/* ---------------- Helpers ---------------- */
.skeleton { background: linear-gradient(90deg, #ece5d8 25%, #f4efe6 50%, #ece5d8 75%); background-size: 200% 100%; animation: sh 1.3s infinite; border-radius: 8px; }
@keyframes sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty .display { font-size: 25px; color: var(--ink); margin-bottom: 7px; }
.placeholder-img {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-soft), #e7dfd0); color: var(--line-strong);
  font-family: var(--font-display); font-size: 38px; font-weight: 800;
}

/* ---------------- HTML Sitemap ---------------- */
.sitemap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px;
}
.sitemap-col-wide { grid-column: 1 / -1; }
.sitemap-col h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.sitemap-list { list-style: none; display: grid; gap: 8px; }
.sitemap-list a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; transition: color 0.16s; }
.sitemap-list a:hover { color: var(--brand); }
.sitemap-list .count { color: var(--muted); font-size: 13px; }
.sitemap-posts { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.sitemap-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.sitemap-note a { color: var(--brand); font-weight: 600; }
@media (max-width: 800px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-posts { grid-template-columns: 1fr; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .with-side { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .post-hero h1 { font-size: 34px; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .menu-toggle { display: grid; }
  .home-intro { padding: 28px 0 22px; }
  .home-intro-detail { grid-template-columns: 1fr; gap: 14px; max-width: 640px; }
  .home-intro-detail p + p { padding-top: 14px; border-top: 1px solid var(--line); }
  .home-intro-actions { flex-direction: column; align-items: stretch; }
  .home-intro-actions .btn { width: 100%; justify-content: center; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .feature-card h2 { font-size: 24px; }
  .post-hero h1 { font-size: 27px; }
  .page-head:not(.page-head-niche) h1 { font-size: 30px; }
  .topbar .tb-info { display: none; }
}

.mobile-nav { display: none; flex-direction: column; padding: 8px 22px 16px; gap: 3px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 11px; border-radius: 9px; font-weight: 600; }
.mobile-nav a:hover { background: var(--bg-soft); }