/*
Theme Name: The Europe Blog — Continental Refinement
Theme URI: https://theeuropeblog.com
Author: The Europe Blog
Author URI: https://theeuropeblog.com
Description: A premium editorial WordPress theme for The Europe Blog. Continental Refinement design system (Stitch) — modern European aesthetic with full Answer Engine Optimization (AEO) and SEO scaffolding. Includes citation-friendly content blocks, Yoast schema integration, custom AEO Gutenberg blocks (Quick Answer, FAQ, Proof Block, Follow-up Ladder, Author E-E-A-T card, Table of Contents, Related Articles), and a fixed 1440px editorial grid with glass-morphism navigation and full-bleed photography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-europe-blog
Tags: blog, editorial, travel, magazine, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* =========================================================
   1. DESIGN TOKENS — Continental Refinement
   ========================================================= */
:root {
    /* Surfaces */
    --surface: #f9f9f9;
    --surface-bright: #f9f9f9;
    --surface-dim: #dadada;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f3;
    --surface-container: #eeeeee;
    --surface-container-high: #e8e8e8;
    --surface-container-highest: #e2e2e2;
    --on-surface: #1a1c1c;
    --on-surface-variant: #42474c;
    --inverse-surface: #2f3131;
    --inverse-on-surface: #f1f1f1;
    --background: #f9f9f9;
    --on-background: #1a1c1c;

    /* Outlines */
    --outline: #73787d;
    --outline-variant: #c2c7cc;
    --hairline: #e1e1e1;

    /* Primary (Soft Mediterranean Blue) */
    --primary: #445f73;
    --on-primary: #ffffff;
    --primary-container: #5c788d;
    --on-primary-container: #fcfcff;
    --primary-fixed: #c9e6fe;
    --primary-fixed-dim: #adcae2;
    --inverse-primary: #adcae2;

    /* Secondary (Ink) */
    --secondary: #5f5e5e;
    --on-secondary: #ffffff;
    --secondary-container: #e2dfde;
    --on-secondary-container: #636262;

    /* Tertiary */
    --tertiary: #5b5c5c;
    --on-tertiary: #ffffff;
    --tertiary-container: #737575;

    /* Status */
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --success: #2e7d32;
    --warning: #ed6c02;

    /* Brand authority button color (per Stitch component spec) */
    --ink: #222222;

    /* Typography */
    --font-headline: "Noto Serif", Georgia, "Times New Roman", serif;
    --font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Type scale */
    --fs-headline-xl: clamp(2.5rem, 4.5vw, 4rem);
    --fs-headline-lg: clamp(2rem, 3.5vw, 3rem);
    --fs-headline-md: clamp(1.5rem, 2.5vw, 2rem);
    --fs-headline-sm: 1.5rem;
    --fs-body-lg: 1.125rem;
    --fs-body-md: 1rem;
    --fs-body-sm: 0.875rem;
    --fs-label-caps: 0.75rem;

    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.6;
    --lh-relaxed: 1.7;
    --ls-tight: -0.02em;
    --ls-caps: 0.16em;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 12rem;

    --margin-page: 4rem;
    --gutter-grid: 2rem;
    --stack-section: 8rem;
    --stack-element: 1.5rem;
    --content-max: 1440px;
    --reading-max: 760px;

    /* Radius */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Shadows (feather-light, blue tint) */
    --shadow-sm: 0 1px 2px rgba(68, 95, 115, 0.04);
    --shadow: 0 4px 30px rgba(68, 95, 115, 0.05);
    --shadow-md: 0 10px 40px rgba(68, 95, 115, 0.06);
    --shadow-lg: 0 20px 60px rgba(68, 95, 115, 0.08);

    /* Motion */
    --ease-cinematic: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration: 400ms;
    --duration-slow: 600ms;

    /* Z-index */
    --z-nav: 100;
    --z-modal: 200;
    --z-toast: 300;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-md);
    line-height: var(--lh-normal);
    color: var(--on-surface);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--duration) var(--ease-cinematic); }
a:hover { color: var(--on-surface); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--primary); color: #fff; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    color: var(--on-surface);
    margin: 0 0 var(--space-4);
    font-weight: 400;
    line-height: var(--lh-snug);
}
h1 { font-size: var(--fs-headline-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-headline-lg); }
h3 { font-size: var(--fs-headline-md); font-weight: 500; }
h4 { font-size: var(--fs-headline-sm); font-weight: 500; }
h5 { font-size: 1.25rem; font-weight: 500; }
h6 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 var(--space-5); line-height: var(--lh-relaxed); }
blockquote {
    margin: var(--space-7) 0;
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--primary);
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--on-surface);
    background: var(--surface-container-low);
}
blockquote cite { display: block; font-size: 0.875rem; font-style: normal; font-family: var(--font-body); margin-top: var(--space-3); color: var(--on-surface-variant); }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-8) 0; }
code, pre, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
pre { background: var(--surface-container-low); padding: var(--space-5); overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); }
code { background: var(--surface-container-low); padding: 2px 6px; border-radius: var(--radius-sm); }

/* =========================================================
   3. UTILITY CLASSES
   ========================================================= */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--margin-page); }
.container-narrow { max-width: var(--reading-max); margin: 0 auto; padding: 0 var(--space-5); }
.label-caps { font-family: var(--font-body); font-size: var(--fs-label-caps); font-weight: 600; line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-surface-variant); }
.eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-3); }
.serif { font-family: var(--font-headline); }
.sans { font-family: var(--font-body); }
.italic-serif { font-family: var(--font-headline); font-style: italic; }
.muted { color: var(--on-surface-variant); }
.center { text-align: center; }
.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; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: var(--space-3) var(--space-5); z-index: 9999; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.stack-section { margin-top: var(--stack-section); }
.stack-element { margin-top: var(--stack-element); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: var(--fs-label-caps);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    border-radius: var(--radius-lg);
    transition: all var(--duration) var(--ease-cinematic);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--on-surface); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-light { background: #fff; color: var(--on-surface); }
.btn-light:hover { background: var(--surface-container-low); }
.btn-ghost { padding: var(--space-3) 0; color: var(--on-surface); border-bottom: 1px solid var(--on-surface); border-radius: 0; }
.btn-ghost:hover { color: var(--primary); border-color: var(--primary); }

/* =========================================================
   5. CARDS
   ========================================================= */
.card { background: var(--surface-container-lowest); border-radius: var(--radius); overflow: hidden; transition: transform var(--duration) var(--ease-cinematic), box-shadow var(--duration) var(--ease-cinematic); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-container); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-cinematic); }
.card:hover .card-image img { transform: scale(1.04); }
.card-tag { position: absolute; top: var(--space-3); left: var(--space-3); background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); padding: 4px 10px; font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-surface); border-radius: var(--radius-sm); z-index: 2; }
.card-body { padding: var(--space-5) 0; }
.card-meta { display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-body-sm); color: var(--on-surface-variant); margin-bottom: var(--space-2); }
.card-title { font-family: var(--font-headline); font-size: var(--fs-headline-sm); line-height: 1.3; margin: 0 0 var(--space-3); color: var(--on-surface); transition: color var(--duration) var(--ease-cinematic); }
.card:hover .card-title { color: var(--primary); }
.card-excerpt { font-size: var(--fs-body-md); color: var(--on-surface-variant); line-height: var(--lh-normal); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Card variants */
.card-feature .card-image { aspect-ratio: 16 / 10; }
.card-feature .card-title { font-size: 1.875rem; }
.card-compact .card-image { aspect-ratio: 1 / 1; }

/* =========================================================
   6. NAVIGATION (Glass-morphism)
   ========================================================= */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: 80px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline);
    z-index: var(--z-nav);
    transition: background var(--duration) var(--ease-cinematic);
}
.site-nav-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--margin-page); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-brand { font-family: var(--font-headline); font-style: italic; font-size: 1.5rem; color: var(--on-surface); flex-shrink: 0; }
.site-brand img { max-height: 44px; width: auto; }
.site-brand a { color: inherit; }
.primary-menu { display: flex; align-items: center; gap: var(--space-7); list-style: none; padding: 0; margin: 0; }
.primary-menu a { font-family: var(--font-body); font-size: var(--fs-body-md); color: var(--on-surface-variant); transition: color var(--duration) var(--ease-cinematic); }
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: var(--on-surface); }
.primary-menu .current-menu-item > a { border-bottom: 1px solid var(--primary); padding-bottom: 2px; color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: var(--space-5); }
.nav-icon-btn { color: var(--on-surface); transition: opacity var(--duration) var(--ease-cinematic); padding: var(--space-2); }
.nav-icon-btn:hover { opacity: 0.7; }
.nav-toggle { display: none; }
.nav-toggle svg { width: 24px; height: 24px; }

/* Search overlay */
.search-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(30px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding-top: 20vh; }
.search-overlay.active { display: flex; }
.search-overlay form { width: 100%; max-width: 720px; padding: 0 var(--space-5); }
.search-overlay input { width: 100%; font-family: var(--font-headline); font-size: 2rem; padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--on-surface); background: transparent; outline: 0; }
.search-overlay-close { position: absolute; top: var(--space-6); right: var(--space-6); }

@media (max-width: 900px) {
    .primary-menu, .nav-actions .nav-icon-btn { display: none; }
    .nav-toggle { display: inline-flex; }
}

/* Mobile menu drawer */
.mobile-menu { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: #fff; transform: translateY(-100%); transition: transform var(--duration) var(--ease-cinematic); z-index: 99; padding: var(--space-7) var(--space-5); overflow-y: auto; }
.mobile-menu.active { transform: translateY(0); }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.mobile-menu a { font-family: var(--font-headline); font-size: 1.5rem; color: var(--on-surface); }

/* =========================================================
   7. HERO
   ========================================================= */
.hero { position: relative; height: 75vh; min-height: 560px; max-height: 870px; overflow: hidden; }
.hero-feature { height: 90vh; min-height: 640px; }
.hero-image { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%); }
.hero-content { position: relative; height: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--margin-page); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--space-9); color: #fff; }
.hero-eyebrow { display: inline-block; font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: #fff; margin-bottom: var(--space-3); }
.hero-eyebrow.with-bg { background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: var(--radius); }
.hero-title { font-family: var(--font-headline); font-size: var(--fs-headline-xl); line-height: var(--lh-tight); color: #fff; max-width: 900px; margin: 0 0 var(--space-5); letter-spacing: var(--ls-tight); }
.hero-deck { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 0 var(--space-7); line-height: var(--lh-relaxed); }
.hero-meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; color: rgba(255,255,255,0.9); font-size: var(--fs-body-md); margin-top: var(--space-5); }
.hero-meta .author-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.4); }
.hero-meta .author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-meta .sep { opacity: 0.5; }

@media (max-width: 768px) {
    :root { --margin-page: 1.25rem; --stack-section: 4rem; }
    .hero { min-height: 480px; }
    .hero-content { padding-bottom: var(--space-6); }
}

/* =========================================================
   8. SECTIONS
   ========================================================= */
.section { margin-top: var(--stack-section); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-7); gap: var(--space-5); flex-wrap: wrap; }
.section-head-text { display: flex; flex-direction: column; gap: var(--space-2); }
.section-eyebrow { font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--primary); }
.section-title { font-family: var(--font-headline); font-size: var(--fs-headline-lg); margin: 0; }
.section-link { font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-surface-variant); transition: color var(--duration) var(--ease-cinematic); }
.section-link:hover { color: var(--primary); }

/* =========================================================
   9. GRID LAYOUTS
   ========================================================= */
.grid { display: grid; gap: var(--gutter-grid); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-feature { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter-grid); }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* Bento (destinations) grid */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 1fr; gap: var(--gutter-grid); height: 700px; }
.bento-tile { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-container-highest); }
.bento-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-cinematic); }
.bento-tile:hover img { transform: scale(1.05); }
.bento-tile .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-6); color: #fff; }
.bento-tile .overlay h3 { color: #fff; margin: 0; font-size: 1.875rem; }
.bento-tile .overlay .label-caps { color: rgba(255,255,255,0.85); margin-bottom: var(--space-2); }
.bento-tile.tile-lg { grid-column: span 8; grid-row: span 2; }
.bento-tile.tile-md { grid-column: span 4; }

@media (max-width: 900px) {
    .grid-12, .grid-3, .grid-4, .bento { grid-template-columns: 1fr; height: auto; }
    .grid-feature { grid-template-columns: 1fr; }
    .col-span-4, .col-span-6, .col-span-8, .col-span-12, .bento-tile.tile-lg, .bento-tile.tile-md { grid-column: span 1; }
    .bento { grid-template-rows: auto; }
    .bento-tile { aspect-ratio: 4/3; }
}

/* =========================================================
   10. SINGLE POST
   ========================================================= */
.post-hero { position: relative; width: 100%; height: 75vh; min-height: 560px; max-height: 870px; overflow: hidden; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-hero-content { position: absolute; bottom: 0; left: 0; right: 0; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--margin-page) var(--space-9); color: #fff; }
.post-category-badge { display: inline-block; background: rgba(68, 95, 115, 0.4); backdrop-filter: blur(10px); padding: 6px 14px; font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: #fff; border-radius: var(--radius); margin-bottom: var(--space-4); }
.post-hero-content h1 { color: #fff; margin: 0 0 var(--space-5); max-width: 1000px; }

.post-body { max-width: var(--reading-max); margin: 0 auto; padding: var(--space-9) var(--space-5); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--on-surface); }
.post-body p { margin-bottom: var(--space-5); }
.post-body h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); font-size: 2rem; }
.post-body h3 { margin-top: var(--space-7); margin-bottom: var(--space-4); font-size: 1.5rem; }
.post-body img, .post-body figure { margin: var(--space-7) 0; border-radius: var(--radius); }
.post-body figcaption { font-size: var(--fs-body-sm); color: var(--on-surface-variant); text-align: center; margin-top: var(--space-3); font-style: italic; }
.post-body a { color: var(--primary); border-bottom: 1px solid var(--primary-fixed-dim); }
.post-body a:hover { background: var(--primary-fixed); }

/* Wide and full-width images break the grid */
.post-body .alignwide { width: calc(100% + 8rem); margin-left: -4rem; max-width: none; }
.post-body .alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; border-radius: 0; }

@media (max-width: 900px) {
    .post-body .alignwide { width: 100%; margin-left: 0; }
}

/* TOC sidebar */
.post-with-toc { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); max-width: var(--content-max); margin: 0 auto; padding: var(--space-9) var(--margin-page); }
.post-toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.post-toc-title { font-family: var(--font-body); font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: var(--space-4); }
.post-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--hairline); }
.post-toc li { padding: 0; }
.post-toc a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--fs-body-sm); color: var(--on-surface-variant); border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4; transition: all var(--duration-fast) var(--ease-cinematic); }
.post-toc a:hover, .post-toc a.active { color: var(--primary); border-left-color: var(--primary); background: var(--surface-container-low); }
.post-toc .toc-h3 { padding-left: var(--space-6); font-size: 0.8125rem; }

@media (max-width: 1100px) {
    .post-with-toc { grid-template-columns: 1fr; padding: var(--space-7) var(--space-5); }
    .post-toc { position: static; max-height: none; margin-bottom: var(--space-6); padding: var(--space-5); background: var(--surface-container-low); border-radius: var(--radius); }
}

/* Author E-E-A-T card */
.author-card { display: flex; gap: var(--space-5); padding: var(--space-6); background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: var(--radius); margin: var(--space-8) 0; }
.author-card-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card-name { font-family: var(--font-headline); font-size: 1.25rem; margin: 0 0 var(--space-1); }
.author-card-role { font-size: var(--fs-body-sm); color: var(--primary); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-3); }
.author-card-bio { font-size: var(--fs-body-md); color: var(--on-surface-variant); margin: 0 0 var(--space-3); line-height: 1.5; }
.author-card-credentials { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-body-sm); color: var(--on-surface-variant); }
.author-card-credentials span { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   11. AEO CONTENT BLOCKS
   ========================================================= */

/* Quick Answer / TL;DR */
.aeo-quick-answer { background: var(--surface-container-lowest); border-left: 4px solid var(--primary); padding: var(--space-6); margin: var(--space-7) 0; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-sm); }
.aeo-quick-answer-label { font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.aeo-quick-answer-label::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }
.aeo-quick-answer-body { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--on-surface); margin: 0; font-weight: 500; }
.aeo-quick-answer-body strong { background: var(--primary-fixed); padding: 0 4px; font-weight: 600; }

/* Key Takeaways */
.aeo-key-takeaways { background: var(--surface-container-low); padding: var(--space-6) var(--space-7); border-radius: var(--radius); margin: var(--space-7) 0; }
.aeo-key-takeaways-title { font-family: var(--font-headline); font-size: 1.25rem; margin: 0 0 var(--space-4); }
.aeo-key-takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.aeo-key-takeaways li { padding-left: var(--space-6); position: relative; line-height: 1.5; }
.aeo-key-takeaways li::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 1px; background: var(--primary); }

/* FAQ Accordion */
.aeo-faq { margin: var(--space-7) 0; }
.aeo-faq-title { font-family: var(--font-headline); font-size: 2rem; margin: 0 0 var(--space-5); }
.aeo-faq-item { border-bottom: 1px solid var(--hairline); }
.aeo-faq-item:first-child { border-top: 1px solid var(--hairline); }
.aeo-faq-question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; font-family: var(--font-headline); font-size: 1.25rem; line-height: 1.4; color: var(--on-surface); width: 100%; text-align: left; transition: color var(--duration) var(--ease-cinematic); }
.aeo-faq-question:hover { color: var(--primary); }
.aeo-faq-question .icon { flex-shrink: 0; width: 24px; height: 24px; transition: transform var(--duration) var(--ease-cinematic); }
.aeo-faq-item[open] .aeo-faq-question .icon { transform: rotate(45deg); }
.aeo-faq-answer { padding: 0 0 var(--space-5); font-size: var(--fs-body-md); line-height: var(--lh-relaxed); color: var(--on-surface-variant); }
.aeo-faq-answer p:last-child { margin-bottom: 0; }
.aeo-faq-answer ul, .aeo-faq-answer ol { margin: var(--space-3) 0; padding-left: var(--space-5); }

/* Proof Block */
.aeo-proof-block { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, var(--primary-fixed) 0%, var(--surface-container-low) 100%); border-radius: var(--radius); margin: var(--space-6) 0; align-items: start; }
.aeo-proof-block-icon { width: 40px; height: 40px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aeo-proof-block-icon svg { width: 20px; height: 20px; }
.aeo-proof-block-stat { font-family: var(--font-headline); font-size: 2rem; line-height: 1; margin: 0 0 var(--space-2); color: var(--on-surface); }
.aeo-proof-block-text { font-size: var(--fs-body-md); margin: 0 0 var(--space-2); color: var(--on-surface); }
.aeo-proof-block-source { font-size: var(--fs-body-sm); color: var(--on-surface-variant); }
.aeo-proof-block-source a { color: var(--primary); text-decoration: underline; }

/* Follow-up Questions Ladder */
.aeo-follow-up { margin: var(--space-8) 0; padding: var(--space-7) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.aeo-follow-up-title { font-family: var(--font-headline); font-size: 1.5rem; margin: 0 0 var(--space-5); }
.aeo-follow-up-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.aeo-follow-up-list a { display: block; padding: var(--space-4) var(--space-5); background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--fs-body-md); line-height: 1.4; color: var(--on-surface); transition: all var(--duration) var(--ease-cinematic); position: relative; padding-right: var(--space-7); }
.aeo-follow-up-list a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.aeo-follow-up-list a::after { content: "→"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--primary); transition: transform var(--duration) var(--ease-cinematic); }
.aeo-follow-up-list a:hover::after { transform: translateY(-50%) translateX(4px); }

/* Last Updated stamp */
.aeo-last-updated { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--on-surface-variant); padding: 4px 10px; background: var(--surface-container-low); border-radius: var(--radius-full); }
.aeo-last-updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }

/* =========================================================
   12. NEWSLETTER
   ========================================================= */
.newsletter { background: var(--inverse-surface); color: var(--inverse-on-surface); padding: var(--space-9) var(--margin-page); margin-top: var(--stack-section); }
.newsletter-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.newsletter h2 { color: #fff; font-size: 2.5rem; margin: 0 0 var(--space-4); }
.newsletter p { color: rgba(255,255,255,0.75); font-size: var(--fs-body-lg); margin: 0 0 var(--space-6); }
.newsletter-form { display: flex; gap: var(--space-3); max-width: 480px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: var(--space-4); border: 0; border-bottom: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-family: var(--font-body); font-size: var(--fs-body-md); outline: 0; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form input:focus { border-color: #fff; }
.newsletter-form button { background: #fff; color: var(--ink); padding: var(--space-3) var(--space-6); font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; border-radius: var(--radius); cursor: pointer; transition: opacity var(--duration) var(--ease-cinematic); }
.newsletter-form button:hover { opacity: 0.85; }

@media (max-width: 600px) {
    .newsletter-form { flex-direction: column; }
}

/* Inline newsletter (mid-article) */
.newsletter-inline { background: var(--surface-container-low); padding: var(--space-7) var(--space-6); border-radius: var(--radius); margin: var(--space-8) 0; text-align: center; }
.newsletter-inline h3 { font-family: var(--font-headline); font-size: 1.5rem; margin: 0 0 var(--space-3); }
.newsletter-inline p { color: var(--on-surface-variant); margin: 0 0 var(--space-5); }
.newsletter-inline .newsletter-form input { color: var(--on-surface); border-bottom-color: var(--on-surface); }
.newsletter-inline .newsletter-form button { background: var(--ink); color: #fff; }

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer { background: var(--surface-container); padding: var(--space-9) var(--margin-page) var(--space-6); margin-top: var(--stack-section); }
.site-footer-inner { max-width: var(--content-max); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-8); }
.footer-brand .site-brand { margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--fs-body-md); color: var(--on-surface-variant); max-width: 360px; line-height: 1.6; }
.footer-col h4 { font-family: var(--font-body); font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 var(--space-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--fs-body-md); color: var(--on-surface); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid var(--hairline); font-size: var(--fs-body-sm); color: var(--on-surface-variant); flex-wrap: wrap; gap: var(--space-3); }
.footer-social { display: flex; gap: var(--space-4); }
.footer-social a { color: var(--on-surface-variant); }
.footer-social svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }
}

/* =========================================================
   14. PAGINATION & BREADCRUMBS
   ========================================================= */
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-8) 0; }
.pagination a, .pagination span { padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--fs-body-sm); color: var(--on-surface); transition: all var(--duration) var(--ease-cinematic); }
.pagination a:hover, .pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

.breadcrumbs { font-size: var(--fs-body-sm); color: var(--on-surface-variant); margin-bottom: var(--space-5); }
.breadcrumbs a { color: var(--on-surface-variant); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep { margin: 0 var(--space-2); opacity: 0.5; }
.breadcrumbs .current { color: var(--on-surface); font-weight: 500; }

/* =========================================================
   15. COMMENTS, FORMS
   ========================================================= */
.comments-section { max-width: var(--reading-max); margin: var(--space-8) auto; padding: 0 var(--space-5); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--space-7); }
.comment-list li { padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.comment-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--fs-body-sm); }
.comment-meta .avatar { width: 40px; height: 40px; border-radius: 50%; }

input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea {
    width: 100%; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; font-family: var(--font-body); font-size: var(--fs-body-md); color: var(--on-surface); outline: 0; transition: border-color var(--duration) var(--ease-cinematic);
}
input:focus, textarea:focus { border-bottom-color: var(--primary); }
label { display: block; font-size: var(--fs-body-sm); color: var(--on-surface-variant); margin-bottom: var(--space-2); }

/* =========================================================
   16. UTILITIES & MISC
   ========================================================= */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 4 / 3; }
.aspect-wide { aspect-ratio: 16 / 10; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--space-7) 0; }

/* WordPress core alignment */
.alignleft { float: left; margin: 0 var(--space-5) var(--space-5) 0; }
.alignright { float: right; margin: 0 0 var(--space-5) var(--space-5); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

/* Gutenberg block alignments inside post body handled in section 10 */
.wp-block-image, .wp-block-video, .wp-block-embed { margin: var(--space-7) 0; }
.wp-block-quote, .wp-block-pullquote { margin: var(--space-7) 0; }
.wp-block-pullquote { padding: var(--space-7) var(--space-5); text-align: center; border-top: 2px solid var(--on-surface); border-bottom: 2px solid var(--on-surface); }
.wp-block-pullquote p { font-family: var(--font-headline); font-size: 2rem; line-height: 1.3; font-style: italic; }

/* Responsive helpers */
@media (max-width: 1100px) {
    .hide-mobile { display: none; }
}
@media (min-width: 1101px) {
    .show-mobile { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* Print */
@media print {
    .site-nav, .site-footer, .newsletter, .aeo-follow-up, .nav-actions { display: none; }
    .post-hero { height: auto; }
    body { background: #fff; }
}