/* Generic page heroes */
.sr-page-hero { min-height: 330px; display: grid; grid-template-columns: 1.2fr .8fr; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.sr-page-hero > div:first-child { padding: 68px 58px 58px; align-self: center; }
.sr-page-hero h1 { margin: 15px 0 14px; font: 810 clamp(40px, 5vw, 66px)/.98 var(--mono); letter-spacing: -.065em; }
.sr-page-hero p { max-width: 720px; margin: 0; color: var(--muted); font: 21px/1.42 var(--serif); }
.sr-buffer-index { min-height: 100%; padding: 34px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: var(--panel-soft); font: 10px/1.5 var(--mono); }
.sr-buffer-index span { color: var(--teal); }
.sr-buffer-index code { align-self: end; color: var(--muted); }
.sr-page-feature { margin: 0; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.sr-page-feature img { display: block; width: 100%; max-height: 620px; object-fit: cover; }
.sr-page-content-shell { padding: 62px 48px 80px; background: var(--bg-raised); }

/* Writing archive */
.sr-writing-hero { min-height: 360px; }
.sr-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 44px; border-bottom: 1px solid var(--line); background: var(--panel); }
.sr-filter-tags a { padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); text-decoration: none; font: 10px/1 var(--mono); }
.sr-filter-tags a:hover { border-color: var(--accent); color: var(--accent); }
.sr-filter-tags span { margin-left: 5px; color: var(--line-strong); }
.sr-writing-archive { padding: 14px 44px 40px; background: var(--bg-raised); }
.sr-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; padding: 22px 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); font: 10px/1.3 var(--mono); }
.sr-pagination a { color: var(--accent); text-decoration: none; }
.sr-pagination a:last-child { justify-self: end; }
.sr-pagination > span:nth-child(2) { color: var(--muted); }

/* Post */
.sr-post-header { background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.sr-post-header-inner { max-width: 1020px; margin: 0 auto; padding: 72px 44px 42px; text-align: center; }
.sr-post-meta-top { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--muted); font: 10px/1.4 var(--mono); text-transform: uppercase; }
.sr-post-meta-top a { color: var(--accent); text-decoration: none; font-weight: 700; }
.sr-post-header h1 { margin: 18px auto; max-width: 980px; font: 790 clamp(38px, 5vw, 68px)/1.04 var(--mono); letter-spacing: -.058em; text-wrap: balance; }
.sr-post-deck { max-width: 820px; margin: 0 auto; color: var(--muted); font: 21px/1.45 var(--serif); }
.sr-post-byline { margin-top: 20px; color: var(--muted); font: 11px/1.4 var(--mono); }
.sr-post-feature { max-width: 1120px; margin: 0 auto 0; padding: 0 0 42px; }
.sr-post-feature img { width: 100%; max-height: 680px; display: block; object-fit: cover; border: 1px solid var(--line); }
.sr-post-feature figcaption { margin-top: 8px; color: var(--muted); font: 10px/1.5 var(--mono); text-align: left; }
.sr-article-shell { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, var(--content)) minmax(190px, 1fr); gap: 42px; padding: 64px 44px 82px; background: var(--bg-raised); }
.sr-article-gutter { display: flex; justify-content: end; color: var(--org); font: 10px/1.4 var(--mono); }
.sr-article-gutter span { position: sticky; top: 108px; height: max-content; }
.sr-toc { align-self: start; position: sticky; top: 102px; max-height: calc(100vh - 145px); overflow: auto; padding-left: 18px; border-left: 1px solid var(--line); }
.sr-toc-title { margin-bottom: 12px; color: var(--ink); font: 750 10px/1.3 var(--mono); text-transform: uppercase; }
.sr-toc a { display: block; padding: 5px 0; color: var(--muted); font: 10px/1.4 var(--mono); text-decoration: none; }
.sr-toc a[data-level="3"] { padding-left: 12px; font-size: 9px; }
.sr-toc a:hover, .sr-toc a.is-active { color: var(--accent); }
.sr-post-footer { padding: 36px 44px 58px; border-top: 1px solid var(--line); background: var(--panel); }
.sr-post-tags { max-width: var(--content); margin: 0 auto 32px; color: var(--muted); font: 10px/1.5 var(--mono); }
.sr-post-tags a { color: var(--accent); text-decoration: none; }
.sr-post-nav { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.sr-post-nav a { min-height: 120px; padding: 20px; text-decoration: none; }
.sr-post-nav a + a { border-left: 1px solid var(--line); text-align: right; }
.sr-post-nav span { display: block; margin-bottom: 9px; color: var(--muted); font: 10px/1 var(--mono); }
.sr-post-nav b { font: 680 13px/1.4 var(--mono); }
.sr-post-nav a:hover { background: var(--panel-soft); }

/* Prose / Ghost content */
.gh-content, .sr-prose { min-width: 0; font: 19px/1.72 var(--serif); color: var(--ink); }
.gh-content > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.gh-content > * + * { margin-top: 1.4em; }
.gh-content p { margin-bottom: 0; }
.gh-content h2, .gh-content h3, .gh-content h4 {
    position: relative; scroll-margin-top: 110px; font-family: var(--mono); letter-spacing: -.035em; line-height: 1.22;
}
.gh-content h2 { margin-top: 2.5em; margin-bottom: .8em; font-size: 30px; }
.gh-content h3 { margin-top: 2.1em; margin-bottom: .65em; font-size: 22px; }
.gh-content h4 { margin-top: 1.8em; margin-bottom: .55em; font-size: 17px; }
.gh-content h2::before { content: "**"; position: absolute; right: calc(100% + 13px); color: var(--org); font-size: 11px; top: .7em; }
.gh-content h3::before { content: "***"; position: absolute; right: calc(100% + 13px); color: var(--org); font-size: 9px; top: .8em; }
.gh-content a { color: var(--accent); }
.gh-content strong { font-weight: 700; }
.gh-content blockquote { padding: 2px 0 2px 22px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 1.05em; }
.gh-content hr { height: 1px; border: 0; background: var(--line); margin-top: 2.5em; margin-bottom: 2.5em; }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: .45em; }
.gh-content code:not(pre code) { padding: .12em .35em; border: 1px solid var(--line); border-radius: 3px; background: var(--code-bg); font: .82em/1.3 var(--mono); }
.gh-content pre { max-width: 900px; overflow: auto; padding: 18px 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--code-bg); font: 13px/1.6 var(--mono); }
.gh-content table { width: 100%; border-collapse: collapse; font: 14px/1.5 var(--sans); }
.gh-content th, .gh-content td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.gh-content th { background: var(--panel-soft); font-family: var(--mono); font-size: 11px; }
.gh-content figure { margin-top: 2em; margin-bottom: 2em; }
.gh-content figcaption { margin-top: 8px; color: var(--muted); font: 10px/1.5 var(--mono); text-align: center; }
.gh-content img { border-radius: 3px; }

/* Ghost wide/full cards */
.gh-content .kg-width-wide { max-width: min(1050px, calc(100vw - 72px)); width: min(1050px, calc(100vw - 72px)); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { max-width: calc(100vw - 2px); width: calc(100vw - 2px); margin-left: 50%; transform: translateX(-50%); }
.kg-image-card img, .kg-gallery-image img { display: block; width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: 8px; }
.kg-gallery-image { flex: 1 1 0; }
.kg-bookmark-card, .kg-callout-card, .kg-toggle-card, .kg-file-card, .kg-product-card { font-family: var(--sans); }
.kg-bookmark-container { border: 1px solid var(--line) !important; border-radius: 6px !important; background: var(--panel) !important; }
.kg-bookmark-title { font-family: var(--mono); }
.kg-callout-card { border-radius: 6px; }
.kg-button-card .kg-btn { background: var(--accent); border-radius: 5px; font: 700 12px/1 var(--mono); }
.kg-header-card { border-radius: 6px; overflow: hidden; }
.kg-toggle-card { border: 1px solid var(--line); box-shadow: none; background: var(--panel); }
.kg-toggle-heading-text { font-family: var(--mono); }
.kg-signup-card { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.kg-signup-card .kg-signup-card-text { font-family: var(--sans); }
.kg-signup-card h2 { font-family: var(--mono); }
.kg-embed-card iframe { max-width: 100%; }

/* Access CTA */
.gh-post-upgrade-cta { max-width: var(--content); margin: 40px auto; }
.gh-post-upgrade-cta-content { padding: 34px; border-radius: 8px; text-align: center; color: white; }
.gh-post-upgrade-cta h2 { font: 740 22px/1.3 var(--mono); }
.gh-post-upgrade-cta .gh-btn { display: inline-flex; padding: 12px 16px; border-radius: 5px; background: white; text-decoration: none; font: 700 11px/1 var(--mono); }

/* Research & Work / generic pages */
.sr-page-article-shell { padding-top: 70px; }
.sr-page-prose { max-width: var(--content); margin: 0 auto; }
.sr-page-prose > * { max-width: 100%; }
.sr-page-prose h2:first-child { margin-top: 0; }
.sr-rw-hero { background: radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 26%), var(--bg-raised); }
.sr-service-content > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sr-service-content > ul { list-style: none; padding-left: 0; }
.sr-service-content > ul > li { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }

/* About */
.sr-about-hero { min-height: 520px; display: grid; grid-template-columns: .82fr 1.18fr; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.sr-about-image { min-height: 520px; border-right: 1px solid var(--line); background: var(--panel-soft); }
.sr-about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-about-placeholder { height: 100%; min-height: 520px; display: grid; place-items: center; color: var(--teal); font: 750 14px/1 var(--mono); background-image: radial-gradient(var(--line) .8px, transparent .8px); background-size: 19px 19px; }
.sr-about-copy { align-self: center; padding: 70px 64px; }
.sr-about-copy h1 { margin: 16px 0 16px; font: 810 clamp(44px, 5vw, 68px)/1 var(--mono); letter-spacing: -.06em; }
.sr-about-copy p { margin: 0; max-width: 650px; color: var(--muted); font: 23px/1.42 var(--serif); }
.sr-about-content { padding-top: 72px; }

/* Sandbox */
.sr-sandbox { background-image: radial-gradient(var(--line) .7px, transparent .7px); background-size: 20px 20px; }
.sr-sandbox-hero { background: color-mix(in srgb, var(--bg-raised) 94%, transparent); }
.sr-sandbox-hero .sr-kicker { color: var(--teal); }
.sr-sandbox-content .kg-bookmark-card, .sr-sandbox-content .kg-callout-card { background: color-mix(in srgb, var(--panel) 94%, transparent); }

/* Project template */
.sr-project-hero { min-height: 500px; display: grid; grid-template-columns: .82fr 1.18fr; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.sr-project-hero-copy { align-self: center; padding: 64px 52px; }
.sr-project-hero-copy h1 { margin: 16px 0 16px; font: 800 clamp(42px, 5vw, 66px)/1 var(--mono); letter-spacing: -.06em; }
.sr-project-hero-copy p { margin: 0; color: var(--muted); font: 21px/1.45 var(--serif); }
.sr-project-meta { margin-top: 20px; color: var(--muted); font: 10px/1.5 var(--mono); }
.sr-project-hero-image { min-height: 500px; border-left: 1px solid var(--line); background: var(--panel-soft); display: grid; place-items: center; overflow: hidden; }
.sr-project-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-project-hero-image.sr-project-placeholder { align-content: center; gap: 12px; padding: 40px; color: var(--muted); font: 12px/1.5 var(--mono); }
.sr-project-hero-image.sr-project-placeholder b { color: var(--ink); font-size: 22px; }

/* Error */
.sr-error { min-height: calc(100vh - 160px); display: grid; place-items: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--bg-raised); }
.sr-error-buffer { width: min(680px, calc(100% - 40px)); padding: 54px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.sr-error-buffer h1 { margin: 18px 0 8px; font: 820 72px/1 var(--mono); letter-spacing: -.07em; }
.sr-error-buffer pre { overflow: auto; padding: 14px; background: var(--code-bg); color: var(--teal); font: 12px/1.5 var(--mono); }
.sr-error-buffer p { font-family: var(--serif); font-size: 19px; }