/* === Reset === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Variables (mapped to design tokens) === */
:root {
    --bg: var(--color-background);
    --text: var(--color-foreground);
    --accent: var(--color-accent);
    --bg-secondary: var(--color-background-elevated);
    --border: var(--color-border);
    --muted: var(--color-foreground-muted);
    --max-width: 720px;
    --font-serif: var(--font-heading);
    --font-sans: var(--font-body);
}

/* === Base === */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    background-color: var(--bg);
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-serif);
    line-height: var(--line-height-relaxed);
    min-height: 100vh;
    transition: var(--transition-theme);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition-colors);
}

a:hover {
    text-decoration: underline;
}

/* === Reading Progress Bar === */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    z-index: var(--z-max);
    transition: width 0.1s linear;
}

/* === Header accent line === */
.site-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-width-2);
    background: var(--accent);
}

/* === Navigation === */
.site-nav {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-width-1) solid var(--border);
    position: relative;
}

.site-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: var(--font-weight-bold);
    color: var(--text);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-normal);
    margin-left: -0.15rem;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.site-name:hover {
    text-decoration: none;
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition-colors);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent);
}



/* === Language Switch (typographic) === */
.lang-switch {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.lang-switch:hover {
    text-decoration: none;
}

.lang-option {
    transition: var(--transition-colors);
}

.lang-active {
    color: var(--accent);
    font-weight: var(--font-weight-semibold);
}

.lang-inactive {
    color: var(--color-foreground-muted);
    font-weight: var(--font-weight-normal);
}

.lang-sep {
    color: var(--color-foreground-muted);
    font-weight: var(--font-weight-normal);
}

.lang-switch:hover .lang-inactive {
    color: var(--accent);
}

/* === Main content === */
.content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-6) var(--spacing-16);
}

/* === Home two-column layout === */
.home-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-6) var(--spacing-16);
    display: flex;
    gap: var(--spacing-10);
    align-items: flex-start;
}

.home-articles {
    flex: 1;
    min-width: 0;
}

.home-cables {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: var(--spacing-8);
    align-self: flex-start;
    padding-left: var(--spacing-10);
    padding-top: var(--spacing-2);
}

.home-cables-heading {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-header);
    text-transform: uppercase;
    color: var(--color-sidebar-header);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-2);
    border-bottom: var(--border-width-1) solid var(--border);
}

.home-cable-card {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: var(--border-width-1) solid var(--color-separator);
    border-bottom-color: color-mix(in oklch, var(--color-separator) 30%, transparent);
}

.home-cable-card:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--spacing-4);
}

.home-cable-tag {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-editorial);
    text-transform: uppercase;
    color: var(--color-sidebar-category);
    display: block;
    margin-bottom: var(--spacing-0-5);
}

.home-cable-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-sidebar-title);
    text-decoration: none;
    line-height: var(--line-height-snug);
    display: block;
    margin-bottom: var(--spacing-0-5);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.home-cable-title:hover {
    color: var(--color-article-title-hover);
    text-decoration: none;
}

.home-cable-date {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xs);
    color: var(--color-sidebar-date);
}

.home-cables-more {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
    text-decoration: none;
    display: block;
    margin-top: var(--spacing-2);
}

.home-cables-more:hover {
    text-decoration: underline;
}

/* === Cables list page === */
.cables-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cable-item {
    padding: var(--spacing-6) 0;
    border-bottom: var(--border-width-1) solid var(--border);
}

.cable-item:first-child {
    padding-top: 0;
}

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

.cable-tag-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-editorial);
    text-transform: uppercase;
    color: var(--color-sidebar-category);
    display: block;
    margin-bottom: var(--spacing-1);
}

.cable-title-link {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-article-title);
    text-decoration: none;
    line-height: var(--line-height-snug);
    display: block;
    margin-bottom: var(--spacing-1);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.cable-title-link:hover {
    color: var(--color-article-title-hover);
    text-decoration: none;
}

.cable-date {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--muted);
    display: block;
    margin-bottom: var(--spacing-2);
}

.cable-preview {
    font-family: var(--font-serif);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text);
    opacity: 0.75;
}

/* === Individual cable page === */
.cable-content {
    max-width: var(--size-content-sm);
}

.cable-header {
    margin-bottom: var(--spacing-8);
}

.cable-header .cable-tag-label {
    margin-bottom: var(--spacing-2);
}

.cable-header .cable-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-article-title);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-2);
}

.cable-header .cable-date {
    margin-bottom: 0;
}

.cable-body {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: var(--line-height-article-body);
    color: var(--text);
}

.cable-body p {
    margin-bottom: var(--spacing-6);
}

.cable-body a {
    color: var(--accent);
    text-decoration: underline;
}

.cable-nav {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: var(--border-width-1) solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-6);
}

.cable-nav-link {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
    text-decoration: none;
    max-width: 45%;
    line-height: var(--line-height-normal);
}

.cable-nav-link:hover {
    text-decoration: underline;
}

.cable-nav-prev {
    text-align: left;
}

.cable-nav-next {
    text-align: right;
    margin-left: auto;
}

/* === Page headings === */
.page-heading {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--accent);
    margin-bottom: var(--spacing-10);
}

/* === Article list === */
.article-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.article-item {
    padding-bottom: var(--spacing-12);
    border-bottom: var(--border-width-1) solid var(--color-separator);
    border-bottom-color: color-mix(in oklch, var(--color-separator) 60%, transparent);
}

.article-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.article-number {
    font-family: var(--font-code);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-article-number);
    letter-spacing: var(--letter-spacing-display);
    margin-bottom: var(--spacing-1);
    display: block;
}

.article-title-link {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-article-title);
    text-decoration: none;
    line-height: 1.25;
    display: block;
    margin-bottom: var(--spacing-2);
    text-wrap: balance;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.article-title-link:hover {
    color: var(--color-article-title-hover);
    text-decoration: none;
}

/* === Tags (pills) === */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.tag {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    background: var(--color-tag-background);
    color: var(--color-tag-text);
    padding: var(--spacing-1) var(--spacing-2-5);
    border-radius: var(--radius-tag);
    border: var(--border-width-1) solid var(--color-tag-border);
    border-color: color-mix(in oklch, var(--color-tag-border) 60%, transparent);
    letter-spacing: var(--letter-spacing-normal);
    transition: border-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out);
}

.tag:hover {
    border-color: color-mix(in oklch, var(--accent) 40%, transparent);
    color: var(--accent);
}

.tags-sm .tag {
    font-size: var(--font-size-2xs);
    padding: var(--spacing-0-5) var(--spacing-1-5);
}

/* === More link (Home) === */
.more-link {
    display: block;
    text-align: center;
    margin-top: var(--spacing-16);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
    letter-spacing: var(--letter-spacing-wide);
    opacity: 0.7;
    transition: var(--transition-opacity);
}

.more-link:hover {
    opacity: 1;
    text-decoration: none;
}

/* === Tag filter bar (Archive) === */
.tag-filter-bar {
    margin-bottom: var(--spacing-10);
}

.tag-filter-label {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-3);
    display: block;
}

.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.tag-filter-btn {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-tag-background);
    color: var(--text);
    border: var(--border-width-1) solid var(--color-tag-border);
    padding: var(--spacing-1) var(--spacing-2-5);
    border-radius: var(--radius-tag);
    cursor: pointer;
    transition: var(--transition-colors);
}

.tag-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tag-filter-btn.active {
    background: var(--accent);
    color: var(--color-accent-foreground);
    border-color: var(--accent);
}

.tag-filter-btn.disabled {
    color: var(--color-foreground-muted);
    border-color: var(--color-border-subtle);
    background: var(--bg);
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}

/* === Article page === */
.article-header {
    margin-bottom: var(--spacing-10);
}

.article-header .article-number {
    margin-bottom: var(--spacing-2);
}

.article-header .article-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-article-title);
    line-height: 1.25;
    margin-bottom: var(--spacing-3);
    letter-spacing: var(--letter-spacing-tight);
    text-wrap: balance;
}

.article-header .tags {
    margin-bottom: 0;
}

/* === Article body === */
.article-body {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-article-body);
    color: var(--text);
}

.article-body p {
    margin-bottom: var(--spacing-6);
}

.article-body h2 {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
    letter-spacing: var(--letter-spacing-tight);
}

.article-body h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-3);
}

.article-body blockquote {
    border-left: var(--border-width-4) solid var(--accent);
    padding-left: var(--spacing-5);
    margin: var(--spacing-6) 0;
    color: var(--color-foreground-secondary);
    font-style: italic;
}

.article-body ul,
.article-body ol {
    margin-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
}

.article-body li {
    margin-bottom: var(--spacing-1);
}

.article-body code {
    font-family: var(--font-code);
    font-size: 0.9em;
    background: var(--bg-secondary);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
}

.article-body pre {
    background: var(--bg-secondary);
    padding: var(--spacing-5);
    border-radius: var(--radius-base);
    overflow-x: auto;
    margin-bottom: var(--spacing-6);
}

.article-body pre code {
    background: none;
    padding: 0;
}

.article-body a {
    color: var(--accent);
    text-decoration: underline;
}

.article-body hr {
    border: none;
    border-top: var(--border-width-1) solid var(--border);
    margin: var(--spacing-8) 0;
}

/* === Translation note === */
.translation-note {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-foreground-muted);
    margin-top: var(--spacing-10);
    margin-bottom: 0;
}

/* === Related articles === */
.related-articles {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: var(--border-width-1) solid var(--border);
}

.related-list {
    gap: var(--spacing-6);
}

.related-list .article-item {
    padding-bottom: var(--spacing-6);
}

.related-list .article-title-link {
    font-size: 1.15rem;
}

/* === Share buttons === */
.share-bar {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: var(--border-width-1) solid var(--border);
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}

.share-btn {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--bg-secondary);
    color: var(--text);
    border: var(--border-width-1) solid var(--border);
    padding: var(--spacing-1-5) var(--spacing-3-5);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: var(--transition-colors);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.share-btn:hover {
    background: var(--accent);
    color: var(--color-accent-foreground);
    border-color: var(--accent);
    text-decoration: none;
}

.share-btn.copied {
    background: var(--accent);
    color: var(--color-accent-foreground);
    border-color: var(--accent);
}

/* === About page === */
.about-text {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: var(--line-height-loose);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-3);
}

/* === Contact section (within About page) === */
.about-contact {
    margin-top: var(--spacing-14);
    padding-top: var(--spacing-10);
    border-top: var(--border-width-1) solid var(--border);
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.contact-link {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: var(--bg-secondary);
    color: var(--text);
    border: var(--border-width-1) solid var(--border);
    padding: var(--spacing-3) var(--spacing-7);
    border-radius: var(--radius-base);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-link:hover {
    background: var(--accent);
    color: var(--color-accent-foreground);
    border-color: var(--accent);
    text-decoration: none;
}

.contact-link.copied {
    background: var(--accent);
    color: var(--color-accent-foreground);
    border-color: var(--accent);
}

/* === 404 === */
.not-found {
    text-align: center;
    padding-top: var(--spacing-16);
}

.not-found h1 {
    font-family: var(--font-serif);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.not-found p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-foreground-muted);
}

/* === Footer === */
.site-footer {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-6);
    border-top: var(--border-width-1) solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.site-footer .footer-name {
    font-family: var(--font-serif);
    font-size: var(--font-size-sm);
    color: var(--text);
    opacity: 0.5;
}

.footer-projects {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.footer-project-link {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--color-foreground-muted);
    text-decoration: none;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.footer-project-link:hover {
    color: var(--accent);
    text-decoration: none;
}

.footer-dot {
    color: var(--color-foreground-muted);
    opacity: 0.4;
    font-size: var(--font-size-xs);
    user-select: none;
}

/* === Theme Toggle === */
.theme-toggle {
    background: none;
    border: var(--border-width-1) solid var(--color-foreground-muted);
    border-radius: var(--radius-tag);
    cursor: pointer;
    padding: var(--spacing-1) var(--spacing-2-5);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-foreground-muted);
    -webkit-appearance: none;
    appearance: none;
    transition: var(--transition-all);
    position: relative;
    overflow: hidden;
}

.theme-toggle:focus {
    outline: none;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.toggle-icon {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: var(--radius-full);
    background: transparent;
    transition: var(--transition-all);
}

.toggle-label {
    transition: var(--transition-all);
    white-space: nowrap;
}

/* Light mode state */
.toggle-icon {
    box-shadow: inset -4px 1px 0 0 var(--color-foreground-muted);
}

.theme-toggle:hover .toggle-icon {
    box-shadow: inset -4px 1px 0 0 var(--accent);
}

/* Dark mode state (default) */
[data-theme="dark"] .theme-toggle {
    border-color: var(--color-border);
    color: var(--color-foreground-muted);
    background: transparent;
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="dark"] .toggle-icon {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: transparent;
    box-shadow: none;
    border: none;
    position: relative;
}

[data-theme="dark"] .toggle-icon::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-foreground-muted);
}

[data-theme="dark"] .theme-toggle:hover .toggle-icon::before {
    background: var(--accent);
}

/* Light mode toggle styling */
html:not([data-theme="dark"]) .theme-toggle {
    border-color: var(--accent);
    color: var(--accent);
}

html:not([data-theme="dark"]) .theme-toggle:hover {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
}

html:not([data-theme="dark"]) .theme-toggle:hover .toggle-icon {
    box-shadow: inset -4px 1px 0 0 var(--color-accent-secondary);
}

/* === Dark Mode === */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color var(--duration-slow), color var(--duration-slow), border-color var(--duration-slow), box-shadow var(--duration-slow) !important;
}

/* Dark mode overrides — all neon colors replaced by terracotta/slate tokens */
[data-theme="dark"] {
    --bg: var(--color-background);
    --text: var(--color-foreground);
    --accent: var(--color-accent);
    --bg-secondary: var(--color-background-elevated);
    --border: var(--color-border);
    --muted: var(--color-foreground-muted);
}

/* Article numbers — terracotta accent */
[data-theme="dark"] .article-number {
    color: var(--color-article-number);
}

/* Page headings & filter label — accent */
[data-theme="dark"] .page-heading,
[data-theme="dark"] .tag-filter-label {
    color: var(--accent);
}

/* Site name hover — accent */
[data-theme="dark"] .site-name:hover {
    color: var(--accent);
}

/* Tags — using token colors */
[data-theme="dark"] .tag {
    background: var(--color-tag-background);
    border-color: var(--color-tag-border);
    color: var(--color-tag-text);
}

/* Tag filter buttons — accent interactions */
[data-theme="dark"] .tag-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="dark"] .tag-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-foreground-inverted);
}

[data-theme="dark"] .tag-filter-btn.disabled {
    color: var(--color-foreground-muted);
    border-color: var(--color-border-subtle);
    background: var(--bg);
}

/* Article body — breathing typography */
[data-theme="dark"] .article-body {
    letter-spacing: 0.008em;
}

/* Article headings — slate accent */
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body h3 {
    color: var(--color-accent-secondary);
}

/* Blockquote text */
[data-theme="dark"] .article-body blockquote {
    color: var(--color-foreground-secondary);
}

/* Share & contact — accent hover */
[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .share-btn.copied {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-foreground-inverted);
}

[data-theme="dark"] .contact-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-foreground-inverted);
}

/* Language switch */
[data-theme="dark"] .lang-inactive,
[data-theme="dark"] .lang-sep {
    color: var(--color-foreground-muted);
}

[data-theme="dark"] .lang-switch:hover .lang-inactive {
    color: var(--accent);
}

/* 404 muted text */
[data-theme="dark"] .not-found p {
    color: var(--color-foreground-muted);
}

/* Cable tags — sidebar category color */
[data-theme="dark"] .cable-tag-label,
[data-theme="dark"] .home-cable-tag {
    color: var(--color-sidebar-category);
}

/* Cable titles — accent on hover */
[data-theme="dark"] .cable-title-link:hover,
[data-theme="dark"] .home-cable-title:hover {
    color: var(--color-article-title-hover);
}

/* Cable body — breathing typography */
[data-theme="dark"] .cable-body {
    letter-spacing: 0.008em;
}

/* Home cables heading — sidebar header */
[data-theme="dark"] .home-cables-heading {
    color: var(--color-sidebar-header);
    border-bottom-color: var(--border);
}

/* Home cable cards — dark borders */
[data-theme="dark"] .home-cable-card {
    border-bottom-color: var(--border);
}

/* === Desktop lateral frame (handled by side-glow.js in dark mode) === */


/* === Floating Table of Contents (article pages, desktop only) === */
.article-toc {
    display: none;
}

@media (min-width: 1100px) {
    .article-toc {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        right: calc(50% + var(--max-width) / 2 + 2.5rem);
        width: 180px;
        text-align: right;
        opacity: 0;
        transition: opacity var(--duration-slow);
        z-index: var(--z-dropdown);
    }

    .article-toc.toc-visible {
        opacity: 1;
    }

    .article-toc ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .article-toc li {
        margin-bottom: var(--spacing-2);
    }

    .article-toc li:last-child {
        margin-bottom: 0;
    }

    .article-toc a {
        font-family: var(--font-sans);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-normal);
        color: var(--color-foreground-muted);
        text-decoration: none;
        display: block;
        padding: var(--spacing-0-5) var(--spacing-2-5) var(--spacing-0-5) 0;
        border-right: var(--border-width-2) solid transparent;
        transition: var(--transition-colors);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-toc a:hover {
        color: var(--color-foreground-secondary);
        text-decoration: none;
    }

    .article-toc a.active {
        color: var(--color-accent-secondary);
        font-weight: var(--font-weight-medium);
        border-right-color: var(--color-accent-secondary);
    }

    /* Dark mode TOC */
    [data-theme="dark"] .article-toc {
        background: var(--color-background-elevated);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: var(--radius-md);
        padding: var(--spacing-4);
    }

    [data-theme="dark"] .article-toc a {
        color: var(--color-foreground-muted);
    }

    [data-theme="dark"] .article-toc a:hover {
        color: var(--color-foreground-secondary);
    }

    [data-theme="dark"] .article-toc a.active {
        color: var(--color-accent-secondary);
        font-weight: var(--font-weight-medium);
        border-right-color: var(--color-accent-secondary);
    }
}

/* === Related sidebar (desktop only) === */
.related-sidebar {
    display: none;
}

@media (min-width: 1280px) {
    .related-sidebar {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: calc(50% + var(--max-width) / 2 + 2.5rem);
        width: 180px;
    }

    .related-sidebar-item {
        margin-bottom: var(--spacing-5);
    }

    .related-sidebar-item:last-child {
        margin-bottom: 0;
    }

    .related-sidebar .article-number {
        font-family: var(--font-code);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-article-number);
        letter-spacing: var(--letter-spacing-display);
        margin-bottom: var(--spacing-0-5);
        display: block;
    }

    .related-sidebar-title {
        font-family: var(--font-serif);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-article-title);
        text-decoration: none;
        line-height: var(--line-height-snug);
        display: block;
    }

    .related-sidebar-title:hover {
        color: var(--color-article-title-hover);
        text-decoration: none;
    }
}

/* === Responsive: home layout stacking === */
@media (max-width: 768px) {
    .home-layout {
        flex-direction: column;
        gap: var(--spacing-10);
    }

    .home-cables {
        width: 100%;
        position: static;
        border-top: var(--border-width-1) solid var(--border);
        padding-top: var(--spacing-8);
    }
}

/* === Responsive === */
@media (max-width: 600px) {
    .site-nav {
        flex-direction: column;
        gap: var(--spacing-4);
        padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
    }

    .nav-links {
        gap: var(--spacing-4);
        flex-wrap: wrap;
        justify-content: center;
    }

    .content {
        padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
    }

    .article-title-link {
        font-size: var(--font-size-2xl);
    }

    .article-header .article-title {
        font-size: var(--font-size-2xl);
    }

    .article-body {
        font-size: 1.05rem;
    }

    .home-layout {
        padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
    }

    .cable-header .cable-title {
        font-size: 1.4rem;
    }

    .cable-body {
        font-size: var(--font-size-base);
    }

    .cable-title-link {
        font-size: 1.05rem;
    }
}