/*
Theme Name:  Novara Premium
Theme URI:   https://novara.theme
Author:      Novara
Description: A minimal, lightweight, premium WordPress blog theme with luxury editorial aesthetics. Fast, clean, and future-proof.
Version:     2.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novara
Tags:        blog, minimal, clean, fast, responsive, accessibility-ready, editorial
*/

/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  --cream:           #faf8f4;
  --cream-dark:      #f2ede4;
  --cream-deeper:    #e8e0d4;
  --surface:         #ffffff;
  --ink:             #1a1713;
  --ink-mid:         #3d3a35;
  --ink-light:       #7a7570;
  --ink-faint:       #b5b0a8;
  --border:          #e3ded5;
  --border-dark:     #cdc8be;
  --accent:          #c8452a;
  --accent-soft:     #f5ebe7;
  --accent-hover:    #a83520;
  --accent-dark:     #8c2c18;
  --gold:            #b8962e;
  --gold-soft:       #f7f2e4;

  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'Courier New', Courier, monospace;

  --nav-h:         68px;
  --max-w:         1280px;
  --content-w:     760px;
  --sidebar-w:     308px;
  --gutter:        40px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-pill:   100px;

  --ease:    cubic-bezier(0.22,1,0.36,1);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;

  --shadow-sm:  0 2px 8px rgba(26,23,19,.08),0 1px 3px rgba(26,23,19,.05);
  --shadow-md:  0 8px 24px rgba(26,23,19,.10),0 2px 8px rgba(26,23,19,.06);
  --shadow-lg:  0 16px 48px rgba(26,23,19,.13),0 4px 16px rgba(26,23,19,.07);
  --shadow-xl:  0 24px 64px rgba(26,23,19,.18),0 8px 24px rgba(26,23,19,.10);
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-sm); }

/* ============================================================
   4. UTILITIES
   ============================================================ */
.container { width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter); }

.screen-reader-text {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link {
  position:absolute; top:-100%; left:1rem;
  background:var(--accent); color:#fff;
  padding:.75rem 1.5rem; border-radius:0 0 var(--radius-md) var(--radius-md);
  font-size:.8125rem; font-weight:500; z-index:9999;
  transition:top var(--t-fast);
}
.skip-link:focus { top:0; }

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t-base) var(--ease);
}
.site-header.scrolled { box-shadow:var(--shadow-sm); }

.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; gap:1.5rem;
}

/* Logo */
.site-branding { flex-shrink:0; }
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo-mark {
  width:32px; height:32px;
  background:var(--accent); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background var(--t-fast);
}
.logo-mark:hover { background:var(--accent-hover); }
.logo-mark svg { width:16px; height:16px; fill:#fff; }
.site-title {
  font-family:var(--serif); font-size:1.375rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); transition:color var(--t-fast);
}
.site-branding a:hover .site-title { color:var(--accent); }

/* Nav */
.main-navigation { flex:1; display:flex; justify-content:center; }
.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-menu li a {
  display:block; padding:.5rem 14px;
  font-size:.8125rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink-light); border-radius:var(--radius-sm);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-menu li a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color:var(--ink); background:var(--cream-dark); }

/* Actions */
.header-actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

.search-toggle {
  width:36px; height:36px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-sm); color:var(--ink-light);
  display:flex; align-items:center; justify-content:center;
  transition:color var(--t-fast),background var(--t-fast);
}
.search-toggle:hover { color:var(--ink); background:var(--cream-dark); }
.search-toggle svg { width:17px; height:17px; }

.header-subscribe {
  font-size:.8125rem; font-weight:500; letter-spacing:.02em;
  background:var(--ink); color:var(--cream);
  padding:8px 20px; border-radius:var(--radius-sm);
  border:none; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast),transform var(--t-fast);
}
.header-subscribe:hover { background:var(--accent); transform:translateY(-1px); }

.menu-toggle {
  display:none; width:36px; height:36px; border:none;
  background:transparent; cursor:pointer; border-radius:var(--radius-sm);
  color:var(--ink); align-items:center; justify-content:center;
  transition:background var(--t-fast);
}
.menu-toggle:hover { background:var(--cream-dark); }
.menu-toggle svg { width:20px; height:20px; }

/* Search overlay */
.search-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(26,23,19,.55); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:80px;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.search-overlay.active { opacity:1; pointer-events:all; }

.search-overlay-inner {
  width:100%; max-width:640px;
  background:var(--surface); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); padding:2rem;
  transform:translateY(-12px);
  transition:transform var(--t-base) var(--ease);
  margin-inline:1rem;
}
.search-overlay.active .search-overlay-inner { transform:translateY(0); }

/* ============================================================
   6. SEARCH FORM
   ============================================================ */
.search-form { display:flex; gap:.75rem; align-items:center; }
.search-form .search-field {
  flex:1; padding:12px 16px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:1rem; font-weight:300; background:var(--cream); color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.search-form .search-field:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,69,42,.12); background:var(--surface);
}
.search-form .search-field::placeholder { color:var(--ink-faint); }
.search-form .search-submit {
  padding:12px 1.5rem; background:var(--ink); color:var(--cream);
  border:none; border-radius:var(--radius-md);
  font-size:.8125rem; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast),transform var(--t-fast);
}
.search-form .search-submit:hover { background:var(--accent); transform:translateY(-1px); }
.widget .search-form { flex-direction:column; }
.widget .search-form .search-field,
.widget .search-form .search-submit { width:100%; }

/* ============================================================
   7. HERO
   ============================================================ */
.hero-section { padding:5rem 0 4rem; border-bottom:1px solid var(--border); }

.hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.25rem;
}
.hero-eyebrow::before { content:''; width:28px; height:1.5px; background:var(--accent); border-radius:1px; }

.hero-title {
  font-family:var(--serif);
  font-size:clamp(2.25rem,4.5vw,3.75rem);
  font-weight:700; line-height:1.1; letter-spacing:-.03em;
  color:var(--ink); margin-bottom:1.5rem;
}
.hero-title em { font-style:italic; color:var(--accent); }

.hero-description {
  font-size:1.0625rem; font-weight:300; color:var(--ink-mid);
  line-height:1.8; max-width:420px; margin-bottom:2.5rem;
}

.hero-actions { display:flex; align-items:center; gap:1.5rem; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--cream);
  font-size:.875rem; font-weight:500; letter-spacing:.02em;
  padding:13px 28px; border-radius:var(--radius-sm);
  border:none; cursor:pointer;
  transition:background var(--t-fast),transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.btn-primary:hover { background:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,69,42,.25); }
.btn-primary svg { width:16px; height:16px; transition:transform var(--t-base) var(--ease); }
.btn-primary:hover svg { transform:translateX(4px); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:500; color:var(--ink-mid);
  background:transparent; border:none; cursor:pointer; padding:0;
  transition:color var(--t-fast);
}
.btn-ghost:hover { color:var(--accent); }
.btn-ghost::after { content:'→'; }

/* Hero dark card */
.hero-feature-card {
  background:var(--ink); border-radius:var(--radius-xl);
  overflow:hidden; cursor:pointer; position:relative;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.hero-feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }

.hero-feature-thumb { width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; }
.hero-feature-thumb img {
  width:100%; height:100%; object-fit:cover; opacity:.75;
  transition:transform var(--t-slow) var(--ease);
}
.hero-feature-card:hover .hero-feature-thumb img { transform:scale(1.05); }

.hero-thumb-ph {
  width:100%; height:100%;
  background:linear-gradient(135deg,#2e2a26 0%,#4a4038 50%,#231f1b 100%);
  display:flex; align-items:center; justify-content:center;
}
.hero-thumb-ph::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(26,23,19,.9) 100%);
}

.hero-feature-overlay {
  position:absolute; bottom:0; left:0; right:0; padding:2rem;
  background:linear-gradient(0deg,rgba(26,23,19,.95) 0%,transparent 100%);
}
.hero-feature-cat {
  display:inline-block; font-size:.6875rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(250,248,244,.6); background:rgba(255,255,255,.1);
  padding:4px 10px; border-radius:var(--radius-pill); margin-bottom:.75rem;
}
.hero-feature-title {
  font-family:var(--serif); font-size:1.375rem; font-weight:600;
  color:#fff; line-height:1.3; letter-spacing:-.02em; margin-bottom:1rem;
}
.hero-feature-meta { display:flex; align-items:center; gap:1rem; }
.hero-feature-author {
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; color:rgba(250,248,244,.6);
}
.hero-feature-date { font-size:.75rem; color:rgba(250,248,244,.4); }

/* ============================================================
   8. SECTION
   ============================================================ */
.section { padding:4rem 0; }

.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:2rem; margin-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}

.section-label {
  font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.5rem;
}
.section-title {
  font-family:var(--serif); font-size:1.75rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
}
.section-see-all {
  display:flex; align-items:center; gap:6px;
  font-size:.8125rem; font-weight:500; color:var(--accent); cursor:pointer;
  transition:gap var(--t-base) var(--ease);
}
.section-see-all:hover { gap:10px; }
.section-see-all::after { content:'→'; }

/* ============================================================
   9. FEATURED EDITORIAL STRIP
   ============================================================ */
.featured-strip {
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:2rem; margin-bottom:4rem;
}

.featured-big {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  overflow:hidden; cursor:pointer;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base);
}
.featured-big:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:transparent; }

.feat-big-thumb { aspect-ratio:16/9; overflow:hidden; background:var(--cream-dark); }
.feat-big-thumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.featured-big:hover .feat-big-thumb img { transform:scale(1.04); }
.feat-big-thumb-ph {
  width:100%; height:260px;
  background:linear-gradient(135deg,var(--cream-dark) 0%,var(--cream-deeper) 100%);
  display:flex; align-items:center; justify-content:center;
}

.feat-big-body { padding:2rem 2.5rem 2.5rem; }

.feat-tag-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.feat-tag-gold {
  display:inline-block; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft);
  padding:4px 12px; border-radius:var(--radius-pill);
}
.feat-read-time { font-size:.75rem; color:var(--ink-faint); font-weight:300; }

.feat-big-title {
  font-family:var(--serif); font-size:1.625rem; font-weight:700;
  line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin-bottom:1rem;
  transition:color var(--t-fast);
}
.featured-big:hover .feat-big-title { color:var(--accent); }

.feat-big-excerpt { font-size:.875rem; font-weight:300; color:var(--ink-light); line-height:1.8; margin-bottom:1.5rem; }

.feat-big-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.25rem; border-top:1px solid var(--border);
}
.feat-author-wrap { display:flex; align-items:center; gap:10px; }
.feat-author-name { font-size:.8125rem; font-weight:500; color:var(--ink-mid); }
.feat-author-role { font-size:.6875rem; color:var(--ink-faint); font-weight:300; margin-top:2px; }

/* List column */
.feat-list { display:flex; flex-direction:column; gap:1rem; }

.feat-list-item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; cursor:pointer; display:flex;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base);
}
.feat-list-item:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:transparent; }

.feat-list-thumb { width:112px; flex-shrink:0; overflow:hidden; background:var(--cream-dark); }
.feat-list-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease); }
.feat-list-item:hover .feat-list-thumb img { transform:scale(1.06); }
.feat-list-thumb-ph {
  width:100%; min-height:110px; height:100%;
  background:linear-gradient(135deg,var(--cream-dark) 0%,var(--cream-deeper) 100%);
  display:flex; align-items:center; justify-content:center;
}

.feat-list-body { padding:1.125rem 1.25rem; flex:1; min-width:0; }
.feat-list-cat {
  display:block; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.feat-list-title {
  font-family:var(--serif); font-size:1rem; font-weight:700;
  line-height:1.35; letter-spacing:-.01em; color:var(--ink);
  margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--t-fast);
}
.feat-list-item:hover .feat-list-title { color:var(--accent); }
.feat-list-meta { font-size:.6875rem; color:var(--ink-faint); font-weight:300; }

/* ============================================================
   10. CATEGORIES BAR
   ============================================================ */
.categories-bar {
  background:var(--ink); border-radius:var(--radius-xl);
  padding:40px 48px; margin-bottom:4rem;
  display:grid; grid-template-columns:auto 1fr;
  gap:48px; align-items:center;
}
.cats-bar-label {
  font-family:var(--serif); font-size:1.625rem; font-weight:700;
  color:#fff; letter-spacing:-.02em; line-height:1.2; width:160px;
}
.cats-bar-label em { font-style:italic; color:rgba(200,69,42,.9); }
.cats-pills { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.cat-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; font-weight:400; letter-spacing:.01em;
  color:rgba(250,248,244,.65); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 18px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-base) var(--ease);
}
.cat-pill:hover,
.cat-pill.current-cat { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); }
.cat-pill-count {
  font-size:.6875rem; color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.1); padding:1px 7px; border-radius:var(--radius-pill);
}
.cat-pill.current-cat .cat-pill-count { color:rgba(255,255,255,.8); background:rgba(255,255,255,.2); }

/* ============================================================
   11. POST CARD GRID
   ============================================================ */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.posts-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.posts-grid.cols-1 { grid-template-columns:1fr; }

.post-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; cursor:pointer;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base);
  animation:cardIn .5s var(--ease) both;
}
.post-card:nth-child(2){animation-delay:.07s}
.post-card:nth-child(3){animation-delay:.14s}
.post-card:nth-child(4){animation-delay:.21s}
.post-card:nth-child(5){animation-delay:.28s}
.post-card:nth-child(6){animation-delay:.35s}
@keyframes cardIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.post-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:transparent; }

.card-thumbnail { aspect-ratio:16/9; overflow:hidden; background:var(--cream-dark); display:block; }
.card-thumbnail img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.post-card:hover .card-thumbnail img { transform:scale(1.05); }

.card-thumbnail-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg,var(--cream-dark) 0%,var(--cream-deeper) 100%);
  display:flex; align-items:center; justify-content:center;
}
.card-thumbnail-placeholder svg { width:36px; height:36px; color:var(--border-dark); }

.card-body { padding:20px 24px 24px; }

.card-cat-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.card-category {
  display:inline-block; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  padding:3px 10px; border-radius:var(--radius-pill);
  transition:background var(--t-fast),color var(--t-fast);
}
.post-card:hover .card-category { background:var(--accent); color:#fff; }
.card-read-time { font-size:.6875rem; color:var(--ink-faint); font-weight:300; }

.card-title {
  font-family:var(--serif); font-size:1.125rem; font-weight:700;
  line-height:1.35; letter-spacing:-.01em; color:var(--ink); margin-bottom:.75rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--t-fast);
}
.post-card:hover .card-title { color:var(--accent); }

.card-excerpt {
  font-size:.8125rem; font-weight:300; color:var(--ink-light); line-height:1.75;
  margin-bottom:1.25rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; border-top:1px solid var(--border);
}
.card-author { display:flex; align-items:center; gap:8px; }
.card-author-name { font-size:.75rem; font-weight:500; color:var(--ink-mid); line-height:1.2; }
.card-author-date { font-size:.6875rem; color:var(--ink-faint); font-weight:300; margin-top:2px; }

.card-cta {
  display:flex; align-items:center; gap:4px;
  font-size:.75rem; font-weight:500; color:var(--accent);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--t-base),transform var(--t-base) var(--ease);
}
.post-card:hover .card-cta { opacity:1; transform:none; }
.card-cta svg { width:12px; height:12px; }

/* Shared avatar */
.avatar-sm {
  width:28px; height:28px; border-radius:50%; overflow:hidden;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:.5625rem; font-weight:600; color:#fff; letter-spacing:.05em; flex-shrink:0;
}
.avatar-sm img { width:100%; height:100%; object-fit:cover; }
.avatar-md {
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; color:#fff; letter-spacing:.05em; flex-shrink:0;
}
.avatar-md img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   12. SINGLE POST
   ============================================================ */
.single-wrap {
  display:grid; grid-template-columns:1fr var(--sidebar-w);
  gap:3rem; align-items:start; padding:3rem 0 5rem;
}

.post-header { margin-bottom:2rem; }
.post-meta-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.post-cats { display:flex; gap:.5rem; flex-wrap:wrap; }
.post-cat-tag {
  display:inline-block; font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:4px 12px; border-radius:var(--radius-pill);
  transition:background var(--t-fast),color var(--t-fast);
}
.post-cat-tag:hover { background:var(--accent); color:#fff; }
.post-meta-item { display:flex; align-items:center; gap:5px; font-size:.875rem; color:var(--ink-faint); font-weight:300; }
.post-meta-item svg { width:14px; height:14px; }

.post-title {
  font-family:var(--serif);
  font-size:clamp(1.75rem,4vw,3rem);
  font-weight:700; line-height:1.18; letter-spacing:-.03em;
  color:var(--ink); margin-bottom:2rem;
}

.post-author-bar {
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:2rem;
}
.post-author-name { font-size:.875rem; font-weight:500; color:var(--ink-mid); }
.post-author-role { font-size:.6875rem; color:var(--ink-faint); font-weight:300; margin-top:2px; }

.post-featured-image { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:2.5rem; background:var(--cream-dark); }
.post-featured-image img { width:100%; display:block; }

.post-content { font-family:var(--serif); font-size:1.0625rem; line-height:1.85; color:var(--ink); }
.post-content > * + * { margin-top:1.5rem; }
.post-content h2 { font-size:1.75rem; font-weight:700; line-height:1.25; letter-spacing:-.02em; margin-top:3rem; margin-bottom:1rem; }
.post-content h3 { font-size:1.375rem; font-weight:700; line-height:1.3; margin-top:2rem; margin-bottom:.75rem; }
.post-content h4 { font-size:1.125rem; font-weight:700; margin-top:1.5rem; margin-bottom:.5rem; }
.post-content a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(200,69,42,.3); text-underline-offset:3px; transition:text-decoration-color var(--t-fast); }
.post-content a:hover { text-decoration-color:var(--accent); }
.post-content strong,.post-content b { font-weight:700; }
.post-content em,.post-content i { font-style:italic; }
.post-content ul,.post-content ol { padding-left:1.5rem; }
.post-content ul { list-style:disc; }
.post-content ol { list-style:decimal; }
.post-content li { margin-bottom:.5rem; }
.post-content blockquote {
  border-left:3px solid var(--accent); padding:1.25rem 2rem;
  margin:2rem 0; background:var(--accent-soft);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-style:italic; color:var(--ink-mid); font-size:1.125rem;
}
.post-content blockquote p { margin:0; }
.post-content blockquote cite { display:block; margin-top:.75rem; font-style:normal; font-family:var(--sans); font-size:.875rem; font-weight:500; color:var(--accent); }
.post-content code { font-family:var(--mono); font-size:.875em; background:var(--cream-dark); padding:2px 6px; border-radius:var(--radius-sm); color:var(--accent-dark); }
.post-content pre { background:var(--ink); color:var(--cream); padding:1.5rem; border-radius:var(--radius-md); overflow-x:auto; font-family:var(--mono); font-size:.875rem; line-height:1.65; }
.post-content pre code { background:none; padding:0; color:inherit; }
.post-content img { border-radius:var(--radius-md); margin:2rem auto; }
.post-content hr { border:none; border-top:1px solid var(--border); margin:2.5rem 0; }

.post-footer { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.post-tags { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.post-tags-label { font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.tag-chip {
  display:inline-block; font-size:.6875rem; font-weight:400;
  color:var(--ink-light); background:var(--cream); border:1px solid var(--border);
  padding:4px 12px; border-radius:var(--radius-pill);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.tag-chip:hover { border-color:var(--accent); color:var(--accent); }

.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.post-nav-item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.25rem 1.5rem; cursor:pointer;
  transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.post-nav-item:hover { box-shadow:var(--shadow-sm); border-color:var(--accent); }
.post-nav-item.next { text-align:right; }
.post-nav-label { font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:.5rem; }
.post-nav-title { font-family:var(--serif); font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink); }

.related-posts { padding:4rem 0 5rem; }
.related-posts-heading {
  font-family:var(--serif); font-size:1.75rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
  margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border);
}

/* ============================================================
   13. SIDEBAR
   ============================================================ */
.sidebar { position:sticky; top:calc(var(--nav-h) + 1.5rem); }

.widget {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem; margin-bottom:1.25rem;
}
.widget-title {
  font-family:var(--serif); font-size:1rem; font-weight:700;
  color:var(--ink); margin-bottom:1.25rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--border); letter-spacing:-.01em;
}
.widget-categories li {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.875rem;
}
.widget-categories li:last-child { border-bottom:none; }
.widget-categories a { color:var(--ink-light); transition:color var(--t-fast); font-weight:400; }
.widget-categories a:hover { color:var(--accent); }
.widget-categories .count {
  font-size:.6875rem; background:var(--cream); border:1px solid var(--border);
  padding:1px 7px; border-radius:var(--radius-pill); color:var(--ink-faint);
}
.widget-recent-posts li { display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border); }
.widget-recent-posts li:last-child { border-bottom:none; padding-bottom:0; }
.widget-recent-thumb { width:60px; height:60px; border-radius:var(--radius-sm); overflow:hidden; background:var(--cream-dark); flex-shrink:0; }
.widget-recent-thumb img { width:100%; height:100%; object-fit:cover; }
.widget-recent-info { flex:1; min-width:0; }
.widget-recent-title { font-size:.875rem; font-weight:600; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--t-fast); }
.widget-recent-title:hover { color:var(--accent); }
.widget-recent-date { font-size:.6875rem; color:var(--ink-faint); margin-top:.25rem; font-weight:300; }

/* ============================================================
   14. ARCHIVE
   ============================================================ */
.archive-header { padding:4rem 0 2.5rem; border-bottom:1px solid var(--border); margin-bottom:3rem; }
.archive-eyebrow { font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.75rem; display:block; }
.archive-title { font-family:var(--serif); font-size:clamp(1.75rem,4vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--ink); margin-bottom:1rem; }
.archive-description { font-size:1.0625rem; color:var(--ink-light); max-width:560px; line-height:1.75; font-weight:300; }
.archive-wrap { display:grid; grid-template-columns:1fr var(--sidebar-w); gap:3rem; align-items:start; padding-bottom:5rem; }

/* ============================================================
   15. SEARCH
   ============================================================ */
.search-header { padding:3rem 0 2rem; border-bottom:1px solid var(--border); margin-bottom:2.5rem; }
.search-query-title { font-family:var(--serif); font-size:1.75rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-bottom:1.25rem; }
.search-query-title em { font-style:normal; color:var(--accent); }
.search-count { font-size:.875rem; color:var(--ink-faint); margin-bottom:1.5rem; font-weight:300; }

/* ============================================================
   16. 404
   ============================================================ */
.not-found { display:flex; align-items:center; justify-content:center; min-height:60vh; text-align:center; padding:5rem 0; }
.not-found-code { font-family:var(--serif); font-size:clamp(80px,15vw,160px); font-weight:700; line-height:1; color:var(--border); letter-spacing:-.05em; margin-bottom:1rem; }
.not-found-title { font-family:var(--serif); font-size:2.25rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1rem; }
.not-found-text { font-size:1.0625rem; color:var(--ink-light); max-width:420px; margin:0 auto 2rem; line-height:1.75; font-weight:300; }
.not-found-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.btn-secondary {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--ink-mid); border:1px solid var(--border);
  font-size:.875rem; font-weight:500; padding:12px 24px; border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.btn-secondary:hover { border-color:var(--ink); background:var(--cream-dark); }

/* ============================================================
   17. STATIC PAGES
   ============================================================ */
.page-wrap { max-width:var(--content-w); margin:0 auto; padding:4rem 0 5rem; }
.page-header { margin-bottom:2.5rem; }
.page-title { font-family:var(--serif); font-size:clamp(1.75rem,4vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.2; }
.page-content { font-family:var(--serif); font-size:1.0625rem; line-height:1.85; }
.page-content > * + * { margin-top:1.25rem; }
.page-content h2 { font-size:1.75rem; font-weight:700; margin-top:2.5rem; }
.page-content h3 { font-size:1.375rem; font-weight:700; margin-top:2rem; }
.page-content a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.page-content ul,.page-content ol { padding-left:1.5rem; }
.page-content ul { list-style:disc; }
.page-content ol { list-style:decimal; }

/* ============================================================
   18. PAGINATION
   ============================================================ */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin-top:4rem; padding-top:2.5rem; border-top:1px solid var(--border);
}
.pagination .page-numbers {
  display:flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 14px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:.8125rem; font-weight:500; color:var(--ink-light); background:var(--surface);
  transition:all var(--t-fast);
}
.pagination .page-numbers:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pagination .page-numbers.current { background:var(--ink); color:var(--cream); border-color:var(--ink); font-weight:600; pointer-events:none; }

/* ============================================================
   19. COMMENTS
   ============================================================ */
.comments-section { margin-top:4rem; }
.comments-title { font-family:var(--serif); font-size:1.75rem; font-weight:700; letter-spacing:-.02em; margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.comment { display:flex; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--border); }
.comment:last-child { border-bottom:none; }
.comment-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--cream-dark); }
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-body { flex:1; min-width:0; }
.comment-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; flex-wrap:wrap; }
.comment-author-name { font-size:.875rem; font-weight:600; color:var(--ink); }
.comment-date { font-size:.6875rem; color:var(--ink-faint); font-weight:300; }
.comment-content { font-size:.875rem; line-height:1.75; color:var(--ink); }
.comment-reply { margin-top:.75rem; }
.comment-reply-link { font-size:.6875rem; font-weight:600; color:var(--accent); transition:opacity var(--t-fast); }
.comment-reply-link:hover { opacity:.75; }
.comment-respond { margin-top:2rem; }
.comment-reply-title { font-family:var(--serif); font-size:1.375rem; font-weight:700; margin-bottom:1.5rem; }
.comment-form .form-group { margin-bottom:1.25rem; }
.comment-form label { display:block; font-size:.875rem; font-weight:500; color:var(--ink); margin-bottom:.5rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width:100%; padding:12px 16px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--cream); color:var(--ink); font-size:1rem; font-weight:300;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.comment-form input:focus,.comment-form textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,69,42,.10); background:var(--surface);
}
.comment-form textarea { resize:vertical; min-height:140px; }
.comment-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.submit-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 2rem; background:var(--accent); color:#fff;
  border:none; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; cursor:pointer;
  transition:background var(--t-fast),transform var(--t-base) var(--ease);
}
.submit-btn:hover { background:var(--accent-hover); transform:translateY(-1px); }

/* ============================================================
   20. AUTHOR
   ============================================================ */
.author-header { padding:4rem 0 3rem; border-bottom:1px solid var(--border); margin-bottom:3rem; }
.author-card { display:flex; gap:2rem; align-items:center; }
.author-avatar-lg { width:96px; height:96px; border-radius:50%; overflow:hidden; background:var(--cream-dark); flex-shrink:0; box-shadow:var(--shadow-md); }
.author-avatar-lg img { width:100%; height:100%; object-fit:cover; }
.author-name-lg { font-family:var(--serif); font-size:2.25rem; font-weight:700; letter-spacing:-.03em; margin-bottom:.75rem; }
.author-bio-text { font-size:1rem; color:var(--ink-light); max-width:560px; line-height:1.75; font-weight:300; }

/* ============================================================
   21. NO RESULTS
   ============================================================ */
.no-results { text-align:center; padding:5rem 1.5rem; }
.no-results-icon { font-size:3rem; margin-bottom:1.25rem; opacity:.35; }
.no-results-title { font-family:var(--serif); font-size:1.75rem; font-weight:700; margin-bottom:1rem; }
.no-results-text { font-size:1rem; color:var(--ink-light); margin-bottom:2rem; font-weight:300; max-width:440px; margin-inline:auto; }

/* ============================================================
   22. FOOTER
   ============================================================ */
.site-footer { background:var(--ink); color:rgba(250,248,244,.55); margin-top:4rem; }
.footer-top {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px; padding:64px var(--gutter) 48px;
  max-width:var(--max-w); margin-inline:auto;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand-name { font-family:var(--serif); font-size:1.375rem; font-weight:700; color:#fff; letter-spacing:-.02em; display:block; margin-bottom:.75rem; }
.footer-brand-desc { font-size:.8125rem; font-weight:300; color:rgba(250,248,244,.45); line-height:1.75; max-width:280px; }
.footer-col-label { font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(250,248,244,.3); display:block; margin-bottom:1.25rem; }
.footer-links { display:flex; flex-direction:column; gap:.75rem; }
.footer-link { font-size:.8125rem; font-weight:300; color:rgba(250,248,244,.55); cursor:pointer; transition:color var(--t-fast); }
.footer-link:hover { color:var(--cream); }
.footer-bottom {
  max-width:var(--max-w); margin-inline:auto;
  padding:24px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-copy,.footer-credit { font-size:.75rem; font-weight:300; color:rgba(250,248,244,.3); }
.footer-credit a { color:var(--accent); transition:opacity var(--t-fast); }
.footer-credit a:hover { opacity:.8; }

/* ============================================================
   23. DIVIDER
   ============================================================ */
.section-divider { border:none; border-top:1px solid var(--border); }

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  :root{--gutter:32px}
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .featured-strip{grid-template-columns:1fr}
  .feat-big-thumb-ph{height:320px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .categories-bar{grid-template-columns:1fr;gap:24px}
  .cats-bar-label{width:auto}
}
@media(max-width:900px){
  :root{--gutter:24px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-description{max-width:100%}
  .single-wrap,.archive-wrap{grid-template-columns:1fr}
  .sidebar{position:static;top:auto}
  .author-card{flex-direction:column;text-align:center;align-items:center}
  .footer-top{grid-template-columns:1fr 1fr;padding:40px var(--gutter) 32px}
}
@media(max-width:768px){
  .main-navigation{display:none}
  .main-navigation.is-open{
    display:block;position:fixed;inset:0;top:var(--nav-h);
    background:var(--cream);padding:1.5rem;z-index:99;overflow-y:auto;
    animation:slideDown .25s var(--ease);
  }
  @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .main-navigation.is-open .nav-menu{flex-direction:column;gap:2px}
  .main-navigation.is-open .nav-menu li a{padding:1rem;font-size:1rem;border-radius:var(--radius-md)}
  .menu-toggle{display:flex}
  .header-subscribe{display:none}
  .posts-grid{grid-template-columns:1fr}
  .comment-form-row{grid-template-columns:1fr}
  .post-navigation{grid-template-columns:1fr}
  .categories-bar{padding:28px 24px}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;gap:.5rem}
  .not-found-actions{flex-direction:column;align-items:center}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:flex-start;gap:1rem}
  .hero-section{padding:3rem 0}
}
@media print{
  .site-header,.site-footer,.sidebar,.post-navigation,
  .related-posts,.comments-section,.search-overlay{display:none!important}
  body{background:#fff;color:#000}
  .single-wrap{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}