/* Monokai palette. --muted is lightened from Monokai's comment grey to stay readable at small sizes. */
:root { color-scheme: dark; --bg: #272822; --sheet: #1e1f1c; --ink: #f8f8f2; --head: #fd971f; --sub: #e6db74; --muted: #b5b09a; --pink: #f92672; --green: #a6e22e; --blue: #66d9ef; --rule: #49483e; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--mono); }
a { color: var(--blue); }
a:focus-visible, summary:focus-visible, pre:focus-visible { outline: 2px solid var(--sub); outline-offset: 2px; }
/* The menu stays pinned to the top. --menu-h keeps page links from landing underneath it. */
html { --menu-h: 3.25rem; scroll-padding-top: calc(var(--menu-h) + .75rem); }
.menu { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; min-height: var(--menu-h); padding: .4rem 1rem; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.brand { color: var(--pink); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.dd { position: relative; }
.dd summary { cursor: pointer; padding: .3rem .5rem; color: var(--green); font-weight: 600; font-size: .9rem; }
.dd[open] summary { background: var(--bg); }
.panel { position: absolute; left: 0; top: 100%; width: min(26rem, 90vw); max-height: 70vh; overflow-y: auto; padding: .6rem .8rem; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.panel h2 { margin: .5rem 0 .15rem; color: var(--sub); font-size: .8rem; font-weight: 600; }
.panel h2:first-child { margin-top: 0; }
.issues a { display: block; padding: .15rem .25rem; font-size: .875rem; text-decoration: none; }
.issues a:hover, .pages a:hover { background: var(--bg); text-decoration: underline; }
.issues a[aria-current] { color: var(--pink); font-weight: 700; }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .25rem; width: min(20rem, 90vw); }
.pages a { padding: .25rem 0; text-align: center; border: 1px solid var(--rule); text-decoration: none; }
.pdf-panel { width: min(62rem, 94vw); padding: 0; }
.pdf-frame { display: block; width: 100%; height: 72vh; border: 0; background: #fff; }
.pdf-link { margin: 0; padding: .4rem .8rem; font-size: .875rem; }
.issue { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.25rem .75rem 2rem; }
/* The sheet: one printed page. Inner widths, type sizes and spacing are set per page from where things were printed, in units of the page's width, so it scales like a PDF. */
.sheet { width: 100%; max-width: 1000px; container-type: inline-size; background: var(--sheet); box-shadow: 0 2px 12px rgba(0, 0, 0, .55); padding: 0; }
/* Body text stays comfortable at any width: left-aligned, never justified or auto-hyphenated, in equal columns with a clear gap. */
.print { padding: 3cqw 5cqw 1cqw; font-family: Georgia, "Times New Roman", Times, serif; font-size: max(15px, 1.72cqw); line-height: 1.55; }
.print p { margin: 0 0 .8em; text-align: left; overflow-wrap: break-word; }
.print h2, .print h3 { margin: .15em 0; line-height: 1.15; text-align: left; }
.print h2 { color: var(--head); font-weight: 700; }
.print h3 { color: var(--sub); font-weight: 700; margin: 1.1em 0 .4em; }
.print .deck { color: var(--muted); font-style: italic; text-align: center; margin-bottom: 1em; }
.print .byline { color: var(--muted); font-weight: 700; }
.print .source { color: var(--muted); font-size: .8em; font-style: italic; margin-bottom: .6em; }
.print .small { color: var(--muted); font-size: .85em; }
.print .callout { font-style: italic; text-align: left; line-height: 1.25; border-left: .4cqw solid var(--pink); padding-left: 1.5cqw; margin: 1cqw 0; }
.band { width: 100%; }
.cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 4.5cqw; align-items: start; }
.col { min-width: 0; }
@container (max-width: 640px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.masthead { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 2cqw; border-bottom: .4cqw double var(--ink); padding-bottom: .5cqw; margin-bottom: 1cqw; }
.mast-name { font-size: 7cqw; font-weight: 700; line-height: 1; }
.mast-date { font-size: 4.5cqw; line-height: 1; }
.mast-sub { grid-column: 1 / -1; color: var(--muted); font-size: 1.1cqw; letter-spacing: .06em; text-align: right; }
.art { width: 100%; margin-bottom: 1cqw; background-size: 100% auto; background-position: 0 0; background-repeat: no-repeat; filter: invert(1) hue-rotate(180deg); }
.fig { display: block; max-width: 100%; height: auto; margin: 1cqw auto; background: #fff; }
/* List and table pages: real tables, one per printed column. */
.tables { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 3.5cqw; align-items: start; }
@container (max-width: 640px) { .tables { grid-template-columns: minmax(0, 1fr); } }
.tcol { min-width: 0; overflow-x: auto; }
.tcol table { width: 100%; border-collapse: collapse; font-size: max(12px, 1.3cqw); line-height: 1.35; }
.tcol td { padding: .12em .9em .12em 0; vertical-align: top; }
.tcol td:last-child { padding-right: 0; }
.tcol td.num { width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tcol th { padding: .7em 0 .25em; color: var(--sub); font-size: 1.15em; text-align: center; }
.tcol tr:hover td { background: var(--bg); }
.folio { margin: 0; padding: 0 4cqw 1.5cqw; color: var(--muted); font-family: "Times New Roman", Times, serif; font-size: 1.5cqw; font-weight: 700; text-align: right; }
.note { max-width: 1000px; margin: 0; color: var(--muted); font-size: .875rem; }