:root {
  color-scheme: dark;
  --bg: #050505;
  --fg: #f3f1eb;
  --muted: #777773;
  --line: #292927;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 1px dotted var(--fg); outline-offset: 5px; }
.blog-head { position: fixed; z-index: 10; top: 0; left: max(32px, calc((100vw - var(--max)) / 2)); right: max(32px, calc((100vw - var(--max)) / 2)); height: 100px; display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { font: italic 700 28px/1 Georgia, serif; letter-spacing: -.06em; text-decoration: none; }
.brand span { color: var(--muted); }
.blog-head nav { display: flex; gap: 28px; }
.blog-head nav a { color: var(--muted); font-size: 9px; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; }
.blog-head nav a[aria-current="page"], .blog-head nav a:hover { color: var(--fg); }
.blog-main { width: min(calc(100% - 64px), var(--max)); margin: 0 auto; padding: 100px 0 120px; }
.eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
.blog-hero { min-height: 58svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 90px 0 65px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { max-width: 950px; margin: 0; font: italic 400 clamp(68px, 12vw, 144px)/.82 Georgia, serif; letter-spacing: -.07em; }
.blog-hero p:last-child { max-width: 650px; margin: 38px 0 0 auto; color: var(--muted); font: 20px/1.5 Georgia, serif; }
.article-list { border-top: 1px solid var(--line); }
.article-row { display: grid; grid-template-columns: 55px 1fr 180px 28px; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.article-row > span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.article-row h2 { margin: 0; font: italic 400 clamp(28px, 4vw, 46px)/1 Georgia, serif; letter-spacing: -.035em; }
.article-row .arrow { color: var(--fg); font-size: 20px; transition: translate .2s; }
.article-row:hover .arrow { translate: 5px 0; }
.blog-intro { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 70px 0; }
.blog-intro p { max-width: 720px; margin: 0; font: 22px/1.5 Georgia, serif; }
.article-header { min-height: 75svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 90px 0 65px; border-bottom: 1px solid var(--line); }
.article-header h1 { max-width: 1050px; margin: 0; font: italic 400 clamp(58px, 10.5vw, 124px)/.85 Georgia, serif; letter-spacing: -.065em; }
.article-meta { display: flex; justify-content: space-between; gap: 24px; margin-top: 45px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.article-layout { display: grid; grid-template-columns: 180px minmax(0, 720px); gap: 55px; justify-content: center; padding: 75px 0; }
.article-toc { position: sticky; top: 135px; align-self: start; display: grid; gap: 13px; }
.article-toc a { color: var(--muted); font-size: 9px; line-height: 1.4; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; }
.article-toc a:hover { color: var(--fg); }
.article-body { min-width: 0; }
.article-body .lead { margin: 0 0 70px; font: italic 29px/1.4 Georgia, serif; }
.article-body h2 { margin: 88px 0 24px; font: italic 400 clamp(36px, 5vw, 56px)/1 Georgia, serif; letter-spacing: -.04em; }
.article-body h3 { margin: 45px 0 15px; font: italic 400 27px/1.15 Georgia, serif; }
.article-body p, .article-body li { color: #c4c2bc; font: 18px/1.72 Georgia, serif; }
.article-body strong { color: var(--fg); font-weight: 400; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin: 9px 0; padding-left: 7px; }
.article-body a { text-decoration-color: var(--muted); text-underline-offset: 4px; }
.article-body a:hover { text-decoration-color: var(--fg); }
.article-body table { width: 100%; margin: 35px 0 50px; border-collapse: collapse; }
.article-body th, .article-body td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); color: #c4c2bc; font: 15px/1.45 Georgia, serif; text-align: left; vertical-align: top; }
.article-body th { color: var(--muted); font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .13em; }
.article-body td:first-child { color: var(--fg); }
.example-pair { margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.example-pair p { margin: 6px 0; }
.example-pair .wrong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.related-reading { margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-reading > p { margin: 0 0 18px; color: var(--muted); font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .14em; }
.related-reading div { display: grid; gap: 12px; }
.related-reading a { font: italic 22px/1.25 Georgia, serif; text-decoration: none; }
.related-reading a::after { content: ' →'; color: var(--muted); }
.note { margin: 45px 0; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--fg) !important; font-style: italic !important; }
.routine { counter-reset: routine; margin-top: 32px; border-top: 1px solid var(--line); }
.routine > div { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.routine > div::before { counter-increment: routine; content: "0" counter(routine); color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.routine h3 { margin: -4px 0 8px; }
.routine p { margin: 0; }
.article-cta { margin-top: 90px; padding: 45px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-cta p { margin: 0 0 20px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.article-cta a { display: inline-block; font: italic 400 clamp(42px, 7vw, 72px)/1 Georgia, serif; letter-spacing: -.05em; text-decoration: none; }
.sources { margin-top: 85px; }
.sources h2 { font-size: 34px; }
.sources li { font-size: 15px; }
.blog-foot { width: min(calc(100% - 64px), var(--max)); margin: 0 auto; padding: 32px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.blog-foot a { text-decoration: none; }

@media (max-width: 700px) {
  .blog-head { left: 16px; right: 16px; height: 75px; }
  .blog-head nav { gap: 16px; }
  .blog-main { width: calc(100% - 32px); padding-top: 75px; }
  .blog-hero { min-height: 64svh; padding: 70px 0 45px; }
  .blog-hero h1 { font-size: 72px; }
  .blog-hero p:last-child { margin-left: 0; font-size: 18px; }
  .blog-intro { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
  .article-row { grid-template-columns: 30px 1fr 20px; gap: 12px; }
  .article-row .article-date { display: none; }
  .article-row h2 { font-size: 31px; }
  .article-header { min-height: 70svh; padding: 70px 0 45px; }
  .article-header h1 { font-size: 59px; }
  .article-meta { display: grid; gap: 8px; }
  .article-layout { grid-template-columns: 1fr; padding: 50px 0; }
  .article-toc { display: none; }
  .article-body .lead { font-size: 25px; }
  .article-body p, .article-body li { font-size: 17px; }
  .article-body table { display: block; overflow-x: auto; }
  .article-body th, .article-body td { min-width: 115px; }
  .blog-foot { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}