/* Site-owned layout. Prose has a fixed reading measure; annotations are opt-in
   at build time, and figures may use a wider measure independently. */
:root { --paper: #fffff8; --ink: #343434; --accent: #b1282b; --page-gutter: clamp(24px, 6vw, 96px); --reading: 48rem; --note: 18rem; --note-gap: 3rem; }
* { box-sizing: border-box; }
html { font-size: 16px; }
body { background: var(--paper); color: var(--ink); width: calc(100% - 2 * var(--page-gutter)); max-width: 1440px; margin: 0 var(--page-gutter); padding: 0; font-family: Lato, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: #e13438; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p, ul, ol, dl, footer, table { width: auto; }
p { margin: 0.85em 0; }
h1, h2, h3 { font-weight: 700; }
h1 { font-size: clamp(2rem, 3.3vw, 3rem); margin: 0 0 1rem; }
h2 { font-size: 1.7rem; margin: 1.8em 0 0.6em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 0.5em; }
img, video, svg { max-width: 100%; height: auto; }
figure { margin: 1.5rem 0; }
figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: #666; }
pre { overflow-x: auto; padding: 1rem; background: #f0f0e8; }
code { font-family: monospace !important; }
table { border-collapse: collapse; max-width: 100%; }
th, td { padding: 0.5rem; border-bottom: 1px solid #ddd; text-align: left; }
.table-wrapper { overflow-x: auto; }
hr { border: 0; border-top: 1px solid #ddd; margin: 1.5rem 0; }
.menu ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0; list-style: none; }
.menu li { padding: 0; font-size: 0.8rem; }
.menu a, .site-name { color: var(--accent); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.site-name { display: inline-block; font-size: 0.8rem; margin-bottom: 1.4rem; }
article#main:not(.home-tufte) { max-width: var(--reading); margin: 0; padding: 2rem 0 3rem; }
article#main.editorial-article > .article-body { padding: 0; font-size: 1.2rem; line-height: 1.5; display: flow-root; }
.article-header, .article-body, .article-footer { width: 100%; }
.article-header { margin-bottom: 1.5rem; }
.article-header h1, .article-body h2, .article-body h3 { color: var(--accent); }
.article-header h1 { text-transform: uppercase; }
.article-status, .article-date { color: #777; font-size: 0.85rem; margin: 0.5rem 0; }
.article-body ol, .article-body ul { padding-left: 1.5em; }
.article-body li > p { margin: 0.4em 0; }
blockquote { margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 2px solid #c9bdb0; font-size: inherit; }
blockquote p, blockquote footer { width: 100%; }
blockquote footer { font-size: 0.9rem; color: #666; text-align: left; }
.epigraph { margin: 1.5rem 0; }
.epigraph blockquote { font-style: italic; }
.epigraph footer { font-style: normal; }
.page-footer { clear: both; margin-top: 2rem; font-size: 0.9rem; }
.page-footer-menu { display: flex; gap: 1rem; padding: 0; list-style: none; }
.copyright { clear: both; color: #888; padding-top: 1rem; }
/* Notes remain visible in the reading flow on phones and tablets. */
.margin-toggle { display: none; }
label.sidenote-number { display: inline; color: var(--accent); font-size: 0.75em; vertical-align: super; }
.sidenote, .marginnote, .margin-epigraph { display: block; float: none; clear: both; position: static; width: auto; margin: 1rem 0; padding: 0.75rem 1rem; border-left: 2px solid #c9bdb0; font-size: 0.95rem; line-height: 1.4; color: #666; }
.margin-epigraph blockquote { border: 0; padding: 0; margin: 0; }
.margin-epigraph blockquote p, .margin-epigraph blockquote footer { width: 100%; }
.sidenote-number { color: var(--accent); margin-right: 0.35em; }
/* Text and wider figures share a left edge; figures expand to the right. */
@media (min-width: 1280px) {
    article#main.editorial-article.has-sidenotes { max-width: calc(var(--reading) + var(--note-gap) + var(--note)); }
    .has-sidenotes .article-header, .has-sidenotes .article-body, .has-sidenotes .article-footer { width: var(--reading); }
    .has-sidenotes .sidenote, .has-sidenotes .marginnote, .has-sidenotes .margin-epigraph { float: right; clear: right; width: var(--note); margin: 0 calc(-1 * (var(--note) + var(--note-gap))) 1.2rem 0; padding: 0; border: 0; }
    .editorial-article:not(.has-sidenotes) .article-body > .fullwidth { width: min(70rem, calc(100vw - 2 * var(--page-gutter))); max-width: none; margin-left: 0; }
    .has-sidenotes .article-body > .fullwidth { width: 100%; }
}
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; }
.heading-anchor { display: none; }
#TableOfContents { margin-bottom: 1.5rem; font-size: 0.9rem; }
@media (max-width: 760px) {
    :root { --page-gutter: 20px; }
    .home-tufte { padding: 24px 0 40px; }
    article#main:not(.home-tufte) { padding-top: 1.25rem; }
    article#main.editorial-article > .article-body { font-size: 1.1rem; }
}
.archive-entry { padding: 1rem 0; border-top: 1px solid #ddd; }
.archive-entry h2 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.archive-entry h2 a { text-decoration: none; }
.article-body > :first-child { margin-top: 0; }
.article-body li { padding: 0.2em 0; }

.interactive-embed { margin: 1.5rem 0; }
.interactive-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 10px; background: #f5f5ef; }
.interactive-embed-link { font-size: 0.9rem; }