@layer components {
/* The shelf uses the site's paper, ink, type and accent tokens. */
.shelf [hidden] { display: none !important; }
.shelf-page main { padding: 3.5rem clamp(1.2rem, 4vw, 3.5rem) 2rem; }
.shelf button, .shelf select { cursor: var(--cursor-link, pointer); }
.shelf button { color: var(--ink); }
.shelf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.shelf-hero { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: end; padding-bottom: 2rem; border-bottom: 3px double var(--ink); }
.shelf-hero h1 { margin: 0; font: 480 clamp(4.5rem, 9vw, 7.8rem)/.83 var(--display); letter-spacing: -.065em; }
.shelf-hero h1 > span { color: var(--rust); }
.shelf-hero .eyebrow { font-size: .61rem; margin-bottom: 1.2rem; }
.shelf-hero__aside { border-left: 1px solid var(--rule-faint); padding-left: 1.5rem; }
.shelf-hero__aside p { margin: 0 0 .7rem; font: italic 1.4rem/1.15 var(--display); }
.shelf-hero__aside a { font: bold .65rem var(--mono); text-decoration-color: var(--rust); }
.shelf-hero__deck { margin: .5rem 0 0; max-width: 34rem; font-size: .85rem; color: var(--ink-soft); }
.shelf-hero__count { font: .65rem var(--mono); letter-spacing: .02em; padding-bottom: .25rem; }
.shelf-tools { position: sticky; top: 0; z-index: 3; background: var(--paper); display: flex; gap: 1rem; align-items: stretch; padding: 1.5rem 0; }
.shelf-search-drawer { min-width: 0; flex: 1; display: flex; }
.shelf-search-drawer .shelf-search { width: 100%; }
.shelf-search-toggle, .shelf-drawer-done, .shelf-drawer-backdrop, .shelf-mobile-filter-controls { display: none; }
.shelf-search { min-width: 0; flex: 1; display: flex; gap: .8rem; align-items: center; border: 1px solid var(--rule-faint); background: var(--paper-bright); padding: .7rem .9rem; }
.shelf-search:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }
.shelf-search > span:first-child { font-size: 1.5rem; line-height: 1; color: var(--rust-dark); }
.shelf-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .83rem; }
.shelf-search input::placeholder { color: var(--input-placeholder-foreground); opacity: 1; }
.shelf-search kbd { border: 1px solid var(--rule-faint); padding: 0 .35rem; color: var(--ink-soft); font: .7rem var(--mono); }
.shelf-views { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule-faint); }
.shelf-views button { border: 0; padding: .6rem .7rem; background: transparent; font: .71rem var(--mono); }
.shelf-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper-bright); }
.shelf-views button:not([aria-pressed="true"]):hover { background: var(--paper-deep); }
.shelf-filter-toggle { display: none; }
.shelf-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 2rem; }
.shelf-index { position: sticky; top: 6.5rem; align-self: start; max-height: calc(100vh - 8rem); overflow-y: auto; padding-top: .8rem; scrollbar-width: thin; scrollbar-color: var(--rule-faint) transparent; }
.shelf:not([data-view]) .shelf-layout { display: block; }
.shelf-index__head { padding-bottom: 1rem; border-bottom: 1px solid var(--rule-faint); margin-bottom: .65rem; }
.shelf-index h2 { margin: 0; font: 550 1.2rem var(--display); }
.shelf-facet + .shelf-facet { margin-top: 1.5rem; }
.shelf-index__head > span { display: block; margin-top: .35rem; color: var(--index-label-foreground); font: .68rem var(--mono); letter-spacing: .06em; }
.shelf-topic { display: flex; justify-content: space-between; width: 100%; gap: .5rem; padding: .45rem .5rem; border: 0; background: transparent; text-align: left; font: .74rem var(--mono); }
.shelf-topic[hidden] { display: none; }
.shelf-topic small { color: var(--ink-soft); font: inherit; }
.shelf-topic[aria-pressed="true"] { background: var(--moss); }
.shelf-topic:not(:disabled):hover { background: var(--paper-deep); }
.shelf-topic:disabled { color: var(--ink-soft); background: transparent; opacity: .52; text-decoration: line-through; text-decoration-thickness: 1px; cursor: var(--cursor-default, default); }
.shelf-topic[aria-pressed="true"]::before { content: "→"; }
.shelf-topic[aria-pressed="true"] span { flex: 1; }
.shelf-period { display: block; border-top: 1px solid var(--rule-faint); margin-top: 1.5rem; padding-top: 1rem; font: 550 1.2rem var(--display); }
.shelf-period select { width: 100%; margin-top: .7rem; border: 1px solid var(--rule-faint); border-radius: 0; background: transparent; padding: .6rem .3rem; color: var(--ink); font: .69rem var(--mono); }
.shelf-reading { margin-top: 1.5rem; border-top: 1px solid var(--rule-faint); padding-top: 1rem; }
.shelf-reading label { display: flex; align-items: center; gap: .35rem; margin-top: .7rem; font-size: .74rem; cursor: var(--cursor-link, pointer); }
.shelf-reading input { accent-color: var(--moss-dark); width: 15px; height: 15px; }
.shelf-reading p { color: var(--reading-trail-foreground); font-size: .69rem; line-height: 1.5; }
.shelf-reading button { padding: 0; border: 0; background: none; font: .65rem var(--mono); text-decoration: underline; text-underline-offset: .2em; }
.shelf-reading button:disabled { color: var(--control-disabled-foreground); cursor: var(--cursor-default, default); text-decoration: none; }
.shelf-reading [role="status"] { display: block; color: var(--rust-dark); font-size: .7rem; }
.shelf-index__rss { display: block; margin-top: 2rem; font: .6rem/1.6 var(--mono); }
.shelf-results-bar { display: flex; align-items: center; justify-content: space-between; min-height: 2.8rem; gap: .5rem; border-bottom: 1px solid var(--rule-faint); margin-bottom: 1rem; }
.shelf-results-bar p { margin: 0; font: .72rem/1.4 var(--mono); color: var(--ink-soft); }
.shelf-results-bar button { border: 0; padding: .3rem 0; background: none; font: .72rem var(--mono); text-decoration: underline; white-space: nowrap; }
.shelf-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.note-card { min-width: 0; display: flex; flex-direction: column; padding: 1.35rem 1.25rem 1rem; border: 1px solid var(--card-border); border-top: 3px solid var(--card-accent-border); background: var(--card-surface); box-shadow: 2px 3px 0 var(--card-shadow); transition: border-color .16s, box-shadow .16s; color: var(--card-foreground); }
.note-card:hover, .note-card:focus-within { border-color: var(--moss-dark); box-shadow: 3px 4px 0 var(--card-hover-shadow); }
.note-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .7rem; font: .72rem/1.5 var(--mono); color: var(--muted); }
.note-card__meta > a { color: var(--rust-dark); text-decoration: none; }
.note-number { color: var(--rust-dark); font: .72rem/1.5 var(--mono); white-space: nowrap; }
.graph-inspector__body > .note-number { display: block; margin-bottom: .4rem; }
.note-card__date { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; }
.viewed-meta { grid-column: 1; font: .6rem var(--mono); color: var(--reading-trail-muted-foreground); }
.note-card__meta > a:hover { text-decoration: underline; }
.note-card h2 { margin: 1.05rem 0 .6rem; font: 520 clamp(1.6rem, 2.4vw, 2rem)/1.04 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.note-card--static { min-height: 0; padding-block: .85rem; }
.note-card--static h2 { margin: 0; font-size: 1.35rem; }
.note-card h2 a { text-decoration: none; }
.note-card h2 a:hover { color: var(--rust-dark); }
.note-card__summary { margin: 0 0 1.2rem; color: var(--card-summary-foreground); font-size: .875rem; line-height: 1.65; }
.note-card__bottom { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: auto; border-top: 1px solid var(--card-separator); padding-top: .75rem; }
.note-card__tags { display: flex; flex-wrap: wrap; gap: .3rem .55rem; }
.note-card__tags a { color: var(--moss-dark); font: .72rem/1.6 var(--mono); text-decoration: none; }
.note-card__tags a:hover { text-decoration: underline; }
.note-card__open { font: .72rem var(--mono); text-decoration: none; white-space: nowrap; }
.note-card__open span { color: var(--rust); margin-left: .25rem; }
.note-card__match { font: .7rem/1.5 var(--mono); overflow-wrap: anywhere; padding: .65rem; background: var(--paper); margin: 0 0 1rem; border-left: 2px solid var(--gold); }
.shelf mark { background: var(--search-highlight-background); color: var(--ink); box-shadow: 0 1px 0 var(--search-highlight-shadow); padding: 0 .04em; }
.note-card.is-read { background: var(--card-read-background); border-top-color: var(--card-read-border); }
.note-card.is-read h2 { color: var(--reading-trail-muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; }
.note-card.is-read .note-card__summary { color: var(--card-read-foreground); }
.note-card__unread { align-self: start; border: 0; background: transparent; text-decoration: underline; text-underline-offset: .2em; margin-top: .85rem; padding: .2rem 0; font: .62rem var(--mono); }
.shelf-read-heading, .shelf-month-heading { grid-column: 1 / -1; margin: 1.2rem 0 0; padding-bottom: .6rem; border-bottom: 1px solid var(--rule-faint); font: italic 1.35rem var(--display); }
.shelf-read-heading { font: .68rem var(--mono); letter-spacing: .02em; }
.shelf[data-view="timeline"] .shelf-cards { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--moss); padding-left: 1.6rem; margin-left: .35rem; }
.shelf[data-view="timeline"] .note-card { position: relative; }
.shelf[data-view="timeline"] .note-card::before { content: none; }
.shelf[data-view="timeline"] .note-card h2 { font-size: 1.9rem; }
.shelf-empty { padding: 4rem 2rem; background: var(--paper-bright); border: 1px solid var(--rule-faint); text-align: center; }
.shelf-empty > span { color: var(--rust); font: 1.1rem var(--mono); }
.shelf-empty h2 { font: 500 2.8rem var(--display); margin: 1rem 0 .5rem; }
.shelf-empty p { color: var(--ink-soft); font-size: .85rem; }
.shelf-empty button { padding: .7rem 1rem; border: 1px solid var(--ink); background: var(--paper); font: .7rem var(--mono); }
.shelf-end { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 2rem 0; font: italic .95rem var(--display); color: var(--reader-status-foreground); }
.shelf-end span { color: var(--rust); }
.shelf-toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; align-items: center; z-index: 30; max-width: 90vw; padding: .85rem 1.2rem; color: var(--paper-bright); background: var(--ink); font-size: .8rem; box-shadow: var(--shadow-soft); }
.shelf-toast button { border: 0; color: var(--paper-bright); background: transparent; text-decoration: underline; cursor: var(--cursor-link, pointer); }
.shelf-map { border: 1px solid var(--rule-faint); background: var(--map-surface); margin-bottom: 1.5rem; }
.shelf-map__bar { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule-faint); }
.shelf-map__bar p { margin: 0; font: italic 1.1rem var(--display); }
.shelf-map__bar button { border: 1px solid var(--rule-faint); background: var(--paper); min-width: 28px; height: 28px; font: .7rem var(--mono); }
[data-graph] { position: relative; height: clamp(480px, 70dvh, 800px); background-image: radial-gradient(var(--map-grid) .7px, transparent .7px); background-size: 16px 16px; overflow: hidden; }
.graph-canvas { display: block; width: calc(100% - 260px); height: 100%; touch-action: none; cursor: var(--cursor-grab, grab); }
.graph-canvas:focus-visible { outline: 2px solid var(--rust); outline-offset: -3px; }
.graph-related button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--paper-deep); background: transparent; text-align: left; font: .7rem/1.5 var(--mono); padding: .55rem; }
.graph-related button:hover { background: var(--paper-deep); }
.graph-inspector { position: absolute; right: 1rem; top: 1rem; width: 230px; max-height: calc(100% - 3.5rem); overflow-y: auto; padding: 1rem; background: var(--map-inspector-background); border: 1px solid var(--rule-faint); box-shadow: 3px 4px 0 var(--map-inspector-shadow); scrollbar-width: thin; scrollbar-color: transparent transparent; }
.graph-inspector__toggle { position: sticky; top: -1rem; z-index: 1; display: block; width: 100%; padding: .2rem 0 .55rem !important; background: inherit !important; text-align: right; }
.graph-inspector.is-minimized { left: auto; width: auto; max-height: none; overflow: hidden; padding: .55rem .7rem; }
.graph-inspector.is-minimized .graph-inspector__toggle { position: static; padding: 0 !important; }
.graph-inspector.is-scroll-active { scrollbar-color: var(--moss) transparent; }
.graph-inspector::-webkit-scrollbar { width: 5px; }
.graph-inspector::-webkit-scrollbar-track { background: transparent; }
.graph-inspector::-webkit-scrollbar-thumb { border-radius: 5px; background: transparent; }
.graph-inspector.is-scroll-active::-webkit-scrollbar-thumb { background: var(--moss); }
.graph-inspector .eyebrow { margin-top: 1rem; font-size: .57rem; }
.graph-inspector h3 { margin: .7rem 0; font: 500 1.7rem/1.05 var(--display); overflow-wrap: anywhere; }
.graph-inspector p { font-size: .75rem; line-height: 1.65; }
.graph-inspector > button, .graph-inspector__body > button, .graph-scope button { padding: .35rem 0; border: 0; background: transparent; font: .64rem var(--mono); text-decoration: underline; text-underline-offset: 3px; }
.graph-open { display: inline-block; padding-bottom: .8rem; color: var(--rust-dark); font: .72rem var(--mono); }
.graph-scope { border-block: 1px solid var(--rule-faint); padding-block: .55rem; }
.graph-scope label { display: block; font: .62rem var(--mono); margin-top: .6rem; }
.graph-scope select { background: var(--paper); border: 1px solid var(--rule-faint); padding: .3rem; font: inherit; }
.graph-related-title { font: .62rem var(--mono) !important; color: var(--moss-dark); }
.graph-category-key { display: flex; flex-wrap: wrap; gap: .4rem .7rem; border-top: 1px solid var(--rule-faint); padding-top: .8rem; }
.graph-category-key span { font: .56rem var(--mono); }
.graph-category-key span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--category-color); margin-right: .3rem; }
.graph-minimap { position: absolute; bottom: 2.6rem; left: 1rem; width: 150px; height: 94px; background: var(--map-minimap-background); border: 1px solid var(--rule-faint); cursor: var(--cursor-target, crosshair); }
.graph-status { position: absolute; bottom: 0; left: 1rem; right: 1rem; font: .6rem var(--mono); color: var(--ink-soft); pointer-events: none; }
.graph-tooltip { position: absolute; max-width: 210px; padding: .6rem; background: var(--ink); color: var(--paper-bright); font: .75rem/1.4 var(--mono); pointer-events: none; z-index: 4; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-layout { display: block; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-filter-toggle { display: none; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-index { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; max-height: none; overflow: visible; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 3px double var(--rule-faint); }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-facet { display: flex; align-content: start; flex-wrap: wrap; gap: .4rem; margin: 0; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-index__head { width: 100%; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-topic { width: auto; border: 1px solid var(--rule-faint); gap: .6rem; font-size: .73rem; }
.shelf:is([data-view="graph"], [data-view="threads"]) .shelf-period, .shelf:is([data-view="graph"], [data-view="threads"]) .shelf-reading { margin: 0; }
.shelf-map:fullscreen { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; }
.shelf-map:fullscreen [data-graph] { flex: 1; height: auto; }
.shelf-timeline { border-block: 1px solid var(--rule-faint); overflow-anchor: none; }
.timeline-heading { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .2rem; }
.timeline-heading .eyebrow { margin: 0 0 .35rem; font-size: .56rem; }
.timeline-heading h2 { margin: 0; font: italic 1.65rem var(--display); }
.timeline-heading > span { font: .6rem var(--mono); white-space: nowrap; color: var(--moss-dark); }
.timeline-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 1.2rem; min-height: 0; height: clamp(300px, calc(100svh - 285px), 650px); }
.timeline-viewport { min-width: 0; min-height: 0; overflow-y: auto; overflow-anchor: none; scrollbar-width: none; padding: .3rem .5rem 1.25rem .2rem; scroll-padding: .5rem; scroll-behavior: auto; }
.timeline-stage::after { content: ""; position: absolute; bottom: 0; left: 0; right: calc(62px + 1.2rem); height: 14px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.shelf-timeline[data-at-end="true"] .timeline-stage::after { display: none; }
.timeline-viewport::-webkit-scrollbar { display: none; }
.timeline-viewport:focus-visible { outline: 1px solid var(--rust); outline-offset: 3px; }
.timeline-viewport .shelf-month-heading:first-child { margin-top: .3rem; }
.timeline-viewport .note-card { transition: none; }
.timeline-rail { position: relative; margin: .8rem 0 1rem; border-left: 1px solid var(--rule-faint); touch-action: none; user-select: none; -webkit-user-select: none; cursor: var(--cursor-vertical-resize, ns-resize); outline-offset: 5px; }
.timeline-rail * { user-select: none; -webkit-user-select: none; }
.timeline-rail:focus-visible { outline: 1px solid var(--moss); outline-offset: 4px; }
.timeline-tick { position: absolute; left: 0; padding-left: .7rem; max-width: 85px; font: .64rem/1.3 var(--mono); color: var(--muted); pointer-events: none; }
.timeline-tick::before { content: ""; position: absolute; width: 3px; height: 1px; background: var(--rule-faint); left: 0; top: 0; }
.timeline-tick--year::before { width: 6px; background: var(--moss-dark); }
.timeline-thumb { position: absolute; width: 11px; height: 24px; left: -6px; transform: translateY(-50%); background: var(--rust); border: 2px solid var(--paper); pointer-events: none; }
.timeline-preview { position: absolute; right: calc(100% + 12px); padding: .65rem .8rem; background: var(--ink); color: var(--paper-bright); font: .7rem var(--mono); white-space: nowrap; transform: translateY(-50%); pointer-events: none; z-index: 2; animation: rail-preview-in .12s ease-out; }
.timeline-preview::after { content: ""; position: absolute; left: 100%; top: 50%; border: 5px solid transparent; border-left-color: var(--ink); transform: translateY(-50%); }
.timeline-rail:hover .timeline-thumb, .timeline-rail[data-scrubbing="true"] .timeline-thumb { background: var(--rust-dark); width: 13px; left: -7px; }
.timeline-thumb { transition: width .12s, left .12s, background-color .12s; }
@keyframes rail-preview-in { from { opacity: 0; transform: translate(4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) { .timeline-preview { animation: none; } .timeline-thumb { transition: none; } }
.timeline-footer { min-height: 65px; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--rule-faint); padding-block: .8rem; }
.timeline-footer button { min-width: 76px; border: 1px solid var(--rule-faint); background: var(--paper-bright); padding: .55rem .65rem; font: .7rem var(--mono); white-space: nowrap; }
.timeline-footer button:disabled { opacity: .4; cursor: var(--cursor-default, default); }
.timeline-footer p { margin: 0; text-align: center; font: .65rem/1.4 var(--mono); color: var(--ink-soft); }
.shelf-timeline[data-armed="older"] .timeline-footer, .shelf-timeline[data-armed="newer"] .timeline-footer { border-top-color: var(--rust); }
.shelf-timeline[data-armed="older"] .timeline-footer p, .shelf-timeline[data-armed="newer"] .timeline-footer p { color: var(--rust-dark); }
@media (pointer: fine) {
  .shelf button:not(:disabled), .shelf select, .shelf input[type="checkbox"], .shelf label:has(input[type="checkbox"]) { cursor: var(--cursor-link); }
}
.shelf-map__legend { margin: 0; padding: .6rem 1rem; font: .6rem/1.6 var(--mono); border-top: 1px solid var(--rule-faint); color: var(--ink-soft); }
.shelf-map__legend span { color: var(--rust); margin-inline: .3rem; }
.shelf-back { display: inline-block; margin-bottom: 2rem; font: .7rem var(--mono); }
.blog-page:has(.shelf-note) main { padding-top: 3rem; }
.shelf-note h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .97; }
.shelf-note > header { margin-bottom: 2rem; padding-bottom: 1.8rem; }
.shelf-note .dispatch-deck { margin-top: 1.4rem; }
.shelf-note .prose { overflow-wrap: anywhere; }
/* Note article rhythm. Each block sets only the space above it, so adjacent
   margins never have to agree. Space above a heading grows with its rank and is
   3–4× the space below it, so a heading sits with the section it opens and
   always stands apart from an ordinary paragraph break (Butterick, "Space above
   and below": https://practicaltypography.com/space-above-and-below.html).
   Sizes follow Tailwind Typography's prose-lg/xl, hand-tuned for ~20px text
   (https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js),
   scaled to this 1.65 line height. Headings use rem so a bigger heading doesn't
   push itself further away; body blocks use em so they scale with the text. */
.shelf-note .prose > * { margin-block: 1.15em 0; }
.shelf-note .prose > :first-child { margin-top: 0; }
.shelf-note .prose > h2 { margin-top: 3.5rem; }
.shelf-note .prose > h3 { margin-top: 2.75rem; }
.shelf-note .prose > h4 { margin-top: 2.25rem; }
.shelf-note .prose > .prose-label { margin-top: 1.75rem; }
.shelf-note .prose > :is(blockquote, pre, table) { margin-top: 1.75rem; }
.shelf-note .prose > :is(figure, img) { margin-top: 2rem; }
.shelf-note .prose > hr { margin-block: 2.5rem; }
.shelf-note .prose > .footnotes { margin-top: 3rem; }
/* Space below headings and labels: the next block starts this close. */
.shelf-note .prose > h2 + * { margin-top: 1.25rem; }
.shelf-note .prose > h3 + * { margin-top: 1rem; }
.shelf-note .prose > h4 + * { margin-top: .5rem; }
.shelf-note .prose > .prose-label + * { margin-top: .375rem; }
.shelf-note .prose > :is(blockquote, pre, table, figure, img) + * { margin-top: 1.75rem; }
/* Inside lists and quotes the same rule, at a closer step. */
.shelf-note .prose li + li { margin-top: .35em; }
.shelf-note .prose li > :is(ul, ol) { margin-top: .35em; }
.shelf-note .prose li > p { margin-block: .6em 0; }
.shelf-note .prose li > p:first-child { margin-top: 0; }
.shelf-note .prose blockquote > * { margin-block: .75em 0; }
.shelf-note .prose blockquote > :first-child { margin-top: 0; }
.shelf-note .prose a { color: var(--rust-dark); }
.shelf-note .prose .shelf-source-link { display: grid; gap: .55rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rule-faint); border-top: 3px solid var(--moss); background: var(--paper-bright); box-shadow: 3px 3px 0 color-mix(in srgb, var(--rule-faint) 45%, transparent); color: var(--ink); text-decoration: none; }
.shelf-source-link > span { font: .72rem var(--mono); color: var(--ink-soft); }
.shelf-source-link > span { letter-spacing: .02em; }
.shelf-source-link strong { font: 500 clamp(1.5rem, 4vw, 2rem)/1 var(--display); }
.shelf-source-link strong span { color: var(--rust-dark); }
.shelf-note .prose .shelf-source-link:hover { border-color: var(--moss-dark); background: var(--paper); }
.shelf-note .prose .shelf-source-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.shelf-note__status { font: .7rem var(--mono); color: var(--moss-dark); }
.shelf-longform { margin-top: 2rem; border-top: 1px solid var(--rule-faint); padding-top: 2rem; }
@media (max-width: 800px) {
  .graph-inspector { width: 190px; }
  .graph-canvas { width: calc(100% - 220px); }
  .shelf-layout { grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; }
  .shelf-cards { grid-template-columns: minmax(0, 1fr); }
  .shelf-hero { gap: 1.5rem; }
  .shelf-views button { padding-inline: .5rem; }
}
@media (max-width: 700px) {
  .shelf-views [data-view="threads"] { display: none; }
  .shelf-page main { padding-top: 2rem; }
  .shelf-hero { grid-template-columns: 1fr; gap: .7rem; padding-bottom: 1.2rem; }
  .shelf-hero h1 { font-size: 4.4rem; }
  .shelf-hero__aside { display: flex; justify-content: space-between; align-items: end; border: 0; padding: 0; gap: 1rem; }
  .shelf-hero__aside p { display: none; }
  .shelf-hero__deck { margin: 0; }
  .shelf-hero__count { color: var(--rust-dark); }
  .shelf-tools { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding-block: 1rem; }
  .shelf-search { grid-column: 1 / -1; padding: .8rem; }
  .shelf-search input { font-size: 16px; }
  .shelf-search kbd { display: none; }
  .shelf-views { justify-self: start; }
  .shelf-views button { padding: .6rem .5rem; font-size: .65rem; }
  .shelf-filter-toggle { display: block; border: 1px solid var(--rule-faint); background: transparent; padding: .5rem; font: .65rem var(--mono); }
  .shelf:not([data-filters-open="true"]) .shelf-index { display: none; }
  .shelf-layout { display: block; }
  .shelf-index { position: static; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 0 1.2rem; }
  .shelf-facet { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; }
  .shelf-facet + .shelf-facet { margin-top: .8rem; }
  .shelf-index__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: .6rem; margin-bottom: .3rem; }
  .shelf-topic { width: auto; min-height: 36px; align-items: center; gap: .5rem; border: 1px solid var(--rule-faint); font-size: .73rem; }
  .shelf-period { width: 100%; margin: .5rem 0 0; border: 0; display: flex; align-items: center; gap: 1rem; font-size: 1rem; padding: .5rem 0 0; }
  .shelf-period select { flex: 1; width: auto; margin: 0; }
  .shelf-reading { width: 100%; margin-top: .6rem; padding-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .shelf-reading h2 { display: none; }
  .shelf-reading label { margin: 0; }
  .shelf-reading p { width: 100%; order: 3; margin: 0; }
  .shelf-index__rss { display: none; }
  .shelf-end { flex-wrap: wrap; font-size: .85rem; gap: .5rem; }
  .shelf-map__bar { padding: .6rem; }
  .shelf-map__bar p { font-size: 1rem; }
  [data-graph] { height: 680px; }
  .graph-canvas { width: 100%; height: 440px; }
  .graph-inspector { top: 445px; left: .6rem; right: .6rem; width: auto; max-height: 225px; padding: .7rem; }
  .graph-inspector.is-minimized { left: auto; }
  .graph-inspector h3 { font-size: 1.4rem; }
  .graph-inspector .eyebrow { margin-top: .3rem; }
  .graph-minimap { bottom: 270px; width: 100px; height: 63px; }
  .graph-status { top: 414px; bottom: auto; font-size: .55rem; }
  .graph-category-key { display: none; }
  .shelf:is([data-view="graph"], [data-view="threads"]) .shelf-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .timeline-stage { grid-template-columns: minmax(0, 1fr) 42px; gap: .6rem; height: max(230px, calc(100svh - 300px)); }
  .timeline-stage::after { right: calc(42px + .6rem); }
  .timeline-footer { padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
  .timeline-tick { max-width: 45px; font-size: .58rem; padding-left: .4rem; }
  .timeline-heading { height: 65px; }
  .timeline-heading h2 { font-size: 1.45rem; }
  .timeline-heading > span { font-size: .65rem; }
  .timeline-footer p { font-size: .58rem; }
  .shelf[data-view="timeline"] .shelf-cards { padding-left: .9rem; }
  .shelf[data-view="timeline"] .note-card::before { left: -1.3rem; }
  .shelf[data-view="timeline"] .note-card { padding: 1rem .8rem; }
  .shelf[data-view="timeline"] .note-card h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .note-card { transition: none; color: var(--card-foreground); } }

@media (max-width: 700px) {
  /* backdrop-filter makes fixed descendants anchor to the full document in
     mobile browsers. Keep the translucent paper, but let shelf controls use
     the actual visual viewport. */
  .shelf-page .site-frame { backdrop-filter: none; }
  .shelf-page main { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .shelf-tools { position: fixed; inset: auto 0 0; z-index: 12; display: flex; align-items: stretch; gap: 2px; padding: .35rem max(.4rem, env(safe-area-inset-left)) max(.35rem, env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-right)); border-top: 1px solid var(--rule-faint); background: var(--paper-bright); box-shadow: 0 -8px 24px var(--mobile-toolbar-shadow); }
  .shelf-views { min-width: 0; flex: 3 1 0; justify-content: stretch; border: 0; padding: 0; }
  .shelf-views button { min-width: 0; flex: 1; padding: .55rem .25rem; font-size: .7rem; }
  .shelf .shelf-search-toggle, .shelf .shelf-filter-toggle, .shelf:is([data-view="graph"], [data-view="threads"]) .shelf-filter-toggle { display: block; width: 0; min-width: 0; flex: 1 1 0; border: 0; padding: .55rem .2rem; background: transparent; font: .58rem var(--mono); }
  .shelf .shelf-search-toggle[aria-expanded="true"], .shelf .shelf-filter-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper-bright); }
  .shelf-search-drawer { display: none; position: fixed; z-index: 13; top: calc(.65rem + env(safe-area-inset-top)); right: .65rem; bottom: auto; left: .65rem; gap: .45rem; padding: .65rem; border: 1px solid var(--rule-faint); background: var(--paper-bright); box-shadow: 4px 5px 0 var(--mobile-drawer-shadow); }
  .shelf[data-mobile-drawer="search"] .shelf-search-drawer { display: flex; }
  .shelf-search-drawer .shelf-search { padding: .65rem; }
  .shelf-drawer-done { display: block; border: 1px solid var(--rule-faint); padding: .55rem; background: var(--paper); font: .61rem var(--mono); }
  .shelf-drawer-backdrop { position: fixed; inset: 0; z-index: 11; width: 100%; border: 0; background: var(--mobile-drawer-backdrop); }
  .shelf[data-mobile-drawer] .shelf-drawer-backdrop:not([hidden]) { display: block; }
  .shelf:not([data-mobile-drawer="filters"]) .shelf-index { display: none !important; }
  .shelf[data-mobile-drawer="filters"] .shelf-index { position: fixed; z-index: 13; right: .65rem; bottom: calc(3.8rem + env(safe-area-inset-bottom)); left: .65rem; display: block !important; max-height: min(70dvh, 36rem); margin: 0; padding: .75rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--rule-faint); background: var(--paper-bright); box-shadow: 4px 5px 0 var(--mobile-drawer-shadow); }
  body:has(.shelf[data-mobile-drawer]) { overflow: hidden; }
  .shelf-mobile-filter-controls { position: sticky; top: -.75rem; z-index: 2; display: block; margin: -.75rem -.75rem .8rem; background: var(--paper-bright); }
  .shelf-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .75rem; border-bottom: 1px solid var(--rule-faint); font: .72rem var(--mono); }
  .shelf-mobile-drawer-head button { border: 1px solid var(--rule-faint); padding: .4rem .6rem; background: var(--paper); font: .6rem var(--mono); }
  .shelf-mobile-filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: .35rem; border-bottom: 1px solid var(--rule-faint); }
  .shelf-mobile-filter-tabs button { min-height: 38px; border: 0; background: transparent; font: .72rem var(--mono); }
  .shelf-mobile-filter-tabs button[aria-pressed="true"] { background: var(--moss); color: var(--paper-bright); }
  .shelf-index[data-mobile-panel] :is(.shelf-facet, .shelf-period, .shelf-reading) { display: none; }
  .shelf-index[data-mobile-panel="category"] .shelf-facet[aria-labelledby="shelf-category-title"],
  .shelf-index[data-mobile-panel="tag"] .shelf-facet[aria-labelledby="shelf-tag-title"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .shelf-index[data-mobile-panel] .shelf-facet + .shelf-facet { margin-top: 0; }
  .shelf-index[data-mobile-panel] .shelf-index__head { grid-column: 1 / -1; }
  .shelf-index[data-mobile-panel] .shelf-topic { width: 100%; min-height: 42px; }
  .shelf-index[data-mobile-panel] .shelf-topic:first-of-type { grid-column: 1 / -1; }
  .shelf-index[data-mobile-panel="other"] .shelf-period { display: flex; }
  .shelf-index[data-mobile-panel="other"] .shelf-reading { display: flex; }
  .shelf-results-bar { scroll-margin-top: 0; }
  .shelf-toast { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .shelf-views button, .shelf-search-toggle, .shelf-filter-toggle { font-size: .53rem; }
  .shelf-views .shelf-view-icon { display: none; }
  .shelf-search-toggle > span:last-child { display: none; }
}

}