@font-face { font-family: "Inter Display"; src: url(../fonts/InterDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: block; } /* the UI face (Ahmed, Nov 10): Inter Display (Inter 4, opsz 32, OFL); Favorit Arabic stays for Arabic */
@font-face { font-family: "Inter Display"; src: url(../fonts/InterDisplay-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Inter Display"; src: url(../fonts/InterDisplay-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "ABC Favorit Arabic Trial"; src: url(../fonts/ABCFavoritArabic-Regular-Trial.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Kufigraph"; src: url(../fonts/Kufigraph-Light.otf) format("opentype"); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: "Kufigraph"; src: url(../fonts/Kufigraph-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Shinka"; src: url(../fonts/Shinka-Regular-Trial.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Shinka"; src: url(../fonts/Shinka-RegularItalic-Trial.otf) format("opentype"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "ABC Favorit Mono Trial"; src: url(../fonts/ABCFavoritMono-Regular-Trial.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kult Luxury"; src: url(../fonts/Kult-Luxury.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  font: 400 16px/16px var(--ui);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
}
::selection { background: var(--select-bg); color: var(--select-fg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 24px; top: -40px; z-index: 20; background: var(--ink); color: var(--paper); padding: 6px 8px; }
.skip:focus { top: 8px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the one canvas: above everything, never in the way */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; }
/* the grain (js/grain.js): a noise tile at one device pixel per texel, over
   everything; 0.45 is the alpha baked into the tile (GRAIN_K) */
#grain {
  position: fixed; left: 0; top: 0; z-index: 11; pointer-events: none;
  background-repeat: repeat; image-rendering: pixelated; will-change: transform;
  opacity: calc((0.01 + 0.05 * var(--fnd-texture)) * var(--grain-k) / 0.45);
}
@media print { #gl, #grain { display: none; } }

/* ---------- layout (1920 frame: x 24 / 137 / 409 / 973) ---------- */
.site { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.cols {
  flex: 1;
  display: grid;
  /* nav and sub-nav are as wide as their longest label (measured in app.js), so all three gaps read the same */
  grid-template-columns: var(--col-nav, 89px) var(--col-sub, 248px) minmax(0, 540px) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;
  padding: 24px 24px 48px;
}
.col ul { display: flex; flex-direction: column; gap: var(--stack); }

/* ---------- items: active sharp, the rest recede ---------- */
.item {
  display: inline-block;
  white-space: nowrap;
  opacity: var(--op-rest);
  filter: url(#ink-ui) blur(var(--blur-rest));
  outline: none;
}
.item.is-peek { opacity: var(--op-peek); filter: url(#ink-ui) blur(var(--blur-peek)); }
.item.is-active { opacity: 1; filter: url(#ink-ui); }
.col-nav .item.is-active { color: var(--accent-text); }
/* on light Marathon paper the accent is a highlighter behind the ink, never the type */
[data-theme="marathon-light"] .col-nav .item.is-active { background: linear-gradient(transparent 12%, var(--accent-wash) 12%, var(--accent-wash) 92%, transparent 92%); box-shadow: -3px 0 0 var(--accent-wash), 3px 0 0 var(--accent-wash); }
/* room for the yellow orb after a label (6px gap + 7px orb) */
.item.has-orb { padding-right: 13px; }
.item:focus-visible { opacity: 1; filter: url(#ink-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* a group's label in the sub-nav (Harness: Foundations, Intelligence, Interface):
   the nav's type, sharp but muted, not a link; a step of air before each group but the first */
.sub-group { opacity: var(--op-meta); filter: url(#ink-ui); white-space: nowrap; cursor: default; user-select: none; -webkit-user-select: none; }
.col-nav .nav-step { margin-top: calc(var(--para) - var(--stack)); }
.sub-group:not(:first-child) { margin-top: calc(var(--para) - var(--stack)); }
/* a room's section that is a single grid page (Sketches, Books, The shelf): one item, with a group's air before it */
.sub-one:not(:first-child) { margin-top: calc(var(--para) - var(--stack)); }

/* while the field draws an element, its DOM text steps aside (still selectable, still read) */
.rz, .rz * { color: transparent !important; text-decoration-color: transparent !important; }

/* ---------- body ---------- */
.col-body { font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); font-kerning: normal; }
/* full-width embeds (Ahmed, Nov 10): the diagram, the work grid and the harness viewer break out of the 540px text column
   to the page's right padding, capped at 820px (narrower, Ahmed Nov 10) (desktop only; on a phone the column is already the page) */
@media (min-width: 900px) {
  .col-body .embed-harness-diagram, .col-body .embed-harness-flow, .col-body .embed-harness-viewer, .col-body .embed-work-grid {
    max-width: none; align-self: flex-start;
    width: min(820px, calc(100vw - var(--sbw, 0px) - 48px - var(--col-nav, 89px) - var(--col-sub, 248px) - 2 * var(--gap)));
  }
  /* the work grid and the harness viewer run full width to the page's right padding (Ahmed, Nov 10; the viewer for a wider preview) */
  .col-body .embed-work-grid, .col-body .embed-harness-viewer { width: calc(100vw - var(--sbw, 0px) - 48px - var(--col-nav, 89px) - var(--col-sub, 248px) - 2 * var(--gap)); }
}
.col-body article { display: flex; flex-direction: column; gap: var(--para); outline: none; }
/* the ink filter on the words, not on embedded components: screenshots and diagrams stay sharp (Ahmed, Nov 10) */
.col-body article > :not(.embed) { filter: url(#ink-body); }
.clock { margin-top: var(--para); }
/* the post's blocks (written in the CMS): headings in the UI face, the rest in the body face */
.col-body h2, .col-body h3 { margin: 0; font: 400 16px/20px var(--ui); letter-spacing: var(--track); text-wrap: balance; }
.col-body h2 { font-size: 28px; line-height: 32px; letter-spacing: -1.1px; } /* bigger post headings (Ahmed, Nov 10): was 20/24 */
.col-body h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; } /* was 16/20 */
.col-body article > h2:not(:first-child) { margin-top: calc(var(--para) * 1.5); }
@media (max-width: 899px) { .col-body h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.9px; } }
.col-body article > :is(h2, h3):not(:first-child) { margin-top: calc(var(--para) * 0.75); }
.col-body article > :is(h2, h3) + * { margin-top: calc(var(--para) * -0.5); }
.col-body strong { font-weight: 400; -webkit-text-stroke: .5px currentColor; } /* Shinka has one weight: bold is drawn a hair heavier */
.col-body em { font-style: italic; }
.col-body article a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); transition: text-decoration-color 160ms var(--ease-land); }
.col-body article a:hover, .col-body article a:focus-visible { text-decoration-color: currentColor; outline: none; }
.col-body :is(ul, ol) { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: calc(var(--para) * 0.375); }
.col-body ul { list-style: "–"; }
.col-body ol { list-style: decimal; }
.col-body li { padding-left: 6px; }
.col-body li::marker { font-family: var(--ui); font-size: 14px; color: var(--muted); }
.col-body blockquote { margin: 0; padding-left: 19px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ink) 22%, transparent); font-style: italic; display: flex; flex-direction: column; gap: calc(var(--para) * 0.5); }
/* warm words: faintly warm, no underline; a long hover resolves them heavier */
.warm { cursor: pointer; outline: none; border-radius: 2px;
  text-shadow: 0 0 .6px color-mix(in srgb, var(--warm) 55%, transparent), 0 0 5px color-mix(in srgb, var(--warm-halo) 14%, transparent); }
.warm.is-lit { -webkit-text-stroke: .42px currentColor; text-shadow: 0 0 .6px color-mix(in srgb, var(--warm) 70%, transparent), 0 0 7px color-mix(in srgb, var(--warm-halo) 26%, transparent); }
.warm:focus-visible { -webkit-text-stroke: .42px currentColor; box-shadow: 0 1px 0 color-mix(in srgb, var(--warm) 80%, var(--ink)); }
.clock span { opacity: var(--op-meta); }

/* ---------- meta ---------- */
.col-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); filter: url(#ink-ui); }
.openin { display: flex; align-items: center; gap: 9px; height: 16px; }
.dots { display: flex; gap: 6px; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot);
  transition: background-color 160ms var(--ease-land), transform 160ms var(--ease-land);
}
.dot:hover, .dot:focus-visible { background: var(--muted); outline: none; }
[data-theme^="marathon"] .dot:hover, [data-theme^="marathon"] .dot:focus-visible { background: var(--accent-mark); }
.dot:active { transform: scale(0.84); }
/* col 4 icons: 16px, stacked on the 20px row pitch, optically on the cap height */
.meta-ico { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 4px; }
.meta-ico .ico { display: block; width: 16px; height: 16px; background: currentColor; opacity: var(--op-meta);
  -webkit-mask: var(--src) center / 16px 16px no-repeat; mask: var(--src) center / 16px 16px no-repeat;
  translate: 0 -0.5px; }
.meta-ico .ico.is-hot { opacity: 1; }
.meta-ico .count { opacity: var(--op-faint); line-height: 16px; }
.meta-ico:focus-visible { outline: 1px solid var(--ring); outline-offset: 2px; }
.meta-link { display: inline-block; line-height: 16px; height: 16px; white-space: nowrap; }
.meta-link .count { opacity: var(--op-faint); }
.meta-link .faint { opacity: var(--op-meta); }
.meta-link:hover .faint, .meta-link:hover .count { opacity: 1; }
.meta-link:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.meta-link:active { transform: translateY(0.5px); }

/* ---------- footer ---------- */
.foot { padding: 0; color: var(--foot); }
.foot-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 0; row-gap: 10px; }
.bio { margin: 0; padding: 0 0 0 12px; white-space: nowrap; line-height: 19.2px; filter: url(#ink-bio); }
.bio [lang="ar"] { unicode-bidi: isolate; }
/* the four marks: ink-coloured PNG masks, 20px tall, 8px apart, 8px in from each side;
   they rest a hair soft and resolve sharp on hover, through the field */
/* the footer row (Ahmed, Nov 9): bio left, the basmala dead centre, the marks right; a dot matrix fills each gap */
/* the sides never shrink under their content (the one-line bio is about 480px), so from 900 to
   about 1200 wide the basmala gives up dead centre rather than sit on the bio */
.foot-row { display: grid; grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); align-items: end; column-gap: 0; }
.foot-side { display: flex; align-items: flex-end; column-gap: 0; min-width: 0; }
.foot-row .foot-end { margin-left: 0; }
.basmala { margin: 0; font: 300 18px/19.2px "Kufigraph", var(--ui); letter-spacing: 0; white-space: nowrap; filter: url(#ink-bas); }
/* the SDF dot matrix: fills the row between the bio and the marks, three bio lines tall at most */
.foot-dots { flex: 1 1 0; width: 0; min-width: 12px; height: 19.2px; align-self: flex-end; display: block; filter: url(#ink-dots); }
.marks { list-style: none; display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 0 8px; }
/* the way home: the bio itself; and the quiet links (Book a call, MCP, Settings) beside the marks,
   in the bio's type and colour. At rest plain text; hover and focus underline them in --foot */
.bio-home, .foot-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: transparent; transition: text-decoration-color 160ms var(--ease-land); outline: none; }
.bio-home:hover, .bio-home:focus-visible, .foot-link:hover, .foot-link:focus-visible, .foot-link[aria-current] { text-decoration-color: var(--foot); }
.foot-end { display: flex; align-items: flex-end; column-gap: 0; row-gap: 10px; margin-left: auto; }
.foot-links { display: flex; gap: 16px; line-height: 19.2px; white-space: nowrap; filter: url(#ink-ui); }
.gl.gl-foot .foot-link { color: transparent; }
.mark { display: block; height: 20px; width: var(--w); background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  filter: var(--ink, url(#ink-mark)) blur(calc(var(--soft, 0px) + .55px)); }
.mark.is-peek { filter: var(--ink, url(#ink-mark)) blur(var(--soft, 0px)); }
/* while the wordmark's pass draws the footer, its DOM steps aside (still selectable and read aloud) */
.gl.gl-foot .foot-dots { visibility: hidden; } /* drawn in the GL footer pass, so they scroll with it */
.gl.gl-foot .bio, .gl.gl-foot .basmala { color: transparent; } /* the GL footer draws them, with the wordmark's ink */
.gl.gl-foot .mark { background-color: transparent; }
.wordmark { display: block; width: 100%; height: 97px; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; outline: none; }
.wordmark:focus-visible { box-shadow: inset 0 -1px 0 var(--ring); }
.wordmark text { font-family: "Kult Luxury"; letter-spacing: 0; fill: var(--foot); filter: url(#ink-ui); }
.gl .wordmark text { fill: transparent; filter: none; }
.noscript { padding: 24px; }

/* ---------- stacked, below 900 ---------- */
@media (max-width: 899px) {
  .cols { display: flex; flex-direction: column; padding: 20px 12px 40px; gap: 0; }
  .col-nav ul { flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 8px; }
  .col-sub { margin-top: 20px; }
  .col-sub ul { gap: 8px; }
  .col-sub .item { white-space: normal; }
  .col-body { margin-top: 28px; width: 100%; }
  .col-meta { margin-top: 28px; gap: 10px; }
  .item { padding: 2px 0; }
  .bio { padding: 0 12px; width: auto; max-width: calc(310px + 12px); white-space: normal; }
  /* the links under the bio, on its left edge; the marks keep the right */
  .foot-end { flex: 1 1 100%; justify-content: space-between; padding-left: 12px; }
  .foot-dots { display: none; }
  .foot-row { grid-template-columns: 1fr auto; row-gap: 10px; }
  .foot-row > .foot-side:first-child { grid-column: 1 / -1; }
  .basmala { padding-left: 12px; justify-self: start; }
}

/* ---------- the phone menu (js/navsheet.js): a two-line glyph top left, a bottom sheet of the nav ---------- */
@property --nav-scrim { syntax: '<number>'; inherits: true; initial-value: 1; }
.nav-btn { display: none; }
.nav-sheet { display: none; }
@media (max-width: 899px) {
  html.has-nav-sheet .col-nav #nav { display: none; }
  .nav-btn { display: grid; align-content: center; justify-items: start; gap: 6px; width: 44px; height: 44px; margin: -12px 0 -12px -12px; padding: 0 12px; border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; filter: url(#ink-ui); }
  .nav-btn-l { display: block; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 240ms var(--ease-land), width 240ms var(--ease-land); }
  .nav-btn-l + .nav-btn-l { width: 13px; }
  .nav-btn:hover .nav-btn-l + .nav-btn-l { width: 20px; }
  .nav-btn:active { transform: scale(0.94); }
  .nav-btn:focus-visible { outline: none; }
  .nav-btn:focus-visible .nav-btn-l { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ring); }
  .nav-btn[aria-expanded="true"] .nav-btn-l { width: 20px; transform: translateY(3.75px) rotate(45deg); }
  .nav-btn[aria-expanded="true"] .nav-btn-l + .nav-btn-l { transform: translateY(-3.75px) rotate(-45deg); }

  .nav-sheet[open] { display: block; position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85dvh; margin: 0; padding: 0 0 max(24px, env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; touch-action: none;
    border: 0; border-radius: 16px 16px 0 0; background: var(--paper); color: var(--ink); font: 400 16px/20px var(--ui); letter-spacing: var(--track);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 -8px 32px color-mix(in srgb, var(--shadow) calc(10% * var(--shadow-k)), transparent); }
  .nav-sheet::backdrop { background: color-mix(in srgb, var(--shadow) calc(28% * var(--shadow-k) * var(--nav-scrim, 1)), transparent); backdrop-filter: blur(calc(2px * var(--nav-scrim, 1))); }
  .nav-sheet.is-dragging { user-select: none; -webkit-user-select: none; }
  .nav-sheet-grab { display: grid; place-items: center; height: 28px; cursor: grab; }
  .nav-sheet-grab span { width: 36px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
  .nav-sheet nav { padding: 4px 24px 0; }
  .nav-sheet-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .nav-sheet-list li { padding: 9px 0; }
  .nav-sheet-list .item::before { content: ''; position: absolute; inset: -9px -24px; }
  .nav-sheet-list .item { position: relative; display: inline-block; padding: 0; font: 400 24px/28px var(--ui); letter-spacing: -0.96px; white-space: nowrap; color: var(--ink); text-decoration: none; opacity: var(--op-meta); filter: url(#ink-ui); -webkit-tap-highlight-color: transparent; transition: opacity 160ms var(--ease-land); }
  .nav-sheet-list .item:active { opacity: 1; }
  .nav-sheet-list .item.is-active { opacity: 1; color: var(--accent-text); }
  [data-theme="marathon-light"] .nav-sheet-list .item.is-active { background: linear-gradient(transparent 12%, var(--accent-wash) 12%, var(--accent-wash) 92%, transparent 92%); box-shadow: -3px 0 0 var(--accent-wash), 3px 0 0 var(--accent-wash); }
  .nav-sheet-list .item:focus-visible { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .nav-sheet-list .item.has-orb { padding-right: 0; }
  .nav-sheet-list .nav-step { margin-top: var(--para); padding-top: calc(var(--para) + 9px); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
  html.nav-sheet-open, html.nav-sheet-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .dot { transition: none; }
  .warm { text-shadow: 0 0 .6px color-mix(in srgb, var(--warm) 55%, transparent); }
}

/* ---------- editor view (local only): everything shown, nothing blurred ---------- */
html.editor-view .item { filter: url(#ink-ui); opacity: .56; }
html.editor-view .item.is-active,
html.editor-view .item:hover,
html.editor-view .item:focus-visible { opacity: 1; }
.editor-switch {
  position: fixed; left: 12px; bottom: 12px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 13px/1 "Inter Display", "ABC Favorit Arabic Trial", system-ui, sans-serif; letter-spacing: -0.3px;
  color: var(--ink); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; padding: 6px 10px 6px 6px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) calc(6% * var(--shadow-k)), transparent), 0 6px 20px color-mix(in srgb, var(--shadow) calc(8% * var(--shadow-k)), transparent); cursor: pointer;
}
.editor-switch .knob { width: 26px; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; transition: background .2s; }
.editor-switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 25%, transparent); transition: transform .2s cubic-bezier(.2,0,0,1); }
.editor-switch[aria-checked="true"] .knob { background: var(--ink); }
.editor-switch[aria-checked="true"] .knob::after { transform: translateX(10px); }
.editor-switch .hint { opacity: .56; }
/* below 900 the local Editor view pill goes top right, off the wrapped footer bio it used to cover */
@media (max-width: 899px) { .editor-switch { bottom: auto; top: 12px; left: auto; right: 12px; } }

.meta-ico[hidden] { display: none; }

.clock[hidden] { display: none; }

/* ---------- actions under the post: Open in, then link and sound ---------- */
.post-meta {
  flex-direction: row; align-items: center; gap: 16px;
  margin-top: calc(var(--para) * 1.5);
  font: 400 16px/16px var(--ui); letter-spacing: var(--track);
}
.post-meta .openin { margin-right: 4px; }

/* the actions row steps out while the post changes and settles back once the text lands */
.post-meta { transition: opacity 260ms var(--ease-land), transform 320ms var(--ease-land), filter 260ms var(--ease-land); }
.post-meta.is-away { opacity: 0; transform: translateY(4px); filter: url(#ink-ui) blur(3px); pointer-events: none; transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { .post-meta, .post-meta.is-away { transition: opacity 120ms linear; transform: none; filter: url(#ink-ui); } }
.post-meta[hidden] { display: none; }

/* the post streaming in: words ink in behind a small caret at the leading edge, in the theme's accent (ink in Paper and Night) */
.col-body article { position: relative; }
.col-body .sw { display: inline; }
.stream-caret { position: absolute; left: 0; top: 0; width: 7px; height: 0.72em; background: var(--accent-mark, currentColor); border-radius: 1px; pointer-events: none; opacity: .85; filter: blur(.3px); will-change: transform; }


/* ---------- Open in MCP: three app marks, then a sheet with the steps ---------- */
.mcp-apps { display: flex; align-items: center; gap: 8px; }
.mcp-app { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--ink) 62%, var(--paper)); cursor: pointer; transition: color 160ms var(--ease-land), transform 160ms var(--ease-land); }
.mcp-app svg { width: 16px; height: 16px; display: block; }
.mcp-app:hover, .mcp-app:focus-visible { color: var(--ink); outline: none; }
.mcp-app:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ring); border-radius: 3px; }
.mcp-app:active { transform: scale(0.88); }

.mcp-modal { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); overflow: auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow) calc(6% * var(--shadow-k)), transparent), 0 24px 64px -12px color-mix(in srgb, var(--shadow) calc(22% * var(--shadow-k)), transparent);
  font: 400 14px/20px var(--ui); letter-spacing: -0.2px; }
.mcp-modal::backdrop { background: color-mix(in srgb, var(--paper) 78%, transparent); }
.mcp-sheet { display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 18px; margin: 0; }
.mcp-head { display: grid; grid-template-columns: 28px 1fr 24px; gap: 12px; align-items: start; }
.mcp-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.mcp-logo svg { width: 16px; height: 16px; }
.mcp-head h2 { margin: 0; font: 400 16px/20px var(--ui); letter-spacing: -0.64px; }
.mcp-lede { margin: 2px 0 0; color: color-mix(in srgb, var(--ink) 56%, var(--paper)); }
.mcp-close { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: color-mix(in srgb, var(--ink) 50%, var(--paper)); cursor: pointer; }
.mcp-close svg { width: 14px; height: 14px; }
.mcp-close:hover, .mcp-close:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.mcp-field, .mcp-code { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 4%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.mcp-label { color: color-mix(in srgb, var(--ink) 50%, var(--paper)); }
.mcp-field code, .mcp-code code { flex: 1; min-width: 0; font: 400 13px/18px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; overflow-wrap: break-word; }
.mcp-code { align-items: flex-start; }
.mcp-code[hidden] { display: none; }
.mcp-copy { flex: none; height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), 0 1px 1px color-mix(in srgb, var(--shadow) calc(5% * var(--shadow-k)), transparent); transition: box-shadow 160ms var(--ease-land); }
.mcp-copy:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent), 0 1px 2px color-mix(in srgb, var(--shadow) calc(8% * var(--shadow-k)), transparent); }
.mcp-copy.is-done, .mcp-go.is-done { color: color-mix(in srgb, var(--ink) 60%, var(--paper)); }
.mcp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.mcp-steps li { counter-increment: s; display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.mcp-steps li::before { content: counter(s); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 40%, var(--paper)); }
.mcp-foot { display: flex; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.mcp-note { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: color-mix(in srgb, var(--ink) 50%, var(--paper)); overflow-wrap: anywhere; }
.mcp-go { flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 120ms var(--ease-land), background 160ms var(--ease-land); }
.mcp-go:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.mcp-go:active { transform: scale(0.97); }
.mcp-go:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ring); }
@media (max-width: 480px) { .mcp-foot { flex-direction: column; align-items: stretch; } .mcp-go { justify-content: center; } .mcp-label { display: none; } .mcp-field code, .mcp-code code { font-size: 12px; } }

/* ---------- harness records: icon, title, description, chips ---------- */
.records { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.record { display: block; padding: 14px 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.record:first-child { padding-top: 6px; }
.record:last-child { box-shadow: none; }
.rec-ico { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2.5px; color: var(--ink); }
.rec-ico svg { width: 16px; height: 16px; display: block; }
.rec-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rec-title { font: 400 16px/20px var(--ui); letter-spacing: var(--track); }
.rec-desc { margin: 0; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rec-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 400 12px/16px var(--ui); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.rec-swatch { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.rec-val { color: color-mix(in srgb, var(--ink) 50%, var(--paper)); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0; }

/* a record's notes in parts, behind a quiet "Details" control (js/records.js detailsEl) */
.rec-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 0 -6px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 400 12px/16px var(--ui); letter-spacing: -0.2px; color: var(--muted);
  transition: color 160ms var(--ease-land), background 160ms var(--ease-land), transform 120ms var(--ease-land);
}
.rec-more svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; overflow: visible; }
.rec-more .v { transform-origin: 5px 5px; transition: transform 360ms var(--ease-think), opacity 200ms var(--ease-land); }
.rec-more[aria-expanded="true"] .v { transform: rotate(90deg); opacity: 0; }
.rec-more:hover, .rec-more[aria-expanded="true"] { color: var(--ink); }
.rec-more:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rec-more:active { transform: scale(0.97); }
.rec-more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ring); }
.rec-notes { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 360ms var(--ease-land), opacity 200ms var(--ease-land); }
.rec-notes.is-open { grid-template-rows: 1fr; opacity: 1; }
.rec-notes[hidden] { display: none; }
.rec-notes-in { min-height: 0; overflow: hidden; }
.rec-parts { position: relative; margin: 0; padding: 10px 0 4px; display: flex; flex-direction: column; gap: 14px; }
.rec-part { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; }
.rec-part dt { font: 400 12px/16px var(--ui); letter-spacing: -0.2px; color: var(--muted); padding-top: 3px; }
.rec-part dd { margin: 0; color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
.rec-part dd > * { margin: 0; }
.rec-part dd > * + * { margin-top: 8px; }
.rec-part.is-lead { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  .rec-part { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .rec-part dt { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .rec-notes, .rec-more .v { transition: opacity 120ms linear; } }

/* ---------- images, revealed on attention (js/media.js) ----------
   No image at rest. The 4th column holds a reveal: sized by the grid row only
   (contain: size), so nothing it does can move the text. */
@property --mask-dot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.col-media { align-self: stretch; position: relative; contain: size layout; pointer-events: none; }
.media-slot { position: absolute; inset: 0; }
.media-fig { position: sticky; top: 24px; margin: 0; width: min(100%, 520px); display: flex; flex-direction: column; gap: 8px; }
/* the ink and the grain: the UI's ink filter on the frame; #grain already lies over everything */
.media-frame { display: grid; justify-items: start; align-items: start; filter: url(#ink-ui); }
.media-img {
  grid-area: 1 / 1; display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 80px); max-height: calc(100svh - 80px);
  opacity: 0; filter: blur(8px);
  /* the dot-matrix dissolve: a 5px screen whose dots open until they cover */
  -webkit-mask: radial-gradient(circle, #000 var(--mask-dot), transparent calc(var(--mask-dot) + .8px)) 0 0 / 5px 5px;
  mask: radial-gradient(circle, #000 var(--mask-dot), transparent calc(var(--mask-dot) + .8px)) 0 0 / 5px 5px;
  transition: opacity 280ms var(--ease-land), filter 560ms var(--ease-land), --mask-dot 520ms cubic-bezier(.5, 0, .2, 1);
}
.media-img.is-in { opacity: 1; filter: blur(0); --mask-dot: 4px; }
.media-img.is-settled { -webkit-mask: none; mask: none; }
.media-img.is-out { opacity: 0; filter: blur(4px); transition: opacity 360ms var(--ease-land) 120ms, filter 360ms var(--ease-land) 120ms; }
.media-count { font: 400 12px/16px var(--ui); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; color: var(--ink); opacity: var(--op-meta); filter: url(#ink-ui); }
.media-count:empty { display: none; }
.media-slot.is-leaving .media-fig { opacity: 0; filter: blur(3px); transition: opacity 260ms var(--ease-land), filter 260ms var(--ease-land); }

/* something to discover: a dot after the title, barely there */
.rec-title { position: relative; }
.rec-mark { display: inline-block; width: 3px; height: 3px; margin-left: 6px; vertical-align: 4px; border-radius: 50%; background: currentColor; opacity: .32; transition: opacity 200ms var(--ease-land); }
.record.has-media { cursor: default; outline: none; }
.record.has-media:hover .rec-mark, .record.has-media:focus-visible .rec-mark, .record.is-open .rec-mark { opacity: .8; }
.record.has-media:focus-visible .rec-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* narrow: no 4th column; a tap opens the image inline, below the record */
@media (max-width: 899px) {
  .col-media { display: none; }
  .record.has-media { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .media-slot.is-inline { position: static; grid-column: 2; margin-top: 10px; }
  .media-slot.is-inline .media-fig { position: static; width: 100%; }
  .media-slot.is-inline .media-img { max-height: 70vh; max-height: 70svh; }
}
@media (prefers-reduced-motion: reduce) {
  .media-img { filter: none; -webkit-mask: none; mask: none; transition: opacity 200ms linear; }
  .media-img.is-in { filter: none; }
  .media-img.is-out { filter: none; transition: opacity 200ms linear; }
  .media-slot.is-leaving .media-fig { filter: none; transition: opacity 200ms linear; }
}
.openin[hidden] { display: none; }

/* ---------- Work: projects in the menu's style, frames in a masonry grid ---------- */
html.is-gallery .cols { grid-template-columns: var(--col-nav, 89px) var(--col-sub, 248px) max-content minmax(0, 1fr); }
html.is-gallery .col-body article { font: 400 16px/16px var(--ui); letter-spacing: var(--track); }
.col-body .work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--stack); }
.col-body .work-list li { padding: 0; }
.work-list .item { text-decoration: none !important; white-space: nowrap; }
/* a private past work: one line, then Request access (the ink pill MCP uses) */
.col-body .access-note { margin: 0 0 calc(var(--para) * .75); }
.col-body .access-go { align-self: flex-start; width: max-content; text-decoration: none; }
.col-body .access-go:hover { transform: translateY(-1px); }
.col-body .access-go:active { transform: scale(.98); }
.col-gallery { grid-column: 4; grid-row: 1; min-width: 0; }
html.is-flat .col-gallery { grid-column: 3 / -1; }
html.is-flat .col-body { display: none; }
.col-gallery:empty { display: none; }
.masonry { columns: 3 220px; column-gap: 10px; }
.masonry-cell { display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 3%, var(--paper)); break-inside: avoid; cursor: zoom-in; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.masonry-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ring); }
.masonry-img { display: block; width: 100%; height: auto; opacity: 0; filter: blur(8px); transition: opacity 420ms var(--ease-land), filter 520ms var(--ease-land); }
.masonry-img.is-in { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .masonry-img { filter: none; transition: opacity 160ms linear; } }
@media (max-width: 899px) {
  html.is-gallery .col-body article { font-size: 16px; }
  .col-gallery, html.is-flat .col-gallery { grid-row: auto; }
  .col-gallery { margin-top: 24px; width: 100%; }
  .masonry { columns: 2; column-gap: 8px; }
  .masonry-cell { margin-bottom: 8px; }
}

/* the full-screen viewer */
.viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); display: none; }
.viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.viewer { overflow: hidden; overflow: clip; }  /* clip: the strip runs past the edges and must never scroll the dialog */
/* the blurred backdrop is a real layer, so it can fade with the open, close and drag-to-dismiss */
.viewer::backdrop { background: transparent; }
.viewer-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--paper) 52%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.15); backdrop-filter: blur(28px) saturate(1.15); }
.viewer-stage { position: relative; display: grid; min-height: 0; padding: 32px 32px 8px; cursor: zoom-out; touch-action: none; user-select: none; -webkit-user-select: none; }
.viewer-track { position: relative; min-width: 0; min-height: 0; }
.viewer-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.viewer-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: grab; transform-origin: center; -webkit-user-drag: none; border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 64px -24px color-mix(in srgb, var(--shadow) calc(25% * var(--shadow-k)), transparent); }
.viewer.is-dragging .viewer-stage, .viewer.is-dragging .viewer-img { cursor: grabbing; }
.viewer-bar, .viewer-close { opacity: var(--chrome, 1); }
.viewer-bar { position: relative; }
.viewer.is-single .viewer-ctrls { display: none; }
.viewer-btn:disabled { opacity: .25; cursor: default; }
.viewer-bar { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 32px; padding: 12px 24px 20px; font: 400 16px/20px var(--ui); letter-spacing: var(--track); }
.viewer-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-count { color: color-mix(in srgb, var(--ink) 50%, var(--paper)); font-variant-numeric: tabular-nums; }
.viewer-ctrls { display: flex; gap: 8px; }
.viewer-close { position: absolute; top: 16px; right: 16px; z-index: 1; }
.viewer-stage { padding-inline: 64px; }
.viewer-btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: color-mix(in srgb, var(--ink) 60%, var(--paper)); cursor: pointer; }
.viewer-btn svg { width: 16px; height: 16px; }
.viewer-btn:hover, .viewer-btn:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.viewer-btn[hidden] { display: none; }
@media (max-width: 899px) { .viewer-stage { padding: 16px 12px 4px; } .viewer-bar { padding: 10px 12px 16px; } }

/* a book's card (Library) */
.info-card { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); overflow: auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow) calc(6% * var(--shadow-k)), transparent), 0 24px 64px -12px color-mix(in srgb, var(--shadow) calc(22% * var(--shadow-k)), transparent); }
.info-card::backdrop { background: color-mix(in srgb, var(--paper) 78%, transparent); }
.info-sheet { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 24px; }
.info-cover img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--shadow) calc(35% * var(--shadow-k)), transparent); }
.info-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 28px; }
.info-title { margin: 0; font: 400 20px/24px var(--ui); letter-spacing: -0.8px; text-wrap: balance; }
.info-desc { margin: 0; font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.info-desc[hidden] { display: none; }
.info-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.info-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; font: 400 14px/20px var(--ui); color: color-mix(in srgb, var(--ink) 50%, var(--paper)); font-variant-numeric: tabular-nums; }
.info-close { position: absolute; top: 14px; right: 14px; }
/* a book with notes (its catalogue description): a wider card so the text keeps a reading measure,
   and the text column scrolls on its own while the cover and the arrows stay put */
.info-card.has-body { width: min(780px, calc(100vw - 32px)); }
.info-sheet.has-body .info-text { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.info-body { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; margin-top: calc(var(--para) - 6px); font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); font-kerning: normal; text-wrap: pretty; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.info-body:empty { display: none; }
.info-body p { margin: 0; }
.info-body em { font-style: italic; }
.info-body strong { font-weight: 400; -webkit-text-stroke: .5px currentColor; }
.info-source { margin: 6px 0 0; font: 400 12px/16px var(--ui); letter-spacing: -0.2px; color: color-mix(in srgb, var(--ink) 46%, var(--paper)); }
.info-source[hidden] { display: none; }
.info-sheet.has-body .info-foot { position: sticky; bottom: 0; background: var(--paper); box-shadow: 0 -10px 10px -6px var(--paper); }
@media (max-width: 520px) {
  .info-sheet { grid-template-columns: 1fr; } .info-cover { width: 60%; } .info-text { padding-right: 0; }
  .info-sheet.has-body { gap: 20px; padding: 20px; }
  .info-sheet.has-body .info-cover { width: 44%; }
  .info-sheet.has-body .info-text { max-height: none; overflow: visible; }
  .info-sheet.has-body .info-foot { padding-bottom: 20px; margin-bottom: -20px; }
}
.type-tile { display: flex; flex-direction: column; gap: 8px; aspect-ratio: 3 / 4; padding: 16px; text-align: left; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--paper)); opacity: 0; transition: opacity 420ms var(--ease-land); }
.type-tile.is-in { opacity: 1; }
.type-tile-title { font: 400 20px/24px var(--ui); letter-spacing: -0.8px; text-wrap: balance; }
.type-tile-desc { margin-top: auto; font: 400 14px/18px var(--serif); color: color-mix(in srgb, var(--ink) 60%, var(--paper)); }
.info-sheet.no-cover { grid-template-columns: 1fr; }
.info-sheet.no-cover .info-cover { display: none; }
/* a sub-nav title longer than the column (capped in app.js) wraps instead of widening every page */
.col-sub .item { white-space: normal; max-width: 100%; text-wrap: balance; }

/* a section that is one grid (Library, Experiments, Coffee table): no sub-nav, the grid starts after the menu */
html.is-solo .col-sub { display: none; }
html.is-solo .col-gallery { grid-column: 2 / -1; }
html.is-solo .masonry { columns: 4 200px; }
@media (max-width: 899px) { html.is-solo .col-gallery { grid-column: auto; } }

@media (max-width: 899px) { .viewer-close { top: 8px; right: 8px; } .viewer-stage { padding-top: 48px; } }

/* a talk (Presentations): its text where it always is, then its slides under it across the free width,
   a 2-column grid of 16:9 frames with the masonry's gap. The menus run down beside both rows. */
html.is-slides .cols { grid-template-rows: auto 1fr; }
html.is-slides .col-nav { grid-column: 1; grid-row: 1 / span 2; }
html.is-slides .col-sub { grid-column: 2; grid-row: 1 / span 2; }
html.is-slides .col-body { grid-column: 3; grid-row: 1; }
html.is-slides .col-media { grid-column: 4; grid-row: 1; }
html.is-slides .col-gallery { grid-column: 3 / -1; grid-row: 2; margin-top: 40px; }
.masonry.slides { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slides .masonry-cell { margin: 0; aspect-ratio: 16 / 9; }
.slides .masonry-img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  html.is-slides .col-gallery { margin-top: 28px; }
  .masonry.slides { gap: 8px; }
}

/* dot-matrix buttons: each dot scaled by its SDF distance to the glyph; hover blooms the halo out from the centre */
.viewer-btn { width: 40px; height: 40px; border-radius: 10px; color: var(--ink); }
.viewer-btn svg.dm { width: 28px; height: 28px; overflow: visible; transition: transform 160ms var(--ease-land); }
.viewer-btn .dm circle { fill: currentColor; transform-box: fill-box; transform-origin: center;
  transform: scale(calc(.3 + .62 * var(--k))); opacity: calc(.16 + .7 * var(--k));
  transition: transform 280ms var(--ease-land) calc(var(--o) * 14ms), opacity 280ms var(--ease-land) calc(var(--o) * 14ms); }
.viewer-btn:hover, .viewer-btn:focus-visible { background: none; }
.viewer-btn:hover .dm circle, .viewer-btn:focus-visible .dm circle { transform: scale(calc(.34 + .7 * var(--k) + .16 * var(--h))); opacity: calc(.22 + .8 * var(--k) + .2 * var(--h)); }
.viewer-btn:active svg.dm { transform: scale(.9); }
.viewer-btn:focus-visible { outline: 1px dotted var(--ring); outline-offset: 2px; }
/* Marathon: the dots take the accent on hover */
[data-theme^="marathon"] .viewer-btn:hover, [data-theme^="marathon"] .viewer-btn:focus-visible { color: var(--accent-mark); }
@media (prefers-reduced-motion: reduce) { .viewer-btn .dm circle, .viewer-btn svg.dm { transition: none; } }

/* ---------- the gallery grids (js/grids/*): a canvas under the page, the DOM over it for focus and clicks ---------- */
.grid-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
html.has-grid-gl .site { position: relative; z-index: 1; }
@media print { .grid-gl { display: none; } }

/* Library, "Spines": the books stand spine-out on shelves, each filled to the column, the next below (one sideways shelf on a phone). The DOM sets every slot; the canvas draws the books on it.
   Hover tips a spine out; a click pulls the book, turns it to its cover and sets its details beside it. */
.sp { --spine-s: 1; --sp-rule: color-mix(in srgb, var(--ink) 14%, transparent); min-width: 0;
  --sp-shadow: 0 14px 32px -14px color-mix(in srgb, var(--shadow) calc(40% * var(--shadow-k)), transparent), 0 2px 6px -3px color-mix(in srgb, var(--shadow) calc(18% * var(--shadow-k)), transparent); }
.sp-head { display: flex; align-items: baseline; gap: var(--gap); height: 16px; margin-bottom: 40px; font: 400 16px/16px var(--ui); letter-spacing: var(--track); }
.sp-title { margin: 0; font: inherit; white-space: nowrap; filter: url(#ink-ui); }
.sp-count { margin-left: 4px; opacity: var(--op-faint); font-variant-numeric: tabular-nums; }
.sp-read { display: flex; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; filter: url(#ink-ui); opacity: 0; transition: opacity 200ms var(--ease-land); }
.sp-read.is-on { opacity: 1; }
.sp-read-title { overflow: hidden; text-overflow: ellipsis; }
.sp-read-by { opacity: var(--op-meta); flex: none; }
.sp-case { position: relative; }
.sp-case > .sp-row:not(:first-child) { margin-top: 48px; }
.sp-shelf { display: flex; align-items: flex-end; width: 100%; margin: 0; padding: 0; list-style: none; box-shadow: 0 1px 0 var(--sp-rule); }
html.sp-pending .sp-shelf { visibility: hidden; }
/* the room the reader takes under its shelf opens and closes with the book; the sides keep its shadow */
.sp-gap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease-land); }
.sp-gap.is-open { grid-template-rows: 1fr; }
.sp-gap-in { min-height: 0; overflow: hidden; margin: 0 -40px; padding: 0 40px; }
.sp-book {
  /* --bt thickness, --bh height (px at scale 1), --a base lean in rad (its side is set in JS), --j gap jitter, --c cover colour */
  flex: none; position: relative;
  margin-left: calc(var(--spine-s) * (1px + var(--j, 0) * var(--fnd-spine-order) * 5px));
  /* the slot: thickness plus the room a lean takes (sin a ~ a, cos a ~ 1 at these angles) */
  width: calc(var(--spine-s) * 1px * (var(--bt) + var(--bh) * var(--a, 0) * var(--fnd-spine-order)));
  height: calc(var(--spine-s) * var(--bh) * 1px);
}
.sp-book:first-child { margin-left: 0; }
.sp-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sp-btn:focus-visible::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ring); }
.sp-face { position: absolute; left: 0; bottom: 0; width: calc(var(--spine-s) * var(--bt) * 1px); height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: calc(var(--spine-s) * 12px) 0 calc(var(--spine-s) * 10px); overflow: hidden;
  background: color-mix(in srgb, var(--c, #ddd) calc(var(--fnd-spine-tone) * 100%), var(--paper)); color: var(--tc, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.sp-face span { writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.sf-title { font: 400 calc(var(--spine-s) * 13px)/1 var(--ui); letter-spacing: -0.3px; flex: 0 1 auto; }
.sf-by { font: 400 calc(var(--spine-s) * 11px)/1 var(--ui); letter-spacing: -0.2px; opacity: .62; margin-top: calc(var(--spine-s) * 10px); flex: 0 1 auto; }
.sf-year { font: 400 calc(var(--spine-s) * 9px)/1 var(--mono); opacity: .5; margin-top: auto; flex: none; font-variant-numeric: tabular-nums; }
/* the canvas draws the books; the DOM keeps the layout, the focus and the hits */
html.sp-gl .sp-face { visibility: hidden; }
html.sp-static .sp-book.is-out .sp-face { visibility: hidden; }
html.sp-static .sp-btn:hover .sp-face { translate: 0 -3px; }
/* the static leans: on a corner, into the room the slot keeps for them */
html.sp-static .lean-r .sp-face { transform-origin: 100% 100%; transform: rotate(calc(var(--a) * var(--fnd-spine-order) * 1rad)); }
html.sp-static .lean-l .sp-face { left: auto; right: 0; transform-origin: 0 100%; transform: rotate(calc(var(--a) * var(--fnd-spine-order) * -1rad)); }
/* the reader: the pulled book's cover and its details, no modal */
.sp-reader { position: relative; display: flex; gap: 28px; align-items: flex-start; padding: 44px 0 28px; margin-left: var(--rx, 0px); width: max-content; max-width: 100%; }
.sp-reader[hidden] { display: none; }
.sp-cover { position: relative; flex: none; display: block; width: var(--cw, 200px); height: var(--ch, 280px); padding: 0; cursor: pointer; outline: none; }
.sp-cover img { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: 1px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), var(--sp-shadow); }
html.sp-gl .sp-cover img { visibility: hidden; }
/* the book's own shadow on the page, there once it has landed */
html.sp-gl .sp-cover::before { content: ""; position: absolute; inset: 0; border-radius: 1px; pointer-events: none; opacity: 0; box-shadow: var(--sp-shadow); transition: opacity 320ms var(--ease-land); }
html.sp-gl .sp-reader.is-in .sp-cover::before { opacity: 1; }
.sp-cover:focus-visible { box-shadow: 0 1px 0 0 var(--ring); }
.sp-text { display: flex; flex-direction: column; gap: 6px; width: min(440px, 100%); min-width: 0; padding-top: 2px;
  opacity: 0; transform: translateY(4px); filter: blur(3px); transition: opacity 260ms var(--ease-land), transform 260ms var(--ease-land), filter 260ms var(--ease-land); }
.sp-reader.is-in .sp-text { opacity: 1; transform: none; filter: blur(0); }
.sp-details { display: flex; flex-direction: column; gap: 6px; }
.sp-back { align-self: flex-start; margin-top: 18px; display: inline-flex; gap: 8px; padding: 0; font: 400 14px/20px var(--ui); letter-spacing: -0.3px; color: color-mix(in srgb, var(--ink) 56%, var(--paper)); transition: color 160ms var(--ease-land); }
.sp-back span { font: 400 11px/20px var(--mono); opacity: .7; }
.sp-back:hover, .sp-back:focus-visible { color: var(--ink); outline: none; }
.sp-back:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 899px) {
  .sp { --spine-s: 0.72; width: 100%; }
  .sp-head { flex-direction: column; align-items: flex-start; height: auto; gap: 8px; margin-bottom: 28px; }
  .sp-read { max-width: 100%; height: 16px; }
  /* the shelf runs to the screen's edges and scrolls sideways */
  .sp-row { overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding: 28px 12px 0; margin: -28px -12px 0; scroll-padding: 0 12px; }
  .sp-row::-webkit-scrollbar { display: none; }
  .sp-shelf { min-width: 100%; width: max-content; }
  .sp-reader { flex-direction: column; gap: 20px; margin-left: 0; padding-top: 32px; width: auto; }
  .sp-text { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-text { transition: none; transform: none; filter: none; }
  .sp-gap { transition: none; }
  html.sp-static .sp-btn:hover .sp-face { translate: none; }
}

/* Experiments, "Glyph matrix": every cell drawn by the canvas; the DOM holds the buttons, captions and focus */
.xg { --xg-mark: color-mix(in srgb, var(--ink) calc(28% + 30% * var(--fnd-tone)), var(--paper)); position: relative; width: 100%; min-height: 60vh; }
.xg-tile { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.xg-tile:focus-visible { outline: none; }
/* corner ticks: the instrument's registration marks, 4px out from the cells */
.xg-frame {
  position: absolute; inset: -4px; pointer-events: none; --t: 7px;
  background:
    linear-gradient(var(--xg-mark), var(--xg-mark)) 0 0 / var(--t) 1px,
    linear-gradient(var(--xg-mark), var(--xg-mark)) 0 0 / 1px var(--t),
    linear-gradient(var(--xg-mark), var(--xg-mark)) 100% 0 / var(--t) 1px,
    linear-gradient(var(--xg-mark), var(--xg-mark)) 100% 0 / 1px var(--t),
    linear-gradient(var(--xg-mark), var(--xg-mark)) 0 100% / var(--t) 1px,
    linear-gradient(var(--xg-mark), var(--xg-mark)) 0 100% / 1px var(--t),
    linear-gradient(var(--xg-mark), var(--xg-mark)) 100% 100% / var(--t) 1px,
    linear-gradient(var(--xg-mark), var(--xg-mark)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat;
  transition: inset 260ms var(--ease-land), --t 260ms var(--ease-land);
}
.xg-tile:hover .xg-frame, .xg-tile.is-on .xg-frame { inset: -6px; --xg-mark: var(--ring); } /* the theme's accent mark (ink in Paper and Night) */
.xg-tile:focus-visible .xg-frame { inset: -6px; --xg-mark: var(--ring); --t: 12px; }
.xg-cap { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  height: calc(var(--xg-cell, 11px) * 2); font: 400 11px/1 var(--mono); letter-spacing: 0; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.xg-cap > span { background: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.xg-cap .n { opacity: var(--op-faint); margin-right: 6px; }
.xg-cap .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xg-cap .d { opacity: var(--op-faint); flex: none; transition: opacity 160ms var(--ease-land); }
.xg-tile:hover .xg-cap .d, .xg-tile.is-on .xg-cap .d { opacity: var(--op-meta); }
@property --t { syntax: "<length>"; inherits: true; initial-value: 7px; }
@media (max-width: 899px) { .xg-cap { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .xg-frame, .xg-cap .d { transition: none; } }

/* Coffee table, "The table": the books as objects on the page, seen from above. A lifted book's details sit beside it as text. */
.ct { position: relative; min-width: 0;
  --cloth-ink: #1c1b19; --cloth-stone: #d9d4c8; --cloth-graphite: #45413b; --cloth-grey: #b8b1a3;
  --cover-paper: #ece8df; --page-edge: #efebe2; --foil-paper: #f4f1ea; --foil-gold: #c2a466; }
.ct-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; align-items: start; }
.ct-book { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; text-align: left; color: var(--ink); cursor: pointer; border-radius: 2px; -webkit-tap-highlight-color: transparent; }
.ct-book img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--shadow) calc(40% * var(--shadow-k)), transparent); }
.ct-cloth { display: flex; flex-direction: column; aspect-ratio: 3 / 4; padding: 16px; border-radius: 2px; background: var(--c, var(--cloth-stone)); color: var(--f, var(--ink)); }
.ct-cloth-title { font: 400 20px/24px var(--ui); letter-spacing: -0.8px; text-wrap: balance; }
.ct-cloth-desc { margin-top: auto; font: 400 14px/18px var(--serif); letter-spacing: var(--track); opacity: .72; }
.ct-book:focus-visible { outline: 1px solid var(--ring); outline-offset: 4px; }
.ct-book.is-up img, .ct-book.is-up .ct-cloth { outline: 1px solid var(--ink); outline-offset: 4px; }
html.ct-pending:not(.ct-gl) .ct-shelf { visibility: hidden; }
/* with the table drawing: the buttons sit over the drawn books, for the cursor, focus and screen readers */
html.ct-gl .ct { height: var(--table-h, 100vh); }
html.ct-gl .ct-shelf { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
html.ct-gl .ct-shelf li { display: contents; }
html.ct-gl .ct-book { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; will-change: transform; background: none; }
html.ct-gl .ct-book > * { visibility: hidden; }
html.ct-gl .ct-book:focus-visible { outline-offset: 5px; }
html.ct-gl .ct-book.is-up:focus-visible { outline-color: transparent; }
html.ct-open .ct-book:not(.is-up) { cursor: default; }
/* no WebGL: the other books go soft behind the lifted one, as the table does in GL */
html:not(.ct-gl) .ct-book img, html:not(.ct-gl) .ct-book .ct-cloth { transition: filter 560ms var(--ease-land), opacity 560ms var(--ease-land); }
html.ct-open:not(.ct-gl) .ct-book:not(.is-up) :is(img, .ct-cloth) { filter: blur(6px); opacity: .84; }
@media (prefers-reduced-motion: reduce) { html:not(.ct-gl) .ct-book :is(img, .ct-cloth) { transition: none; } }
/* the details: plain text on the page, in the site's type */
.ct-detail { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; margin-top: 32px;
  opacity: 0; filter: blur(4px); transition: opacity 280ms var(--ease-land), filter 320ms var(--ease-land); }
.ct-detail.is-in { opacity: 1; filter: blur(0); }
.ct-detail[hidden] { display: none; }
html.ct-gl .ct-detail { position: absolute; left: 0; top: 0; margin: 0; max-width: none; }
.ct-detail .info-chips { margin-top: 6px; }
.ct-detail .info-body { margin-top: calc(var(--para) - 6px); }
@media (prefers-reduced-motion: reduce) { .ct-detail { filter: none; transition: none; } }
@media (max-width: 899px) { .ct-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* success state for icon actions: a single check in green */
.meta-ico .ico.is-ok { background: var(--ok); opacity: 1; }

/* themes: the small grey type above mixes ink at 40 to 50%, which stays under AA on dark
   and on Marathon's navy-on-pale; there it takes --muted (--op-meta of ink), which passes */
:is([data-theme="dark"], [data-theme^="marathon"]) :is(.rec-val, .viewer-count, .info-foot, .info-source, .mcp-label, .mcp-note, .mcp-lede, .sp-back, .type-tile-desc), :is([data-theme="dark"], [data-theme^="marathon"]) .mcp-steps li::before { color: var(--muted); }

/* the dot-matrix icons are alive: a slow wave breathes out from the centre through the field, each dot a little off-beat, and the halo shimmers. Hover quickens it. */
@keyframes dm-breathe { 0%, 100% { scale: 1; } 50% { scale: calc(1 + .22 * var(--k) + .9 * var(--h) * (1 - var(--k)) + .35 * (1 - var(--h))); } }
.viewer-btn .dm circle { animation: dm-breathe calc(2.8s + var(--r) * .8s) ease-in-out infinite; animation-delay: calc(var(--o) * -260ms - var(--r) * 400ms); }
.viewer-btn:hover .dm circle, .viewer-btn:focus-visible .dm circle { animation-duration: calc(1.1s + var(--r) * .3s); }
.info-chips:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .viewer-btn .dm circle { animation: none; } }

/* Speaking: the title, then its data in one quiet line */
.records.is-plain .rec-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; font: 400 14px/20px var(--ui); letter-spacing: -0.2px; color: var(--muted); }
.records.is-plain .rec-sep { opacity: .6; }

/* ---------- Settings (js/settings.js): the app's own page, in the nav's type ----------
   Theme and Sound are specimens: each theme a live miniature of the site, each sound a
   dot-matrix score of its notes. The switches are quiet: a label and three dots. */
:root {
  --fnd-set-scale: 0.4;    /* Settings. Small cards -> Large */
  --fnd-set-detail: 0.85;  /* Settings. Schematic -> Faithful: bars of ink up to the real type */
  --set-type: min(1, calc(var(--fnd-set-detail) * 1.7));
  --set-bar: max(0, calc((0.55 - var(--fnd-set-detail)) * 1.6));
  --spec-gap: calc(44px - 32px * var(--fnd-density));
  --spec-row: calc(56px - 36px * var(--fnd-density));
  --spec-edge: color-mix(in srgb, var(--ink) 12%, transparent);
  --spec-r: 6px;
  /* the theme crossfade: 260ms when Still, 180ms when Lively */
  --vt-ms: calc(260ms - 80ms * var(--fnd-energy));
}
html.is-specimens .cols { grid-template-columns: var(--col-nav, 89px) var(--col-sub, 248px) minmax(0, 1fr); }
.settings { display: flex; flex-direction: column; gap: calc(var(--para) * 1.5); font: 400 16px/20px var(--ui); letter-spacing: var(--track); }
.settings-theme, .settings-sound { gap: var(--spec-row); }

/* the quiet switch: a label and three dots that fill */
.spec-switches { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 10px; }
.qs { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; outline: none; filter: url(#ink-ui); -webkit-tap-highlight-color: transparent; transition: opacity 160ms var(--ease-land); }
.qs-label { opacity: var(--op-meta); transition: opacity 160ms var(--ease-land); }
.qs:hover .qs-label, .qs[aria-checked="true"] .qs-label { opacity: 1; }
.qs:focus-visible .qs-label { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.qs-dots { display: inline-flex; gap: 3px; }
.qs-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dot); transition: background-color 180ms var(--ease-land); }
.qs[aria-checked="true"] .qs-dots i { background: var(--accent-mark); }
.qs[aria-checked="true"] .qs-dots i:nth-child(2) { transition-delay: 50ms; }
.qs[aria-checked="true"] .qs-dots i:nth-child(3) { transition-delay: 100ms; }
.qs[aria-checked="false"] .qs-dots i:nth-child(3) { background: var(--muted); }
.qs:active { transform: translateY(0.5px); }
.qs.is-muted, .spec-grid.is-muted .spec { opacity: var(--op-faint); }

/* a grid of specimens */
.spec-grid { --ring-page: var(--ink); display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); column-gap: var(--spec-gap); row-gap: var(--spec-row); align-items: start; }
.spec { display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: opacity 160ms var(--ease-land); }
.spec-pick { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; outline: none; -webkit-tap-highlight-color: transparent; }
.spec-frame { position: relative; display: block; width: 100%; border-radius: var(--spec-r); box-shadow: 0 0 0 1px var(--spec-edge); outline: 1px solid transparent; outline-offset: 4px;
  transition: outline-color 200ms var(--ease-land), box-shadow 200ms var(--ease-land), transform 220ms var(--ease-land); }
.spec-pick:hover .spec-frame { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.spec-pick[aria-checked="true"] .spec-frame { outline-color: var(--ring); }
.spec-pick:focus-visible .spec-frame { outline: 1px dashed var(--ring); }
.spec-pick:active .spec-frame { transform: scale(0.992); }
.spec-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; filter: url(#ink-ui); }
.spec-name > span:first-child { opacity: var(--op-meta); transition: opacity 160ms var(--ease-land); }
.spec-pick:hover .spec-name > span:first-child, .spec-pick[aria-checked="true"] .spec-name > span:first-child { opacity: 1; }

/* a theme specimen: the site itself, small, in that theme's tokens */
.mini-clip { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--spec-r); }
.mini { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; transform: scale(var(--k, 0.25));
  background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between;
  font: 400 16px/16px var(--ui); letter-spacing: var(--track); pointer-events: none; user-select: none;
  transition: background-color calc(var(--vt-ms) * .5) var(--ease-land); }
.mini .m-cols { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 24px; padding: 24px; }
.mini ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mini .m-i { opacity: var(--op-rest); filter: blur(var(--blur-rest)); white-space: nowrap; }
.mini .m-i.on { opacity: 1; filter: none; }
.mini .m-nav .m-i.on { color: var(--accent-text); }
.mini[data-theme="marathon-light"] .m-nav .m-i.on .t { background: linear-gradient(transparent 12%, var(--accent-wash) 12%, var(--accent-wash) 92%, transparent 92%); box-shadow: -3px 0 0 var(--accent-wash), 3px 0 0 var(--accent-wash); }
.mini .m-body { font: 400 16px/20.8px var(--serif); max-width: 540px; display: flex; flex-direction: column; gap: 12px; }
.mini .m-body h2 { margin: 0; font: 400 20px/24px var(--ui); letter-spacing: -0.8px; }
.mini .m-body p { margin: 0; }
.mini .m-foot { color: var(--foot); }
.mini .m-bio { margin: 0; padding: 0 0 0 12px; width: 322px; line-height: 19.2px; }
.mini .m-word { display: block; width: 960px; }
.mini .m-word text { font-family: "Kult Luxury"; fill: var(--foot); fill-opacity: var(--set-type); }
.mini .m-word rect { fill: var(--foot); opacity: var(--set-bar); }
/* Detail: Faithful is the real type; Schematic turns each run into a bar of its own ink */
.mini .t { position: relative; -webkit-text-fill-color: color-mix(in srgb, currentColor calc(var(--set-type) * 100%), transparent); }
.mini .t::after { content: ""; position: absolute; left: 0; right: 0; top: 22%; bottom: 18%; border-radius: 1px; background: currentColor; opacity: var(--set-bar); }
.mini .m-body .t { display: inline; }
.mini .m-body .t::after { display: none; }
.mini .m-para { position: relative; }
.mini .m-lines { position: absolute; inset: 0; opacity: var(--set-bar); border-radius: 1px;
  background: repeating-linear-gradient(transparent 0 5px, currentColor 5px 16px, transparent 16px 20.8px); }

/* Marathon: its five accents as chips under the card; hovering one recolours that card */
.chips { display: flex; gap: 8px; align-items: center; min-height: 18px; }
.chip { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); outline: 1px solid transparent; outline-offset: 2px; position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); transition: transform 160ms var(--ease-land), outline-color 160ms var(--ease-land); -webkit-tap-highlight-color: transparent; }
.chip::before { content: ""; position: absolute; inset: -6px; }
.chip:hover { transform: scale(1.15); }
.chip[aria-checked="true"] { outline-color: var(--ring-page); }
.chip:focus-visible { outline: 1px dashed var(--ring-page); }

/* a sound specimen: the palette's notes as a dot-matrix score */
.score { display: block; width: 100%; height: auto; aspect-ratio: 52 / 29; }
.spec-frame.is-score { padding: calc(14px - 6px * var(--fnd-density)); }
.spec-time { font: 400 12px/16px var(--mono); letter-spacing: 0; opacity: var(--op-faint); font-variant-numeric: tabular-nums; }

/* the theme change: a quick crossfade of the whole page, no mask, no blur (Ahmed, Nov 9) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-out var(--vt-ms) var(--ease-land) both; }
::view-transition-new(root) { animation: vt-in var(--vt-ms) var(--ease-land) both; }
@keyframes vt-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: linear; }
  .qs-label, .qs-dots i, .spec-frame, .chip, .mini { transition: none; }
}
@media (max-width: 899px) {
  :root { --spec-gap: calc(24px - 12px * var(--fnd-density)); --spec-row: calc(36px - 16px * var(--fnd-density)); }
  .spec-switches { column-gap: 20px; }
}

/* MCP: the server once, then each app's steps (in the body face), its command and its link */
.set-field { width: 100%; font: 400 14px/20px var(--ui); letter-spacing: -0.2px; }
.set-field .set-copy { flex: none; height: 20px; width: 20px; justify-content: center; }
.set-note { font-size: 14px; line-height: 20px; letter-spacing: -0.2px; color: var(--muted); overflow-wrap: anywhere; }
.settings-mcp { gap: calc(var(--para) * 2); }
.chat [data-held] { opacity: 0; pointer-events: none; } /* held until the words have streamed in (js/settings.js mcpPage) */
.settings .set-lede { margin: 0; max-width: 540px; font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); }
/* MCP as a conversation: no bubbles, no avatars. Ahmed on the left in the post's serif,
   the visitor's line set right in the UI face, a hairline between turns. */
.chat { display: flex; flex-direction: column; gap: calc(var(--para) * 2); max-width: 540px; }
.chat-msg { display: flex; flex-direction: column; gap: var(--para); outline: none; position: relative; scroll-margin: 96px; }
.chat-msg p { margin: 0; }
.chat-site > p { font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); }
.chat-site > p.chat-more { margin-top: calc(var(--para) * 0.5); }
.chat-you { align-items: flex-end; text-align: right; padding-top: calc(var(--para) * 2); margin-bottom: calc(var(--para) * -0.5); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.chat-you p { max-width: 75%; font: 400 16px/20px var(--ui); letter-spacing: var(--track); }
.chat-steps { font: 400 16px/20.8px var(--serif); letter-spacing: var(--track); gap: calc(var(--stack) * 2); }
.chat-steps li { grid-template-columns: 20px 1fr; }
.chat-steps li::before { font-family: var(--ui); color: var(--muted); }
.chat-go { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.chat-go .set-note { flex: 1 1 200px; margin: 0; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chip { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 15px/20px var(--ui); letter-spacing: -0.3px; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
  transition: box-shadow 160ms var(--ease-land), background-color 160ms var(--ease-land), transform 120ms var(--ease-land); }
.chat-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); background: var(--accent-wash); }
.chat-chip:active { transform: scale(0.97); }
.chat-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent), 0 0 0 2px var(--paper), 0 0 0 3px var(--ring); }
.chat-chip-quiet { padding: 0 12px; color: var(--muted); box-shadow: none; }
.chat-chip-quiet:hover { color: var(--ink); box-shadow: none; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chat-ico { display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted); transition: color 160ms var(--ease-land); }
.chat-ico svg { width: 16px; height: 16px; display: block; }
.chat-chip:hover .chat-ico, .chat-chip:focus-visible .chat-ico { color: var(--ink); }
@media (max-width: 480px) { .chat-you p { max-width: 90%; } .chat-go { flex-direction: column; align-items: stretch; } .chat-go .mcp-go { justify-content: center; } .chat-go .set-note { flex: none; } }
@media (max-width: 899px) { .set-field code { font-size: 12px; } .set-field .mcp-label { display: none; } }

/* with every action switched off, the actions row takes no room */
.meta-ico[hidden] { display: none; }
.post-meta:not(:has(> :not([hidden]))) { display: none; }

/* diagram ink (Ahmed, Nov 10): the diagrams carry the footer name's ink (#ink-diagram in index.html, a gentler
   #ink-bio): boxes, rules, icons and labels get a fine displacement, a hair of bleed and grain dropouts */
.hd-canvas, .hf-canvas, .hf-toggle { filter: url(#ink-diagram); }
.hd-card, .hf-card { background-color: var(--paper); }