/* =============================================================
   HOPKINS EDITORIAL — Main Stylesheet
   https://jasonhopkins.uk
   ============================================================= */

/* 0. DESIGN TOKENS
   ============================================================= */
:root {
  /* Colour palette — Light */
  --c-bg:           #ffffff;
  --c-bg-alt:       #f8f9fa;
  --c-bg-card:      #ffffff;
  --c-ink:          #111827;
  --c-body:         #374151;
  --c-muted:        #6b7280;
  --c-subtle:       #9ca3af;
  --c-border:       #e5e7eb;
  --c-border-lt:    #f3f4f6;
  --c-link:         #1d4ed8;
  --c-link-h:       #1e40af;
  --c-cat:          #1d4ed8;

  /* Typography */
  --f-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --f-display: 'Georgia', 'Times New Roman', serif;

  /* Scale */
  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  1.875rem;
  --t-3xl:  2.25rem;
  --t-4xl:  2.75rem;
  --t-5xl:  3.5rem;

  /* Spacing (4px base) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* Layout */
  --w-read:     760px;
  --w-wide:     1100px;
  --w-full:     1280px;
  --sidebar-w:  272px;
  --gutter:     1.5rem;
  --header-h:   60px;

  /* Misc */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --ease: 0.15s ease;
  --ease-md: 0.25s ease;
}

/* Dark mode */
[data-theme="dark"] {
  --c-bg:        #0f1117;
  --c-bg-alt:    #161b26;
  --c-bg-card:   #1a2033;
  --c-ink:       #f1f3f7;
  --c-body:      #c9d1de;
  --c-muted:     #8b95a8;
  --c-subtle:    #5a6478;
  --c-border:    #262d3d;
  --c-border-lt: #1e2535;
  --c-link:      #60a5fa;
  --c-link-h:    #93c5fd;
  --c-cat:       #60a5fa;
}

/* 1. RESET
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{font-family:var(--f-sans);font-size:var(--t-base);line-height:1.6;color:var(--c-body);background:var(--c-bg);transition:background var(--ease-md),color var(--ease-md)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font-family:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--c-link);outline-offset:3px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 2. UTILITIES
   ============================================================= */
.wrap{width:100%;max-width:var(--w-full);margin:0 auto;padding:0 var(--gutter)}
.wrap--wide{max-width:var(--w-wide)}
.wrap--read{max-width:var(--w-read)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;top:-80px;left:var(--s-4);z-index:9999;background:var(--c-link);color:#fff;padding:var(--s-2) var(--s-5);border-radius:var(--r);font-size:var(--t-sm);font-weight:600;transition:top var(--ease)}
.skip-link:focus{top:var(--s-3)}

.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c-cat);display:block}
.cat-label{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-cat);transition:color var(--ease)}
.cat-label:hover{color:var(--c-link-h)}
.post-meta{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:var(--t-sm);color:var(--c-muted)}
.post-meta .dot{color:var(--c-border)}

/* 3. HEADER
   ============================================================= */
.site-header{position:sticky;top:0;z-index:200;background:var(--c-bg);border-bottom:1px solid var(--c-border);transition:background var(--ease-md),border-color var(--ease-md),box-shadow var(--ease)}
.site-header.scrolled{box-shadow:0 1px 8px rgba(0,0,0,.07)}

.site-header__inner{display:flex;align-items:center;height:var(--header-h);gap:var(--s-6)}

.site-logo{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0;text-decoration:none}
.site-logo img{height:30px;width:auto}
.logo-mark{display:flex;align-items:center;flex-shrink:0}
.site-logo__name{font-size:var(--t-base);font-weight:600;color:var(--c-ink);letter-spacing:-.01em;white-space:nowrap;transition:color var(--ease-md)}

.site-nav{display:flex;align-items:center;gap:var(--s-1);flex:1}
.site-nav a{font-size:var(--t-base);color:var(--c-body);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);white-space:nowrap;transition:color var(--ease),background var(--ease)}
.site-nav a:hover{color:var(--c-ink)}
.site-nav a.current-menu-item{color:var(--c-ink);font-weight:500}

.header-controls{display:flex;align-items:center;gap:var(--s-3);margin-left:auto;flex-shrink:0}
.header-cta{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);font-weight:600;color:var(--c-link);white-space:nowrap;transition:color var(--ease)}
.header-cta:hover{color:var(--c-link-h)}

.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r);color:var(--c-muted);transition:color var(--ease),background var(--ease)}
.icon-btn:hover{color:var(--c-ink);background:var(--c-bg-alt)}

/* Dark toggle icons */
.dark-toggle .icon-moon{display:block}
.dark-toggle .icon-sun{display:none}
[data-theme="dark"] .dark-toggle .icon-moon{display:none}
[data-theme="dark"] .dark-toggle .icon-sun{display:block}

/* Mobile toggle */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;padding:0}
.menu-toggle span{display:block;height:1.5px;background:var(--c-ink);border-radius:2px;transition:transform var(--ease),opacity var(--ease)}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* 4. CATEGORY BAR
   ============================================================= */
.category-bar{background:var(--c-bg);border-bottom:1px solid var(--c-border);transition:background var(--ease-md),border-color var(--ease-md)}
.category-bar__inner{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.category-bar__inner::-webkit-scrollbar{display:none}
.category-bar a{display:inline-block;padding:.6875rem var(--s-4);font-size:var(--t-base);color:var(--c-muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--ease),border-color var(--ease)}
.category-bar a:hover{color:var(--c-ink)}
.category-bar a.active{color:var(--c-ink);font-weight:500;border-bottom-color:var(--c-ink)}

/* 5. SEARCH OVERLAY
   ============================================================= */
.search-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;opacity:0;pointer-events:none;transition:opacity var(--ease-md)}
.search-overlay.active{opacity:1;pointer-events:all}
.search-overlay__box{width:100%;max-width:600px;margin:0 var(--gutter);background:var(--c-bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px);transition:transform var(--ease-md)}
.search-overlay.active .search-overlay__box{transform:translateY(0)}
.search-overlay__form{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-border)}
.search-overlay__form svg{flex-shrink:0;color:var(--c-muted)}
.search-overlay__input{flex:1;font-size:var(--t-lg);color:var(--c-ink);background:transparent;border:none;outline:none}
.search-overlay__input::placeholder{color:var(--c-subtle)}
.search-overlay__hint{padding:var(--s-3) var(--s-5);font-size:var(--t-sm);color:var(--c-muted)}

/* 6. READING PROGRESS
   ============================================================= */
.reading-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--c-link);z-index:9999;transition:width .08s linear;pointer-events:none}

/* 7. FEATURED HERO
   ============================================================= */
.featured-hero{padding:var(--s-10) 0 var(--s-8)}
.featured-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center}
.featured-hero__eyebrow{margin-bottom:var(--s-4)}
.featured-hero__title{font-family:var(--f-display);font-size:clamp(var(--t-3xl),5vw,var(--t-5xl));font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--c-ink);margin-bottom:var(--s-4);transition:color var(--ease-md)}
.featured-hero__title a{color:inherit}
.featured-hero__title a:hover{color:var(--c-link)}
.featured-hero__excerpt{font-size:var(--t-base);color:var(--c-body);line-height:1.7;margin-bottom:var(--s-5);max-width:460px}
.featured-hero__read{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-base);font-weight:500;color:var(--c-link);margin-bottom:var(--s-6);transition:gap var(--ease),color var(--ease)}
.featured-hero__read:hover{gap:10px;color:var(--c-link-h)}
.featured-hero__byline{display:flex;align-items:center;gap:var(--s-3)}
.featured-hero__avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--c-border)}
.featured-hero__avatar img{width:100%;height:100%;object-fit:cover}
.featured-hero__image{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-alt)}
.featured-hero__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.featured-hero__image:hover img{transform:scale(1.02)}

/* 8. HOME GRID SECTION (cards + sidebar)
   ============================================================= */
.home-grid-section{padding:var(--s-8) 0;border-top:1px solid var(--c-border)}
.home-grid-section__inner{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--s-8);align-items:start}
.featured-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}

/* 9. POST CARD
   ============================================================= */
.post-card{display:flex;flex-direction:column}
.post-card__image{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--c-bg-alt);margin-bottom:var(--s-4);flex-shrink:0}
.post-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__image img{transform:scale(1.03)}
.post-card__cat{margin-bottom:var(--s-2)}
.post-card__title{font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;line-height:1.3;color:var(--c-ink);margin-bottom:var(--s-3);transition:color var(--ease-md)}
.post-card__title a{color:inherit}
.post-card__title a:hover{color:var(--c-link)}
.post-card__excerpt{font-size:var(--t-sm);color:var(--c-muted);line-height:1.65;margin-bottom:var(--s-3);flex:1}
.post-card__meta{font-size:var(--t-sm);color:var(--c-muted)}

/* 10. SIDEBAR
   ============================================================= */
.sidebar{display:flex;flex-direction:column;gap:var(--s-8)}
.sidebar-block__title{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-border);margin-bottom:var(--s-4);transition:color var(--ease-md),border-color var(--ease-md)}

.sidebar-about{display:flex;gap:var(--s-3);align-items:flex-start}
.sidebar-about__avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--c-border)}
.sidebar-about__avatar img{width:100%;height:100%;object-fit:cover}
.sidebar-about__text{font-size:var(--t-sm);color:var(--c-body);line-height:1.6}
.sidebar-about__link{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);font-weight:500;color:var(--c-link);margin-top:var(--s-2);transition:gap var(--ease),color var(--ease)}
.sidebar-about__link:hover{gap:8px;color:var(--c-link-h)}

.topics-list{display:flex;flex-direction:column}
.topics-list li{display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) 0;border-bottom:1px solid var(--c-border-lt);transition:border-color var(--ease-md)}
.topics-list li:last-child{border-bottom:none}
.topics-list a{font-size:var(--t-base);color:var(--c-body);transition:color var(--ease)}
.topics-list a:hover{color:var(--c-link)}
.topics-count{font-size:var(--t-sm);color:var(--c-muted)}
.topics-list__all{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);font-weight:500;color:var(--c-link);margin-top:var(--s-3);transition:gap var(--ease)}
.topics-list__all:hover{gap:8px}

.sidebar-cta{padding:var(--s-5);background:var(--c-bg-alt);border-radius:var(--r);border:1px solid var(--c-border);text-align:center;transition:background var(--ease-md),border-color var(--ease-md)}
.sidebar-cta p{font-size:var(--t-sm);color:var(--c-muted);line-height:1.6;margin-bottom:var(--s-4)}
.sidebar-cta .btn{width:100%;justify-content:center}

.popular-list{display:flex;flex-direction:column;gap:var(--s-4)}
.popular-item{display:flex;gap:var(--s-3);align-items:flex-start}
.popular-item__img{width:58px;height:44px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;background:var(--c-bg-alt)}
.popular-item__img img{width:100%;height:100%;object-fit:cover}
.popular-item__title{font-size:var(--t-sm);font-weight:600;color:var(--c-ink);line-height:1.4;margin-bottom:2px;transition:color var(--ease-md)}
.popular-item__title a{color:inherit}
.popular-item__title a:hover{color:var(--c-link)}
.popular-item__date{font-size:var(--t-xs);color:var(--c-link)}

/* 11. LATEST ARTICLES — list rows
   ============================================================= */
.latest-section{padding:var(--s-6) 0 var(--s-12)}
.latest-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-2)}
.latest-section__title{font-size:var(--t-md);font-weight:600;color:var(--c-ink)}

.article-row{display:grid;grid-template-columns:110px 1fr auto;gap:var(--s-4);align-items:start;padding:var(--s-5) 0;border-top:1px solid var(--c-border);text-decoration:none;color:inherit;transition:border-color var(--ease-md)}
.article-row:last-child{border-bottom:1px solid var(--c-border)}
.article-row:hover .article-row__title{color:var(--c-link)}
.article-row__img{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg-alt)}
.article-row__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.article-row:hover .article-row__img img{transform:scale(1.05)}
.article-row__cat{margin-bottom:var(--s-1)}
.article-row__title{font-family:var(--f-display);font-size:var(--t-md);font-weight:700;color:var(--c-ink);line-height:1.35;margin-bottom:var(--s-2);transition:color var(--ease)}
.article-row__excerpt{font-size:var(--t-sm);color:var(--c-muted);line-height:1.6}
.article-row__aside{display:flex;flex-direction:column;gap:var(--s-1);text-align:right;font-size:var(--t-sm);color:var(--c-muted);white-space:nowrap;padding-top:2px}

.load-more-wrap{text-align:center;margin-top:var(--s-6)}
.btn-load-more{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-8);font-size:var(--t-base);color:var(--c-body);background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r);transition:border-color var(--ease),color var(--ease),background var(--ease)}
.btn-load-more:hover{border-color:var(--c-ink);color:var(--c-ink)}

/* 12. PAGINATION
   ============================================================= */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--s-1);padding:var(--s-8) 0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 var(--s-2);font-size:var(--t-sm);font-weight:500;border:1px solid var(--c-border);border-radius:var(--r);color:var(--c-muted);transition:all var(--ease)}
.pagination a:hover{border-color:var(--c-ink);color:var(--c-ink)}
.pagination .current{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.pagination .dots{border:none;background:none}

/* 13. SINGLE POST HEADER
   ============================================================= */
.post-header{padding:var(--s-10) 0 var(--s-8);border-bottom:1px solid var(--c-border)}
.post-header__cat{margin-bottom:var(--s-3)}
.post-header__title{font-family:var(--f-display);font-size:clamp(var(--t-2xl),4.5vw,var(--t-4xl));font-weight:700;line-height:1.13;letter-spacing:-.02em;color:var(--c-ink);margin-bottom:var(--s-4);max-width:800px;transition:color var(--ease-md)}
.post-header__intro{font-size:var(--t-md);color:var(--c-muted);line-height:1.65;max-width:680px;margin-bottom:var(--s-5)}
.post-header__byline{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.post-header__avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--c-border)}
.post-header__avatar img{width:100%;height:100%;object-fit:cover}
.post-hero-img{border-radius:var(--r-lg);overflow:hidden;margin:var(--s-8) 0}
.post-hero-img img{width:100%;max-height:500px;object-fit:cover}

/* 14. SINGLE LAYOUT
   ============================================================= */
.single-layout{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--s-12);align-items:start;padding:var(--s-8) 0 var(--s-16)}

/* 15. POST BODY
   ============================================================= */
.post-body{font-size:var(--t-md);line-height:1.85;color:var(--c-body);max-width:var(--w-read)}
.post-body>*+*{margin-top:var(--s-5)}
.post-body>h2{margin-top:var(--s-10)}
.post-body>h3{margin-top:var(--s-8)}
.post-body h2{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;line-height:1.25;color:var(--c-ink);letter-spacing:-.015em}
.post-body h3{font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;line-height:1.3;color:var(--c-ink)}
.post-body h4{font-size:var(--t-md);font-weight:600;color:var(--c-ink)}
.post-body p{margin-bottom:var(--s-5)}
.post-body p:last-child{margin-bottom:0}
.post-body a{color:var(--c-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--ease)}
.post-body a:hover{color:var(--c-link-h)}
.post-body ul,.post-body ol{padding-left:var(--s-6);margin-bottom:var(--s-5)}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-bottom:var(--s-2)}
.post-body li::marker{color:var(--c-muted)}
.post-body blockquote{border-left:3px solid var(--c-link);padding:var(--s-4) var(--s-6);background:var(--c-bg-alt);border-radius:0 var(--r) var(--r) 0;margin:var(--s-8) 0;transition:background var(--ease-md),border-color var(--ease-md)}
.post-body blockquote p{font-family:var(--f-display);font-size:var(--t-lg);font-style:italic;line-height:1.55;color:var(--c-ink);margin:0}
.post-body blockquote cite{display:block;font-size:var(--t-sm);font-style:normal;color:var(--c-muted);margin-top:var(--s-3)}
.post-body code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.875em;background:var(--c-bg-alt);color:var(--c-ink);padding:2px 6px;border-radius:var(--r-sm);border:1px solid var(--c-border);transition:background var(--ease-md)}
.post-body pre{background:#0f1117;color:#e2e8f0;border-radius:var(--r);padding:var(--s-5);overflow-x:auto;margin:var(--s-6) 0;font-size:var(--t-sm);line-height:1.7}
.post-body pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
.post-body img{border-radius:var(--r);margin:var(--s-6) 0}
.post-body figure{margin:var(--s-6) 0}
.post-body figcaption{font-size:var(--t-sm);color:var(--c-muted);text-align:center;margin-top:var(--s-2)}
.post-body hr{border:none;border-top:1px solid var(--c-border);margin:var(--s-10) 0}
.post-body .wp-block-pullquote{border-top:3px solid var(--c-ink);border-bottom:3px solid var(--c-ink);padding:var(--s-5) 0;margin:var(--s-8) 0;text-align:center;transition:border-color var(--ease-md)}
.post-body .wp-block-pullquote p{font-family:var(--f-display);font-size:var(--t-xl);font-style:italic;line-height:1.45;color:var(--c-ink);margin:0}

/* 16. POST SIDEBAR
   ============================================================= */
.post-sidebar{position:sticky;top:calc(var(--header-h) + 16px)}
.post-sidebar .sidebar-block{margin-bottom:var(--s-6)}

.toc{display:flex;flex-direction:column;gap:2px}
.toc a{display:block;font-size:var(--t-sm);color:var(--c-muted);padding:var(--s-1) 0 var(--s-1) var(--s-3);border-left:2px solid var(--c-border);line-height:1.4;transition:color var(--ease),border-color var(--ease)}
.toc a:hover,.toc a.active{color:var(--c-link);border-left-color:var(--c-link)}
.toc a.toc-h3{padding-left:calc(var(--s-3) + var(--s-3))}

/* 17. POST TAGS & SHARE
   ============================================================= */
.post-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-top:var(--s-6);margin-top:var(--s-6);border-top:1px solid var(--c-border)}
.post-tags a{font-size:var(--t-sm);color:var(--c-muted);padding:var(--s-1) var(--s-3);border:1px solid var(--c-border);border-radius:100px;transition:all var(--ease)}
.post-tags a:hover{border-color:var(--c-ink);color:var(--c-ink)}

.share-bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-5) 0;border-top:1px solid var(--c-border);margin-top:var(--s-6)}
.share-bar__label{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.share-btn{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);font-weight:500;color:var(--c-body);padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-sm);transition:all var(--ease)}
.share-btn:hover{border-color:var(--c-ink);color:var(--c-ink)}

/* 18. AUTHOR BIO
   ============================================================= */
.author-bio{display:flex;gap:var(--s-5);align-items:flex-start;padding:var(--s-6);border:1px solid var(--c-border);border-radius:var(--r-lg);margin-top:var(--s-10);background:var(--c-bg-alt);transition:background var(--ease-md),border-color var(--ease-md)}
.author-bio__avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--c-border)}
.author-bio__avatar img{width:100%;height:100%;object-fit:cover}
.author-bio__label{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);display:block;margin-bottom:var(--s-1)}
.author-bio__name{font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;color:var(--c-ink);margin-bottom:var(--s-3);line-height:1.2}
.author-bio__desc{font-size:var(--t-base);color:var(--c-body);line-height:1.65;margin-bottom:var(--s-4)}
.author-bio__links{display:flex;gap:var(--s-3);flex-wrap:wrap}
.author-bio__links a{font-size:var(--t-sm);font-weight:500;color:var(--c-link);display:inline-flex;align-items:center;gap:4px;transition:color var(--ease)}
.author-bio__links a:hover{color:var(--c-link-h)}

/* 19. ARTICLE CTA
   ============================================================= */
.article-cta{border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-8);margin-top:var(--s-10);text-align:center;background:var(--c-bg-alt);transition:background var(--ease-md),border-color var(--ease-md)}
.article-cta__eyebrow{margin-bottom:var(--s-3)}
.article-cta__title{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;color:var(--c-ink);margin-bottom:var(--s-3);line-height:1.25}
.article-cta__desc{font-size:var(--t-base);color:var(--c-muted);line-height:1.65;margin-bottom:var(--s-6);max-width:460px;margin-left:auto;margin-right:auto}
.article-cta__actions{display:flex;align-items:center;justify-content:center;gap:var(--s-3);flex-wrap:wrap}

/* 20. RELATED ARTICLES
   ============================================================= */
.related-section{padding-top:var(--s-10);border-top:1px solid var(--c-border);margin-top:var(--s-10)}
.related-section__heading{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-5)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}

/* 21. BUTTONS
   ============================================================= */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-5);font-size:var(--t-base);font-weight:600;border-radius:var(--r);border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:all var(--ease);line-height:1;cursor:pointer}
.btn--primary{background:var(--c-link);color:#fff;border-color:var(--c-link)}
.btn--primary:hover{background:var(--c-link-h);border-color:var(--c-link-h);color:#fff}
.btn--outline{background:transparent;color:var(--c-ink);border-color:var(--c-border)}
.btn--outline:hover{border-color:var(--c-ink)}
.btn--sm{padding:var(--s-1) var(--s-4);font-size:var(--t-sm)}

/* 22. ABOUT PAGE
   ============================================================= */
.about-hero{padding:var(--s-12) 0;border-bottom:1px solid var(--c-border)}
.about-hero__inner{display:grid;grid-template-columns:1fr 340px;gap:var(--s-12);align-items:center}
.about-intro{color:var(--c-muted);line-height:1.7;margin-bottom:var(--s-5)}
.about-portrait{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-portrait img{width:100%}
.credentials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin:var(--s-8) 0}
.credential{padding:var(--s-5);border:1px solid var(--c-border);border-radius:var(--r);background:var(--c-bg-alt);transition:background var(--ease-md),border-color var(--ease-md)}
.credential__num{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:700;color:var(--c-link);line-height:1;margin-bottom:var(--s-2)}
.credential__label{font-size:var(--t-base);font-weight:600;color:var(--c-ink);margin-bottom:var(--s-1)}
.credential__desc{font-size:var(--t-sm);color:var(--c-muted);line-height:1.5}
.expertise-list{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0}
.expertise-tag{font-size:var(--t-sm);padding:var(--s-1) var(--s-3);border:1px solid var(--c-border);border-radius:100px;color:var(--c-body);background:var(--c-bg-alt);transition:all var(--ease-md)}

/* 23. CONTACT PAGE
   ============================================================= */
.contact-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--s-12);align-items:start;padding:var(--s-8) 0 var(--s-16)}
.form-group{margin-bottom:var(--s-5)}
.form-group label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--c-ink);margin-bottom:var(--s-2)}
.form-group input,.form-group textarea{width:100%;padding:.6875rem var(--s-4);font-size:var(--t-base);color:var(--c-ink);background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r);outline:none;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease-md);-webkit-appearance:none}
.form-group input:focus,.form-group textarea:focus{border-color:var(--c-link);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.form-group textarea{min-height:150px;resize:vertical;line-height:1.6}
.form-notice{padding:var(--s-3) var(--s-4);border-radius:var(--r);font-size:var(--t-sm);margin-bottom:var(--s-4);display:none}
.form-notice.success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.form-notice.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.contact-aside{display:flex;flex-direction:column;gap:var(--s-6)}
.contact-aside-item{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid var(--c-border)}
.contact-aside-item:first-child{border-top:1px solid var(--c-border)}
.contact-aside-icon{width:36px;height:36px;background:var(--c-bg-alt);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--c-link);flex-shrink:0;transition:background var(--ease-md)}
.contact-label{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);display:block;margin-bottom:2px}
.contact-val{font-size:var(--t-base);color:var(--c-body)}
.contact-val a{color:var(--c-link)}
.contact-val a:hover{color:var(--c-link-h)}

/* 24. PAGE HERO
   ============================================================= */
.page-hero{padding:var(--s-10) 0 var(--s-8);border-bottom:1px solid var(--c-border)}
.page-hero__title{font-family:var(--f-display);font-size:clamp(var(--t-2xl),4vw,var(--t-4xl));color:var(--c-ink);margin-bottom:var(--s-3);letter-spacing:-.02em}
.page-hero__sub{font-size:var(--t-md);color:var(--c-muted);max-width:540px;line-height:1.65}

/* 25. ARCHIVE GRID
   ============================================================= */
.archive-section{padding:var(--s-8) 0 var(--s-16)}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8) var(--s-6)}

/* 26. BREADCRUMB
   ============================================================= */
.breadcrumb{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s-4);flex-wrap:wrap}
.breadcrumb a{color:var(--c-muted);transition:color var(--ease)}
.breadcrumb a:hover{color:var(--c-link)}
.breadcrumb .sep{color:var(--c-border)}

/* 27. FOOTER
   ============================================================= */
.site-footer{border-top:1px solid var(--c-border);padding:var(--s-10) 0 var(--s-5);transition:background var(--ease-md),border-color var(--ease-md)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr;gap:var(--s-8);padding-bottom:var(--s-8);border-bottom:1px solid var(--c-border);margin-bottom:var(--s-5)}
.footer-logo{height:26px;width:auto;margin-bottom:var(--s-3)}
.footer-bio{font-size:var(--t-sm);color:var(--c-muted);line-height:1.65;max-width:260px}
.footer-col-title{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-4)}
.footer-col ul{display:flex;flex-direction:column;gap:var(--s-2)}
.footer-col a{font-size:var(--t-base);color:var(--c-body);transition:color var(--ease)}
.footer-col a:hover{color:var(--c-link)}
.footer-portfolio-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-base);font-weight:600;color:var(--c-link);margin-bottom:var(--s-3);transition:color var(--ease)}
.footer-portfolio-link:hover{color:var(--c-link-h)}
.footer-linkedin{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--c-border);border-radius:var(--r);color:var(--c-body);transition:all var(--ease)}
.footer-linkedin:hover{border-color:#0a66c2;color:#0a66c2}
.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.site-footer__bottom p{font-size:var(--t-sm);color:var(--c-muted)}
.site-footer__bottom a{color:var(--c-muted);transition:color var(--ease)}
.site-footer__bottom a:hover{color:var(--c-link)}

/* 28. 404
   ============================================================= */
.not-found{text-align:center;padding:var(--s-20) 0}
.not-found__code{font-family:var(--f-display);font-size:7rem;font-weight:700;color:var(--c-border);line-height:1;margin-bottom:var(--s-4)}
.not-found__title{font-family:var(--f-display);font-size:var(--t-3xl);color:var(--c-ink);margin-bottom:var(--s-3)}
.not-found__desc{font-size:var(--t-base);color:var(--c-muted);margin-bottom:var(--s-6)}

/* 29. COMMENTS
   ============================================================= */
.comments-area{padding-top:var(--s-10);border-top:1px solid var(--c-border);margin-top:var(--s-10);max-width:var(--w-read)}
.comments-title{font-family:var(--f-display);font-size:var(--t-xl);color:var(--c-ink);margin-bottom:var(--s-6)}

/* 30. WP ALIGNMENT
   ============================================================= */
.alignwide{margin-left:calc(-1 * var(--s-10));margin-right:calc(-1 * var(--s-10))}
.aligncenter{text-align:center}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:var(--t-sm);color:var(--c-muted);text-align:center;margin-top:var(--s-2)}

/* 31. RESPONSIVE 1100px
   ============================================================= */
@media(max-width:1100px){
  :root{--sidebar-w:240px;--gutter:1.25rem}
  .site-footer__grid{grid-template-columns:1.5fr 1fr 1fr}
}

/* 32. RESPONSIVE 960px
   ============================================================= */
@media(max-width:960px){
  :root{--gutter:1.25rem}
  .featured-hero__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .featured-hero__image{order:-1;aspect-ratio:16/9}
  .featured-hero__excerpt{max-width:100%}
  .home-grid-section__inner{grid-template-columns:1fr}
  .featured-cards{grid-template-columns:1fr 1fr}
  .single-layout{grid-template-columns:1fr;gap:var(--s-8)}
  .post-sidebar{position:static}
  .related-grid{grid-template-columns:1fr 1fr}
  .about-hero__inner{grid-template-columns:1fr}
  .about-portrait{max-width:300px}
  .contact-layout{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:1fr 1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
}

/* 33. RESPONSIVE 640px
   ============================================================= */
@media(max-width:640px){
  :root{--gutter:1rem}
  .site-nav,.header-cta{display:none}
  .menu-toggle{display:flex}
  .site-nav.open{display:flex;flex-direction:column;position:fixed;inset:0;top:var(--header-h);background:var(--c-bg);z-index:150;padding:var(--s-4) var(--gutter);overflow-y:auto;border-top:1px solid var(--c-border);gap:0}
  .site-nav.open a{font-size:var(--t-md);padding:var(--s-4) 0;border-bottom:1px solid var(--c-border);border-radius:0}
  .site-nav.open .header-cta{display:inline-flex;margin-top:var(--s-4);font-size:var(--t-md)}
  .featured-hero{padding:var(--s-6) 0}
  .featured-hero__title{font-size:var(--t-2xl)}
  .featured-cards{grid-template-columns:1fr}
  .article-row{grid-template-columns:80px 1fr}
  .article-row__aside{display:none}
  .related-grid{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:1fr}
  .author-bio{flex-direction:column}
  .author-bio__avatar{width:56px;height:56px}
  .credentials-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .post-header{padding:var(--s-6) 0 var(--s-5)}
  .post-header__title{font-size:var(--t-2xl)}
  .post-header__intro{font-size:var(--t-base)}
  .post-body{font-size:var(--t-base)}
  .single-layout{padding:var(--s-5) 0 var(--s-10)}
  .article-cta{padding:var(--s-6)}
  .article-cta__actions{flex-direction:column}
  .article-cta__actions .btn{width:100%;justify-content:center}
  .site-footer{padding:var(--s-6) 0 var(--s-4)}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}

/* 34. PRINT
   ============================================================= */
@media print{
  .site-header,.site-footer,.post-sidebar,.related-section,
  .author-bio,.article-cta,.reading-progress,.category-bar,.share-bar{display:none!important}
  .single-layout{grid-template-columns:1fr}
  .post-body{font-size:12pt;line-height:1.6}
  body{background:#fff;color:#000}
}