/* Dekiro dev blog. The game's UI (scripts/ui/ui_theme.gd) on the web: lacquer and ink, gold trim, crimson
   title bars, jade buttons. 9-slices come from assets/ui at 2x, drawn with border-image + pixelated scaling.
   Source: tools/blog/static/site.css (copied by tools/blog/build_site.py; never edit website/). */

@font-face { font-family: "DotGothic16"; src: url(fonts/DotGothic16.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/PixelifySans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen.woff2) format("woff2"); font-display: swap; }

:root {
	--ink: #0e0907;
	--lacquer: #1a110c;
	--lacquer-brown: #3a2316;
	--wood: #56351f;
	--crimson-deep: #5c1114;
	--crimson: #9a1e22;
	--crimson-lit: #c23a32;
	--gold-shade: #7f5a1e;
	--gold: #c9962e;
	--gold-lit: #f4d77e;
	--jade-deep: #1f5a44;
	--jade: #3f9a74;
	--link: #74d6a8;
	--text: #e9dcc0;
	--muted: #b7a37c;
	--cream: #fff1d6;
	--title-text: #ffe9b0;
	--shadow-red: #3a0a0c;
	--font-head: "DotGothic16", "Pixelify Sans", ui-monospace, monospace;
	--font-ui: "Pixelify Sans", "DotGothic16", system-ui, sans-serif;
	--font-tiny: "Silkscreen", "Pixelify Sans", monospace;
	--font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, "Noto Serif", serif;
	--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
	--measure: 690px;  /* the text column */
	--mgap: 0px;       /* gap between the text and the margin column (sidenotes, margin figures) */
	--mnote: 0px;      /* the margin column: 0 on narrow screens, where notes fold into the text */
	--content: calc(var(--measure) + var(--mgap) + var(--mnote));
	--toc: 0px;
	--gutter: 16px;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
	margin: 0;
	background: var(--ink) url(ui/ink.png) repeat;
	background-size: 96px 96px;
	image-rendering: pixelated;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 19px;
	line-height: 1.65;
	overflow-x: hidden;
}
body > * { image-rendering: auto; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-lit); }
:focus-visible { outline: 3px solid var(--gold-lit); outline-offset: 2px; border-radius: 1px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--gold-lit); padding: 8px 12px; }
.skip:focus { left: 8px; }
::selection { background: var(--crimson); color: var(--cream); }

.seal, .cloud, .tab, .btn, .titlebar, .panel, .num, hr.knot, .prose h2::before { image-rendering: pixelated; }

/* ------------------------------------------------------------ header */
.site-head {
	background: linear-gradient(var(--ink), #120b08);
	border-bottom: 2px solid var(--gold-shade);
	box-shadow: 0 2px 0 var(--ink), 0 4px 0 var(--gold);
	margin-bottom: 40px;
}
.head-inner {
	max-width: 1200px; margin: 0 auto; padding: 14px var(--gutter) 0;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-bottom: 12px; }
.brand .seal { width: 28px; height: 28px; }
.brand-name { font-family: var(--font-head); font-size: 32px; line-height: 1; color: var(--gold-lit); text-shadow: 2px 2px 0 var(--shadow-red); }
.brand-sub { font-family: var(--font-tiny); font-size: 16px; line-height: 1; color: var(--muted); text-transform: uppercase; padding-top: 8px; }
.brand:hover .brand-name { color: var(--cream); }
.tabs { display: flex; gap: 4px; }
.tab {
	font-family: var(--font-ui); font-size: 18px; line-height: 1; color: #c4ad84; text-decoration: none;
	border-style: solid; border-width: 8px 8px 0; border-image: url(ui/tab_inactive.png) 4 4 0 fill / 8px 8px 0 stretch; white-space: nowrap;
	padding: 4px 8px 10px;
}
.tab:hover { border-image-source: url(ui/tab_hover.png); color: var(--cream); }
.tab.is-active { border-image-source: url(ui/tab_active.png); color: var(--cream); text-shadow: 1px 1px 0 var(--shadow-red); }

/* ------------------------------------------------------------ windows (title bar + lacquer panel) */
.window { position: relative; margin: 0 0 36px; min-width: 0; }
.titlebar {
	position: relative; z-index: 1;
	/* the eave + band highlight (8 rows) and the band shadow + trim (4 rows) at 2x; the flat crimson between them stretches */
	margin: 0; height: 44px; display: flex; align-items: center; justify-content: center;
	padding: 0 0 1px;
	border-style: solid; border-width: 16px 24px 8px; border-image: url(ui/titlebar.png) 8 12 4 12 fill / 16px 24px 8px round stretch;
	font-family: var(--font-head); font-weight: 400; font-size: 16px; line-height: 16px; color: var(--title-text);
	text-shadow: 2px 2px 0 var(--shadow-red); letter-spacing: 0.5px;
}
.titlebar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; }
.panel {
	margin: -10px 4px 0;
	border-style: solid; border-width: 28px; border-image: url(ui/panel.png) 14 fill / 28px round;
	padding: 6px 4px 2px;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ buttons */
.btn {
	display: inline-block; font-family: var(--font-ui); font-size: 18px; line-height: 20px; color: #fbefd5;
	text-decoration: none; text-shadow: 1px 1px 0 var(--shadow-red);
	border-style: solid; border-width: 8px; border-image: url(ui/btn_normal.png) 4 fill / 8px stretch;
	padding: 2px 8px 4px; margin: 4px 6px 4px 0;
}
.btn:hover { border-image-source: url(ui/btn_hover.png); color: var(--cream); }
.btn:active { border-image-source: url(ui/btn_pressed.png); padding: 4px 8px 2px; }
.btn.jade { border-image-source: url(ui/btn_jade.png); text-shadow: 1px 1px 0 #0b2a1f; }
.btn.jade:hover { border-image-source: url(ui/btn_jade_hover.png); }
.btn.jade:active { border-image-source: url(ui/btn_jade_pressed.png); }
.actions { margin-top: 18px; }

.badge {
	display: inline-block; font-family: var(--font-tiny); font-size: 12px; line-height: 1; text-transform: uppercase;
	color: var(--cream); background: var(--crimson); border: 2px solid var(--gold); box-shadow: 0 0 0 2px var(--ink);
	padding: 3px 6px 2px; margin-left: 10px; vertical-align: 2px; letter-spacing: 0.5px;
}

hr.knot, .prose hr {
	border: 0; height: 14px; margin: 40px auto; max-width: 560px;
	background: url(ui/divider_knot.png) center / 26px 14px no-repeat, url(ui/divider.png) center / 8px 10px repeat-x;
	image-rendering: pixelated;
}

/* ------------------------------------------------------------ home */
main { display: block; padding: 0 var(--gutter) 24px; }
.hero { max-width: 1200px; margin: 0 auto 40px; position: relative; }
.hero-frame {
	border: 2px solid var(--gold-shade); outline: 2px solid var(--ink); background: var(--ink);
	box-shadow: 0 0 0 4px var(--gold), 0 0 0 6px var(--ink), 0 0 0 8px var(--gold-shade), 0 18px 40px #000a;
	margin: 8px; line-height: 0; overflow: hidden; position: relative;
}
.hero-frame > picture, .hero-frame > picture img { display: block; width: 100%; }
.hero-img { aspect-ratio: 16 / 9; object-fit: cover; }
.hero-text {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 36px 30px; line-height: normal;
	background: linear-gradient(to bottom, transparent, #0e0907cc 55%, #0e0907f0);
}
.hero-title { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; flex-wrap: wrap; font-weight: 400; font-size: inherit; }
.hero-title span { font-family: var(--font-head); font-size: 48px; line-height: 1.1; color: var(--gold-lit); text-shadow: 3px 3px 0 var(--shadow-red), 0 0 24px #000; }
.seal.big { width: 42px; height: 42px; }
.cloud { width: 56px; height: 28px; }
.hero-tag { font-family: var(--font-ui); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--cream); margin: 0; max-width: 40ch; text-shadow: 2px 2px 0 var(--ink); }

.home-grid { max-width: 1200px; margin: 0 auto; display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); }
.lead { font-size: 1.12em; }
.intro p, .route p { margin: 0 0 12px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.card-link {
	display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start;
	text-decoration: none; color: var(--text);
	background: #1d130dcc; border: 2px solid var(--lacquer-brown); box-shadow: 0 0 0 2px var(--ink);
	padding: 10px;
	transition: border-color .15s, background-color .15s, transform .15s;
}
.card-link:hover, .card-link:focus-visible { border-color: var(--gold); background: #2a1a11; color: var(--text); transform: translateY(-2px); }
.card-link:hover .card-title { color: var(--cream); }
.thumb { position: relative; display: block; line-height: 0; border: 2px solid var(--gold-shade); box-shadow: 0 0 0 2px var(--ink); }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.num {
	position: absolute; left: -2px; top: -2px; line-height: 1;
	font-family: var(--font-head); font-size: 16px; color: var(--title-text); text-shadow: 1px 1px 0 var(--shadow-red);
	background: var(--crimson); border: 2px solid var(--gold); box-shadow: 0 0 0 2px var(--ink); padding: 4px 6px 4px;
}
.card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-kicker { font-family: var(--font-tiny); font-size: 12px; line-height: 1.3; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.card-kicker .badge { margin-left: 8px; font-size: 10px; padding: 2px 5px 1px; vertical-align: 1px; }
.card-title { font-family: var(--font-ui); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--title-text); }
.card-teaser { font-size: 16px; line-height: 1.5; color: #d2c3a2; }
.meta { font-family: var(--font-ui); font-size: 15px; line-height: 1.3; color: var(--muted); }
.meta .dot { color: var(--crimson-lit); font-size: 9px; margin: 0 8px; vertical-align: 2px; }

.route { list-style: none; margin: 0 0 12px; padding: 0; }
.route li { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px dashed var(--lacquer-brown); padding: 7px 0; }
.route a { display: flex; gap: 10px; align-items: baseline; flex: 1; text-decoration: none; color: var(--text); line-height: 1.35; }
.route a:hover .route-title { color: var(--gold-lit); text-decoration: underline; }
.route-num { font-family: var(--font-head); font-size: 16px; color: var(--gold); }
.route-title { font-family: var(--font-ui); font-size: 17px; }
.route-time { font-family: var(--font-ui); font-size: 14px; color: var(--muted); white-space: nowrap; }
.pairs { font-size: 15px; color: var(--muted); margin-top: 14px !important; }

@media (min-width: 1100px) {
	.home-grid { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "intro articles" "route articles"; align-items: start; }
	.intro { grid-area: intro; }
	.route { grid-area: auto; }
	.window.route { grid-area: route; position: sticky; top: 16px; }
	.articles { grid-area: articles; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------------ article */
.post { max-width: 1200px; margin: 0 auto; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.post-head { width: 100%; max-width: calc(var(--measure) + 120px); margin: 0 auto 36px; }
.post-head .panel { padding-left: 8px; padding-right: 8px; }
.post-head h1 { font-family: var(--font-head); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--gold-lit); text-shadow: 2px 2px 0 var(--shadow-red); margin: 0 0 14px; text-wrap: balance; }
.subtitle { font-style: italic; font-size: 20px; line-height: 1.5; color: #dccdab; margin: 0 0 14px; }
.post-meta { margin: 0; }
.prose { min-width: 0; }
.prose > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose > .fig, .prose > .code, .prose > .table-wrap { max-width: 880px; }
.toc { width: 100%; max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.prose p { margin-top: 0; margin-bottom: 1.1em; }
.prose strong { color: var(--cream); }
.prose h2 {
	font-family: var(--font-ui); font-weight: 600; font-size: 28px; line-height: 1.25; color: var(--gold-lit);
	margin-top: 2.2em; margin-bottom: 0.8em; padding: 0 0 14px 26px; position: relative;
	background: url(ui/divider.png) left bottom / 8px 10px repeat-x;
	text-shadow: 1px 1px 0 var(--shadow-red);
}
.prose h2::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 15px; height: 15px; background: url(ui/menu_mark.png) 0 0 / 15px 15px; }
.prose h3 { font-family: var(--font-ui); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--title-text); margin-top: 1.8em; margin-bottom: 0.6em; }
.prose h2:first-child { margin-top: 0.4em; }
.anchor { font-family: var(--font-ui); color: var(--gold-shade); text-decoration: none; margin-left: 8px; opacity: 0; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.prose ul, .prose ol { padding-left: 1.4em; margin-top: 0; margin-bottom: 1.2em; }
.prose li { margin: 0.35em 0; }
.prose ul > li::marker { color: var(--gold); }
.prose ol > li::marker { color: var(--gold); font-family: var(--font-ui); }
.prose blockquote {
	margin-top: 1.5em; margin-bottom: 1.5em; padding: 14px 20px; background: #1f140ecc; border-left: 4px solid var(--crimson);
	box-shadow: inset 0 0 0 1px var(--lacquer-brown); color: #dfd0b0;
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code { font-family: var(--font-mono); font-size: 0.84em; background: #0b0705; border: 1px solid var(--lacquer-brown); padding: 0.1em 0.35em; border-radius: 2px; color: #f0d9a8; overflow-wrap: anywhere; }

/* code blocks */
.code { position: relative; margin-top: 1.6em; margin-bottom: 1.6em; border-style: solid; border-width: 10px; border-image: url(ui/tooltip.png) 5 fill / 10px round; image-rendering: pixelated; }
.code::before {
	content: attr(data-lang); position: absolute; right: 2px; top: -16px; z-index: 1;
	font-family: var(--font-tiny); font-size: 10px; line-height: 1; text-transform: uppercase; color: var(--cream);
	background: var(--crimson); border: 2px solid var(--gold-shade); padding: 3px 6px 2px;
}
.code pre { margin: 0; padding: 8px 6px; overflow-x: auto; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.55; color: #e6d7b8; image-rendering: auto; tab-size: 4; -moz-tab-size: 4; }
.code pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; overflow-wrap: normal; }
.hl .c, .hl .c1, .hl .cm, .hl .ch, .hl .cs, .hl .cp, .hl .sd { color: #9a8a6a; font-style: italic; }
.hl .k, .hl .kd, .hl .kn, .hl .kr, .hl .ow, .hl .kp { color: #ff8a70; }
.hl .kc, .hl .bp, .hl .kt { color: #f4b860; }
.hl .s, .hl .s1, .hl .s2, .hl .sa, .hl .sb, .hl .sc, .hl .sh, .hl .sx, .hl .ss, .hl .dl { color: #8fdcab; }
.hl .si, .hl .se { color: #c3f0c8; }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo, .hl .il { color: #f4d77e; }
.hl .nf, .hl .fm { color: #8fd0ff; }
.hl .nb, .hl .nc, .hl .nn { color: #f0c27a; }
.hl .nd, .hl .na { color: #e7a0ff; }
.hl .nv, .hl .vg, .hl .vi { color: #f0d9a8; }
.hl .o { color: #e8b48a; }
.hl .p { color: #c9b994; }
.hl .nt { color: #ff8a70; }
.hl .err { color: inherit; background: none; }

/* tables */
/* tables: booktabs, three rules (top, under the header, bottom), no cell borders, numbers right-aligned */
.table-wrap { overflow-x: auto; margin-top: 1.6em; margin-bottom: 1.6em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.prose th { font-family: var(--font-ui); font-weight: 600; font-size: 16px; text-align: left; color: var(--title-text); border-bottom: 1px solid var(--gold-shade); padding: 9px 12px 7px; white-space: nowrap; vertical-align: bottom; }
.prose td { padding: 5px 12px; vertical-align: top; }
.prose tbody tr:first-child td { padding-top: 9px; }
.prose tbody tr:last-child td { padding-bottom: 9px; }
.prose th:first-child, .prose td:first-child { padding-left: 2px; }
.prose th:last-child, .prose td:last-child { padding-right: 2px; }
.prose .numeric { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* figures */
.fig { margin-top: 2em; margin-bottom: 2em; }
.shot { margin: 16px 0; }
.zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; color: inherit; }
.zoom picture, .zoom img { display: block; width: 100%; }
.fig .zoom, .shot .zoom { border: 2px solid var(--gold-shade); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lacquer-brown), 0 12px 28px #0008; background: var(--ink); }
.fig .zoom:hover, .shot .zoom:hover { border-color: var(--gold); }
figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--crimson); }
.prose > .fig.margin { max-width: 360px; }  /* small pictures: inline on phones, in the margin on wide screens */
.fig.margin figcaption { font-size: 14px; margin-top: 8px; padding-left: 10px; }
.fig.pixel img { image-rendering: pixelated; }

/* sidenotes (numbered) and margin notes (unnumbered): Tufte's checkbox trick, no JS */
.sn-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); margin: 0; }
.sn-ref { cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 0.68em; line-height: 0; vertical-align: 0.55em; color: var(--gold); padding: 8px 3px 8px 1px; margin: 0 -3px 0 -1px; }
sup.sn-ref { cursor: default; font-size: 0.68em; vertical-align: 0.55em; }
.sn-ref:hover { color: var(--gold-lit); }
.mn-ref { cursor: pointer; font-family: var(--font-head); font-size: 0.8em; line-height: 0; color: var(--gold); padding: 8px 4px; vertical-align: 0.2em; }
.sn-toggle:focus-visible + label { outline: 2px solid var(--gold-lit); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sidenote, .marginnote {
	display: none; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.5; color: #cdbd9a;
	hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-align: left; text-indent: 0;
}
.sidenote code, .marginnote code { font-size: 0.86em; }
.sn-num { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--gold); margin-right: 2px; }
.marginnote::before { content: "※"; font-family: var(--font-head); font-size: 12px; color: var(--gold-shade); margin-right: 6px; }
/* narrow screens: tap the number (or ※) to open the note inside the text */
.sn-toggle:checked + label + .sidenote, .sn-toggle:checked + label + .marginnote {
	display: block; margin: 0.5em 0 0.7em; padding: 8px 12px; background: #1f140ecc; border-left: 2px solid var(--gold-shade);
	box-shadow: inset 0 0 0 1px var(--lacquer-brown);
}
.sn-toggle:checked + .sn-ref, .sn-toggle:checked + .mn-ref { color: var(--gold-lit); }

/* epigraph: the developer's opening words */
.prose blockquote.epigraph {
	background: none; box-shadow: none; border: 0; padding: 0 0 0 28px; margin-top: 0.2em; margin-bottom: 2.4em; position: relative;
	font-style: italic; font-size: 1.06em; line-height: 1.6; color: #dccdab;
}
.prose blockquote.epigraph::before {
	content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.3em; width: 4px;
	background: linear-gradient(var(--gold), var(--gold-shade)); box-shadow: 0 0 0 1px var(--ink);
}
.prose blockquote.epigraph p { margin-bottom: 0.6em; }
.epigraph footer { font-family: var(--font-body); font-style: normal; font-size: 16px; color: var(--gold); text-align: right; margin-top: 0.3em; letter-spacing: 0.3px; }

/* newthought: a section opens with a few words in small caps */
.newthought { font-variant: small-caps; letter-spacing: 0.05em; color: var(--cream); }

/* contents */
.toc { margin-bottom: 32px; }
.toc details { background: #1d130dcc; border: 2px solid var(--gold-shade); box-shadow: 0 0 0 2px var(--ink); padding: 0; }
.toc summary {
	cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 16px; line-height: 1; color: var(--title-text);
	background: var(--crimson-deep); border-bottom: 2px solid var(--gold-shade); padding: 10px 14px; text-shadow: 1px 1px 0 var(--shadow-red);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "▸"; float: right; color: var(--gold); }
.toc details[open] summary::after { content: "▾"; }
.toc ol { list-style: none; margin: 0; padding: 10px 14px 12px; }
.toc li { margin: 0; }
.toc a { display: block; font-family: var(--font-ui); font-size: 15px; line-height: 1.3; color: #d2c3a2; text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid transparent; }
.toc li.lvl3 a { padding-left: 26px; font-size: 14px; color: var(--muted); }
.toc a:hover { color: var(--gold-lit); }
.toc a.is-current { color: var(--gold-lit); border-left-color: var(--crimson-lit); }

/* Wide screens: the text column moves left and a margin column opens on its right for sidenotes, margin notes
   and margin figures (Tufte's layout). From 1280 px the contents sit in a sticky column on the left as well. */
@media (min-width: 960px) {
	:root { --measure: 640px; --mgap: 32px; --mnote: 230px; }
	.post-layout:not(.single) > .post-head, .post-layout:not(.single) > .toc, .post-layout:not(.single) > .prose,
	.post-layout:not(.single) > .pager { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; }
	.post-layout:not(.single) > .toc { max-width: var(--measure); margin-left: max(0px, calc((100% - var(--content)) / 2)); }
	.post:not(.about) .prose > * { margin-left: 0; margin-right: auto; }
	.post:not(.about) .prose > .fig, .post:not(.about) .prose > .code, .post:not(.about) .prose > .table-wrap { display: flow-root; }
	.sidenote, .marginnote {
		display: block; float: right; clear: right; position: relative; width: var(--mnote);
		margin: 0.25em calc(-1 * (var(--mgap) + var(--mnote))) 1em 0;
	}
	.prose blockquote .sidenote, .prose blockquote .marginnote { margin-right: calc(-1 * (var(--mgap) + var(--mnote)) - 24px); }
	.prose li .sidenote, .prose li .marginnote { margin-right: calc(-1 * (var(--mgap) + var(--mnote))); }
	.sn-toggle { display: none; }
	.mn-ref { display: none; }
	.sn-ref { cursor: default; }
	.sn-toggle:checked + label + .sidenote, .sn-toggle:checked + label + .marginnote { margin: 0.25em calc(-1 * (var(--mgap) + var(--mnote))) 1em 0; padding: 0; background: none; border: 0; box-shadow: none; }
	.post:not(.about) .prose > .fig.margin { float: right; clear: right; width: var(--mnote); max-width: none; margin: 0.3em 0 1.2em 0; }
	.post:not(.about) .prose > .fig.full {
		clear: right; --full: min(1200px, calc(100vw - 48px)); width: var(--full); max-width: none;
		margin-left: calc((100% - var(--full)) / 2);
	}
}
@media (min-width: 1280px) {
	:root { --measure: 660px; --mgap: 32px; --mnote: 240px; --toc: 220px; }
	.post { max-width: none; }
	.post-layout { grid-template-columns: var(--toc) var(--content); gap: 0 36px; justify-content: center; }
	.post-layout.single { grid-template-columns: minmax(0, 1200px); }
	.post-layout > * { grid-column: 2; }
	.post-layout.single > * { grid-column: 1; }
	.post-layout:not(.single) > .toc { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; margin: 0; width: 100%; max-width: none; }
	.toc summary { cursor: default; pointer-events: none; }
	.toc summary::after, .toc details[open] summary::after { content: none; }
	.post:not(.about) .prose > .fig.full { width: 100%; margin-left: 0; }
}
@media (min-width: 1400px) {
	:root { --measure: 690px; --mgap: 40px; --mnote: 280px; --toc: 230px; }
	.post-layout { gap: 0 40px; }
}

/* prev / next */
.pager { width: 100%; max-width: calc(var(--measure) + 120px); margin: 56px auto 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager-link {
	display: flex; flex-direction: column; gap: 6px; text-decoration: none; padding: 14px 16px;
	background: #1d130dcc; border: 2px solid var(--lacquer-brown); box-shadow: 0 0 0 2px var(--ink);
}
.pager-link:hover { border-color: var(--gold); }
.pager-link.next { text-align: right; }
.pager-link.empty { visibility: hidden; }
.pager-dir { font-family: var(--font-tiny); font-size: 12px; text-transform: uppercase; color: var(--gold); letter-spacing: 0.5px; }
.pager-title { font-family: var(--font-ui); font-size: 19px; line-height: 1.25; color: var(--title-text); }
.pager-link:hover .pager-title { color: var(--cream); }

.progress { position: fixed; left: 0; top: 0; right: 0; height: 4px; z-index: 40; background: transparent; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson), var(--crimson-lit)); box-shadow: 0 1px 0 var(--ink); }

/* about */
.section-title { font-family: var(--font-head); font-weight: 400; font-size: 32px; color: var(--gold-lit); text-align: center; text-shadow: 2px 2px 0 var(--shadow-red); margin: 64px 0 8px; }
.gallery-wrap { max-width: 1200px; margin: 0 auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 28px; }
.shot { margin: 16px 0; }

/* 404 */
.lost { max-width: 560px; margin: 40px auto 80px; text-align: center; }
.lost-big { font-family: var(--font-head); font-size: 96px; line-height: 1; color: var(--crimson-lit); text-shadow: 4px 4px 0 var(--shadow-red); margin: 8px 0 16px !important; }
.lost .titlebar { font-size: 16px; }

/* footer */
.site-foot { max-width: 1200px; margin: 24px auto 0; padding: 0 var(--gutter) 40px; text-align: center; color: var(--muted); font-size: 15px; }
.site-foot hr { margin-top: 8px; }
.foot-brand { font-family: var(--font-head); font-size: 16px; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; }
.foot-brand .seal { width: 28px; height: 28px; }
.foot-links { font-family: var(--font-ui); font-size: 16px; margin: 0 0 10px; }
.foot-small { font-size: 13px; margin: 0; }
.foot-ai { font-size: 13px; line-height: 1.5; max-width: 760px; margin: 0 auto 8px; }
.foot-ai strong { color: var(--gold); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--gold-lit); }

/* lightbox */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.lightbox::backdrop { background: #0e0907ee; }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); width: auto; height: auto; border: 2px solid var(--gold); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-shade); cursor: zoom-out; }
.lightbox p { max-width: 900px; margin: 0 16px; color: var(--text); font-size: 15px; text-align: center; }
.lightbox .close {
	position: fixed; right: 16px; top: 16px; width: 44px; height: 44px; cursor: pointer;
	font-family: var(--font-ui); font-size: 22px; line-height: 1; color: var(--cream);
	border-style: solid; border-width: 8px; border-image: url(ui/btn_normal.png) 4 fill / 8px stretch; background: none; padding: 0; image-rendering: pixelated;
}
.lightbox .close:hover { border-image-source: url(ui/btn_hover.png); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 760px) {
	body { font-size: 17px; line-height: 1.6; }
	.lead { font-size: 1.04em; }
	.site-head { margin-bottom: 24px; }
	.head-inner { padding-top: 10px; gap: 6px; }
	.brand { padding-bottom: 6px; }
	.brand-name { font-size: 32px; }
	.brand-sub { display: none; }
	.tabs { width: 100%; }
	.tab { font-size: 16px; padding: 4px 4px 8px; flex: 1 1 auto; text-align: center; }
	.hero { margin: 0 -8px 28px; }
	.hero-frame { margin: 8px; }
	.hero-text { position: static; padding: 14px 14px 16px; background: var(--lacquer); border-top: 2px solid var(--gold-shade); }
	.hero-title { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
	.hero-title span { font-size: 32px; }
	.seal.big { margin-top: 4px; }
	.seal.big { width: 28px; height: 28px; flex: none; }
	.cloud { display: none; }
	.hero-tag { font-size: 20px; }
	.panel { border-width: 14px; border-image-width: 14px; padding: 8px 4px 4px; }
	.window { margin-bottom: 28px; }
	.card-link { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px; }
	.card-title { font-size: 21px; }
	.post-head h1 { font-size: 26px; line-height: 1.35; }
	.subtitle { font-size: 18px; }
	.prose h2 { font-size: 24px; padding-left: 22px; }
	.prose h2::before { width: 12px; height: 12px; background-size: 12px 12px; top: 0.36em; }
	.prose h3 { font-size: 20px; }
	.code pre { font-size: 13px; }
	.prose table { font-size: 15px; }
	.pager { grid-template-columns: 1fr; }
	.pager-link.next { text-align: left; }
	.pager-link.empty { display: none; }
	.gallery { grid-template-columns: minmax(0, 1fr); }
	.lost-big { font-size: 64px; }
	.badge { margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.card-link:hover, .card-link:focus-visible { transform: none; }
}

@media print {
	body { background: #fff; color: #000; }
	.site-head, .site-foot, .toc, .pager, .progress { display: none; }
	.prose h2, .prose h3, .post-head h1 { color: #000; text-shadow: none; }
}