/* v2026-06-12.20260612_153732 - cache bust for related-tools aside styling */
/*
Theme Name: Edljx Premium WP Theme
Theme URI: https://tki.digital
Author: tki.digital
Author URI: https://tki.digital
Description: Version 6.7 of the Edljx theme. Footer logo fix: was using the broken edljx-logo.png (essentially empty — alpha values of 1-6 with rgb(0,0,0)) which made it render as a gray box when filtered. Now uses the proper brand.svg (256x256 SVG with purple square + orange 'e' — transparent background, no filter needed). Also softened the gradient fade from body to footer: was 120px tall (too strong), now 40px (much more subtle). Carries forward v6.6 footer structure (3-col grid, square social cards, footer-bottom space-between) and v6.5 reading UX (byline, share buttons, helpful widget, related articles, back-to-top).
Version: 6.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, block-templates, wide-blocks
Text Domain: edljx_premium_wp
*/

/* =========================================================================
   1. RESET + DESIGN TOKENS
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

:root {
    /* Brand palette */
    /* v6.11: Color tune - slightly brighter purple + amber */
    --brand-deep:     #6b2180;
    --brand-deep-2:   #3d0a4a;
    --brand-accent:   #ff8c42;
    --brand-accent-2: #ffb84d;
    --brand-soft:     #faf7f4;
    --brand-ink:      #1a1a1a;
    --brand-muted:    #5c5c66;
    --brand-rule:     #e6e1dc;
    --brand-surface:  #ffffff;
    /* v6.11: brand-link follows brand-deep/accent */
    --brand-link:     #6b2180;
    --brand-link-hover: #ff8c42;

    /* Category dot palette (referenced from PHP via --cat-dot) */
    --cat-purple:   #6b2180;
    --cat-amber:    #e8792b;
    --cat-red:      #c0392b;
    --cat-green:    #27ae60;
    --cat-blue:     #2980b9;
    --cat-violet:   #8e44ad;
    --cat-teal:     #16a085;

    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --space-1:  0.25rem; --space-2:  0.5rem; --space-3:  0.75rem;
    --space-4:  1rem;    --space-5:  1.5rem; --space-6:  2rem;
    --space-7:  3rem;    --space-8:  4rem;    --space-9:  6rem;
    /* Layout */
    /* v6.11: container tightened to 1200px (Stripe/Vercel era) */
    --container-max:  1200px;
    --content-max:    80ch;
    --wide-content:   1080px;
    --article-width:  1000px;
    --content-padding: var(--space-5);

    --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;

    /* v6.11: Reduced shadows - prefer borders */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Border for cards/elevated surfaces */
    --border: 1px solid var(--brand-rule);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 200ms;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--brand-ink);
    background: var(--brand-soft);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background-color: var(--brand-rule); }
button, input, select, textarea { font: inherit; color: inherit; }
a {
    color: var(--brand-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--duration) var(--ease-out), text-decoration-color var(--duration) var(--ease-out);
}
a:hover { color: var(--brand-link-hover); text-decoration-color: currentColor; }
img { border-style: none; }
ul, ol { padding-left: 1.25em; line-height: 1.7; }
li { margin-block: 0.35em; }
li > ul, li > ol { margin-block: 0.35em; }
hr {
    border: 0;
    border-top: 1px solid var(--brand-rule);
    margin-block: var(--space-7);
}
::selection { background: var(--brand-deep); color: #fff; }
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* =========================================================================
   2. STRUCTURAL PRIMITIVES
   ========================================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--content-padding);
}

.site-wrapper { flex: 1; display: flex; flex-direction: column; }
main { flex: 1; }

/* =========================================================================
   3. HEADER (unchanged from v6.1)
   ========================================================================= */

.site-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--brand-rule);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 60px;
    padding-block: var(--space-3);
}

.site-header__brand {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-deep);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    transition: color var(--duration) var(--ease-out);
    /* v6.10: Force lowercase, no drop cap effect on first letter */
    text-transform: lowercase;
}
.site-header__brand:hover { color: var(--brand-accent); }

.site-header__nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.site-header__nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap;
}
.site-header__nav > ul > li { position: relative; }
.site-header__nav a {
    color: var(--brand-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.site-header__nav a:hover { color: var(--brand-accent); background: var(--brand-soft); }
.site-header__nav .current-menu-item > a, .site-header__nav .current_page_item > a { color: var(--brand-accent); }

.site-header__nav .menu-item-has-children > a::after {
    content: ''; display: inline-block; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; margin-left: 0.4em;
    transition: transform var(--duration) var(--ease-out);
}
.site-header__nav .menu-item-has-children:hover > a::after,
.site-header__nav .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

.sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 220px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 70vh;
    overflow-y: auto;
}
.sub-menu li { margin: 0; padding: 0; }
.sub-menu a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: 0.875rem;
    width: 100%;
    display: block;
}
.menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
    line-height: 1.2;
    white-space: nowrap;
}
.btn--sm { padding: var(--space-1) var(--space-3); font-size: 0.875rem; }
.btn--primary { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.btn--primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-rule); }
.btn--ghost:hover { background: var(--brand-soft); border-color: var(--brand-muted); }

.site-header__nav-toggle { display: none; background: none; border: 0; padding: var(--space-2); cursor: pointer; color: var(--brand-ink); border-radius: var(--radius); }
.site-header__nav-toggle:hover { background: var(--brand-soft); }
.site-header__nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 880px) {
    .site-header__nav { display: none; }
    .site-header__nav-toggle { display: inline-flex; }
    .site-header__inner { gap: var(--space-3); }
}

.site-header.is-open .site-header__nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--brand-surface); border-bottom: 1px solid var(--brand-rule);
    padding: var(--space-3) var(--content-padding);
    box-shadow: var(--shadow);
}
.site-header.is-open .site-header__nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
.site-header.is-open .site-header__nav > ul > li { width: 100%; border-bottom: 1px solid var(--brand-rule); }
.site-header.is-open .site-header__nav a { display: block; width: 100%; padding: var(--space-3) 0; border-radius: 0; }
.site-header.is-open .sub-menu {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    border: 0; box-shadow: none; background: var(--brand-soft);
    margin-top: var(--space-2); padding-left: var(--space-4);
    max-height: none; display: none;
}
.site-header.is-open .menu-item-has-children.is-open > .sub-menu { display: flex; }

/* =========================================================================
   4. INTRO (v6.4)
   Page id=9 content under the hero, wider to match the cards. 1000-char
   lede with a "Read more" toggle.
   ========================================================================= */

.intro {
    /* v2026-06-12: more visual style - gradient background, more padding, decorative element */
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand-surface) 60%);
    border-bottom: 1px solid var(--brand-rule);
    padding-block: var(--space-8) var(--space-9);
    position: relative;
    overflow: hidden;
}
.intro::before {
    /* Decorative accent stripe on the left */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
}
.intro__inner {
    /* v2026-06-12: max-width + indent for the left stripe */
    max-width: var(--wide-content);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    position: relative;
}
.intro__inner {
    /* Matches the card grid width: container max (1400px) - padding */
    max-width: var(--wide-content);
    margin-inline: auto;
    padding-inline: var(--content-padding);
}
.intro__header {
    /* v2026-06-12: flex column so the eyebrow and title stack vertically with clear space */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent);
    /* v2026-06-12: parent is flex column with gap, so no extra margin needed */
    margin: 0;
    padding: 0;
}
.intro__eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 1px;
}
.intro__title {
    /* v2026-06-12: bigger title, tighter letter-spacing for impact */
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--brand-ink);
    position: relative;
    display: inline-block;
    margin: 0;
}
.intro__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
    margin: var(--space-3) 0 0;
    border-radius: 2px;
}
.intro__content {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--brand-ink);
}
.intro__lede {
    margin: 0;
    font-size: 1.125rem;  /* v2026-06-12: bigger body text */
    line-height: 1.65;
}
.intro__more {
    margin-top: var(--space-4);
}
.intro__more .entry-content { font-size: 1rem; line-height: 1.65; }
.intro__more .entry-content h2 { font-size: 1.5rem; margin-top: var(--space-5); padding-top: var(--space-4); }
.intro__more .entry-content h2::before { display: none; }
.intro__more .entry-content h3 { font-size: 1.25rem; }
.intro__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    color: var(--brand-deep);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.intro__toggle:hover {
    background: var(--brand-soft);
    border-color: var(--brand-deep);
}
.intro__toggle svg { transition: transform var(--duration) var(--ease-out); }
.intro__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* =========================================================================
   5. HERO (unchanged from v6.1)
   ========================================================================= */

.hero {
    background:
        radial-gradient(circle at 20% 50%, rgba(232, 121, 43, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(247, 165, 39, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, #6b2180 0%, #3d0a4a 50%, #1a0a1f 100%);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: heroGradient 18s ease-in-out infinite alternate;
    color: #fff;
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
@keyframes heroGradient {
    0%   { background-position: 0% 0%, 100% 0%, 0% 0%; }
    100% { background-position: 100% 100%, 0% 100%, 0% 0%; }
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    z-index: -1; pointer-events: none;
}
.hero__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.hero__eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-3);
}
.hero__title {
    font-family: var(--font-sans);
    /* v6.11: Tighter hierarchy - hero 4.5rem -> 3.5rem */
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: var(--space-4);
}
.hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}
.hero__search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    max-width: 480px;
    margin-inline: auto;
    transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.hero__search:focus-within { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
.hero__search svg { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
.hero__search input {
    flex: 1; border: 0; background: transparent; outline: 0;
    color: #fff; font-size: 0.9375rem; min-width: 0;
}
.hero__search input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* =========================================================================
   5. SECTION HEADERS (new in v6.2)
   Used between featured/latest/desk sections
   ========================================================================= */

.section-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-block: var(--space-5);
}
.section-header__title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--brand-ink);
    margin-bottom: var(--space-2);
    position: relative;
    display: inline-block;
}
.section-header__title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
    margin: var(--space-3) auto 0;
    border-radius: 2px;
}
.section-header__subtitle {
    font-size: 0.9375rem;
    color: var(--brand-muted);
}
.section-header__subtitle a {
    color: var(--brand-muted);
    text-decoration: none;
    font-weight: 500;
}
.section-header__subtitle a:hover { color: var(--brand-link-hover); }

/* =========================================================================
   6. FEATURED — Asymmetric (new in v6.2)
   1 large featured card on the left, 2 smaller stacked on the right
   ========================================================================= */

.featured { padding-block: var(--space-7) var(--space-5); }

.featured--asymmetric .featured__grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 880px) {
    .featured--asymmetric .featured__grid-asymmetric {
        grid-template-columns: 3fr 2fr;
        gap: var(--space-6);
        align-items: start;
    }
    .featured__small-stack {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: var(--space-5);
    }
}

.featured-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--brand-ink);
    display: flex;
    flex-direction: column;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
    position: relative;
}
.featured-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--brand-ink);
}

.featured-card--large .featured-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--brand-soft);
}
.featured-card--small .featured-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-soft);
}
.featured-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-out);
}
.featured-card:hover .featured-card__image img { transform: scale(1.05); }

/* Placeholder when no featured image is set */
.featured-card__image--placeholder,
.desk-card__image--placeholder {
    position: relative;
    overflow: hidden;
}
.featured-card__image--placeholder::before,
.desk-card__image--placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6b2180 0%, #e8792b 100%);
    opacity: 0.85;
}
.featured-card__image--placeholder[data-color="amber"]::before,
.desk-card__image--placeholder[data-color="amber"]::before {
    background: linear-gradient(135deg, #e8792b 0%, #f7a527 100%);
}
.featured-card__image--placeholder[data-color="purple"]::before,
.desk-card__image--placeholder[data-color="purple"]::before {
    background: linear-gradient(135deg, #6b2180 0%, #3d0a4a 100%);
}
.featured-card__image--placeholder::after,
.desk-card__image--placeholder::after {
    content: 'edljx';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.featured-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.featured-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-muted);
    width: max-content;
}
.featured-card__cat-dot,
.latest-card__cat-dot,
.single__category-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cat-dot, var(--brand-accent));
    display: inline-block;
    flex-shrink: 0;
}

.featured-card--large .featured-card__title {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    margin-top: var(--space-1);
}
.featured-card--small .featured-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
}

.featured-card__excerpt {
    font-size: 0.9375rem;
    color: var(--brand-muted);
    line-height: 1.55;
    flex: 1;
}
.featured-card--small .featured-card__excerpt {
    font-size: 0.875rem;
    color: var(--brand-muted);
    line-height: 1.5;
    margin-top: var(--space-1);
}

.featured-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--brand-muted);
    margin-top: var(--space-3);
}
.featured-card__meta-sep { color: var(--brand-rule); }

/* =========================================================================
   7. LATEST (v6.4: wider to match cards)
   ========================================================================= */

.latest { padding-block: var(--space-5) var(--space-6); }
.latest__inner {
    /* Matches the featured/desk card width: container max minus padding */
    max-width: var(--wide-content);
    margin-inline: auto;
}

.latest__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--brand-rule);
}

.latest-card {
    display: block;
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--brand-rule);
    text-decoration: none;
    color: var(--brand-ink);
    transition: background var(--duration) var(--ease-out);
    border-radius: var(--radius);
    margin-inline: calc(var(--space-4) * -1);
}
.latest-card:hover {
    background: var(--brand-surface);
    color: var(--brand-ink);
}
.latest-card:hover .latest-card__title { color: var(--brand-link-hover); }

.latest-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    transition: color var(--duration) var(--ease-out);
}
.latest-card__excerpt {
    color: var(--brand-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-3);
}
.latest-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--brand-muted);
}
.latest-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    color: var(--brand-muted);
}
.latest-card__meta-sep { color: var(--brand-rule); }

/* =========================================================================
   8. DESK (new in v6.2)
   "From the X Desk" per-category sections
   ========================================================================= */

.desk {
    /* v2026-06-12: more breathing room + a sutil warm background tint
     * to separate the desks visually from the intro above */
    padding-block: var(--space-7) var(--space-7);
    background: linear-gradient(180deg, var(--brand-surface) 0%, var(--brand-soft) 100%);
    border-top: 1px solid var(--brand-rule);
}
.desk__inner {
    max-width: var(--wide-content);
    margin-inline: auto;
}
.desk__header {
    /* v2026-06-12: more space below the header before cards start */
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--brand-rule);
}
.desk__title {
    /* v2026-06-12: tighter hierarchy - bigger title with a brand gradient underline */
    font-size: clamp(1.625rem, 2.75vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    margin: 0;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}
.desk__title {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.desk__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--brand-accent);
    border-radius: 1px;
    flex-shrink: 0;
}
.desk__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
    margin: var(--space-3) 0 0;
    border-radius: 2px;
}
.desk__editorial {
    font-size: 1rem;
    color: var(--brand-muted);
    margin: var(--space-2) 0 0;
    font-style: italic;
    max-width: 60ch;
}

.desk__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.desk-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--brand-ink);
    display: flex;
    flex-direction: column;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.desk-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: var(--brand-ink);
}
.desk-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-soft);
}
.desk-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease-out);
}
.desk-card:hover .desk-card__image img { transform: scale(1.04); }
.desk-card__body {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.desk-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-ink);
}
.desk-card__excerpt {
    color: var(--brand-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    flex: 1;
}
.desk-card__meta {
    font-size: 0.75rem;
    color: var(--brand-muted);
    margin-top: var(--space-2);
}

/* =========================================================================
   9. ARCHIVE LIST (kept from v6.1 for category archives)
   ========================================================================= */

.archive-list { padding-block: var(--space-5) var(--space-8); }
.archive-list__inner { max-width: var(--wide-content); margin-inline: auto; }

.archive-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--brand-rule);
}
.archive-card:last-child { border-bottom: 0; }
.archive-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}
.archive-card__title a { color: var(--brand-ink); text-decoration: none; }
.archive-card__title a:hover { color: var(--brand-link-hover); }
.archive-card__excerpt { color: var(--brand-muted); line-height: 1.6; font-size: 1rem; margin-bottom: var(--space-3); }
.archive-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: 0.8125rem; color: var(--brand-muted); }
.archive-card__meta time { font-variant-numeric: tabular-nums; }
.archive-card__meta-sep { color: var(--brand-rule); }

@media (min-width: 700px) {
    .archive-card {
        grid-template-columns: 240px 1fr;
        gap: var(--space-6);
        padding: var(--space-6) 0;
    }
    .archive-card__image {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--brand-soft);
    }
    .archive-card__image img { width: 100%; height: 100%; object-fit: cover; }
}

.archive-header {
    background: linear-gradient(180deg, #faf7f4 0%, #f7f3f0 100%);
    border-bottom: 1px solid var(--brand-rule);
    padding-block: var(--space-7);
    text-align: center;
}
.archive-header__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--brand-ink);
    margin-bottom: var(--space-3);
}
.archive-header__description { max-width: 60ch; margin-inline: auto; color: var(--brand-muted); line-height: 1.6; }
.archive-header__count {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--brand-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* =========================================================================
   10. SINGLE POST
   v6.2 additions: drop cap on first paragraph, larger blockquotes as
   magazine pull quotes, opt-in TOC support
   ========================================================================= */

.single { padding-block: var(--space-7) var(--space-8); }
.single__inner {
    max-width: var(--article-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
}
.single__header { margin-bottom: var(--space-6); }

.single__category {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-muted);
    text-decoration: none;
    margin-bottom: var(--space-3);
}
.single__category:hover { color: var(--brand-deep); }

.single__title {
    /* v6.11: Tighter hierarchy - article 3.25rem -> 2.5rem */
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--brand-ink);
    margin-bottom: var(--space-4);
}

.single__subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.4;
    color: var(--brand-muted);
    font-weight: 400;
    margin-bottom: var(--space-5);
    max-width: 56ch;
}

.single__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--brand-muted);
    flex-wrap: wrap;
}
.single__meta-sep { color: var(--brand-rule); }
.single__author a { color: var(--brand-muted); text-decoration: none; font-weight: 500; }
.single__author a:hover { color: var(--brand-link-hover); }

.single__featured {
    margin-block: var(--space-6) var(--space-7);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--brand-soft);
}
.single__featured img { width: 100%; height: auto; display: block; }
.single__featured-caption {
    font-size: 0.875rem;
    color: var(--brand-muted);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    font-style: italic;
}

/* Article body */
.entry-content {
    font-size: 1.1875rem;
    line-height: 1.75;
    color: var(--brand-ink);
}
.entry-content > * + * { margin-top: 1.5em; }

/* v6.10: Drop cap disabled (per user request) - the brand mark is now the visual anchor, not the first letter. */
/* If you want to re-enable, uncomment the block below */
/*
.entry-content > p:first-of-type::first-letter,
.entry-content > *:not(h2):not(h3) + p/* v6.10: standalone ::first-letter disabled (per user request) */
/* ::first-letter {
    font-family: var(--font-serif);
    font-size: 3.5em;
    line-height: 0.9;
    font-weight: 700;
    float: left;
    margin: 0.05em 0.02em -0.15em -0.05em;
    color: var(--brand-deep);
    text-transform: uppercase;
    shape-outside: margin-box;
    padding-right: 0;
} */
*/

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
    margin-top: 2em;
    margin-bottom: 0.5em;
    scroll-margin-top: 80px;
}
.entry-content h2 {
    font-size: 1.875rem;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    position: relative;
}
.entry-content h2::before {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-deep), var(--brand-accent));
    margin-bottom: var(--space-3);
    border-radius: 2px;
}
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.25rem; }
.entry-content h5 { font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-muted); }

.entry-content p { line-height: 1.75; }
.entry-content a {
    color: var(--brand-link);
    text-decoration: underline;
    text-decoration-color: rgba(74, 21, 75, 0.25);
    text-underline-offset: 3px;
}
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content strong { font-weight: 700; color: var(--brand-ink); }
.entry-content em { font-style: italic; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content li { margin-block: 0.5em; }
.entry-content li::marker { color: var(--brand-accent); }

/* MAGAZINE: pull quotes */
.entry-content blockquote {
    border: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(74, 21, 75, 0.03) 100%);
    padding: var(--space-6) var(--space-5);
    margin-block: var(--space-7);
    font-style: italic;
    color: var(--brand-ink);
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    position: relative;
    border-top: 1px solid var(--brand-rule);
    border-bottom: 1px solid var(--brand-rule);
}
.entry-content blockquote::before {
    content: '“';
    display: block;
    font-family: var(--font-serif);
    font-size: 4rem;
    line-height: 0.5;
    color: var(--brand-accent);
    margin-bottom: var(--space-3);
    font-style: normal;
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote p + p { margin-top: var(--space-3); }
.entry-content blockquote cite {
    display: block;
    margin-top: var(--space-4);
    font-size: 0.875rem;
    font-style: normal;
    color: var(--brand-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.entry-content blockquote cite::before { content: '— '; }

.entry-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: var(--space-5);
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.6;
    tab-size: 2;
}
.entry-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.entry-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--brand-soft);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    color: var(--brand-deep);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin-block: var(--space-5);
}
.entry-content th, .entry-content td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--brand-rule);
}
.entry-content th { font-weight: 600; background: var(--brand-soft); }

.entry-content img, .entry-content iframe {
    border-radius: var(--radius);
    margin-block: var(--space-6);
}
.entry-content iframe { width: 100%; aspect-ratio: 16 / 9; }

.entry-content figure.edljx-image-placeholder {
    border: 2px dashed var(--brand-rule);
    background: var(--brand-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5);
    margin-block: var(--space-6);
    text-align: center;
    color: var(--brand-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.entry-content figure.edljx-image-placeholder > div:first-child { font-size: 1.75rem; opacity: 0.6; }
.entry-content figure.edljx-image-placeholder strong {
    font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--brand-ink); font-weight: 600;
}
.entry-content figure.edljx-image-placeholder em {
    color: var(--brand-accent); font-size: 0.9375rem;
    font-style: normal; max-width: 50ch;
}

.entry-content .edljx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--brand-rule);
}
.entry-content .edljx-tags-label { font-size: 0.875rem; color: var(--brand-muted); margin-right: var(--space-2); }
.edljx-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--brand-muted);
    text-decoration: none;
    transition: all var(--duration) var(--ease-out);
}
.edljx-tag:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }

.edljx-bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--brand-accent);
    border: 0;
    border-radius: 999px;
    color: #1a0f15;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(232, 121, 43, 0.25);
    transition: all var(--duration) var(--ease-out);
    flex-shrink: 0;
    position: relative;
    margin-left: var(--space-5);
}
.edljx-bookmark-btn::before {
    content: "";
    position: absolute;
    left: calc(var(--space-5) * -1 + 4px);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--brand-rule);
    opacity: 0.6;
}
.edljx-bookmark-btn:hover {
    background: var(--brand-link-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 121, 43, 0.4);
}
.edljx-bookmark-btn:active {
    transform: translateY(0);
}
/* hover handled in main .edljx-bookmark-btn:hover above */
.edljx-bookmark-btn.is-saved {
    background: var(--brand-deep);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(74, 21, 75, 0.4);
}
.edljx-bookmark-btn.is-saved:hover {
    background: #5d1a5e;
    box-shadow: 0 4px 12px rgba(74, 21, 75, 0.5);
}
.edljx-bookmark-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.single__author-bio {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-7);
    padding: var(--space-5);
    background: var(--brand-soft);
    border-radius: var(--radius-lg);
    flex-wrap: nowrap;
}

/* v6.10: Author bio on mobile - stack avatar on top */
@media (max-width: 600px) {
    .single__author-bio {
        flex-direction: column;
        align-items: flex-start;
    }
    .single__author-avatar {
        margin-bottom: var(--space-3);
    }
}

.single__author-avatar { flex-shrink: 0; }
.single__author-avatar img { width: 80px; height: 80px; border-radius: 50%; display: block; }
.single__author-name { font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--space-1); color: var(--brand-ink); }
.single__author-desc { font-size: 0.875rem; line-height: 1.55; color: var(--brand-muted); margin-bottom: var(--space-2); flex: 1; min-width: 0; }
.single__author-link { font-size: 0.8125rem; color: var(--brand-link); text-decoration: none; font-weight: 500; }
.single__author-link:hover { text-decoration: underline; }

.related { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--brand-rule); }
.related__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-5); color: var(--brand-ink); }
.related__list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.related__list li {
    list-style: none;
    padding: 0; margin: 0;
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.related__list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.related__list a {
    display: block;
    color: var(--brand-ink);
    text-decoration: none;
}
.related__list a:hover { color: var(--brand-ink); }

/* v6.7.1: Card-style related articles (uses get_crp_posts + custom render) */
.related__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.related__thumb--placeholder {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
    width: 100%;
    aspect-ratio: 16 / 9;
}
.related__content {
    padding: var(--space-3) var(--space-4) var(--space-4);
}
.related__heading {
    margin: 0 0 var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-ink);
}
.related__excerpt {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--brand-muted);
}

/* =========================================================================
   11. READING PROGRESS BAR (new in v6.2)
   ========================================================================= */

/* v6.11: Bumped to 4px and brighter shadow for visibility */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;  /* v2026-06-12: thinner (was 4px) */
    z-index: 9999;
    pointer-events: none;
    background: transparent;  /* no visible track - just the bar */
}
.reading-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
    transition: width 60ms linear;
    /* Subtle glow under the bar */
    box-shadow: 0 0 4px rgba(255, 140, 66, 0.4);
}

/* =========================================================================
   12. TABLE OF CONTENTS (new in v6.2, opt-in)
   ========================================================================= */

.toc {
    position: fixed;
    top: 120px;
    right: var(--space-5);
    width: 240px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow);
    z-index: 40;
    font-size: 0.875rem;
}
.toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: var(--space-1) 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-muted);
    cursor: pointer;
}
.toc__title { font-size: 0.75rem; }
.toc__toggle svg { transition: transform var(--duration) var(--ease-out); }
.toc.is-collapsed .toc__toggle svg { transform: rotate(-90deg); }
.toc__list {
    list-style: none;
    padding: var(--space-2) 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 300ms var(--ease-out);
}
.toc.is-collapsed .toc__list { max-height: 0; padding-top: 0; }
.toc__item { margin: 0; padding: 0; }
.toc__link {
    display: block;
    padding: var(--space-1) var(--space-2);
    color: var(--brand-muted);
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.toc__item--lvl-3 .toc__link { padding-left: var(--space-5); font-size: 0.8125rem; }
.toc__link:hover { color: var(--brand-ink); }
.toc__link.is-current {
    color: var(--brand-deep);
    font-weight: 600;
    border-left-color: var(--brand-accent);
    background: rgba(232, 121, 43, 0.05);
}
@media (max-width: 1199px) {
    .toc { display: none; }
}

/* =========================================================================
   13. PAGE TEMPLATE (About, Contact)
   ========================================================================= */

.page { padding-block: var(--space-7) var(--space-8); }
.page__hero-image {
    margin-block: 0 var(--space-6);
    aspect-ratio: 21 / 9;
    max-height: 360px;
    overflow: hidden;
    background: var(--brand-soft);
}
.page__hero-image img { width: 100%; height: 100%; object-fit: cover; }
.page__container { max-width: var(--wide-content); margin-inline: auto; padding-inline: var(--content-padding); }
.page__header { text-align: center; margin-bottom: var(--space-6); }
.page__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--brand-ink);
}
.page .entry-content { font-size: 1.1875rem; line-height: 1.75; }

/* =========================================================================
   14. COMMENTS
   ========================================================================= */

.comments-area { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--brand-rule); }
.comments-area > h2, .comments-area > h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-5); color: var(--brand-ink); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.comment-body { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--brand-surface); border: 1px solid var(--brand-rule); border-radius: var(--radius); }
.comment-body .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.comment-meta { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 0.875rem; }
.comment-author { font-weight: 600; color: var(--brand-ink); }
.comment-metadata { color: var(--brand-muted); font-size: 0.8125rem; }
.comment-content { color: var(--brand-ink); line-height: 1.6; font-size: 0.9375rem; }
.comment-content a { color: var(--brand-link); }
.comment-content p { margin: 0; }
.comment-content p + p { margin-top: var(--space-2); }
.reply { margin-top: var(--space-2); font-size: 0.8125rem; }
.reply a { color: var(--brand-muted); text-decoration: none; }
.reply a:hover { color: var(--brand-link-hover); }
.children { list-style: none; margin-top: var(--space-4); padding-left: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }

.comment-respond { background: var(--brand-soft); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); }
.comment-respond .comment-reply-title { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--space-4); color: var(--brand-ink); }
.comment-respond .logged-in-as, .comment-respond .must-log-in { font-size: 0.875rem; color: var(--brand-muted); margin-bottom: var(--space-3); }
.comment-respond label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--brand-ink); margin-bottom: var(--space-1); }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea {
    width: 100%; padding: var(--space-3); border: 1px solid var(--brand-rule); border-radius: var(--radius);
    background: var(--brand-surface); font-size: 0.9375rem; line-height: 1.5; color: var(--brand-ink);
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
    margin-bottom: var(--space-3);
}
.comment-respond input:focus, .comment-respond textarea:focus {
    outline: 0; border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(74, 21, 75, 0.1);
}
.comment-respond textarea { min-height: 120px; resize: vertical; }
.comment-respond .form-submit { margin-top: var(--space-3); }
.comment-respond .submit {
    background: var(--brand-deep); color: #fff; border: 0; border-radius: var(--radius);
    padding: var(--space-3) var(--space-5); font-weight: 500; font-size: 0.9375rem;
    cursor: pointer; transition: background var(--duration) var(--ease-out);
}
.comment-respond .submit:hover { background: var(--brand-accent); }
.comments-closed { padding: var(--space-3) var(--space-4); background: var(--brand-soft); border-radius: var(--radius); text-align: center; color: var(--brand-muted); font-size: 0.9375rem; }

/* =========================================================================
   15. PAGINATION
   ========================================================================= */

.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); flex-wrap: wrap; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 var(--space-3);
    border-radius: var(--radius); border: 1px solid var(--brand-rule);
    text-decoration: none; color: var(--brand-ink);
    font-size: 0.875rem; background: var(--brand-surface);
    transition: all var(--duration) var(--ease-out);
}
.pagination a:hover { border-color: var(--brand-deep); color: var(--brand-deep); background: var(--brand-soft); }
.pagination .current { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }

/* =========================================================================
   16. SIDEBARS
   ========================================================================= */

.with-sidebar { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; } }
.widget-area { display: flex; flex-direction: column; gap: var(--space-6); }
.widget { background: var(--brand-surface); border: 1px solid var(--brand-rule); border-radius: var(--radius-lg); padding: var(--space-5); }
.widget-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-muted); margin-bottom: var(--space-3); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: var(--space-2) 0; border-bottom: 1px solid var(--brand-rule); font-size: 0.9375rem; }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--brand-ink); text-decoration: none; }
.widget a:hover { color: var(--brand-link-hover); }

/* =========================================================================
   17. FOOTER (v6.6 — matches edljx static site exactly)
   3-column grid: logo+tagline | quick links | social cards (square)
   Footer-bottom: copyright on left, motto on right (space-between)
   TKI.DIGITAL attribution centered at the very bottom
   Gradient fade from body to footer at the top
   ========================================================================= */

.site-footer {
    background: #1a0b18;
    color: #c8c8c8;
    margin-top: var(--space-9);
    padding-block: 4rem var(--space-6);
    font-size: 0.9375rem;
    position: relative;
    z-index: 2;
    /* v6.6: match static site — golden orange hover */
    --footer-accent: #e8792b;
}

/* v6.7: Subtle gradient fade from body to footer (was too strong in v6.5/v6.6) */
.site-footer__fade {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent 0%, #1a0b18 100%);
    pointer-events: none;
}

.site-footer .container {
    max-width: var(--container-max);
}

.footer-grid {
    display: grid;
    gap: 3rem;
    /* v6.6: auto-fit responsive grid like the static site */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-col__title {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--space-3);
    font-family: var(--font-sans);
}

/* Column 1: Brand + tagline — v6.7: uses brand.svg (transparent), no filter */
.footer-col--brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-logo-link {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}
.footer-logo-link:hover { opacity: 0.85; }
.footer-logo {
    width: 7.5rem;
    height: 7.5rem;
    /* edljx-logo.png is the proper edljx logo matching the static edljx.com footer (transparent background) */
    display: block;
    background: transparent;
}
.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.9375rem;
    max-width: 32ch;
}

/* Column 2: Quick links — v6.5: 2-column grid for compact display */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-nav--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}
.footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--duration) var(--ease-out);
    display: inline-block;
}
.footer-nav a:hover { color: var(--footer-accent, #e8792b); }

/* Column 3: Social — v6.6: square 2.5rem cards like the static site */
.footer-col--social .footer-col__title { margin-bottom: var(--space-4); }
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.social-link:hover {
    background: var(--footer-accent, #e8792b);
    color: #fff;
    transform: translateY(-2px);
}
.social-link svg { width: 20px; height: 20px; }

/* Footer bottom — v6.6: matches static site (space-between) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    line-height: 1.5;
}
.footer-bottom p { margin: 0; }
.footer-bottom__copy {
    color: rgba(255, 255, 255, 0.7);
}
.footer-bottom__motto {
    color: rgba(255, 255, 255, 0.5);
}
.footer-heart {
    color: #e8792b;
    display: inline-block;
    animation: footerHeartPulse 1.8s ease-in-out infinite;
    font-style: normal;
}
@keyframes footerHeartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* TKI.DIGITAL attribution */
.footer-attribution {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
.footer-attribution__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.footer-attribution__bullet {
    color: var(--brand-accent, #e8792b);
    font-weight: bold;
}
.footer-attribution__plus {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    margin: 0 var(--space-1);
}
@media (max-width: 600px) {
    .footer-attribution { gap: var(--space-2); }
}
.footer-attribution__label {
    letter-spacing: 0.04em;
}
.footer-attribution__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    transition: opacity var(--duration) var(--ease-out);
}
.footer-attribution__link:hover { opacity: 0.8; color: var(--footer-accent, #e8792b); }
.footer-attribution__logo {
    height: 22px;
    width: auto;
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    opacity: 0.9;
    vertical-align: middle;
    /* Invert logo colors to white for visibility on dark footer */
    filter: brightness(0) invert(1);
}
/* Make TKI logo slightly smaller to match aBetter.Host visual weight */
.footer-attribution__logo[alt="TKI.DIGITAL"] {
    height: 18px;
}
.footer-attribution__link {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1;
}
.footer-attribution__link:hover .footer-attribution__logo {
    opacity: 1;
    transform: scale(1.05);
    transition: all var(--duration) var(--ease-out);
}

/* =========================================================================
   18. 404
   ========================================================================= */

.notfound { text-align: center; padding-block: var(--space-9) var(--space-8); max-width: 56ch; margin-inline: auto; padding-inline: var(--content-padding); }
.notfound__mark {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #6b2180 0%, #e8792b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.05em;
    margin-bottom: var(--space-4);
}

/* v2026-06-12: brighter 404 mark gradient in dark mode for legibility */
[data-theme="dark"] .notfound__mark {
    background: linear-gradient(135deg, #d29bd6 0%, #ffb27a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.notfound__title { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-3); color: var(--brand-ink); }
.notfound__text { color: var(--brand-muted); line-height: 1.6; margin-bottom: var(--space-6); }
.notfound__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); }
.notfound__search { display: flex; gap: var(--space-2); width: 100%; max-width: 400px; }
.notfound__search input {
    flex: 1; padding: var(--space-3); border: 1px solid var(--brand-rule); border-radius: var(--radius);
    font-size: 0.9375rem; background: var(--brand-surface);
}
.notfound__search input:focus { outline: 0; border-color: var(--brand-deep); }
.notfound__recent { text-align: left; background: var(--brand-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.notfound__recent-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-muted); margin-bottom: var(--space-3); }
.notfound__recent ul { list-style: none; padding: 0; margin: 0; }
.notfound__recent li {
    padding: var(--space-2) 0; border-bottom: 1px solid var(--brand-rule);
    display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
    font-size: 0.9375rem;
}
.notfound__recent li:last-child { border-bottom: 0; }
.notfound__recent a { color: var(--brand-ink); text-decoration: none; }
.notfound__recent a:hover { color: var(--brand-link-hover); }
.notfound__recent time { color: var(--brand-muted); font-size: 0.8125rem; flex-shrink: 0; }
@media (min-width: 640px) {
    .notfound__actions { flex-direction: row; justify-content: center; }
    .notfound__search { max-width: 480px; }
}

/* =========================================================================
   19. MOBILE
   ========================================================================= */

@media (max-width: 640px) {
    .single { padding-block: var(--space-5) var(--space-7); }
    .entry-content { font-size: 1.0625rem; line-height: 1.7; }
    .entry-content h2 { font-size: 1.625rem; }
    .entry-content h3 { font-size: 1.375rem; }
    .featured { padding-block: var(--space-5) var(--space-4); }
    .single__meta { font-size: 0.8125rem; }
    .single__author-bio { flex-direction: column; align-items: flex-start; }
    .hero { padding-block: var(--space-7) var(--space-6); }
    .hero__title { font-size: 2.25rem; }
    .latest-card__title { font-size: 1.125rem; }
    .latest-card__excerpt { font-size: 0.875rem; }
}

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

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: #6b2180; color: #fff; padding: 0.75rem 1rem; z-index: 100;
    text-decoration: none;
}
.skip-link:focus { left: 0; }


/* =========================================================================
   20. v6.5: BYLINE BLOCK (single post)
   Author avatar + name + meta line + read time + share buttons
   ========================================================================= */

.byline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--brand-rule);
    border-bottom: 1px solid var(--brand-rule);
}
.byline__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.byline__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
}
.byline__meta { display: flex; flex-direction: column; gap: 2px; }
.byline__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-ink);
}
.byline__name a { color: inherit; text-decoration: none; }
.byline__name a:hover { color: var(--brand-link-hover); }
.byline__details {
    font-size: 0.8125rem;
    color: var(--brand-muted);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
}
.byline__sep { color: var(--brand-rule); }
.byline__updated {
    color: var(--brand-accent);
    font-weight: 500;
}

/* =========================================================================
   21. v6.5: SHARE BUTTONS
   Top + bottom of single post
   ========================================================================= */

.share-buttons {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}
.share-buttons--bottom {
    display: flex;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--brand-rule);
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.share-buttons__label {
    font-size: 0.875rem;
    color: var(--brand-muted);
    margin-right: var(--space-2);
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--brand-rule);
    color: var(--brand-muted);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: background var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out);
    position: relative;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
    transform: translateY(-2px);
}
.share-btn--copy .share-btn__copied {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-ink);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
    white-space: nowrap;
    pointer-events: none;
}

/* =========================================================================
   22. v6.5: HELPFUL WIDGET
   "Was this article helpful?" with thumbs-up / thumbs-down buttons
   ========================================================================= */

.helpful {
    margin: var(--space-7) auto;
    max-width: 500px;
    text-align: center;
    padding: var(--space-5);
    background: var(--brand-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-rule);
}
.helpful__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-ink);
    margin-bottom: var(--space-3);
}
.helpful__buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}
.helpful__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: var(--space-2) var(--space-4);
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 999px;
    color: var(--brand-ink);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
}
.helpful__btn svg { width: 18px; height: 18px; }
.helpful__btn--yes:hover {
    background: #d4f5d4;
    border-color: #16a34a;
    color: #15803d;
    transform: translateY(-2px);
}
.helpful__btn--no:hover {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
    transform: translateY(-2px);
}
.helpful__thanks {
    margin-top: var(--space-3);
    color: #15803d;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* =========================================================================
   23. v6.5: RELATED ARTICLES (with thumbnails)
   Uses the Contextual Related Posts plugin
   ========================================================================= */

.related {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--brand-rule);
}
.related__list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}
.related__list li {
    list-style: none;
}
.related__list a {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--brand-ink);
    transition: transform var(--duration) var(--ease-out);
}
.related__list a:hover {
    transform: translateY(-3px);
    color: var(--brand-ink);
}
.related__list img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}
.related__list .crp_title,
.related__list .crp-content h4,
.related__list a strong,
.related__list a b {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand-ink);
}
.related__list .crp-excerpt,
.related__list .crp-content p,
.related__list .crp-content .crp-excerpt {
    color: var(--brand-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0;
}

/* =========================================================================
   24. v6.5: BACK TO TOP BUTTON
   Floating button, fixed position bottom-right
   ========================================================================= */

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-deep);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out);
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--brand-accent);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* v6.10: Scroll-down button (mirrors the back-to-top button) */
.back-to-top--down {
    bottom: 5.5rem; /* positioned above the back-to-top button */
}
.scroll-down {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-deep);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out);
}
.scroll-down.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-down:hover {
    background: var(--brand-accent);
}
.scroll-down:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}


/* =========================================================================
   25. v6.8: EDITORIAL HERO
   1 large featured + 3 "Also today" cards (replaces v6.7 gradient hero)
   ========================================================================= */

/* v6.9: Editorial hero — background uses surface variable for proper dark mode */
.hero--editorial {
    background: linear-gradient(180deg, #f7f3f0 0%, #f0e9e4 100%);
    padding-block: var(--space-7) var(--space-8);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--brand-rule);
}
[data-theme="dark"] .hero--editorial {
    background: linear-gradient(180deg, #1f1219 0%, #2a1820 100%);
}
.hero--editorial::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232, 121, 43, 0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: heroDrift 20s ease-in-out infinite alternate;
}
@keyframes heroDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100px, 50px); }
}
.hero__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--brand-rule);
}
.hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-deep);
}
.hero__rss {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    color: var(--brand-muted);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
}
.hero__rss:hover { color: var(--brand-accent); }

.hero__editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 900px) {
    .hero__editorial-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: var(--space-6);
    }
}

.hero-feature {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--brand-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.hero-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    color: var(--brand-ink);
}
.hero-feature__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-soft);
}
.hero-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--ease-out);
}
.hero-feature:hover .hero-feature__image img {
    transform: scale(1.04);
}
.hero-feature__image--placeholder {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-accent) 100%);
}
.hero-feature__body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.hero-feature__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-deep);
}
.hero-feature__cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat-dot, var(--brand-accent));
    display: inline-block;
}
.hero-feature__title {
    /* v6.11: Tighter hierarchy */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
}
.hero-feature__excerpt {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--brand-muted);
    margin: 0;
}
.hero-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: var(--space-3);
    padding: 0.6em 1.2em;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-decoration: none;
    border: 1.5px solid var(--brand-deep);
    border-radius: 999px;
    transition: all var(--duration) var(--ease-out);
    background: transparent;
}
.hero-feature__cta:hover {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 33, 128, 0.25);
}
.hero-feature__cta svg {
    margin-left: 2px;
    transition: transform var(--duration) var(--ease-out);
}
.hero-feature__cta:hover svg {
    transform: translateX(4px);
}

.hero-alsotoday {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--brand-rule);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.hero-alsotoday__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--brand-rule);
}
.hero-alsotoday__item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: var(--space-3) 0;
    text-decoration: none;
    color: var(--brand-ink);
    border-bottom: 1px solid var(--brand-rule);
    transition: padding-left var(--duration) var(--ease-out);
}
.hero-alsotoday__item:last-child { border-bottom: 0; }
.hero-alsotoday__item:hover {
    padding-left: 6px;
    color: var(--brand-ink);
}

/* v2026-06-12: Also today + Trending thumbnail support (v3: text on top for Also today reverted) */
.hero-alsotoday__item { padding: 0; }
.hero-alsotoday__item:hover { padding-left: 0; }

.hero-alsotoday__media {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius);
    transition: background var(--duration) var(--ease-out);
}
.hero-alsotoday__item:hover .hero-alsotoday__media {
    background: var(--brand-soft);
}

.hero-alsotoday__image {
    flex-shrink: 0;
    width: 120px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-soft);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.hero-alsotoday__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--ease-out);
}
.hero-alsotoday__item:hover .hero-alsotoday__image img {
    transform: scale(1.05);
}
.hero-alsotoday__image--placeholder {
    background: linear-gradient(135deg, rgba(107, 33, 128, 0.22), rgba(255, 140, 66, 0.22));
}
.hero-alsotoday__image--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.1) 50%);
}

.hero-alsotoday__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.hero-alsotoday__heading {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
}
/* Trending this week: text on top, full-width photo at the bottom */
.trending-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.trending-card__media {
    width: 100%;
    order: 1;  /* photo at the bottom */
    display: block;
}
.trending-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-soft);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.trending-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--ease-out);
}
.trending-card:hover .trending-card__image img {
    transform: scale(1.05);
}
.trending-card__image--placeholder {
    background: linear-gradient(135deg, rgba(107, 33, 128, 0.28), rgba(255, 140, 66, 0.28));
}
.trending-card__image--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.12) 50%);
}

/* Text content of trending card: padded now that image is at the bottom */
.trending-card__rank {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    z-index: 2;
}
.trending-card__body {
    padding: var(--space-4) var(--space-5);
}

[data-theme="dark"] .hero-alsotoday__image--placeholder,
[data-theme="dark"] .trending-card__image--placeholder {
    background: linear-gradient(135deg, rgba(107, 33, 128, 0.45), rgba(255, 140, 66, 0.45));
}

.hero-alsotoday__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cat-dot, var(--brand-accent));
}
.hero-alsotoday__cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cat-dot, var(--brand-accent));
    display: inline-block;
}
.hero-alsotoday__heading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-ink);
    margin: 0;
}
.hero-alsotoday__time {
    font-size: 0.75rem;
    color: var(--brand-muted);
}

/* =========================================================================
   26. v6.8: STAT STRIP
   Inline stats below the intro
   ========================================================================= */

.stat-strip {
    background: var(--brand-deep);
    color: rgba(255, 255, 255, 0.9);
    padding-block: var(--space-4);
    font-size: 0.875rem;
}
.stat-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    text-align: center;
}
.stat-strip__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
}
.stat-strip__num {
    font-weight: 800;
    font-size: 1.125rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.stat-strip__label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
.stat-strip__sep {
    color: rgba(255, 255, 255, 0.3);
}

/* =========================================================================
   27. v6.8: TRENDING THIS WEEK
   3 cards with rank numbers, comment counts (when present)
   ========================================================================= */

.trending {
    padding-block: var(--space-7);
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-rule);
}
.trending__inner {
    max-width: var(--wide-content);
    margin-inline: auto;
}
.trending__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
@media (min-width: 720px) {
    .trending__grid { grid-template-columns: repeat(3, 1fr); }
}
.trending-card {
    display: flex;
    gap: var(--space-3);
    background: #fff;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--brand-ink);
    border: 1px solid var(--brand-rule);
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
    position: relative;
}
.trending-card--rank-1 { border-top: 3px solid var(--brand-deep); }
.trending-card--rank-2 { border-top: 3px solid var(--brand-accent); }
.trending-card--rank-3 { border-top: 3px solid var(--brand-muted); }
.trending-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    color: var(--brand-ink);
}
.trending-card__rank {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-deep);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.trending-card--rank-1 .trending-card__rank { color: var(--brand-deep); }
.trending-card--rank-2 .trending-card__rank { color: var(--brand-accent); }
.trending-card--rank-3 .trending-card__rank { color: var(--brand-muted); }
.trending-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.trending-card__cat {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cat-dot, var(--brand-accent));
}
.trending-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-ink);
    margin: 0;
}
.trending-card__excerpt {
    font-size: 0.875rem;
    color: var(--brand-muted);
    line-height: 1.5;
    margin: 0;
}
.trending-card__meta {
    font-size: 0.75rem;
    color: var(--brand-muted);
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    padding-top: var(--space-2);
}
.trending-card__sep { color: var(--brand-rule); }
.trending-card__comments { color: var(--brand-accent); }

/* =========================================================================
   28. v6.8: DESK SECTIONS (editorial line per category)
   ========================================================================= */

.desk__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--brand-rule);
}
.desk__title {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    margin: 0;
    line-height: 1.2;
}
.desk__editorial {
    font-size: 0.9375rem;
    color: var(--brand-muted);
    margin: var(--space-1) 0 0;
    font-style: italic;
}
.desk__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    transition: all var(--duration) var(--ease-out);
}
.desk__view-all:hover {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
}
.desk__view-all svg {
    transition: transform var(--duration) var(--ease-out);
}
.desk__view-all:hover svg {
    transform: translateX(3px);
}

/* =========================================================================
   29. v6.8: AUTHORS STRIP
   6 author chips with avatars + post counts
   ========================================================================= */

.authors-strip {
    padding-block: var(--space-7);
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-rule);
}
.authors-strip__inner {
    max-width: var(--wide-content);
    margin-inline: auto;
}
.authors-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.author-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand-ink);
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.author-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--brand-deep);
    color: var(--brand-ink);
}
.author-chip__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
}
.author-chip__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.author-chip__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.author-chip__count {
    font-size: 0.75rem;
    color: var(--brand-muted);
}

/* =========================================================================
   30. v6.9: DARK MODE
   - Default = light (no prefers-color-scheme detection).
   - Dark mode only via [data-theme="dark"] set by the toggle button.
   - localStorage key: edljx-theme = "dark" | absent (light)
   ========================================================================= */

:root {
    --brand-soft: #f7edf6;
    --brand-surface: #f7f3f0;
    --brand-rule: #e8e0db;
    --brand-ink: #1a1a1a;
    --brand-muted: #5e5e5e;
    --brand-link-hover: #e8792b;
}

[data-theme="dark"] {
    --brand-soft: #2a1a28;
    --brand-surface: #150c14;
    --brand-rule: #3a2a36;
    --brand-ink: #f0e8e8;
    --brand-muted: #c8b8b8;       /* brighter for tag readability */
    --brand-link-hover: #f5944a;
    --brand-deep: #c98ad0;        /* brighter purple for read-more button */
    --brand-link: #d6a4e0;        /* brighter purple for tag hover */
    --brand-accent: #ffb84d;      /* brighter amber for accents in dark */
}

[data-theme="dark"] body,
[data-theme="dark"] .site-wrapper {
    background: var(--brand-surface);
}
[data-theme="dark"] .hero--editorial {
    background: linear-gradient(180deg, #1f1219 0%, #2a1820 100%);
}
[data-theme="dark"] .hero--editorial::before {
    background: radial-gradient(circle, rgba(232, 121, 43, 0.18) 0%, transparent 70%);
}
[data-theme="dark"] .hero-feature,
[data-theme="dark"] .hero-alsotoday,
[data-theme="dark"] .trending-card,
[data-theme="dark"] .author-chip {
    background: #20141c;
    border-color: var(--brand-rule);
}
[data-theme="dark"] .site-header,
[data-theme="dark"] .intro,
[data-theme="dark"] .trending,
[data-theme="dark"] .latest,
[data-theme="dark"] .featured,
[data-theme="dark"] .desk,
[data-theme="dark"] .authors-strip {
    background: var(--brand-surface);
    color: var(--brand-ink);
}
[data-theme="dark"] .hero-feature__title,
[data-theme="dark"] .hero-alsotoday__heading,
[data-theme="dark"] .trending-card__title,
[data-theme="dark"] .latest-card__title,
[data-theme="dark"] .desk-card__title,
[data-theme="dark"] .author-chip__name,
[data-theme="dark"] .intro__title,
[data-theme="dark"] .desk__title,
[data-theme="dark"] .section-header__title,
[data-theme="dark"] .single__title {
    color: var(--brand-ink);
}
[data-theme="dark"] .hero-feature__excerpt,
[data-theme="dark"] .trending-card__excerpt,
[data-theme="dark"] .latest-card__excerpt,
[data-theme="dark"] .desk-card__excerpt,
[data-theme="dark"] .intro__lede,
[data-theme="dark"] .entry-content {
    color: #e8e0e0;  /* v2026-06-12: was --brand-muted (gray, hard to read); softened off-white */
}
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .entry-content li,
[data-theme="dark"] .entry-content blockquote {
    color: #e8e0e0;
    line-height: 1.7;
}
[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4 {
    color: #f0e8e8;  /* headings slightly brighter for hierarchy */
}
[data-theme="dark"] .entry-content a {
    color: #ffb27a;  /* brighter link color for visibility on dark */
}

/* v6.10: Dark mode visibility fixes for tags and read-more */
[data-theme="dark"] .edljx-tag {
    color: #f0d4f4;
    background: rgba(74, 21, 75, 0.5);
    border-color: #6b3a6d;
    font-weight: 500;
}
[data-theme="dark"] .edljx-tag:hover {
    color: #ffffff;
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}
[data-theme="dark"] .edljx-tags-label {
    color: #d4c4c4;
}
[data-theme="dark"] .intro__toggle {
    color: var(--brand-accent);
    border-color: rgba(255, 140, 66, 0.4);
    background: rgba(255, 140, 66, 0.06);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* v6.10: Dark mode bookmark button */
[data-theme="dark"] .edljx-bookmark-btn {
    background: var(--brand-accent);
    color: #1a0f15;
    box-shadow: 0 2px 12px rgba(255, 184, 77, 0.4);
}
[data-theme="dark"] .edljx-bookmark-btn:hover {
    background: #ffd699;
    color: #1a0f15;
    box-shadow: 0 4px 16px rgba(255, 184, 77, 0.6);
}
[data-theme="dark"] .edljx-bookmark-btn.is-saved {
    background: var(--brand-deep);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(201, 138, 208, 0.4);
}
[data-theme="dark"] .edljx-bookmark-btn.is-saved:hover {
    background: #e0a8e8;
    color: #1a0f15;
}

/* v6.10: Bookmark button on mobile gets more breathing room */
@media (max-width: 600px) {
    .edljx-bookmark-btn {
        margin: var(--space-3) 0 0 0;
        width: 100%;
        justify-content: center;
    }
    .edljx-bookmark-btn::before {
        display: none;
    }
}


[data-theme="dark"] .intro__toggle:hover {
    color: #1a0f15;
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.35);
    transform: translateY(-1px);
}

[data-theme="dark"] .entry-content code,
[data-theme="dark"] .entry-content pre {
    background: #1a0f15;
    color: #f0e8e8;
}
[data-theme="dark"] .helpful,
[data-theme="dark"] .single__author-bio {
    background: #20141c;
    border-color: var(--brand-rule);
}
[data-theme="dark"] .helpful__btn {
    background: #20141c;
    border-color: var(--brand-rule);
    color: var(--brand-ink);
}
[data-theme="dark"] .share-btn {
    background: transparent;
    border-color: var(--brand-rule);
    color: var(--brand-muted);
}

/* Dark mode toggle button (added to header via JS) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--brand-rule);
    color: var(--brand-ink);
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
    margin-left: var(--space-2);
}
.theme-toggle:hover {
    background: var(--brand-soft);
    border-color: var(--brand-deep);
}
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="dark"] .theme-toggle .theme-toggle__icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle__icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle__icon-sun { display: none; }
:root:not([data-theme="dark"]) .theme-toggle__icon-moon { display: block; }


/* v6.11: Search bar in header */
.site-header__search {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: var(--space-2);
}
.site-header__search-icon {
    position: absolute;
    left: 0.75rem;
    width: 16px;
    height: 16px;
    color: var(--brand-muted);
    pointer-events: none;
}
.site-header__search-input {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    color: var(--brand-ink);
    width: 200px;
    transition: width var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.site-header__search-input:focus {
    outline: none;
    width: 280px;
    background: #fff;
    border-color: var(--brand-deep);
}
.site-header__search-input::placeholder {
    color: var(--brand-muted);
}
[data-theme="dark"] .site-header__search-input {
    background: #20141c;
    color: #fff;
}
[data-theme="dark"] .site-header__search-input:focus {
    background: #2b1a26;
    border-color: var(--brand-accent);
}
@media (max-width: 768px) {
    .site-header__search-input { width: 140px; }
    .site-header__search-input:focus { width: 180px; }
}
@media (max-width: 540px) {
    .site-header__search { display: none; }  /* Hide on very small screens */
}


/* v6.11: Scroll-reveal animations for cards (Phase 2) */
@keyframes edljx-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-feature,
.hero-alsotoday,
.latest-card,
.trending-card,
.desk-card,
.author-chip,
.widget,
.archive-header,
.search-header {
    animation: edljx-fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--reveal-delay, 0) * 60ms);
}

.hero-alsotoday { animation-delay: 200ms; }
.latest-card:nth-child(1) { --reveal-delay: 1; animation-delay: 80ms; }
.latest-card:nth-child(2) { --reveal-delay: 2; animation-delay: 120ms; }
.latest-card:nth-child(3) { --reveal-delay: 3; animation-delay: 160ms; }
.latest-card:nth-child(4) { --reveal-delay: 4; animation-delay: 200ms; }
.latest-card:nth-child(5) { --reveal-delay: 5; animation-delay: 240ms; }
.latest-card:nth-child(6) { --reveal-delay: 6; animation-delay: 280ms; }
.latest-card:nth-child(7) { --reveal-delay: 7; animation-delay: 320ms; }
.latest-card:nth-child(8) { --reveal-delay: 8; animation-delay: 360ms; }
.latest-card:nth-child(9) { --reveal-delay: 9; animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .hero-feature,
    .hero-alsotoday,
    .latest-card,
    .trending-card,
    .desk-card,
    .author-chip,
    .widget,
    .archive-header,
    .search-header {
        animation: none;
    }
}


/* v6.11: Next/Prev navigation (9C) */
.article-nav {
    margin: 3rem auto;
    max-width: var(--article-width);
    padding: 0 var(--content-padding);
}
.article-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.article-nav__grid--single {
    /* v6.11: Single card spans full width if no neighbor */
    grid-template-columns: 1fr;
}
.article-nav__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--brand-ink);
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 120px;
    position: relative;
    overflow: hidden;
}
.article-nav__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--brand-deep);
}
.article-nav__card--next {
    text-align: right;
    align-items: flex-end;
}
.article-nav__card--empty {
    background: transparent;
    border: 1px dashed var(--brand-rule);
    pointer-events: none;
}
.article-nav__card--empty:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--brand-rule);
}
.article-nav__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent);
}
.article-nav__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.article-nav__image {
    margin-top: 0.5rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
}
.article-nav__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.article-nav__card:hover .article-nav__image img {
    transform: scale(1.04);
}
[data-theme="dark"] .article-nav__card {
    background: #20141c;
}
[data-theme="dark"] .article-nav__card--empty {
    background: transparent;
}
.article-nav__back-home {
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    color: var(--brand-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.article-nav__back-home:hover {
    color: var(--brand-deep);
}
@media (max-width: 600px) {
    .article-nav__grid,
    .article-nav__grid--single { grid-template-columns: 1fr; }
    .article-nav__card--next { text-align: left; align-items: flex-start; }
}


/* v6.11: Lucide icons (6A) */
.edljx-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
}


/* v6.11: Skeleton loaders (5B) */
@keyframes edljx-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
img.edljx-skeleton {
    background: linear-gradient(90deg, #e6e1dc 0%, #f4eee8 50%, #e6e1dc 100%);
    background-size: 200% 100%;
    animation: edljx-shimmer 1.5s ease-in-out infinite;
}
img.edljx-loaded {
    animation: none;
    background: none;
}

/* v6.11: View counts (12B) */
.edljx-views {
    font-size: 0.75rem;
    color: var(--brand-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-left: 0.5em;
}

/* v6.11: Live search modal (11B) */
.edljx-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.edljx-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.edljx-search-modal {
    width: 90%;
    max-width: 640px;
    max-height: 70vh;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .edljx-search-modal {
    background: #1a0f15;
    border: 1px solid var(--brand-rule);
}
.edljx-search-overlay.is-open .edljx-search-modal {
    transform: translateY(0);
}
.edljx-search-modal__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--brand-rule);
}
.edljx-search-modal__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    color: var(--brand-ink);
}
.edljx-search-modal__input::placeholder {
    color: var(--brand-muted);
}
.edljx-search-modal__close {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--brand-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.edljx-search-modal__close:hover {
    color: var(--brand-ink);
    background: var(--brand-soft);
}
.edljx-search-modal__results {
    overflow-y: auto;
    max-height: 50vh;
    padding: 0.5rem;
}
.edljx-search-modal__empty,
.edljx-search-modal__hint {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--brand-muted);
    font-size: 0.875rem;
}
.edljx-search-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand-ink);
    transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.edljx-search-result:hover,
.edljx-search-result.is-focused {
    background: var(--brand-soft);
}
.edljx-search-result__thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    flex-shrink: 0;
    object-fit: cover;
}
.edljx-search-result__content {
    flex: 1;
    min-width: 0;
}
.edljx-search-result__category {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent);
}
.edljx-search-result__title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    margin: 0;
}
.edljx-search-result__date {
    font-size: 0.75rem;
    color: var(--brand-muted);
}
.edljx-search-result mark {
    background: rgba(232, 121, 43, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ============================================
 * v2026-06-12: 'Related tools from edljx' aside
 * Used on single-post pages. Right-rail layout
 * (or inline block on narrow screens).
 * ============================================ */
.edljx-related-tools {
    background: var(--glass-bg, rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 0.75rem;
    box-shadow: var(--glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.18));
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: var(--text-primary, #222);
}
.edljx-related-tools__header {
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--brand-rule, rgba(255, 255, 255, 0.1));
}
.edljx-related-tools__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #222);
    letter-spacing: -0.01em;
}
.edljx-related-tools__subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    margin: 0.25rem 0 0;
    font-weight: 400;
}
.edljx-related-tools__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.edljx-related-tools__item {
    margin-bottom: 0.75rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--brand-rule, rgba(255, 255, 255, 0.05));
}
.edljx-related-tools__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.edljx-related-tools__item-name {
    display: block;
    color: var(--golden-orange, #ff8c42);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.12s ease;
}
.edljx-related-tools__item-name:hover,
.edljx-related-tools__item-name:focus-visible {
    color: var(--brand-deep, #6b2180);
    text-decoration: underline;
    outline: 0;
}
.edljx-related-tools__item-meta {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary, #888);
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
}
.edljx-related-tools__footer {
    margin: 0.75rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--brand-rule, rgba(255, 255, 255, 0.05));
    font-size: 0.7rem;
    color: var(--text-secondary, #888);
    font-style: italic;
    text-align: center;
}
.edljx-related-tools__footer a {
    color: var(--golden-orange, #ff8c42);
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
}
.edljx-related-tools__footer a:hover {
    text-decoration: underline;
}

/* Right-rail on wide screens: float right with constrained width */
@media (min-width: 1200px) {
    .edljx-related-tools {
        float: right;
        width: 300px;
        max-width: 35%;
        margin: 0 0 1.5rem 1.5rem;
    }
}

/* Inline block on narrow screens */
@media (max-width: 1199px) {
    .edljx-related-tools {
        margin: 2rem 0;
    }
}

/* Dark mode support */
[data-theme="dark"] .edljx-related-tools,
.dark .edljx-related-tools,
body.dark .edljx-related-tools {
    background: var(--glass-bg-dark, rgba(30, 20, 40, 0.65));
    border-color: var(--glass-border-dark, rgba(255, 255, 255, 0.15));
    color: var(--text-primary-dark, #f5f5f5);
}
[data-theme="dark"] .edljx-related-tools__title,
.dark .edljx-related-tools__title,
body.dark .edljx-related-tools__title {
    color: var(--text-primary-dark, #f5f5f5);
}
[data-theme="dark"] .edljx-related-tools__item-name:hover,
.dark .edljx-related-tools__item-name:hover,
body.dark .edljx-related-tools__item-name:hover {
    color: var(--golden-orange, #ff8c42);
}



/* v2026-06-12: Article TOC (auto-generated from H2s) */
.article-toc {
    position: sticky;
    top: var(--space-6);
    align-self: flex-start;
    max-height: calc(100vh - var(--space-9));
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    /* Hidden by default on narrow screens; shown via media query */
    display: none;
}

@media (min-width: 1280px) {
    .article-toc {
        display: block;
        width: 240px;
        position: fixed;
        right: var(--space-5);
        top: 100px;
        z-index: 50;
        margin-left: auto;
    }
    /* Hide TOC if it would overlap content */
    .single__inner.has-toc .entry-content {
        max-width: calc(var(--wide-content) - 280px);
    }
}

.article-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--brand-rule);
}

.article-toc__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-deep);
}

.article-toc__collapse {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--brand-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 200ms ease, color 200ms ease;
    display: none;  /* collapse is a mobile feature, hide on desktop */
}
.article-toc__collapse:hover {
    background: var(--brand-surface);
    color: var(--brand-deep);
}

.article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    transition: max-height 300ms ease, opacity 200ms ease;
    max-height: 1000px;
    overflow: hidden;
}
.article-toc__list.is-collapsed {
    max-height: 0;
    opacity: 0;
}

.article-toc__list li {
    counter-increment: toc;
    position: relative;
    padding-left: 1.75em;
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.article-toc__list li::before {
    content: counter(toc);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-muted);
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-toc__link {
    color: var(--brand-ink);
    text-decoration: none;
    transition: color 200ms ease;
    display: block;
    padding: 2px 0;
    border-radius: 2px;
}
.article-toc__link:hover {
    color: var(--brand-accent);
}
.article-toc__link.is-active {
    color: var(--brand-accent);
    font-weight: 600;
}

/* Dark mode */
[data-theme="dark"] .article-toc {
    background: #20141c;
    border-color: var(--brand-rule);
}
[data-theme="dark"] .article-toc__list li::before {
    background: #1a0f15;
    border-color: var(--brand-rule);
    color: var(--brand-muted);
}
[data-theme="dark"] .article-toc__link {
    color: #d4c4c4;
}
[data-theme="dark"] .article-toc__link.is-active {
    color: var(--brand-accent);
}

/* Mobile: TOC becomes a collapsed card at the top of the article */
@media (max-width: 1279px) {
    .article-toc {
        display: block;
        position: relative;
        width: auto;
        right: auto;
        top: auto;
        max-height: none;
        margin: var(--space-5) 0;
    }
    .article-toc__collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* v2026-06-12: Subscribe page styles */
.page--subscribe {
    background: var(--brand-surface);
    min-height: 60vh;
    padding-block: var(--space-7);
}

.subscribe__inner {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: var(--content-padding);
}

.subscribe__header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.subscribe__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: var(--space-3);
    padding: 0.4em 1em;
    background: rgba(255, 140, 66, 0.1);
    border-radius: 999px;
    border: 1px solid rgba(255, 140, 66, 0.2);
}

.subscribe__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--brand-ink);
    margin: 0 0 var(--space-3);
}

.subscribe__lede {
    font-size: 1.0625rem;
    color: var(--brand-muted);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.55;
}

.subscribe-section {
    margin-bottom: var(--space-7);
}

.subscribe-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-ink);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.subscribe-section__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--brand-accent);
}

.subscribe-section__sub {
    color: var(--brand-muted);
    margin: 0 0 var(--space-5);
}

.subscribe-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}

.subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.9em 1.2em;
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    color: var(--brand-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 200ms ease;
}
.subscribe-btn:hover {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 33, 128, 0.2);
}
.subscribe-btn svg { flex-shrink: 0; }

.subscribe-feed {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: border-color 200ms ease;
}
.subscribe-feed:hover {
    border-color: var(--brand-accent);
}
.subscribe-feed__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    color: var(--brand-deep);
}
.subscribe-feed__icon--cat {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
}
.subscribe-feed__cat-count {
    font-size: 0.875rem;
    font-weight: 700;
}
.subscribe-feed__body {
    flex: 1;
    min-width: 0;
}
.subscribe-feed__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--brand-ink);
    margin: 0 0 0.3em;
}
.subscribe-feed__url {
    margin: 0 0 0.3em;
    font-size: 0.8125rem;
    color: var(--brand-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subscribe-feed__url code {
    background: var(--brand-surface);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--brand-rule);
    font-size: 0.75rem;
}
.subscribe-feed__cat-link {
    font-size: 0.8125rem;
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 600;
}
.subscribe-feed__cat-link:hover {
    color: var(--brand-deep);
}
.subscribe-feed__btn {
    flex-shrink: 0;
    padding: 0.5em 1em;
    background: var(--brand-deep);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 200ms ease;
}
.subscribe-feed__btn:hover {
    background: var(--brand-accent);
    color: #1a0f15;
}
.subscribe-feed__btn--small {
    padding: 0.4em 0.8em;
    font-size: 0.8125rem;
}

.subscribe-feeds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}

.subscribe-section--other {
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-7);
}

.subscribe-other {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.subscribe-other__card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand-ink);
    transition: border-color 200ms ease, transform 200ms ease;
}
.subscribe-other__card:hover {
    border-color: var(--brand-accent);
    transform: translateX(2px);
}
.subscribe-other__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-deep);
    color: #fff;
    border-radius: var(--radius);
}
.subscribe-other__body {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.subscribe-other__body strong {
    color: var(--brand-ink);
    font-size: 0.9375rem;
}
.subscribe-other__body span {
    color: var(--brand-muted);
    font-size: 0.8125rem;
}

/* Dark mode */
[data-theme="dark"] .page--subscribe { background: transparent; }
[data-theme="dark"] .subscribe-btn {
    background: #20141c;
    color: #d4c4c4;
}
[data-theme="dark"] .subscribe-feed {
    background: #20141c;
}
[data-theme="dark"] .subscribe-feed__icon {
    background: #1a0f15;
    color: var(--brand-accent);
}
[data-theme="dark"] .subscribe-section--other {
    background: #20141c;
}
[data-theme="dark"] .subscribe-other__card {
    background: #1a0f15;
}


/* v2026-06-12: Header search dropdown (search-as-you-type) */
.site-header__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.site-header__search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 360px;
    max-width: 480px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: var(--space-2);
}

.search-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--brand-muted);
    font-size: 0.875rem;
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand-ink);
    transition: background 150ms ease;
}
.search-result:hover,
.search-result.is-active {
    background: var(--brand-soft);
}
.search-result--all {
    border-top: 1px solid var(--brand-rule);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    justify-content: center;
    color: var(--brand-deep);
    font-weight: 600;
    font-size: 0.875rem;
}

.search-result__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-soft);
}
.search-result__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search-result__thumb--placeholder {
    background: linear-gradient(135deg, rgba(107, 33, 128, 0.15), rgba(255, 140, 66, 0.15));
}

.search-result__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.search-result__cat {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent);
}
.search-result__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--brand-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.search-result__title mark {
    background: rgba(255, 140, 66, 0.25);
    color: var(--brand-ink);
    font-weight: 700;
    padding: 0 1px;
}
.search-result__excerpt {
    font-size: 0.8125rem;
    color: var(--brand-muted);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.search-result__meta {
    font-size: 0.75rem;
    color: var(--brand-muted);
    margin-top: 2px;
}

[data-theme="dark"] .site-header__search-results {
    background: #20141c;
    border-color: var(--brand-rule);
}
[data-theme="dark"] .search-result__thumb {
    background: #1a0f15;
}
[data-theme="dark"] .search-result:hover,
[data-theme="dark"] .search-result.is-active {
    background: #2b1a26;
}

@media (max-width: 600px) {
    .site-header__search-results {
        min-width: 280px;
        max-width: 90vw;
    }
}


/* v2026-06-12: Search filters + archive header badge */
.archive-header__badge {
    display: inline-block;
    margin-left: 0.5em;
    padding: 2px 8px;
    background: var(--brand-accent);
    color: #1a0f15;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
}

.search-filters {
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}
.search-filters__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.875rem;
    color: var(--brand-muted);
}
.search-filters__select {
    padding: 0.4em 0.8em;
    font: inherit;
    font-size: 0.875rem;
    color: var(--brand-ink);
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    cursor: pointer;
}
.search-filters__select:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
}
[data-theme="dark"] .search-filters__select {
    background: #1a0f15;
    color: #d4c4c4;
}


/* v2026-06-12: My Saved page (page-my-saved.php) */
.page--saved {
    background: var(--brand-surface);
    min-height: 70vh;
    padding-block: var(--space-7);
}
.saved__inner {
    max-width: var(--wide-content);
    margin-inline: auto;
    padding-inline: var(--content-padding);
}
.saved__header {
    text-align: center;
    margin-bottom: var(--space-6);
}
.saved__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: var(--space-2);
}
.saved__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--brand-ink);
    margin: 0 0 var(--space-3);
}
.saved__lede {
    color: var(--brand-muted);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* Toolbar */
.saved-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-rule);
}
.saved-toolbar__count {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    color: var(--brand-ink);
    font-weight: 600;
}
.saved-count-num { font-size: 1.5rem; font-weight: 800; color: var(--brand-deep); }
.saved-count-label { font-size: 0.875rem; color: var(--brand-muted); }
.saved-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1.2em;
    background: var(--brand-surface);
    color: var(--brand-deep);
    border: 1.5px solid var(--brand-deep);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 200ms ease;
}
.saved-btn:hover {
    background: var(--brand-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 33, 128, 0.25);
}
.saved-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.saved-btn--primary {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
}
.saved-btn--primary:hover {
    background: var(--brand-accent);
    color: #1a0f15;
    border-color: var(--brand-accent);
}

/* Layout: folders sidebar + grid */
.saved-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
}
@media (max-width: 768px) {
    .saved-layout { grid-template-columns: 1fr; }
}

.saved-folders {
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    height: max-content;
    position: sticky;
    top: var(--space-5);
}
.saved-folders__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 0 var(--space-3);
}
.saved-folders__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.saved-folder {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--brand-ink);
    cursor: pointer;
    transition: background 150ms ease;
    user-select: none;
}
.saved-folder:hover {
    background: var(--brand-surface);
}
.saved-folder.is-active {
    background: var(--brand-deep);
    color: #fff;
}
.saved-folder__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-muted);
    flex-shrink: 0;
}
.saved-folder__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--brand-muted);
    font-weight: 600;
}
.saved-folder.is-active .saved-folder__count {
    color: rgba(255, 255, 255, 0.7);
}
.saved-folders__add {
    width: 100%;
    margin-top: var(--space-3);
    padding: 0.5em;
    background: transparent;
    border: 1px dashed var(--brand-rule);
    border-radius: var(--radius);
    color: var(--brand-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    transition: all 150ms ease;
}
.saved-folders__add:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    background: var(--brand-surface);
}

/* Cards */
.saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.saved-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.saved-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.saved-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-soft);
}
.saved-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.saved-card:hover .saved-card__image img {
    transform: scale(1.05);
}
.saved-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(107, 33, 128, 0.18), rgba(255, 140, 66, 0.18));
}
.saved-card__body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.saved-card__cat {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent);
}
.saved-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.saved-card__title a {
    color: var(--brand-ink);
    text-decoration: none;
}
.saved-card__title a:hover { color: var(--brand-accent); }
.saved-card__excerpt {
    font-size: 0.875rem;
    color: var(--brand-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.saved-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.saved-card__tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.saved-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.75rem;
    color: var(--brand-muted);
    padding-top: var(--space-2);
    border-top: 1px solid var(--brand-rule);
}
.saved-card__social {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--brand-accent);
    font-weight: 600;
}
.saved-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--brand-rule);
}
.saved-card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em 0.7em;
    background: transparent;
    border: 1px solid var(--brand-rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--brand-muted);
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
}
.saved-card__action:hover {
    color: var(--brand-deep);
    border-color: var(--brand-deep);
    background: var(--brand-soft);
}
.saved-card__action--remove:hover {
    color: #c00;
    border-color: #c00;
    background: rgba(204, 0, 0, 0.05);
}

/* Empty state */
.saved-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-9) var(--space-4);
    color: var(--brand-muted);
}
.saved-empty svg { color: var(--brand-rule); margin-bottom: var(--space-4); }
.saved-empty h3 { color: var(--brand-ink); margin: 0 0 var(--space-2); }
.saved-empty p { margin: 0 0 var(--space-4); }

/* Login state */
.saved-login {
    text-align: center;
    padding: var(--space-7);
    max-width: 480px;
    margin: 0 auto;
    background: var(--brand-soft);
    border-radius: var(--radius-lg);
}

/* Modal */
.saved-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.saved-modal[hidden] { display: none; }
.saved-modal__panel {
    background: var(--brand-surface);
    color: var(--brand-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
}
.saved-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.saved-modal__close:hover { color: var(--brand-ink); }
.saved-modal__body h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
}
.saved-modal__body p { margin: 0 0 var(--space-3); }
.saved-modal__input {
    width: 100%;
    padding: 0.6em 0.8em;
    font: inherit;
    font-size: 0.9375rem;
    border: 1px solid var(--brand-rule);
    border-radius: var(--radius);
    background: var(--brand-surface);
    color: var(--brand-ink);
    margin-bottom: var(--space-3);
}
.saved-modal__input:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
}
.saved-modal__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-3);
}
.saved-modal__chip {
    padding: 4px 10px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--brand-ink);
    cursor: pointer;
    font-family: inherit;
}
.saved-modal__chip:hover {
    background: var(--brand-deep);
    color: #fff;
    border-color: var(--brand-deep);
}
.saved-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.saved-modal__cancel {
    background: transparent;
    border: 0;
    color: var(--brand-deep);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* Dark mode */
[data-theme="dark"] .saved-toolbar { background: #20141c; }
[data-theme="dark"] .saved-folders { background: #20141c; }
[data-theme="dark"] .saved-folder:hover { background: #1a0f15; }
[data-theme="dark"] .saved-card { background: #1a0f15; }
[data-theme="dark"] .saved-card__image { background: #20141c; }
[data-theme="dark"] .saved-card__tag { background: #20141c; }
[data-theme="dark"] .saved-modal__input { background: #20141c; }
[data-theme="dark"] .saved-modal__chip { background: #20141c; }
[data-theme="dark"] .saved-modal__panel { background: #1a0f15; }
[data-theme="dark"] .saved-login { background: #20141c; }