/* ==========================================================================
   KUROSHIRO - DESIGN SYSTEM & STYLESHEET
   Aesthetic: Premium Monochrome (Black & White)
   ========================================================================== */

/* 1. Variable Tokens & Theme Definitions */
:root {
        /* Font Stacks */
        --font-sans: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

        /* Transitions */
        --transition-smooth: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
        --transition-slow: 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Dark Theme (Default) */
html,
html[data-theme="dark"] {
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --bg-tertiary: #121212;
        
        --border-color: #1a1a1a;
        --border-color-hover: #ffffff;
        
        --text-primary: #ffffff;
        --text-secondary: #888888;
        --text-muted: #444444;
        
        --accent-bg: #ffffff;
        --accent-text: #000000;
        
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.8);
        --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.9);
}

/* Light Theme */
html[data-theme="light"] {
        --bg-primary: #ffffff;
        --bg-secondary: #fcfcfc;
        --bg-tertiary: #f4f4f4;
        
        --border-color: #e5e5e5;
        --border-color-hover: #000000;
        
        --text-primary: #000000;
        --text-secondary: #666666;
        --text-muted: #aaaaaa;
        
        --accent-bg: #000000;
        --accent-text: #ffffff;
        
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.03);
        --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.05);
}

/* 2. Global Reset & Base Elements */
*, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

html, body {
        overflow-x: hidden;
        width: 100%;
}

body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: background-color 0.3s ease, color 0.3s ease;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
}

a {
        color: inherit;
        text-decoration: none;
        transition: color var(--transition-smooth);
}

/* Pin the footer to the viewport bottom on short pages WITHOUT the dead-space
   gap: body is a flex column, so .site-main flexes to absorb any leftover
   height. The footer then sits flush at the bottom, never mid-page. */
.site-main {
        flex: 1 0 auto;
}

img {
        max-width: 100%;
        height: auto;
        display: block;
}

button, input, textarea, select {
        font-family: inherit;
        color: inherit;
        background: none;
        border: none;
        outline: none;
}

/* 3. Utility Layout Classes */
.container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 24px;
        padding-right: 24px;
}

.section-spacing {
        /* Breathing room below the sticky header (was cramped on mobile) and a
           guaranteed gap above the footer, while staying compact on desktop. */
        padding-top: clamp(32px, 4vw, 40px);
        padding-bottom: clamp(48px, 6vw, 64px);
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
}

.text-mono {
        font-family: var(--font-mono);
}

.uppercase-label {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--text-secondary);
}

/* Visually hidden, available to assistive tech (WP standard class). */
.screen-reader-text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
}

/* 4. Header & Navigation */
header.site-header {
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: background-color 0.3s ease, border-color 0.3s ease;
}

html[data-theme="light"] header.site-header {
        background-color: rgba(252, 252, 252, 0.85);
}
html[data-theme="dark"] header.site-header {
        background-color: rgba(10, 10, 10, 0.85);
}

header.site-header .nav-container {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
}

.header-right-group {
        display: flex;
        align-items: center;
        gap: 32px;
        flex-grow: 1;
        justify-content: flex-end;
}

.site-logo a {
        font-family: var(--font-sans);
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: opacity var(--transition-smooth);
}
.site-logo a:hover {
        opacity: 0.8;
}

.site-logo span {
        font-weight: 400;
        color: var(--text-secondary);
        background: none;
        padding: 0;
        border-radius: 0;
}

/* Search bar styling */
.header-search {
        position: relative;
        max-width: 240px;
        width: 100%;
        display: none; /* hidden on mobile, flex on desktop */
}

@media (min-width: 1025px) {
        .header-search {
                display: block;
        }
}

.header-search input {
        width: 100%;
        background-color: var(--bg-primary);
        border: 1px solid var(--border-color);
        padding: 6px 12px 6px 14px;
        padding-right: 36px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-family: var(--font-mono);
        transition: border-color var(--transition-smooth);
}

.header-search input:focus {
        border-color: var(--text-primary);
}

.header-search button {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
}
.header-search button:hover {
        color: var(--text-primary);
}

/* Slim mobile search row under the header bar (shown <=1024px). */
.header-mobile-search {
        display: none;
}

/* Mobile search toggle icon: hidden on desktop (full search bar shown there). */
.mobile-search-btn {
        display: none;
}

.header-mobile-search .search-form {
        position: relative;
        display: flex;
        align-items: center;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        background-color: var(--bg-primary);
        overflow: hidden;
}

.header-mobile-search .search-field {
        flex: 1;
        padding: 9px 14px;
        font-size: 0.85rem;
        font-family: var(--font-mono);
        background: transparent;
        border: none;
}

.header-mobile-search .search-submit {
        padding: 0 14px;
        align-self: stretch;
        display: flex;
        align-items: center;
        color: var(--text-secondary);
        cursor: pointer;
}

/* ----- Live search dropdown (instant results, shared desktop + mobile) ----- */
.live-search-wrap {
        position: relative;
}

.live-search-results {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 200;
        background-color: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        overflow: hidden;
        max-height: 60vh;
        overflow-y: auto;
        display: none;
}

html[data-theme="light"] .live-search-results {
        background-color: rgba(252, 252, 252, 0.95);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.live-search-results.is-open {
        display: block;
}

.live-search-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
        transition: background-color 0.2s ease;
}

.live-search-item:last-child {
        border-bottom: none;
}

.live-search-item:hover,
.live-search-item.is-active {
        background-color: var(--bg-tertiary);
}

.ls-thumb-wrap {
        width: 56px;
        height: 32px;
        border-radius: 4px;
        overflow: hidden;
        background-color: var(--bg-primary);
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .ls-thumb-wrap {
        border-color: rgba(0, 0, 0, 0.05);
}

.ls-thumb-wrap img,
.ls-thumb-wrap svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.ls-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
}

.ls-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ls-content .ls-meta {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.ls-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: color 0.2s ease, transform 0.2s ease;
        flex-shrink: 0;
}

.live-search-item:hover .ls-arrow {
        color: var(--text-primary);
        transform: translateX(2px);
}

.live-search-status {
        padding: 12px 14px;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: center;
}

/* On desktop the dropdown hangs from the compact pill: give it min width. */
@media (min-width: 1025px) {
        .header-search .live-search-results {
                left: auto;
                right: 0;
                width: 340px;
        }
}

/* Nav Menu & Actions */
.header-actions {
        display: flex;
        align-items: center;
        gap: 20px;
}

.theme-toggle {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        cursor: pointer;
        background-color: var(--bg-secondary);
        transition: border-color var(--transition-smooth), transform var(--transition-smooth);
}

.theme-toggle:hover {
        border-color: var(--text-primary);
        transform: scale(1.05);
}

.theme-toggle svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
}

.theme-toggle .sun-icon {
        display: none;
}

html[data-theme="light"] .theme-toggle .sun-icon {
        display: block;
}

html[data-theme="light"] .theme-toggle .moon-icon {
        display: none;
}

/* Mobile Nav Menu */
.mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
        width: 24px;
        height: 24px;
}

.mobile-menu-btn span {
        width: 20px;
        height: 2px;
        background-color: var(--text-primary);
        transition: transform var(--transition-smooth), opacity var(--transition-smooth);
        transform-origin: left center;
}

.mobile-menu-btn.open span:nth-child(1) {
        transform: rotate(45deg) translate(2px, -1px);
}

.mobile-menu-btn.open span:nth-child(2) {
        opacity: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
        transform: rotate(-45deg) translate(2px, 1px);
}

@media (min-width: 1025px) {
        .mobile-menu-btn {
                display: none;
        }
}

/* Navigation Links Drawer for Mobile.
   IMPORTANT: the header has backdrop-filter, which makes it the containing
   block for fixed-position descendants — so position:fixed here would resolve
   `top` against the HEADER, not the viewport (drawer rendered far too low).
   position:absolute + top:100% anchors the drawer exactly under the full
   header (banner + bar + search row) with zero coordinate math. */
.main-nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(85dvh - 64px);
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
        padding: 24px 24px 36px;
        gap: 24px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        will-change: transform, opacity;
        z-index: 99;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

html[data-theme="light"] .main-nav {
        background: var(--bg-secondary);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.main-nav.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
}

/* Mobile Nav Overlay Backdrop */
.nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 95;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        will-change: opacity;
}

.nav-overlay.open {
        opacity: 1;
        visibility: visible;
}

/* Staggered entrance animations removed — they caused severe lag on mobile
   because 8 keyframe animations fired simultaneously on every menu open.
   The menu now opens with a single transform+opacity transition on the
   .main-nav container itself, which is GPU-accelerated and smooth. */

.main-nav ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
}

.main-nav a {
        font-family: var(--font-mono);
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        transition: color var(--transition-smooth), border-color var(--transition-smooth);
}

.main-nav a:hover,
.main-nav .current-menu-item a {
        color: var(--text-primary);
        border-color: var(--text-primary);
}

/* Mobile sub-menu styling */
.main-nav ul.sub-menu {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 20px;
        margin-top: 8px;
        border-left: 1px solid var(--border-color);
        width: 100%;
}
.main-nav ul.sub-menu a {
        font-size: 0.8rem;
        padding: 8px 0;
        border-bottom: none;
        letter-spacing: 0.08em;
        text-transform: uppercase;
}


@media (min-width: 1025px) {
        .main-nav {
                position: static;
                display: flex;
                flex-direction: row;
                height: auto !important;
                max-height: none !important;
                width: auto;
                background: transparent !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0;
                gap: 32px;
                transform: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                overflow-y: visible;
                margin-left: 40px;
                margin-right: auto;
        }
        .main-nav ul {
                flex-direction: row;
                gap: 28px;
                width: auto;
        }
        .main-nav a {
                font-size: 0.75rem;
                font-weight: 600;
                display: inline-block;
                position: relative;
                padding: 6px 0;
                border-bottom: none;
                width: auto;
        }
        /* Modern premium under-line slide animation */
        .main-nav a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--text-primary);
                transform: scaleX(0);
                transform-origin: right center;
                transition: transform var(--transition-smooth);
        }
        .main-nav a:hover::after,
        .main-nav .current-menu-item a::after {
                transform: scaleX(1);
                transform-origin: left center;
        }
        .main-nav a:hover,
        .main-nav .current-menu-item a {
                color: var(--text-primary);
                border-bottom: none;
        }
        .main-nav .menu-item-has-children {
                position: relative;
        }
        .main-nav ul.sub-menu {
                position: absolute;
                top: 100%;
                left: 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
                background-color: var(--bg-secondary);
                border: 1px solid var(--border-color);
                border-radius: 6px;
                padding: 12px 16px;
                min-width: 180px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
                z-index: 100;
                opacity: 0;
                visibility: hidden;
                transform: translateY(8px);
                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
        }
        .main-nav .menu-item-has-children:hover ul.sub-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
        }
        .main-nav ul.sub-menu li {
                width: 100%;
                margin: 0;
        }
        .main-nav ul.sub-menu a {
                display: block;
                width: 100%;
                padding: 6px 0;
                font-size: 0.7rem;
                font-weight: 600;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                color: var(--text-secondary);
                border: none !important;
        }
        .main-nav ul.sub-menu a:hover {
                color: var(--text-primary);
        }
        .main-nav ul.sub-menu a::after {
                display: none !important;
        }
        .main-nav .menu-arrow svg {
                transition: transform 0.2s ease;
        }
        .main-nav .menu-item-has-children:hover .menu-arrow svg {
                transform: rotate(180deg);
        }
        
        /* Mega Menu Dropdowns (Desktop) */
        .main-nav .mega-menu {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(8px);
                background-color: var(--bg-secondary);
                border: 1px solid var(--border-color);
                border-radius: 8px;
                padding: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
                z-index: 100;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.25s ease;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
        }
        .main-nav .menu-item-has-children:hover .mega-menu {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(0);
        }
        .main-nav .mega-menu-genres {
                width: 480px;
        }
        .main-nav .mega-menu-years {
                width: 280px;
        }
        .main-nav .mega-menu-grid {
                display: grid;
                gap: 6px 12px;
                width: 100%;
        }
        .main-nav .mega-menu-genres .mega-menu-grid {
                grid-template-columns: repeat(3, 1fr);
        }
        .main-nav .mega-menu-years .mega-menu-grid {
                grid-template-columns: repeat(4, 1fr);
        }
        .main-nav .mega-menu-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 0.72rem !important;
                font-family: var(--font-sans) !important;
                font-weight: 600 !important;
                color: var(--text-secondary) !important;
                padding: 6px 10px !important;
                border-radius: 6px !important;
                transition: background-color var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth) !important;
                text-transform: capitalize !important;
                letter-spacing: 0.02em !important;
                white-space: nowrap;
        }
        .main-nav .mega-menu-item:hover {
                background-color: var(--bg-tertiary) !important;
                color: var(--text-primary) !important;
                transform: translateX(3px);
        }
        .main-nav .mega-menu-years .mega-menu-item {
                justify-content: center;
                font-family: var(--font-mono) !important;
                font-weight: 700 !important;
        }
        .main-nav .mega-menu-years .mega-menu-item:hover {
                transform: scale(1.05);
        }
        .main-nav .mega-item-bullet {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--text-muted);
                transition: color var(--transition-smooth), transform var(--transition-smooth);
        }
        .main-nav .mega-menu-item:hover .mega-item-bullet {
                color: var(--text-primary);
                transform: translateX(1px);
        }

}

/* Mobile Mega Menu Layout — collapsed accordion (one open at a time).
   The mega panels used to be permanently expanded in the drawer, swallowing
   the whole screen. They now start collapsed (max-height: 0) and the JS
   accordion opens one while smoothly closing the other.
   PERFORMANCE: max-height transitions trigger layout reflow on every frame,
   which is slow on mobile. To mitigate: will-change: max-height promotes
   the element to its own GPU layer, and the transition duration is kept
   short (0.25s) so the reflow window is minimal. */
@media (max-width: 1024px) {
        .main-nav .mega-menu {
                width: 100%;
                margin-top: 0;
                padding: 0 !important;
                background: none !important;
                border: none !important;
                box-shadow: none !important;
                position: static !important;
                transform: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.25s ease;
                will-change: max-height;
        }
        .main-nav li.is-open > .mega-menu {
                margin-top: 12px;
        }
        .main-nav .menu-item-mega > a .menu-arrow svg {
                transition: transform 0.3s ease;
        }
        .main-nav li.is-open > a .menu-arrow svg {
                transform: rotate(180deg);
        }
        .main-nav .mega-menu-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px 16px;
                width: 100%;
                padding-left: 16px;
                border-left: 1px solid var(--border-color);
                margin-top: 8px;
                padding-bottom: 8px;
        }
        .main-nav .mega-menu-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 0.8rem !important;
                font-family: var(--font-sans) !important;
                font-weight: 600 !important;
                color: var(--text-secondary) !important;
                padding: 8px 0 !important;
                text-transform: capitalize !important;
        }
        .main-nav .mega-menu-item:hover {
                color: var(--text-primary) !important;
        }
        .main-nav .mega-menu-years .mega-menu-item {
                font-family: var(--font-mono) !important;
                justify-content: flex-start;
        }
        .main-nav .mega-item-bullet {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--text-muted);
        }

        /* Mobile Header Responsiveness Overrides.
           Logo pinned LEFT, controls right. (Centering the logo was tried and
           reverted: the EN/JA pill + theme toggle + hamburger are too wide on
           phones, so a centered logo collides with them.) */
        header.site-header .nav-container {
                height: 56px;
                justify-content: space-between;
        }
        .header-right-group {
                gap: 12px !important;
                flex-grow: 0 !important;
        }
        .header-actions {
                gap: 10px !important;
        }
        .header-social {
                display: none !important;
        }
        .site-logo a {
                font-size: 1rem !important;
                letter-spacing: 0.08em !important;
                white-space: nowrap;
        }
        /* Compact the EN/JA pill so it fits alongside the other controls. */
        .title-lang-toggle {
                padding: 4px 8px !important;
                gap: 4px !important;
        }
        .title-lang-toggle .lang-label-en,
        .title-lang-toggle .lang-label-ja {
                font-size: 0.6rem !important;
        }
        .container {
                padding-left: 16px !important;
                padding-right: 16px !important;
        }

        /* Collapsible search panel under the header bar — hidden until the
           search icon in the bar is tapped (standard mobile pattern; the old
           always-visible row wasted vertical space on every page). */
        .header-mobile-search {
                display: block;
                overflow: hidden;
                max-height: 0;
                padding: 0 16px;
                border-top: 1px solid transparent;
                transition: max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease, overflow 0s 0s;
        }
        .header-mobile-search.is-open {
                max-height: 72px;
                overflow: visible;
                padding: 8px 16px;
                border-top-color: var(--border-color);
                transition: max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease, overflow 0s 0.25s;
        }
        /* Show the search icon button on mobile only. */
        .mobile-search-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                color: var(--text-secondary);
                cursor: pointer;
                background: transparent;
                border: none;
        }
        .mobile-search-btn[aria-expanded="true"] {
                color: var(--text-primary);
                background-color: var(--bg-secondary);
        }
        /* Drawer top comes from `top: 100%` (anchored under the header);
           exact height is set by JS from the live header bottom. */
}

/* Global SVG Menu Icon animations */
.main-nav .menu-icon {
        transition: transform var(--transition-smooth), color var(--transition-smooth);
}
.main-nav a:hover .menu-icon {
        transform: scale(1.1);
}





/* 6. Title Cards Grid Layout */
.title-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
}

@media (min-width: 480px) {
        .title-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 32px;
        }
}

@media (min-width: 769px) {
        .title-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
        }
}

/* Card design - Borderless, transparent, premium details */
.title-card {
        background-color: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform var(--transition-smooth);
        /* Skip layout/paint work for off-screen cards entirely: the browser only
           renders cards near the viewport, so grids stay cheap no matter how many
           posts a page lists. The intrinsic-size placeholder (16:9 thumb + content)
           keeps the scrollbar stable before a card is rendered. */
        content-visibility: auto;
        contain-intrinsic-size: auto 340px;
}

.title-card:hover {
        transform: translateY(-4px);
}

.card-thumbnail {
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
        background-color: var(--bg-tertiary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.title-card:hover .card-thumbnail {
        border-color: var(--border-color-hover);
        box-shadow: var(--shadow-lg);
}

.card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.title-card:hover .card-thumbnail img {
        transform: scale(1.03);
}

/* ----- Skeleton load + reveal for ALL card thumbnails -----
   Remote posters (Google Photos) load slowly, so without this the card sits
   blank while the bytes arrive. The shimmer is a persistent ::after overlay on
   the wrapper: JS adds .is-loading while the image loads (YouTube-style
   placeholder) and removes it on decode, so the overlay FADES OUT as the
   picture appears. Because the overlay sits on top of the <img> rather than
   hiding it, eager / LCP images keep opacity:1 the whole time — first paint
   and LCP are never delayed, yet every card still gets a loading state and a
   reveal. Lazy [data-settle] images additionally ease in (opacity+scale);
   eager .img-eager images settle with a transform-only zoom.
   Everything is gated behind html.js, so with JS disabled the image is fully
   visible and static (progressive enhancement — it can never get stuck blank). */
html.js .card-thumbnail::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        background-color: var(--bg-tertiary);
        background-image: linear-gradient(
                100deg,
                transparent 20%,
                rgba(255, 255, 255, 0.05) 40%,
                rgba(255, 255, 255, 0.09) 50%,
                rgba(255, 255, 255, 0.05) 60%,
                transparent 80%
        );
        background-size: 200% 100%;
        background-repeat: no-repeat;
        pointer-events: none;
        transition: opacity 0.45s ease;
}

html[data-theme="light"].js .card-thumbnail::after {
        background-image: linear-gradient(
                100deg,
                transparent 20%,
                rgba(0, 0, 0, 0.04) 40%,
                rgba(0, 0, 0, 0.07) 50%,
                rgba(0, 0, 0, 0.04) 60%,
                transparent 80%
        );
}

html.js .card-thumbnail.is-loading::after {
        opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
        /* Animate the shimmer sweep only while loading. */
        html.js .card-thumbnail.is-loading::after {
                animation: kuro-shimmer 1.3s ease-in-out infinite;
        }

        /* Lazy pre-reveal state: hidden + slightly scaled, eases in on load. */
        html.js .card-thumbnail img[data-settle] {
                opacity: 0;
                transform: scale(1.05);
                transition:
                        opacity 0.55s ease,
                        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        html.js .card-thumbnail img[data-settle].img-ready {
                opacity: 1;
                transform: scale(1);
        }

        /* Eager / LCP settle: transform-ONLY (opacity stays 1 so LCP paint is
           never delayed). JS tags the img .img-eager while it loads, then
           .img-ready eases it from a soft zoom to rest as the shimmer fades out. */
        html.js .card-thumbnail img.img-eager {
                transform: scale(1.06);
                transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        html.js .card-thumbnail img.img-eager.img-ready {
                transform: scale(1);
        }

        /* Keep the hover zoom working after either reveal has finished. */
        html.js .title-card:hover .card-thumbnail img.img-ready {
                transform: scale(1.03);
        }
}

/* Reduced motion: no shimmer sweep or zoom, but lazy images still cross-fade
   gently so they never just snap/pop or sit blank. Eager images stay static. */
@media (prefers-reduced-motion: reduce) {
        html.js .card-thumbnail img[data-settle] {
                opacity: 0;
                transition: opacity 0.3s ease;
        }
        html.js .card-thumbnail img[data-settle].img-ready {
                opacity: 1;
        }
}

@keyframes kuro-shimmer {
        from { background-position: 150% 0; }
        to   { background-position: -150% 0; }
}

/* Card badges - minimal overlay labels */
.card-badge {
        position: absolute;
        top: 10px;
        padding: 4px 8px;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 700;
        border-radius: 4px;
        text-transform: uppercase;
        z-index: 2;
        letter-spacing: 0.05em;
}

/* Card info content */
.card-content {
        padding: 16px 0 0 0; /* no internal side padding since card is borderless */
        display: flex;
        flex-direction: column;
        flex-grow: 1;
}

.card-meta {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-family: var(--font-mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
}

.card-title {
        font-family: var(--font-sans);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 12px;
}

.card-title a {
        color: var(--text-primary);
        transition: color var(--transition-smooth);
}

.card-title a:hover {
        color: var(--text-secondary);
}

/* Premium inline CTA text link */
.card-btn-download {
        padding: 0;
        background: none;
        color: var(--text-primary);
        border: none;
        border-radius: 0;
        font-size: 0.75rem;
        font-family: var(--font-mono);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        cursor: pointer;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: relative;
}

.card-btn-download::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--text-primary);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform var(--transition-smooth);
}

.title-card:hover .card-btn-download::after {
        transform: scaleX(1);
        transform-origin: left center;
}

.card-btn-download .arrow {
        transition: transform var(--transition-smooth);
        display: inline-block;
}

.title-card:hover .card-btn-download .arrow {
        transform: translateX(4px);
}

/* Typographic left-bordered section title header (premium look) */
.section-title-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        color: var(--text-primary);
        padding: 0 0 0 12px;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        clip-path: none;
        margin-bottom: 24px;
        border-left: 3px solid var(--text-primary);
        line-height: 1;
}


/* ==========================================================================
   7. Single Title Page — Compact Cinematic Layout
   A tight banner + two-column body (main + sticky rail). Every animation is
   transform/opacity only, gated behind html.js + prefers-reduced-motion. The
   poster is the LCP element; the blurred backdrop is deprioritised so it never
   steals LCP. New BEM-ish `.sg-*` namespace — no legacy single-page classes.
   ========================================================================== */
.single {
        width: 100%;
}

/* ---- Cinematic banner ---- */
.sg-banner {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        padding: clamp(28px, 5vw, 56px) 0;
        transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sg-banner__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
}

.sg-banner__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.2);
        filter: grayscale(1) blur(46px);
        opacity: 0.3;
}

.sg-banner__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
                radial-gradient(130% 90% at 15% 10%, rgba(0, 0, 0, 0) 0%, var(--bg-secondary) 78%),
                linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-secondary) 96%);
}

html[data-theme="light"] .sg-banner__bg img {
        opacity: 0.16;
}

.sg-banner__inner {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: center;
}

@media (min-width: 769px) {
        .sg-banner__inner {
                grid-template-columns: minmax(0, 300px) 1fr;
                gap: clamp(28px, 4vw, 48px);
        }
}

.sg-poster {
        position: relative;
        width: 100%;
        max-width: 440px;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        outline: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.8);
        transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

@media (min-width: 769px) {
        .sg-poster {
                max-width: 300px;
                margin: 0;
        }
}

html[data-theme="light"] .sg-poster {
        outline-color: rgba(0, 0, 0, 0.04);
        box-shadow: var(--shadow-lg);
}

.sg-poster:hover {
        transform: translateY(-4px);
        box-shadow: 0 36px 64px -22px rgba(0, 0, 0, 0.85);
}

.sg-poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

/* Image-level settle: the poster (esp. a remote Google-Photos landscape) often
   arrives AFTER the container's kuro-rise has finished, so the picture itself
   would just pop in flat. When the <img> actually decodes, JS adds .is-ready
   and it eases from a subtle scale to rest. Transform-ONLY (opacity stays 1) so
   the LCP paint time is never delayed. */
@media (prefers-reduced-motion: no-preference) {
        html.js .sg-poster img {
                transform: scale(1.06);
                transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
                will-change: transform;
        }
        html.js .sg-poster img.is-ready {
                transform: scale(1);
                will-change: auto;
        }
}

@media (prefers-reduced-motion: no-preference) {
        .sg-poster {
                animation: kuro-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
}

.sg-headline {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

/* Status kicker */
.sg-kicker {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--text-secondary);
        margin-bottom: 14px;
}

.status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--text-primary);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .status-dot {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
        .status-dot {
                animation: kuro-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
        }
}

@keyframes kuro-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: 0.4; transform: scale(0.75); }
}

.kicker-sep {
        color: var(--text-muted);
}

.sg-title {
        font-size: clamp(1.45rem, 2.8vw, 2.1rem);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin-bottom: 14px;
        /* No text-wrap: balance — it was prematurely splitting titles that
           could fit on one line into two "balanced" shorter lines, leaving
           empty space on the right. Default text-wrap (wrap) only breaks
           when the text actually exceeds the available width. */
}

/* Rating + genre pills */
.sg-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

/* ---- Two-column body ---- */
/* Mobile-first: single column, flexbox with order so comments appear last. */
.sg-body {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vw, 32px);
        padding-top: clamp(28px, 4vw, 44px);
        padding-bottom: clamp(44px, 6vw, 76px);
}

/* On mobile, .sg-content-left uses display: contents so its children
   (.sg-main + .sg-comments-wrap) become direct flex children of .sg-body.
   This lets us use `order` to push .sg-comments-wrap below .sg-rail on
   mobile (order: 3), while keeping it inside the wrapper on desktop where
   the wrapper groups them as the left column. */
@media (max-width: 999px) {
        .sg-content-left {
                display: contents;
        }
        .sg-main { order: 1; }
        .sg-rail { order: 2; }
        .sg-comments-wrap { order: 3; }
}

/* Desktop: flexbox two-column with align-items: flex-start.
   - .sg-content-left (wrapping .sg-main + .sg-comments-wrap) is the left
     column, flex: 1.
   - .sg-rail is the right column, fixed 340px, position: sticky.
   - CRITICAL: align-items: flex-start means each flex item keeps its
     NATURAL height — they do NOT stretch to match each other. This is
     what prevents the empty-space gap. The rail is only as tall as its
     content (Information + Related), the left column is only as tall as
     its content (Watch + Synopsis + Screenshots + Comments). Neither
     forces the other to be taller. */
@media (min-width: 1000px) {
        .sg-body {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: clamp(20px, 3vw, 32px);
        }
        .sg-content-left {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-width: 0;
        }
        .sg-rail {
                flex: 0 0 340px;
                width: 340px;
                max-width: 340px;
                position: sticky;
                top: 84px;
        }
}

/* Left column wrapper — base styles only (no display property here, that's
   set exclusively in the media queries above to avoid cascade conflicts
   where a base `display: flex` would override the mobile `display: contents`). */
.sg-content-left {
        min-width: 0;
        gap: clamp(20px, 3vw, 28px);
}

.sg-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vw, 28px);
}

.sg-rail {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vw, 28px);
}

/* Comments wrapper */
.sg-comments-wrap {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vw, 28px);
}

/* ---- Cards ---- */
.sg-card {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: clamp(18px, 2.4vw, 26px);
        transition: border-color 0.3s ease, background-color 0.3s ease;
}

.sg-card__title {
        font-family: var(--font-sans);
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin: 0 0 16px;
        display: flex;
        align-items: center;
        gap: 10px;
}

.sg-card__title::before {
        content: "";
        width: 3px;
        height: 16px;
        border-radius: 3px;
        background-color: var(--text-primary);
        flex-shrink: 0;
}

/* Synopsis prose */
.sg-prose {
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.75;
}

.sg-prose > * + * {
        margin-top: 1.25em;
}

.sg-prose p {
        margin: 0 0 1.25em 0 !important;
        line-height: 1.85;
}

.card-badge.badge-subdub {
        background: linear-gradient(135deg, #0284c7, #0369a1);
        color: #ffffff;
        font-weight: 700;
        font-size: 10px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        padding: 3px 7px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* WordPress block editor alignment classes.
   The theme deregisters wp-block-library.css (which normally ships these
   rules) to save ~40KB of unused CSS. Without these rules, the alignment
   buttons in the WordPress editor (left/center/right) have no effect on
   the live page — the classes exist in the HTML but nothing styles them.
   These rules restore that functionality inside the synopsis. */
.sg-prose .has-text-align-center,
.entry-content .has-text-align-center {
        text-align: center;
}
.sg-prose .has-text-align-right,
.entry-content .has-text-align-right {
        text-align: right;
}
.sg-prose .has-text-align-left,
.entry-content .has-text-align-left {
        text-align: left;
}
/* Classic-editor alignment classes (aligncenter, alignleft, alignright). */
.sg-prose .aligncenter,
.entry-content .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}
.sg-prose .alignleft,
.entry-content .alignleft {
        float: left;
        margin-right: 1em;
}
.sg-prose .alignright,
.entry-content .alignright {
        float: right;
        margin-left: 1em;
}

.sg-prose a {
        color: var(--text-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--text-muted);
        transition: text-decoration-color var(--transition-smooth);
}

.sg-prose a:hover {
        text-decoration-color: var(--text-primary);
}


/* Synopsis — collapsible to keep the page compact when the synopsis is long.
   CSS does the work: max-height clamp by default, .is-expanded removes it.
   JS only handles the click toggle + auto-hides the button for short synopses. */
.sg-synopsis-wrap {
        position: relative;
        max-height: 220px;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sg-synopsis-wrap.is-expanded {
        max-height: 5000px;
}

.sg-synopsis-fade {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 56px;
        background: linear-gradient(to bottom, transparent 0%, var(--bg-secondary) 90%);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
}

.sg-synopsis-wrap.is-expanded ~ .sg-synopsis-fade,
.sg-synopsis-card:has(.sg-synopsis-wrap.is-expanded) .sg-synopsis-fade {
        opacity: 0;
}

.sg-synopsis-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        width: 100%;
        margin-top: 14px;
        padding: 10px 16px;
        background: none;
        border: none;
        border-top: 1px solid var(--border-color);
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        transition: color var(--transition-smooth), background-color var(--transition-smooth);
}

.sg-synopsis-toggle:hover {
        color: var(--text-primary);
        background-color: var(--bg-tertiary);
}

.sg-synopsis-toggle__label-open {
        display: none;
}

.sg-synopsis-toggle[aria-expanded="true"] .sg-synopsis-toggle__label-closed {
        display: none;
}

.sg-synopsis-toggle[aria-expanded="true"] .sg-synopsis-toggle__label-open {
        display: inline;
}

.sg-synopsis-toggle__chev {
        transition: transform var(--transition-smooth);
}

.sg-synopsis-toggle[aria-expanded="true"] .sg-synopsis-toggle__chev {
        transform: rotate(180deg);
}

.sg-synopsis-toggle.sg-synopsis-toggle--hidden {
        display: none;
}

.sg-synopsis-card:has(.sg-synopsis-toggle--hidden) .sg-synopsis-wrap {
        max-height: none;
}

.sg-synopsis-card:has(.sg-synopsis-toggle--hidden) .sg-synopsis-fade {
        display: none;
}

@media (max-width: 480px) {
        .sg-synopsis-wrap {
                max-height: 180px;
        }
}


/* Screenshots */
.sg-shots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
}

@media (min-width: 560px) {
        .sg-shots {
                grid-template-columns: repeat(3, 1fr);
        }
}

.sg-shot {
        position: relative;
        display: block;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        background-color: var(--bg-tertiary);
        transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.sg-shot:hover {
        border-color: var(--border-color-hover);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
}

.sg-shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.sg-shot:hover img {
        transform: scale(1.07);
}

.sg-shot__zoom {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.34);
        opacity: 0;
        transition: opacity var(--transition-smooth);
}

.sg-shot:hover .sg-shot__zoom {
        opacity: 1;
}

.sg-shot__zoom svg {
        transform: scale(0.8);
        transition: transform var(--transition-smooth);
}

.sg-shot:hover .sg-shot__zoom svg {
        transform: scale(1);
}

/* Watch & Download — one unified, click-to-expand episode list. Each episode
   slides open to reveal BOTH its streaming and download links together. Big
   lists stay light: link DOM is built lazily on open (see initEpisodeAccordions). */

/* Optional season-batch row (compact chips above the episode list) */
.wd-batch {
        margin-bottom: 16px;
}

.wd-batch__label {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        margin-bottom: 10px;
}

.wd-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

/* Batch chips (.wd-srv) — the interactive anchors of the batch row. They
   previously had NO rule at all and fell back to the browser's default
   blue underline links, visually breaking the premium hub. Styled as compact
   monochrome pills consistent with the wd-btn-link family. */
.wd-srv {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-tertiary);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth);
}

.wd-srv b {
        color: var(--text-secondary);
        font-weight: 400;
}

.wd-srv:hover,
.wd-srv:focus-visible {
        border-color: var(--border-color-hover);
        background: var(--accent-bg);
        color: var(--accent-text);
}

.wd-srv:hover b {
        color: var(--accent-text);
}

/* Episode filter (only shown for longer lists) */
.wd-filter {
        width: 100%;
        margin-bottom: 12px;
        padding: 9px 16px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background-color: var(--bg-primary);
        font-family: var(--font-mono);
        font-size: 0.74rem;
        color: var(--text-primary);
        transition: border-color var(--transition-smooth);
}

.wd-filter:focus {
        border-color: var(--text-primary);
}

/* Episode list */
.wd-eps {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
}




.wd-ep {
        border-bottom: 1px solid var(--border-color);
}

.wd-ep:last-child {
        border-bottom: none;
}

.wd-ep.is-hidden {
        display: none;
}

.wd-ep__head {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 16px;
        cursor: pointer;
        text-align: left;
        background: none;
        transition: background-color var(--transition-smooth);
}

.wd-ep__head:hover {
        background-color: var(--bg-tertiary);
}

.wd-ep__name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text-primary);
}

.wd-ep__hint {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        white-space: nowrap;
}

.wd-ep__chev {
        flex-shrink: 0;
        color: var(--text-secondary);
        transition: transform var(--transition-smooth), color var(--transition-smooth);
}

.wd-ep.is-open .wd-ep__chev {
        transform: rotate(180deg);
        color: var(--text-primary);
}

/* Smooth height reveal (GPU-friendly grid-rows trick, no JS measuring).
   Padding lives on the always-present content (.wd-links), never toggled on the
   collapsing element, so nothing jumps. Content fades in with the height. */
.wd-ep__panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-ep.is-open .wd-ep__panel {
        grid-template-rows: 1fr;
}

.wd-ep__inner {
        overflow: hidden;
        min-height: 0;
}

/* Link groups inside an open episode. Watch + Download sit side by side on
   wider screens so the wide panel isn't half-empty; they stack on mobile. */
/* Watch & Download rows layout: groups Watch + Download of same quality/server on a single compact row. */
.wd-files-list {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        padding: 0.6em 1em 0.9em;
        opacity: 0;
        transition: opacity 0.26s ease 0.04s;
        font-size: clamp(13px, 1.1vw, 15px);
}

.wd-ep.is-open .wd-files-list {
        opacity: 1;
}

.wd-file-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8em;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.4em;
        padding: 0.55em 0.9em;
        transition: border-color var(--transition-smooth), background-color var(--transition-smooth);
}

.wd-file-row:hover {
        border-color: var(--border-color-hover);
        background-color: var(--bg-tertiary);
}

.wd-file-left {
        display: flex;
        align-items: center;
        gap: 0.6em;
}

.wd-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

.wd-badge--quality {
        font-family: var(--font-mono);
        font-size: 0.8em;
        font-weight: 800;
        padding: 0.28em 0.6em;
        border-radius: 0.35em;
        text-transform: uppercase;
        letter-spacing: 0.02em;
}

/* Quality monochrome badges */
.wd-badge--q-red {
        background-color: var(--text-primary);
        color: var(--bg-primary);
        border: 1px solid var(--text-primary);
}

.wd-badge--q-green {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border: 1px solid var(--border-color-hover);
}

.wd-badge--q-blue {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
}

.wd-badge--q-grey {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
}

.wd-file-right {
        display: flex;
        align-items: center;
        gap: 0.6em;
}

.wd-btn-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35em;
        padding: 0.38em 0.8em;
        border-radius: 0.35em;
        font-family: var(--font-sans);
        font-size: 0.72em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.wd-btn-link svg {
        width: 1em;
        height: 1em;
}

.wd-btn-link--watch {
        background-color: var(--text-primary);
        color: var(--bg-primary);
        border: 1px solid var(--text-primary);
}

.wd-btn-link--watch:hover {
        background-color: transparent;
        color: var(--text-primary);
        border-color: var(--text-primary);
        transform: translateY(-0.1em);
        box-shadow: var(--shadow-sm);
}

.wd-btn-link--download {
        background-color: transparent;
        border: 1px solid var(--border-color-hover);
        color: var(--text-primary);
}

.wd-btn-link--download:hover {
        background-color: var(--text-primary);
        color: var(--bg-primary);
        border-color: var(--text-primary);
        transform: translateY(-0.1em);
        box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
        .wd-files-list {
                font-size: 13px;
                padding: 0.5em 0.7em 0.8em;
        }
        .wd-file-row {
                padding: 0.5em 0.7em;
                gap: 0.6em;
        }
        .wd-btn-link {
                padding: 0.42em 0.85em;
                font-size: 0.7em;
        }
        .wd-badge--quality {
                font-size: 0.75em;
                padding: 0.24em 0.5em;
        }
}


/* Screenshot lightbox */
.sg-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(16px, 4vw, 48px);
        background-color: rgba(0, 0, 0, 0.92);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sg-lightbox.is-open {
        opacity: 1;
        visibility: visible;
}

.sg-lightbox__img {
        max-width: min(1200px, 100%);
        max-height: 86vh;
        width: auto;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        transform: scale(0.96);
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sg-lightbox.is-open .sg-lightbox__img {
        transform: scale(1);
}

.sg-lightbox__btn {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        cursor: pointer;
        transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.sg-lightbox__btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
}

.sg-lightbox__close {
        top: 16px;
        right: 16px;
}

.sg-lightbox__nav--prev {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
}

.sg-lightbox__nav--next {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
}

.sg-lightbox__nav--prev:hover,
.sg-lightbox__nav--next:hover {
        transform: translateY(-50%) scale(1.05);
}

.sg-lightbox__count {
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 600px) {
        .sg-lightbox__nav--prev { left: 8px; }
        .sg-lightbox__nav--next { right: 8px; }
}

/* ---- Sticky rail: Information ---- */
.sg-info__list {
        display: flex;
        flex-direction: column;
}

.sg-info__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 9px 0;
        border-bottom: 1px solid var(--border-color);
}

.sg-info__row:last-child {
        border-bottom: none;
}

.sg-info__row dt {
        font-family: var(--font-mono);
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        white-space: nowrap;
}

.sg-info__row dd {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-primary);
        text-align: right;
}

.sg-dim {
        color: var(--text-muted);
        font-weight: 600;
}

.sg-link {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--text-muted);
        transition: text-decoration-color var(--transition-smooth);
}

.sg-link:hover {
        text-decoration-color: var(--text-primary);
}

/* ---- Sticky rail: Related ---- */
.sg-related__list {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.sg-related__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 12px;
        transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.sg-related__item:hover {
        background-color: var(--bg-tertiary);
        transform: translateX(3px);
}

.sg-related__thumb {
        position: relative;
        flex-shrink: 0;
        width: 88px;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        background-color: var(--bg-tertiary);
}

.sg-related__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
}

.sg-related__item:hover .sg-related__thumb img {
        transform: scale(1.08);
}

.sg-related__meta {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

.sg-related__name {
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--text-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.sg-related__sub {
        margin-top: 3px;
        font-family: var(--font-mono);
        font-size: 0.64rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
}



/* 9. Pagination Styling */
.kuroshiro-pagination {
        display: flex;
        justify-content: center;
        gap: 6px;
        /* Clear separation from both the grid above and the footer below. */
        margin-top: clamp(32px, 5vw, 48px);
}

.kuroshiro-pagination .page-numbers {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-family: var(--font-mono);
        font-size: 0.9rem;
        transition: var(--transition-smooth);
}

.kuroshiro-pagination .page-numbers.current,
.kuroshiro-pagination .page-numbers:hover {
        border-color: var(--border-color-hover);
        background-color: var(--accent-bg);
        color: var(--accent-text);
}


/* 11. Footer Elements — compact single-row, sits right under the content */
footer.site-footer {
        background-color: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding: 22px 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
        transition: background-color 0.3s ease, border-color 0.3s ease;
}

footer.site-footer .footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
}

@media (min-width: 769px) {
        footer.site-footer .footer-container {
                flex-direction: row;
                justify-content: space-between;
                gap: 24px;
                text-align: left;
        }
}

/* Legal-link row — wraps cleanly on small screens. */
.footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 10px;
}

.footer-nav .separator {
        color: var(--text-muted);
        user-select: none;
}

.footer-nav a:hover {
        color: var(--text-primary);
}

.footer-copy {
        font-size: 0.8rem;
        color: var(--text-muted);
}

.footer-copy a {
        color: var(--text-secondary);
        transition: color 0.2s ease;
}

.footer-copy a:hover {
        color: var(--text-primary);
}

.perf-timer {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: var(--text-muted);
        display: flex;
        gap: 6px;
}


/* 12. Restricted (18+) Highlights */
.badge-restricted {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important; /* Premium rich crimson gradient */
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 4px !important;
        padding: 2px 6px !important;
        font-family: var(--font-sans) !important;
        font-size: 0.62rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        z-index: 3 !important;
        line-height: 1 !important;
}

html[data-theme="light"] .badge-restricted {
        background: linear-gradient(135deg, #ff4d6d 0%, #ff758f 100%) !important; /* Vibrant rose gradient */
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 2px 6px rgba(255, 77, 109, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.pill-rating.pill-restricted {
        background: rgba(220, 38, 38, 0.15) !important;
        color: #ff4a4a !important;
        border: 1px solid rgba(255, 74, 74, 0.35) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.meta-score {
        color: #eab308 !important; /* Premium gold */
        font-weight: 700 !important;
        display: inline-flex;
        align-items: center;
}

.meta-restricted {
        color: #ff4a4a !important; /* Premium red text accent */
        font-weight: 800 !important;
        letter-spacing: 0.05em !important;
}

/* ==========================================================================
   Bilingual Titles & Translation Toggles
   ========================================================================== */

.title-lang-toggle {
        position: relative;
        width: 76px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        cursor: pointer;
        background-color: var(--bg-secondary);
        padding: 0 8px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.05em;
        transition: border-color var(--transition-smooth), transform var(--transition-smooth);
        user-select: none;
}
.title-lang-toggle:hover {
        border-color: var(--text-primary);
        transform: scale(1.05);
}
.title-lang-toggle .lang-label-en,
.title-lang-toggle .lang-label-ja {
        z-index: 2;
        width: 24px;
        text-align: center;
        transition: color var(--transition-smooth);
}
.title-lang-toggle .lang-label-en {
        color: var(--text-primary);
}
.title-lang-toggle .lang-label-ja {
        color: var(--text-secondary);
}
.title-lang-toggle .lang-toggle-slider {
        position: absolute;
        left: 4px;
        top: 3px;
        width: 32px;
        height: 32px;
        background-color: var(--text-primary);
        border-radius: 16px;
        z-index: 1;
        transition: transform var(--transition-smooth);
}

/* Lang - English active */
html[data-title-lang="en"] .title-lang-toggle .lang-toggle-slider {
        transform: translateX(0);
}
html[data-title-lang="en"] .title-lang-toggle .lang-label-en {
        color: var(--bg-primary);
}
html[data-title-lang="en"] .title-lang-toggle .lang-label-ja {
        color: var(--text-secondary);
}

/* Lang - Japanese active */
html[data-title-lang="ja"] .title-lang-toggle .lang-toggle-slider {
        transform: translateX(34px);
}
html[data-title-lang="ja"] .title-lang-toggle .lang-label-en {
        color: var(--text-secondary);
}
html[data-title-lang="ja"] .title-lang-toggle .lang-label-ja {
        color: var(--bg-primary);
}

/* Title Wrapper Grid - 0 CLS & Hardware Accelerated Transitions */
.title-lang-wrapper {
        display: block;
        position: relative;
        width: 100%;
}

.title-lang-en,
.title-lang-ja {
        width: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
}

/* Transitions based on root attribute */
html[data-title-lang="en"] .title-lang-ja {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translateY(4px);
        visibility: hidden;
        pointer-events: none;
}
html[data-title-lang="en"] .title-lang-en {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
}

html[data-title-lang="ja"] .title-lang-en {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translateY(-4px);
        visibility: hidden;
        pointer-events: none;
}
html[data-title-lang="ja"] .title-lang-ja {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
}

/* Custom Header Social Links */
.header-social {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-right: 4px;
}
.header-social-link {
        color: var(--text-secondary);
        transition: color var(--transition-smooth), transform var(--transition-smooth);
        display: flex;
        align-items: center;
        justify-content: center;
}
.header-social-link:hover {
        color: var(--text-primary);
        transform: scale(1.05);
}

/* Header Announcement Banner */
.header-announcement-banner {
        background-color: #000000;
        color: #ffffff;
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 8px 16px;
        text-align: center;
        border-bottom: 1px solid #1e293b;
        transition: background-color 0.3s ease, color 0.3s ease;
}
.header-announcement-banner a {
        color: #ffffff;
        text-decoration: underline;
}
.header-announcement-banner a:hover {
        color: #cbd5e1;
}
html[data-theme="light"] .header-announcement-banner {
        background-color: #f1f5f9;
        color: #0f172a;
        border-bottom-color: #e2e8f0;
}
html[data-theme="light"] .header-announcement-banner a {
        color: #0f172a;
}
html[data-theme="light"] .header-announcement-banner a:hover {
        color: #475569;
}

/* ==========================================================================
   13. Motion System — Premium Entrance Reveals
   GPU-composited only (transform/opacity). Scroll reveals are gated behind
   html.js (set by the inline head script) so no-JS users always see content,
   and behind prefers-reduced-motion so it is fully accessible.
   JS removes .reveal/.is-visible after the entrance completes, returning the
   element to its natural state (restores card hover transforms).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
        html.js .reveal {
                opacity: 0;
                transform: translateY(18px);
                transition:
                        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
                transition-delay: var(--reveal-delay, 0ms);
        }

        html.js .reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
        }

        /* Secondary hero elements: fade-up on load (pure CSS, no JS required).
           Never applied to the H1 / LCP element. */
        .hero-fade {
                animation: kuro-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
                animation-delay: var(--hero-delay, 0ms);
        }


}

@keyframes kuro-fade-up {
        from {
                opacity: 0;
                transform: translateY(14px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

@keyframes kuro-rise {
        from {
                transform: translateY(16px);
        }
        to {
                transform: translateY(0);
        }
}

/* ==========================================================================
   14. Search Pill (used on the 404 page)
   ========================================================================== */
.hero-search-pill {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 540px;
        margin-top: 8px;
        background-color: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 6px 6px 6px 20px;
        transition: border-color var(--transition-smooth), transform var(--transition-smooth);
}

.hero-search-pill:focus-within {
        border-color: var(--text-primary);
        transform: translateY(-1px);
}

.hero-search-icon {
        flex-shrink: 0;
        color: var(--text-secondary);
        margin-right: 10px;
}

.hero-search-pill .search-field {
        flex-grow: 1;
        min-width: 0;
        font-size: 0.95rem;
        font-family: var(--font-sans);
        padding: 10px 0;
        background: transparent;
}

.hero-search-pill .search-field::placeholder {
        color: var(--text-muted);
}

.hero-search-submit {
        flex-shrink: 0;
        padding: 10px 22px;
        border-radius: 999px;
        background-color: var(--accent-bg);
        color: var(--accent-text);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.hero-search-submit:hover {
        opacity: 0.85;
        transform: scale(1.03);
}

/* ==========================================================================
   15. Shared Page Hero (archives, search, static pages, 404)
   ========================================================================== */
/* Premium Compact Typographic Accent Header (archives, search, static pages, 404) */
.archive-header-wrap {
        margin-bottom: 16px;
}

/* Tighten container padding-top when archive header is present */
.section-spacing:has(.archive-header-wrap) {
        padding-top: 20px !important;
}

.archive-header-premium {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        animation: kuro-premium-entrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.archive-header-premium .archive-kicker {
        font-weight: 700;
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-family: var(--font-mono);
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

/* Accent blinking dot before the kicker */
.archive-header-premium .archive-kicker::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--text-primary);
        animation: kuro-pulse-grow 2s infinite ease-in-out;
}

/* Separator slash between kicker and title */
.archive-header-premium .archive-kicker::after {
        content: '/';
        margin-left: 10px;
        color: var(--text-muted);
        font-weight: 400;
}

@keyframes kuro-pulse-grow {
        0%, 100% {
                opacity: 0.4;
                transform: scale(0.9);
        }
        50% {
                opacity: 1;
                transform: scale(1.15);
        }
}

.archive-header-premium .archive-title {
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        color: var(--text-primary);
        margin: 0;
        font-family: var(--font-sans);
}

.archive-header-premium .archive-title span {
        color: var(--text-secondary);
}

@keyframes kuro-premium-entrance {
        from {
                opacity: 0;
                transform: translateX(-8px);
        }
        to {
                opacity: 1;
                transform: translateX(0);
        }
}

/* ==========================================================================
   16. Empty State (no results / 404)
   ========================================================================== */
.empty-state {
        max-width: 520px;
        margin: 40px auto;
        padding: 56px 32px;
        text-align: center;
        border: 1px dashed var(--border-color);
        border-radius: 12px;
        transition: border-color 0.3s ease;
}

.empty-state-icon {
        color: var(--text-muted);
        margin: 0 auto 16px;
}

.empty-state-title {
        font-size: 1.4rem;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
}

.empty-state-message {
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 0;
}

.empty-state-search {
        display: flex;
        margin-top: 24px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        overflow: hidden;
        background-color: var(--bg-primary);
        transition: border-color var(--transition-smooth);
}

.empty-state-search:focus-within {
        border-color: var(--text-primary);
}

.empty-state-search .search-field {
        flex-grow: 1;
        min-width: 0;
        padding: 12px 20px;
        font-size: 0.95rem;
        background: transparent;
}

.empty-state-search .search-submit-btn {
        flex-shrink: 0;
        padding: 0 24px;
        background-color: var(--accent-bg);
        color: var(--accent-text);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: opacity var(--transition-smooth);
}

.empty-state-search .search-submit-btn:hover {
        opacity: 0.85;
}

/* ==========================================================================
   16. Immersive 404 Page Hero (404.php)
   ========================================================================== */
.error-404-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: clamp(40px, 8vw, 80px) 24px;
        position: relative;
        overflow: hidden;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.02);
        margin-bottom: 48px;
}

html[data-theme="light"] .error-404-hero {
        background: radial-gradient(circle at center, rgba(0, 0, 0, 0.01) 0%, transparent 70%);
        border-color: rgba(0, 0, 0, 0.02);
}

.error-404-code {
        font-family: var(--font-mono);
        font-size: clamp(6rem, 16vw, 10rem);
        font-weight: 950;
        line-height: 0.95;
        letter-spacing: -0.06em;
        background: linear-gradient(180deg, var(--text-primary) 30%, rgba(255, 255, 255, 0.02) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 8px;
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.06));
}

html[data-theme="light"] .error-404-code {
        background: linear-gradient(180deg, var(--text-primary) 30%, rgba(0, 0, 0, 0.05) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: none;
}

.error-404-title {
        font-size: clamp(1.4rem, 4vw, 2.2rem);
        font-weight: 900;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: var(--text-primary);
        margin-bottom: 16px;
}

.error-404-desc {
        color: var(--text-secondary);
        font-size: 1.05rem;
        max-width: 520px;
        line-height: 1.6;
        margin-bottom: 36px;
}

.error-404-search {
        width: 100%;
        max-width: 480px;
        display: flex;
        justify-content: center;
}

.error-404-search .hero-search-pill {
        margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
        .error-404-code {
                animation: kuro-slide-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .error-404-title {
                animation: kuro-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
                animation-delay: 100ms;
        }
        .error-404-desc {
                animation: kuro-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
                animation-delay: 200ms;
        }
        .error-404-search {
                animation: kuro-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
                animation-delay: 300ms;
        }
}

@keyframes kuro-slide-down {
        from {
                opacity: 0;
                transform: translateY(-20px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

@keyframes kuro-slide-up {
        from {
                opacity: 0;
                transform: translateY(20px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

/* ==========================================================================
   17. Static Page Content Typography (page.php)
   ========================================================================== */
.page-content {
        max-width: 760px;
}

.entry-content {
        color: var(--text-secondary);
        font-size: 1.05rem;
        line-height: 1.8;
}

.entry-content > * + * {
        margin-top: 1.2em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
        color: var(--text-primary);
        margin-top: 1.8em;
        letter-spacing: -0.02em;
}

.entry-content a {
        color: var(--text-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--text-muted);
        transition: text-decoration-color var(--transition-smooth);
}

.entry-content a:hover {
        text-decoration-color: var(--text-primary);
}

.entry-content blockquote {
        border-left: 3px solid var(--text-primary);
        padding: 4px 0 4px 20px;
        font-style: italic;
        color: var(--text-primary);
}

.entry-content ul,
.entry-content ol {
        padding-left: 1.4em;
}

.entry-content code {
        font-family: var(--font-mono);
        font-size: 0.88em;
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 2px 6px;
}

.entry-content pre {
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px 20px;
        overflow-x: auto;
}

.entry-content pre code {
        background: none;
        border: none;
        padding: 0;
}

.entry-content img {
        border-radius: 8px;
        border: 1px solid var(--border-color);
}

.entry-content table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
        border: 1px solid var(--border-color);
        padding: 10px 14px;
        text-align: left;
}

.entry-content th {
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        background-color: var(--bg-secondary);
}

.page-links {
        margin-top: 32px;
        font-family: var(--font-mono);
        font-size: 0.85rem;
}

/* ==========================================================================
   18. Single Title Page Polish (shared pills / helpers)
   ========================================================================== */
.pill-tag {
        padding: 4px 12px;
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        transition: color var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);
}

.pill-tag:hover {
        color: var(--accent-text);
        background-color: var(--accent-bg);
        border-color: var(--accent-bg);
        transform: translateY(-1px);
}

.pill-rating {
        padding: 4px 12px;
        background-color: var(--accent-bg);
        color: var(--accent-text);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.pill-rating:hover {
        opacity: 0.85;
        transform: translateY(-1px);
}

/* ==========================================================================
   16. Floating Telegram Widget Panel
   ========================================================================== */
.tg-float-widget {
        position: fixed !important;
        right: 0 !important;
        bottom: 25% !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        font-family: var(--font-sans);
        pointer-events: none;
        visibility: visible !important;
}
.tg-float-tab, .tg-float-banner {
        position: absolute;
        right: 0;
        background-color: #24A1DE;
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 12px rgba(36, 161, 222, 0.35);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, visibility 0.3s;
        pointer-events: auto;
}
.tg-float-tab {
        width: 38px;
        height: 38px;
        border-radius: 8px 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
}
.tg-float-tab:hover {
        transform: translateX(-3px);
        background-color: #1d8abf;
}
.tg-float-tab svg {
        transform: translate(-1px, 0px);
        transition: transform 0.3s ease;
}
.tg-float-tab:hover svg {
        transform: translate(-1px, 0px) scale(1.05);
}
.tg-float-banner {
        border-radius: 12px 0 0 12px;
        display: flex;
        align-items: center;
}
.tg-float-content {
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 16px;
        color: #ffffff;
        text-decoration: none !important;
        gap: 12px;
        user-select: none;
}
.tg-banner-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
}
.tg-banner-divider {
        width: 1px;
        height: 22px;
        background-color: rgba(255, 255, 255, 0.25);
}
.tg-banner-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        white-space: nowrap;
}
.tg-kicker {
        font-family: var(--font-mono);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        line-height: 1;
}
.tg-title {
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        margin-top: 2px;
        line-height: 1.1;
}
.tg-banner-btn {
        background-color: #ffffff;
        color: #24A1DE;
        padding: 5px 13px 5px 9px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tg-float-content:hover .tg-banner-btn {
        transform: scale(1.04);
        background-color: #f8fafc;
        color: #1d8abf;
}
.tg-float-close {
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #1d8abf;
        border: 2px solid var(--bg-primary);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s, background-color 0.2s, color 0.2s;
        padding: 0;
}
.tg-float-close:hover {
        transform: translateY(-50%) scale(1.1);
        background-color: #ffffff;
        color: #24A1DE;
        border-color: #ffffff;
}

/* Collapsed/Expanded states */
.tg-float-widget.collapsed .tg-float-tab {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
}
.tg-float-widget.collapsed .tg-float-banner {
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
}
.tg-float-widget.expanded .tg-float-tab {
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
}
.tg-float-widget.expanded .tg-float-banner {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
}



/* ==========================================================================
   20. Comments Section — compact + premium
   ========================================================================== */

.sg-comments-card {
        padding: 22px 20px;
        border-radius: 10px;
}

/* Section title — compact with accent bar */
.sg-comments-card .sg-card__title {
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin: 0 0 16px 0;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 8px;
}
.sg-comments-card .sg-card__title::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: var(--text-primary);
        border-radius: 2px;
        flex-shrink: 0;
}

/* Comment list */
.comment-list {
        list-style: none;
        margin: 0;
        padding: 0;
}
.comment-list .children {
        list-style: none;
        margin: 10px 0 0 0;
        padding: 0 0 0 20px;
        border-left: 1px solid var(--border-color);
}
@media (max-width: 600px) {
        .comment-list .children {
                padding-left: 14px;
                margin-left: 2px;
        }
}

/* Each comment item — compact card */
.comment-item {
        margin: 0 0 12px 0;
        padding: 0;
        list-style: none;
}
.comment-item:last-child {
        margin-bottom: 0;
}
.comment-body {
        position: relative;
        padding: 10px 12px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        transition: border-color var(--transition-smooth);
}
.comment-item:hover > .comment-body {
        border-color: var(--border-color-hover);
}

/* Header: avatar + name + date — tight row */
.comment-header {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 6px;
}
.comment-avatar {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--text-primary);
        color: var(--bg-primary);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
}
.comment-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        min-width: 0;
        flex: 1;
}
.comment-author {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-primary);
        line-height: 1.2;
}
.comment-author a {
        color: var(--text-primary);
        text-decoration: none;
        transition: opacity var(--transition-smooth);
}
.comment-author a:hover {
        opacity: 0.7;
}
.comment-date {
        font-family: var(--font-mono);
        font-size: 0.66rem;
        color: var(--text-muted);
        letter-spacing: 0.02em;
}
.comment-date::before {
        content: '·';
        margin-right: 6px;
        color: var(--text-muted);
        opacity: 0.6;
}

/* Comment body text — compact */
.comment-content {
        font-size: 0.85rem;
        line-height: 1.55;
        color: var(--text-secondary);
        padding-left: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
}
.comment-content p {
        margin: 0 0 7px 0;
}
.comment-content p:last-child {
        margin-bottom: 0;
}
.comment-content a {
        color: var(--text-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--text-muted);
        transition: text-decoration-color var(--transition-smooth);
}
.comment-content a:hover {
        text-decoration-color: var(--text-primary);
}
.comment-content code {
        font-family: var(--font-mono);
        font-size: 0.83em;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 3px;
        padding: 1px 4px;
}

/* Pending-moderation notice */
.comment-pending {
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.78rem;
        padding: 5px 9px;
        background-color: var(--bg-tertiary);
        border-left: 2px solid var(--text-muted);
        border-radius: 0 4px 4px 0;
        margin-bottom: 7px;
}

/* Reply link — tiny mono pill */
.comment-footer {
        margin-top: 6px;
}
.comment-reply-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--font-mono);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-decoration: none;
        padding: 2px 0;
        transition: color var(--transition-smooth);
}
.comment-reply-link:hover {
        color: var(--text-primary);
}
.comment-reply-link svg {
        width: 10px;
        height: 10px;
}

/* Fade-in for new AJAX comments */
@keyframes kuro-comment-in {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
}
.comment-item.is-new {
        animation: kuro-comment-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.comment-item.is-new > .comment-body {
        border-color: var(--text-primary);
}

/* Pagination */
.comment-pagination {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: center;
        gap: 3px;
        font-family: var(--font-mono);
        font-size: 0.78rem;
}
.comment-pagination a,
.comment-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all var(--transition-smooth);
}
.comment-pagination a:hover {
        color: var(--accent-text);
        background-color: var(--accent-bg);
        border-color: var(--accent-bg);
}
.comment-pagination .current {
        color: var(--accent-text);
        background-color: var(--accent-bg);
        border-color: var(--accent-bg);
        font-weight: 700;
}

.sg-comments-closed {
        color: var(--text-muted);
        font-style: italic;
        margin: 12px 0 0 0;
        padding: 9px 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 0.82rem;
}

/* ==========================================================================
   21. Comment Form — compact + premium
   ========================================================================== */
.sg-comment-form {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--border-color);
}
.sg-comment-form-title {
        font-size: 0.92rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin: 0 0 14px 0;
        color: var(--text-primary);
}
#cancel-comment-reply-link {
        display: inline-block;
        margin-left: 10px;
        font-size: 0.66rem;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
        color: var(--text-muted);
        text-decoration: none;
        padding: 3px 9px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        transition: all var(--transition-smooth);
        vertical-align: middle;
}
#cancel-comment-reply-link:hover {
        color: var(--accent-text);
        background-color: var(--accent-bg);
        border-color: var(--accent-bg);
}

/* Fields grid */
.sg-comment-fields-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
}
@media (max-width: 600px) {
        .sg-comment-fields-row {
                grid-template-columns: 1fr;
                gap: 8px;
        }
}
.sg-comment-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.sg-comment-field--full {
        margin-bottom: 12px;
}
.sg-comment-field label {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 3px;
}
.sg-comment-field label .required {
        color: var(--text-primary);
        font-size: 1.1em;
        line-height: 1;
}

/* Inputs — compact, refined */
.sg-comment-field input,
.sg-comment-field textarea {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 7px;
        padding: 8px 11px;
        font-family: var(--font-sans);
        font-size: 0.85rem;
        color: var(--text-primary);
        transition: border-color var(--transition-smooth), background-color var(--transition-smooth), box-shadow var(--transition-smooth);
        width: 100%;
        box-sizing: border-box;
        line-height: 1.5;
}
.sg-comment-field input::placeholder,
.sg-comment-field textarea::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
}
.sg-comment-field input:hover,
.sg-comment-field textarea:hover {
        border-color: var(--text-muted);
}
.sg-comment-field input:focus,
.sg-comment-field textarea:focus {
        border-color: var(--text-primary);
        background-color: var(--bg-tertiary);
        outline: none;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}
html[data-theme="light"] .sg-comment-field input:focus,
html[data-theme="light"] .sg-comment-field textarea:focus {
        box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
.sg-comment-field textarea {
        resize: vertical;
        min-height: 80px;
        line-height: 1.55;
}

/* Honeypot */
.kuro-honeypot {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
}
.kuro-honeypot input {
        width: 1px;
        height: 1px;
}

/* Submit row */
.sg-comment-submit-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 4px;
}
.sg-comment-submit {
        background-color: var(--accent-bg);
        color: var(--accent-text);
        border: 1px solid var(--accent-bg);
        border-radius: 7px;
        padding: 8px 20px;
        font-family: var(--font-sans);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: opacity var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
}
.sg-comment-submit:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
}
.sg-comment-submit:active {
        transform: translateY(0);
}
.sg-comment-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
}

/* Inline status messages */
.comment-status {
        font-size: 0.8rem;
        font-family: var(--font-sans);
        padding: 7px 11px;
        border-radius: 6px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 6px;
}
.comment-status--success {
        color: var(--text-primary);
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
}
.comment-status--success::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--text-primary);
        flex-shrink: 0;
}
.comment-status--error {
        color: var(--text-primary);
        background-color: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        opacity: 0.9;
}
.comment-status--error::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--text-muted);
        flex-shrink: 0;
}

/* Logged-in / must-log-in notices */
.sg-comment-form .logged-in-as,
.sg-comment-form .must-log-in {
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin: 0 0 12px 0;
        padding: 8px 11px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
}
.sg-comment-form .logged-in-as a,
.sg-comment-form .must-log-in a {
        color: var(--text-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        font-weight: 600;
}

/* Reply form (moved below a comment) */
.sg-comments-card .comment-respond {
        margin-top: 12px;
        padding: 14px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
}
.sg-comments-card .comment-respond .sg-comment-form {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
}
.sg-comments-card .comment-respond .sg-comment-form-title {
        font-size: 0.85rem;
        margin-bottom: 10px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
        .sg-comments-card {
                padding: 16px 14px;
        }
        .sg-comment-submit {
                padding: 7px 18px;
                font-size: 0.76rem;
        }
        .sg-comment-field input,
        .sg-comment-field textarea {
                padding: 8px 10px;
                font-size: 0.84rem;
        }
        .comment-body {
                padding: 9px 11px;
        }
        .comment-avatar {
                width: 26px;
                height: 26px;
                font-size: 0.7rem;
        }
}

/* ==========================================================================
   22. Visible Breadcrumb Navigation
   Layout: flex row that wraps gracefully on narrow viewports. Gap-based
   spacing (not per-separator margins) keeps "HOME / ACTION / TITLE" tight
   and uniform at every breakpoint instead of "HOME    / ACTION     /".
   ========================================================================== */
.sg-breadcrumbs {
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        padding: 9px 0;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 0; /* mono font already has wide per-glyph advance */
}
.sg-breadcrumbs .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        /* row-gap | column-gap: rows breathe a little when wrapping on mobile,
           columns stay tight so the slash sits close to its neighbours. */
        gap: 4px 6px;
}
.sg-breadcrumbs a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--transition-smooth);
        white-space: nowrap;
}
.sg-breadcrumbs a:hover {
        color: var(--text-primary);
}
.sg-bc-sep {
        color: var(--text-muted);
        user-select: none;
        flex-shrink: 0;
        /* No horizontal margin — the parent's `gap` handles spacing uniformly. */
}
.sg-bc-current {
        color: var(--text-primary);
        font-weight: 700;
        min-width: 0;            /* allow flex item to shrink so ellipsis works */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
}

/* Tablets and small laptops: trim padding slightly so the bar stays compact. */
@media (max-width: 1024px) {
        .sg-breadcrumbs {
                padding: 8px 0;
        }
}

/* Phones: smaller type + tighter gap so 3-segment trails still fit on one line
   on most screens, and wrap cleanly when they don't. */
@media (max-width: 600px) {
        .sg-breadcrumbs {
                font-size: 0.62rem;
                padding: 7px 0;
        }
        .sg-breadcrumbs .container {
                gap: 3px 5px;
        }
}

/* Very small phones (≤380px): squeeze a bit more so a single trailing
   title segment doesn't dominate the row. */
@media (max-width: 380px) {
        .sg-breadcrumbs {
                font-size: 0.58rem;
                padding: 6px 0;
        }
        .sg-breadcrumbs .container {
                gap: 3px 4px;
        }
}

/* Respect users who prefer larger text — let the breadcrumb scale up with
   their browser setting instead of staying pinned to rem-based minimums. */
@media (min-width: 1600px) {
        .sg-breadcrumbs {
                font-size: 0.74rem;
        }
}

/* ==========================================================================
   23. About This Title (admin-written unique content, 'custom_about' field)
   ========================================================================== */
.sg-about-card {
        padding: 22px 20px;
}
.sg-about-content {
        font-size: 0.88rem;
        line-height: 1.7;
        color: var(--text-secondary);
}
.sg-about-content p {
        margin: 0 0 12px 0;
}
.sg-about-content p:last-child {
        margin-bottom: 0;
}
.sg-about-content a {
        color: var(--text-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--text-muted);
        transition: text-decoration-color var(--transition-smooth);
}
.sg-about-content a:hover {
        text-decoration-color: var(--text-primary);
}

/* ==========================================================================
   24. 404 Error Page (404.php)
   ========================================================================== */
.error-404-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: clamp(40px, 8vw, 80px) 24px;
        position: relative;
        overflow: hidden;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.04);
        margin-bottom: 48px;
}

html[data-theme="light"] .error-404-hero {
        background: radial-gradient(circle at center, rgba(0, 0, 0, 0.01) 0%, transparent 70%);
        border-color: rgba(0, 0, 0, 0.02);
}

.error-404-code {
        font-family: var(--font-mono);
        font-size: clamp(6rem, 16vw, 10rem);
        font-weight: 950;
        line-height: 0.95;
        letter-spacing: -0.06em;
        background: linear-gradient(180deg, var(--text-primary) 30%, rgba(255, 255, 255, 0.02) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 8px;
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.06));
}

html[data-theme="light"] .error-404-code {
        background: linear-gradient(180deg, var(--text-primary) 30%, rgba(0, 0, 0, 0.05) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: none;
}

.error-404-title {
        font-size: clamp(1.4rem, 4vw, 2.2rem);
        font-weight: 900;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: var(--text-primary);
        margin-bottom: 16px;
}

.error-404-desc {
        color: var(--text-secondary);
        font-size: 1.05rem;
        max-width: 520px;
        line-height: 1.6;
        margin-bottom: 36px;
}

.error-404-search {
        width: 100%;
        max-width: 480px;
        display: flex;
        justify-content: center;
}

.hero-search-pill {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 540px;
        margin-top: 8px;
        background-color: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 6px 6px 6px 20px;
        transition: border-color var(--transition-smooth), transform var(--transition-smooth);
}

.hero-search-pill:focus-within {
        border-color: var(--text-primary);
        transform: translateY(-1px);
}

.hero-search-icon {
        flex-shrink: 0;
        color: var(--text-secondary);
        margin-right: 10px;
}

.hero-search-pill .search-field {
        flex-grow: 1;
        min-width: 0;
        font-size: 0.95rem;
        font-family: var(--font-sans);
        padding: 10px 0;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-primary);
}

.hero-search-pill .search-field::placeholder {
        color: var(--text-muted);
}

.hero-search-submit {
        flex-shrink: 0;
        padding: 10px 22px;
        border-radius: 999px;
        background-color: var(--accent-bg);
        color: var(--accent-text);
        border: none;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.hero-search-submit:hover {
        opacity: 0.85;
        transform: scale(1.03);
}

.error-404-search .hero-search-pill {
        margin-top: 0;
}