:root {
	color-scheme: dark;
	--odb-background: #0B1020;
	--odb-surface: #172139;
	--odb-violet: #A78BFA;
	--odb-mint: #5EEAD4;
	--odb-foreground: #F4F7FB;
	--odb-muted: #A6B0C3;
	--odb-line: #2B3650;
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--odb-background); color: var(--odb-foreground); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { background: var(--odb-violet); color: var(--odb-background); }
a:focus-visible { outline: 2px solid var(--odb-mint); outline-offset: 5px; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.screen-reader-text:focus { width: auto; height: auto; clip: auto; left: 16px; top: 12px; z-index: 100000; padding: 10px 14px; background: var(--odb-mint); color: var(--odb-background); }

.site-header { position: sticky; top: 0; z-index: 10; width: 100%; background: rgba(23, 33, 57, 0.96); border-bottom: 1px solid var(--odb-line); backdrop-filter: blur(16px); }
.admin-bar .site-header { top: 32px; }
.header-inner { width: calc(100% - 80px); max-width: 1160px; min-height: 100px; margin: 0 auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand-symbol { display: block; flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.brand-name { font-size: 28px; line-height: 1.1; letter-spacing: -1px; font-weight: 750; }
.brand-note { color: var(--odb-muted); font-size: 14px; line-height: 1.4; }
.site-header nav { display: flex; flex-shrink: 0; gap: 30px; color: var(--odb-muted); font-size: 15px; }
.site-header nav a { position: relative; padding: 10px 0; transition: color 160ms ease; }
.site-header nav a:hover, .site-header nav a.is-current { color: var(--odb-mint); }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--odb-mint); transition: right 160ms ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .site-header nav a.is-current::after { right: 0; }
.site-header nav a:focus-visible, .category-tabs a:focus-visible, .article-row-link:focus-visible { outline: 2px solid var(--odb-mint); outline-offset: 3px; }

.page-shell { width: calc(100% - 80px); max-width: 1160px; margin: 0 auto; }
.featured-banner { position: relative; isolation: isolate; overflow: hidden; min-height: 160px; margin: 24px 0 0; padding: 22px 32px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid var(--odb-line); border-radius: 12px; background-color: var(--odb-surface); color: var(--odb-foreground); background-position: center; background-size: cover; transition: border-color 180ms ease; }
.featured-banner h2 { max-width: 850px; margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.9px; font-weight: 650; overflow-wrap: anywhere; text-wrap: balance; }
.featured-banner > p { max-width: 700px; margin: 0; color: var(--odb-muted); font-size: 14px; line-height: 1.5; }
.featured-banner .featured-kicker { align-self: flex-start; margin-bottom: 2px; color: var(--odb-violet); font-size: 10px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; }
.featured-banner.has-background { color: var(--odb-foreground); }
.featured-banner.has-background::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 16, 32, 0.80); }
.featured-banner.has-background > p { color: var(--odb-foreground); }
.featured-banner.has-background .featured-kicker { color: var(--odb-mint); border-color: var(--odb-mint); }
.featured-banner-link { display: block; border-radius: 12px; }
.featured-banner-link:hover .featured-banner { border-color: #4B5976; }

.feed-toolbar { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--odb-line); }
.feed-toolbar > h1 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -0.65px; font-weight: 700; overflow-wrap: anywhere; }
.category-tabs { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-start; gap: 6px; max-width: 65%; min-width: 0; overflow-x: auto; padding: 5px; }
.category-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 13px; border-radius: 8px; color: var(--odb-muted); white-space: nowrap; font-size: 14px; font-weight: 550; transition: color 160ms ease, background-color 160ms ease; }
.category-tabs a:hover { color: var(--odb-mint); background: var(--odb-surface); }
.category-tabs a.is-active { background: var(--odb-violet); color: var(--odb-background); font-weight: 700; }

.article-section { padding-top: 18px; padding-bottom: 64px; }
.article-row { margin: 0; }
.article-row-link { min-height: 104px; padding: 24px 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-bottom: 1px solid var(--odb-line); transition: background-color 160ms ease; }
.article-row-link:hover { background: rgba(23, 33, 57, 0.55); }
.article-row-link:hover .article-title, .article-row-link:focus-visible .article-title { color: var(--odb-mint); }
.article-heading-row { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 8px; }
.article-title { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.4px; font-weight: 650; overflow-wrap: anywhere; transition: color 160ms ease; }
.article-meta { display: inline-flex; flex-wrap: wrap; gap: 7px; color: var(--odb-muted); font-size: 12px; line-height: 1.5; }
.article-meta > span:first-child { color: var(--odb-violet); font-weight: 600; }
.article-summary { max-width: 790px; margin: 8px 0 0; color: var(--odb-muted); font-size: 15px; line-height: 1.6; }
.empty-state { color: var(--odb-muted); padding: 28px 0; border-bottom: 1px solid var(--odb-line); }

.infinite-loader { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--odb-muted); font-size: 14px; }
.loader-ring { width: 19px; height: 19px; border: 1px solid var(--odb-line); border-top-color: var(--odb-mint); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .loader-ring { animation: none; } *, *::before, *::after { transition: none !important; } }

.listing-page { padding-top: 0; }
.nav-links { display: flex; gap: 16px; margin-top: 30px; }
.page-numbers { padding: 9px 13px; border: 1px solid var(--odb-line); }
.page-numbers.current { background: var(--odb-violet); color: var(--odb-background); }
.pagination-fallback { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; color: var(--odb-muted); font-size: 14px; }
.pagination-fallback a { text-decoration: underline; text-underline-offset: 4px; }
.infinite-scroll-enabled .pagination-fallback { display: none; }

.text-page, .single-page { max-width: 900px; padding-top: 70px; padding-bottom: 80px; }
.text-page h1, .single-header h1 { margin: 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; letter-spacing: -1.4px; }
.single-meta { margin: 0 0 18px; color: var(--odb-muted); }
.single-meta a { color: var(--odb-violet); text-decoration: underline; text-underline-offset: 3px; }
.prose { max-width: 720px; margin-top: 38px; color: #C7D0E0; font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.prose h2, .prose h3 { color: var(--odb-foreground); margin-top: 1.8em; }
.prose a { color: var(--odb-violet); text-decoration: underline; text-underline-offset: 4px; }
.prose a:hover { color: var(--odb-mint); }
.prose code { background: var(--odb-surface); color: var(--odb-mint); padding: 0.15em 0.35em; border-radius: 4px; }
.prose pre { overflow-x: auto; padding: 24px; background: var(--odb-surface); border: 1px solid var(--odb-line); border-radius: 12px; }
.prose blockquote { margin-inline: 0; padding: 8px 24px; border-left: 3px solid var(--odb-violet); }

.contact-form { position: relative; max-width: 720px; margin-top: 42px; display: grid; gap: 22px; }
.contact-field { display: grid; gap: 9px; }
.contact-field label { color: var(--odb-foreground); font-size: 15px; font-weight: 560; }
.contact-field input, .contact-field textarea { width: 100%; border: 1px solid #4B5976; border-radius: 10px; padding: 15px 16px; background: var(--odb-surface); color: var(--odb-foreground); font: inherit; font-size: 16px; outline: none; }
.contact-field textarea { min-height: 168px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { border-color: var(--odb-mint); box-shadow: 0 0 0 1px var(--odb-mint); }
.contact-submit { justify-self: start; border: 1px solid var(--odb-mint); border-radius: 9px; padding: 14px 24px; background: var(--odb-mint); color: var(--odb-background); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.contact-submit:hover { background: #99F6E4; }
.contact-submit:focus-visible { outline: 2px solid var(--odb-mint); outline-offset: 4px; }
.form-notice { max-width: 720px; margin: 34px 0 -16px; padding: 13px 15px; border: 1px solid var(--odb-line); color: var(--odb-foreground); }
.form-notice.is-success { border-color: #3f7151; }
.form-notice.is-error { border-color: #8b4444; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
	.header-inner { width: calc(100% - 44px); min-height: 90px; }
	.brand-name { font-size: 25px; }
	.site-header nav { gap: 22px; }
	.page-shell { width: calc(100% - 44px); }
	.feed-toolbar { flex-wrap: wrap; padding-block: 22px; gap: 16px; }
	.category-tabs { max-width: 100%; }
}

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

@media (max-width: 720px) {
	.header-inner { width: calc(100% - 40px); min-height: auto; padding: 18px 0 12px; align-items: flex-start; flex-direction: column; gap: 12px; }
	.site-header nav { width: 100%; gap: 28px; padding: 0; overflow-x: auto; }
	.brand-name { font-size: 23px; }
	.brand { gap: 10px; align-items: flex-start; }
	.brand-symbol { flex-basis: 42px; width: 42px; height: 42px; }
	.brand-note { font-size: 12px; line-height: 1.5; }
	.page-shell { width: calc(100% - 40px); }
	.featured-banner { min-height: 0; margin-top: 20px; padding: 20px 22px; gap: 8px; border-radius: 10px; background-position: 68% center; }
	.featured-banner h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.7px; }
	.featured-banner > p { font-size: 14px; line-height: 1.45; }
	.feed-toolbar { min-height: auto; padding: 28px 0 18px; align-items: flex-start; flex-direction: column; gap: 15px; }
	.feed-toolbar > h1 { font-size: 23px; }
	.category-tabs { width: 100%; justify-content: flex-start; gap: 5px; min-height: 50px; scrollbar-width: thin; scrollbar-color: var(--odb-line) transparent; }
	.article-section { padding-top: 0; }
	.article-row-link { min-height: 118px; padding-block: 22px; }
	.article-heading-row { align-items: flex-start; flex-direction: column; gap: 7px; }
	.article-title { font-size: 20px; }
	.article-summary { font-size: 14px; }
	.text-page, .single-page { padding-top: 40px; }
}