/* ═══════════════════════════════════════════════════════════ plain.css — the spartan skin for the personal notes. These notes are for me, not for an audience, so the page is stripped back to text: no cards, no borders, no shading, no tags, no hero, no reading times. A heading, a paragraph, a list of links. Everything that survives — figures, widgets, math, cross-reference popovers — survives because it teaches something, not because it decorates. Shared by every notes series that opts in via . reinforce_LLMs/ deliberately does not: it keeps rl-notes-style.css and its old look. Dark-mode rules live here rather than in css/theme.css, and are written as [data-theme="dark"] body.plain … so they beat theme.css's older two-class selectors no matter which file loads last. ═══════════════════════════════════════════════════════════ */ /* Imported here rather than in 31 s: every page that opts into body.plain gets the annotation face for free, and there is exactly one place to remove it again. Handwriting is confined to things a person would actually write by hand — figure captions, chapters not yet written — never body text, headings, or math. */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap'); body.plain { /* Light-mode greys are set by measured contrast on white, not by eye. The real cause of washed-out text here was weight, not colour: 17px Fira Sans at 300 is a hairline on white however dark you make it, so the body runs at 400 and the greys were pulled in behind it. */ --ink: #000000; --body: #1a1a1a; --muted: #4a4a4a; --faint: #5f5f5f; --rule: #dcdcdc; --link: #6e46be; --link-hover: #b088f9; --page: #ffffff; --wash: #fafafa; /* Paper. Two decorative tokens, kept as tokens so they can be switched off without hunting through rules: set --grain and --hand-rule to `none` and the page is spartan again. --grain is desaturated fractal noise, so the same tile reads as texture on white and on the dark flavors — only the opacity baked into the tile changes between them. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"); --hand-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2 C 12 2.6, 26 5.6, 40 4.1 S 68 2.4, 82 4.4 S 110 6, 124 3.9 S 152 2.5, 166 4.6 S 190 5.4, 200 3.8' fill='none' stroke='%23d2d2d2' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); /* The annotation face, and the ruling for widget panels. Caveat sits small for its point size, so anything set in it is bumped ~1.2x to sit optically level with the surrounding text. */ --hand-font: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; --grid: rgba(110, 70, 190, 0.07); /* The leaf. Real paper is never one flat tone: it is warm, it is lit unevenly, and its edge is soft. Each token below is one of those observations, so the sheet can be retuned without touching a single rule. --desk is the surface it lies on. */ --desk: #f0eee9; --sheet: rgba(255, 255, 255, 0.14); --dot: rgba(104, 116, 140, 0.10); --margin-ink: rgba(196, 92, 88, 0.12); --punch-core: rgba(120, 112, 96, 0.12); margin: 0; /* The desk. Grain plus a slow pool of light from the upper left, so the board under the sheet is lit rather than filled. */ background-color: var(--desk); /* The dot field is the page's texture, not the sheet's: it runs edge to edge behind everything, so the paper is a region of a dotted ground rather than a rectangle carrying its own ruling. */ background-image: radial-gradient(circle at 1px 1px, var(--dot) 0 1.3px, transparent 1.7px), var(--grain); background-size: 22px 22px, 200px 200px; background-position: 8px 12px, left top; /* Desk visible above and below the leaf. Without this the sheet runs off both ends of the viewport and stops reading as an object lying on something. */ padding: 46px 0 72px; color: var(--body); font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.plain strong, body.plain b { font-weight: 600; } /* ── Layout ─────────────────────────────────────────────── */ /* The leaf. 892 = 780 measure + 72 left gutter + 40 right, so the line length the notes were tuned at is unchanged — the gutter is added around it, not taken out of it. Believability is mostly lighting, not detail. Four things do the work: the sheet is warm rather than white, it is lit unevenly, the ruled lines are far fainter than a real notebook's (drift against headings reads as age rather than as a bug at this alpha), and the shadow is offset and stacked so the paper sits on the desk instead of floating over it. */ /* The container is now just the column: it centres, and nothing else. The sheet lives on
, so the breadcrumb sits on the desk above the paper and the drawn rule and copyright sit on the desk below it — the page ends where the content ends. */ body.plain .container { box-sizing: border-box; max-width: 892px; margin: 0 auto; padding: 0; } /* Header and footer are off the paper, so they carry their own indents to stay aligned with the text column on it. */ body.plain .container>.site-header, body.plain .container>.site-footer { padding-left: 72px; padding-right: 40px; } /* The leaf. 892 = 780 measure + 72 left gutter + 40 right, so the line length the notes were tuned at is unchanged. Believability is mostly lighting, not detail: the sheet is warm rather than white, lit unevenly, and its shadow is offset and stacked so the paper sits on the desk rather than floating. The value gap to the desk is deliberately tiny — the holes, the dot grid and the margin rule say "paper", not a change in brightness. */ body.plain .container>main { box-sizing: border-box; position: relative; padding: 34px 40px 44px 72px; } /* The paper is a masked layer behind the text rather than a fill on the element. A filled box has to end somewhere, and wherever it ends it draws a line — which is the hard rectangle and the bar across the top. On its own layer the whole sheet, holes and dots and margin rule included, can be feathered out at all four edges, so the page has no border to notice: it just stops being paper. z-index -1 keeps it under the text; main has no background of its own, so this composites straight onto the desk. */ body.plain .container>main::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--sheet); background-image: radial-gradient(circle at 26px 25px, var(--punch-core) 0 5.5px, transparent 6px), linear-gradient(to right, transparent 0 55px, var(--margin-ink) 55px 56px, transparent 56px); /* No grain here: the body already lays it across the whole page. Repeating it on this layer double-exposed the paper region and lifted it ~3 luminance off the desk — which read as the sheet "not blending" no matter how low --sheet went. */ background-repeat: repeat-y, no-repeat; background-size: 100% 58px, 100% 100%; background-position: left top, left top; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 210px, #000 calc(100% - 210px), transparent 100%), linear-gradient(to right, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 210px, #000 calc(100% - 210px), transparent 100%), linear-gradient(to right, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%); mask-composite: intersect; } @media (max-width: 900px) { /* Below the sheet width the furniture stops paying for itself: the gutter eats the measure and the holes crowd the text. */ body.plain { padding: 0; } body.plain .container>.site-header, body.plain .container>.site-footer { padding-left: 22px; padding-right: 22px; } body.plain .container>main { max-width: none; padding: 20px 22px 40px; } body.plain .container>main::before { content: none; } } /* Breadcrumb. The only navigation on the page — with prev/next gone, the way out of a chapter is back up to the index. */ body.plain .site-header { padding: 40px 0 0; margin-bottom: 56px; font-size: 0.9rem; color: var(--muted); } body.plain .site-header a { color: var(--muted); } body.plain .site-header a:hover { color: var(--link); } body.plain .site-header .here { color: var(--ink); } body.plain .site-footer { margin-top: 88px; padding-top: 28px; /* A drawn line rather than a border: same job, less machined. Falls back to the old hairline if --hand-rule is set to none. */ border-top: none; background-image: var(--hand-rule); background-repeat: repeat-x; background-position: left top; background-size: 200px 8px; font-size: 0.82rem; color: var(--faint); } /* A section break inside a chapter, for the rare place that wants one. Not applied anywhere by default — chapter `hr` stays zeroed. */ body.plain .hand-rule { height: 8px; margin: 44px 0; border: none; background-image: var(--hand-rule); background-repeat: repeat-x; background-position: left center; background-size: 200px 8px; } /* ── Links ──────────────────────────────────────────────── */ body.plain a { color: var(--link); text-decoration: none; } body.plain a:hover { color: var(--link-hover); text-decoration: underline; } /* ── Page title and lede ────────────────────────────────── */ body.plain h1 { font-size: 1.9rem; font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 20px; letter-spacing: -0.01em; } /* The chapter numeral, pencilled in the margin beside the title. Driven by data-ch on
, so no JS and no per-series markup beyond one attribute. It sits in the gutter the padding already reserves, so it costs nothing from the measure. */ body.plain main[data-ch] { position: relative; } body.plain main[data-ch]>h1 { position: relative; } body.plain main[data-ch]>h1::before { content: attr(data-ch); position: absolute; left: -54px; top: -0.16em; font-family: var(--hand-font); font-size: 2.9rem; font-weight: 600; line-height: 1; color: var(--margin-ink); pointer-events: none; } @media (max-width: 900px) { /* No gutter to sit in — the numeral goes inline above the title. */ body.plain main[data-ch]>h1::before { position: static; display: block; margin: 0 0 2px; font-size: 2.1rem; } } /* ── The index: nested link lists, and nothing else ─────── */ body.plain .note-index h2 { font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 40px 0 10px; padding: 0; border: none; } body.plain .note-index h2:first-of-type { margin-top: 32px; } body.plain .note-index ul { list-style: none; margin: 0; padding: 0 0 0 2px; } body.plain .note-index ul ul { padding-left: 22px; margin: 2px 0 6px; } body.plain .note-index li { margin: 3px 0; position: relative; padding-left: 16px; } body.plain .note-index li::before { content: '·'; position: absolute; left: 2px; color: var(--faint); } /* An entry with no link is a note I have not written yet. Same as the reference site: the gaps are part of the map — and now they look pencilled in beside the ones that are set, which is what they are. */ body.plain .note-index li.todo { color: var(--faint); font-family: var(--hand-font); font-size: 1.14rem; line-height: 1.5; } body.plain .note-index li.todo::before { content: '·'; color: #d8d8d8; } /* A short trailing gloss, for when the title alone is opaque. */ body.plain .note-index .gloss { color: var(--muted); font-size: 0.88rem; } body.plain .note-index .gloss::before { content: ' · '; } /* ── Leaders ──────────────────────────────────────────────── Opt in per list with