/* HeyNews Blog — Bundled & Minified CSS */
/* Generated: 2026-03-30T09:11:55Z */
/* ── CSS Custom Properties (Design Tokens) ──────────────────────────────── */:root{/* Core colors */ --color-black:#000000;--color-soft-black:#262626;--color-white:#FFFFFF;--color-off-white:#FAFAFA;/* Text colors */ --color-text-primary:#171717;--color-text-secondary:#525252;--color-text-tertiary:#A3A3A3;/* Neutral scale */ --color-neutral-50:#FAFAFA;--color-neutral-100:#F5F5F5;--color-neutral-200:#E5E5E5;--color-neutral-300:#D4D4D4;--color-neutral-400:#A3A3A3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;/* Brand accent */ --color-accent:#5A9AB8;/* Semantic colors */ --color-success:#16a34a;--color-error:#dc2626;--color-warning:#d97706;--color-info:#2563eb;/* Typography */ --font-display:'Fraunces',serif;--font-body:'Inter',sans-serif;/* Spacing */ --container-max:1200px;--container-narrow:720px;--gap-2xs:0.25rem;--gap-xs:0.5rem;--gap-sm:1rem;--gap:2rem;--gap-lg:3rem;--gap-xl:4rem;/* Border radius */ --radius:4px;--radius-lg:4px;--radius-sm:2px;/* Shadows */ --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);--shadow-lg:0 12px 32px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.06);/* Transitions */ --transition-fast:0.15s ease;--transition-base:0.2s ease;/* States */ --opacity-disabled:0.5;/* Gradients (subtle depth gradients for hero,headers,CTA) */ --gradient-hero:linear-gradient(135deg,#1a1a1a 0%,#000000 100%)}
/* ── Smooth Scroll ─────────────────────────────────────────────────────── */ html{scroll-behavior:smooth}
/* ── Minimal Reset ──────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.625;color:var(--color-text-primary);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-text-primary);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0.5em;color:var(--color-text-primary)}
p{margin-top:0}
/* ── Typography Scale ───────────────────────────────────────────────────── */ .display-sm{font-family:var(--font-display);font-size:36px;font-weight:500;line-height:1.25;letter-spacing:-0.02em;color:var(--color-text-primary)}
.heading-xl{font-family:var(--font-body);font-size:30px;font-weight:600;line-height:1.25;letter-spacing:-0.02em}
.heading-lg{font-family:var(--font-body);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-0.02em}
.heading-md{font-family:var(--font-body);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:0}
.body-lg{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.625;letter-spacing:0}
.body-md{font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.625;letter-spacing:0}
.body-sm{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0}
.body-xs{font-family:var(--font-body);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:0}
.label-md{font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0.05em;text-transform:uppercase}
/* ── Accessibility ─────────────────────────────────────────────────────── */ .skip-link{position:absolute;top:-100%;left:1rem;z-index:10000;padding:0.5rem 1rem;font-size:14px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border-radius:var(--radius-sm);text-decoration:none}
.skip-link:focus{top:0.5rem}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* Screen reader only — visually hidden but accessible */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}
@media (prefers-contrast:more){:root{--color-text-tertiary:#525252;--shadow-sm:none;--shadow-md:none;--shadow-lg:none}
.post-card,.author-bio,.newsletter-signup,.toc{border-width:2px}
}
/* ── Responsive Typography ──────────────────────────────────────────────── */ @media (max-width:768px){.display-sm{font-size:28px}
.heading-xl{font-size:24px}
.heading-lg{font-size:20px}
}
/* ── Print Styles ──────────────────────────────────────────────────────── */ @media print{.site-header,.site-footer,.skip-link,.reading-progress,.social-sharing,.newsletter-signup,.cta-banner,.related-posts,.breadcrumbs,.nav-search,.error-404__search,.error-404__topics{display:none !important}
body{color:#000;background:#fff;font-size:12pt;line-height:1.5}
a{color:#000;text-decoration:underline}
.entry-content a[href]::after{content:" (" attr(href) ")";font-size:0.85em;color:#555}
.entry-content a[href^="#"]::after,.entry-content a[href^="javascript"]::after{content:""}
img{max-width:100% !important}
.container,.container-narrow{max-width:100%;padding:0}
}
/* ── Containers ──────────────────────────────────────────────────────────── */ .container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--gap);padding-right:var(--gap)}
.container-narrow{width:100%;max-width:var(--container-narrow);margin-left:auto;margin-right:auto;padding-left:var(--gap);padding-right:var(--gap)}
/* ── Card Grid ──────────────────────────────────────────────────────────── */ .card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media (max-width:768px){.card-grid{grid-template-columns:1fr}
}
/* ── Three-column grid (for related posts) ──────────────────────────────── */ .card-grid--three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:960px){.card-grid--three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){.card-grid--three{grid-template-columns:1fr}
}
/* ── Section spacing ────────────────────────────────────────────────────── */ .site-main{padding-top:3rem;padding-bottom:4rem}
.section{margin-bottom:3rem}
.section:last-child{margin-bottom:0}
/* ── Pagination ─────────────────────────────────────────────────────────── */ .nav-links{display:flex;justify-content:center;align-items:center;gap:var(--gap-xs);margin-top:3rem;font-family:var(--font-body);font-size:14px}
.nav-links a,.nav-links span{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 0.875rem;border:1px solid var(--color-neutral-200);border-radius:2rem;color:var(--color-text-secondary);transition:all 0.15s ease}
.nav-links a:hover{border-color:var(--color-text-primary);color:var(--color-text-primary);background-color:var(--color-neutral-50)}
.nav-links .current{background-color:var(--color-text-primary);border-color:var(--color-text-primary);color:var(--color-white);font-weight:600}
/* ── Utility ────────────────────────────────────────────────────────────── */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-center{text-align:center}
/* ── Site Header ─────────────────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:100;background-color:rgba(255,255,255,0.95);border-bottom:1px solid var(--color-neutral-200);transition:box-shadow 0.2s ease,backdrop-filter 0.2s ease}
.site-header--scrolled{box-shadow:0 1px 4px rgba(0,0,0,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:rgba(255,255,255,0.85)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
/* ── Logo ────────────────────────────────────────────────────────────────── */ .site-header__logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-header__logo-img{height:28px;width:auto}
/* ── Hamburger Toggle ───────────────────────────────────────────────────── */ .site-header__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;background:none;border:none;cursor:pointer}
.hamburger-line{display:block;width:100%;height:2px;background-color:var(--color-text-primary);border-radius:1px;transition:transform 0.2s ease,opacity 0.2s ease}
/* Hamburger open state */ .site-header__toggle[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header__toggle[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0}
.site-header__toggle[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── Navigation ─────────────────────────────────────────────────────────── */ .site-header__nav{display:flex;align-items:center;gap:2rem}
.nav-menu{display:flex;align-items:center;gap:0.25rem;list-style:none;margin:0;padding:0}
.nav-menu__link{display:inline-flex;align-items:center;gap:4px;padding:0.5rem 0.75rem;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-text-secondary);text-decoration:none;border-radius:var(--radius);border:none;background:none;cursor:pointer;transition:color 0.15s ease,background-color 0.15s ease}
.nav-menu__link:hover{color:var(--color-text-primary);background-color:var(--color-neutral-50)}
/* ── Dropdown ───────────────────────────────────────────────────────────── */ .nav-menu__item--has-dropdown{position:relative}
.dropdown-arrow{transition:transform 0.2s ease}
.nav-menu__dropdown-toggle[aria-expanded="true"] .dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown{display:none;position:absolute;top:100%;left:0;min-width:180px;margin-top:4px;padding:0.5rem 0;background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,0.08);list-style:none;z-index:200}
.nav-dropdown--open{display:block}
.nav-dropdown__link{display:block;padding:0.5rem 1rem;font-size:14px;font-weight:400;color:var(--color-text-secondary);text-decoration:none;transition:background-color 0.1s ease,color 0.1s ease}
.nav-dropdown__link:hover{background-color:var(--color-neutral-50);color:var(--color-text-primary)}
/* ── CTA Button ─────────────────────────────────────────────────────────── */ .nav-cta{display:inline-flex;align-items:center;padding:0.5rem 1.25rem;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border-radius:2rem;text-decoration:none;white-space:nowrap;transition:background-color 0.15s ease,transform 0.15s ease}
.nav-cta:hover{background-color:var(--color-soft-black);color:var(--color-white);transform:translateY(-1px);text-decoration:none}
.nav-cta:active{transform:scale(0.98)}
/* ── Search ─────────────────────────────────────────────────────────────── */ .nav-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;transition:color 0.15s ease,background-color 0.15s ease}
.nav-search-toggle:hover{color:var(--color-text-primary);background-color:var(--color-neutral-50)}
.nav-search{overflow:hidden;max-width:0;opacity:0;transition:max-width 0.25s ease,opacity 0.2s ease}
.nav-search--open{max-width:220px;opacity:1}
.nav-search__form{display:flex}
.nav-search__input{width:200px;padding:0.4rem 0.75rem;font-family:var(--font-body);font-size:14px;border:1px solid var(--color-neutral-200);border-radius:2rem;outline:none;background-color:var(--color-neutral-50);transition:border-color 0.15s ease,box-shadow 0.15s ease}
.nav-search__input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 20%,transparent)}
.nav-search__input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* ── Mobile ─────────────────────────────────────────────────────────────── */ @keyframes navSlideDown{from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
@media (max-width:768px){.site-header__toggle{display:flex}
.site-header__nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:1.25rem var(--gap) 1.5rem;background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-200);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.site-header__nav--open{display:flex;animation:navSlideDown 0.2s ease}
.nav-menu{flex-direction:column;align-items:stretch;gap:0}
.nav-menu__link{padding:0.875rem 0;font-size:16px;border-bottom:1px solid var(--color-neutral-100)}
.nav-dropdown{position:static;border:none;box-shadow:none;margin-top:0;padding-left:1rem}
.nav-cta{margin-top:1rem;text-align:center;justify-content:center}
.nav-search-toggle{display:none}
.nav-search{max-width:none;opacity:1;overflow:visible;margin-bottom:0.75rem}
.nav-search[hidden]{display:block !important}
.nav-search__input{width:100%}
}
/* ── Site Footer ─────────────────────────────────────────────────────────── */ .site-footer{background-color:var(--color-black);color:var(--color-white);padding-top:4rem;position:relative}
/* Gradient fade separator before footer */ .site-footer::before{content:'';display:block;position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--color-neutral-300),transparent)}
.site-footer a{color:var(--color-neutral-400);text-decoration:none;transition:color 0.15s ease}
.site-footer a:hover{color:var(--color-white)}
/* ── Logo ────────────────────────────────────────────────────────────────── */ .site-footer__logo{margin-bottom:3rem}
.site-footer__logo-img{height:28px;width:auto}
/* ── Link Columns ───────────────────────────────────────────────────────── */ .site-footer__columns{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.site-footer__heading{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-white);margin-bottom:1rem;letter-spacing:0}
.site-footer__links{list-style:none;margin:0;padding:0}
.site-footer__links li{margin-bottom:0.625rem}
.site-footer__links a{font-size:14px;line-height:1.5}
.site-footer__links a:hover{color:var(--color-white);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,0.4)}
/* ── Copyright Bar ──────────────────────────────────────────────────────── */ .site-footer__bar{margin-top:3rem;padding:1.5rem 0;border-top:1px solid var(--color-neutral-800)}
.site-footer__bar p{font-size:13px;color:var(--color-neutral-500);margin:0}
.site-footer__bar a{color:var(--color-neutral-400)}
.site-footer__bar a:hover{color:var(--color-white)}
/* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:960px){.site-footer__columns{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){.site-footer__columns{grid-template-columns:repeat(2,1fr)}
.site-footer__col:last-child{grid-column:span 2}
}
/* ── Breadcrumbs ───────────────────────────────────────────────────────── */ .breadcrumbs{padding:1rem 0 0;margin-bottom:0.5rem}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem;list-style:none;margin:0;padding:0}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:0.25rem;font-size:13px;color:var(--color-text-tertiary)}
.breadcrumbs__link{color:var(--color-text-tertiary);text-decoration:none;transition:color 0.15s ease}
.breadcrumbs__link:hover{color:var(--color-accent);text-decoration:none}
.breadcrumbs__current{color:var(--color-text-secondary);font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs__sep{color:var(--color-text-tertiary);flex-shrink:0}
/* ── Post Card ───────────────────────────────────────────────────────────── */ .post-card{display:flex;flex-direction:column;background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow 0.2s ease,transform 0.2s ease,border-color 0.2s ease}
.post-card:hover{border-color:var(--color-neutral-300);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.post-card__image{aspect-ratio:16 / 9;overflow:hidden;background-color:var(--color-neutral-100)}
.post-card__image--placeholder{background-color:var(--color-neutral-100)}
.post-card__image img{width:100%;height:100%;object-fit:cover;transition:transform 0.2s ease}
.post-card:hover .post-card__image img{transform:scale(1.02)}
.post-card__image-link{display:block}
.post-card__content{display:flex;flex-direction:column;gap:0.5rem;padding:1.5rem;flex:1}
.post-card__title{margin-bottom:0}
.post-card__title a{color:var(--color-text-primary);text-decoration:none}
.post-card__title a:hover{color:var(--color-accent);text-decoration:none}
.post-card__excerpt{color:var(--color-text-secondary);margin-bottom:0;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card__meta{color:var(--color-text-tertiary);margin-top:auto;padding-top:0.5rem;display:flex;align-items:center;gap:0.375rem}
.post-card__avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-card__sep{margin:0 0.1rem}
/* ── Category Badge ─────────────────────────────────────────────────────── */ .category-badge{display:inline-block;padding:0.25rem 0.625rem;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--color-accent);background-color:color-mix(in srgb,var(--color-accent) 12%,white);border-radius:2rem;text-decoration:none;transition:background-color 0.15s ease,color 0.15s ease}
.category-badge:hover{background-color:var(--color-accent);color:var(--color-white);text-decoration:none}
/* ── Author Bio Box ─────────────────────────────────────────────────────── */ .author-bio{display:flex;gap:1.25rem;padding:2rem;margin:3rem 0;border:1px solid var(--color-neutral-200);border-left:3px solid var(--color-accent);border-radius:var(--radius-lg);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}
.author-bio__avatar img{width:88px;height:88px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-sm)}
.author-bio__name{margin-bottom:0.25rem}
.author-bio__name a{color:var(--color-text-primary);text-decoration:none}
.author-bio__name a:hover{color:var(--color-accent)}
.author-bio__description{color:var(--color-text-secondary);margin-bottom:0}
/* ── Post Meta Line ─────────────────────────────────────────────────────── */ .post-meta{color:var(--color-text-secondary);display:flex;flex-wrap:wrap;align-items:center;gap:0}
.post-meta__sep{margin:0 0.5rem;color:var(--color-text-tertiary)}
.post-meta a{color:var(--color-text-secondary);text-decoration:none}
.post-meta a:hover{color:var(--color-accent)}
/* ── CTA Banner ─────────────────────────────────────────────────────────── */ .cta-banner{background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 10%,#f8f8f8) 0%,var(--color-neutral-50) 100%);border-top:1px solid color-mix(in srgb,var(--color-accent) 20%,var(--color-neutral-200));border-bottom:1px solid color-mix(in srgb,var(--color-accent) 20%,var(--color-neutral-200));padding:4rem 0;margin-top:3rem}
.cta-banner__inner{text-align:center}
.cta-banner__text{margin-bottom:1.75rem}
.cta-banner__button{display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 2.25rem;font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border-radius:2rem;text-decoration:none;transition:background-color 0.15s ease,transform 0.15s ease,box-shadow 0.15s ease}
.cta-banner__button:hover{background-color:var(--color-soft-black);color:var(--color-white);transform:translateY(-1px);box-shadow:var(--shadow-md);text-decoration:none}
.cta-banner__button:active{transform:scale(0.98)}
/* ── Related Posts ──────────────────────────────────────────────────────── */ .related-posts{padding-top:0;border-top:none;position:relative}
.related-posts::before{content:'';display:block;height:3px;background:linear-gradient(to right,var(--color-accent),var(--color-neutral-200));border-radius:2px;margin-bottom:3rem}
.related-posts__heading{margin-bottom:1.5rem;font-size:22px}
/* ── Archive Header ─────────────────────────────────────────────────────── */ .archive-header{text-align:center;margin-bottom:3rem;padding:3rem 0 0;position:relative}
.archive-header::after{content:'';display:block;width:48px;height:3px;background-color:var(--color-accent);border-radius:2px;margin:1.25rem auto 0}
.archive-header__title{margin-bottom:0.5rem;font-size:40px}
.archive-header__description{color:var(--color-text-secondary);margin-bottom:0}
/* ── Archive Section Title ──────────────────────────────────────────────── */ .archive-section-title{color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1.5rem}
/* ── Author Header (for author archive) ─────────────────────────────────── */ .author-header{display:flex;gap:2rem;align-items:center;margin-bottom:3rem;padding:2.5rem;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}
.author-header__avatar img{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-md)}
.author-header__name{margin-bottom:0.25rem}
.author-header__bio{color:var(--color-text-secondary);margin-bottom:0}
/* ── 404 Page ────────────────────────────────────────────────────────────── */ .error-404{text-align:center;padding-top:5rem;padding-bottom:5rem}
.error-404__icon{margin-bottom:2rem;opacity:0.7}
.error-404__message{color:var(--color-text-secondary);margin-top:0.75rem;margin-bottom:1.5rem}
.error-404__search{display:flex;max-width:400px;margin:0 auto 1.5rem}
.error-404__search-input{flex:1;padding:0.75rem 1rem;font-family:var(--font-body);font-size:15px;border:1px solid var(--color-neutral-300);border-right:none;border-radius:2rem 0 0 2rem;outline:none}
.error-404__search-input:focus{border-color:var(--color-accent)}
.error-404__search-btn{padding:0.75rem 1.25rem;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border:none;border-radius:0 2rem 2rem 0;cursor:pointer;transition:background-color 0.15s ease}
.error-404__search-btn:hover{background-color:var(--color-soft-black)}
.error-404__search-btn:active{transform:scale(0.98)}
.error-404__search-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.error-404__or{color:var(--color-text-tertiary);margin-bottom:0.75rem}
.error-404__topics{display:flex;justify-content:center;flex-wrap:wrap;gap:0.5rem;margin-bottom:2rem}
.error-404__topic-link{display:inline-block;padding:0.375rem 1rem;font-size:14px;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-neutral-100);border-radius:2rem;text-decoration:none;transition:background-color 0.15s ease,color 0.15s ease}
.error-404__topic-link:hover{background-color:var(--color-accent);color:var(--color-white);text-decoration:none}
.error-404__cta{display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 2rem;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border-radius:2rem;text-decoration:none;transition:background-color 0.15s ease,transform 0.15s ease}
.error-404__cta:hover{background-color:var(--color-soft-black);color:var(--color-white);transform:translateY(-1px);text-decoration:none}
.error-404__cta:active{transform:scale(0.98)}
/* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:600px){.author-header{flex-direction:column;align-items:flex-start;padding:1.5rem;gap:1.25rem}
.author-header__avatar img{width:80px;height:80px}
.author-bio{flex-direction:column}
}
/* ── Newsletter Signup ─────────────────────────────────────────────────── */ .newsletter-signup{margin-top:2rem;padding:2rem;background-color:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius);text-align:center}
.newsletter-signup__title{margin-bottom:0.375rem}
.newsletter-signup__text{color:var(--color-text-secondary);margin-bottom:1.25rem}
.newsletter-signup__form{display:flex;gap:0.5rem;max-width:420px;margin:0 auto}
.newsletter-signup__input{flex:1;padding:0.625rem 1rem;font-family:var(--font-body);font-size:14px;border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-text-primary);outline:none}
.newsletter-signup__input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 20%,transparent)}
.newsletter-signup__input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.newsletter-signup__input:invalid:not(:placeholder-shown){border-color:var(--color-error)}
.newsletter-signup__input:valid:not(:placeholder-shown){border-color:var(--color-success)}
.newsletter-signup__btn{display:inline-block;padding:0.625rem 1.25rem;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-white);background-color:var(--color-black);border:none;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 0.15s ease}
.newsletter-signup__btn:hover{background-color:var(--color-soft-black);color:var(--color-white);text-decoration:none}
.newsletter-signup__btn:active{transform:scale(0.98)}
.newsletter-signup__btn:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;pointer-events:none}
/* Newsletter form feedback */ .newsletter-signup__status{margin-top:0.75rem}
.newsletter-signup__success{color:var(--color-success);font-size:14px;margin:0}
.newsletter-signup__error{color:var(--color-error);font-size:14px;margin:0}
/* Footer newsletter has different visual treatment */ .site-footer__newsletter{padding:2.5rem 0;border-bottom:1px solid var(--color-neutral-700)}
.site-footer__newsletter .newsletter-signup{margin-top:0;background-color:transparent;border:none;color:var(--color-white)}
.site-footer__newsletter .newsletter-signup__title{color:var(--color-white)}
.site-footer__newsletter .newsletter-signup__text{color:var(--color-neutral-400)}
.site-footer__newsletter .newsletter-signup__input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-white)}
.site-footer__newsletter .newsletter-signup__input::placeholder{color:var(--color-neutral-500)}
.site-footer__newsletter .newsletter-signup__btn{background-color:var(--color-accent);color:var(--color-black)}
.site-footer__newsletter .newsletter-signup__btn:hover{opacity:0.9;color:var(--color-black)}
@media (max-width:480px){.newsletter-signup__form{flex-direction:column}
}
/* ── Search Empty State ───────────────────────────────────────────────── */ .search-empty{text-align:center;padding:3rem 1rem}
.search-empty__icon{margin-bottom:1.5rem;opacity:0.5}
.search-empty__message{margin-bottom:0.5rem}
.search-empty__hint{color:var(--color-text-secondary);margin-bottom:1.5rem}
.search-empty__topics{display:flex;justify-content:center;flex-wrap:wrap;gap:0.5rem}
/* ── Toast Notification ───────────────────────────────────────────────── */ .toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100%);padding:0.75rem 1.5rem;background-color:var(--color-soft-black);color:var(--color-white);border-radius:var(--radius);font-family:var(--font-body);font-size:14px;font-weight:500;opacity:0;transition:transform var(--transition-base),opacity var(--transition-base);z-index:10000;pointer-events:none}
.toast--visible{transform:translateX(-50%) translateY(0);opacity:1}
/* ── Back to Top ──────────────────────────────────────────────────────── */ .back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:50%;box-shadow:var(--shadow-md);color:var(--color-text-secondary);cursor:pointer;opacity:0;transform:translateY(16px);transition:opacity var(--transition-base),transform var(--transition-base),color var(--transition-fast),border-color var(--transition-fast);z-index:99}
.back-to-top--visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{color:var(--color-text-primary);border-color:var(--color-neutral-400)}
.back-to-top:active{transform:scale(0.95)}
/* ── Reading Progress Bar ────────────────────────────────────────────────── */ .reading-progress{position:fixed;top:0;left:0;width:0;height:3px;background-color:var(--color-accent);z-index:10001;transition:width 0.1s linear;pointer-events:none}
/* ── Social Sharing ─────────────────────────────────────────────────────── */ .social-sharing{display:flex;align-items:center;gap:0.5rem;padding:1rem 0;border-top:1px solid var(--color-neutral-200);border-bottom:1px solid var(--color-neutral-200);margin-bottom:2rem}
.social-sharing__label{color:var(--color-text-tertiary);margin-right:0.25rem}
.social-sharing__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-neutral-200);background:var(--color-white);color:var(--color-text-secondary);cursor:pointer;transition:color 0.15s ease,border-color 0.15s ease,background-color 0.15s ease;text-decoration:none}
.social-sharing__btn:hover{color:var(--color-text-primary);border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);text-decoration:none}
.social-sharing__btn:active{transform:scale(0.95)}
.social-sharing__btn--copy.copied{color:var(--color-success);border-color:var(--color-success)}
/* ── Table of Contents ──────────────────────────────────────────────────── */ .toc{margin-bottom:2.5rem;padding:1.25rem 1.5rem;background-color:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius)}
.toc__title{margin-bottom:0.75rem;color:var(--color-text-secondary)}
.toc__list{margin:0;padding-left:1.25rem;list-style:decimal}
.toc__item{margin-bottom:0.375rem}
.toc__item--sub{margin-left:1rem;list-style-type:lower-alpha}
.toc__link{color:var(--color-text-secondary);text-decoration:none}
.toc__link:hover{color:var(--color-accent);text-decoration:underline}
/* ── Single Post Layout ──────────────────────────────────────────────────── */ .single-post__featured-image{margin-bottom:2.5rem}
.single-post__featured-image img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.single-post__header{margin-top:2.5rem;margin-bottom:2.5rem}
.single-post__header .category-badge{margin-bottom:0.875rem}
.single-post__title{margin-bottom:1.25rem}
.single-post__content{margin-bottom:2rem}
/* ── Gutenberg Block Styling ────────────────────────────────────────────── */ .entry-content{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.625;color:var(--color-text-primary)}
/* Headings */ .entry-content h2{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1.35;letter-spacing:-0.02em;margin-top:2.5rem;margin-bottom:1rem}
.entry-content h3{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-0.02em;margin-top:2rem;margin-bottom:0.75rem}
.entry-content h4{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.5;margin-top:1.5rem;margin-bottom:0.5rem}
/* Paragraphs */ .entry-content p{margin-bottom:1.25rem}
.entry-content p:last-child{margin-bottom:0}
/* Links */ .entry-content a{color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.entry-content a:hover{color:var(--color-text-primary)}
/* Lists */ .entry-content ul,.entry-content ol{margin:0 0 1.25rem;padding-left:1.5rem}
.entry-content li{margin-bottom:0.5rem}
.entry-content li:last-child{margin-bottom:0}
/* Blockquote */ .entry-content blockquote,.entry-content .wp-block-quote{margin:1.5rem 0;padding:1rem 1.5rem;border-left:3px solid var(--color-accent);background-color:var(--color-neutral-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.entry-content blockquote p{font-style:italic;color:var(--color-text-secondary)}
.entry-content blockquote cite,.entry-content .wp-block-quote cite{display:block;margin-top:0.75rem;font-size:14px;font-style:normal;color:var(--color-text-tertiary)}
/* Images */ .entry-content .wp-block-image{margin:2rem 0}
.entry-content .wp-block-image img{border-radius:var(--radius)}
.entry-content .wp-block-image figcaption{font-size:12px;color:var(--color-text-tertiary);margin-top:0.5rem;text-align:center}
/* Full-width image override */ .entry-content .wp-block-image.alignfull{max-width:none;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw}
.entry-content .wp-block-image.alignwide{max-width:calc(var(--container-max) - 2 * var(--gap));margin-left:auto;margin-right:auto}
/* Code blocks */ .entry-content code{font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace;font-size:0.875em;padding:0.15em 0.35em;background-color:var(--color-neutral-100);border-radius:var(--radius);color:var(--color-text-primary)}
.entry-content pre,.entry-content .wp-block-code{margin:1.5rem 0;padding:1.25rem;background-color:var(--color-neutral-900);color:var(--color-neutral-100);border-radius:var(--radius);overflow-x:auto;font-size:14px;line-height:1.6}
.entry-content pre code,.entry-content .wp-block-code code{padding:0;background:none;color:inherit;font-size:inherit}
/* Tables */ .entry-content table,.entry-content .wp-block-table table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:16px}
.entry-content th,.entry-content td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-neutral-200)}
.entry-content th{font-weight:600;background-color:var(--color-neutral-50)}
/* Separator */ .entry-content hr,.entry-content .wp-block-separator{border:none;border-top:1px solid var(--color-neutral-200);margin:2rem 0}
/* Columns */ .entry-content .wp-block-columns{gap:var(--gap);margin:1.5rem 0}
@media (max-width:768px){.entry-content .wp-block-columns{flex-direction:column}
.entry-content h2{font-size:24px}
.entry-content h3{font-size:20px}
.entry-content h4{font-size:18px}
}
/* Cover block */ .entry-content .wp-block-cover{margin:2rem 0;border-radius:var(--radius);overflow:hidden}
/* Gallery */ .entry-content .wp-block-gallery{margin:2rem 0;gap:var(--gap-sm)}
.entry-content .wp-block-gallery .wp-block-image{margin:0}
/* Embed (YouTube,etc.) */ .entry-content .wp-block-embed{margin:2rem 0}
.entry-content .wp-block-embed__wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.entry-content .wp-block-embed__wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius)}
/* ── Hub Page (Blog Home) ────────────────────────────────────────────────── */ /* Remove default top padding so hero bleeds to header */ .hub-page{padding-top:0}
/* ── Hero Section ───────────────────────────────────────────────────────── */ .hub-page__hero{background:var(--gradient-hero);padding:5rem 0 4rem;margin-bottom:3rem;text-align:center}
.hub-page__hero-title{font-family:var(--font-display);font-size:52px;font-weight:500;line-height:1.15;letter-spacing:-0.02em;color:var(--color-white);margin-bottom:1rem}
.hub-page__hero-subtitle{color:rgba(255,255,255,0.65);max-width:560px;margin:0 auto}
@media (max-width:768px){.hub-page__hero{padding:3.5rem 0 3rem}
.hub-page__hero-title{font-size:36px}
}
/* ── Featured Post ─────────────────────────────────────────────────────── */ .featured-post{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2rem;margin-bottom:3rem;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}
.featured-post__image-link{display:block;overflow:hidden;border-radius:var(--radius)}
.featured-post__image{aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--radius)}
.featured-post__image img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
.featured-post:hover .featured-post__image img{transform:scale(1.03)}
.featured-post__content{display:flex;flex-direction:column;gap:0.75rem}
.featured-post__title{margin-bottom:0}
.featured-post__title a{color:var(--color-text-primary);text-decoration:none}
.featured-post__title a:hover{color:var(--color-accent)}
.featured-post__excerpt{color:var(--color-text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.featured-post__meta{display:flex;align-items:center;gap:0.5rem;color:var(--color-text-tertiary);flex-wrap:wrap}
.featured-post__avatar img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.featured-post__sep{color:var(--color-neutral-300)}
@media (max-width:768px){.featured-post{grid-template-columns:1fr;gap:1.5rem;padding:1.25rem}
.featured-post__title{font-size:28px}
}
/* ── Section Titles ────────────────────────────────────────────────────── */ .hub-page__section-title{margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--color-neutral-200)}
.hub-page__latest{padding-bottom:2rem}