/*
Theme Name: Adams Local
Theme URI: https://github.com/Tokinx/Adams
Description: Awwwards / Webby / FWA Fresh Coastal Editorial Edition — Adams child theme with Sea-Salt Mint & Ocean Breeze aesthetics, viewport-following spine TOC, studio code blocks, and glassmorphic HUD.
Author: orangeade
Template: Adams
Version: 3.1.0
*/

/* ==========================================================================
   1. FRESH COASTAL DESIGN TOKENS (晨雾海盐 Light / 暖阳木漏日 Sepia / 深海星鲸 Night)
   ========================================================================== */

:root {
    /* 晨雾海盐 · Sea-Salt Mist & Mint (Default Fresh Light Mode) */
    --bg-canvas: #F6FAF9;
    --bg-surface: rgba(255, 255, 255, 0.94);
    --bg-elevated: #FFFFFF;
    --bg-subtle: #EBF4F2;
    --bg-glass: rgba(246, 250, 249, 0.86);
    --bg-glass-strong: rgba(255, 255, 255, 0.95);
    --bg-code: #F2F7F6;
    --bg-code-toolbar: #E5F0ED;
    --code-ink: #20383C;
    --bg-inline-code: rgba(42, 157, 143, 0.085);

    /* Fresh Coastal Slate Ink Hierarchy */
    --ink-1: #1C3033;
    --ink-2: #3C5458;
    --ink-3: #748E92;
    --ink-4: #A0B7BA;

    /* Mint-Teal & Sky Breeze Accents */
    --accent-primary: #2A9D8F;
    --accent-secondary: #4895EF;
    --accent-primary-soft: rgba(42, 157, 143, 0.10);
    --accent-link: #1F7A8C;
    --accent-link-hover: #2A9D8F;
    --accent-success: #2A9D8F;
    --accent-warm: #E76F51;

    /* Airy Sea-Glass Borders & Soft Shadows */
    --border-hairline: rgba(28, 48, 51, 0.075);
    --border-strong: rgba(42, 157, 143, 0.22);
    --shadow-sm: 0 4px 16px -4px rgba(28, 48, 51, 0.04), 0 1px 3px rgba(28, 48, 51, 0.025);
    --shadow-md: 0 14px 34px -10px rgba(42, 157, 143, 0.085), 0 4px 14px -2px rgba(28, 48, 51, 0.035);
    --shadow-lg: 0 24px 48px -12px rgba(28, 48, 51, 0.10), 0 8px 20px -4px rgba(28, 48, 51, 0.045);
    --spotlight-color: rgba(42, 157, 143, 0.045);
    --ambient-top-left: rgba(168, 230, 207, 0.24);
    --ambient-top-right: rgba(160, 196, 255, 0.20);

    /* Typography Stacks */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    --font-serif: "Instrument Serif", "Playfair Display", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Layout & Motion */
    --container-max: 780px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Cursor Spotlight Defaults */
    --mouse-x: 50vw;
    --mouse-y: 25vh;
}

/* 暖阳木漏日 · Botanical Cream (Sepia Mode) */
body.sepia {
    --bg-canvas: #FAF6EE;
    --bg-surface: rgba(255, 253, 248, 0.94);
    --bg-elevated: #FFFDF9;
    --bg-subtle: #F1EADA;
    --bg-glass: rgba(250, 246, 238, 0.88);
    --bg-glass-strong: rgba(255, 253, 249, 0.96);
    --bg-code: #F3EDE0;
    --bg-code-toolbar: #E8DFCE;
    --code-ink: #383024;
    --bg-inline-code: rgba(82, 121, 111, 0.11);

    --ink-1: #2B332C;
    --ink-2: #4A544B;
    --ink-3: #7C857B;
    --ink-4: #A6B0A5;

    --accent-primary: #52796F;
    --accent-secondary: #84A98C;
    --accent-primary-soft: rgba(82, 121, 111, 0.12);
    --accent-link: #354F52;
    --accent-link-hover: #52796F;

    --border-hairline: rgba(43, 51, 44, 0.085);
    --border-strong: rgba(82, 121, 111, 0.24);
    --shadow-sm: 0 4px 16px -4px rgba(56, 48, 36, 0.05);
    --shadow-md: 0 14px 34px -10px rgba(56, 48, 36, 0.09);
    --shadow-lg: 0 24px 48px -12px rgba(56, 48, 36, 0.13);
    --spotlight-color: rgba(82, 121, 111, 0.05);
    --ambient-top-left: rgba(216, 226, 220, 0.35);
    --ambient-top-right: rgba(250, 237, 205, 0.35);
}

/* 深海星鲸 · Soft Twilight Ocean (Night Mode — Gentle & Dreamy, Never Harsh Black) */
body.night {
    --bg-canvas: #111A22;
    --bg-surface: rgba(24, 36, 47, 0.92);
    --bg-elevated: #1C2A38;
    --bg-subtle: #1F3040;
    --bg-glass: rgba(17, 26, 34, 0.84);
    --bg-glass-strong: rgba(28, 42, 56, 0.95);
    --bg-code: #0E161D;
    --bg-code-toolbar: #15212B;
    --code-ink: #DCEEF2;
    --bg-inline-code: rgba(100, 223, 223, 0.11);

    --ink-1: #EAF4F4;
    --ink-2: #B8D0D4;
    --ink-3: #7A979E;
    --ink-4: #4F6A72;

    --accent-primary: #48CAE4;
    --accent-secondary: #52B788;
    --accent-primary-soft: rgba(72, 202, 228, 0.14);
    --accent-link: #72EFDD;
    --accent-link-hover: #90E0EF;
    --accent-success: #52B788;
    --accent-warm: #F4A261;

    --border-hairline: rgba(234, 244, 244, 0.08);
    --border-strong: rgba(72, 202, 228, 0.24);
    --shadow-sm: 0 4px 14px rgba(5, 10, 15, 0.28);
    --shadow-md: 0 16px 36px -8px rgba(5, 10, 15, 0.45);
    --shadow-lg: 0 28px 60px -12px rgba(5, 10, 15, 0.62);
    --spotlight-color: rgba(72, 202, 228, 0.055);
    --ambient-top-left: rgba(42, 157, 143, 0.12);
    --ambient-top-right: rgba(72, 202, 228, 0.10);
}

/* ==========================================================================
   2. GLOBAL FOUNDATION, SELECTION, SCROLLBAR & FRESH AMBIENT CANVAS
   ========================================================================== */

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-canvas);
    overflow-x: clip !important;
}

body,
body.sepia,
body.night {
    overflow-x: clip !important;
    background-color: var(--bg-canvas) !important;
    color: var(--ink-2) !important;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.78;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo);
    position: relative;
    min-height: 100vh;
}

body.serif {
    font-family: var(--font-serif);
}

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

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-canvas);
}

::-webkit-scrollbar-thumb {
    background-color: var(--ink-4);
    border-radius: 99px;
    border: 2px solid var(--bg-canvas);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-primary);
}

/* Top Reading Progress Bar — Sea-Mint to Sky Breeze Gradient */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.08s linear;
}

body.is-pjax-loading .reading-progress-bar {
    transform: scaleX(0.65) !important;
    transition: transform 0.4s var(--ease-out-expo);
}

/* Fresh Coastal Mist Ambient Canvas */
.ambient-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(620px circle at 12% 0%, var(--ambient-top-left), transparent 72%),
        radial-gradient(620px circle at 88% 4%, var(--ambient-top-right), transparent 72%),
        radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 70%);
    opacity: 1;
}

.container {
    max-width: var(--container-max);
    width: 92%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Fix parent theme animation lock & broken .10s/.12s delays */
@media (min-width: 42rem) {
    .main-load,
    section.comments,
    .main-load .post-list .meta {
        opacity: 1 !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    .post-list .meta,
    .archive-year-group,
    .reader-card,
    .nearbypost .nearby-card {
        opacity: 0;
        transform: translateY(12px);
        transition:
            opacity 0.5s var(--ease-out-expo),
            transform 0.5s var(--ease-out-expo),
            box-shadow 0.35s var(--ease-out-expo),
            border-color 0.35s var(--ease-out-expo);
    }

    .post-list .meta.is-revealed,
    .archive-year-group.is-revealed,
    .reader-card.is-revealed,
    .nearbypost .nearby-card.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Glassmorphic Toast Notification (.butterBar) */
.butterBar {
    position: fixed !important;
    top: 1.35rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    height: auto !important;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--bg-glass-strong) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink-1) !important;
    z-index: 9999 !important;
}

.butterBar-message {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-1);
    margin: 0;
}

/* ==========================================================================
   3. FRESH MASTHEAD & SEAMLESS EPIGRAPH / STICKY HUD (.header & .infos)
   ========================================================================== */

.header {
    margin: 0 0 2.25rem;
    padding: 1.5rem 0 0;
    position: relative;
    color: var(--ink-2);
    border-bottom: none;
}

.masthead-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Unified Top Row: Brand + Primary Nav + Quick Actions */
.masthead-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid var(--border-hairline);
}

.brand-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    color: var(--ink-1) !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.brand-identity:hover {
    color: var(--accent-primary) !important;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.night .brand-mark img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.brand-name {
    color: var(--ink-1);
    font-weight: 700;
}

.masthead-center-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.masthead-center-nav:empty {
    display: none;
}

.masthead-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* Override Parent Social Nav positioning inside Masthead */
.header .social {
    position: static !important;
    display: flex;
    align-items: center;
    margin-right: 0.2rem;
}

.header .social ul {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
}

.header .social li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--bg-surface);
    color: var(--ink-2) !important;
    transition: all 0.22s var(--ease-out-expo);
    position: relative;
}

.header .social li:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.header .social li a {
    width: 100%;
    height: 100%;
}

/* Masthead Quick Search & Theme Trigger Buttons */
.masthead-cmd-btn,
.masthead-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.72rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--bg-surface);
    color: var(--ink-2);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s var(--ease-out-expo);
}

.masthead-theme-btn {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.masthead-cmd-btn:hover,
.masthead-theme-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.cmd-kbd {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    padding: 0.02rem 0.34rem;
    border-radius: 4px;
    background: var(--bg-subtle);
    color: var(--ink-3);
    border: 1px solid var(--border-hairline);
    line-height: 1.3;
}

/* Primary Navigation (.header_nav) */
.header .header_nav,
.header .menu {
    margin: 0 !important;
    padding: 0 !important;
}

.header .menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow: visible;
    white-space: normal;
}

.header .menu li {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    line-height: 1.4;
}

.header .menu li:after {
    display: none !important;
}

.header .menu li a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.78rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-2) !important;
    transition: all 0.22s var(--ease-out-expo);
}

.header .menu li a:hover {
    color: var(--accent-primary) !important;
    background: var(--bg-subtle);
}

.header .menu li.current-menu-item a,
.header .menu li.current_page_item a,
.header .menu li.current-menu-parent a,
.header .menu li.current-post-parent a {
    background: var(--accent-primary-soft);
    color: var(--accent-primary) !important;
    font-weight: 600;
}

/* Contextual Hero Section inside Masthead */
.masthead-hero {
    padding: 0.85rem 0 0.35rem;
}

.home-fresh-hero {
    padding: 0.25rem 0 0;
}

.home-hero-desc {
    margin: 0.4rem 0 0;
    color: var(--ink-3);
    font-size: 0.92rem;
}

.article-kicker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--ink-3);
}

.kicker-category {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.62rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.kicker-category:hover {
    background: var(--accent-primary);
    color: #FFFFFF !important;
}

.kicker-dot {
    color: var(--ink-4);
}

.kicker-stat {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.header h1.fullname,
body.night .header h1.fullname,
body.sepia .header h1.fullname {
    display: block;
    color: var(--ink-1) !important;
    background: transparent !important;
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    line-height: 1.28;
    font-weight: 750;
    letter-spacing: -0.022em;
    text-wrap: balance;
    text-shadow: none !important;
    margin: 0;
}

.header h1.fullname.home-hero-title {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    letter-spacing: -0.025em;
}

/* Sub-Bar (.infos):
   When NOT fixed (:not(.fixed)), it sits cleanly in normal flow inside .header with NO 100vw double borders!
   When scrolled (.infos.fixed), it transforms into the floating glassmorphic top HUD bar. */
.infos,
body.night .infos,
body.sepia .infos {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    line-height: 1.6 !important;
    margin-top: 0.75rem;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ink-3) !important;
    font-size: 0.84rem;
    border: none !important;
}

.infos:before,
.infos:after {
    display: none !important;
}

.infos .infos-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.55rem 0;
}

/* On Single Post, give the metadata row a subtle hairline divider */
.is-singular-header .infos:not(.fixed) .infos-inner {
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
}

/* On Homepage, style .placard as a poetic, whisper-light epigraph quote (NO full-width strip!) */
.infos .placard {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--ink-3);
    font-size: 0.88rem;
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: 0.01em;
    padding: 0.1rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.placard-quote-mark {
    color: var(--accent-primary);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    opacity: 0.75;
    user-select: none;
}

.placard-text {
    font-family: var(--font-sans);
    font-style: normal;
    color: var(--ink-3);
}

.infos .fields,
.infos .socials {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 0.55rem;
    line-height: 1.4 !important;
}

.infos .field-sep {
    color: var(--ink-4);
    flex-shrink: 0;
    line-height: 1 !important;
}

.infos .field-item,
.infos .field-item time {
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink-3) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}

.infos .dot-good {
    padding: 0.16rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    line-height: 1.5 !important;
    font-weight: 500;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s var(--ease-out-expo);
}

.infos .dot-good:hover,
.infos .dot-good.done {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

.reading-progress-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5 !important;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Donate & QR Share Buttons in .infos */
.infos .socials {
    gap: 0.45rem;
}

.infos .donate,
.infos .share {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.infos .donate a,
.infos .share a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.68rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--bg-surface);
    line-height: 1.5 !important;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap !important;
    transition: all 0.2s var(--ease-out-expo);
}

.infos .donate a {
    color: var(--accent-warm) !important;
}

.infos .donate a:hover {
    background: var(--accent-warm);
    color: #FFFFFF !important;
    border-color: var(--accent-warm);
}

.infos .share a {
    color: var(--accent-primary) !important;
}

.infos .share a:hover {
    background: var(--accent-primary);
    color: #FFFFFF !important;
    border-color: var(--accent-primary);
}

.infos.donate-close .donate .window,
.infos.share-close .qrcode {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg) !important;
    padding: 14px;
    height: auto;
    min-height: 165px;
    top: 48px;
    right: 0;
}

/* Sticky Fixed HUD State (.infos.fixed) when Scrolled > 200px */
.infos.fixed,
body.night .infos.fixed,
body.sepia .infos.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.25rem !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    z-index: 900;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-sm) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-hairline) !important;
}

.infos.fixed .infos-inner {
    height: 100%;
    padding: 0 !important;
    border: none !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 1rem;
}

.infos.fixed .fixed-title,
body.night .infos.fixed .fixed-title,
body.sepia .infos.fixed .fixed-title {
    position: static !important;
    background: transparent !important;
    color: var(--ink-1) !important;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4 !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.75rem;
}

/* On Single Post sticky bar, hide .fixed-menus so .fixed-title and .fields/.socials never crowd each other */
.is-singular-header .infos.fixed .fixed-menus {
    display: none !important;
}

.is-index-header .infos.fixed .fixed-menus {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.infos.fixed .fixed-menus .menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.infos.fixed .fixed-menus .menu li:after {
    display: none !important;
}

.infos.fixed .fixed-menus .menu li a {
    font-size: 0.82rem;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-pill);
    color: var(--ink-2) !important;
    line-height: 1.4 !important;
}

.infos.fixed .fixed-menus .menu li a:hover {
    background: var(--bg-subtle);
    color: var(--accent-primary) !important;
}

/* ==========================================================================
   4. FRESH MAGAZINE INDEX & REFINED VIEW SWITCHER (.feed-toolbar & .post-list)
   ========================================================================== */

.feed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-hairline);
}

.feed-toolbar-left {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}

.feed-section-cn {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--ink-1);
    letter-spacing: -0.01em;
}

.feed-section-sep {
    color: var(--ink-4);
    font-size: 0.78rem;
}

.feed-section-en {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-3);
}

.feed-view-switcher {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    gap: 2px;
}

.view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    height: 26px;
    padding: 0 0.58rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
}

.view-switch-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.view-switch-btn:hover {
    color: var(--ink-1);
}

.view-switch-btn.is-active {
    background: var(--bg-elevated);
    color: var(--accent-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(28, 48, 51, 0.06);
}

.view-switch-btn.is-active svg {
    opacity: 1;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Layout Mode 2: Bento 2-Column Grid */
@media screen and (min-width: 769px) {
    .post-list[data-layout="bento"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
    }

    .post-list[data-layout="bento"] .meta.is-featured-post,
    .post-list[data-layout="bento"] .reade_more,
    .post-list[data-layout="bento"] .empty-state-card {
        grid-column: 1 / -1;
    }

    .post-list[data-layout="bento"] .meta:not(.is-featured-post) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem 1.6rem !important;
    }

    .post-list[data-layout="bento"] .meta:not(.is-featured-post) main.meta-body {
        flex-direction: column;
        gap: 0.85rem;
    }

    .post-list[data-layout="bento"] .meta:not(.is-featured-post) main .thumb {
        order: -1;
        width: 100%;
        height: 148px;
    }
}

/* Layout Mode 3: Minimal Index View */
.post-list[data-layout="minimal"] {
    gap: 0.45rem;
}

.post-list[data-layout="minimal"] .meta {
    padding: 1.05rem 1.4rem !important;
    border-radius: var(--radius-md);
}

.post-list[data-layout="minimal"] .meta main.meta-body {
    display: none !important;
}

.post-list[data-layout="minimal"] .meta header h2 {
    font-size: 1.12rem !important;
}

.post-list[data-layout="minimal"] .meta footer.meta-footer {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
}

.post-list .meta {
    position: relative;
    margin: 0 !important;
    padding: 1.65rem 1.9rem !important;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    line-height: 1.65;
    transition:
        transform 0.32s var(--ease-out-expo),
        box-shadow 0.32s var(--ease-out-expo),
        border-color 0.32s var(--ease-out-expo);
}

.post-list .meta:before {
    display: none !important;
}

.post-list .meta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.post-list .meta.is-featured-post {
    padding: 2rem 2.15rem !important;
    background: linear-gradient(155deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
    border-color: var(--border-strong);
}

/* Editorial Kicker Row inside Post Card */
.meta-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    font-size: 0.74rem;
    color: var(--ink-3);
}

.meta-serial {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    padding-right: 0.4rem;
    border-right: 1px solid var(--border-hairline);
}

.meta-featured-badge {
    padding: 0.08rem 0.52rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-size: 0.68rem;
    font-weight: 600;
}

.meta-cat-pill {
    padding: 0.08rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2) !important;
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.meta-cat-pill:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

.meta-reading-time {
    color: var(--ink-3);
    font-size: 0.74rem;
    margin-left: auto;
}

/* Post Card Title — Explicitly Transparent Background */
.post-list .meta header h2,
body.night .post-list .meta header h2,
body.sepia .post-list .meta header h2 {
    background: transparent !important;
    font-size: clamp(1.22rem, 1.9vw, 1.48rem);
    line-height: 1.38;
    color: var(--ink-1) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    display: block;
    transition: color 0.22s ease;
}

.post-list .meta.is-featured-post header h2 {
    font-size: clamp(1.38rem, 2.3vw, 1.72rem);
}

.post-list .meta:hover header h2,
body.night .post-list .meta:hover header h2,
body.sepia .post-list .meta:hover header h2 {
    color: var(--accent-primary) !important;
}

/* Post Card Body & Excerpt + Thumbnail Grid */
.post-list .meta main.meta-body {
    margin: 0.75rem 0 1.1rem !important;
    display: flex;
    align-items: flex-start;
    gap: 1.35rem;
}

.post-list .meta main .meta-excerpt-wrap,
.meta-excerpt-wrap {
    flex: 1;
    min-width: 0;
}

.post-list .meta main p {
    color: var(--ink-2);
    font-size: 0.93rem;
    line-height: 1.75;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-list .meta main .thumb {
    float: none !important;
    order: 2;
    flex-shrink: 0;
    width: 176px;
    height: 118px;
    margin: 0 !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    background-color: var(--bg-subtle);
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.post-list .meta:hover main .thumb {
    transform: scale(1.025);
    box-shadow: var(--shadow-sm);
}

/* Post Card Footer — Single Crisp Line */
.post-list .meta footer.meta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-hairline);
    line-height: 1.4;
}

.meta-footer-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.post-list .meta footer span,
.post-list .meta footer span.comments,
.post-list .meta footer span.time,
.post-list .meta footer span.likes,
body.night .post-list .meta footer span,
body.sepia .post-list .meta footer span {
    color: var(--ink-3) !important;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.4 !important;
}

.post-list .meta footer span.hr {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50%;
    background: var(--ink-4) !important;
    margin: 0 0.45rem !important;
    display: inline-block !important;
}

.meta-read-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.meta-read-cta .cta-arrow {
    display: inline-block;
    transition: transform 0.25s var(--ease-out-expo);
}

.post-list .meta:hover .meta-read-cta .cta-arrow {
    transform: translateX(4px);
}

/* Pagination (.reade_more) */
.post-list .reade_more {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 2.5rem 0 1.5rem !important;
}

.post-list .reade_more a,
.post-list .reade_more .page-numbers,
body.night .post-list .reade_more .page-numbers,
body.sepia .post-list .reade_more .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.9rem !important;
    margin: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--bg-surface) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--border-hairline) !important;
    box-shadow: var(--shadow-sm) !important;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.22s var(--ease-out-expo) !important;
}

.post-list .reade_more a:hover,
.post-list .reade_more .page-numbers:hover,
.post-list .reade_more span.page-numbers.current,
body.night .post-list .reade_more .page-numbers:hover,
body.night .post-list .reade_more span.page-numbers,
body.sepia .post-list .reade_more .page-numbers:hover,
body.sepia .post-list .reade_more span.page-numbers {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   5. SINGLE ARTICLE READING EXPERIENCE & ARCHITECTURAL SPINE TOC (.post_article)
   ========================================================================== */

.single-reading-shell {
    position: relative;
}

.reading-body-stage {
    position: relative;
}

/* Auto-Generated Architectural Spine Table of Contents (TOC):
   - Minimalist vertical spine design (no heavy card border or premature 1-line ellipsis)
   - Viewport-following via position: fixed + JS dynamic top on desktop */
.editorial-toc {
    margin: 0 0 1.75rem;
}

.editorial-toc[hidden] {
    display: none !important;
}

.editorial-toc-inner {
    background: transparent;
    padding: 0.25rem 0;
}

.toc-mobile-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    color: var(--ink-1);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.65rem 1rem;
    box-shadow: var(--shadow-sm);
}

.toc-toggle-count {
    padding: 0.08rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    padding: 0 0.25rem 0.45rem 0.85rem;
    font-size: 0.74rem;
    color: var(--ink-3);
}

.toc-kicker {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.toc-progress-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-left: 1.5px solid var(--border-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 62vh;
    overflow-y: auto;
}

.toc-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.toc-link {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.32rem 0.5rem 0.32rem 0.85rem;
    margin-left: -1.5px;
    border-left: 2px solid transparent;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-3) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: all 0.2s ease;
}

.toc-item.toc-depth-1 .toc-link {
    padding-left: 1.45rem;
    font-size: 0.77rem;
}

.toc-item.toc-depth-2 .toc-link {
    padding-left: 2rem;
    font-size: 0.75rem;
}

.toc-link:hover {
    color: var(--ink-1) !important;
    border-left-color: var(--ink-4);
}

.toc-link.is-active {
    color: var(--accent-primary) !important;
    border-left-color: var(--accent-primary);
    font-weight: 600;
    background: linear-gradient(90deg, var(--accent-primary-soft) 0%, transparent 100%);
    border-radius: 0 6px 6px 0;
}

.toc-link.is-active .toc-num {
    color: var(--accent-primary);
}

.toc-num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-4);
    flex-shrink: 0;
    margin-top: 0.05rem;
    font-variant-numeric: tabular-nums;
}

.toc-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

/* Desktop Viewport-Following Rail Placement for TOC:
   Uses position: fixed with dynamic top calculated on every scroll frame by AdamsUX.updateTocPositionAndSpy()
   so it starts aligned with .reading-body-stage and smoothly follows downward scroll at 88px. */
@media screen and (min-width: 1240px) {
    .editorial-toc {
        position: fixed !important;
        top: 260px;
        left: max(1.25rem, calc((100vw - var(--container-max)) / 2 - 248px));
        width: 216px;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 85;
    }
}

@media screen and (max-width: 1239px) {
    .toc-mobile-toggle {
        display: flex;
    }

    .editorial-toc .toc-header,
    .editorial-toc .toc-nav {
        display: none;
    }

    .editorial-toc.is-open .editorial-toc-inner {
        background: var(--bg-surface);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
        padding: 0.75rem 1rem;
        box-shadow: var(--shadow-sm);
    }

    .editorial-toc.is-open .toc-mobile-toggle {
        border: none;
        box-shadow: none;
        padding: 0.2rem 0 0.6rem;
        border-bottom: 1px solid var(--border-hairline);
        border-radius: 0;
    }

    .editorial-toc.is-open .toc-nav {
        display: block;
        margin-top: 0.65rem;
    }
}

/* Article Body Typography (.post_article) */
.post_article,
body.night .post_article,
body.sepia .post_article {
    max-width: var(--container-max);
    margin: 0 auto;
    color: var(--ink-2) !important;
    font-size: 1.04rem;
    line-height: 1.88;
    letter-spacing: 0.004em;
}

.post_article p,
body.night .post_article p,
body.sepia .post_article p {
    margin: 1.4rem 0;
    line-height: 1.88;
    font-size: 1.04rem;
    color: var(--ink-2) !important;
    text-wrap: pretty;
}

/* Fresh Editorial Headings */
.post_article h1,
.post_article h2,
.post_article h3,
.post_article h4,
.post_article h5,
.post_article h6,
body.night .post_article h1,
body.night .post_article h2,
body.night .post_article h3,
body.night .post_article h4,
body.sepia .post_article h1,
body.sepia .post_article h2,
body.sepia .post_article h3,
body.sepia .post_article h4 {
    display: block;
    width: 100%;
    background: none !important;
    color: var(--ink-1) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
    padding: 0;
    scroll-margin-top: 90px;
}

.post_article h1 {
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    line-height: 1.3;
    margin: 2.6rem 0 1.05rem;
}

.post_article h2 {
    font-size: clamp(1.3rem, 2vw, 1.58rem);
    line-height: 1.35;
    margin: 2.75rem 0 0.95rem;
    padding-bottom: 0.48rem;
    border-bottom: 1px solid var(--border-hairline);
}

.post_article h3 {
    font-size: clamp(1.14rem, 1.7vw, 1.3rem);
    line-height: 1.4;
    margin: 2.15rem 0 0.75rem;
}

.post_article h4 {
    font-size: 1.06rem;
    line-height: 1.45;
    margin: 1.75rem 0 0.65rem;
}

/* Article Links */
.post_article a,
body.night .post_article a,
body.sepia .post_article a {
    color: var(--accent-link) !important;
    text-decoration: underline;
    text-decoration-color: rgba(42, 157, 143, 0.35);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1.5px;
    border-bottom: none !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.post_article a:hover,
body.night .post_article a:hover,
body.sepia .post_article a:hover {
    color: var(--accent-link-hover) !important;
    text-decoration-color: var(--accent-link-hover);
}

/* Lists */
.post_article ul,
.post_article ol,
body.night .post_article ul,
body.night .post_article ol,
body.sepia .post_article ul,
body.sepia .post_article ol {
    margin: 1.35rem 0 !important;
    padding: 0 0 0 1.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1.85 !important;
    color: var(--ink-2) !important;
}

.post_article li,
body.night .post_article li,
body.sepia .post_article li {
    margin: 0.48rem 0;
    padding-left: 0.3rem;
    color: var(--ink-2) !important;
    line-height: 1.85;
}

.post_article ul li::marker {
    color: var(--accent-primary);
}

.post_article ol li::marker {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.88em;
    font-weight: 600;
}

/* Friend Links Cards (ul.links) */
.post_article ul.links {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    padding: 0 !important;
    margin: 2rem 0 !important;
    letter-spacing: normal !important;
}

.post_article ul.links li {
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-md);
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}

.post_article ul.links li a {
    padding: 1rem 1.2rem !important;
    text-decoration: none !important;
    color: var(--ink-1) !important;
    font-weight: 600;
}

/* Editorial Pull-Quotes (blockquote & q) */
.post_article blockquote,
.post_article q,
body.night .post_article blockquote,
body.night .post_article q,
body.sepia .post_article blockquote,
body.sepia .post_article q {
    margin: 1.85rem 0;
    padding: 1.2rem 1.6rem;
    background: var(--bg-subtle) !important;
    border-left: 3px solid var(--accent-primary) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: none !important;
    color: var(--ink-1) !important;
    font-style: normal;
    position: relative;
}

.post_article blockquote:before,
.post_article blockquote:after,
.post_article q:before,
.post_article q:after {
    display: none !important;
    content: none !important;
}

.post_article blockquote p,
.post_article q p {
    margin: 0 !important;
    color: var(--ink-1) !important;
    font-size: 1rem;
    line-height: 1.8;
}

/* Inline Code & Fresh Studio Code Blocks (pre & code) */
.post_article code,
body.night .post_article code,
body.sepia .post_article code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.15em 0.42em;
    margin: 0 0.1em;
    border-radius: 5px;
    background: var(--bg-inline-code) !important;
    color: var(--accent-link) !important;
    box-shadow: none !important;
    line-height: 1.5;
    max-height: none;
    vertical-align: baseline;
}

.post_article pre,
body.night .post_article pre,
body.sepia .post_article pre {
    position: relative;
    margin: 1.85rem 0;
    padding: 0 !important;
    border-radius: var(--radius-md);
    background: var(--bg-code) !important;
    color: var(--code-ink) !important;
    border: 1px solid var(--border-hairline) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}

.code-studio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.52rem 1rem;
    background: var(--bg-code-toolbar);
    border-bottom: 1px solid var(--border-hairline);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    user-select: none;
}

.code-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.code-window-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.code-window-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.code-window-dots i:nth-child(1) { background: #F28482; }
.code-window-dots i:nth-child(2) { background: #F6BD60; }
.code-window-dots i:nth-child(3) { background: #84A59D; }

.code-lang-badge {
    color: var(--ink-1);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.code-line-meta {
    color: var(--ink-3);
}

.code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.62rem;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-copy-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.code-copy-btn.is-copied {
    background: var(--accent-primary-soft);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Ensure NO nested code/span inside <pre> gets inline pill background or border */
.post_article pre code,
.post_article pre code *,
body.night .post_article pre code,
body.night .post_article pre code *,
body.sepia .post_article pre code,
body.sepia .post_article pre code * {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.post_article pre > code,
body.night .post_article pre > code,
body.sepia .post_article pre > code {
    display: block !important;
    padding: 1.15rem 1.3rem !important;
    margin: 0 !important;
    color: var(--code-ink) !important;
    border-radius: 0 !important;
    overflow-x: auto;
    font-size: 0.87rem;
    line-height: 1.72;
    white-space: pre;
    tab-size: 4;
}

/* Fresh Syntax Highlighting Palette */
.prettyprint .pln { color: var(--code-ink) !important; }
.prettyprint .str, .prettyprint .atv { color: #2A9D8F !important; }
.prettyprint .kwd { color: #3B82F6 !important; font-weight: 600; }
.prettyprint .com { color: var(--ink-3) !important; font-style: italic; }
.prettyprint .typ, .prettyprint .dec { color: #0F766E !important; }
.prettyprint .lit { color: #D97706 !important; }
.prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: var(--ink-3) !important; }
.prettyprint .tag { color: #E76F51 !important; }
.prettyprint .atn { color: #0284C7 !important; }
.prettyprint .var, .prettyprint .fun { color: #2563EB !important; }

body.night .prettyprint .str, body.night .prettyprint .atv { color: #80ED99 !important; }
body.night .prettyprint .kwd { color: #72EFDD !important; }
body.night .prettyprint .typ, body.night .prettyprint .dec { color: #64DFDF !important; }
body.night .prettyprint .lit { color: #F4A261 !important; }
body.night .prettyprint .var, body.night .prettyprint .fun { color: #90E0EF !important; }

/* Images, Figures & Lightbox */
.post_article img,
body.night .post_article img {
    max-width: 100%;
    height: auto;
    margin: 1.85rem auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-md);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.post_article img:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.view-img {
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    background: var(--bg-glass-strong) !important;
}

/* Tables */
.post_article table {
    width: 100%;
    margin: 1.85rem 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 0.94rem;
    display: table;
}

.post_article table th,
.post_article table td,
body.night .post_article table th,
body.night .post_article table td {
    padding: 0.8rem 1.05rem;
    border-bottom: 1px solid var(--border-hairline);
    border-right: 1px solid var(--border-hairline);
    border-top: none;
    border-left: none;
    text-align: left;
    line-height: 1.6;
}

.post_article table th:last-child,
.post_article table td:last-child {
    border-right: none;
}

.post_article table tr:last-child td {
    border-bottom: none;
}

.post_article table th,
body.night .post_article table th {
    background: var(--bg-subtle) !important;
    color: var(--ink-1) !important;
    font-weight: 700;
    font-size: 0.84rem;
}

/* Horizontal Divider */
.post_article hr,
body.night .post_article hr {
    border: none;
    height: 1px;
    background: var(--border-strong);
    margin: 2.75rem auto;
    width: 32%;
}

.post_article hr:before {
    display: none !important;
}

/* End-of-Article Signature Ornament, Provenance & Interactive Appreciation Stage */
.article-colophon {
    margin: 3rem 0 2rem;
}

.article-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.ornament-line {
    width: 56px;
    height: 1px;
    background: var(--border-strong);
}

.ornament-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    opacity: 0.8;
}

.article-colophon-card,
.article-colophon-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 1.65rem;
    background: linear-gradient(145deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
    border: 1px solid var(--border-hairline);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.article-colophon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.85;
}

.colophon-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.colophon-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.76rem;
    color: var(--ink-3);
}

.colophon-fin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.colophon-cat-link {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2) !important;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.colophon-cat-link:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

.colophon-meta-dot {
    color: var(--ink-4);
}

.colophon-date,
.colophon-word-stat {
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.colophon-signoff-note {
    margin: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: var(--ink-2) !important;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 0 !important;
    padding: 0;
}

.tags:empty {
    display: none !important;
}

.tags li a {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.75rem !important;
    margin: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-hairline);
    color: var(--ink-2) !important;
    font-size: 0.75rem !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s var(--ease-out-expo);
}

.tags li a:before {
    content: '#';
    color: var(--accent-primary);
    margin-right: 0.18rem;
    font-family: var(--font-mono);
}

.tags li a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.article-share-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.btn-colophon-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    box-shadow: 0 2px 6px rgba(28, 48, 51, 0.04);
    color: var(--ink-1) !important;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.22s var(--ease-out-expo);
}

.btn-colophon-like {
    border-color: var(--border-strong);
}

.btn-colophon-action .action-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.btn-colophon-action .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.42rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.btn-colophon-action:hover,
.btn-colophon-action.done,
.btn-colophon-action.is-copied {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-colophon-action:hover .action-icon-wrap,
.btn-colophon-action.done .action-icon-wrap,
.btn-colophon-action.is-copied .action-icon-wrap {
    color: #FFFFFF;
}

.btn-colophon-action:hover .count,
.btn-colophon-action.done .count {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.btn-colophon-action.dot-good i {
    display: none;
}

.btn-colophon-action.dot-good i[class*='-l'] {
    display: inline-block;
}

.btn-colophon-action.dot-good.done i {
    display: inline-block;
}

.btn-colophon-action.dot-good.done i[class*='-l'] {
    display: none;
}

/* Editorial Story Navigation Grid (.nearbypost) */
.nearbypost,
body.night .nearbypost,
body.sepia .nearbypost {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    letter-spacing: normal !important;
    padding: 0 !important;
    margin: 1.5rem 0 3.25rem !important;
    box-shadow: none !important;
}

.nearbypost div.nearby-card,
.nearbypost div.alignleft,
.nearbypost div.alignright,
body.night .nearbypost div.alignright,
body.sepia .nearbypost div.alignright {
    width: 100% !important;
    margin: 0 !important;
    padding: 1.2rem 1.4rem !important;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transition: all 0.28s var(--ease-out-expo);
}

.nearbypost div.nearby-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md) !important;
}

.nearbypost div.alignright {
    text-align: right !important;
    align-items: flex-end !important;
}

.nearbypost div.nearby-link-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
}

.nearby-kicker {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-3);
}

.nearbypost div a:before,
.nearbypost div.alignright a:after {
    display: none !important;
    content: none !important;
}

.nearbypost .nearby-link-wrap a {
    color: var(--ink-1) !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.48;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
}

.nearbypost div.nearby-card:hover .nearby-link-wrap a {
    color: var(--accent-primary) !important;
}

/* ==========================================================================
   6. ARCHIVE TIMELINE & READERS BENTO WALL (.archives & .readerswall)
   ========================================================================== */

.archive-dashboard {
    margin-bottom: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.archive-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.archive-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--ink-3);
}

.stat-value {
    font-size: 1.7rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.archive-filter-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0 1.1rem;
    height: 44px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.archive-filter-bar:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-soft);
}

.archive-filter-icon {
    color: var(--ink-3);
    margin-right: 0.65rem;
}

.archive-filter-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: var(--ink-1) !important;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    height: 100%;
}

.archive-filter-count {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 0.14rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-weight: 600;
}

.archive-year-group {
    margin-bottom: 2.25rem;
}

.archive-year-heading {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.75rem !important;
    padding-bottom: 0.55rem !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}

.archive-year-heading .year-num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink-1);
}

.archive-year-heading .year-badge {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.16rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    color: var(--ink-2);
}

.archives table.archive-table {
    border: none !important;
    margin: 0 !important;
}

.archives table.archive-table tr.archive-row td {
    border: none !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    padding: 0.72rem 0.5rem !important;
    vertical-align: middle;
}

.archives .archive-date-cell {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ink-3) !important;
    font-variant-numeric: tabular-nums;
    width: 76px;
}

.archives .archive-title-cell a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink-1) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: transform 0.2s ease, color 0.2s ease;
}

.archives .archive-title-cell a:hover {
    color: var(--accent-primary) !important;
    transform: translateX(4px);
}

.archive-comment-pill {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    flex-shrink: 0;
}

/* Readers Wall Bento Grid (.readers-bento-grid) */
.readerswall ul.readers-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.5rem !important;
    padding: 0 !important;
}

.readerswall ul.readers-bento-grid li.reader-card {
    width: 100% !important;
    margin: 0 !important;
    list-style: none !important;
}

.readerswall ul.readers-bento-grid li.reader-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.35rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none !important;
    position: relative;
    transition: all 0.28s var(--ease-out-expo);
}

.readerswall ul.readers-bento-grid li.reader-card a:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.reader-rank {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    color: var(--ink-4);
}

.reader-card.is-top-reader .reader-rank {
    color: var(--accent-primary);
}

.reader-avatar-wrap img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    margin: 0 0 0.65rem !important;
    border: 2px solid var(--border-hairline);
}

.readerswall li.reader-card span.reader-name {
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink-1);
}

.reader-count {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-3);
    margin: 0.15rem 0 0.65rem;
}

.reader-bar {
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: var(--bg-subtle);
    overflow: hidden;
    display: block;
}

.reader-bar b {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--accent-primary);
}

/* ==========================================================================
   7. COMMENTS & DISCUSSION SECTION (Scoped to section.comments & #commentform)
   ========================================================================== */

section.comments {
    margin-top: 2rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--border-hairline);
}

.comments-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.comments-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-1);
}

.comments-count-badge {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 0.16rem 0.62rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-weight: 600;
}

.comment.depth-1 {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1rem !important;
    box-shadow: var(--shadow-sm);
}

.comment .comment {
    margin-left: 1.5rem !important;
    margin-top: 0.85rem !important;
    padding-left: 1rem !important;
    border-left: 2px solid var(--border-strong) !important;
    background: transparent;
}

.comment-body {
    padding: 0.25rem 0 !important;
}

.comment .comment-author {
    display: flex;
    align-items: center;
    margin: 0 0 0.65rem 0 !important;
}

.comment .comment-author .avatar,
body.night .comment .comment-author .avatar,
body.sepia .comment .comment-author .avatar {
    float: none !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    margin: 0 0.75rem 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border-hairline) !important;
}

.comment .comment-author cite,
.comment .comment-author span {
    top: 0 !important;
    font-style: normal;
    font-weight: 700;
    color: var(--ink-1);
}

.comment-meta a {
    position: static !important;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3) !important;
}

.comment .comment-meta {
    height: auto !important;
    line-height: 1.4 !important;
    margin-left: 3.1rem;
    margin-top: -0.45rem;
    margin-bottom: 0.6rem;
}

.comment-body p {
    margin: 0.35rem 0 0 3.1rem !important;
    font-size: 0.94rem !important;
    line-height: 1.7 !important;
    color: var(--ink-2) !important;
}

/* Comment Form Inputs, Checkbox Fix & Submit Button */
#respond {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    padding: 1.65rem 1.85rem;
    margin: 1.75rem 0 3.25rem !important;
    box-shadow: var(--shadow-sm);
}

#respond h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink-1);
    margin-bottom: 0.75rem;
}

#commentform p {
    top: 0 !important;
    margin: 0.75rem 0 !important;
}

#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url {
    display: inline-block !important;
    width: calc(33.333% - 0.5rem) !important;
    margin-right: 0.5rem !important;
    vertical-align: top;
}

#commentform .comment-form-url {
    margin-right: 0 !important;
}

#commentform label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 0.35rem;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
body.night #commentform input[type="text"],
body.night #commentform input[type="email"],
body.night #commentform input[type="url"],
body.night #commentform textarea,
body.sepia #commentform input[type="text"],
body.sepia #commentform input[type="email"],
body.sepia #commentform input[type="url"],
body.sepia #commentform textarea {
    width: 100% !important;
    padding: 0.68rem 0.9rem !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-canvas) !important;
    color: var(--ink-1) !important;
    border: 1px solid var(--border-hairline) !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-soft) !important;
}

/* Cookie Consent Checkbox Row */
#commentform p.comment-form-cookies-consent {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0.85rem 0 !important;
}

#commentform input[type="checkbox"],
body.night #commentform input[type="checkbox"],
body.sepia #commentform input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--bg-canvas) !important;
    box-shadow: none !important;
    display: inline-block !important;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    accent-color: var(--accent-primary);
}

#commentform p.comment-form-cookies-consent label {
    display: inline !important;
    margin: 0 !important;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--ink-3);
    cursor: pointer;
}

#commentform input#submit,
body.night #commentform input#submit,
body.sepia #commentform input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 132px;
    padding: 0.68rem 1.6rem !important;
    border-radius: var(--radius-pill) !important;
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--accent-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 600;
    font-size: 0.86rem !important;
    cursor: pointer;
    transition: all 0.22s var(--ease-out-expo);
}

#commentform input#submit:hover,
body.night #commentform input#submit:hover,
body.sepia #commentform input#submit:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}

/* ==========================================================================
   8. FOOTER COLOPHON & FLOATING GLASSMORPHIC DOCK (.footer & .setting_tool)
   ========================================================================== */

.footer {
    margin-top: 3.5rem;
    padding: 2.25rem 0 2.75rem !important;
    border-top: 1px solid var(--border-hairline) !important;
    box-shadow: none !important;
    color: var(--ink-3);
    font-size: 0.84rem;
}

.footer-colophon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-brand-col,
.footer-meta-col {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.footer-divider {
    color: var(--ink-4);
}

.footer-shortcut-hint kbd {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.08rem 0.38rem;
    border-radius: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2);
}

.footer-perf {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-4);
}

/* Floating Glassmorphic Utility Dock (.setting_tool)
   IMPORTANT: Glass blur is applied on ::before rather than .setting_tool itself so
   .setting_tool does NOT create a containing block that traps position: fixed children (div.c / div.s)
   when anchored to the top-right masthead trigger! */
.setting_tool,
body.night .setting_tool,
body.sepia .setting_tool {
    position: fixed;
    bottom: 2rem;
    right: 1.75rem;
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.38rem;
    border-radius: var(--radius-pill);
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 950;
}

.setting_tool::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    z-index: -1;
}

.setting_tool > a,
body.night .setting_tool > a,
body.sepia .setting_tool > a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ink-2) !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-out-expo);
}

.setting_tool > a:hover {
    background: var(--bg-subtle) !important;
    color: var(--accent-primary) !important;
    transform: scale(1.06);
}

.setting_tool > a.back2top .progress-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}

.progress-ring__bg {
    stroke: var(--border-hairline);
}

.progress-ring__circle {
    stroke: var(--accent-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

/* Neutralize parent theme's broad `.setting_tool div` rule on any inner div inside .c or .s */
.setting_tool div.c div,
.setting_tool div.s div {
    display: flex !important;
    position: static !important;
    right: auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Spotlight Search Popover (.setting_tool div.s) */
.setting_tool > div.s,
body.night .setting_tool.search > div.s,
body.sepia .setting_tool.search > div.s {
    position: absolute;
    right: calc(100% + 14px) !important;
    bottom: 0 !important;
    top: auto !important;
    width: 320px !important;
    height: auto !important;
    padding: 0.45rem !important;
    border-radius: 16px !important;
    background: var(--bg-glass-strong) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    z-index: 980 !important;
    transform-origin: 100% 100%;
    animation: popover-spring-in 0.24s var(--ease-out-expo) forwards !important;
}

.setting_tool.is-top-anchored > div.s,
body.night .setting_tool.is-top-anchored.search > div.s,
body.sepia .setting_tool.is-top-anchored.search > div.s {
    position: fixed !important;
    top: var(--popover-top, 64px) !important;
    right: var(--popover-right, 24px) !important;
    bottom: auto !important;
    left: auto !important;
    transform-origin: 100% 0%;
}

.setting_tool.search > div.s {
    display: block !important;
}

.setting_tool.search > div.s form.search {
    display: flex;
    align-items: center;
    position: relative;
}

.search-popover-icon {
    position: absolute;
    left: 0.9rem;
    color: var(--ink-3);
    font-size: 0.9rem;
    pointer-events: none;
}

.setting_tool.search > div.s input,
body.night .setting_tool.search > div.s input,
body.sepia .setting_tool.search > div.s input {
    height: 40px !important;
    width: 100% !important;
    padding: 0 3.4rem 0 2.35rem !important;
    border-radius: 12px !important;
    background: var(--bg-subtle) !important;
    color: var(--ink-1) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.86rem !important;
    border: 1px solid var(--border-hairline) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.setting_tool.search > div.s input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-soft) !important;
}

.search-kbd-hint {
    position: absolute;
    right: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    padding: 0.14rem 0.42rem;
    border-radius: 5px;
    background: var(--bg-elevated);
    color: var(--ink-3);
    border: 1px solid var(--border-hairline);
    pointer-events: none;
    line-height: 1.2;
}

/* ==========================================================================
   Appearance & Typography Studio Popover (.setting_tool > div.c)
   - Harmonized airy card surfaces, refined typography, 6-column CSS Grid
   - Viewport-relative fixed positioning when triggered from top-right masthead
   ========================================================================== */

@keyframes popover-spring-in {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.setting_tool > div.c,
body.night .setting_tool.colors > div.c,
body.sepia .setting_tool.colors > div.c {
    position: absolute;
    right: calc(100% + 14px) !important;
    bottom: 0 !important;
    top: auto !important;
    width: 276px !important;
    height: auto !important;
    padding: 1rem 1.05rem 1.05rem !important;
    border-radius: 18px !important;
    background: var(--bg-glass-strong) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    z-index: 980 !important;
    font-family: var(--font-sans) !important;
    transform-origin: 100% 100%;
    animation: popover-spring-in 0.22s var(--ease-out-expo) forwards !important;
}

.setting_tool.is-top-anchored > div.c,
body.night .setting_tool.is-top-anchored.colors > div.c,
body.sepia .setting_tool.is-top-anchored.colors > div.c {
    position: fixed !important;
    top: var(--popover-top, 62px) !important;
    right: var(--popover-right, 24px) !important;
    bottom: auto !important;
    left: auto !important;
    transform-origin: 100% 0%;
}

/* 6-Column CSS Grid Container */
.setting_tool.colors > div.c ul {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.48rem !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Section Headers inside <ul> (li.hr-top & li.hr-mid) */
.setting_tool.colors > div.c li.hr {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 0.15rem !important;
    margin: 0 0 0.1rem 0 !important;
    line-height: 1.3 !important;
    cursor: default !important;
    border: none !important;
}

.setting_tool.colors > div.c li.hr.hr-mid {
    margin-top: 0.45rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid var(--border-hairline) !important;
}

.hr-title-cn {
    font-family: var(--font-sans) !important;
    font-size: 0.74rem !important;
    font-weight: 650 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0.02em !important;
}

.hr-title-sub {
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.03em !important;
    opacity: 0.8;
}

/* Row 1: 3 Harmonized Theme Swatch Cards (Each spans 2 of 6 columns) */
.setting_tool.colors > div.c li.color {
    grid-column: span 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0.55rem 0.35rem !important;
    border-radius: 12px !important;
    background: var(--bg-subtle) !important;
    color: var(--ink-2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border: 1.5px solid var(--border-hairline) !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    transition: all 0.2s var(--ease-out-expo) !important;
}

.setting_tool.colors > div.c li.color:hover {
    transform: translateY(-1px);
    background: var(--bg-elevated) !important;
    color: var(--ink-1) !important;
    border-color: var(--border-strong) !important;
}

/* Swatch Color Orbs */
.swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.22s var(--ease-out-expo);
}

.swatch-light {
    background: linear-gradient(135deg, #2A9D8F 0%, #95D5B2 100%);
    box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px rgba(42, 157, 143, 0.3);
}

.swatch-sepia {
    background: linear-gradient(135deg, #C89F78 0%, #E6CCB2 100%);
    box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px rgba(200, 159, 120, 0.35);
}

.swatch-night {
    background: linear-gradient(135deg, #1E3A5F 0%, #48CAE4 100%);
    box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px rgba(72, 202, 228, 0.35);
}

.swatch-label {
    font-family: var(--font-sans) !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Row 3: 2 Typography Specimen Cards (Each spans 3 of 6 columns) */
.setting_tool.colors > div.c li.font {
    grid-column: span 3 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 12px !important;
    background: var(--bg-subtle) !important;
    border: 1.5px solid var(--border-hairline) !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--ink-1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    transition: all 0.2s var(--ease-out-expo) !important;
}

.setting_tool.colors > div.c li.font:hover {
    transform: translateY(-1px);
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    font-weight: normal !important;
}

.font-sample {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-2);
    flex-shrink: 0;
}

.font-sample-serif {
    font-family: Georgia, "Songti SC", "Noto Serif SC", serif !important;
    font-weight: 500;
}

.font-sample-sans {
    font-family: var(--font-sans) !important;
    font-weight: 600;
}

.font-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    min-width: 0;
}

.font-meta strong {
    font-family: var(--font-sans) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--ink-1) !important;
    letter-spacing: 0.01em !important;
}

.font-meta small {
    font-family: var(--font-sans) !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: var(--ink-3) !important;
    margin-top: 1px;
    letter-spacing: 0.01em !important;
}

/* Precision Active State for Both Theme & Font Cards */
.setting_tool.colors > div.c li.color.is-active,
.setting_tool.colors > div.c li.font.is-active {
    outline: none !important;
    background: var(--bg-elevated) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-soft), 0 4px 10px -2px rgba(42, 157, 143, 0.12) !important;
}

.setting_tool.colors > div.c li.color.is-active .swatch-label {
    color: var(--accent-primary) !important;
    font-weight: 600 !important;
}

.setting_tool.colors > div.c li.font.is-active .font-sample {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #FFFFFF;
}

.setting_tool.colors > div.c li.font.is-active .font-meta strong {
    color: var(--accent-primary) !important;
}

/* ==========================================================================
   9. 404 PAGE & EMPTY STATES
   ========================================================================== */

.editorial-404-card,
.empty-state-card {
    text-align: center;
    padding: 3.75rem 2rem !important;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.editorial-404-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.editorial-404-display {
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 12vw, 7rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--accent-primary);
    margin: 0 0 0.75rem;
}

.editorial-404-subtitle,
.empty-state-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink-1);
    margin: 0 0 0.75rem;
}

.editorial-404-desc,
.empty-state-desc {
    max-width: 460px;
    margin: 0 auto 1.75rem !important;
    color: var(--ink-3);
    font-size: 0.94rem;
}

.editorial-404-search {
    display: flex;
    max-width: 420px;
    margin: 0 auto 1.5rem;
    gap: 0.5rem;
}

.editorial-404-search input {
    flex: 1;
    height: 42px;
    padding: 0 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--bg-canvas);
    color: var(--ink-1);
    font-size: 0.9rem;
}

.editorial-404-search button,
.btn-editorial-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 1.35rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary);
    color: #FFFFFF !important;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.editorial-404-search button:hover,
.btn-editorial-primary:hover {
    filter: brightness(1.06);
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS (Tablet & Mobile Precision)
   ========================================================================== */

@media screen and (max-width: 768px) {
    .container,
    section.container.main-load {
        width: 92% !important;
        padding: 0 !important;
    }

    .header {
        margin-bottom: 1.75rem;
        padding: 1.15rem 0 0;
    }

    .masthead-top {
        flex-wrap: wrap;
    }

    .masthead-center-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        padding-top: 0.5rem;
    }

    .cmd-label,
    .cmd-kbd,
    .footer-shortcut-hint {
        display: none !important;
    }

    .masthead-cmd-btn {
        width: 32px;
        padding: 0;
        justify-content: center;
    }

    .header h1.fullname,
    body.night .header h1.fullname {
        font-size: 1.5rem !important;
        line-height: 1.32 !important;
    }

    .feed-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .feed-section-en,
    .feed-section-sep {
        display: none;
    }

    .post-list .meta,
    .post-list .meta.is-featured-post {
        padding: 1.35rem 1.25rem !important;
    }

    .post-list .meta main.meta-body {
        flex-direction: column;
        gap: 0.9rem;
    }

    .post-list .meta main .thumb {
        order: -1;
        width: 100% !important;
        height: 176px !important;
    }

    .article-colophon-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-share-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .nearbypost,
    body.night .nearbypost,
    body.sepia .nearbypost {
        grid-template-columns: 1fr;
    }

    .nearbypost div.alignright {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .archive-stats-grid {
        grid-template-columns: 1fr;
    }

    #commentform .comment-form-author,
    #commentform .comment-form-email,
    #commentform .comment-form-url {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    #respond {
        padding: 1.35rem 1.25rem;
    }

    .setting_tool {
        bottom: 1.25rem;
        right: 1rem;
    }

    .setting_tool div.s {
        width: calc(100vw - 5.5rem) !important;
        max-width: 280px;
    }
}

/* ==========================================================================
   11. v4.0 FRESH COASTAL MAGAZINE HOMEPAGE:
       - Expanded 1040px Magazine Canvas for Index / Archive
       - 2-Column Interactive "Island Whale" Hero Bento Stage
       - Interactive Topic Filter Bar + Instant Search
       - 12-Column Asymmetric Magazine Rhythm Grid + Generative SVG Covers
       - Bottom Discovery & Serendipity Bento Strip
   ========================================================================== */

:root {
    --container-wide: 1040px;
}

/* Expand Homepage & Archive Container to 1040px while keeping Single Post Reading at 780px */
.is-index-header .masthead-container,
body.home .posts > .container,
body.archive .posts > .container,
body.search .posts > .container,
body.home .footer-container,
body.archive .footer-container {
    max-width: var(--container-wide) !important;
}

/* Hide redundant un-scrolled .infos bar on homepage since placard is integrated into Hero Bento */
.infos.is-home-infos:not(.fixed) {
    display: none !important;
}

/* 2-Column Interactive "Island Whale" Hero Bento Stage */
.home-hero-bento {
    display: grid;
    grid-template-columns: 1.28fr 1fr;
    gap: 1.35rem;
    align-items: stretch;
    margin-top: 0.25rem;
}

.hero-story-col {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.hero-story-col::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ambient-top-left), transparent 70%);
    pointer-events: none;
}

.hero-issue-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.24rem 0.72rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    margin-bottom: 1rem;
}

.issue-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-soft);
}

.issue-sep {
    color: var(--ink-4);
}

.home-hero-bento .home-hero-title {
    font-size: clamp(1.85rem, 3.2vw, 2.45rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.35rem !important;
}

/* Interactive Poetic Epigraph Card inside Hero */
.hero-epigraph-card {
    margin: 1.15rem 0 1.35rem;
    padding: 0.95rem 1.15rem;
    border-radius: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.epigraph-quote-line {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex: 1;
    min-width: 200px;
}

.epigraph-quote-line .placard-text {
    font-size: 0.9rem;
    color: var(--ink-1);
    font-weight: 500;
    line-height: 1.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.epigraph-quote-line .placard-text.is-fading {
    opacity: 0;
    transform: translateY(3px);
}

.epigraph-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-refresh-placard,
.btn-hero-roam {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    height: 28px;
    padding: 0 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2) !important;
    font-family: var(--font-sans);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s var(--ease-out-expo);
}

.btn-refresh-placard:hover,
.btn-hero-roam:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.btn-refresh-placard.is-spinning svg {
    animation: spin-once 0.5s linear infinite;
}

@keyframes spin-once {
    to { transform: rotate(360deg); }
}

/* Live Site Telemetry Strip */
.hero-telemetry-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-hairline);
}

.telemetry-item {
    display: flex;
    align-items: baseline;
    gap: 0.38rem;
}

.telemetry-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.telemetry-label {
    font-size: 0.76rem;
    color: var(--ink-3);
}

.telemetry-divider {
    width: 1px;
    height: 14px;
    background: var(--border-hairline);
}

/* Right Column: Art-Directed "Island Whale & Coastal Breeze" SVG Card */
.hero-visual-col {
    display: flex;
}

.whale-art-card {
    --tilt-x: 0px;
    --tilt-y: 0px;
    width: 100%;
    border-radius: 22px;
    background: linear-gradient(155deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.whale-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    z-index: 2;
}

.whale-freq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
}

.whale-freq-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: inline-block;
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.45); opacity: 0.45; }
}

.whale-coord {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-3);
}

.whale-svg-stage {
    margin: 0.35rem -1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whale-illustration {
    width: 100%;
    max-height: 175px;
    display: block;
    transform: translate3d(var(--tilt-x), var(--tilt-y), 0);
    transition: transform 0.25s ease-out;
}

.art-whale-group {
    animation: whale-bob 5.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes whale-bob {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
}

.whale-card-bottom {
    text-align: center;
    z-index: 2;
    padding-top: 0.25rem;
}

.whale-caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-3);
}

/* ==========================================================================
   Interactive Topic & Category Filter Bar + Quick Search (.feed-toolbar)
   ========================================================================== */

.feed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.feed-topics-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
    min-width: 240px;
}

.topic-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.78rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
}

.topic-filter-pill:hover {
    background: var(--bg-subtle);
    color: var(--ink-1);
}

.topic-filter-pill.is-active {
    background: var(--accent-primary);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 2px 8px -2px rgba(42, 157, 143, 0.35);
}

.topic-pill-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    opacity: 0.75;
}

.feed-controls-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.feed-quick-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.feed-quick-filter i {
    position: absolute;
    left: 0.72rem;
    font-size: 0.78rem;
    color: var(--ink-3);
    pointer-events: none;
}

.feed-quick-filter input {
    height: 30px;
    width: 158px;
    padding: 0 0.75rem 0 2rem !important;
    border-radius: var(--radius-pill) !important;
    background: var(--bg-subtle) !important;
    border: 1px solid var(--border-hairline) !important;
    color: var(--ink-1) !important;
    font-family: var(--font-sans);
    font-size: 0.76rem !important;
    transition: width 0.25s var(--ease-out-expo), border-color 0.2s ease, background-color 0.2s ease;
}

.feed-quick-filter input:focus {
    width: 200px;
    background: var(--bg-elevated) !important;
    border-color: var(--accent-primary) !important;
}

/* ==========================================================================
   12-Column Asymmetric Magazine Rhythm Grid & Generative SVG Covers
   ========================================================================== */

.meta-card-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
}

.meta-content-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Generative SVG Cover Panel (.meta-generative-cover) */
.meta-generative-cover {
    width: 220px;
    min-height: 148px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--motif-bg1, rgba(42, 157, 143, 0.12)) 0%, var(--motif-bg2, rgba(72, 202, 228, 0.14)) 100%);
    border: 1px solid var(--border-hairline);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s ease;
}

.post-list .meta:hover .meta-generative-cover {
    border-color: var(--border-strong);
}

.motif-top-row,
.motif-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    z-index: 2;
}

.motif-keyword {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--motif-accent, var(--accent-primary));
    border: 1px solid var(--border-hairline);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.motif-index {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink-3);
    opacity: 0.75;
}

.motif-svg-wrap {
    margin: -0.35rem -0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s var(--ease-out-expo);
}

.post-list .meta:hover .motif-svg-wrap {
    transform: scale(1.05);
}

.motif-svg-wrap svg {
    width: 100%;
    height: 92px;
    display: block;
}

.motif-read-min {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

.motif-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--ink-1);
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease-out-expo), background-color 0.25s ease, color 0.25s ease;
}

.post-list .meta:hover .motif-arrow {
    background: var(--accent-primary);
    color: #FFFFFF;
    transform: translate(2px, -2px);
}

/* Desktop 12-Column Magazine Rhythm Layout (data-layout="magazine") */
@media screen and (min-width: 860px) {
    .post-list[data-layout="magazine"] {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .post-list[data-layout="magazine"] .reade_more,
    .post-list[data-layout="magazine"] .empty-state-card {
        grid-column: 1 / -1;
    }

    /* #1 Cover Story Card: Full 12 Columns, Wide Visual Right Panel */
    .post-list[data-layout="magazine"] .meta.rhythm-cover {
        grid-column: span 12;
        padding: 2.1rem 2.25rem !important;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-cover .meta-generative-cover,
    .post-list[data-layout="magazine"] .meta.rhythm-cover .thumb.meta-visual-col {
        width: 310px;
        min-height: 190px;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-cover .motif-svg-wrap svg {
        height: 120px;
    }

    /* #2-#3 & #5-#6 Duo Spotlight Cards: 6 Columns Each, Stacked Visual Top Banner */
    .post-list[data-layout="magazine"] .meta.rhythm-duo {
        grid-column: span 6;
        padding: 1.5rem 1.65rem !important;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-duo .meta-card-grid {
        flex-direction: column-reverse;
        gap: 1.1rem;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-duo .meta-generative-cover,
    .post-list[data-layout="magazine"] .meta.rhythm-duo .thumb.meta-visual-col {
        width: 100%;
        min-height: 132px;
    }

    /* #4 & #7 Horizontal Feature Cards: Full 12 Columns */
    .post-list[data-layout="magazine"] .meta.rhythm-feature {
        grid-column: span 12;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-feature .meta-generative-cover,
    .post-list[data-layout="magazine"] .meta.rhythm-feature .thumb.meta-visual-col {
        width: 250px;
    }

    /* #8, #9, #10 Trio Digest Cards: 4 Columns Each (3 Cards Side-by-Side!) */
    .post-list[data-layout="magazine"] .meta.rhythm-trio {
        grid-column: span 4;
        padding: 1.4rem 1.45rem !important;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-trio .meta-card-grid {
        flex-direction: column-reverse;
        gap: 0.95rem;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-trio .meta-generative-cover,
    .post-list[data-layout="magazine"] .meta.rhythm-trio .thumb.meta-visual-col {
        width: 100%;
        min-height: 108px;
        padding: 0.65rem 0.85rem;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-trio .motif-svg-wrap svg {
        height: 68px;
    }

    .post-list[data-layout="magazine"] .meta.rhythm-trio header h2 {
        font-size: 1.15rem !important;
    }

    /* When Filtered by Category or Search, Arrange Visible Cards in Even 6-Column Pairs */
    .post-list[data-layout="magazine"].is-filtered-view .meta {
        grid-column: span 6 !important;
    }

    .post-list[data-layout="magazine"].is-filtered-view .meta .meta-card-grid {
        flex-direction: column-reverse;
        gap: 1.05rem;
    }

    .post-list[data-layout="magazine"].is-filtered-view .meta .meta-generative-cover {
        width: 100%;
        min-height: 128px;
    }
}

/* Layout Mode 2: Bento 2-Column Equal Grid Adjustments for .meta-card-grid */
@media screen and (min-width: 769px) {
    .post-list[data-layout="bento"] .meta:not(.is-featured-post) .meta-card-grid {
        flex-direction: column-reverse;
        gap: 1.05rem;
    }

    .post-list[data-layout="bento"] .meta:not(.is-featured-post) .meta-generative-cover {
        width: 100%;
        min-height: 132px;
    }
}

/* Layout Mode 3: Minimal Index View Adjustments */
.post-list[data-layout="minimal"] .meta-generative-cover,
.post-list[data-layout="minimal"] .thumb.meta-visual-col {
    display: none !important;
}

/* ==========================================================================
   Bottom Discovery & Serendipity Bento Strip (.discovery-bento-strip)
   ========================================================================== */

.discovery-bento-strip {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.discovery-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.discovery-serendipity {
    background: linear-gradient(145deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
    border-color: var(--border-strong);
}

.discovery-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-hairline);
}

.discovery-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--ink-1);
}

.discovery-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.84rem;
    color: var(--ink-3);
}

.discovery-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.discovery-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    color: var(--ink-2) !important;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s var(--ease-out-expo);
}

.discovery-pill b {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent-primary);
}

.discovery-pill:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.discovery-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.btn-discovery-roam {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.68rem 1.15rem;
    border-radius: 12px;
    background: var(--accent-primary);
    color: #FFFFFF !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.22s var(--ease-out-expo);
}

.btn-discovery-roam:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Tablet & Mobile Responsive Rules for Magazine Homepage */
@media screen and (max-width: 859px) {
    .home-hero-bento,
    .discovery-bento-strip {
        grid-template-columns: 1fr;
    }

    .meta-card-grid {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .meta-generative-cover,
    .thumb.meta-visual-col {
        width: 100% !important;
        min-height: 136px !important;
    }

    .feed-controls-right {
        width: 100%;
        justify-content: space-between;
    }

    .feed-quick-filter {
        flex: 1;
    }

    .feed-quick-filter input,
    .feed-quick-filter input:focus {
        width: 100%;
    }
}

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