:root {
    --sea: #1e3e3f;
    --sea-dark: #172d3e;
    --link: #127ea9;
    --froth: #f4f4f4;
    --muted: #6d8794;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; color: var(--sea); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #1a9ed4; }

.sidebar { background: var(--froth); bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 10px 16px; position: fixed; right: 0; text-align: center; top: 0; width: 10rem; z-index: 3; }
.brand { color: var(--sea-dark); display: block; font-weight: 700; margin-bottom: 18px; }
.nav-main { list-style: none; margin: 0; padding: 0; }
.nav-main a { color: var(--sea-dark); display: block; padding: 10px 4px; }
.nav-main a:hover, .to-top:hover { color: var(--link); }
.to-top { color: var(--sea-dark); }

.content { margin-right: 10rem; }
.jumbotron { margin: 0 0 2rem; position: relative; }
.video { min-height: 70vh; position: relative; }
.video-media { height: 70vh; overflow: hidden; position: relative; }
.video-media img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.video-overlay { background: rgba(178, 191, 204, .45); inset: 0; position: absolute; }
.video-frame { background: center / cover no-repeat; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.video-inner { color: #fff; left: 50%; position: absolute; text-align: center; top: 42%; transform: translate(-50%, -50%); z-index: 2; }
.video-inner h1, .video-inner a, .video-inner p { color: #fff; }
.video-inner h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0; }
.cover-kicker { letter-spacing: .2em; margin: 0; }

.content-inner { margin: 0 auto; max-width: 760px; padding: 0 24px 48px; }
.card-index { display: none; }
.card-list { display: grid; gap: 18px; }
.card-row { display: block; }
.content-card { border-bottom: 1px solid #e6e6e6; padding: 0 0 16px; }
.content-card h2 { font-size: 1.45rem; margin: 0 0 6px; }
.content-card h2 a, .section-title, .article-header h1, .archive-year a { color: var(--sea-dark); }
.card-meta, .empty-state, .pagination span, .archive-year time { color: var(--muted); }
.pagination { display: flex; justify-content: space-between; }
.term-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.term-card { background: var(--froth); display: flex; justify-content: space-between; padding: 12px; }
.archive-year ul { list-style: none; margin: 8px 0 0; padding: 0; }
.archive-year li { display: flex; gap: 12px; padding: 5px 0; }
.archive-year time { flex: 0 0 105px; }
.article-content img { height: auto; max-width: 100%; }
.article-content pre, .article-content code { background: var(--froth); }
.article-content pre { overflow-x: auto; padding: 12px; }
.article-content blockquote { border-left: 3px solid var(--link); margin-left: 0; padding-left: 12px; }
.taxonomy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.article-nav { display: flex; gap: 12px; justify-content: space-between; }
.article-nav a { display: flex; flex: 1; flex-direction: column; }
.article-nav-next { text-align: right; }
.site-footer { color: var(--muted); padding: 0 24px 32px; }
.footer-inner { border-top: 1px solid #e6e6e6; display: flex; justify-content: space-between; margin: 0 auto; max-width: 760px; padding-top: 14px; }
.footer-years { display: flex; gap: 10px; }

@media (max-width: 720px) {
    .sidebar { position: static; width: auto; }
    .content { margin-right: 0; }
    .nav-main { display: flex; flex-wrap: wrap; justify-content: center; }
    .video, .video-media { height: 46vh; min-height: 46vh; }
    .article-nav, .footer-inner { display: block; }
}