* Tailwind's `isolate z-10`, which makes it a stacking context, so every * z-index inside it resolves against that context and can never beat a sibling * of it at any value. * * Lifting

above the navbar is the obvious next move and is wrong — it * takes the article up with it, so prose scrolls over the top of the nav * instead of under it, in the strip the scrim is meant to be dimming. The * navbar is hidden instead. It is inert and covered by a backdrop while a modal * is open, so there is nothing there to lose, and

stays where it is. */ body.reader-sheet-open #navbar { visibility: hidden; } /* * The Display and Share sheets are rendered inside .reader-bar, because above * 1024px they are popovers anchored to the buttons that open them. The bar is * position:fixed, and a fixed element creates a stacking context whatever its * z-index — so those two panels' z-index:56 resolved INSIDE the bar and the * whole subtree painted at the bar's 40, underneath the scrim at 55. Everything * about them looked right and every tap landed on the backdrop instead of the * control, which then read as the sheet ignoring you. * * Lifting the bar above the scrim for the duration is what puts its panels * there too. It costs nothing visually: a sheet is anchored to the same bottom * edge and is taller than the bar, so the bar is completely covered the whole * time it is raised. * * 56 and not higher, deliberately. The Contents and Commands panels are NOT * inside the bar — they sit at 56 in the root stacking context — and the bar is * earlier in the DOM, so an equal z-index leaves them painting above it. At 57 * the bar would win and start swallowing taps through the bottom of those two. */ @media (max-width: 1023px) { body.reader-sheet-open .reader-bar { z-index: 56; } } /* The sheet: stock ground, a rule on its top edge, and the upward shadow whose hairline is the load-bearing half. */ .reader-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 72vh; display: flex; flex-direction: column; padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--stock); border-top: 1px solid var(--rule); box-shadow: var(--shadow-sheet); transform: translateY(101%); visibility: hidden; transition: transform var(--transition-duration-slow, 300ms) var(--ease), visibility 0s linear var(--transition-duration-slow, 300ms); } .reader-panel[data-open='true'] { transform: none; visibility: visible; transition: transform var(--transition-duration-slow, 300ms) var(--ease), visibility 0s; } /* The panel scrolls, not the page behind it: the body is pinned while a sheet is open, so this is the only thing left that can move. */ .reader-panel { overflow-y: auto; overscroll-behavior: contain; } /* Named, and closable without knowing that a backdrop is tappable or that the handle can be dragged. Both of those work; neither is discoverable from a screen reader, and neither exists for a keyboard. */ .reader-panel-bar { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.1rem 0.35rem 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.35rem; } .reader-panel-heading { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } /* A 26px ruled square, like the sheet's own close control in the app. */ .reader-panel-close { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule); background: none; color: var(--ink-3); cursor: pointer; transition: background var(--transition-duration-fast, 150ms) var(--ease), color var(--transition-duration-fast, 150ms) var(--ease); } .reader-panel-close:hover { background: var(--sheet-2); color: var(--ink); } /* The grab handle is the affordance that says "drag me down": a bar, not a pill. */ .reader-panel::before { content: ''; flex: none; width: 2.125rem; height: 3px; margin: 0.25rem auto 0.6rem; background: var(--ink-3); } .reader-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; transition: opacity var(--transition-duration-base, 200ms) var(--ease); } .reader-scrim[hidden] { display: none; } .reader-scrim.is-open { opacity: 1; } .reader-panel-label { margin: 0.75rem 0 0.5rem; padding: 0 0.35rem; } .reader-divider { border: 0; border-top: 1px solid var(--rule); margin: 0.75rem 0.35rem; } /* Segmented preference rows — one shared border; the chosen setting inverts to ink. Settings are ink; only a live plate takes the spot. */ .reader-seg { display: flex; gap: 0; margin: 0 0.35rem; border: 1px solid var(--rule); background: var(--sheet); } .reader-seg button { flex: 1; min-height: 2.5rem; padding: 0.4rem 0.25rem; border: 0; background: none; color: var(--ink-2); font-family: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-duration-fast, 150ms) var(--ease), color var(--transition-duration-fast, 150ms) var(--ease); } .reader-seg button + button { border-left: 1px solid var(--rule); } .reader-seg button:hover { background: var(--sheet-2); color: var(--ink); } .reader-seg button[aria-pressed='true'] { background: var(--ink); color: var(--stock); } .reader-reset { width: 100%; margin-top: 0.25rem; padding: 0.5rem; border: 0; background: none; color: var(--ink-3); font-family: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .reader-reset:hover { color: var(--ink); } /* Share panel internals. */ .reader-url { display: flex; align-items: stretch; gap: 0; margin: 0.35rem 0.35rem 0.6rem; padding: 0; border: 1px solid var(--rule); background: var(--sheet); } .reader-url-text { flex: 1; min-width: 0; align-self: center; padding: 0 0.7rem; font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The primary action of the panel: the spot as a fill. Pressed lays down more ink; done goes to the OK ink. */ .reader-copy { flex: none; min-height: 2.25rem; padding: 0.4rem 0.8rem; border: 0; border-left: 1px solid var(--rule); background: var(--spot); color: var(--spot-ink); font-family: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-duration-base, 200ms) var(--ease); } .reader-copy:active { background: var(--spot-press); } .reader-copy.is-done { background: var(--ok); color: var(--sheet); } /* Rows: one ruled group, a soft rule between rows, more ink on hover. */ .reader-share-row { display: flex; flex-direction: column; margin: 0 0.35rem; border: 1px solid var(--rule); background: var(--sheet); } .share-option { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: 0.8125rem; font-weight: 500; text-align: left; cursor: pointer; transition: background var(--transition-duration-fast, 150ms) var(--ease); } .share-option + .share-option { border-top: 1px solid var(--rule-soft); } .share-option .blog-icon { color: var(--ink-2); } .share-option:hover { background: var(--sheet-2); } .share-option[hidden] { display: none; } .reader-divider + .share-option { margin: 0 0.35rem; border: 1px solid var(--rule); background: var(--sheet); width: auto; } /* Command menu. A sheet like the others below 1024px; a centred dialog above, because a bottom sheet on a wide monitor puts the thing you are typing into as far from your eyes as the layout allows. */ .reader-cmd-field { flex: none; display: flex; align-items: center; gap: 0.6rem; margin: 0 0.35rem 0.5rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink-3); transition: border-color var(--transition-duration-fast, 150ms) var(--ease); } .reader-cmd-field:focus-within { border-color: var(--spot); } .reader-cmd-field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 1rem; color: var(--ink); } .reader-cmd-field input::placeholder { color: var(--ink-3); } .reader-cmd-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 0.25rem; } .reader-cmd-group { margin: 0.75rem 0 0.25rem; padding: 0 0.6rem; } .reader-cmd-group[hidden] { display: none; } .reader-cmd-item { position: relative; display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem 0.5rem 0.75rem; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .reader-cmd-item[hidden] { display: none; } .reader-cmd-item .blog-icon { flex: none; width: 1rem; height: 1rem; color: var(--ink-2); } /* The selected command is the live one: a 2px spot rule on its left edge. */ .reader-cmd-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; } .reader-cmd-item:hover, .reader-cmd-item.is-selected { background: var(--sheet-2); } .reader-cmd-item.is-selected::before { background: var(--spot); } .reader-cmd-empty { margin: 0.5rem 0.6rem 0.75rem; font-size: 0.8125rem; color: var(--ink-2); } .reader-cmd-empty[hidden] { display: none; } @media (min-width: 1024px) { .reader-panel--command { left: 50%; right: auto; bottom: auto; top: 12vh; width: min(34rem, calc(100vw - 3rem)); max-height: 60vh; padding: 0.5rem; border: 1px solid var(--rule); background: var(--sheet); box-shadow: var(--shadow-lift); transform: translate(-50%, -0.5rem); } .reader-panel--command[data-open='true'] { transform: translate(-50%, 0); } .reader-panel--command::before { display: none; } /* It is a dialog at every width, so unlike the popovers it keeps its title bar and its close button up here. */ .reader-panel--command .reader-panel-bar { display: flex; } .reader-panel--command .reader-cmd-field { background: var(--stock); } } /* Contents panel. */ .reader-panel-head { flex: none; padding: 0.35rem 0.6rem 0.75rem; } .reader-readout { display: flex; align-items: baseline; gap: 0.35rem; margin: 0 0 0.5rem; } .reader-readout b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .reader-readout span { font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.02em; } /* Filled by blog-toc.js once it knows how many headings there were. Empty until then, and collapsed while it is, so the flex gap does not leave a hole. */ .reader-readout-sections:empty { display: none; } .reader-pct { margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0; color: var(--ink-3); } /* 1px rule track, spot fill. */ .reader-meter { height: 3px; background: linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 1px no-repeat; overflow: hidden; } .reader-meter i { display: block; height: 100%; width: 0; background: var(--spot); transition: width var(--transition-duration-fast, 150ms) linear; } .reader-panel-foot { flex: none; display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); } .reader-panel-foot a { display: flex; align-items: center; gap: 0.55rem; min-height: 2.5rem; padding: 0.4rem 0.6rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background var(--transition-duration-fast, 150ms) var(--ease), color var(--transition-duration-fast, 150ms) var(--ease); } .reader-panel-foot a:hover { background: var(--sheet-2); color: var(--ink); } .reader-panel-foot .blog-icon { width: 0.95rem; height: 0.95rem; } .reader-panel-foot b { margin-left: auto; font-size: 0.5625rem; font-weight: 600; padding: 0.05rem 0.3rem; border: 1px solid var(--rule); color: var(--ink-3); } @media (min-width: 1024px) { /* Popovers: children of the bar, so they travel with it while it is stuck and never need repositioning on scroll. */ .reader-panel--pop { position: absolute; left: auto; /* Offsets on an absolutely positioned child resolve against the containing block's PADDING box, so this has to repeat the rail's padding to land the popover's edge on the rail rather than 24px past it. */ right: 1.5rem; bottom: auto; top: calc(100% + 0.5rem); width: 19rem; max-height: none; padding: 0.4rem; border: 1px solid var(--rule); background: var(--sheet); box-shadow: var(--shadow-lift); transform: translateY(-0.4rem) scale(0.98); opacity: 0; transition: opacity var(--transition-duration-fast, 150ms) var(--ease), transform var(--transition-duration-fast, 150ms) var(--ease), visibility 0s linear var(--transition-duration-fast, 150ms); } .reader-panel--pop[data-open='true'] { transform: none; opacity: 1; transition: opacity var(--transition-duration-fast, 150ms) var(--ease), transform var(--transition-duration-fast, 150ms) var(--ease), visibility 0s; } .reader-panel--pop::before { display: none; } /* A popover is not a dialog: it is dismissed by Esc, by clicking away, or by pressing its trigger again, and a title bar on top of four rows of controls is just noise. The sheet keeps both. */ .reader-panel--pop .reader-panel-bar { display: none; } .reader-panel--pop .reader-url, .reader-panel--pop .reader-cmd-field { background: var(--stock); } .reader-panel--pop .reader-seg, .reader-panel--pop .reader-share-row, .reader-panel--pop .reader-divider + .share-option { background: var(--stock); } /* The contents column is not dismissible — the toolbar button collapses it — so it keeps its heading and loses the close button. */ .reader-panel--contents .reader-panel-close { display: none; } .reader-panel--contents .reader-panel-bar { padding: 0 0.6rem 0.5rem; border-bottom: 0; margin-bottom: 0; } /* Belt and braces: the class is only ever set below this breakpoint, but a resize while it is applied should not leave the bar parked off-screen. */ .reader-bar.is-hidden { transform: none; } /* Contents becomes a column. It is visible by default here — the toggle collapses it rather than revealing it — so the sheet transform, the sheet shadow and the scrim all have to be unwound. */ /* A fixed height, not a max-height: the column is a flex box whose list takes the slack, and only a resolved height gives it any to take. That is what pins "Saved articles / All articles" to the bottom of the column instead of letting them ride up under a short table of contents. */ .reader-panel--contents { position: sticky; top: calc(var(--reader-sticky-offset, 5rem) + 3.75rem); left: auto; right: auto; bottom: auto; z-index: 1; height: calc(100dvh - var(--reader-sticky-offset, 5rem) - 5.25rem); max-height: none; padding: 0; border: 0; background: none; box-shadow: none; transform: none; visibility: visible; overflow: hidden; transition: opacity var(--transition-duration-base, 200ms) var(--ease); } .reader-panel--contents::before { display: none; } .reader-pane-collapsed .reader-panel--contents { opacity: 0; pointer-events: none; } .reader-panel-head { padding: 0 0.6rem 0.85rem; } /* Up here the panel title is a column label rather than a dialog heading: a plate label with the rule running off its end. */ .reader-panel--contents .reader-panel-heading { flex: 1; display: flex; align-items: center; gap: 0.625rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-3); } .reader-panel--contents .reader-panel-heading::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .reader-panel--contents .reader-pct { margin-left: 0; } } /* ------------------------------------------------------------------ toc -- */ /* Sections are a sequence, so the top-level entries are numbered — in CSS, because blog-command.js builds the ⌘K list from each link's textContent and a number in the markup would leak into it. */ .toc { flex: 1; min-height: 0; overflow-y: auto; padding: 0.25rem 0; } .toc ol { list-style: none; margin: 0; padding: 0; } .toc > ol { counter-reset: toc; } .toc > ol > li { counter-increment: toc; } .toc ol ol { margin: 0.1rem 0 0.2rem; padding-left: 1.85rem; } .toc li { margin: 0; } .toc a { position: relative; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.85rem; font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: var(--ink-3); text-decoration: none; transition: color var(--transition-duration-fast, 150ms) var(--ease), background var(--transition-duration-fast, 150ms) var(--ease); } .toc > ol > li > a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* The spine: a rule per section that fills in behind you. It answers "how far in am I" without a second progress bar competing with the one on the bar. */ .toc a::after { content: ''; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px; background: var(--rule); transition: background var(--transition-duration-slow, 300ms) var(--ease); } .toc a:hover { color: var(--ink); background: var(--sheet); } .toc a.is-read::after { background: var(--ink-3); } .toc a.active { color: var(--spot-text); font-weight: 600; background: var(--sheet); } .toc a.active::before { color: var(--spot-text); } .toc a.active::after { background: var(--spot); } .toc ol ol a { font-size: 0.78125rem; font-weight: 400; padding-top: 0.35rem; padding-bottom: 0.35rem; } @media (max-width: 1023px) { /* Touch targets, and enough of the hierarchy visible at once that the panel is worth opening. The horizontal chip rail this replaces showed about two and a half h2s and no h3s at all. */ .toc a { font-size: 0.9375rem; min-height: 2.75rem; display: flex; align-items: center; } .toc ol ol a { font-size: 0.875rem; } } /* ------------------------------------------------ reading preferences --- */ :root { --reader-size: 1.1875rem; --reader-measure: 52rem; } [data-reader-size='s'] { --reader-size: 1.0625rem; } [data-reader-size='l'] { --reader-size: 1.3125rem; } [data-reader-size='xl'] { --reader-size: 1.5rem; } /* Centred in its own column rather than pinned to the left of it. The measure is narrower than the space beside the panel, and left-aligning leaves the article hugging the panel with a third of the screen empty to its right. */ .main-content { max-width: var(--reader-measure); margin-inline: auto; transition: max-width var(--transition-duration-base, 200ms) var(--ease); } /* * Serif body copy. Scoped through the id, not the class: .interior-prose p and * .article-content p are both (0,1,1), so blog.css only wins by source order — * which nothing asserts, and which would flip the day someone reorders the two * tags. #blog-content.article-content p is (1,2,1) and cannot lose. * * .interior-prose stays untouched: it is shared by forty tool and marketing * pages that are not long-form reading. Every colour, radius and face it sets * is overridden below at the id's specificity. */ #blog-content.article-content { max-width: none; font-family: var(--font-read); font-size: var(--reader-size); line-height: 1.72; color: var(--ink); } #blog-content.article-content p, #blog-content.article-content li { font-size: inherit; line-height: 1.72; color: var(--ink); } #blog-content.article-content strong { font-weight: 600; color: var(--ink); } #blog-content.article-content h2, #blog-content.article-content h3, #blog-content.article-content h4 { font-family: var(--font-ui); font-weight: 700; font-variation-settings: 'wdth' 108; letter-spacing: -0.02em; color: var(--ink); } /* A rule above every section: the print device that also does the table of contents' work on the page itself. */ #blog-content.article-content h2 { font-size: 1.625rem; line-height: 1.15; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); } #blog-content.article-content h3 { font-size: 1.1875rem; line-height: 1.25; } #blog-content.article-content h4 { font-size: 1rem; } #blog-content.article-content a { color: var(--spot-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } #blog-content.article-content a:hover { color: var(--ink); } /* Tables and code stay in the UI face — they are scanned, not read. */ #blog-content.article-content table, #blog-content.article-content code, #blog-content.article-content pre { font-size: 0.875rem; } #blog-content.article-content table { font-family: var(--font-ui); font-size: 0.8125rem; } #blog-content.article-content .table-scroll { border: 1px solid var(--rule); border-radius: 0; } #blog-content.article-content thead { background: var(--sheet-2); } #blog-content.article-content th, #blog-content.article-content td { border-bottom: 1px solid var(--rule-soft); } #blog-content.article-content th { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } #blog-content.article-content td { color: var(--ink); font-variant-numeric: tabular-nums; } #blog-content.article-content caption { caption-side: bottom; padding: 0.5rem 0; text-align: left; font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } #blog-content.article-content code { font-family: var(--font-mono); font-size: 0.875em; padding: 0.1rem 0.35rem; border: 1px solid var(--rule-soft); border-radius: 0; background: var(--sheet-2); color: var(--ink); } /* A code block is an ink plate on stock; on the proofing table it is a sheet. */ #blog-content.article-content pre { font-family: var(--font-mono); font-size: 0.8125rem; border: 0; border-radius: 0; background: var(--ink); color: var(--stock); } #blog-content.article-content pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: 0.8125rem; } .dark #blog-content.article-content pre { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); } #blog-content.article-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; } #blog-content.article-content small { color: var(--ink-3); } /* --------------------------------------------------------- back to top -- */ /* Both nodes are created by blog-top.js, which is why neither appears in any template. The sentinel's height IS the trigger distance: a screen and a half, so the button never turns up while the top of the page is still visible. */ .blog-top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 150vh; pointer-events: none; } /* A ruled square on a sheet, floating: the one permitted elevation. */ .blog-top { position: fixed; right: 1.25rem; bottom: 1.25rem; /* Above the reader bar, below the scrim and the panels it dims — though it is hidden outright while a sheet is open, so that ordering never shows. */ z-index: 45; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity var(--transition-duration-base, 200ms) var(--ease), transform var(--transition-duration-base, 200ms) var(--ease), border-color var(--transition-duration-fast, 150ms) var(--ease), color var(--transition-duration-fast, 150ms) var(--ease), visibility 0s linear var(--transition-duration-base, 200ms); } .blog-top:hover { color: var(--ink); border-color: var(--ink); } .blog-top .blog-icon { width: 1.125rem; height: 1.125rem; } .blog-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--transition-duration-base, 200ms) var(--ease), transform var(--transition-duration-base, 200ms) var(--ease), border-color var(--transition-duration-fast, 150ms) var(--ease), color var(--transition-duration-fast, 150ms) var(--ease), visibility 0s; } /* A sheet dims the page behind it; a button floating over that dimming has not been dimmed. */ body.reader-sheet-open .blog-top { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 1023px) { /* Clear of the bar in the thumb zone. */ body:has(.reader-bar) .blog-top { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); right: 1rem; } /* The toast is full-width down here and lands in the same band. It is on screen for three seconds after an action the reader just took, and it is the one carrying an Undo, so the button is what steps aside. */ body:has(.copy-toast.show) .blog-top { opacity: 0; pointer-events: none; } } /* -------------------------------------------------------- focus pill ---- */ /* Rendered by the template and shown by .focus-boot as well as body.focus-mode, so a persisted focus session never paints a page with no visible way out. */ .focus-pill { display: none; position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; align-items: center; gap: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem; border: 1px solid var(--rule); background: var(--sheet); box-shadow: var(--shadow-lift); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } /* Focus mode is the live plate: a 6px spot square. */ .focus-pill-state::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.55rem; background: var(--spot); vertical-align: middle; } .focus-pill-exit { min-height: 1.9rem; padding: 0.3rem 0.65rem; border: 1px solid var(--rule); background: none; color: var(--ink-2); font-family: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .focus-pill-exit:hover { color: var(--ink); border-color: var(--ink); } /* --------------------------------------------------- article body extras - */ /* A sheet plane with registration marks (see .blog-feature). It sits directly under the byline and above the first paragraph, and a block of brand colour there reads as an advert for the article rather than as the top of it. The points are set in the body serif because they are the article in miniature. */ .tldr-box { position: relative; border: 1px solid var(--rule); background: var(--sheet); padding: 1.25rem 1.5rem 1.4rem; margin-bottom: 2rem; } .tldr-title { margin: 0 0 0.9rem; } .tldr-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .tldr-points li { display: flex; gap: 0.75rem; font-family: var(--font-read); font-size: 1.03125rem; line-height: 1.55; color: var(--ink); } /* A 6px ink square, not a spot dot. */ .tldr-points li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.6rem; background: var(--ink); } .tldr-points strong { color: var(--ink); font-weight: 600; } .tldr-points code { font-family: var(--font-mono); font-size: 0.8125em; padding: 0.05rem 0.3rem; border: 1px solid var(--rule-soft); background: var(--sheet-2); } /* .article-content also carries .interior-prose, so typography, tables, code and their dark variants all come from landing.built.css. The id-scoped rules above override the colours; only geometry deltas here. */ .article-content { max-width: none; } .article-content > :first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* A hairline frame on artwork. outline, not box-shadow: an is a replaced element and an inset shadow paints under its pixels. No

in the sanitize allowlist, so there is nothing to wrap. */ .article-content img { max-width: 100%; height: auto; outline: 1px solid var(--rule); outline-offset: -1px; } /* Anything the browser scrolls to itself — a #hash on load or a native find-in-page jump — gets a first-pass clearance here. blog-toc.js then aligns an initial hash from the live navbar + bar geometry once layout settles. */ .article-content h2, .article-content h3, [data-toc-section] h2, .post-keep-working h2, .post-sources h2, .post-related h2 { scroll-margin-top: calc(var(--reader-sticky-offset, calc(var(--nav-clearance) - 2rem)) + 3.5rem); } .article-content blockquote { border-left: 2px solid var(--ink); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--ink-2); } .auto-link { font-weight: 500; } /* A real control, at every input type. The dotted underline used to invite a tap that did nothing: the bubble was a CSS ::after revealed on :hover, and `@media (hover: none)` hid it outright, so touch — most of the traffic — got an affordance with no behaviour behind it. The text stays ink; the rule under it is what takes the spot when the term is live. */ .tooltip-term { border-bottom: 1px dotted var(--ink-3); cursor: help; /* An inline span, not a button: buttons do not wrap reliably mid-line, and "Open Graph" sitting at a line break in a 320px column would either overflow or leave a hole. */ } .tooltip-term:hover, .tooltip-term[aria-expanded='true'] { border-bottom-style: solid; border-bottom-color: var(--spot); } /* position:fixed on , so it contributes nothing to document overflow and can be clamped inside the viewport wherever the term happens to fall. blog-tooltips.js sets left/top; everything here is presentation. An ink plate; a sheet on the proofing table. */ .term-popover { position: fixed; left: 0; top: 0; z-index: 70; max-width: min(18rem, calc(100vw - 1.5rem)); padding: 0.55rem 0.75rem; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 400; font-style: normal; line-height: 1.5; color: var(--stock); background: var(--ink); box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-duration-fast, 150ms) var(--ease), visibility 0s linear var(--transition-duration-fast, 150ms); } .dark .term-popover { color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); } .term-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--transition-duration-fast, 150ms) var(--ease), visibility 0s; } /* ------------------------------------------------------------------ faq -- */ /* Rules, not cards. The FAQ is the last stretch of the article and boxing every question turns eight answers into eight objects to get past. */ .faq-section { margin-top: 3rem; } .faq-section h2 { font-family: var(--font-ui); font-size: 1.625rem; font-weight: 700; font-variation-settings: 'wdth' 108; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); } .faq-accordion { display: flex; flex-direction: column; } /* Native

deliberately: LogoNuri's shell script binds .faq-btn globally, so a button-based accordion here would be double-bound. */ .faq-item { border-bottom: 1px solid var(--rule); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; color: var(--ink); padding: 0.95rem 0.25rem 0.95rem 0; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transition-duration-fast, 150ms) var(--ease); } .faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq-answer { padding: 0 2rem 1.1rem 0; font-family: var(--font-read); font-size: 1.03125rem; line-height: 1.65; color: var(--ink); } .faq-answer p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------- endcaps -- */ /* Everything after the article proper: the tools it points at, its sources, and what to read next. One rule above each and a plate label for a heading, so they read as a footer to the piece rather than as three more sections of it. */ .post-endcap { margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); } .post-endcap h2 { margin: 0 0 1rem; } /* The tools are the article's primary action; the glyph carries the spot. */ .post-tool-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .post-tool-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border: 1px solid var(--rule); background: var(--sheet); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: border-color var(--transition-duration-fast, 150ms) var(--ease), background var(--transition-duration-fast, 150ms) var(--ease); } .post-tool-chip:hover { border-color: var(--ink); background: var(--sheet-2); } .post-tool-chip .blog-icon { width: 0.9375rem; height: 0.9375rem; color: var(--spot-text); } .post-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .post-sources a { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.84375rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: color var(--transition-duration-fast, 150ms) var(--ease), text-decoration-color var(--transition-duration-fast, 150ms) var(--ease); } .post-sources a:hover { color: var(--ink); text-decoration-color: currentColor; } .post-sources .blog-icon { width: 0.8125rem; height: 0.8125rem; color: var(--ink-3); } /* -------------------------------------------------------------- related -- */ /* Text only. These are the last two things on the page and they were competing with the article's own artwork for the same attention; the category, the title and the length are what decides whether either gets clicked. A tiles grid: one border, one hairline between cells. */ .post-related-grid { display: grid; gap: 1px; border: 1px solid var(--rule); background: var(--rule); } @media (min-width: 640px) { .post-related-grid { grid-template-columns: repeat(2, 1fr); } } .post-related-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem 1rem; background: var(--sheet); text-decoration: none; transition: background var(--transition-duration-fast, 150ms) var(--ease); } .post-related-card:hover { background: var(--sheet-2); } .post-related-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } .post-related-date { font-size: 0.6875rem; color: var(--ink-3); } /* ===================================================== focus reading mode = */ /* * One hide list, two triggers. * * `.focus-boot` lands on from the head script before exists, so a * persisted focus session never flashes the full chrome; `.focus-mode` lands on * once blog-actions.js runs and takes over. The two must hide exactly the * same chrome, or the difference is what flashes — which is what used to happen: * the boot list omitted the quick actions and the related grid, so both were * visible for a frame on every reload of a focused article. * * :is() is what stops them drifting apart again. landing.built.css already ships * 85 of them, so it is not a new browser requirement. */ :is(.focus-boot, body.focus-mode) #navbar, :is(.focus-boot, body.focus-mode) .interior-breadcrumbs, :is(.focus-boot, body.focus-mode) .reader-bar, :is(.focus-boot, body.focus-mode) .reader-panel, :is(.focus-boot, body.focus-mode) .post-related, :is(.focus-boot, body.focus-mode) .post-share-rail, :is(.focus-boot, body.focus-mode) .blog-cta-band, :is(.focus-boot, body.focus-mode) .blog-top, :is(.focus-boot, body.focus-mode) footer { display: none; } /* The pill is the whole point of the redesign here: focus mode used to persist across every future article with nothing on screen saying so. It is shown during boot as well, so the window between first paint and blog-actions.js is never a page with no navigation and no way out. */ :is(.focus-boot, body.focus-mode) .focus-pill { display: flex; } /* Layout, also shared. Collapsing the panel does not reclaim its grid track — tracks are declared by grid-template-columns, not by their children — so without these the booted article sits in a narrower, off-centre column until blog-actions.js lands. */ :is(.focus-boot, body.focus-mode) .blog-article-body { display: block; } :is(.focus-boot, body.focus-mode) .main-content { max-width: var(--reader-measure); margin: 0 auto; } /* Focus mode is one column, so the masthead comes in off the rail and onto the measure with everything else — a full-width headline over a centred article is the two-margin problem the rest of the page is arranged to avoid. */ :is(.focus-boot, body.focus-mode) .post-header { max-width: var(--reader-measure); margin-inline: auto; } /* The lead image needs no rule of its own: it is inside .main-content, which is already on the measure. */ :is(.focus-boot, body.focus-mode) .blog-article { padding-top: 3rem; padding-bottom: 4rem; } /* ============================================================== feedback = */ /* An ink plate, uppercase, squared. */ .copy-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 80; transform: translate(-50%, 1rem); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stock); background: var(--ink); padding: 0.7rem 1rem; opacity: 0; pointer-events: none; transition: opacity var(--transition-duration-base, 200ms) var(--ease), transform var(--transition-duration-base, 200ms) var(--ease); } .copy-toast.show { opacity: 1; transform: translate(-50%, 0); } .dark .copy-toast { color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); } /* An actionable toast has to be clickable, which the base rule is not. Only raised for the variant that actually carries an action, so a plain confirmation still cannot swallow a click meant for the article underneath. */ .copy-toast { display: flex; align-items: center; gap: 0.85rem; } .copy-toast:has(.copy-toast-action) { pointer-events: auto; padding-right: 0.4rem; } .copy-toast-action { flex: none; min-height: 1.9rem; padding: 0.3rem 0.6rem; border: 1px solid currentColor; background: none; color: inherit; font-family: inherit; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; opacity: 0.75; transition: opacity var(--transition-duration-fast, 150ms) var(--ease); } .copy-toast-action:hover { opacity: 1; } /* The bar's Listen button fetches a script and then waits on the browser's asynchronous voice list. Silence there reads as a dead button, which is why people press it twice. A stepped blink — mechanical, not a fade. */ .reader-btn.is-loading { cursor: progress; } .reader-btn.is-loading .blog-icon { animation: reader-blink 1.2s steps(1) infinite; } @keyframes reader-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .reader-btn.is-loading .blog-icon { animation: none; opacity: 0.5; } } /* Below 1024px the bar is fixed to the bottom, so a bottom-anchored toast would land on top of it. */ @media (max-width: 1023px) { .copy-toast { bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); left: 1rem; right: 1rem; transform: translateY(1rem); } .copy-toast.show { transform: none; } } /* Off-screen scratch field for the execCommand('copy') fallback path. It has to be focusable and selectable, so it cannot be display:none or visibility:hidden. */ .copy-fallback { position: fixed; top: 0; left: -9999px; opacity: 0; } /* ========================================================= listen player = */ /* The word being read is the live plate. */ .tts-active { background: var(--spot-wash-strong); } /* ====================================================== reader palettes = */ /* Blog-only reading palettes deliberately do not add/remove .dark or touch localStorage.theme. The site navbar keeps the site theme; the document, its toolbar and its panels use this independent, validated preference. Each palette is a paper stock: it re-grounds the same tokens every reading component already reads. The variables live on #main-content (and explicitly on its body-mounted toast/popover) so the shared navbar, CTA band and footer continue to inherit the site theme from . */ html.press-blog[data-reader-palette='light'] #main-content, html.press-blog[data-reader-palette='light'] .copy-toast, html.press-blog[data-reader-palette='light'] .term-popover { color-scheme: light; --stock: #FAF9F6; --sheet: #FFFFFF; --sheet-2: #F1EEE8; --ink: #17161B; --ink-2: #464351; --ink-3: #69655E; --rule: rgba(23, 22, 27, 0.14); --rule-soft: rgba(23, 22, 27, 0.08); --spot: #2563EB; --spot-text: #1D4ED8; --spot-press: #1D4ED8; --spot-ink: #FFFFFF; --spot-wash: rgba(37, 99, 235, 0.06); --spot-wash-strong: rgba(37, 99, 235, 0.18); --ok: #1E6F52; --ok-wash: #E4F0EA; --hold: #A8700C; --hold-text: #8A5A08; --stop: #B3261E; --stop-wash: #FBE9E7; --scrim: rgba(23, 22, 27, 0.14); --shadow-lift: 0 1px 0 var(--rule-soft), 0 6px 18px rgba(23, 22, 27, 0.07); --shadow-sheet: 0 -1px 0 var(--rule), 0 -18px 40px rgba(23, 22, 27, 0.10); } /* Sepia is a different stock, and the one palette allowed its own literals. The ground stays exactly #F6F0E3: smoke-blog asserts rgb(246, 240, 227). */ html.press-blog[data-reader-palette='sepia'] #main-content, html.press-blog[data-reader-palette='sepia'] .copy-toast, html.press-blog[data-reader-palette='sepia'] .term-popover { /* literal-ok */ color-scheme: light; --stock: #F6F0E3; --sheet: #FCF7EB; --sheet-2: #EFE6D2; --ink: #352B20; --ink-2: #5C4F3F; --ink-3: #6E6150; --rule: rgba(53, 43, 32, 0.16); --rule-soft: rgba(53, 43, 32, 0.09); --spot: #8A4B20; --spot-text: #7A4119; --spot-press: #6A3813; --spot-ink: #FCF7EB; --spot-wash: rgba(138, 75, 32, 0.08); --spot-wash-strong: rgba(138, 75, 32, 0.2); --ok: #1E6F52; --ok-wash: #E4F0EA; --hold: #A8700C; --hold-text: #8A5A08; --stop: #B3261E; --stop-wash: #FBE9E7; --scrim: rgba(53, 43, 32, 0.16); --shadow-lift: 0 1px 0 var(--rule-soft), 0 6px 18px rgba(53, 43, 32, 0.08); --shadow-sheet: 0 -1px 0 var(--rule), 0 -18px 40px rgba(53, 43, 32, 0.12); } html.press-blog[data-reader-palette='dark'] #main-content, html.press-blog[data-reader-palette='dark'] .copy-toast, html.press-blog[data-reader-palette='dark'] .term-popover { color-scheme: dark; --stock: #131218; --sheet: #1D1B23; --sheet-2: #232128; --ink: #F2F0F4; --ink-2: #BFBCC8; --ink-3: #8A8695; --rule: rgba(242, 240, 244, 0.16); --rule-soft: rgba(242, 240, 244, 0.09); --spot: #6FA3FF; --spot-text: #6FA3FF; --spot-press: #8DB6FF; --spot-ink: #0B1220; --spot-wash: rgba(111, 163, 255, 0.09); --spot-wash-strong: rgba(111, 163, 255, 0.24); --ok: #4FD1A0; --ok-wash: #16302A; --hold: #F0B440; --hold-text: #F0B440; --stop: #FF7A6E; --stop-wash: #331B1B; --scrim: rgba(0, 0, 0, 0.5); --shadow-lift: 0 1px 0 var(--rule-soft), 0 6px 18px rgba(0, 0, 0, 0.34); --shadow-sheet: 0 -1px 0 var(--rule), 0 -18px 40px rgba(0, 0, 0, 0.5); } /* The palette re-grounds only the reading surface. Shared site chrome remains on the site theme even when the reader explicitly chooses another stock. */ html.press-blog[data-reader-palette] #main-content { background-color: var(--stock); color: var(--ink); } /* The site theme's few structural dark rules (a sheet where light has an ink plate) follow the palette, not .dark, once a palette is set. */ html[data-reader-palette='light'] #blog-content.article-content pre, html[data-reader-palette='sepia'] #blog-content.article-content pre { background: var(--ink); color: var(--stock); border: 0; } html[data-reader-palette='dark'] #blog-content.article-content pre { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); } html[data-reader-palette='light'] .term-popover, html[data-reader-palette='sepia'] .term-popover, html[data-reader-palette='light'] .copy-toast, html[data-reader-palette='sepia'] .copy-toast { color: var(--stock); background: var(--ink); border: 0; } html[data-reader-palette='dark'] .term-popover, html[data-reader-palette='dark'] .copy-toast { color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); } @media (min-width: 1024px) { html[data-reader-palette] .reader-panel--contents { background: transparent; } } /* ============================================================ saved page = */ .saved-page { padding-bottom: 3rem; } .saved-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .saved-search, .saved-sort select { font-family: inherit; font-size: 0.875rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 0; padding: 0.55rem 0.8rem; outline: none; } .saved-search::placeholder { color: var(--ink-3); } .saved-search { flex: 1 1 16rem; } .saved-sort select { font-size: 0.75rem; font-weight: 600; } .saved-search:focus-visible, .saved-sort select:focus-visible { outline: none; border-color: var(--spot); } /* A tiles grid: one border, one hairline between cells. */ .saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--rule); background: var(--rule); } .saved-list:empty { border: 0; background: none; } @media (min-width: 768px) { .saved-list { grid-template-columns: repeat(2, 1fr); } } .saved-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--sheet); padding: 1.1rem; } .saved-card-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; } .saved-card-title:hover { text-decoration: underline; text-underline-offset: 0.15em; } .saved-card-desc { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); } .saved-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.6875rem; color: var(--ink-3); } /* Remove is the stop action: ruled in the stop ink, never filled. */ .saved-remove { font-family: inherit; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stop); background: transparent; border: 1px solid var(--stop); cursor: pointer; padding: 0.25rem 0.5rem; } .saved-remove:hover { background: var(--stop-wash); } .saved-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; background: var(--sheet); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* ================================================================ print = */ .print-header, .print-footer { display: none; } /* Nothing here is gated by a test, and it rots the moment an element is renamed without anyone noticing — `.post-share` sat in this list for months naming a class that never existed. When reading chrome is added, add it here too. Paper is paper: the greys below are print literals, not tokens. */ @media print { /* literal-ok */ #navbar, .interior-breadcrumbs, .reader-bar, .reader-panel, .reader-scrim, .term-popover, .focus-pill, .blog-cta-band, .blog-top, .copy-toast, .post-related, .post-share-rail, footer, .skip-link { display: none !important; } .blog-article { padding-top: 0; padding-bottom: 0; } .blog-article-body { display: block; } .main-content { max-width: none; } .article-content { max-width: none; color: #000; } .article-content a { text-decoration: underline; } /* Paper has no preference, and the reader's on-screen size choice should not decide how many pages come out of the printer. */ #blog-content.article-content { font-size: 11pt; line-height: 1.5; } /* An ink plate does not print; a code block becomes a ruled box. */ #blog-content.article-content pre { background: none; color: #000; border: 1px solid #999; } .print-header, .print-footer { display: block; font-size: 10pt; color: #111; } .print-header { border-bottom: 1px solid #999; padding-bottom: 0.4rem; margin-bottom: 1rem; } .print-footer { border-top: 1px solid #999; padding-top: 0.6rem; margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; } .print-url { word-break: break-all; } /* A long URL encodes to a version-9 symbol (49 modules). At 128px that is ~0.55mm per module in print, which is around the practical floor for a phone camera — do not shrink this. */ .print-qr { flex: none; width: 128px; height: 128px; } .print-qr-label { font-size: 9pt; color: #444; } .tldr-box { border: 1px solid #999; background: none; box-shadow: none; } .tldr-box::before, .tldr-box::after { display: none; } .post-header { border-bottom: 1px solid #999; } .post-endcap { border-top: 1px solid #999; } .post-tool-chip { border: 1px solid #999; } .faq-item { border-bottom: 1px solid #999; } .faq-answer { display: block !important; } } /* ======================================================= reduced motion = */ /* Durations are no longer listed here. Every transition above now reads --transition-duration-*, and tokens.css already clamps all three to 50ms under this same query, so the blog finally gets the site-wide treatment instead of a hand-maintained copy that had to be extended by hand for every new selector. Nothing on this page moves on hover any more — planes change ink, not position — so the only displacement left to neutralise is the entry motion of the floating button. (The footer's stepped blink is the shell's, and tailwind.landing.css stops it under the same query.) */ @media (prefers-reduced-motion: reduce) { .blog-top { transform: none; } }