:root {
  --article-ink: #211c18;
  --article-muted: #6d6258;
  --article-paper: #f5f0e8;
  --article-gold: #a78345;
  --article-lapis: #173f68;
  --article-line: rgba(63, 48, 36, .18);
}

html { scroll-behavior: smooth; }
body.article-page { margin: 0; background: var(--article-paper); color: var(--article-ink); }
.anchor-offset, .article-body h2, .article-body h3 { scroll-margin-top: 90px; }
.article-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 0 max(24px, calc((100vw - 1240px)/2)); background: rgba(23,19,17,.96); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); }
.article-brand { color: #f5f0e8; text-decoration: none; font-weight: 750; letter-spacing: .02em; }
.article-brand span { display: block; color: #c4b7a8; font-size: .72rem; font-weight: 500; }
.article-topbar nav { display: flex; gap: 20px; }
.article-topbar nav a { color: #d9cdbf; font-size: .88rem; text-decoration: none; }
.article-topbar nav a:hover, .article-topbar nav a[aria-current="page"] { color: #fff; }

.article-hero { position: relative; min-height: min(76vh, 760px); display: grid; align-items: end; overflow: hidden; background: #100e0d; }
.article-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,6,.08) 18%, rgba(8,7,6,.34) 48%, rgba(8,7,6,.94) 100%); }
.article-hero__copy { position: relative; z-index: 1; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0 70px; color: #fff; }
.article-kicker { margin: 0 0 14px; color: #dbc49b; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-hero h1 { max-width: 920px; margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 6vw, 5.4rem); font-weight: 500; line-height: .98; text-wrap: balance; }
.article-subtitle { max-width: 780px; margin: 22px 0 0; color: #e7ded2; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.14rem, 2.1vw, 1.75rem); line-height: 1.35; }
.article-byline { margin: 28px 0 0; color: #fff; font-size: 1rem; font-weight: 750; }

.article-layout { display: grid; grid-template-columns: 220px minmax(0, 790px); justify-content: center; gap: 72px; padding: 76px 24px 110px; }
.article-toc { position: sticky; top: 98px; align-self: start; padding-left: 18px; border-left: 1px solid var(--article-line); }
.article-toc p { margin: 0 0 14px; color: var(--article-ink); font-size: .75rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.article-toc a { display: block; margin: 0 0 11px; color: var(--article-muted); font-size: .86rem; line-height: 1.35; text-decoration: none; }
.article-toc a:hover { color: var(--article-lapis); }
.article-body { min-width: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.86; }
.article-body p { margin: 0 0 1.55em; }
.article-body h2 { margin: 3.3em 0 1.05em; color: #171311; font-size: clamp(1.8rem, 3.1vw, 2.65rem); font-weight: 550; line-height: 1.15; text-wrap: balance; }
.article-body h3 { margin: 2.4em 0 .8em; color: var(--article-lapis); font-family: system-ui, sans-serif; font-size: 1.02rem; font-weight: 800; letter-spacing: .025em; line-height: 1.4; }
.article-body a { color: #174f7d; text-underline-offset: 3px; }
.article-body code { padding: .12em .34em; border: 1px solid rgba(39,65,83,.16); border-radius: 4px; background: rgba(31,62,83,.07); color: #233a49; font-family: "Segoe UI Mono", Consolas, monospace; font-size: .87em; }
.article-abstract { padding-top: 8px; font-size: 1.15rem; }
.article-keywords { padding-bottom: 30px; border-bottom: 1px solid var(--article-line); color: var(--article-muted); font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.6; }
.article-figure { position: relative; left: -146px; width: min(1120px, calc(100vw - 48px)); margin: 3.4rem 0 3.5rem 50%; transform: translateX(-50%); }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 22px 55px rgba(39,28,19,.19); }
.article-figure figcaption { max-width: 790px; margin: 12px auto 0; color: var(--article-muted); font-family: system-ui, sans-serif; font-size: .82rem; line-height: 1.55; }
.article-figure figcaption span { color: #8b7d70; }
.article-credits { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--article-line); color: var(--article-muted); font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.65; }
.article-credits p { margin-bottom: 1em; }
.article-updated { font-size: .8rem; }
.article-site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 30px max(24px, calc((100vw - 1120px)/2)); background: #171311; color: #c9bcae; font-size: .86rem; }
.article-site-footer a { color: #f1e9de; text-decoration: none; }

@media (max-width: 1160px) {
  .article-layout { grid-template-columns: 1fr; gap: 34px; }
  .article-toc { position: static; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; padding: 20px 0; border: 1px solid var(--article-line); border-width: 1px 0; }
  .article-toc p { grid-column: 1 / -1; }
  .article-toc a { margin: 0; }
  .article-figure { left: 0; }
}

@media (max-width: 680px) {
  .article-topbar { min-height: 58px; padding-inline: 16px; }
  .article-brand span { display: none; }
  .article-topbar nav { gap: 12px; }
  .article-topbar nav a:first-child, .article-topbar nav a:last-child { display: none; }
  .article-hero { min-height: 72vh; }
  .article-hero__copy { width: min(100% - 32px, 1040px); padding-bottom: 40px; }
  .article-layout { padding: 44px 18px 76px; }
  .article-body { font-size: 1.02rem; line-height: 1.78; }
  .article-toc { grid-template-columns: 1fr; }
  .article-figure { width: calc(100vw - 24px); margin-block: 2.6rem; }
  .article-site-footer { flex-direction: column; }
}