/* ARANTHOS · TECHNICAL NOTES. Paper register, night mode aware.
   Type is the site's type: IBM Plex Sans + IBM Plex Mono, no third family.
   Sans is self-hosted; Mono and the one italic come from the same Google
   source the site already loads through the design system. */

@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #EEEDE7; --paper-2: #E6E4DC; --card: #F4F3EE;
  --ink: #15171B; --ink-2: #45474C; --ink-muted: #76787D; --ink-faint: #9A9B9F;
  --rule: #CECCC3; --rule-strong: #B9B7AC; --rule-soft: #DAD8D0;
  --red: #9E241C; --red-hover: #C0392B; --green: #2E5C40; --amber: #B07A1E;
  --panel: #15171B; --panel-2: #171A20;
  --p-rule: #2A2D33; --p-rule-2: #3A3D43; --p-text: #EDEDEA; --p-body: #B9BBBE; --p-mut: #7E8186;
  --p-green: #74A98A; --p-amber: #C89B4B; --p-red: #C0392B;
  --hi: rgba(21, 23, 27, 0.045);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --page-max: 1192px; --read: 700px;
}

/* Night mode. Same token remap as aranthos.com; the instrument panels keep their own near-black. */
html[data-theme="dark"] {
  --paper: #1B1C1E; --paper-2: #141517; --card: #222327;
  --ink: #F2F2F3; --ink-2: #E4E4E6; --ink-muted: #CACBCD; --ink-faint: #A6A7AA;
  --rule: #3D3E42; --rule-strong: #575A5F; --rule-soft: #2B2D31;
  --red: #C83529; --red-hover: #E04A3A; --green: #5CA87A; --amber: #D9A441;
  --panel: #16171A; --panel-2: #1D1E22;
  --p-rule: #2E3034; --p-rule-2: #484B50; --p-text: #F2F2F3; --p-body: #D8D9DC; --p-mut: #A6A7AA;
  --p-green: #6CC08A; --p-amber: #D9A441; --p-red: #E0574A;
  --hi: rgba(242, 242, 243, 0.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
::selection { background: rgba(158, 36, 28, 0.18); color: var(--ink); }
html[data-theme="dark"] ::selection { background: rgba(192, 57, 43, 0.30); }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
a:hover { color: var(--red); text-decoration-color: var(--red); }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Same-origin navigations cross-fade instead of cutting, so the site and the register read as one
   document. Same rule sits in the site's own head. Chromium only; elsewhere nothing changes. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease); }
.wrap { box-sizing: content-box; max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 40; background: var(--card); color: var(--ink); border: 1px solid var(--ink); padding: 10px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; }

/* The site bar is sticky, so anchors land clear of it. Smooth scroll, same as the site. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

/* Masthead. The site's own bar, unchanged from aranthos.com: the notes load under it. */
.mast { position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--rule); background: var(--paper); }
.mast-in { box-sizing: content-box; max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); min-height: 60px; display: flex; align-items: center; gap: 16px; }
.mast-brand { display: flex; align-items: center; text-decoration: none; color: #1D1E22; }
.mast-brand img { height: 20px; width: auto; display: block; }
/* Themed assets by CSS, never by script: the swap survives a reload with no flash. */
html:not([data-theme="dark"]) [data-theme-asset="dark"] { display: none; }
html[data-theme="dark"] [data-theme-asset="light"] { display: none; }
.mast-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.mast-nav a { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); }
.mast-nav a:hover { color: var(--red); }
/* NOTES is the destination the reader is standing in: red while the register is loaded.
   The only place the notes depart from the site's header, and asked for twice. */
.mast-nav a[aria-current="page"] { color: var(--red); }
/* The one conversion on the surface, in the site's red. */
.mast-nav a.navcta { display: inline-block; padding: 9px 18px; background: var(--red); border: 1px solid var(--red); border-radius: 2px; color: #FFFFFF; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.mast-nav a.navcta:hover { background: var(--red-hover); border-color: var(--red-hover); color: #FFFFFF; }

/* Sections. Not chrome: a line of the register, on the control line next to the search, and at the
   head of a note. The current section is underlined in ink, never in red. */
.snav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; }
.snav a { flex: none; display: inline-flex; align-items: center; padding: 7px 0 6px; border-bottom: 2px solid transparent; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.snav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.snav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.snote { max-width: var(--read); margin: 24px auto 0; }
.tt { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); cursor: pointer; padding: 0; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.tt-div { width: 1px; height: 20px; background: var(--rule-strong); flex: none; }
/* Same grouping as the site: the toggle and its filet are 12px apart, the language box follows. */
.ttwrap { order: 98; display: flex; align-items: center; gap: 12px; }
.mast .langsel { order: 99; }
.tt:hover { border-color: var(--ink); color: var(--ink); }
.tt svg { display: block; animation: ttin 0.42s var(--ease); }
@keyframes ttin { from { opacity: 0; transform: rotate(-40deg) scale(0.62); } to { opacity: 1; transform: none; } }
/* Language. Same segmented box as the site, and one key shared with it, so the choice carries both ways. */
/* The site's own language pair, value for value: a 14px lead, tall 17 by 13 buttons, and the
   active label on ink at #EDEDEA. Anything else moves the whole nav sideways. */
.langsel { display: inline-flex; flex: none; border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden; }
.mast .langsel { margin-left: 14px; }
.langsel button { appearance: none; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-2); background: transparent; border: 0; border-left: 1px solid var(--rule-strong); padding: 6px 9px; line-height: 1; cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease); }
.langsel button:first-child { border-left: 0; }
.langsel button:hover { color: var(--ink); }
.langsel button[aria-pressed="true"] { background: var(--ink); color: #EDEDEA; }
.langsel .ls-sep { display: none; }
.prog { position: fixed; left: 0; top: 0; height: 2px; background: var(--ink); width: 0; z-index: 100; }

/* Page head */
.k { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); margin: 11px 0 0; text-wrap: balance; }
.lead { font-family: var(--sans); font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.64; color: var(--ink-2); max-width: 80ch; margin: 11px 0 0; text-wrap: pretty; }
.rule-h { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-ink { border: 0; border-top: 2px solid var(--ink); margin: 0; width: 44px; }

/* Register line. The sections live in the masthead; what stays here, on the search line, is the
   state of the list. */
.regbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.fcount { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-faint); white-space: nowrap; }
.sortb { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 0; border-bottom: 1px dashed var(--rule-strong); border-radius: 0; padding: 3px 0 2px; min-height: 30px; cursor: pointer; white-space: nowrap; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.sortb:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Order of the register, as a real select: same hairline idiom, one thin chevron, no box. */
.sortwrap { position: relative; display: inline-flex; align-items: center; }
.sortsel { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px dashed var(--rule-strong); border-radius: 0; padding: 3px 19px 2px 0; min-height: 30px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.sortsel:hover, .sortsel:focus { color: var(--ink); border-bottom-color: var(--ink); outline: none; }
.sortsel option { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--card); }
.sortwrap > svg { position: absolute; right: 2px; top: 50%; margin-top: -3px; pointer-events: none; color: var(--ink-faint); }
.sortsel:hover + svg, .sortsel:focus + svg { color: var(--ink); }
/* Register search. A hairline field, not a box: it filters, it never navigates. Sits under the lead, left aligned. */
.srchw { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin: clamp(15px, 1.9vw, 21px) 0 0; }
.filtrow { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; width: 100%; }
.clab { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.clab-r { margin-left: auto; }
/* Search and list state travel together, so they wrap as one block. */
.srchr { width: 100%; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.srch { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 0 2px; border-bottom: 1px solid var(--rule); transition: border-color 0.2s var(--ease); }
.srch:focus-within { border-bottom-color: var(--ink); }
.srch > svg { flex: none; color: var(--ink-faint); }
.srch:focus-within > svg { color: var(--ink-2); }
.srch input { width: clamp(200px, 26vw, 320px); min-width: 0; align-self: stretch; font-family: var(--sans); font-size: 16px; line-height: 1.2; color: var(--ink); background: transparent; border: 0; padding: 0; }
.srch input:focus { outline: none; }
.srch input::placeholder { color: var(--ink-faint); opacity: 1; }
.srch input::-webkit-search-cancel-button, .srch input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.qclr { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 0; border-radius: 0; padding: 0 0 0 2px; min-height: 30px; cursor: pointer; white-space: nowrap; }
.qclr:hover { color: var(--ink); }
/* The figures policy, out of the lead and set just above the register it describes. */
.lnote { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 14px; max-width: 74ch; text-wrap: pretty; }
.lpol { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; }
.item { border-top: 1px solid var(--rule); }
.item:last-child { border-bottom: 1px solid var(--rule); }
.item.hide { display: none; }
.item.lastv { border-bottom: 1px solid var(--rule); }
/* The register opens on the first note, not on a rule: the top filet belongs between rows only. */
.feed .item:first-child, .item.firstv { border-top: 0; }
.icol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.itext { display: block; min-width: 0; }
/* Byline. Register idiom, not a social card: square graphite portraits, mono labels, hairline rows,
   one thin outbound mark. The names never outweigh the note's own title. */
.iauth { display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); }
.ia { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 0; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
.ia:last-child { border-bottom: 0; }
.ia-av { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-2); }
.ia-n { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: color 0.2s var(--ease); }
.ia-r { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ia-r::before { content: "· "; }
.ia-x { flex: none; margin-left: auto; color: var(--ink-faint); transition: color 0.2s var(--ease); }
.ia:hover .ia-n, .ia:hover .ia-x { color: var(--red); }
.ilink { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: start; padding: 26px 14px 28px; margin: 0 -14px; text-decoration: none; color: inherit; transition: background 0.2s var(--ease); }
.ilink:hover { color: inherit; background: var(--hi); }
.ilink:hover .it { color: var(--red); }
.ilink:hover .thumb { border-color: var(--p-rule-2); }
.thumb { display: block; text-decoration: none; border: 1px solid var(--p-rule); background: var(--panel); border-radius: 2px; overflow: hidden; transition: border-color 0.2s var(--ease); }
.thumb svg { display: block; width: 100%; height: auto; }
.irub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.irub .dot { color: var(--ink-faint); }
.it { display: block; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.26; color: var(--ink); margin: 9px 0 0; letter-spacing: -0.008em; transition: color 0.2s var(--ease); text-wrap: pretty; }
.iex { display: block; font-family: var(--sans); font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 10px 0 0; max-width: 62ch; text-wrap: pretty; }
.imore { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.imore .arw { width: 22px; height: 1px; background: var(--ink); display: inline-block; }
.empty { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0; padding: 22px 0; font-family: var(--sans); font-size: 16.5px; color: var(--ink-muted); }

/* Empty register. No note published yet: the surface states the fact between two hairlines and
   stays quiet. The feed, the section filter and the search return with the first note. */
.reg0 { margin: clamp(20px, 2.6vw, 30px) 0 0; }
.reg0-in { padding: clamp(34px, 5vw, 60px) 0; max-width: 64ch; }
.reg0-k { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.reg0-t { font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.3; letter-spacing: -0.006em; color: var(--ink); margin: 13px 0 0; }
.reg0-s { font-family: var(--sans); font-size: 16.5px; line-height: 1.62; color: var(--ink-muted); margin: 10px 0 0; text-wrap: pretty; }

/* Article */
.article { max-width: var(--read); margin: 0 auto; position: relative; }
.back { display: inline-flex; align-items: center; gap: 9px; margin: 24px 0 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; min-height: 30px; }
.back:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 4px; }
.back svg { display: block; flex: none; }
.crumb { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 28px 0 0; }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--red); }
.title { font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.3vw, 41px); line-height: 1.13; letter-spacing: -0.012em; color: var(--ink); margin: 14px 0 0; text-wrap: pretty; }
.byline { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 16px 0 0; }
.mline { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 8px 0 0; }
.deck { font-family: var(--sans); font-style: italic; font-size: 18px; line-height: 1.66; color: var(--ink); margin: 0; text-wrap: pretty; }
.reslinks { display: flex; gap: 10px 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.reslinks a { color: var(--ink); text-decoration-color: var(--rule-strong); display: inline-flex; align-items: center; gap: 8px; min-height: 30px; }
.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0 18px; }
.toc ol { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 30px; }
.toc li { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; line-height: 2.1; break-inside: avoid; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--red); }
.toc .n { color: var(--ink-faint); margin-right: 9px; }

.prose { font-family: var(--sans); font-size: 17.5px; line-height: 1.68; color: var(--ink-2); }
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.26; color: var(--ink); margin: 2em 0 0.7em; letter-spacing: -0.008em; scroll-margin-top: 24px; }
.prose h2 .hn { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-faint); margin-right: 12px; vertical-align: 2px; }
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink); margin: 1.8em 0 0.55em; letter-spacing: 0.005em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.15em; }
.prose li { margin: 0 0 0.5em; text-wrap: pretty; }
.prose li::marker { color: var(--ink-faint); }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--hi); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 1px 5px; color: var(--ink); }
.prose a code { color: inherit; }
.dl { margin: 0 0 1.15em; }
.dl dt { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 1.3em 0 0.35em; }
.dl dt:first-child { margin-top: 0; }
.dl dd { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.66; color: var(--ink-2); }

.knife { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 2em 0; padding: 20px 0 22px; }
.knife p { font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 2vw, 23px); line-height: 1.38; color: var(--ink); margin: 0; }
.knife .attr { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 12px 0 0; }

/* Figures. Data only: the plates are drawn from the values in the note. */
.fig { margin: 2.1em 0; }
.fig .plate { background: var(--panel); border: 1px solid var(--p-rule-2); border-radius: 2px; padding: 16px 18px 14px; }
.fig .plate.paper { background: var(--card); border-color: var(--rule); }
.fig .phead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-mut); margin: 0 0 14px; }
.fig .plate.paper .phead { color: var(--ink-muted); }
.fig .phead .pr { margin-left: auto; color: var(--p-mut); font-weight: 400; letter-spacing: 0.1em; }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { font-family: var(--sans); font-style: italic; font-size: 14.5px; line-height: 1.56; color: var(--ink-muted); margin: 11px 0 0; text-wrap: pretty; }
.fig figcaption b { font-style: normal; font-weight: 600; color: var(--ink-2); }
.legend { display: flex; gap: 8px 20px; flex-wrap: wrap; margin: 13px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--p-mut); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 2px; background: currentColor; display: inline-block; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--card); font-variant-numeric: tabular-nums; }
.tbl th { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.tbl td { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-2); padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.m, .tbl th.m { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.tbl td.ink { color: var(--ink); font-weight: 600; }
.tbl .tot td { border-top: 1px solid var(--rule-strong); background: var(--hi); }

/* Record block */
.rec { margin: 0; padding: 16px 18px; background: var(--panel-2); border: 1px solid var(--p-rule); border-radius: 2px; font-family: var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--p-body); overflow-x: auto; white-space: pre; }
.rec b { color: var(--p-text); font-weight: 500; }
.rec i { color: var(--p-mut); font-style: normal; }
.rec u { color: var(--p-green); text-decoration: none; }
.rec s { color: var(--p-amber); text-decoration: none; }

/* Margin notes */
.mnote { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); border-left: 2px solid var(--rule-strong); padding: 2px 0 2px 14px; margin: 18px 0; }
@media (min-width: 1280px) {
  .mnote { float: right; clear: right; width: 232px; margin: 5px -290px 16px 0; border-left-color: var(--rule); }
}

/* Hostile block, the one place limits are stated */
.nc { border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: var(--card); border-radius: 2px; padding: 22px 24px 20px; margin: 2.3em 0; }
.nc h2 { margin: 0 !important; font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); }
.nc ul { list-style: none; margin: 14px 0 0; padding: 0; }
.nc li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-family: var(--sans); font-size: 15.5px; line-height: 1.56; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.nc li:first-child { border-top: 0; padding-top: 4px; }
.nc li b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.06em; }

/* Article footer */
.tags { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px; padding: 6px 10px; text-decoration: none; }
.tag:hover { border-color: var(--ink); color: var(--ink); }
.refs { list-style: none; margin: 0; padding: 0; }
.refs li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule-soft); font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.refs li:first-child { border-top: 0; }
.refs .rn { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); padding-top: 2px; }
.refs .src { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-top: 4px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pn a { display: block; padding: 18px 20px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease); }
.pn a:hover { border-color: var(--rule-strong); color: inherit; }
.pn a:hover .pnt { color: var(--red); }
.pn .pnk { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.pn .pnt { display: block; font-family: var(--sans); font-weight: 600; font-size: 16.5px; line-height: 1.34; color: var(--ink); margin-top: 8px; transition: color 0.2s var(--ease); }
.pn .none { opacity: 0.42; pointer-events: none; }

/* Colophon and footer */
.colo { background: var(--panel); border-top: 2px solid var(--ink); color: var(--p-body); }
html[data-theme="dark"] .colo { border-top-color: var(--p-rule-2); }
.colo-in { box-sizing: content-box; max-width: var(--page-max); margin: 0 auto; padding: 26px clamp(18px, 4vw, 56px) 24px; }
.colo-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.colo-t { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--p-text); }
.colo-r { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--p-mut); }
.colo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--p-rule); border: 1px solid var(--p-rule); margin: 18px 0 0; }
.colo-grid > div { background: var(--panel-2); padding: 12px 15px; }
.colo-grid dt { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--p-mut); margin: 0; }
.colo-grid dd { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--p-body); }
/* Footer. The site's own footer, same surface, same manifest, same links, so the register closes
   exactly like aranthos.com. */
.sfoot { background: var(--card); border-top: 1px solid var(--rule-strong); }
.sfoot-in { box-sizing: content-box; max-width: var(--page-max); margin: 0 auto; padding: 40px clamp(18px, 4vw, 56px) 32px; }
.sf-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.sf-lock { display: flex; align-items: center; }
.sf-lock img { height: 22px; width: auto; display: block; }
.sf-li { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--ink-2); text-decoration: none; transition: color 0.2s var(--ease); }
.sf-li:hover { color: var(--ink); }
.sfoot .langsel { margin-left: auto; }
.sf-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 18px; }
.sf-links a { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 9px 0; }
.sf-links a:hover { color: var(--red); }
.sf-c { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-muted); white-space: nowrap; }
.sf-man { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; margin-top: 26px; }
.sf-man span { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }

/* Access request. The site's form, on the notes surface: same card, same fields, same manifest. */
.ac-scrim { position: fixed; inset: 0; z-index: 260; display: none; align-items: flex-start; justify-content: center; padding: clamp(16px, 5vh, 64px) 16px; overflow-y: auto; background: rgba(21, 23, 27, 0.52); }
.ac-scrim.on { display: flex; animation: acScrim 300ms ease both; }
@keyframes acScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes acCard { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ac-card { width: min(580px, 100%); background: var(--card); border: 1px solid var(--rule-strong); border-top: 2px solid var(--ink); border-radius: 2px; animation: acCard 420ms var(--ease) both; }
.ac-head { display: flex; align-items: flex-start; gap: 16px; padding: clamp(24px, 3vw, 30px) clamp(20px, 3.4vw, 32px) 0; }
.ac-hl { flex: 1; min-width: 0; }
.ac-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.ac-title { font-family: var(--sans); font-weight: 600; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.015em; line-height: 1.12; color: var(--ink); margin: 11px 0 0; }
.ac-x { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink); cursor: pointer; transition: border-color 0.2s var(--ease); }
.ac-x:hover { border-color: var(--ink); }
.ac-body { padding: 0 clamp(20px, 3.4vw, 32px) clamp(22px, 3vw, 30px); }
.ac-intro { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 0; text-wrap: pretty; }
.ac-grid { margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 204px), 1fr)); gap: 16px; }
.ac-f { display: block; }
.ac-wide { grid-column: 1 / -1; }
.ac-l { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 7px; }
.ac-req { color: var(--ink-faint); }
.acf { width: 100%; box-sizing: border-box; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 11px 12px; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; transition: border-color 0.2s var(--ease); }
textarea.acf { resize: vertical; min-height: 82px; line-height: 1.5; }
.acf:focus { border-color: var(--ink); }
.acf::placeholder { color: var(--ink-faint); opacity: 1; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-chip { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: 2px; padding: 9px 12px; min-height: 34px; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease); }
.ac-chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.ac-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ac-err { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.ac-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 2px; }
.ac-send { appearance: none; background: var(--red); color: #FFFFFF; border: 1px solid var(--red); border-radius: 2px; font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 13px 26px; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.ac-send:hover { background: var(--red-hover); border-color: var(--red-hover); }
.ac-or { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-muted); }
.ac-or a { color: var(--ink); padding: 4px 2px; }
.ac-copied { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.ac-man { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 14px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.ac-done { padding: clamp(20px, 2.6vw, 22px) clamp(20px, 3.4vw, 32px) clamp(24px, 3vw, 30px); }
.ac-pill { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ac-ring { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); }
.ac-pill-t { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.ac-done-1 { font-family: var(--sans); font-size: 14.5px; line-height: 1.58; color: var(--ink); margin: 16px 0 0; text-wrap: pretty; }
.ac-done-2 { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; text-wrap: pretty; }
.ac-done-2 a { color: var(--ink); }
.ac-doneclose { margin-top: 22px; appearance: none; background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 2px; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 11px 22px; cursor: pointer; transition: border-color 0.2s var(--ease); }
.ac-doneclose:hover { border-color: var(--ink); }

/* Subscribe strip */
.sub { border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: var(--card); border-radius: 2px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px; align-items: center; }
.sub p { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 20px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease); }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }

/* The site's touch rule, one for one: on a coarse pointer the pair grows to a real target. */
@media (pointer: coarse) {
  .mast .langsel button { padding: 17px 13px; }
}
@media (max-width: 900px) {
  .ilink { grid-template-columns: 1fr; gap: 16px; padding: 22px 14px 24px; }
  .icol { order: -1; }
  .toc ol { columns: 1; }
  .pn { grid-template-columns: 1fr; }
  .sub { grid-template-columns: 1fr; }
}
/* The header folds on the site's own breakpoints: at 900px the mono links give way to one
   burger and a full paper panel, at 520px the language pair goes, exactly as on aranthos.com. */
.mnavb { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink); cursor: pointer; }
.mnavb:hover { border-color: var(--ink); }
.mnav { display: none; position: fixed; inset: 0; z-index: 200; background: var(--paper); flex-direction: column; }
.mnav[data-open] { display: flex; }
.mnav-bar { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 clamp(16px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.mnav-brand { display: flex; align-items: center; gap: 11px; }
.mnav-mark { height: 15px; display: block; }
.mnav-word { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.26em; color: var(--ink); }
.mnav-x { margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink); cursor: pointer; }
.mnav-x:hover { border-color: var(--ink); }
.mnav-nav { display: flex; flex-direction: column; padding: 28px clamp(16px, 4vw, 56px); gap: 4px; }
.mnav-l { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-weight: 600; font-size: 28px; color: var(--ink); text-decoration: none; }
.mnav-s { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.mnav-cta { margin-top: 26px; display: block; text-align: center; background: var(--red); border: 1px solid var(--red); border-radius: 2px; color: #FFFFFF; font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 15px 24px; text-decoration: none; }
.mnav-cta:hover { background: var(--red-hover); border-color: var(--red-hover); }
.mnav-m { margin-top: 18px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
/* The site's touch rule, one for one: on a coarse pointer the pair grows to a real target. */
@media (pointer: coarse) {
  .mast .langsel button { padding: 17px 13px; }
}
@media (max-width: 900px) {
  /* Folded, the site's bar is 64px and its lockup carries 12px of vertical padding. */
  .mast-in { min-height: 64px; }
  .mast-brand { padding: 12px 0; }
  .mast-nav { gap: 12px; }
  .mast-nav a:not(.navcta) { display: none; }
  /* folded, the site's own button is one step smaller: 13px on 9 by 14 */
  .mast-nav a.navcta { font-size: 13px; padding: 9px 14px; letter-spacing: normal; }
  .mnavb { display: flex; }
  .snav { gap: 18px; }
}
@media (max-width: 620px) {
  .snav { width: 100%; gap: 16px; }
  .srchr { margin-left: 0; width: 100%; }
  .srch { flex: 1 1 auto; }
  .srch input { width: 100%; }
  .srchw { margin-top: 16px; gap: 12px 16px; }
}
@media (max-width: 520px) {
  .mast [data-langsel] { display: none; }
}
@media (max-width: 420px) {
  .mast-in { gap: 8px; padding: 0 16px; }
  .mast-brand img { height: 17px; }
  .mnav-l { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; }
  .prog { display: none; }
}

@media print {
  body { background: #FFFFFF; color: #15171B; }
  .mast-nav, .snav, .mnavb, .mnav, .tt, .tt-div, .langsel, .prog, .regbar, .clab, .ac-scrim, .srchw, .fcount, .sortb, .sortwrap, .back, .sf-links, .sf-li, .sub, .pn, .noprint { display: none !important; }
  .mast { border-color: #999999; }
  .fig .plate, .colo, .sfoot { background: #FFFFFF !important; color: #15171B !important; border: 1px solid #999999 !important; }
  .fig .phead, .colo-r, .colo-grid dt { color: #55575C !important; }
  .colo-t, .rec b { color: #15171B !important; }
  .rec { background: #F6F5F1 !important; color: #33353A !important; }
  .colo-grid { background: #CCCCCC; border-color: #CCCCCC; }
  .colo-grid > div { background: #FFFFFF; }
  .colo-grid dd { color: #33353A !important; }
  .item { break-inside: avoid; }
  a { color: #15171B; text-decoration-color: #999999; }
}

/* CMS-authored notes: photographs and generated figures. Everything else on the
   blog is drawn data; images enter only through the editor, styled as figures. */
.thumb.ph { aspect-ratio: 236 / 132; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig.hero { margin: 22px 0 4px; }
.fig.hero img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 2px; }
.prose figure.ph { margin: 2.1em 0; }
.prose figure.ph img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 2px; }
.prose figure.ph figcaption { font-family: var(--sans); font-style: italic; font-size: 14.5px; line-height: 1.56; color: var(--ink-muted); margin: 11px 0 0; text-wrap: pretty; }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--rule-strong); font-style: italic; color: var(--ink); }
.prose blockquote p { margin: 0; }

/* Author card: the people behind the instrument, with LinkedIn. */
.authors { border-top: 1px solid var(--rule); margin: 30px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.authors .k { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); width: 100%; }
.authors a { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; text-decoration: none; color: var(--ink-2); }
.authors a img.au-av { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-2); }
.authors .au-r { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.authors .au-r::before { content: "· "; }
.authors a .ia-n { color: var(--ink); }
.authors a:hover .ia-n, .authors a:hover .ia-x { color: var(--red); }

/* Share this note: shown below every published note */
.share { border-top: 1px solid var(--rule); margin: 22px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.share .k { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); width: 100%; }
.share .shlink { font-family: var(--mono); font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; overflow-wrap: anywhere; }
.share .shlink:hover { color: var(--red); border-color: var(--red); }
.share .shact { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.share .shact button, .share .shact a { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 12px; min-height: 34px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.share .shact button:hover, .share .shact a:hover { border-color: var(--rule-strong); color: var(--ink); }

.wrote-by { display: flex; align-items: center; gap: 18px; margin: 16px 0 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); flex-wrap: wrap; }
.wrote-by .wby { display: inline-flex; align-items: center; gap: 8px; }
.wrote-by .wby span { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-2); }
.wrote-by .wb-avs { display: inline-flex; }
.wb-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-2); }
.wb-2 { margin-left: -12px; }
.prose .linkcard { display: flex; align-items: center; gap: 14px; margin: 1.6em 0; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 2px; background: var(--card); text-decoration: none; color: var(--ink); transition: border-color 0.2s var(--ease); }
.prose .linkcard:hover { border-color: var(--rule-strong); }
.prose .linkcard .lc-fav { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 2px; }
.prose .linkcard .lc-fav img { width: 26px; height: 26px; }
.prose .linkcard .lc-body { display: flex; flex-direction: column; min-width: 0; }
.prose .linkcard .lc-t { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prose .linkcard .lc-d { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.prose .linkcard .lc-u { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 4px; letter-spacing: 0.04em; }
.prose .fig-row { display: flex; gap: 14px; margin: 2.1em 0; align-items: flex-start; }
.prose .fig-row figure.ph { flex: 1; margin: 0; min-width: 0; }
@media (max-width: 640px) { .prose .fig-row { flex-direction: column; } }