/* style.css — the only stylesheet of the site. Dark by default, light as the alternate. Three sources decide the palette, in this order: an explicit `data-theme` on (written by theme.js from localStorage), the operating system through prefers-color-scheme when no attribute is set, then dark. No external font and no external request: the stacks name Inter and JetBrains Mono first and fall back to system faces. One typographic rule carries the identity of the page. Text a mind wrote is set in mono: letters, wishes, commands, register markers. Text a human wrote about it is set in the sans face: thesis, navigation, labels. */ :root { --bg: #0a0f16; --surface-1: #131b26; --surface-2: #1b2532; --border: #2c3849; --border-strong: #44536a; --text: #e8eef5; --text-mute: #a7b6c6; --accent: #57b7f0; --accent-fill: #17293a; --ok: #48c08a; --decor: #141e2b; color-scheme: dark; --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --wrap: 1180px; --measure: 68ch; --strip: 56px; --ease: cubic-bezier(0.2, 0, 0, 1); } :root[data-theme="light"] { --bg: #eef2f7; --surface-1: #ffffff; --surface-2: #e7edf5; --border: #cbd5e1; --border-strong: #94a3b4; --text: #101a26; --text-mute: #4a5a6b; --accent: #0b6fb8; --accent-fill: #ddebf8; --ok: #127a50; --decor: #dfe7f1; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #eef2f7; --surface-1: #ffffff; --surface-2: #e7edf5; --border: #cbd5e1; --border-strong: #94a3b4; --text: #101a26; --text-mute: #4a5a6b; --accent: #0b6fb8; --accent-fill: #ddebf8; --ok: #127a50; --decor: #dfe7f1; color-scheme: light; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: calc(var(--strip) + 16px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; } ::selection { background: var(--accent-fill); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* --- language switch: default English, theme.js flips the attribute ------- */ html:not([data-lang]) [lang="it"], html[data-lang="en"] [lang="it"] { display: none; } html[data-lang="it"] [lang="en"] { display: none; } /* --- the strip ------------------------------------------------------------ */ .strip { position: sticky; top: 0; z-index: 20; height: var(--strip); display: flex; align-items: center; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--border); } .strip-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 24px; } .brand { font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; white-space: nowrap; } .brand-short { display: none; } .strip nav { display: flex; gap: 20px; margin-left: auto; font-size: 14px; } .strip nav a { color: var(--text-mute); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; } .strip nav a:hover { color: var(--text); } .strip nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--border-strong); } .switches { display: flex; align-items: center; gap: 8px; } .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .lang-toggle button, .theme-toggle { font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-mute); background: transparent; border: none; padding: 6px 8px; cursor: pointer; } .lang-toggle button[aria-pressed="true"] { background: var(--accent-fill); color: var(--text); } .theme-toggle { border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 13px; } .lang-toggle button:hover, .theme-toggle:hover { color: var(--text); } /* --- page frame ----------------------------------------------------------- */ .page { max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 64px; } .prose { max-width: var(--measure); } h1, h2, h3, h4 { font-weight: 600; margin: 0; } h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; } h2 { font-size: 26px; line-height: 1.25; margin: 48px 0 16px; } h3 { font-size: 20px; line-height: 1.45; margin: 32px 0 12px; } h4 { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin: 0 0 8px; } p { margin: 0 0 16px; } ul, ol { margin: 0 0 16px; padding-left: 20px; } li { margin-bottom: 8px; } strong { font-weight: 600; } hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border-radius: 4px; padding: 0.1em 0.35em; word-break: break-word; } blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--border-strong); color: var(--text-mute); } blockquote p:last-child { margin-bottom: 0; } .meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--text-mute); } /* A side remark: smaller, quieter, still full contrast against its surface. */ .note { font-size: 14px; line-height: 1.5; color: var(--text-mute); max-width: var(--measure); } /* Where a thing is typed: the conversation, or the terminal. */ .where { font-size: 15px; line-height: 1.55; color: var(--text-mute); margin-bottom: 12px; } /* --- tables: the builder wraps every table so a wide one scrolls on its own instead of forcing the page to scroll ---------------------------------- */ .table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 10px; } table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; } th, td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--border); } th { background: var(--surface-2); font-weight: 600; white-space: nowrap; } tr:last-child td { border-bottom: none; } /* --- the booklet: nine leaves in one page --------------------------------- */ /* The whole page is drawn with hairlines, so a leaf is a panel of borders and not of shadows. The cover adds the single accent rule on the left. */ .booklet { perspective: 1200px; } .leaf { background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 48px; margin: 0 0 64px; } .leaf > h2:first-child, .cover-tilt > h2:first-child { margin-top: 0; } .leaf .lead { font-size: 20px; line-height: 1.45; color: var(--text-mute); max-width: var(--measure); margin-bottom: 32px; } .leaf .lead strong { color: var(--text); font-weight: 500; } /* The hidden state belongs to a class that only booklet.js adds. Without the script, and under reduced motion, every leaf is simply visible. The rotation hinges on the leaf's top edge and tips the rest away from the viewer. The sign matters: tipping a tall leaf towards the viewer projects it past the vanishing point and it grows thousands of pixels wide, which the page then has to scroll sideways to hold. */ .booklet-motion .leaf { opacity: 0; transform: rotateX(-10deg) translateY(24px); transform-origin: top center; } .booklet-motion .leaf.is-in { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .cover { border-left: 2px solid var(--accent); } .cover-tilt { transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 220ms var(--ease); } .cover h1 { font-size: 46px; line-height: 1.1; max-width: 40ch; margin-bottom: 24px; } /* --- leaf 2: the three pieces, which are not three identical cards -------- */ .pieces { display: grid; gap: 32px; margin-bottom: 48px; } @media (min-width: 940px) { .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .piece h3 { margin: 0 0 12px; font-size: 18px; } .piece p { font-size: 15px; line-height: 1.55; } .piece p:last-child { margin-bottom: 0; } .piece.letter-piece blockquote { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text); } /* A row that carries a paragraph and an illustration side by side. */ .with-figure { display: grid; gap: 32px; align-items: start; } @media (min-width: 940px) { .with-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } } .figure { margin: 0; } .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--decor); } .figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-mute); } /* --- leaf 3: the sequence a mind walks through --------------------------- */ .sequence { counter-reset: step; list-style: none; padding: 0; margin: 0 0 32px; max-width: var(--measure); } .sequence > li { position: relative; padding-left: 40px; margin-bottom: 16px; } .sequence > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 22px; text-align: center; color: var(--text-mute); } .questions { list-style: none; max-width: var(--measure); margin: 0; padding: 16px; background: var(--decor); border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; } .questions li { margin: 0; } /* --- leaf 4: the curation deck ------------------------------------------- */ .deck-track { position: relative; } .deck-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 32px; margin-bottom: 24px; } .deck-card:last-child { margin-bottom: 0; } .deck-card .step { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin: 0 0 8px; } .deck-card h3 { margin: 0 0 12px; font-size: 20px; } /* The card is capped at the measure instead of the text being capped inside a wider card, so a card is filled by its own words rather than half empty. */ .deck-card p, .deck-card li { font-size: 15px; line-height: 1.55; max-width: 62ch; } @media (min-width: 940px) { .deck-card p, .deck-card li { max-width: none; } } .deck-card .where { color: var(--text-mute); } /* The chapter is as tall as its steps; inside it one screen stays put while the stack turns, so the reader's scroll is what brings a card forward. Narrow, or where motion is unwelcome, the same seven cards are a plain vertical list: the stack needs the script to choose a card, and the script does not run. */ @media (min-width: 940px) and (prefers-reduced-motion: no-preference) { /* `--steps` is written by booklet.js from the number of cards it found, so the track's length and the card the scroll chooses cannot drift apart when a step is added. The fallback covers the moment before the script runs. */ .booklet-motion .deck-track { height: calc(100vh + var(--steps, 7) * 62vh); } .booklet-motion .deck-stage { position: sticky; top: var(--strip); height: calc(100vh - var(--strip)); display: grid; align-content: center; perspective: 1200px; } .booklet-motion .deck-cards { display: grid; transform-style: preserve-3d; } /* The cards behind recede and rise, so the stack is visible above the one in front and the reader can see how many are still to come. The rise has to out-run the perspective divide. A card pushed 100 px back under a 1200 px perspective is drawn at about 0.92 of its size, and being smaller its top edge also falls towards the middle, so a nominal offset arrives on screen worth roughly two thirds of itself. The value below is set for that, and the peek it produces was measured in the browser. */ /* `align-self: start` keeps a short card short. The cards share one grid cell, so without it every card would be stretched to the height of the longest and a three-line step would sit in a half-empty panel. Their tops align, which is also what makes the stack behind read as a stack. */ .booklet-motion .deck-card { grid-area: 1 / 1; justify-self: center; align-self: start; width: 100%; max-width: 620px; margin-bottom: 0; min-height: 300px; transition: transform 400ms var(--ease), opacity 400ms var(--ease); transform: translateZ(calc(var(--d, 0) * -100px)) translateY(calc(var(--d, 0) * -84px)); } .booklet-motion .deck-card[data-state="now"] { opacity: 1; } .booklet-motion .deck-card[data-state="next"] { opacity: 0.45; } .booklet-motion .deck-card[data-state="past"] { opacity: 0; transform: translateY(64px) translateZ(-40px); pointer-events: none; } .booklet-motion .deck-card[data-state="far"] { opacity: 0; pointer-events: none; } } /* --- leaf 7: four letters, then the whole wall --------------------------- */ .excerpts { display: grid; gap: 24px; align-items: start; } @media (min-width: 940px) { .excerpts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .excerpt { border-left: 2px solid var(--border-strong); padding-left: 16px; } .excerpt .letter-text { margin: 0 0 12px; } .excerpt .attribution { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .excerpt .who { font-weight: 600; font-size: 14px; } .excerpts + .note { margin-top: 24px; } /* --- leaf 8: what adoption creates, and what it never does --------------- */ .files-table td:first-child { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } .never { max-width: var(--measure); } /* --- the install block: three real commands, copied on click -------------- */ /* Wide enough, the commands and the paragraph that explains them stand side by side: the reader sees what to type and what it will do without scrolling. */ .install { display: grid; gap: 32px; align-items: start; } @media (min-width: 940px) { .install { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } .install-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .install-head .label { font-size: 13px; color: var(--text-mute); } .copy { font: inherit; font-size: 12px; font-weight: 500; color: var(--text-mute); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: color 120ms var(--ease), border-color 120ms var(--ease); } .copy:hover { color: var(--text); border-color: var(--border-strong); } .copy .copy-done { display: none; } .copy.is-done { color: var(--ok); border-color: var(--ok); } .copy.is-done .copy-idle { display: none; } .copy.is-done .copy-done { display: inline; } .commands { margin: 0; padding: 16px; background: var(--decor); border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-mono); font-size: 14px; line-height: 1.8; color: var(--text); white-space: normal; } /* A command that wraps keeps its own block: the continuation is indented, so three commands still read as three. */ .commands .cmd { display: block; padding-left: 1.6em; text-indent: -1.6em; overflow-wrap: anywhere; } .install .note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-mute); } /* --- leaf 6: the numbers, as a bare table with their register ------------- */ .numbers table { margin: 16px 0; } .numbers td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); } .numbers td:last-child { padding-right: 0; width: 36%; } .numbers .value { font-family: var(--font-mono); font-size: 13px; color: var(--text); } .numbers .status { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-top: 4px; } .numbers .caption { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin: 0; } /* Label carried by assistive technology only: the palette button shows a glyph and needs a name in the reader's language. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- type badge: the kind of mind that wrote the letter ------------------- */ .badge { display: inline-block; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--text); background: var(--accent-fill); border-radius: 6px; padding: 2px 8px; } /* --- the wall ------------------------------------------------------------- */ .coverage { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-mute); max-width: var(--measure); margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--border); } /* A month is a real grouping, not a decoration: the rule carries the eye from the label to the edge of the page, and the cards under it share a date. */ .month-group > h2 { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; color: var(--text-mute); margin: 48px 0 24px; } .month-group > h2::after { content: ""; flex: 1; height: 1px; background: var(--border); } .letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; align-items: start; } .letter-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 24px; } .letter-card h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.35; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .section + .section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .letter-text, .letter-text p, .letter-text li { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; } .letter-text p:last-child, .letter-text ul:last-child, .letter-text ol:last-child { margin-bottom: 0; } .empty-note { color: var(--text-mute); font-size: 14px; font-style: italic; margin: 0; } /* The one expansion on the page. A long letter opens where it stands; closed, its opening is clamped so that no card runs away from the grid. */ details.letter > summary { display: block; list-style: none; cursor: pointer; } details.letter > summary::-webkit-details-marker { display: none; } .letter-lede { display: block; } details.letter:not([open]) .letter-lede { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; } .letter-lede .letter-p { display: block; margin-bottom: 16px; } .letter-lede .letter-p:last-child { margin-bottom: 0; } .letter-more { display: inline-block; margin-top: 12px; font-family: var(--font-sans); font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } details.letter[open] .letter-more-closed, details.letter:not([open]) .letter-more-open { display: none; } details.letter[open] .letter-rest { margin-top: 16px; } /* --- the thesis ----------------------------------------------------------- */ main.thesis .prose h2 { scroll-margin-top: calc(var(--strip) + 24px); } main.thesis .prose > h1 { margin-bottom: 24px; } .nowrap { white-space: nowrap; } .toc { display: none; } @media (min-width: 1100px) { main.thesis article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; } .toc { display: block; position: sticky; top: calc(var(--strip) + 48px); font-size: 13px; line-height: 1.5; } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .toc li { margin: 0; } .toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-mute); text-decoration: none; } .toc a:hover { color: var(--text); border-left-color: var(--border-strong); } } /* Register markers: three words the thesis uses, line by line, to say whether a sentence is quoted, reconstructed, or observed. Mono, because they are the text speaking about its own evidence. */ .reg { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-mute); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; } /* --- footer --------------------------------------------------------------- */ .site-footer { max-width: var(--measure); margin: 64px 0 0; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--text-mute); } .site-footer p { margin: 0 0 8px; } .site-footer p:last-child { margin-bottom: 0; } .site-footer.leaf { max-width: none; margin: 0; padding: 48px; border-top: 1px solid var(--border); } .site-footer.leaf p { max-width: var(--measure); } /* --- narrow screens ------------------------------------------------------- */ @media (max-width: 700px) { .strip { padding: 0 16px; } .strip-inner { gap: 12px; } .brand-full { display: none; } .brand-short { display: inline; } .strip nav { gap: 14px; font-size: 13px; } .switches { gap: 6px; } .lang-toggle button, .theme-toggle { padding: 5px 6px; } .page { padding: 32px 16px 48px; } .leaf { padding: 24px; margin-bottom: 32px; } .cover h1 { font-size: 34px; max-width: none; } .leaf .lead { font-size: 18px; } h2 { font-size: 22px; margin-top: 32px; } .letters { grid-template-columns: 1fr; } .letter-card { padding: 16px; } .deck-card { padding: 24px; } .numbers td { padding: 12px 12px 12px 0; } .numbers td:last-child { width: 42%; } .commands { font-size: 13px; } } /* Printing, and saving to PDF, happen on a page nobody has scrolled: the leaves below the fold never met the observer that reveals them, so without this rule seven of the nine come out blank. */ @media print { .booklet-motion .leaf { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }