* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: #aab1b4; color: #111211; }

.switcher { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.switcher a { padding: 9px 12px; text-decoration: none; border-radius: 5px; }

.paper { --ink: #e8eae8; --quiet: #9ca19e; --line: #393d3b; min-height: 100vh; color: var(--ink); background: #111312; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.paper .topline { height: 7px; background: #626b68; }
.paper .frame { max-width: 1320px; margin: auto; padding: 0 clamp(20px, 4vw, 64px); }
.paper header { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.paper .wordmark { font-size: 17px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.paper .switcher a:hover, .paper .switcher [aria-current] { background: #292e2b; }
.paper .intro { padding: clamp(64px, 9vw, 126px) 0 clamp(60px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: end; }
.paper .kicker, .paper .side-note, .paper .meta { font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.paper .kicker { color: #b9c0bb; }
.paper h1 { max-width: 800px; margin: 24px 0 0; font-size: clamp(58px, 10vw, 138px); font-weight: 600; line-height: .9; letter-spacing: -.085em; }
.paper .side-note { max-width: 225px; margin: 0 0 7px; color: var(--quiet); line-height: 1.7; }
.paper .feature { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 7vw, 110px); padding: 36px 0 110px; border-top: 1px solid var(--ink); }
.paper .feature .meta { color: var(--quiet); }
.paper .feature .meta span { display: block; margin-top: 8px; }
.paper article { max-width: 690px; }
.paper article h2 { margin: 0 0 28px; font-size: clamp(30px, 4vw, 47px); line-height: 1.08; letter-spacing: -.05em; }
.paper article h3 { margin: 46px 0 14px; font-size: 20px; letter-spacing: -.03em; }
.paper article p, .paper article li { font-size: 17px; line-height: 1.8; }
.paper article p { margin: 0 0 21px; }
.paper article ul { padding-left: 1.2em; }
.paper article li { padding-left: .4em; margin: 8px 0; }
.paper article a { color: #c4d5dc; text-underline-offset: 3px; }
.paper article blockquote { margin: 42px 0; padding: 4px 0 4px 24px; border-left: 3px solid #7f8984; color: #c1c9c4; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.paper article blockquote p { margin: 0; font-size: inherit; line-height: 1.4; }
.paper article code { padding: 2px 5px; border-radius: 3px; background: #272b28; font: .86em ui-monospace, SFMono-Regular, Menlo, monospace; }
.paper article pre { overflow-x: auto; padding: 22px 24px; background: #202421; border: 1px solid #393d3b; }
.paper article pre.markdown-code { background: #202421 !important; color: var(--ink) !important; }
.paper article pre.markdown-code span { color: inherit !important; }
.paper article pre code { padding: 0; background: none; }
.paper footer { padding: 26px 0 50px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 13px; }

.night { --ink: #e3eaff; --quiet: #8998b8; --line: #29364e; min-height: 100vh; color: var(--ink); background: #0a1020; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.night .shell { max-width: 1480px; margin: auto; display: grid; grid-template-columns: minmax(220px, 27%) minmax(0, 1fr); min-height: 100vh; }
.night aside { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 34px clamp(24px, 3vw, 48px); border-right: 1px solid var(--line); }
.night .monogram { color: #8dacff; font-size: 56px; font-weight: 650; line-height: 1; letter-spacing: -.11em; text-decoration: none; }
.night .rail-label { margin: 0 0 18px; color: var(--quiet); font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.night .rail-title { max-width: 220px; margin: 0; font-size: clamp(26px, 3vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.night .rail-foot { color: var(--quiet); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.night main { min-width: 0; padding: 32px clamp(24px, 6vw, 104px) 90px; }
.night .switcher { justify-content: flex-end; }
.night .switcher a:hover, .night .switcher [aria-current] { background: #1c2a48; }
.night .mast { margin: clamp(75px, 10vw, 145px) 0 55px; }
.night .eyebrow { color: #8dacff; font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.night h1 { max-width: 850px; margin: 24px 0; font-size: clamp(50px, 8vw, 105px); font-weight: 500; line-height: .98; letter-spacing: -.075em; }
.night .dek { max-width: 520px; color: var(--quiet); font-size: 18px; line-height: 1.65; }
.night .story { display: grid; grid-template-columns: 86px minmax(0, 680px); gap: clamp(20px, 4vw, 70px); padding-top: 36px; border-top: 1px solid var(--line); }
.night .story-date { padding-top: 5px; color: var(--quiet); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.night article { min-width: 0; }
.night article h2 { margin: 0 0 30px; font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.night article h3 { margin: 46px 0 18px; color: #a8bfff; font-size: 18px; font-weight: 600; }
.night article p, .night article li { color: #b5c2dd; font-size: 16px; line-height: 1.85; }
.night article p { margin: 0 0 21px; }
.night article strong { color: var(--ink); }
.night article ul { padding-left: 1.2em; }
.night article li { margin: 8px 0; }
.night article a { color: #a8bfff; text-decoration-color: #5a78c4; text-underline-offset: 4px; }
.night article blockquote { margin: 44px 0; padding: 8px 0 8px 24px; border-left: 2px solid #86a5ff; }
.night article blockquote p { margin: 0; color: var(--ink); font-size: 23px; font-weight: 450; line-height: 1.45; letter-spacing: -.03em; }
.night article code { padding: 3px 6px; border: 1px solid #354361; border-radius: 4px; background: #17233b; color: #c6d5ff; font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; }
.night article pre { overflow-x: auto; padding: 24px; border: 1px solid #354361; border-radius: 6px; background: #101a2d; }
.night article pre.markdown-code { background: #101a2d !important; }
.night article pre code { padding: 0; border: 0; background: none; }
.night footer { margin-top: 90px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--quiet); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 800px) {
	.paper .intro { grid-template-columns: 1fr; gap: 22px; }
	.paper .side-note { max-width: 440px; }
	.paper .feature { grid-template-columns: 1fr; gap: 28px; }
	.paper .feature .meta span { display: inline; margin: 0 0 0 12px; }
	.night .shell { display: block; }
	.night aside { position: static; height: auto; flex-direction: row; align-items: center; gap: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
	.night aside .rail-center, .night aside .rail-foot { display: none; }
	.night main { padding-top: 20px; }
	.night .mast { margin-top: 70px; }
}
@media (max-width: 520px) {
	.paper header { align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 0; }
	.paper .switcher a, .night .switcher a { padding: 8px; }
	.paper .intro { padding-top: 70px; }
	.night main { padding-inline: 20px; }
	.night .switcher { justify-content: flex-start; }
	.night .story { display: block; }
	.night .story-date { display: block; margin-bottom: 25px; }
}
