/* Co-Intelligence Labs' article style, with the Claude.dev template's geometry.
   article-source.css owns typography, ink, figures, notes and the candle. */
:root { color-scheme: light; --gutter: 36px; --sidenote-gap: 32px; --sidenote-width: 220px; }
:root { --masthead-height:64px; }
html { scroll-padding-top:calc(var(--masthead-height) + 18px); }
body { background: #fff; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fg4); outline-offset: 4px; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--fg); color: white; font: 13px var(--font-sans); }
.skip-link:focus { top: 12px; }
.site-header { padding:18px var(--gutter); position:sticky; top:0; z-index:40; background:var(--bg); }
.essay .left-toc { top:calc(var(--masthead-height) + 24px); max-height:calc(100vh - var(--masthead-height) - 48px); overflow-y:auto; scrollbar-width:thin; }
.site-nav { border: 0; padding: 0; }
.review-nav { padding: 10px var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 12px/1.5 var(--font-sans); color: var(--fg4); }
.review-nav nav { display: flex; gap: 24px; }
.review-nav a { color: var(--fg4); text-decoration: none; }
.review-nav a[aria-current] { color: var(--fg); text-decoration: underline; text-underline-offset: 5px; }

/* Same twelve columns and fifth-column prose edge as the new template. */
#main.post { margin: 0 var(--gutter); }
.article-hero { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: center; padding: 52px 0 56px; border-bottom: 1px solid var(--rule); min-height: 300px; }
.post-heading { grid-column: 5 / 13; grid-row: 1; margin: 0; padding: 0; text-align: left; max-width: 710px; }
.post-title { text-align: left; margin: 0 0 24px; font-size: 30px; line-height: 1.4; font-weight: 600; }
.publish-metadata { margin: 0; }
.cover { grid-column: 1 / 4; grid-row: 1; min-width: 0; padding: 0; margin: 0; width: 100%; max-width: 320px; }
.cover-frame { aspect-ratio: 1.2; min-height: 230px; }
.post-content-shell { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); padding: 64px 0 60px; margin: 0; max-width: none; }
.post-content-shell > article.content { grid-column: 5 / 13; width: 100%; max-width: 660px; min-width: 0; }
.left-toc { grid-column: 1 / 4; grid-row: 1; justify-self: start; position: sticky; top: 32px; width: 100%; max-width: 275px; padding: 0 24px 0 0; display: block; }
.left-toc ul { gap: 14px; }
.rail-title { font: 600 17px/1.4 var(--font-serif); margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: opacity .2s; }
.rail-title.visible { max-height: 120px; margin-bottom: 28px; opacity: 1; }
.reading-progress { margin-top: 30px; display: flex; align-items: center; gap: 12px; color: var(--fg4); font: 11px/1.5 var(--font-sans); }
.progress-track { width: 110px; height: 2px; position: relative; background: var(--rule); }
.progress-fill { position: absolute; inset: 0; width: 0; background: var(--fg4); }
.share { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; font: 12px/1.5 var(--font-sans); }
.share button { border: 0; padding: 0; background: none; color: var(--fg4); }
.share button:hover { text-decoration: underline; }
.mobile-contents { display: none; }
/* Scaled on the compositor, so the per-frame progress update never lays out. */
.reading-line { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--fg4); z-index: 45; transform: scaleX(0); transform-origin: 0 0; will-change: transform; }
.sidenote-number { cursor: pointer; }
.heading-anchor:focus-visible { opacity: 1; }
article.content { font-size: 17px; line-height: 1.6; }
article.content pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
article.content .epigraph { margin-bottom: 2rem; }
article.content a { overflow-wrap: anywhere; }
/* A bar's percentage is measured against the full track; its label sits beside it. */
.bar-track { display: block; position: relative; padding-right: 0; }
.bar { display: block; }
.bar-value { position: absolute; left: calc(var(--bar-value) + 10px); top: 50%; transform: translateY(-50%); }
.paginator { max-width: none; padding: 0 0 64px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 0; align-items: start; }
.paginator a:first-child { grid-column: 5 / 8; padding-right: 22px; }
.paginator #back-to-top { grid-column: 1 / 4; grid-row: 1; }
.paginator a:last-child { grid-column: 8 / 11; }
.site-footer { padding: 24px var(--gutter); display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; letter-spacing: 0; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 16px; background: var(--fg); color: white; font: 13px/1.5 var(--font-sans); z-index: 50; }

/* Alternate layouts change only placement; all three use the source's style. */
.essay .site-header { padding-block: 8px; }
.essay .article-hero { padding: 24px 0 20px; min-height: 0; }
.essay .post-title { margin-bottom: 12px; }
.essay .publish-metadata { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.essay .publish-metadata .date::before { content: "·"; padding-right: 14px; color: var(--fg5); }
.essay .post-content-shell { padding-top: 36px; }
.essay .cover { grid-column: 5 / 13; grid-row: 2; max-width: 660px; margin-top: 12px; }
.essay .cover-frame { aspect-ratio: auto; height: 180px; min-height: 0; }
.research .article-hero { min-height: 240px; padding-block: 40px; }
.research .cover { max-width: 240px; }
.research .cover-frame { min-height: 180px; }


/* Selected Essay rail: Open branches (01), in the publication fonts. Kept quiet so the column reads first. */
.essay .left-toc { max-width: 250px; }
.essay .rail-title { font-size: 15px; line-height: 1.4; font-weight: 600; }
.essay .rail-title.visible { margin-bottom: 20px; }
.essay .left-toc ul { gap: 0; }
.essay .left-toc li { display: block; }
.essay .left-toc li > a { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font: 400 12px/1.5 var(--font-sans); }
.essay .left-toc .section-name { min-width: 0; }
.essay .left-toc .section-number { flex: none; min-width: 20px; font: 400 10px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--fg5); }
.essay .left-toc li.is-active .section-number { color: var(--fg4); }
.essay .left-toc li.sub > a { padding: 2px 0 2px 30px; font-size: 11px; }
.essay .left-toc li.sub + li:not(.sub) > a { padding-top: 6px; }
.essay .left-toc li.is-active .section-name { transform: translateX(3px); }
.essay .left-toc a { font-family: var(--font-sans); font-weight: 400; color: var(--fg5); }
.essay .left-toc li.is-active a, .essay .left-toc a:hover { color: var(--fg); font-weight: 400; }
.essay .reading-progress { margin-top: 22px; gap: 10px; font: 11px/1.4 var(--font-sans); }
.essay .progress-track { flex: 1; min-width: 0; max-width: 200px; height: 11px; overflow: hidden; white-space: nowrap; background: none; color: var(--fg5); font: 11px/11px var(--font-mono); }
.essay .progress-fill { overflow: hidden; white-space: nowrap; background: none; color: var(--fg4); }
.essay .percent { min-width: 30px; font-variant-numeric: tabular-nums; color: var(--fg5); }
.essay .scroll-hint { margin: 12px 0 0; font: 9px/1.5 var(--font-sans); letter-spacing: .09em; color: var(--fg5); }

.essay .share { gap: 8px; margin-top: 24px; font: 11px/1.5 var(--font-sans); }

@media (max-width: 1439px) {
 .sidenote { display: none; float: none; width: 100%; margin: 1rem 0 1.4rem; padding: 14px 16px; background: var(--bg_code); border-radius: 3px; }
 .margin-toggle:checked + .sidenote { display: block; }
 .sidenote-number::after { text-decoration: underline; text-underline-offset: 2px; }
}
@media (min-width: 1600px) { :root { --sidenote-width: 250px; --sidenote-gap: 40px; } }
@media (max-width: 1000px) { .left-toc { padding-right: 12px; } .mock-preview { height: 210px; } }
@media (max-width: 900px) {
 :root { --gutter: 27px; }
 .article-hero { grid-template-columns: 1fr; padding: 36px 0 32px; min-height: 0; }
 .post-heading { grid-column: 1; grid-row: 1; max-width: 660px; }
 .cover, .essay .cover, .research .cover { grid-column: 1; grid-row: 2; max-width: 340px; margin: 24px 0 0; }
 .cover-frame, .essay .cover-frame, .research .cover-frame { aspect-ratio: 1.8; min-height: 175px; }
 .post-content-shell { grid-template-columns: minmax(0,1fr); padding-top: 30px; }
 .essay .article-hero { padding: 24px 0 20px; }
 .essay .cover { margin-top: 12px; }
 .essay .cover-frame { aspect-ratio: auto; height: 150px; min-height: 0; }
 .essay .post-content-shell { padding-top: 24px; }
 .post-content-shell > article.content { grid-column: 1; }
 .left-toc { display: none; }
 .mobile-contents { display: block; grid-column: 1; max-width: 660px; margin: 0 0 32px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); font: 13px/1.5 var(--font-sans); }
 .mobile-contents:not([open]) > a { display: none; }
 .mobile-contents summary { cursor: pointer; color: var(--fg4); }
 .mobile-contents a { display: block; padding-top: 12px; text-decoration: none; }
 .paginator { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
 .paginator #back-to-top { order: 3; }
 .gallery-header { margin-left: 0; }
 .mock-grid { grid-template-columns: 1fr; gap: 42px; }
 .mock-preview { height: 320px; }
}
@media (max-width: 640px) {
 :root { --gutter: 20px; }
 .site-header { padding-block: 6px; }
 .review-nav { padding-block: 12px; }
 .review-nav nav { gap: 18px; }
 .post-title { font-size: 25px; }
 .cover, .essay .cover, .research .cover { max-width: 290px; }
 .figure-frame { padding: 18px 16px; }
 .loop-link { flex: none; }
 .model-key { overflow-wrap: anywhere; }
 .site-footer { font-size: 12px; }
 .mock-preview { height: 250px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width:379px) { :root { --masthead-height:106px; } }