/*!
 * Borderless Diaries — Child Theme Stylesheet
 * --------------------------------------------------------------------------
 * Pattern 2 (JENVA-DOCS section 15): two CSS scopes.
 *
 *   .bd-chrome   →  applied on EVERY view. Holds design tokens (colors,
 *                   spacing, fonts) so Borderless's chrome (header / footer)
 *                   has its tokens regardless of which body template runs.
 *
 *   .bd-page     →  applied ONLY on child-owned views. Holds typography
 *                   resets, body styles, and template-specific layouts that
 *                   would clash with parent-rendered fallback views (search,
 *                   404, author archive).
 *
 * Architecture:
 *   1. Design Tokens  (under :root + .bd-chrome — global)
 *   2. Header / Drawer / Footer  (under .bd-chrome — render on every view)
 *   3. Home  (.bd-page only)
 *   4. Archive  (.bd-page only)
 *   5. Single  (.bd-page only)
 *   6. WordPress core (alignments, block styles)
 *   7. Responsive
 *
 * Loaded from functions.php with `array( 'jenva-core' )` as dependency,
 * so this file always wins the cascade against parent CSS.
 *
 * Source: extracted and consolidated from the legacy standalone Borderless
 * theme stylesheet. Variables and class names preserved 1:1 so existing
 * markup keeps working without template-side changes.
 */

/* ==========================================================================
   BORDERLESS DIARIES — Stylesheet
   --------------------------------------------------------------------------
   Architektur:
   1. Design Tokens & Base
   2. Header / Drawer (gemeinsam)
   3. Home: Hero, Tools, Article Grid, Sidebar, Pillars, Newsletter,
            Follow, Instagram
   4. Archive: Hero, Filter, Grid, Pagination, Other Categories
   5. Single: Reading Progress, Hero, Article Layout, Prose, Author Bio,
              Related
   6. Footer
   7. WordPress Core (alignments, captions, blocks, comments)
   8. Responsive (Mobile-first Breakpoints)
   ========================================================================== */

/* === [1] BASE + HOME (Tokens, Header, Drawer, Hero, Tools, Grid, Sidebar, Pillars, Newsletter, Instagram, Footer, Responsive) === */
    /* ==================================================
       BORDERLESS DIARIES — Petrol palette, Geist sans
       ================================================== */
    :root {
      --bg:           #FFFFFF;
      --bg-warm:      #F7F5F0;
      --bg-soft:      #FAF9F5;
      --petrol:       #0E2A2E;
      --petrol-soft:  #154045;
      --ink:          #0E2A2E;
      --ink-body:     #2A3D40;
      --ink-muted:    #5A6E72;
      --ink-faint:    #93A3A6;
      --line:         #E5DFD2;
      --line-soft:    #EFEAE0;
      --line-dark:    rgba(255, 255, 255, 0.1);
      --coral:        #C8553D;
      --coral-light:  #E07659;
      --coral-deep:   #A03E29;
      --coral-soft:   rgba(200, 85, 61, 0.08);

      --ff-sans:      "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
      --ff-mono:      "JetBrains Mono", "SF Mono", Menlo, monospace;

      --s-1: 4px;   --s-2: 8px;   --s-3: 16px;
      --s-4: 24px;  --s-5: 32px;  --s-6: 48px;
      --s-7: 64px;  --s-8: 96px;  --s-9: 128px;
      --s-10: 160px;

      --container:    1280px;
      --container-narrow: 1100px;
      --container-article: 1180px;
      --gutter:       clamp(20px, 4vw, 48px);
      --radius-sm:    6px;
      --radius:       12px;
      --radius-lg:    16px;

      --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-cubic:   cubic-bezier(0.65, 0, 0.35, 1);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink-body);
      font-family: var(--ff-sans);
      font-size: 16px;
      line-height: 1.55;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; padding: 0; margin: 0; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    input { font: inherit; color: inherit; }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
    }
    ::selection { background: var(--coral); color: #fff; }

    /* Icon size fix */
    button svg, a svg, .icon-wrap svg, header svg.icon, .footer-social svg {
      flex-shrink: 0;
      max-width: none !important;
    }

    /* Hidden site description for SEO/screen readers */
    .seo-context {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
    }

    /* ==================================================
       HEADER
       ================================================== */
    /* Header: always sticky — avoids logo/layout glitches from fixed + slide-in */
    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--bg);
      --scroll-progress: 0;
      border-bottom: 2px solid var(--petrol);
      transform: none;
    }
    .site-header.is-pinned {
      box-shadow: 0 4px 24px rgba(14, 42, 46, 0.06);
      border-bottom: 0;
    }
    /* Animated border on the pinned header — coral grows left to right */
    .site-header.is-pinned::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 2px;
      background: linear-gradient(
        to right,
        var(--coral) 0%,
        var(--coral) calc(var(--scroll-progress) * 1%),
        var(--petrol) calc(var(--scroll-progress) * 1%),
        var(--petrol) 100%
      );
      pointer-events: none;
    }
    /* Legacy spacer — no longer needed with sticky header */
    .header-spacer { display: none !important; }
    .header-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: var(--s-3);
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-3) var(--gutter);
    }

    /* Logo */
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ink);
      flex-shrink: 0;
      min-width: max-content;
    }
    .logo-custom { display: inline-flex; flex-shrink: 0; }
    .logo-custom .custom-logo-link { display: inline-flex; line-height: 0; }
    .logo--custom .custom-logo-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ink);
      line-height: 0;
    }
    .logo-custom img.custom-logo {
      display: block;
      width: auto;
      max-height: 44px;
      height: auto;
    }
    .logo-mark { display: inline-flex; flex-shrink: 0; }
    .logo-text { display: inline-flex; flex-direction: column; gap: 0; line-height: 0.95; }
    .logo-name {
      font-family: var(--ff-sans);
      font-weight: 700;
      font-size: 19px;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .logo-tag {
      font-family: var(--ff-mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.16em;
      color: var(--ink-muted);
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* Header search — always visible */
    .header-search {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 480px;
      width: 100%;
      margin: 0 auto;
      padding: 9px 18px 9px 16px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: 999px;
      transition: border-color 0.2s, background 0.2s;
    }
    .header-search:focus-within {
      border-color: var(--coral);
      background: #fff;
    }
    .header-search-icon {
      width: 16px; height: 16px;
      color: var(--coral);
      flex-shrink: 0;
    }
    .header-search input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 14px;
      color: var(--ink);
    }
    .header-search input::placeholder { color: var(--ink-muted); }
    .header-search-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--petrol);
      color: #fff;
      transition: background 0.2s, transform 0.2s var(--ease-back);
    }
    .header-search-submit:hover {
      background: var(--coral);
      transform: translateY(-1px);
    }
    .header-search-submit svg {
      width: 14px;
      height: 14px;
    }

    /* Header actions */
    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--s-2);
    }

    /* Lang toggle (Globe button) */
    .lang-btn {
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      background: transparent;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s, background 0.2s;
    }
    .lang-btn:hover { border-color: var(--coral); background: var(--bg-warm); }
    .lang-btn svg { width: 16px; height: 16px; }
    .lang-btn-dot {
      position: absolute;
      top: 6px; right: 6px;
      width: 7px; height: 7px;
      background: var(--coral);
      border-radius: 50%;
      border: 2px solid var(--bg);
    }

    .lang-btn-wrap {
      position: relative;
      display: inline-block;
    }
    .lang-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 240px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: var(--s-2);
      box-shadow: 0 12px 32px rgba(14, 42, 46, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: all 0.25s var(--ease-cubic);
      z-index: 200;
    }
    .lang-btn-wrap.is-open .lang-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .lang-dropdown-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
      padding: var(--s-2) var(--s-3) var(--s-1);
      display: block;
    }
    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      transition: background 0.15s;
      cursor: pointer;
      width: 100%;
      text-align: left;
    }
    .lang-option:hover { background: var(--bg-warm); }
    .lang-option-flag {
      font-size: 18px;
      flex-shrink: 0;
    }
    .lang-option-name {
      font-size: 13px;
      color: var(--ink);
      font-weight: 500;
      flex: 1;
    }
    .lang-option-native {
      font-size: 11px;
      color: var(--ink-muted);
    }
    .lang-option.is-active {
      background: var(--coral-soft);
    }
    .lang-option.is-active .lang-option-name { color: var(--coral); font-weight: 600; }
    .lang-option-soon {
      font-family: var(--ff-mono);
      font-size: 9px;
      color: var(--ink-faint);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      background: var(--bg-warm);
      border-radius: 3px;
    }
    .lang-option:disabled, .lang-option[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .lang-option:disabled:hover, .lang-option[aria-disabled="true"]:hover {
      background: transparent;
    }

    /* Menu toggle (works on desktop AND mobile) */
    .menu-toggle {
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      background: transparent;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .menu-toggle:hover { border-color: var(--coral); background: var(--bg-warm); }
    .menu-toggle svg { width: 16px; height: 16px; }

    /* ============ MEGA DRAWER (Desktop + Mobile) ============ */
    .mega-drawer {
      position: fixed;
      top: 0; right: 0;
      width: min(420px, 92vw);
      height: 100vh;
      background: #fff;
      border-left: 1px solid var(--line);
      box-shadow: -16px 0 48px rgba(14, 42, 46, 0.12);
      transform: translateX(100%);
      transition: transform 0.45s var(--ease-expo);
      pointer-events: none;
      z-index: 250;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .mega-drawer.is-open {
      transform: translateX(0);
      pointer-events: auto;
    }
    .mega-overlay {
      position: fixed;
      inset: 0;
      background: rgba(14, 42, 46, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 240;
    }
    .mega-overlay.is-open { opacity: 1; visibility: visible; }

    .mega-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--s-3) var(--s-4);
      border-bottom: 1px solid var(--line);
    }
    .mega-close {
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .mega-close:hover { border-color: var(--coral); }
    .mega-close svg { width: 14px; height: 14px; }

    .mega-section {
      padding: var(--s-4);
      border-bottom: 1px solid var(--line);
    }
    .mega-section:last-child { border-bottom: 0; }
    .mega-section-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mega-section-label::before {
      content: "";
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
    }

    /* Browse list */
    .mega-browse { display: grid; gap: 0; }
    .mega-browse a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--s-3) 0;
      border-bottom: 1px solid var(--line);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--ink);
      transition: padding-left 0.3s var(--ease-cubic), color 0.2s;
    }
    .mega-browse a:last-child { border-bottom: 0; }
    .mega-browse a:hover { padding-left: 8px; color: var(--coral); }
    .mega-browse a svg { width: 14px; height: 14px; color: var(--ink-faint); transition: color 0.2s, transform 0.3s; }
    .mega-browse a:hover svg { color: var(--coral); transform: translateX(4px); }

    /* Tools mini-grid in drawer */
    .mega-tools {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-2);
    }
    .mega-tool {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      transition: border-color 0.2s, background 0.2s;
    }
    .mega-tool:hover { border-color: var(--coral); background: #fff; }
    .mega-tool svg { width: 14px; height: 14px; color: var(--coral); flex-shrink: 0; }

    /* Latest mini in drawer */
    .mega-latest { display: grid; gap: var(--s-3); }
    .mega-latest-item {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: var(--s-3);
      align-items: start;
    }
    .mega-latest-img {
      width: 56px; height: 56px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--petrol);
    }
    .mega-latest-img svg { width: 100%; height: 100%; }
    .mega-latest-cat {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      display: block;
      margin-bottom: 2px;
    }
    .mega-latest-title {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--ink);
      margin: 0;
      transition: color 0.2s;
    }
    .mega-latest-item:hover .mega-latest-title { color: var(--coral); }

    /* ==================================================
       HERO — Featured Story
       ================================================== */
    .hero {
      background: var(--bg-soft);
      padding: var(--s-7) var(--gutter) var(--s-8);
      border-bottom: 1px solid var(--line);
    }
    .hero-inner {
      max-width: var(--container);
      margin: 0 auto;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin: 0 0 var(--s-4);
    }

    .hero-card {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: var(--s-7);
      align-items: center;
    }

    .hero-text { padding: var(--s-2) 0; }
    .hero-meta {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
      margin-bottom: var(--s-3);
      flex-wrap: wrap;
    }
    .hero-meta-cat {
      color: var(--coral);
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .hero-meta-dot {
      width: 3px; height: 3px;
      background: var(--ink-faint);
      border-radius: 50%;
    }
    .hero h2,
    .hero .hero-title {
      font-family: var(--ff-sans);
      font-size: clamp(36px, 5.5vw, 64px);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin: 0 0 var(--s-4);
      text-wrap: balance;
    }
    .hero h2 a,
    .hero .hero-title a {
      color: inherit;
      text-decoration: none;
    }
    .hero h2 a:hover,
    .hero .hero-title a:hover {
      color: var(--coral);
    }
    .hero p {
      font-size: 17px;
      line-height: 1.55;
      color: var(--ink-body);
      margin: 0 0 var(--s-5);
      max-width: 56ch;
    }

    .hero-author {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-5);
    }
    .hero-author-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--coral), var(--coral-deep));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      flex-shrink: 0;
    }
    .hero-author-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .hero-author-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
    }
    .hero-author-meta {
      font-family: var(--ff-mono);
      font-size: 11px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      background: var(--coral);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 999px;
      transition: background 0.3s, transform 0.3s var(--ease-back), box-shadow 0.3s;
      box-shadow: 0 6px 20px rgba(200, 85, 61, 0.25);
    }
    .hero-cta:hover {
      background: var(--coral-deep);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(200, 85, 61, 0.35);
    }
    .hero-cta svg {
      transition: transform 0.4s var(--ease-expo);
      width: 14px; height: 14px;
    }
    .hero-cta:hover svg { transform: translateX(4px); }

    .hero-image {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--petrol);
    }
    .hero-image svg { width: 100%; height: 100%; }
    .hero-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
      pointer-events: none;
    }

    /* Floating image meta (location pin) */
    .hero-image-meta {
      position: absolute;
      bottom: var(--s-3);
      left: var(--s-3);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .hero-image-meta svg {
      color: var(--coral);
      width: 10px; height: 10px;
    }

    /* ==================================================
       TOOLS — Glassmorphism bubbles, centered overlap
       ================================================== */
    .tools-section {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
      margin-top: -40px;
      position: relative;
      z-index: 5;
    }
    .tools-bubbles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-3);
    }
    .tool-bubble {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 20px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(14, 42, 46, 0.08);
      color: var(--ink);
      transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .tool-bubble:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(200, 85, 61, 0.35);
      box-shadow: 0 12px 40px rgba(14, 42, 46, 0.12);
    }
    .tool-bubble-icon {
      width: 36px; height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--coral-soft);
      color: var(--coral);
      border-radius: 10px;
      flex-shrink: 0;
      transition: background 0.3s, color 0.3s;
    }
    .tool-bubble:hover .tool-bubble-icon {
      background: var(--coral);
      color: #fff;
    }
    .tool-bubble-icon svg { width: 16px; height: 16px; }
    .tool-bubble-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .tool-bubble-name {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
      line-height: 1.2;
    }
    .tool-bubble-meta {
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
    }

    /* ==================================================
       MAIN GRID — content + sidebar
       ================================================== */
    .main-grid {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-8) var(--gutter);
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: var(--s-7);
    }

    /* Section heads */
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--s-3);
      margin-bottom: var(--s-5);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid var(--line);
    }
    .section-head h2 {
      font-family: var(--ff-sans);
      font-size: clamp(24px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0;
      line-height: 1.05;
    }
    .section-head .accent-dot {
      display: inline-block;
      width: 8px; height: 8px;
      background: var(--coral);
      border-radius: 50%;
      margin-right: 10px;
      vertical-align: middle;
      transform: translateY(-2px);
    }
    .section-head .section-link {
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
      transition: color 0.2s, gap 0.3s var(--ease-cubic);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .section-head .section-link:hover {
      color: var(--coral);
      gap: 8px;
    }
    .section-link svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* Article cards (latest posts) */
    .articles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-4);
    }

    .article {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform 0.4s var(--ease-expo), border-color 0.3s;
    }
    .article:hover {
      background: var(--bg-warm);
      border-color: var(--line);
    }
    .article-link { display: block; height: 100%; }

    .article-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--petrol);
    }
    .article-image svg {
      width: 100%; height: 100%;
      transition: transform 0.8s var(--ease-expo);
    }
    .article:hover .article-image svg { transform: scale(1.02); }

    .article-tag {
      position: absolute;
      top: var(--s-3);
      left: var(--s-3);
      padding: 5px 11px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      z-index: 2;
    }
    .article-tag.is-visa { background: var(--coral); color: #fff; }
    .article-tag.is-city { background: var(--petrol); color: #fff; }
    .article-tag.is-howto { background: linear-gradient(135deg, #f4c878, #e0a850); color: #2a1a08; }

    .article-body { padding: var(--s-4); }

    .article-meta {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      font-family: var(--ff-mono);
      font-size: 11px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      margin-bottom: var(--s-3);
    }
    .article-meta-cat {
      color: var(--coral);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .article-meta-dot {
      width: 3px; height: 3px;
      background: var(--ink-faint);
      border-radius: 50%;
    }

    .article-title {
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
      text-wrap: balance;
    }
    .article-excerpt {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0 0 var(--s-3);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .article-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color 0.3s, gap 0.3s var(--ease-cubic);
    }
    .article:hover .article-cta {
      color: var(--coral);
      gap: 10px;
    }
    .article:hover .article-title { color: var(--coral-deep); }
    .article-title { transition: color 0.3s; }

    /* "Browse all" button */
    .articles-footer {
      grid-column: 1 / -1;
      text-align: center;
      margin-top: var(--s-4);
    }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      transition: background 0.3s, color 0.3s;
    }
    .btn-secondary:hover { background: var(--ink); color: #fff; }
    .btn-secondary svg { width: 14px; height: 14px; transition: transform 0.3s; }
    .btn-secondary:hover svg { transform: translateX(3px); }

    /* ==================================================
       SIDEBAR — single container, hairline dividers
       ================================================== */
    .sidebar {
      align-self: start;
      position: sticky;
      top: 96px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .sidebar-section {
      padding: var(--s-4);
      border-bottom: 1px solid var(--line);
    }
    .sidebar-section:last-child { border-bottom: 0; }

    .sidebar-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: var(--s-3);
    }
    .sidebar-label::before {
      content: "";
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
    }

    /* About box */
    .sidebar-about-mark {
      width: 112px; height: 88px;
      margin: 0 auto var(--s-3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sidebar-about-text {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-body);
      text-align: center;
      margin: 0;
    }
    .sidebar-about-text strong { color: var(--ink); font-weight: 600; }

    /* Search */
    .sidebar-search {
      display: flex;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .sidebar-search:focus-within { border-color: var(--coral); }
    .sidebar-search input {
      flex: 1;
      padding: 10px 14px;
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 14px;
      min-width: 0;
    }
    .sidebar-search button {
      width: 38px;
      background: var(--coral);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
    }
    .sidebar-search button:hover { background: var(--coral-deep); }
    .sidebar-search button svg { width: 14px; height: 14px; }

    /* Popular posts */
    .sidebar-popular {
      display: grid;
      gap: var(--s-3);
    }
    .popular-item {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: var(--s-3);
      align-items: start;
    }
    .popular-img {
      width: 56px; height: 56px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--petrol);
    }
    .popular-img svg { width: 100%; height: 100%; }
    .popular-body { min-width: 0; padding-top: 2px; }
    .popular-cat {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: 2px;
      display: block;
    }
    .popular-title {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--ink);
      margin: 0;
      transition: color 0.2s;
    }
    .popular-item:hover .popular-title { color: var(--coral); }

    /* Newsletter mini in sidebar */
    .sidebar-newsletter {
      background: var(--petrol);
      color: #fff;
      margin: -1px -1px 0;
      padding: var(--s-4);
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .sidebar-newsletter .sidebar-label {
      color: rgba(255, 255, 255, 0.65);
    }
    .sidebar-newsletter h4 {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #fff;
      margin: 0 0 var(--s-2);
      line-height: 1.3;
    }
    .sidebar-newsletter p {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.7);
      margin: 0 0 var(--s-3);
    }
    .sidebar-newsletter form {
      display: grid;
      gap: 8px;
    }
    .sidebar-newsletter input {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-sm);
      color: #fff;
      font-size: 13px;
      transition: border-color 0.2s;
    }
    .sidebar-newsletter input::placeholder { color: rgba(255, 255, 255, 0.4); }
    .sidebar-newsletter input:focus { outline: 0; border-color: var(--coral-light); }
    .sidebar-newsletter button {
      padding: 10px 14px;
      background: var(--coral);
      color: #fff;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.2s;
    }
    .sidebar-newsletter button:hover { background: var(--coral-light); }

    /* ==================================================
       PILLAR SECTION — Start here
       ================================================== */
    .pillars {
      background: var(--bg-warm);
      padding: var(--s-9) var(--gutter);
      border-top: 1px solid var(--line);
    }
    .pillars-inner {
      max-width: var(--container);
      margin: 0 auto;
    }
    .pillars-head {
      max-width: 720px;
      margin: 0 auto var(--s-7);
      text-align: center;
    }
    .pillars-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-3);
    }
    .pillars-eyebrow::before,
    .pillars-eyebrow::after {
      content: "";
      width: 24px; height: 1px;
      background: var(--coral);
    }
    .pillars h2 {
      font-family: var(--ff-sans);
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin: 0 0 var(--s-3);
      text-wrap: balance;
    }
    .pillars-deck {
      font-size: 17px;
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0;
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
    }

    .pillar {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: var(--s-5);
      display: flex;
      flex-direction: column;
      transition: transform 0.4s var(--ease-expo), border-color 0.3s, box-shadow 0.3s;
    }
    .pillar:hover {
      transform: translateY(-4px);
      border-color: var(--coral);
      box-shadow: 0 12px 28px rgba(200, 85, 61, 0.08);
    }

    .pillar-icon {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--coral-soft);
      color: var(--coral);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--s-4);
      transition: background 0.3s, color 0.3s;
    }
    .pillar-icon svg { width: 22px; height: 22px; }
    .pillar:hover .pillar-icon {
      background: var(--coral);
      color: #fff;
    }
    .pillar-cat {
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: var(--s-2);
      display: block;
    }
    .pillar-title {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
      text-wrap: balance;
    }
    .pillar-deck {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0 0 var(--s-4);
      flex: 1;
    }
    .pillar-list {
      display: grid;
      gap: var(--s-2);
      padding-top: var(--s-4);
      border-top: 1px solid var(--line);
    }
    .pillar-list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--ink-body);
      transition: padding-left 0.3s var(--ease-cubic), color 0.2s;
    }
    .pillar-list-item:hover {
      color: var(--coral);
      padding-left: 4px;
    }
    .pillar-list-item-num {
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--coral);
      font-weight: 500;
      flex-shrink: 0;
      min-width: 20px;
    }

    /* ==================================================
       NEWSLETTER SPLASH
       ================================================== */
    .newsletter-splash {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter) var(--s-9);
      padding-top: var(--s-9);
    }
    .newsletter-splash-inner {
      background: linear-gradient(135deg, #154045 0%, #0E2A2E 100%);
      border-radius: var(--radius-lg);
      padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
      color: #fff;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--s-6);
      align-items: center;
    }
    .newsletter-splash-inner::before {
      content: "";
      position: absolute;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(200, 85, 61, 0.18) 0%, transparent 60%);
      top: -200px; right: -150px;
      pointer-events: none;
    }
    .newsletter-splash-text {
      position: relative;
      z-index: 1;
    }
    .newsletter-splash-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral-light);
      margin-bottom: var(--s-3);
    }
    .newsletter-splash-eyebrow::before {
      content: "";
      width: 24px; height: 1px;
      background: var(--coral-light);
    }
    .newsletter-splash h2 {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: #fff;
      margin: 0 0 var(--s-3);
      text-wrap: balance;
    }
    .newsletter-splash p {
      font-size: 15px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.75);
      margin: 0;
      max-width: 42ch;
    }
    .newsletter-splash-form {
      position: relative;
      z-index: 1;
      display: grid;
      gap: var(--s-3);
    }
    .newsletter-splash-form input {
      padding: 14px 18px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-sm);
      color: #fff;
      font-size: 14px;
      transition: border-color 0.2s, background 0.2s;
    }
    .newsletter-splash-form input::placeholder { color: rgba(255, 255, 255, 0.4); }
    .newsletter-splash-form input:focus {
      outline: 0;
      border-color: var(--coral-light);
      background: rgba(255, 255, 255, 0.12);
    }
    .newsletter-splash-form button {
      padding: 14px 24px;
      background: var(--coral);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.2s, transform 0.2s var(--ease-back);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .newsletter-splash-form button:hover {
      background: var(--coral-light);
      transform: translateY(-1px);
    }
    .newsletter-splash-form button svg { width: 14px; height: 14px; }
    .newsletter-tiny {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.45);
    }

    /* ==================================================
       INSTAGRAM STRIP
       ================================================== */
    .instagram {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter) var(--s-9);
    }
    .instagram-head {
      text-align: center;
      margin-bottom: var(--s-5);
    }
    .instagram-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-2);
    }
    .instagram-eyebrow svg { width: 14px; height: 14px; }
    .instagram h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0;
    }
    .instagram h3 a { color: var(--coral); }
    .instagram-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    .instagram-tile {
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: var(--radius-sm);
      background: var(--petrol-soft);
      position: relative;
    }
    .instagram-tile svg {
      width: 100%; height: 100%;
      transition: transform 0.6s var(--ease-expo);
    }
    .instagram-tile:hover svg { transform: scale(1.08); }
    .instagram-tile::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(14, 42, 46, 0.3);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .instagram-tile:hover::after { opacity: 1; }

    /* ==================================================
       FOOTER
       ================================================== */
    .site-footer {
      background: var(--petrol);
      color: rgba(255, 255, 255, 0.7);
      padding: var(--s-9) var(--gutter) var(--s-5);
    }
    .footer-inner {
      max-width: var(--container);
      margin: 0 auto var(--s-7);
      display: grid;
      grid-template-columns: 1.4fr 2.6fr;
      gap: clamp(40px, 6vw, 96px);
    }
    .footer-brand .logo { color: #fff; margin-bottom: var(--s-4); }
    .footer-brand .logo-mark { display: inline-flex; flex-shrink: 0; }
    .footer-brand .logo-mark svg,
    .footer-brand .footer-stamp-img {
      width: 63px;
      height: auto;
      max-height: 49px;
    }
    .sidebar-about-mark svg,
    .sidebar-about-mark .sidebar-stamp-img {
      width: 102px;
      height: auto;
      max-height: 81px;
    }
    .footer-brand .logo-name { color: #fff; }
    .footer-brand .logo-tag { color: rgba(255, 255, 255, 0.55); }
    .footer-tagline {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.6);
      margin: 0 0 var(--s-4);
      max-width: 32ch;
    }
    .footer-socials { display: flex; gap: 8px; }
    .footer-social {
      width: 36px; height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 50%;
      color: #fff;
      transition: background 0.3s, transform 0.3s var(--ease-back);
    }
    .footer-social:hover {
      background: var(--coral);
      transform: translateY(-2px);
    }
    .footer-social svg { width: 14px; height: 14px; }

    .footer-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-5);
    }
    .footer-col h4 {
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--coral-light);
      margin: 0 0 var(--s-3);
    }
    .footer-col ul { display: grid; gap: 8px; }
    .footer-col a {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      transition: color 0.2s;
    }
    .footer-col a:hover { color: #fff; }

    .footer-affiliate {
      max-width: var(--container);
      margin: 0 auto var(--s-3);
      padding: var(--s-3) 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.45);
      text-align: center;
    }
    .footer-affiliate strong { color: rgba(255, 255, 255, 0.7); font-weight: 500; }

    .footer-base {
      max-width: var(--container);
      margin: 0 auto;
      padding-top: var(--s-3);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: var(--s-3);
      font-family: var(--ff-mono);
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }
    .footer-base-end {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--s-3);
    }
    .footer-legal {
      display: flex;
      align-items: center;
      gap: var(--s-2);
    }
    .footer-legal a {
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-legal a:hover { color: var(--coral-light); }
    .footer-legal-sep { opacity: 0.5; user-select: none; }
    .footer-credit a { color: var(--coral-light); transition: color 0.2s; }
    .footer-credit a:hover { color: #fff; }


    /* Sidebar social block */
    .sidebar-social-icons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .sidebar-social-icon {
      width: 36px; height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }
    .sidebar-social-icon:hover {
      background: var(--coral);
      color: #fff;
      border-color: var(--coral);
    }
    .sidebar-social-icon svg { width: 14px; height: 14px; }

    /* Follow-us section before instagram */
    .follow-section {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-7) var(--gutter) var(--s-5);
      text-align: center;
    }
    .follow-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-3);
    }
    .follow-eyebrow::before, .follow-eyebrow::after {
      content: "";
      width: 24px; height: 1px;
      background: var(--coral);
    }
    .follow-section h2 {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
    }
    .follow-section p {
      font-size: 15px;
      color: var(--ink-muted);
      margin: 0 auto var(--s-5);
      max-width: 50ch;
    }
    .follow-platforms {
      display: flex;
      gap: var(--s-2);
      flex-wrap: wrap;
      justify-content: center;
    }
    .follow-platform {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
      transition: border-color 0.3s, background 0.3s;
    }
    .follow-platform:hover {
      border-color: var(--coral);
      background: var(--bg-warm);
    }
    .follow-platform svg { width: 16px; height: 16px; }
    .follow-platform-handle {
      font-family: var(--ff-mono);
      font-size: 12px;
      color: var(--ink-muted);
    }



    /* Mobile: hide header search, show in drawer */
    @media (max-width: 880px) {
      .header-search { display: none; }
      .header-inner { grid-template-columns: 1fr auto; }
    }

    /* Drawer search */
    .mega-search {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: 999px;
      margin: var(--s-3) var(--s-4) 0;
      transition: border-color 0.2s, background 0.2s;
    }
    .mega-search:focus-within { border-color: var(--coral); background: #fff; }
    .mega-search svg { width: 16px; height: 16px; color: var(--coral); flex-shrink: 0; }
    .mega-search input {
      flex: 1;
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 14px;
      color: var(--ink);
      min-width: 0;
    }
    .mega-search input::placeholder { color: var(--ink-muted); }


    /* ==================================================
       RESPONSIVE
       ================================================== */
    @media (max-width: 1100px) {
      .main-grid { grid-template-columns: 1fr; gap: var(--s-7); }
      .sidebar { position: static; }
      .pillars-grid { grid-template-columns: 1fr; gap: var(--s-3); }
      .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
      .footer-cols { grid-template-columns: repeat(2, 1fr); }
      .newsletter-splash-inner { grid-template-columns: 1fr; gap: var(--s-4); }
      .hero-card { grid-template-columns: 1fr; gap: var(--s-5); }
      .instagram-grid { grid-template-columns: repeat(3, 1fr); }
    }


    /* Mobile image width fix */
    @media (max-width: 1100px) {
      .hero-card { gap: var(--s-5); }
      .hero-image { aspect-ratio: 16 / 10; }
    }

    @media (max-width: 880px) {
      .primary-nav { display: none; }
      .menu-toggle { display: inline-flex; }
      .mobile-nav { display: block; }

      .hero { padding: var(--s-6) var(--gutter) var(--s-7); }
      .tools-strip-inner { grid-template-columns: 1fr; gap: var(--s-3); }
      .tools-strip-list { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
      .tools-strip-list::-webkit-scrollbar { display: none; }

      .articles { grid-template-columns: 1fr; }

      /* Tools: vertical stack on mobile, smaller */
      .tools-section { margin-top: -28px; }
      .tools-bubbles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .tool-bubble {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 14px 10px;
      }
      .tool-bubble-icon { width: 36px; height: 36px; }
      .tool-bubble-text { align-items: center; }
      .tool-bubble-name { font-size: 12px; }
      .tool-bubble-meta { font-size: 9px; }
      .pillars { padding: var(--s-7) var(--gutter); }
      .newsletter-splash { padding-top: var(--s-7); padding-bottom: var(--s-7); }
      .instagram { padding-bottom: var(--s-7); }
      .instagram-grid { grid-template-columns: repeat(3, 1fr); }
      .site-footer { padding: var(--s-7) var(--gutter) var(--s-4); }
      .footer-cols { grid-template-columns: 1fr; }
    }

    @media (max-width: 540px) {
      .lang-toggle { display: none; }
      .footer-base { flex-direction: column; align-items: flex-start; }
      .instagram-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

/* === [2] ARCHIVE-SPECIFIC (Archive Hero, Filter Strip, Archive Grid, Pagination, Other Categories) === */
    /* ==================================================
       ARCHIVE HERO — Calm header, mono stats line
       ================================================== */
    .archive-hero {
      background: var(--bg-soft);
      border-bottom: 1px solid var(--line);
      padding: var(--s-7) var(--gutter) var(--s-7);
    }
    .archive-hero-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--s-6);
      align-items: end;
    }

    /* Breadcrumb (same as single-post) */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
      margin-bottom: var(--s-5);
      text-transform: uppercase;
    }
    .breadcrumb a { color: var(--ink-muted); transition: color 0.2s; }
    .breadcrumb a:hover { color: var(--coral); }
    .breadcrumb-sep { color: var(--ink-faint); font-size: 9px; }
    .breadcrumb-current { color: var(--ink); font-weight: 500; }

    .archive-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-3);
    }
    .archive-eyebrow::before {
      content: "";
      width: 24px; height: 1px;
      background: var(--coral);
    }

    .archive-hero h1 {
      font-family: var(--ff-sans);
      font-size: clamp(40px, 6.4vw, 76px);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin: 0 0 var(--s-3);
      text-wrap: balance;
    }
    .archive-hero h1 .accent { color: var(--coral); }

    .archive-deck {
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0;
      max-width: 56ch;
      font-weight: 400;
    }

    /* Right column — stats panel */
    .archive-stats {
      padding: var(--s-4);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .archive-stats-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .archive-stats-label::before {
      content: "";
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
    }
    .archive-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .archive-stat {
      padding: 0 var(--s-3);
      border-right: 1px solid var(--line);
    }
    .archive-stat:last-child { border-right: 0; }
    .archive-stat:first-child { padding-left: 0; }
    .archive-stat-value {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1;
      margin-bottom: 6px;
    }
    .archive-stat-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .archive-stat-label .pulse {
      display: inline-block;
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
      margin-right: 6px;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.2); }
    }

    /* ==================================================
       FILTER STRIP — Sticky on scroll, prominent filter-first
       ================================================== */
    .filter-strip {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      transition: box-shadow 0.3s, border-color 0.3s;
    }
    .filter-strip.is-stuck {
      box-shadow: 0 4px 16px rgba(14, 42, 46, 0.06);
      border-bottom-color: var(--line);
    }
    .site-header.is-pinned ~ * .filter-strip { top: var(--header-height, 80px); }

    .filter-strip-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-3) var(--gutter);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--s-4);
      align-items: center;
    }

    /* Subcategory chips */
    .filter-row {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-wrap: wrap;
    }
    .filter-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-faint);
      flex-shrink: 0;
    }
    .filter-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.005em;
      color: var(--ink);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s var(--ease-back);
    }
    .filter-chip:hover {
      border-color: var(--coral);
      color: var(--coral);
      transform: translateY(-1px);
    }
    .filter-chip.is-active {
      background: var(--coral);
      color: #fff;
      border-color: var(--coral);
    }
    .filter-chip-count {
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
    .filter-chip.is-active .filter-chip-count { color: rgba(255, 255, 255, 0.7); }

    /* Dropdown selects */
    .filter-controls {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      flex-wrap: wrap;
    }
    .filter-select {
      position: relative;
    }
    .filter-select-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      white-space: nowrap;
    }
    .filter-select-btn:hover {
      border-color: var(--coral);
      background: var(--bg-warm);
    }
    .filter-select-btn .label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }
    .filter-select-btn .value {
      font-weight: 600;
      color: var(--ink);
    }
    .filter-select-btn svg {
      width: 10px; height: 10px;
      color: var(--ink-faint);
      transition: transform 0.25s var(--ease-cubic);
    }
    .filter-select.is-open .filter-select-btn svg { transform: rotate(180deg); }
    .filter-select.is-open .filter-select-btn {
      border-color: var(--coral);
      background: #fff;
    }

    .filter-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 220px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: var(--s-2);
      box-shadow: 0 12px 32px rgba(14, 42, 46, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: all 0.25s var(--ease-cubic);
      z-index: 60;
      max-height: 320px;
      overflow-y: auto;
    }
    .filter-select.is-open .filter-dropdown {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .filter-dropdown-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      padding: var(--s-2) var(--s-3) var(--s-1);
      display: block;
    }
    .filter-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      transition: background 0.15s;
      cursor: pointer;
      width: 100%;
      text-align: left;
      font-size: 13px;
      color: var(--ink);
    }
    .filter-option:hover { background: var(--bg-warm); }
    .filter-option.is-active { background: var(--coral-soft); color: var(--coral); font-weight: 600; }
    .filter-option-flag { font-size: 16px; flex-shrink: 0; }
    .filter-option-count {
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      margin-left: auto;
    }
    .filter-option.is-active .filter-option-count { color: var(--coral); }

    /* Active filter pills row (below chips when filters applied) */
    .active-filters {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: var(--s-2);
      padding-top: var(--s-2);
      border-top: 1px dashed var(--line);
    }
    .active-filters-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }
    .active-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px 4px 10px;
      background: var(--coral-soft);
      color: var(--coral-deep);
      border-radius: 999px;
      font-size: 11px;
      font-family: var(--ff-mono);
      font-weight: 500;
    }
    .active-pill button {
      width: 14px; height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--coral);
      color: #fff;
      cursor: pointer;
      transition: background 0.2s;
    }
    .active-pill button:hover { background: var(--coral-deep); }
    .active-pill button svg { width: 8px; height: 8px; }
    .clear-all-btn {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-muted);
      cursor: pointer;
      padding: 4px 0;
      transition: color 0.2s;
    }
    .clear-all-btn:hover { color: var(--coral); }

    /* Result count + view toggle */
    .results-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-5) var(--gutter) var(--s-3);
      gap: var(--s-3);
      flex-wrap: wrap;
    }
    .results-count {
      font-size: 14px;
      color: var(--ink-muted);
      letter-spacing: -0.005em;
    }
    .results-count strong {
      color: var(--ink);
      font-weight: 600;
    }
    .view-toggle {
      display: flex;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px;
      background: var(--bg-warm);
    }
    .view-toggle button {
      width: 32px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: var(--ink-muted);
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .view-toggle button.is-active {
      background: var(--bg);
      color: var(--ink);
      box-shadow: 0 1px 2px rgba(14, 42, 46, 0.06);
    }
    .view-toggle button svg { width: 13px; height: 13px; }

    /* ==================================================
       ARCHIVE GRID — 3 col cards
       ================================================== */
    .archive-grid-wrap {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter) var(--s-7);
    }
    .archive-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
    }

    .archive-card {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform 0.4s var(--ease-expo), border-color 0.3s, background 0.3s;
      display: flex;
      flex-direction: column;
    }
    .archive-card:hover {
      background: var(--bg-warm);
      transform: translateY(-2px);
    }
    .archive-card a {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .archive-card-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--petrol);
    }
    .archive-card-image svg {
      width: 100%; height: 100%;
      transition: transform 0.8s var(--ease-expo);
    }
    .archive-card:hover .archive-card-image svg { transform: scale(1.03); }

    .archive-card-overlay {
      position: absolute;
      top: var(--s-3);
      left: var(--s-3);
      right: var(--s-3);
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start;
      pointer-events: none;
    }
    .archive-card-flag {
      font-size: 20px;
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .archive-card-difficulty {
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .archive-card-difficulty::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--coral);
    }
    .archive-card-difficulty.is-easy::before { background: #4a8550; }
    .archive-card-difficulty.is-medium::before { background: #d4933b; }
    .archive-card-difficulty.is-hard::before { background: #C8553D; }

    .archive-card-body {
      padding: var(--s-4);
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .archive-card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--ink-muted);
      letter-spacing: 0.06em;
      margin-bottom: var(--s-3);
      text-transform: uppercase;
    }
    .archive-card-meta-cat {
      color: var(--coral);
      font-weight: 500;
    }
    .archive-card-meta-dot {
      width: 3px; height: 3px;
      background: var(--ink-faint);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .archive-card-meta-fresh {
      color: var(--coral);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .archive-card-meta-fresh::before {
      content: "";
      width: 5px; height: 5px;
      background: var(--coral);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    .archive-card-title {
      font-size: 19px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
      text-wrap: balance;
      transition: color 0.3s;
    }
    .archive-card:hover .archive-card-title { color: var(--coral-deep); }
    .archive-card-excerpt {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0 0 var(--s-3);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .archive-card-stats {
      margin-top: auto;
      padding-top: var(--s-3);
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .archive-card-stat {
      padding: 0 8px;
      border-right: 1px solid var(--line);
    }
    .archive-card-stat:first-child { padding-left: 0; }
    .archive-card-stat:last-child { border-right: 0; padding-right: 0; }
    .archive-card-stat-label {
      font-family: var(--ff-mono);
      font-size: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 2px;
      line-height: 1;
    }
    .archive-card-stat-value {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .archive-card-stat-value .unit {
      font-family: var(--ff-mono);
      font-size: 9px;
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
    }

    /* Empty state (when filters yield nothing) */
    .archive-empty {
      grid-column: 1 / -1;
      padding: var(--s-8) var(--s-4);
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      background: var(--bg-warm);
    }
    .archive-empty h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
    }
    .archive-empty p {
      font-size: 14px;
      color: var(--ink-muted);
      margin: 0 0 var(--s-3);
    }

    /* ==================================================
       PAGINATION — minimal mono
       ================================================== */
    .pagination {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-5) var(--gutter) var(--s-7);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border-top: 1px solid var(--line);
    }
    .page-btn {
      min-width: 38px;
      height: 38px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink);
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .page-btn:not(.is-active):not(.is-disabled):hover {
      background: var(--bg-warm);
      color: var(--coral);
    }
    .page-btn.is-active {
      background: var(--coral);
      color: #fff;
      cursor: default;
    }
    .page-btn.is-disabled {
      color: var(--ink-faint);
      cursor: not-allowed;
    }
    .page-btn.is-arrow {
      border-radius: 999px;
      padding: 0 14px;
    }
    .page-btn.is-arrow svg { width: 12px; height: 12px; }
    .page-ellipsis {
      width: 24px;
      text-align: center;
      color: var(--ink-faint);
      font-family: var(--ff-mono);
      font-size: 12px;
      user-select: none;
    }

    /* ==================================================
       OTHER CATEGORIES STRIP — chip row at bottom
       ================================================== */
    .other-cats {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-7) var(--gutter);
      border-top: 1px solid var(--line);
    }
    .other-cats h2 {
      font-family: var(--ff-sans);
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-4);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .other-cats h2::before {
      content: "";
      width: 8px; height: 8px;
      background: var(--coral);
      border-radius: 50%;
    }
    .other-cats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-3);
    }
    .other-cat {
      padding: var(--s-4);
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-expo);
      display: flex;
      align-items: center;
      gap: var(--s-3);
    }
    .other-cat:hover {
      border-color: var(--coral);
      background: var(--bg);
      transform: translateY(-2px);
    }
    .other-cat-icon {
      width: 44px; height: 44px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--coral-soft);
      color: var(--coral);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }
    .other-cat:hover .other-cat-icon {
      background: var(--coral);
      color: #fff;
    }
    .other-cat-icon svg { width: 18px; height: 18px; }
    .other-cat-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 2px;
      display: block;
    }
    .other-cat-name {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--ink);
      line-height: 1.2;
      margin: 0 0 4px;
    }
    .other-cat-count {
      font-family: var(--ff-mono);
      font-size: 11px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
    }
    .other-cat-arrow {
      margin-left: auto;
      width: 28px; height: 28px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-faint);
      transition: color 0.3s, transform 0.3s var(--ease-cubic);
    }
    .other-cat:hover .other-cat-arrow {
      color: var(--coral);
      transform: translateX(4px);
    }
    .other-cat-arrow svg { width: 14px; height: 14px; }


/* === [3] SINGLE-SPECIFIC (Reading Progress, Article Hero, Hero Image, Article Body, Prose, Footer Meta, Author Bio, Related) === */
    /* ==================================================
       READING PROGRESS BAR — top of viewport
       ================================================== */
    .reading-progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px;
      width: 0%;
      background: var(--coral);
      z-index: 300;
      transition: width 0.1s linear;
      pointer-events: none;
    }
    .site-header.is-pinned ~ .reading-progress { top: var(--header-height, 80px); }

    /* ==================================================
       ARTICLE HERO — Editorial display, calm pacing
       ================================================== */
    .article-hero {
      background: var(--bg-soft);
      border-bottom: 1px solid var(--line);
      padding: var(--s-7) var(--gutter) var(--s-8);
    }
    .article-hero-inner {
      max-width: 920px;
      margin: 0 auto;
    }

    /* Breadcrumb */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
      margin-bottom: var(--s-5);
      text-transform: uppercase;
    }
    .breadcrumb a {
      color: var(--ink-muted);
      transition: color 0.2s;
    }
    .breadcrumb a:hover { color: var(--coral); }
    .breadcrumb-sep {
      color: var(--ink-faint);
      font-size: 9px;
    }
    .breadcrumb-current {
      color: var(--ink);
      font-weight: 500;
    }

    /* Eyebrow */
    .article-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-4);
    }
    .article-eyebrow::before {
      content: "";
      width: 24px; height: 1px;
      background: var(--coral);
    }

    /* Editorial display headline — bigger than homepage hero */
    .article-hero h1 {
      font-family: var(--ff-sans);
      font-size: clamp(40px, 6.4vw, 76px);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin: 0 0 var(--s-4);
      text-wrap: balance;
      max-width: 18ch;
    }

    .article-deck {
      font-size: clamp(17px, 1.6vw, 21px);
      line-height: 1.5;
      color: var(--ink-muted);
      margin: 0 0 var(--s-6);
      max-width: 60ch;
      font-weight: 400;
    }

    /* Author + meta row */
    .article-meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--s-4);
      padding-top: var(--s-4);
      border-top: 1px solid var(--line);
    }
    .author-block {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .author-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--coral), var(--coral-deep));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 17px;
      flex-shrink: 0;
    }
    .author-info { display: flex; flex-direction: column; gap: 2px; }
    .author-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .author-meta {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .meta-divider {
      width: 1px;
      height: 28px;
      background: var(--line);
      flex-shrink: 0;
    }
    .article-meta-data {
      display: flex;
      align-items: center;
      gap: var(--s-4);
      font-family: var(--ff-mono);
      font-size: 11px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
    }
    .article-meta-data strong {
      color: var(--ink);
      font-weight: 500;
    }
    .article-meta-data .label {
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      display: block;
      margin-bottom: 2px;
    }
    .meta-actions {
      margin-left: auto;
      display: flex;
      gap: 8px;
    }
    .meta-action {
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      background: var(--bg);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .meta-action:hover {
      border-color: var(--coral);
      color: var(--coral);
    }
    .meta-action svg { width: 15px; height: 15px; }
    .meta-action.is-saved {
      background: var(--coral);
      border-color: var(--coral);
      color: #fff;
    }

    /* ==================================================
       HERO IMAGE — separate band, full-bleed-ish
       ================================================== */
    .article-hero-image {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter) var(--s-7);
      margin-top: calc(-1 * var(--s-7));
      position: relative;
    }
    .article-hero-image figure {
      margin: 0;
      position: relative;
    }
    .article-hero-image .img-wrap {
      position: relative;
      aspect-ratio: 21 / 10;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--petrol);
    }
    .article-hero-image .img-wrap svg { width: 100%; height: 100%; }
    .article-hero-image .img-meta {
      position: absolute;
      bottom: var(--s-3);
      left: var(--s-3);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .article-hero-image .img-meta svg {
      color: var(--coral);
      width: 10px; height: 10px;
    }
    .article-hero-image figcaption {
      margin-top: 12px;
      padding: 0 4px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
      display: flex;
      gap: 12px;
    }
    .article-hero-image figcaption .credit {
      color: var(--ink-faint);
      margin-left: auto;
    }

    /* ==================================================
       ARTICLE BODY — Asymmetric 3-col grid
       Left: margin notes (sticky)  Center: prose  Right: empty for breathing
       ================================================== */
    .article-layout {
      max-width: var(--container-article);
      margin: 0 auto;
      padding: var(--s-6) var(--gutter) var(--s-9);
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr) 220px;
      gap: var(--s-6);
      position: relative;
    }

    /* Margin notes (left rail) */
    .margin-notes {
      position: sticky;
      top: 96px;
      align-self: start;
      padding-right: var(--s-3);
    }
    .mn-block {
      margin-bottom: var(--s-5);
      padding-bottom: var(--s-4);
      border-bottom: 1px solid var(--line);
    }
    .mn-block:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
    .mn-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mn-label::before {
      content: "";
      width: 5px; height: 5px;
      background: var(--coral);
      border-radius: 50%;
    }
    /* TOC */
    .mn-toc { display: grid; gap: 4px; }
    .mn-toc a {
      font-size: 12px;
      line-height: 1.4;
      color: var(--ink-muted);
      padding: 6px 0 6px 14px;
      border-left: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s, padding-left 0.2s;
      display: flex;
      gap: 8px;
      align-items: baseline;
    }
    .mn-toc a:hover { color: var(--coral); }
    .mn-toc a.is-active {
      color: var(--ink);
      font-weight: 500;
      border-left-color: var(--coral);
    }
    .mn-toc-num {
      font-family: var(--ff-mono);
      font-size: 9px;
      color: var(--ink-faint);
      flex-shrink: 0;
      letter-spacing: 0.05em;
    }
    .mn-toc a.is-active .mn-toc-num { color: var(--coral); }

    /* Reading progress text */
    .mn-progress {
      font-family: var(--ff-mono);
      font-size: 10px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      line-height: 1.5;
    }
    .mn-progress strong {
      color: var(--ink);
      font-weight: 500;
    }
    .mn-progress-bar {
      margin-top: 8px;
      height: 2px;
      background: var(--line);
      border-radius: 1px;
      overflow: hidden;
    }
    .mn-progress-fill {
      height: 100%;
      background: var(--coral);
      width: 0%;
      transition: width 0.15s linear;
    }

    /* Save / Share quick-actions in margin */
    .mn-actions { display: grid; gap: 6px; }
    .mn-action {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
      cursor: pointer;
      transition: color 0.2s, padding-left 0.2s var(--ease-cubic);
      width: 100%;
      text-align: left;
    }
    .mn-action:hover { color: var(--coral); padding-left: 4px; }
    .mn-action svg { width: 14px; height: 14px; flex-shrink: 0; }
    .mn-action.is-active { color: var(--coral); }

    /* Right rail (sticky tip / glossary) */
    .article-aside {
      position: sticky;
      top: 96px;
      align-self: start;
      padding-left: var(--s-3);
    }
    .aside-block {
      margin-bottom: var(--s-5);
    }
    .aside-block-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .aside-block-label::before {
      content: "";
      width: 5px; height: 5px;
      background: var(--coral);
      border-radius: 50%;
    }
    .aside-stat {
      padding: var(--s-3) 0;
      border-bottom: 1px solid var(--line);
    }
    .aside-stat:last-child { border-bottom: 0; }
    .aside-stat-label {
      font-family: var(--ff-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 4px;
    }
    .aside-stat-value {
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
    .aside-stat-value .unit {
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      margin-left: 4px;
    }
    .aside-tip {
      padding: var(--s-3);
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-body);
    }
    .aside-tip strong { color: var(--ink); font-weight: 600; }

    /* ==================================================
       ARTICLE PROSE — long-form typography
       ================================================== */
    .article-prose {
      max-width: 720px;
      margin: 0 auto;
      font-size: 18px;
      line-height: 1.65;
      color: var(--ink-body);
    }

    /* Lead paragraph with drop cap */
    .article-prose .lead {
      font-size: 21px;
      line-height: 1.55;
      color: var(--ink);
      margin: 0 0 var(--s-5);
      font-weight: 400;
    }
    .article-prose .lead::first-letter {
      float: left;
      font-family: var(--ff-sans);
      font-size: 76px;
      font-weight: 700;
      line-height: 0.85;
      color: var(--coral);
      margin: 6px 12px 0 0;
      letter-spacing: -0.04em;
    }

    /* Body paragraphs */
    .article-prose p {
      margin: 0 0 var(--s-4);
    }
    .article-prose p + p { margin-top: 0; }

    /* Inline links */
    .article-prose a {
      color: var(--ink);
      text-decoration: none;
      background-image: linear-gradient(to right, var(--coral) 0%, var(--coral) 100%);
      background-position: 0 96%;
      background-repeat: no-repeat;
      background-size: 100% 1.5px;
      transition: background-size 0.2s var(--ease-cubic), color 0.2s;
      padding-bottom: 1px;
    }
    .article-prose a:hover {
      color: var(--coral);
      background-size: 100% 100%;
      background-image: linear-gradient(to right, var(--coral-soft) 0%, var(--coral-soft) 100%);
    }

    /* H2 with section numbering */
    .article-prose h2 {
      position: relative;
      font-family: var(--ff-sans);
      font-size: clamp(28px, 3.4vw, 36px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: var(--s-7) 0 var(--s-4);
      text-wrap: balance;
      scroll-margin-top: 100px;
    }
    .article-prose h2::before {
      content: attr(data-num);
      display: block;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: var(--s-3);
    }

    /* H3 */
    .article-prose h3 {
      font-family: var(--ff-sans);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: var(--s-5) 0 var(--s-3);
      scroll-margin-top: 100px;
    }

    /* Lists */
    .article-prose ul,
    .article-prose ol {
      margin: 0 0 var(--s-4);
      padding: 0;
      list-style: none;
    }
    .article-prose ul li,
    .article-prose ol li {
      position: relative;
      padding-left: 28px;
      margin-bottom: 10px;
      line-height: 1.6;
    }
    .article-prose ul li::before {
      content: "";
      position: absolute;
      left: 6px; top: 13px;
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
    }
    .article-prose ol { counter-reset: ol-counter; }
    .article-prose ol li {
      counter-increment: ol-counter;
    }
    .article-prose ol li::before {
      content: counter(ol-counter, decimal-leading-zero);
      position: absolute;
      left: 0; top: 2px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--coral);
    }

    /* Pull quote — editorial, left coral bar */
    .pull-quote {
      margin: var(--s-6) 0;
      padding: 0 0 0 var(--s-4);
      border-left: 3px solid var(--coral);
      font-family: var(--ff-sans);
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-wrap: balance;
    }
    .pull-quote p { margin: 0 0 var(--s-2); }
    .pull-quote cite {
      display: block;
      margin-top: 12px;
      font-style: normal;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    /* Quick Facts box — warm, hairline trims */
    .fact-box {
      margin: var(--s-5) 0;
      padding: var(--s-5);
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .fact-box-label {
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: var(--s-3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .fact-box-label::before {
      content: "";
      width: 6px; height: 6px;
      background: var(--coral);
      border-radius: 50%;
    }
    .fact-box-title {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-3);
    }
    .fact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
    }
    .fact-row {
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .fact-row:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
    .fact-row:nth-child(odd) { padding-right: var(--s-4); }
    .fact-row:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--line); }
    .fact-row-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .fact-row-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.015em;
      line-height: 1.3;
    }
    .fact-row-value .unit {
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      margin-left: 3px;
    }

    /* Cost breakdown — striped table */
    .cost-table {
      margin: var(--s-5) 0;
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .cost-table caption {
      caption-side: top;
      text-align: left;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: 10px;
    }
    .cost-table thead th {
      text-align: left;
      padding: 10px 14px;
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-muted);
      font-weight: 500;
      border-bottom: 1px solid var(--line);
    }
    .cost-table thead th:last-child { text-align: right; }
    .cost-table td {
      padding: 14px;
      border-bottom: 1px solid var(--line-soft);
      color: var(--ink-body);
    }
    .cost-table td:last-child {
      text-align: right;
      font-family: var(--ff-mono);
      font-weight: 500;
      color: var(--ink);
    }
    .cost-table tr:last-child td { border-bottom: 0; }
    .cost-table tfoot td {
      border-top: 1.5px solid var(--ink);
      border-bottom: 0;
      padding-top: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .cost-table tfoot td:last-child { color: var(--coral); font-size: 16px; }

    /* Inline image with caption */
    .article-prose figure {
      margin: var(--s-5) 0;
    }
    .article-prose figure .img-wrap {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--petrol);
    }
    .article-prose figure .img-wrap svg { width: 100%; height: 100%; }
    .article-prose figcaption {
      margin-top: 10px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
      line-height: 1.5;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .article-prose figcaption .credit {
      color: var(--ink-faint);
      margin-left: auto;
    }

    /* Author callout — Coral accented */
    .author-callout {
      margin: var(--s-5) 0;
      padding: var(--s-4) var(--s-5);
      background: var(--coral-soft);
      border-left: 3px solid var(--coral);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--s-3);
      align-items: start;
    }
    .author-callout-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--coral), var(--coral-deep));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
    }
    .author-callout-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: 4px;
      display: block;
    }
    .author-callout p {
      font-size: 15px;
      line-height: 1.55;
      margin: 0;
      color: var(--ink-body);
      font-style: italic;
    }

    /* Affiliate disclosure inline */
    .affiliate-note {
      margin: var(--s-5) 0;
      padding: var(--s-3) var(--s-4);
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      display: flex;
      gap: 12px;
      align-items: start;
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-muted);
    }
    .affiliate-note svg {
      width: 16px; height: 16px;
      color: var(--coral);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .affiliate-note strong { color: var(--ink); font-weight: 600; }

    /* HR — editorial separator with mark */
    .article-prose hr {
      border: 0;
      margin: var(--s-7) auto;
      width: 60px;
      height: 1px;
      background: var(--line);
      position: relative;
    }
    .article-prose hr::after {
      content: "§";
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg);
      padding: 0 12px;
      font-family: var(--ff-mono);
      font-size: 14px;
      color: var(--ink-faint);
    }

    /* ==================================================
       ARTICLE FOOTER — tags, share, save row
       ================================================== */
    .article-footer-meta {
      max-width: 720px;
      margin: var(--s-7) auto 0;
      padding-top: var(--s-5);
      border-top: 1px solid var(--line);
    }
    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: var(--s-5);
    }
    .article-tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink);
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .article-tag-pill:hover {
      border-color: var(--coral);
      color: var(--coral);
      background: var(--bg);
    }
    .article-tag-pill::before {
      content: "#";
      color: var(--coral);
      font-weight: 600;
    }

    .share-row {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-wrap: wrap;
    }
    .share-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .share-buttons {
      display: flex;
      gap: 8px;
    }
    .share-btn {
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      background: var(--bg);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.3s var(--ease-back);
    }
    .share-btn:hover {
      border-color: var(--coral);
      background: var(--coral);
      color: #fff;
      transform: translateY(-2px);
    }
    .share-btn svg { width: 14px; height: 14px; }

    /* ==================================================
       AUTHOR BIO — Card at bottom
       ================================================== */
    .author-bio {
      max-width: 720px;
      margin: var(--s-7) auto 0;
      padding: var(--s-5);
      background: var(--bg-warm);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: var(--s-4);
      align-items: start;
    }
    .author-bio-avatar {
      width: 80px; height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--coral), var(--coral-deep));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 32px;
      letter-spacing: -0.04em;
      flex-shrink: 0;
    }
    .author-bio-label {
      font-family: var(--ff-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 500;
      margin-bottom: 6px;
      display: block;
    }
    .author-bio-name {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
    }
    .author-bio-text {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-body);
      margin: 0 0 var(--s-3);
    }
    .author-bio-links {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .author-bio-links a {
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      background: var(--bg);
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .author-bio-links a:hover {
      border-color: var(--coral);
      background: var(--coral);
      color: #fff;
    }
    .author-bio-links a svg { width: 13px; height: 13px; }
    .author-bio-articles {
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-muted);
      margin-left: auto;
    }
    .author-bio-articles a {
      width: auto; height: auto;
      border: 0; border-radius: 0; background: none;
      color: var(--ink-muted);
      padding: 6px 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s, gap 0.2s var(--ease-cubic);
    }
    .author-bio-articles a:hover {
      color: var(--coral);
      background: none;
      gap: 8px;
    }
    .author-bio-articles svg { width: 12px; height: 12px; }

    /* ==================================================
       RELATED POSTS — 3 col grid
       ================================================== */
    .related {
      max-width: var(--container);
      margin: 0 auto;
      padding: var(--s-9) var(--gutter) 0;
    }
    .related-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--s-3);
      margin-bottom: var(--s-5);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid var(--line);
    }
    .related-head h2 {
      font-family: var(--ff-sans);
      font-size: clamp(24px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0;
      line-height: 1.05;
    }
    .related-head .accent-dot {
      display: inline-block;
      width: 8px; height: 8px;
      background: var(--coral);
      border-radius: 50%;
      margin-right: 10px;
      vertical-align: middle;
      transform: translateY(-2px);
    }
    .related-head .section-link {
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
      transition: color 0.2s, gap 0.3s var(--ease-cubic);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .related-head .section-link:hover { color: var(--coral); gap: 8px; }
    .related-head .section-link svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
    }
    .related-card {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform 0.4s var(--ease-expo), border-color 0.3s, background 0.3s;
    }
    .related-card:hover { background: var(--bg-warm); }
    .related-card a { display: block; height: 100%; }
    .related-card-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: var(--petrol);
    }
    .related-card-image svg {
      width: 100%; height: 100%;
      transition: transform 0.8s var(--ease-expo);
    }
    .related-card:hover .related-card-image svg { transform: scale(1.02); }
    .related-card-tag {
      position: absolute;
      top: var(--s-3); left: var(--s-3);
      padding: 5px 11px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .related-card-tag.is-visa { background: var(--coral); color: #fff; }
    .related-card-tag.is-city { background: var(--petrol); color: #fff; }
    .related-card-tag.is-howto { background: linear-gradient(135deg, #f4c878, #e0a850); color: #2a1a08; }
    .related-card-body { padding: var(--s-4); }
    .related-card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono);
      font-size: 11px;
      color: var(--ink-muted);
      letter-spacing: 0.04em;
      margin-bottom: var(--s-3);
    }
    .related-card-meta-cat {
      color: var(--coral);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .related-card-meta-dot {
      width: 3px; height: 3px;
      background: var(--ink-faint);
      border-radius: 50%;
    }
    .related-card-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 var(--s-2);
      text-wrap: balance;
      transition: color 0.3s;
    }
    .related-card:hover .related-card-title { color: var(--coral-deep); }
    .related-card-excerpt {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-muted);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }


/* === [4] ARCHIVE RESPONSIVE === */
    /* ==================================================
       RESPONSIVE
       ================================================== */
    @media (max-width: 1100px) {
      .archive-hero-inner {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .archive-stats {
        margin-top: var(--s-3);
      }
      .archive-grid { grid-template-columns: repeat(2, 1fr); }
      .other-cats-row { grid-template-columns: repeat(2, 1fr); }
      .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
      .footer-cols { grid-template-columns: repeat(2, 1fr); }
      .newsletter-splash-inner { grid-template-columns: 1fr; gap: var(--s-4); }
    }
    @media (max-width: 880px) {
      .header-search { display: none; }
      .header-inner { grid-template-columns: 1fr auto; }
      .archive-hero { padding: var(--s-6) var(--gutter) var(--s-6); }
      .archive-hero h1 { font-size: clamp(34px, 8vw, 56px); }
      .archive-stats-grid { grid-template-columns: 1fr; gap: var(--s-2); }
      .archive-stat {
        padding: var(--s-2) 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .archive-stat:last-child { border-bottom: 0; padding-bottom: 0; }
      .archive-stat:first-child { padding-top: 0; }
      .archive-stat-value { font-size: 24px; }

      .filter-strip-inner {
        grid-template-columns: 1fr;
        gap: var(--s-3);
      }
      .filter-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        margin: 0 calc(-1 * var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
      }
      .filter-row::-webkit-scrollbar { height: 0; }
      .filter-chips { flex-wrap: nowrap; }
      .filter-chip { white-space: nowrap; flex-shrink: 0; }
      .filter-controls { width: 100%; justify-content: space-between; }

      .archive-grid { grid-template-columns: 1fr; }
      .other-cats-row { grid-template-columns: 1fr; }
      .footer-cols { grid-template-columns: 1fr; }
      .site-footer { padding: var(--s-7) var(--gutter) var(--s-4); }
      .other-cats { padding: var(--s-6) var(--gutter); }
      .newsletter-splash { padding: var(--s-7) var(--gutter); }

      .pagination { flex-wrap: wrap; padding: var(--s-4) var(--gutter); }
      .page-btn { min-width: 36px; height: 36px; }
    }
    @media (max-width: 540px) {
      .footer-base { flex-direction: column; align-items: flex-start; }
      .results-meta { gap: var(--s-2); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

/* === [5] SINGLE RESPONSIVE === */
    /* ==================================================
       RESPONSIVE
       ================================================== */
    @media (max-width: 1180px) {
      .article-layout {
        grid-template-columns: 200px minmax(0, 1fr);
      }
      .article-aside { display: none; }
    }
    @media (max-width: 980px) {
      .article-layout {
        grid-template-columns: 1fr;
        gap: var(--s-4);
      }
      .margin-notes {
        position: static;
        max-height: none;
        padding-right: 0;
        order: 2;
        background: var(--bg-warm);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: var(--s-4);
        margin-top: var(--s-5);
      }
      .article-prose { order: 1; }
      .related-grid { grid-template-columns: 1fr 1fr; }
      .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
      .footer-cols { grid-template-columns: repeat(2, 1fr); }
      .newsletter-splash-inner { grid-template-columns: 1fr; gap: var(--s-4); }
      .article-hero h1 { font-size: clamp(34px, 7vw, 56px); }
      .author-bio { grid-template-columns: 1fr; text-align: left; }
      .author-bio-avatar { width: 60px; height: 60px; font-size: 24px; }
    }
    @media (max-width: 880px) {
      .header-search { display: none; }
      .header-inner { grid-template-columns: 1fr auto; }
      .article-hero { padding: var(--s-6) var(--gutter) var(--s-7); }
      .article-hero-image { margin-top: calc(-1 * var(--s-5)); padding-bottom: var(--s-5); }
      .article-hero-image .img-wrap { aspect-ratio: 16 / 10; }
      .article-meta-row { gap: var(--s-3); }
      .meta-divider { display: none; }
      .meta-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
      .article-prose { font-size: 17px; }
      .article-prose .lead { font-size: 19px; }
      .article-prose .lead::first-letter { font-size: 60px; }
      .fact-grid { grid-template-columns: 1fr; }
      .fact-row:nth-child(even) { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--line); }
      .fact-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
      .fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
      .related-grid { grid-template-columns: 1fr; }
      .footer-cols { grid-template-columns: 1fr; }
      .site-footer { padding: var(--s-7) var(--gutter) var(--s-4); }
      .related { padding: var(--s-7) var(--gutter) 0; }
      .newsletter-splash { padding: var(--s-7) var(--gutter); }
      .author-callout { grid-template-columns: 1fr; }
      .cost-table { font-size: 13px; }
      .cost-table thead th { padding: 8px 10px; }
      .cost-table td { padding: 12px 10px; }
    }
    @media (max-width: 540px) {
      .footer-base { flex-direction: column; align-items: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }


/* ==========================================================================
   [6] WORDPRESS CORE INTEGRATION
   ========================================================================== */

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  background: var(--petrol);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}

/* Screen-reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--bg-warm);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: 1.3;
  padding: 12px 18px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* Alignments (Gutenberg) */
.alignleft  { float: left;  margin: 0 var(--s-4) var(--s-3) 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 var(--s-3) var(--s-4); max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: var(--container); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Captions */
.wp-caption {
  margin-bottom: var(--s-4);
  max-width: 100%;
}
.wp-caption img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption-text,
.wp-block-image figcaption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 8px;
}

/* Comments */
.comments-area {
  max-width: 720px;
  margin: var(--s-7) auto;
  padding: 0 var(--gutter);
}
.comments-title {
  font-family: var(--ff-sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.comment-list .children { list-style: none; padding-left: var(--s-5); margin-top: var(--s-3); }
.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.comment-author .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.comment-meta { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-muted); margin-bottom: 12px; }
.comment-content { color: var(--ink-body); line-height: 1.65; }
.comment-content p { margin: 0 0 var(--s-3); }
.reply { margin-top: 8px; }
.comment-reply-link {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--coral);
  text-transform: uppercase;
}
.comment-reply-link:hover { color: var(--coral-deep); }

.comment-form { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.comment-form label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: 0;
  border-color: var(--coral);
  background: #fff;
}
.comment-form .submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--coral);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.comment-form .submit:hover { background: var(--coral-deep); transform: translateY(-1px); }

/* Search form */
.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.search-form input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--ink);
}
.search-form button {
  background: var(--coral);
  color: #fff;
  border: 0;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* WordPress Galleries */
.gallery {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img { border-radius: var(--radius-sm); }

/* WordPress block defaults */
.wp-block-image img { border-radius: var(--radius-sm); }
.wp-block-quote {
  border-left: 3px solid var(--coral);
  padding-left: var(--s-4);
  font-style: italic;
  color: var(--ink-body);
  margin: var(--s-5) 0;
}
.wp-block-code, .wp-block-preformatted {
  background: var(--petrol);
  color: var(--bg-warm);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  font-family: var(--ff-mono);
  font-size: 13px;
  overflow-x: auto;
}

/* Pagination (numbered) for posts list */
.posts-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: var(--s-6) 0;
}
.posts-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.posts-pagination .page-numbers:hover { border-color: var(--coral); }
.posts-pagination .page-numbers.current { background: var(--petrol); color: #fff; border-color: var(--petrol); }

/* Print */
@media print {
  .site-header, .site-footer, .reading-progress, .margin-notes, .article-aside, .newsletter-splash, .related, .mega-drawer, .mega-overlay { display: none !important; }
  .article-prose, .article-hero-inner { max-width: 100%; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   [BD-FIX] Single-Post Comments — width-constrained wrapper
   ========================================================================== */
.bd-comments-wrap {
  max-width: 720px;
  margin: var(--s-7) auto var(--s-9);
  padding: 0 var(--gutter);
}
.bd-comments-wrap .comments-area {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.bd-comments-wrap .comment-form-author,
.bd-comments-wrap .comment-form-email,
.bd-comments-wrap .comment-form-url {
  margin-bottom: var(--s-3);
}
.bd-comments-wrap .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
}
.bd-comments-wrap .required {
  color: var(--coral);
  font-weight: 700;
}
.bd-comments-wrap .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--coral);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.bd-comments-wrap .form-submit input[type="submit"]:hover {
  background: var(--coral-deep);
  transform: translateY(-1px);
}

/* ==========================================================================
   [BD-FIX] Mobile: Article-Layout 3-col grid → single column
   ========================================================================== */
@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: 1fr !important;
    max-width: 760px;
  }
  .margin-notes,
  .article-aside {
    position: static !important;
    max-height: none !important;
  }
  /* Auf Mobile zeigen wir TOC/Aside nur dezent ein- */
  .margin-notes { order: 2; }
  .article-prose { order: 1; }
  .article-aside { order: 3; }
}

/* ==========================================================================
   [BD-FIX] Hero / Article-Hero / Card images — fill container completely
   ========================================================================== */
.hero-image img,
.hero-image svg,
.article-hero-image .img-wrap img,
.article-hero-image .img-wrap svg,
.article-image img,
.archive-card-image img,
.related-card-image img,
.popular-img img,
.mega-latest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* article-hero-image needs explicit height context */
.article-hero-image .img-wrap {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--petrol);
}