:root {
  --bg: #1e1e1e;
  --bg-side: #1a1a1a;
  --border: #2c2c2c;
  --text: #dcddde;
  --muted: #8a8a8a;
  --faint: #555;
  --accent: #8ab56f;
  --strong: #fff;
  --hover-bg: rgba(255,255,255,.05);
  --code-bg: #2a2a2a;
  --side-w: 320px;
  /* card size scale: 100% on the Size slider = this. (1.07 = the old "107%", now the plain default) */
  --base: 1.07;
  --font: Inter, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
/* light pages (site.config.json → pages → "theme": "light") */
:root.theme-light {
  --bg: #f3f2ee;
  --bg-side: #eae8e3;
  --border: #d6d3cc;
  --text: #26241f;
  --muted: #76726a;
  --faint: #b3afa6;
  --accent: #4a7a31;
  --strong: #000;
  --hover-bg: rgba(0,0,0,.05);
  --code-bg: #e2dfd8;
  color-scheme: light;
}
@font-face { font-family: "DD Grotesk"; src: url("fonts/dd-grotesk.otf") format("opentype"); font-display: swap; }
:root[data-font="inter"] { --font: Inter, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="dd"] { --font: "DD Grotesk", Inter, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="times"] { --font: "Times New Roman", Times, serif; }
:root[data-font="courier"] { --font: "Courier New", Courier, monospace; }
/* headers have their own font; without a choice they follow the text font */
:root { --font-head: var(--font); }
:root[data-font-head="inter"] { --font-head: Inter, -apple-system, "Segoe UI", sans-serif; }
:root[data-font-head="dd"] { --font-head: "DD Grotesk", Inter, -apple-system, "Segoe UI", sans-serif; }
:root[data-font-head="times"] { --font-head: "Times New Roman", Times, serif; }
:root[data-font-head="courier"] { --font-head: "Courier New", Courier, monospace; }
.site-name, .page h1, .page h2, .page h3, .page h4, .page h5, .page h6, .page-title, .cap-t,
.nb-wordmark, .nb-number, .pl-title, .tuner-title, .nav-group { font-family: var(--font-head); }
* { box-sizing: border-box; }
/* proximity snapping: scrolling near a media row settles it in the middle of the screen */
html { scroll-padding-top: 0; scroll-snap-type: y proximity; }
/* …and the very top of the page is a resting place too: without it a page whose first videos sit near the top opened
   already scrolled down to them, hiding the title */
body::before { content: ""; display: block; height: 0; scroll-snap-align: start; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

/* ── left sidebar ── */
.left {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--bg-side); border-right: 1px solid var(--border);
  padding: 40px 24px 24px 12px;
  display: flex; flex-direction: column;
}
.side-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr); }
.side-collapsed .left { visibility: hidden; padding: 0; border: 0; }
.site-name { margin-right: 36px; }
/* sits in the sidebar's top-right corner, level with the site title; stays at the left edge when folded */
.side-toggle {
  position: fixed; top: 41px; left: calc(var(--side-w) - 46px); z-index: 40; width: 34px; height: 34px; border-radius: 6px;
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; display: grid; place-items: center;
}
/* the arrows are set in the header font at the site name's size, so they match it */
.side-toggle::before { content: "\00AB"; font: 700 24px/1 var(--font-head); }
.side-collapsed .side-toggle::before { content: "\2630"; font-weight: 400; } /* ☰ opens the sidebar again */
/* the next site in a stacked sidebar: a site name like the first, after the previous site's pages */
.site-name.site-name-next { margin-top: 28px; }
/* a single-page header (About): no menu under it, so the next site name follows at the usual 56px */
.site-name.site-name-solo { margin-bottom: 0; }
.site-name.active { color: var(--accent); }
.side-collapsed .side-toggle { left: 12px; }

.side-toggle:hover { color: var(--strong); background: var(--hover-bg); }
.font-toggle { margin-top: auto; padding: 32px 0 0 24px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.font-toggle span { margin-right: 4px; }
.credit { padding: 14px 0 0 24px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.page-credit { display: none; }
.font-toggle button {
  font: inherit; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.font-toggle .f-inter { font-family: Inter, sans-serif; }
.font-toggle .f-dd { font-family: "DD Grotesk", sans-serif; }
.font-toggle .f-times { font-family: "Times New Roman", Times, serif; }
.font-toggle .f-courier { font-family: "Courier New", Courier, monospace; }
.font-pick { flex-wrap: wrap; }
/* the active choice: the font in use for text and for headers */
:root[data-font="inter"] [data-key="font"] .f-inter, :root[data-font-head="inter"] [data-key="fontHead"] .f-inter,
:root[data-font="dd"] [data-key="font"] .f-dd, :root[data-font-head="dd"] [data-key="fontHead"] .f-dd,
:root[data-font="times"] [data-key="font"] .f-times, :root[data-font-head="times"] [data-key="fontHead"] .f-times,
:root[data-font="courier"] [data-key="font"] .f-courier, :root[data-font-head="courier"] [data-key="fontHead"] .f-courier,
.font-toggle button:hover { color: var(--strong); }

:root:not(.theme-light) .theme-toggle [data-theme="dark"],
:root.theme-light:not(.theme-white) .theme-toggle [data-theme="light"], :root.theme-white .theme-toggle [data-theme="white"] { color: var(--accent); border-color: var(--accent); }
/* Theme is the first thing at the bottom of the sidebar now; it and the credit line sit at the very bottom */
.left .theme-toggle { margin-top: auto; }
.left .credit { margin-top: auto; } /* the credit line at the very bottom of the sidebar */
/* Bold switch (settings panel). On: bold as usual — DD Grotesk has only one weight, so the browser draws its bold.
   Off: everything in the regular weight */
:root:not([data-bold="off"]) .bold-toggle [data-bold="on"], :root[data-bold="off"] .bold-toggle [data-bold="off"] { color: var(--accent); border-color: var(--accent); }
.bold-toggle { margin-top: 0; padding-top: 8px; }
:root[data-bold="off"] body * { font-weight: 400 !important; }
/* Mono: the monospace of the Pillar diary's grey box */
:root[data-font="mono"] { --font: Consolas, Menlo, "SF Mono", monospace; }
:root[data-font-head="mono"] { --font-head: Consolas, Menlo, "SF Mono", monospace; }
.font-toggle .f-mono { font-family: Consolas, Menlo, "SF Mono", monospace; }
/* 28px from a site name to its menu; the gap above a following site name stays 56px */
.site-name { display: block; font-size: 24px; font-weight: 700; color: var(--strong); margin: 0 0 14px; letter-spacing: -.01em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: block; padding: 5px 0 5px 24px; font-size: 16px; line-height: 1.35; color: var(--text); border-radius: 4px; }
.nav-item:hover { color: var(--strong); background: var(--hover-bg); }
.nav-item.active { color: var(--accent); }

/* ── content ── */
.center { padding: 0 56px; min-width: 0; }
.page { max-width: 1220px; margin: 0 auto; padding: 48px 0 120px; overflow-wrap: break-word; }
.page-title { font-size: 2.1em; margin: 0 0 .6em; line-height: 1.2; }
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 { color: var(--strong); font-weight: 700; line-height: 1.3; margin: 1.6em 0 .6em; }
.page h1 { font-size: 2em; } .page h2 { font-size: 1.6em; } .page h3 { font-size: 1.37em; }
.page h4 { font-size: 1.25em; } .page h5 { font-size: 1.25em; } .page h6 { font-size: 1.1em; }
.page p { margin: 0 0 1em; }
.page img, .page video { max-width: 100%; height: auto; }
/* video rows, audio players and wide gifs break out of the text column to use the whole centre area */
.center { container-type: inline-size; }
/* --size (settings panel, 30–150 %) scales cards and wide media */
.page .wide { --w: min(100cqw, calc(100cqw * var(--size, 1) * var(--base))); width: var(--w); margin: 0 0 1.5em calc((100% - var(--w)) / 2); }
.page .wide img { display: block; width: 100%; }
/* GIFs are published as silent looping videos; they behave like the images they replace */
.page video[data-gif] { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; background: transparent; }
.page .wide video[data-gif] { width: 100%; }
.page .media-row > .m > video[data-gif] { width: 100%; height: 100%; }
/* single images get the same frame and corners as the cards */
/* media listed in site.config.json → "square" is never rounded */
.page img.square, .page video.square { border-radius: 0 !important; }
/* buttons written into the notes (e.g. "Place Order"): pills like every other control, in the header font, centred */
.page a > button { border-radius: 999px !important; font-family: var(--font-head) !important; }
.page a:has(> button) { display: block; width: fit-content; margin: 0 auto; }
.page .wide video[data-gif], .page .embed video[data-gif],
.page .wide img, .page .embed img {
  box-sizing: border-box; border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px);
}
.page .wide audio { width: 100%; max-width: none; margin: 0; }
.media-row {
  --row-w: 100cqw;
  --ph: 80svh; /* portrait height; site.js lowers it so 3 fit side by side */
  width: var(--row-w); margin: 3em 0 3em calc((100% - var(--row-w)) / 2);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--gap-y, 64px) var(--gap-x, 10px);
}
/* cards: --frame is the black frame thickness (0 = off); it sits outside the media so nothing gets cropped */
.page .media-row > .m {
  position: relative; box-sizing: content-box; border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px);
  max-width: calc(100% - 2 * var(--frame, 0px)); aspect-ratio: var(--ar, 0.5625); scroll-snap-align: center;
}
.page .media-row > .m > video { cursor: zoom-in; }
/* size scales everything, but a card never gets taller than the screen (frame included) */
.page .media-row > .m { --max-h: calc(100svh - 24px - 2 * var(--frame, 0px)); }
/* …and never wider than the row: on a narrow phone the height shrinks with the width, so the card keeps the
   media's exact proportions (100cqw = the row width, from the .center container) */
.page .media-row > .m:not(.landscape) { height: min(calc(var(--ph) * var(--size, 1) * var(--base)), var(--max-h), calc((100cqw - 2 * var(--frame, 0px)) / var(--ar, 0.5625))); }
.page .media-row > .m.landscape {
  --fit: min(calc(100% - 2 * var(--frame, 0px)), calc(var(--max-h) * var(--ar)));
  width: min(calc(var(--fit) * var(--size, 1) * var(--base)), var(--fit));
}
/* cover: the media always fills its card edge to edge — if the proportions are ever a hair off it crops, never shows bars */
.page .media-row > .m > video, .page .media-row > .m > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #000;
  border-radius: max(0px, calc(var(--radius, 0px) - var(--frame, 0px))); /* inner corner follows the outer one */ }
/* card buttons: sound top-right, expand bottom-left */
.m-btn {
  position: absolute; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  color: #a8a8a8; background: rgba(20,20,20,.5); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer;
  backdrop-filter: blur(4px);
}
.m-btn svg { width: 20px; height: 20px; }
.m-btn:hover { color: #d6d6d6; background: rgba(20,20,20,.75); }
/* always 12px in from the corners of the card's box, as on square cards — on rounded cards they sit
   in the cut-off corners, outside the curve */
.page .media-row > .m.square, .page .media-row > .m.square > video, .page .media-row > .m.square > img { border-radius: 0; }
/* --btn-in: set by site.js so the buttons never sit on a round frame */
.unmute { top: var(--btn-in, 12px); right: var(--btn-in, 12px); }
.expand { bottom: var(--btn-in, 12px); left: var(--btn-in, 12px); }
.lb-share.done { color: var(--accent); }
.lb-share.busy { opacity: .5; }
.unmute.on { color: #e2e2e2; border-color: rgba(255,255,255,.4); }

/* card annotations (toggle in the settings panel; only on pages with "annotations": true) */
.cap { display: none; }
/* a small text block under each card: title line + up to 3 lines of text; the row gap grows to make room */
/* half an empty line (14px × 1.4 ÷ 2) between the card and its text, and half a line between the text and the next card */
/* …plus one more empty line (14px × 1.4) after the text */
.has-annot { --cap-line: 9.8px; --cap-after: 19.6px; --cap-h: calc(6.4em + 2 * var(--cap-line) + var(--cap-after)); }
.annot.has-annot .cap {
  display: block; position: absolute; left: calc(-1 * var(--frame, 0px)); right: calc(-1 * var(--frame, 0px));
  top: calc(100% + var(--frame, 0px) + 10px + var(--cap-line)); font-size: 14px; line-height: 1.4; color: var(--text);
}
.cap-t { display: block; font-weight: 600; color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; margin-right: .4em; }
.cap-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 2px; font-size: 13px; color: var(--muted); }
/* unfolded ("more"): the whole title and text */
.cap.open .cap-t { white-space: normal; }
.cap.open .cap-x { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* "… more" sits at the end of the 3rd line, over the cut (a short fade hides the words under it), like Instagram;
   unfolded, "less" follows the last word */
.cap-x { position: relative; }
/* "more" / "less" a step lighter than the caption text */
.cap-more { font: inherit; color: color-mix(in srgb, var(--muted) 55%, transparent); border: 0; cursor: pointer; position: absolute; right: 0; bottom: 0; padding: 0 0 0 2.2em;
  background: linear-gradient(to right, transparent, var(--bg) 1.8em); }
.cap-more:hover { color: var(--strong); }
.cap.open .cap-more { position: static; background: none; padding: 0; margin-left: .35em; }
.cap-more[hidden] { display: none; }
.annot.has-annot .media-row { row-gap: calc(var(--gap-y, 64px) + var(--cap-h)); margin-bottom: calc(3em + var(--cap-h)); }

/* scroll reveal: cards and wide media ease in as they enter the screen */
.reveal .media-row > .m, .reveal .page .wide {
  opacity: 0; translate: 0 48px; scale: .96;
  transition: opacity .7s ease, translate .9s cubic-bezier(.2,.7,.2,1), scale .9s cubic-bezier(.2,.7,.2,1);
}
.reveal .media-row > .m.in, .reveal .page .wide.in { opacity: 1; translate: 0 0; scale: 1; }

/* 3D shelf page (site.config.json → variants → "layout": "boxes"): every card sits at the back of its own cell,
   the cell walls come forward toward the viewer, and the whole shelf turns together with the mouse and scroll.
   Pivot and perspective follow the middle of the screen, set by site.js as --pivot. */
/* perspective depth comes from the settings panel (--persp: smaller = deeper); the vanishing point follows the
   middle of the screen. The shelf fills the whole content area: its top and sides sit on the page edges, and the
   space inside is the card spacing (vertical space above the first and below the last row). */
.layout-boxes .center { padding: 0; }
.left { z-index: 10; } /* a turned shelf can swing toward the viewer; keep the sidebar above it */
.layout-boxes .page { max-width: none; padding: 0 0 120px; perspective: var(--persp, 1200px); perspective-origin: 50% var(--pivot, 50%); }
.layout-boxes .media-row {
  margin: 0; width: 100cqw;
  padding: var(--gap-y, 64px) 0;
  position: relative; transform-style: preserve-3d; transform-origin: 50% var(--pivot-row, 50%);
  transform: rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg));
  cursor: grab;
}
.layout-boxes.dragging .media-row { cursor: grabbing; }
.layout-boxes.dragging { user-select: none; }
/* The shelf body sits at z = 0 and goes back by --shelf-depth: a front panel with an opening for every cell,
   a back panel, and outer walls. Each cell is a box sticking out of its opening by --depth (cell depth):
   the picture is the cell's front face, its walls run back to the shelf's front panel. */
.shelf { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.annot.has-annot.layout-boxes .media-row { margin-bottom: 0; padding-bottom: calc(var(--gap-y, 64px) + var(--cap-h)); }
.shelf-front, .shelf-back { position: absolute; inset: 0; background-color: var(--frame-color, #000); }
.shelf-front { background-image: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)); } /* openings cut by site.js (clip-path) */
.shelf-back { transform: translateZ(calc(-1 * var(--shelf-depth, 120px))); background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)); }
.shelf > .side { --f: 0px; }
.shelf > .side.r, .shelf > .side.l { width: var(--shelf-depth, 120px); }
.shelf > .side.t, .shelf > .side.b { height: var(--shelf-depth, 120px); }
.layout-boxes .media-row > .m { transform-style: preserve-3d; border-radius: 0; transform: translateZ(var(--depth, 60px)); }
.layout-boxes .media-row > .m > video, .layout-boxes .media-row > .m > img { border-radius: 0; }
/* opacity would flatten the 3D, so the fade-in effect is off on this page */
.layout-boxes.reveal .media-row > .m { opacity: 1; translate: none; scale: none; }
.layout-boxes .m-btn { transform: translateZ(2px); }
/* captions are printed on the shelf's front panel, not on the sticking-out cell */
.layout-boxes .cap { transform: translateZ(calc(1px - var(--depth, 60px))); }
.side { position: absolute; pointer-events: none; --f: var(--frame, 0px); background-color: var(--frame-color, #000); }
.side.r, .side.l { top: calc(-1 * var(--f)); width: var(--depth, 60px); height: calc(100% + 2 * var(--f)); }
.side.t, .side.b { left: calc(-1 * var(--f)); height: var(--depth, 60px); width: calc(100% + 2 * var(--f)); }
/* each wall is hinged on the outer edge of its front face and folded 90° backwards; shading = light from the top-left */
.side.r { left: calc(100% + var(--f)); transform-origin: left center; transform: rotateY(90deg); background-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.side.l { right: calc(100% + var(--f)); transform-origin: right center; transform: rotateY(-90deg); background-image: linear-gradient(270deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); }
.side.t { bottom: calc(100% + var(--f)); transform-origin: center bottom; transform: rotateX(90deg); background-image: linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,.12)); }
.side.b { top: calc(100% + var(--f)); transform-origin: center top; transform: rotateX(-90deg); background-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); }
@media (prefers-reduced-motion: reduce) { .layout-boxes .media-row { transform: none; } }

/* overlay player ("window over window") */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(10,10,10,.88); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox video { max-width: 92vw; max-height: 90vh; border-radius: 8px; background: #000; box-shadow: 0 20px 80px rgba(0,0,0,.6); }
/* the overlay's buttons: share + close, top right (on a phone: in a strip under the video) */
.lb-bar { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 10px; }
/* a picture card opened big: fills the screen like the videos */
.lightbox .lb-img { width: 100vw; height: 100vh; object-fit: contain; display: block; }
.lightbox .lb-img[hidden], .lightbox video[hidden], .lb-sound[hidden] { display: none; }
@media (max-width: 800px), (pointer: coarse) { .lightbox .lb-img { flex: 1; min-height: 0; width: 100%; height: auto; } }
.page .media-row > .m > img { cursor: zoom-in; }
.lb-sound.on { border-color: rgba(255,255,255,.45); }
.lb-sound, .lb-share { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); cursor: pointer; }
.lb-sound svg, .lb-share svg { width: 20px; height: 20px; }
.lb-sound:hover, .lb-share:hover { background: rgba(255,255,255,.18); }
.lb-close {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  font-size: 26px; line-height: 1; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.18); }
body.lb-open { overflow: hidden; }

/* card settings panel */
.tuner-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-side); border: 1px solid var(--border); color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.tuner-btn:hover, .tuner-btn[aria-expanded="true"] { color: var(--strong); border-color: var(--muted); }
.tuner-btn svg { width: 20px; height: 20px; }
.tuner {
  position: fixed; right: 16px; bottom: 66px; z-index: 50; width: 320px; padding: 16px 18px 14px;
  background: var(--bg-side); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  font-size: 14px;
}
.tuner[hidden] { display: none; }
.tuner-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--strong); margin-bottom: 12px; }
.tuner label { display: block; margin: 0 0 12px; color: var(--text); }
.tuner .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.tuner output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--strong); }
.tuner input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; }
.tuner .check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tuner .check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.tuner input:disabled { opacity: .35; }
.tuner-gap { margin-top: 16px; }
.tuner .row .swatch { margin-left: auto; }
.tuner { max-height: calc(100vh - 90px); overflow-y: auto; }
.tuner-fonts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.tuner-fonts span { width: 58px; }
.tuner-fonts button { font-size: 12px; color: var(--text); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.tuner-fonts button:hover { color: var(--strong); }
.tuner .swatch { margin-left: auto; width: 34px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; }
.tuner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tuner-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.tuner-presets button { font: inherit; color: var(--text); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.tuner-presets button:hover { border-color: var(--muted); color: var(--strong); }
.tuner-actions button {
  font: inherit; font-size: 12px; color: var(--text); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.tuner-actions button:hover { border-color: var(--muted); color: var(--strong); }
.page .embed { margin: 0 0 1em; }
.page .embed img, .page .embed video { display: block; margin: 0 auto; }
.page .embed video { width: 100%; background: #000; }
.page audio { width: 100%; display: block; margin: 0 0 1em; }
.page iframe { max-width: 100%; border: 0; }
.page iframe.pdf { width: 100%; height: 80vh; }
.page a[href^="http"], .page a[href^="mailto"], .page a.internal, .credit a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page a[href^="http"]:hover, .page a[href^="mailto"]:hover, .page a.internal:hover, .credit a:hover { color: var(--strong); }
.page hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.page blockquote { margin: 0 0 1em; padding: 0 0 0 1em; border-left: 2px solid var(--accent); color: var(--muted); }
.page code { font-family: Menlo, Consolas, monospace; font-size: .88em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.page pre { background: #252525; padding: 1em; border-radius: 6px; overflow-x: auto; }
.page pre code { background: none; padding: 0; }
.page mark { background: #6b5a1d; color: #fff; }
.tag { display: inline-block; background: rgba(138,181,111,.12); color: var(--accent); border-radius: 1em; padding: 0 .6em; font-size: .85em; }
.callout { background: rgba(138,181,111,.07); border-left: 3px solid var(--accent); border-radius: 4px; padding: .8em 1em; margin: 0 0 1em; }
.callout-title { font-weight: 600; }
.missing { color: #c66; font-size: .85em; }
.unresolved { color: var(--muted); }

.mobile-bar { display: none; }

@media (max-width: 1200px) {
  :root { --side-w: 260px; }
}
@media (max-width: 800px) {
  .layout, .side-collapsed .layout { display: block; }
  .side-toggle { display: none; }
  .side-collapsed .left { visibility: visible; padding: 40px 24px 24px 12px; border-right: 1px solid var(--border); }
  .mobile-bar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20;
    background: var(--bg-side); border-bottom: 1px solid var(--border); padding: 10px 16px;
  }
  .mobile-bar .site-name { margin: 0; font-size: 20px; }
  .menu-btn { background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; padding: 0 4px; }
  .left { position: fixed; z-index: 30; top: 0; left: 0; width: 280px; transform: translateX(-100%); transition: transform .2s; }
  body.menu-open .left { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .center { padding: 0 16px; }
  html { scroll-padding-top: 53px; }
  .media-row { --ph: calc(100svh - 72px); }
  .page-credit { display: block; padding: 0 0 32px; }
  .page { padding-top: 24px; }
}

/* ── About: large statement type (site.config.json → pages → "style": "statement") ── */
/* the settings panel's "Text size" slider sets --about-size; without it the size follows the window */
.style-statement .page p { font-size: var(--about-size, clamp(22px, 2.4vw, 42px)); line-height: 1.22; letter-spacing: -.01em; max-width: 24em; margin: 0 0 .7em; color: var(--strong); }
.style-statement .page p:first-of-type { margin-top: 1.2em; }
.style-statement .page a[href^="mailto"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page del { opacity: .55; }

/* ── Numbers: the numbers gallery, restyled (assets/numbers.js) ── */
.numbers { --cell-gap: 6px; }
/* the separator under the masthead (and above the upload form) follows the grid's line settings, 0 included */
.nb-mast { display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; margin-bottom: 26px; border-bottom: var(--line-w, 1px) solid var(--line-color, var(--faint)); }
.nb-row1, .nb-row2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.nb-wordmark { font-size: clamp(26px, 3vw, 44px); font-weight: 700; line-height: 1.1; color: var(--strong); letter-spacing: -.01em; }
.nb-wordmark:hover { color: var(--accent); }
.nb-donate, .nb-progress { color: var(--muted); font-size: 15px; }
.nb-progress strong { color: var(--strong); font-weight: 600; }
.nb-cta {
  font: 600 14px var(--font); color: #111; background: var(--accent); border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
}
.nb-cta:hover { filter: brightness(1.1); }
.nb-demo { font-size: 12px; color: var(--muted); margin: -12px 0 22px; }
.nb-demo a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* spacing and lines come from the settings panel on this page (horizontal/vertical space, grid lines) */
/* cells flow like on the live site: about 90px each, more per row on wider screens, instead of growing */
/* --cell: the smallest a cell may be (settings panel → Cell size); each row fills up with as many as fit */
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell, 90px), 1fr)); gap: var(--gap-y, 6px) var(--gap-x, 6px); }
.nb-cell {
  position: relative; aspect-ratio: 1; display: block; overflow: hidden;
  border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px);
  background: var(--bg-side); outline: var(--line-w, 1px) solid var(--line-color, var(--faint)); outline-offset: calc(-1 * var(--line-w, 1px));
}
.nb-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.nb-cell:hover img { transform: scale(1.05); }
.nb-cell.empty:hover { background: var(--hover-bg); }
.nb-empty-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; color: var(--faint); }
.nb-cell.empty:hover .nb-empty-label { color: var(--muted); }
.nb-mark { position: absolute; font-size: 12px; line-height: 1; padding: 4px 6px; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; }
/* corner labels move in along the diagonal as the corners round, so a circle doesn't cut them off (cells are square, so % works both ways) */
.nb-cell { --in: calc(6px + min(var(--radius, 0px), 50%) * 0.29); }
.nb-plus { top: var(--in); right: var(--in); opacity: 0; transition: opacity .15s; }
.nb-cell:hover .nb-plus { opacity: 1; }
.nb-cell.empty .nb-plus { background: none; color: var(--accent); font-size: 16px; }
.nb-count { left: var(--in); bottom: var(--in); font-variant-numeric: tabular-nums; }

.nb-detail { display: flex; flex-direction: column; gap: 22px; }
.nb-back { color: var(--muted); font-size: 14px; }
.nb-back:hover { color: var(--accent); }
.nb-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nb-nav > a { color: var(--muted); font-size: 18px; font-variant-numeric: tabular-nums; }
.nb-nav > a:hover { color: var(--accent); }
.nb-nav-plain { justify-content: center; }
.nb-center { text-align: center; }
.nb-number { font-size: clamp(80px, 12vw, 180px); line-height: .95; font-weight: 700; color: var(--strong); letter-spacing: -.03em; }
.nb-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.nb-none { color: var(--muted); padding: 40px 0; text-align: center; }
.nb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 20px; }
.nb-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px);
}
.nb-caption { margin-top: 10px; font-weight: 600; color: var(--strong); font-size: 14px; }
.nb-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.nb-comment { font-style: italic; font-size: 14px; margin-top: 4px; }

.nb-upload { border-top: var(--line-w, 1px) solid var(--line-color, var(--faint)); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.nb-upload h3 { margin: 0; font-size: 18px; color: var(--strong); }
.nb-drop { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--muted); border-radius: 10px; color: var(--muted); font-size: 14px; }
.nb-drop input { display: none; }
.nb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.nb-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.nb-fields .nb-wide { grid-column: 1 / -1; }
.nb-fields input, .nb-fields textarea {
  font: 14px var(--font); color: var(--text); background: var(--bg-side); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; resize: vertical;
}
.nb-upload button { align-self: flex-start; font: 600 14px var(--font); color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; }

@media (max-width: 800px) {
  .nb-nav > a { font-size: 15px; }
}

/* pages that use the whole width right of the sidebar (site.config.json → "style": "wide") */
.style-wide .page { max-width: none; }

/* ── The Pillar Radio (assets/pillar.js) ── */
/* the video always fills the whole area right of the sidebar — cropped, never letterboxed, no frame or rounding */
.style-fullbleed .center { padding: 0; }
.style-fullbleed .page { max-width: none; padding: 0; }
.pl-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #000; }
/* .page .pl-video beats the general ".page video { height: auto }" — otherwise the video stops at its natural height
   and leaves black below it */
.page .pl-video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* sits on the pole; pillar.js keeps it there as the crop changes */
/* sits on the pole (pillar.js keeps it there as the crop changes); the same look as the cards' sound button */
.pl-play {
  position: absolute; left: var(--pole-x, 50%); top: var(--pole-y, 90px); translate: -50% -50%;
  width: var(--pl-size, 78px); height: var(--pl-size, 78px); padding: 0; display: grid; place-items: center; cursor: pointer;
  color: #a8a8a8; background: rgba(20,20,20,.5); border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  backdrop-filter: blur(4px); transition: background .15s, color .15s;
}
.pl-play svg { width: 48%; height: 48%; }
.pl-play:hover { color: #d6d6d6; background: rgba(20,20,20,.75); }
.pl-play.on { color: #e2e2e2; border-color: rgba(255,255,255,.4); }
.pl-play.wait svg { animation: pl-wait 1s ease-in-out infinite alternate; }
@keyframes pl-wait { to { opacity: .35; } }
.pl-live { position: absolute; right: 20px; bottom: 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pl-play.on ~ .pl-live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d94c3d; vertical-align: 1px; }
/* title, links and the note sit on the video, bottom-left */
.pl-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 32px 28px; max-width: none; color: #e8e8e8;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, transparent); pointer-events: none; }
.pl-text > * { pointer-events: auto; max-width: 40em; }
.pl-text .pl-title { color: #fff; }
.pl-text .pl-links { color: rgba(255,255,255,.6); }
.pl-text .pl-links a, .pl-text .pl-note a { color: #b9d99f; }
.pl-text .pl-q { color: #ddd; border-color: rgba(255,255,255,.35); }
.pl-text .pl-note { background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.pl-title { margin: 0 0 6px !important; font-size: 1.6em !important; }
.pl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.pl-links a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pl-links a:hover { color: var(--strong); }
.pl-q {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; font: 600 13px var(--font); cursor: pointer;
  color: var(--muted); background: none; border: 1px solid var(--border);
}
.pl-q:hover, .pl-q[aria-expanded="true"] { color: var(--strong); border-color: var(--muted); }
.pl-note { margin-top: 14px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--hover-bg); font-size: 15px; }
.pl-note p { margin: 0 0 .5em; }
.pl-note p:last-child { margin: 0; }
.pl-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 800px) {
  .pl-stage { height: calc(100svh - 53px); }
  .pl-text { padding: 60px 16px 18px; }
}

/* shared sidebar: each site's pages under its name */
.nav-group { display: block; margin: 18px 0 4px 24px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav-group:first-child { margin-top: 0; }
.nav-group:hover, .nav-group.current { color: var(--strong); }
/* (older) switch between the sites of the website */
.site-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: -40px 0 40px 24px; }
.site-switch a { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.site-switch a:hover { color: var(--strong); }
.site-switch a.current { color: var(--accent); border-color: var(--accent); }

/* ── "style": "obsidian" — a page laid out like its Obsidian Publish original (Sanctum theme): Inter 16/24, text in a
   40em column, images, headings, quotes and %% wide %% text across the whole width, "On this page" on the right ── */
:root.theme-light.style-obsidian {
  --bg: rgb(244, 244, 240); --bg-side: rgb(244, 244, 240); --border: rgb(226, 224, 220);
  --text: rgb(22, 22, 22); --strong: rgb(22, 22, 22); --muted: rgb(84, 81, 81); --faint: rgb(169, 168, 165);
  --accent: rgb(102, 153, 97); --meta-bg: rgba(235, 234, 230, .8);
}
:root.style-obsidian { --guide: rgba(128, 128, 128, .2); }
:root.theme-light.style-obsidian { --guide: rgba(0, 0, 0, .12); }
html.style-obsidian { scroll-snap-type: none; }
.style-obsidian ::selection { background: rgba(102, 153, 97, .5); }
.style-obsidian .center { padding: 0; }
.style-obsidian .page {
  max-width: none; padding: 24px 48px 96px; font: 16px/1.5 var(--font); color: var(--text);
}
.style-obsidian .page p { margin: 16px 0; }
/* the text column; %% wide %% text, callouts and quotes are not direct children, so they keep the full width */
.style-obsidian .page > p, .style-obsidian .page > ul, .style-obsidian .page > ol { max-width: 40em; margin-left: auto; margin-right: auto; }
.style-obsidian .page h1, .style-obsidian .page h2, .style-obsidian .page h3,
.style-obsidian .page h4, .style-obsidian .page h5, .style-obsidian .page h6 { font-family: var(--font-head); font-weight: 600; color: var(--text); line-height: 1.5; }
.style-obsidian .page h6 { font-size: 16px; margin: 40px 0 16px; }
.style-obsidian .page h5 { font-size: 18px; margin: 18px 0 4.5px; letter-spacing: -.002em; }
/* the "copy link" icon: always takes its place (so headings are as tall as Obsidian's), visible on hover */
.style-obsidian .hlink {
  display: inline-flex; vertical-align: middle; padding: 8px; margin-left: 0; color: var(--faint); visibility: hidden; text-decoration: none !important; background: none !important;
}
.style-obsidian .hlink svg { width: 18px; height: 18px; }
.style-obsidian .page :is(h1, h2, h3, h4, h5, h6):hover .hlink { visibility: visible; }
.style-obsidian .hlink:hover, .style-obsidian .hlink.copied { color: var(--accent); }
.style-obsidian .page strong { font-weight: 600; }
.style-obsidian .page abbr[title] { text-decoration: underline dotted; cursor: help; }
.style-obsidian .page a, .style-obsidian .page a[href^="http"], .style-obsidian .page a.internal {
  color: var(--accent); text-decoration: underline; text-underline-offset: auto; text-decoration-thickness: auto;
}
.style-obsidian .page a:hover { color: var(--accent); }
/* Obsidian's little arrow after links that leave the site */
.style-obsidian .page a.external-link {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='14' height='14' fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='9.38%25'%3E%3Cpath d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18'/%3E%3C/svg%3E") no-repeat right 0 top .25em / .825em;
  padding-right: .9em;
}
.style-obsidian .page blockquote { margin: 14.4px 0; padding: 0 0 0 32px; border: 0; color: var(--text); font-size: .9em; line-height: 1.5; }
.style-obsidian .page blockquote > :first-child { margin-top: 0; }
.style-obsidian .page blockquote > :last-child { margin-bottom: 0; }
.style-obsidian .page hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.style-obsidian .page .embed { margin: 16px 0; }
.style-obsidian .page .embed img, .style-obsidian .page .embed video[data-gif],
.style-obsidian .page .wide img, .style-obsidian .page .wide video[data-gif] { display: block; margin: 0; border: 0; border-radius: 0; }
.style-obsidian .page .wide { width: 100%; margin: 16px 0; }
.style-obsidian .page video[data-gif] { margin: 0; }
.style-obsidian .page iframe[src*="vimeo"] { display: block; width: 100%; height: auto; border: 0; }
/* the grey box: > [!meta] — monospace, 0.8em, the **keys** green; the same on every page (like the Pillar case study) */
:root { --meta-bg: rgba(255, 255, 255, .06); }
:root.theme-light { --meta-bg: rgba(0, 0, 0, .05); }
.page .callout-meta {
  background: var(--meta-bg); border: 0; border-radius: 0; padding: 10px; margin: 0 0 20px;
  font-family: var(--font-meta); font-size: var(--meta-size, .8em); line-height: 1.5; color: var(--text);
}
/* the box's own font (⚙ panel → Meta, frontmatter "font-meta:", settings → fonts.meta); Courier by default.
 */
:root { --font-meta: "Courier New", Courier, monospace; --meta-size: .8em; }
:root[data-font-meta="inter"] { --font-meta: Inter, -apple-system, "Segoe UI", sans-serif; --meta-size: .8em; }
:root[data-font-meta="dd"] { --font-meta: "DD Grotesk", Inter, -apple-system, "Segoe UI", sans-serif; --meta-size: .8em; }
:root[data-font-meta="times"] { --font-meta: "Times New Roman", Times, serif; --meta-size: .8em; }
:root[data-font-meta="courier"] { --font-meta: "Courier New", Courier, monospace; --meta-size: .8em; }
:root[data-font-meta="mono"] { --font-meta: Consolas, Menlo, "SF Mono", monospace; --meta-size: .8em; }
:root[data-font-meta="inter"] [data-key="fontMeta"] .f-inter,
:root[data-font-meta="dd"] [data-key="fontMeta"] .f-dd,
:root[data-font-meta="times"] [data-key="fontMeta"] .f-times,
:root[data-font-meta="courier"] [data-key="fontMeta"] .f-courier,
:root[data-font-meta="mono"] [data-key="fontMeta"] .f-mono { color: var(--accent); border-color: var(--accent); }
.page .callout-meta p { margin: 0; }
.page .callout-meta p + p { margin-top: 1.5em; }
.page .callout-meta strong { font-weight: 400; color: var(--accent); }
.page .callout-meta a.external-link { background: none; padding-right: 0; }
/* always as wide as the videos and pictures (they reach past the text column on wide screens); on Black Oil, from the
   first card's left edge to the last card's right edge. The Obsidian look (the case study) keeps its own column */
:root:not(.style-obsidian) .page > .callout-meta { max-width: none; width: 100cqw; margin-left: calc((100% - 100cqw) / 2); margin-right: 0; }
:root.text-cards:not(.style-obsidian) .page > .callout-meta { width: calc(100% - 2 * var(--text-left, 0px)); margin-left: var(--text-left, 0px); }
/* switches (⚙ panel; settings → meta): no grey background (the text lines up with the page then), and lines above and below */
/* [!meta]: no background (the text lines up with the page); [!meta2], or ⚙ Meta box on: the grey box */
.page .callout-meta { background: none; padding-left: 0; padding-right: 0; }
.page .callout-meta.callout-meta2, :root[data-meta-bg="on"] .page .callout-meta { background: var(--meta-bg); padding-left: 10px; padding-right: 10px; }
:root[data-meta-lines="on"] .page .callout-meta::before, :root[data-meta-lines="on"] .page .callout-meta::after {
  content: "________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________"; display: block; overflow: hidden; white-space: nowrap; color: var(--muted); line-height: 1.2;
}
:root[data-meta-lines="on"] .page .callout-meta::before { margin: -.6em 0 .8em; }
:root[data-meta-lines="on"] .page .callout-meta::after { margin: .1em 0 0; }
:root[data-meta-bg="on"] .meta-toggle [data-metabg="on"], :root:not([data-meta-bg="on"]) .meta-toggle [data-metabg="off"],
:root[data-meta-lines="on"] .meta-toggle [data-metalines="on"], :root:not([data-meta-lines="on"]) .meta-toggle [data-metalines="off"] { color: var(--accent); border-color: var(--accent); }
.meta-toggle { margin-top: 0; padding-top: 8px; }
.callout-wide { background: none; border: 0; padding: 0; margin: 0; }

/* "On this page" (build.mjs → outline) */
.has-outline .layout { grid-template-columns: var(--side-w) minmax(0, 1fr) 300px; }
.has-outline.side-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr) 300px; }
.right {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none;
  padding: 0 24px 24px; font: 14px/1.3 var(--font); color: var(--text);
}
.right::-webkit-scrollbar { display: none; }
.outline { padding-top: 32px; }
.ol-head { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.ol-view { padding: 12px 0 32px; }
.ol-self { display: block; padding: 5px .7em 5px 0; color: var(--muted); border-radius: 3px; }
.ol-self:hover { color: var(--text); }
.ol-kids { padding-left: 18px; border-left: 1px solid var(--guide); }
@media (max-width: 1000px) {
  .has-outline .layout, .has-outline.side-collapsed .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .has-outline.side-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr); }
  .right { display: none; }
}
@media (max-width: 800px) {
  .style-obsidian .page { padding: 16px 24px 64px; }
}
/* Obsidian's heading gap: 40px above a heading that follows an image or full-width text, 16px after diary text */
.style-obsidian .page h6 { margin-top: 16px; }
.style-obsidian .page > h6:first-child, .style-obsidian .page :is(.embed, .wide-text, .wide, .media-row) + h6 { margin-top: 40px; }
/* images sit in the line like Obsidian's (inline, so the few pixels under them match); GIFs keep their own size */
.style-obsidian .page .embed img, .style-obsidian .page .wide img { display: inline; vertical-align: baseline; }
.style-obsidian .page .embed video[data-gif], .style-obsidian .page .wide video[data-gif] { display: inline-block; vertical-align: baseline; width: auto; max-width: 100%; }
/* the section being read is marked in "On this page" (site.js) */
.ol-self.active { color: var(--accent); font-weight: 600; padding-right: .1em; }

/* Obsidian-style pages: the text column scrolls by itself, so its scrollbar sits left of "On this page" */
@media (min-width: 1001px) {
  .has-outline .layout { height: 100vh; min-height: 0; }
  .has-outline .center { height: 100vh; overflow-y: auto; scrollbar-gutter: stable; }
  .has-outline .center::-webkit-scrollbar { width: 12px; }
  .has-outline .center::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .25); border: 3px solid transparent; border-radius: 20px; background-clip: padding-box; }
  .has-outline .center::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, .4); }
  .has-outline .center::-webkit-scrollbar-track { background: transparent; }
  html.has-outline, html.has-outline body { overflow: hidden; }
}

/* footnotes: [^1] in the text → a small number; the notes are listed where they are written in the note */
.fn-ref { font-size: .75em; line-height: 0; }
.fn-ref a { color: var(--accent); text-decoration: none !important; padding: 0 .1em; }
.footnotes { font-size: .9em; }
.footnotes ol { margin: 16px 0; padding-left: 1.6em; }
.footnotes li { margin: 0 0 4px; }
.footnotes li > p { margin: 0; }
.footnotes li > p + p, .footnotes li > .embed { margin-top: 8px; }
.fn-back { color: var(--accent); text-decoration: none !important; background: none !important; padding: 0 !important; }
.footnotes li:target, .fn-ref a:target { background: rgba(102, 153, 97, .18); }
.style-obsidian .page .footnotes li > p { margin: 0; } .style-obsidian .page .footnotes li > p + p, .style-obsidian .page .footnotes li > .embed { margin: 8px 0 0; }

/* phones: the overlay player takes the whole screen */
@media (max-width: 800px), (pointer: coarse) {
  /* the video fills the screen above a strip with the buttons, so they never cover the picture or its controls */
  .lightbox { background: #000; backdrop-filter: none; display: flex; flex-direction: column; }
  .lightbox video { flex: 1; min-height: 0; width: 100%; height: auto; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
  .lb-bar { position: static; flex: none; justify-content: center; gap: 28px; padding: 14px 0 max(18px, env(safe-area-inset-bottom)); }
}

/* sidebar in three levels: pterodactyl supplies ▸ Black Oil / SeedBank / Pillar Talk ▸ their pages */
/* the top name: tight lines when it wraps */
.site-name.lvl1 { line-height: 1.05; margin-left: var(--sb-i1, 16px); font-size: var(--sb-l1, 24px); font-weight: var(--sb-b1, 700); }
.site-name.lvl2 { font-size: var(--sb-l2, 19px); font-weight: var(--sb-b2, 700); margin-left: var(--sb-i2, 44px); margin-right: 0; margin-bottom: 6px; }
.site-name.lvl2.site-name-next { margin-top: 12px; }
.site-name.lvl2.site-name-solo { margin-bottom: 0; }
.nav-tree { margin-top: 12px; }
.nav-tree .nav-item { padding-left: var(--sb-i3, 64px); font-size: var(--sb-l3, 16px); font-weight: var(--sb-b3, 400); padding-top: var(--sb-gap, 5px); padding-bottom: var(--sb-gap, 5px); }
/* foldable second-level groups (SeedBank, Pillar Talk): the arrow sits right after the name */
.grp { margin-top: var(--sb-sec, 12px); }
.grp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.grp-head .site-name.lvl2 { margin-top: 0; margin-bottom: 0; }
.fold { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.fold::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.grp.folded .fold::before { transform: translateX(-1px) rotate(-45deg); }
.fold:hover { color: var(--strong); background: var(--hover-bg); }
.grp.folded > .nav { display: none; }
/* desktop fullscreen player: no rounding or space around, the video takes the full height (the full width when wide) */
@media (min-width: 801px) and (pointer: fine) {
  .lightbox { background: #000; backdrop-filter: none; }
  .lightbox video { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
}

/* "cssclasses: narrow" in a note's frontmatter (or "narrow": true in site.config.json → pages) — the title, headings and text sit in a 40em column in the middle, like
   the Pillar diary; cards and other media keep the full width */
/* rem, not em: big headings get the same column as the text, so every left edge lines up */
/* "cssclasses: narrow" narrows the text; the title and headings stay full width unless "narrow-headings" is added too
   (cssclasses: [narrow, narrow-headings]) */
.text-narrow .page > :is(p, ul, ol) { max-width: 40rem; margin-left: auto; margin-right: auto; }
.headings-narrow .page > :is(h1, h2, h3, h4, h5, h6):not(.page-title) { max-width: 40rem; margin-left: auto; margin-right: auto; }
/* the page's title stays wide unless "narrow-title" is added too */
.title-narrow .page > .page-title { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* "textToCards": true (site.config.json → pages) — the title and text start at the left edge of the first card
   (site.js measures it); lines of up to about 98 characters, never past the right edge of the page */
.text-cards .page > :is(.page-title, p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) { margin-left: var(--text-left, 0px); max-width: min(98ch, calc(100% - var(--text-left, 0px))); }

/* a [!caption] with no picture/video above it: a text block in the annotations' look (title + text), all of it shown */
.page .cap-block { margin: 0 0 1.5em; font-size: 14px; line-height: 1.4; color: var(--text); }
.page .cap-block .cap-t { display: block; font-weight: 600; color: var(--strong); }
.page .cap-block .cap-x { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.text-cards .page > .cap-block { margin-left: var(--text-left, 0px); max-width: min(98ch, calc(100% - var(--text-left, 0px))); }

/* sidebar closed (desktop): the credit line sits at the very end of each page, in the bottom-left corner (it scrolls
   with the page — nothing stays on top of the content) */
.center { --center-pad-l: 56px; }
.style-obsidian .center, .style-fullbleed .center { --center-pad-l: 0px; }
@media (min-width: 801px) {
  .side-collapsed .page-credit { display: block; margin: 0 0 0 calc(12px - var(--center-pad-l)); padding: 8px 0 16px; }
  .side-collapsed .page { padding-bottom: 40px; }
}

/* site.config.json → "plain": cards shown as they are — no frame, no rounding (sizes and captions follow, as the
   frame thickness is simply 0 for them) */
.page .media-row > .m.plain { --frame: 0px; --radius: 0px; border-radius: 0; }
/* the same looks on single pictures/videos: ![[pic.webp|plain]] or ![[pic.webp|square]] in a note */
.page :is(img, video)[data-look~="plain"] { border: 0 !important; border-radius: 0 !important; }
.page :is(img, video)[data-look~="square"] { border-radius: 0 !important; }
.page .media-row > .m.plain > video, .page .media-row > .m.plain > img { border-radius: 0; }

/* picture cards: as wide as a video card in the same row (a 9:16 card at the row's height), as tall as their own
   shape makes them */
.page .media-row > .m.pic {
  height: auto !important; aspect-ratio: var(--ar, 0.8);
  /* a frameless (plain) picture also takes the width a video's frame adds, so the outer edges line up */
  width: min(calc(var(--ph) * var(--size, 1) * var(--base) * 0.5625 + 2 * var(--row-frame, 0px) - 2 * var(--frame, 0px)), calc(100cqw - 2 * var(--frame, 0px))) !important;
}
.page .media-row { --row-frame: var(--frame, 0px); }

/* no space between the cells (both gaps 0): neighbouring frames overlap exactly, like merged table borders, so a line
   between two cells is one frame thick — the same as the outer edge — instead of two frames side by side */
.no-gap .nb-grid { padding: 0 var(--frame, 0px) var(--frame, 0px) 0; }
.no-gap .nb-cell { margin: 0 calc(-1 * var(--frame, 0px)) calc(-1 * var(--frame, 0px)) 0; }

/* the note's dates under the title (build.mjs noteDates; "cssclasses: hide-frontmatter" hides them) */
.note-dates { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: -.2em 0 2em; font-size: 12px; color: var(--muted); }
.note-dates .nd-k { opacity: .7; margin-right: 4px; }
.title-narrow .page > .note-dates { max-width: 40rem; margin-left: auto; margin-right: auto; }
.text-cards .page > .note-dates { margin-left: var(--text-left, 0px); }
.style-obsidian .page > .note-dates { margin-top: 0; }

/* ── moving between pages (browsers with cross-page view transitions: Chrome, Edge, Safari 18.2+) ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (min-width: 801px) {
  .left { view-transition-name: sidebar; }
  ::view-transition-group(sidebar) { animation-duration: .35s; }
  ::view-transition-old(sidebar):only-child { animation: .35s ease both sb-slide-out; }
  ::view-transition-new(sidebar):only-child { animation: .35s ease both sb-slide-in; }
}
@keyframes sb-slide-out { to { translate: -100% 0; } }
@keyframes sb-slide-in { from { translate: -100% 0; } }
/* dark ↔ light on the same page: the whole page cross-fades (site.js) */
::view-transition-old(theme), ::view-transition-new(theme) { animation-duration: .4s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

:root.theme-light.style-obsidian { --meta-bg: rgba(235, 234, 230, .8); }

/* sections inside sections (sidebar) and a page's status */
.grp-sub { margin: 2px 0 4px; }
.grp-sub > .grp-head { margin-bottom: 2px; }
.grp-sub > .grp-head .nav-sub { padding-left: var(--sb-i3, 64px); font-size: var(--sb-l4, 16px); font-weight: 600; color: var(--strong); }
.grp-sub > .nav .nav-item { padding-left: calc(var(--sb-i3, 64px) + 16px); }
.nav-status { font-size: .72em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 .55em; margin-left: .35em; white-space: nowrap; vertical-align: 1px; }

/* the front page (cfg.frontPage) */
.fp-intro { font-size: 26px; line-height: 1.3; max-width: 34em; margin: 0 0 56px; color: var(--strong); }
.fp-intro p { margin: 0 0 .6em; }
.fp-h { font-size: 15px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; margin: 0 0 18px !important; }
.fp-sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .6em; }
.fp-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; margin: 0 0 64px; }
.fp-card { display: block; color: var(--strong); text-decoration: none; }
.fp-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #000; margin-bottom: 10px; }
.fp-media :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; margin: 0; max-width: none; }
.fp-card:hover .fp-media { outline: 2px solid var(--accent); outline-offset: 3px; }
.fp-t { display: block; font: 700 19px/1.2 var(--font-head); }
.fp-y { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.fp-garden { list-style: none; padding: 0; margin: 0 0 56px; max-width: 40em; }
.fp-garden li { display: flex; align-items: baseline; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.fp-garden li a { color: var(--strong); text-decoration: none; font-weight: 600; }
.fp-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.fp-about a { font: 700 19px var(--font-head); color: var(--accent); text-decoration: none; }

/* the page's title starts level with "Pterodactyl Supplies" in the sidebar */
@media (min-width: 801px) {
  .page:has(> .page-title:first-child) { padding-top: 36px; }
  .page > .page-title:first-child { margin-top: 0; }
}
/* |circle on a picture or video: cut to a circle (cards too) */
.page :is(img, video)[data-look~="circle"] { aspect-ratio: 1; object-fit: cover; border-radius: min(var(--radius, 9999px), 50%) !important; }
.page .media-row > .m.circle { --ar: 1 !important; border-radius: min(var(--radius, 9999px), 50%); }
.page .media-row > .m.circle > :is(video, img) { width: 100%; height: 100%; object-fit: cover; border-radius: min(var(--radius, 9999px), 50%); }
.fp-intro-note { font-size: inherit; line-height: inherit; max-width: none; color: var(--text); }

/* a card with its own size (![[clip.mp4|circle 300]]): that wide, its height from its shape */
.page .media-row > .m.sized { width: min(var(--w), calc(100% - 2 * var(--frame, 0px))) !important; height: auto !important; }
.page .media-row > .m.sized > :is(video, img) { width: 100%; height: 100%; object-fit: cover; }
/* meta lines as three typed underscores (⚙ → Meta lines → ___) */
:root[data-meta-lines="short"] .page .callout-meta::before, :root[data-meta-lines="short"] .page .callout-meta::after {
  content: "___"; display: block; color: var(--muted); line-height: 1.2;
}
:root[data-meta-lines="short"] .page .callout-meta::before { margin: -.6em 0 .8em; }
:root[data-meta-lines="short"] .page .callout-meta::after { margin: .1em 0 0; }
:root[data-meta-lines="short"] .meta-toggle [data-metalines="short"] { color: var(--accent); border-color: var(--accent); }

.page .media-row > .m.bare > :is(video, img) { cursor: default; }

/* the page's date after its name in the sidebar (settings → "sidebarDates") */
.nav-date { font: 400 12px var(--font); color: var(--muted); margin-left: .45em; white-space: nowrap; letter-spacing: 0; }
.site-name .nav-date { font-size: 12px; }

/* index page ("index: true"): every page as a card, by section */
.ix-h { font-size: 22px !important; margin: 48px 0 16px !important; }
.ix-h:first-child { margin-top: 8px !important; }
.ix-h a { color: var(--strong); text-decoration: none; }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 16px; }
.ix-loose { margin-top: 48px; }
.ix-card { display: block; color: var(--strong); text-decoration: none; }
/* the cards look like the page's cards: its frame and roundness (⚙ / settings → cards), unless "media:" says otherwise */
.ix-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px); background: #000; margin-bottom: 8px; }
.ix-circle .ix-media { aspect-ratio: 1; border-radius: 50%; }
.ix-plain .ix-media { border: 0; border-radius: 0; }
.ix-square .ix-media { border-radius: 0; }
.ix-media :is(img, video) { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; border-radius: 0 !important; margin: 0 !important; border: 0 !important; }
.ix-card:hover .ix-media { outline: 2px solid var(--accent); outline-offset: 3px; }
.ix-t { display: block; font: 700 16px/1.25 var(--font-head); }
.ix-d { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* pictures and videos that aren't cards (in the text, GIFs, single pictures): framed and rounded like the cards, by
   default; "|plain" / "media: plain" etc. change it, and so do pages whose cards have no frame (SeedBank, The Pillar) */
.page :is(img, video):not([data-look]):not(:is(.media-row, .ix-media, .fp-media, .pillar, #pillar-app, #numbers-app, .nb-grid, .lightbox, .callout-meta, .nb-wordmark) *) {
  border: var(--frame, 0px) solid var(--frame-color, #000); border-radius: var(--radius, 0px);
}

/* sidebar hover preview (site.js) — round, framed like the cards */
.nav-peek { display: none; }
.nav-peek-box { position: fixed; z-index: 50; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; pointer-events: none;
  border: var(--frame, 0px) solid var(--frame-color, #000); background: #000; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.nav-peek-box :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; border: 0 !important; border-radius: 0 !important; margin: 0 !important; max-width: none; }
/* a caption's link (the index): looks like the caption, underlined on hover */
.cap-t a.cap-link { color: inherit; text-decoration: none; }
.cap-t a.cap-link:hover { text-decoration: underline; }

/* circle cards are as wide as a portrait card (not as tall), so 2–3 share a row like on Black Oil */
.page .media-row > .m.circle:not(.sized) {
  --circle: min(calc(var(--ph) * var(--size, 1) * var(--base) * 0.5625), calc(100cqw - 2 * var(--frame, 0px)));
  width: var(--circle) !important; height: calc(var(--circle) / var(--circle-ar, 1)) !important; aspect-ratio: auto;
}

/* circle pages (the Index): the text column's width from the ⚙ panel, centred */
:is(.media-circle, [data-card-shape]) .page > :is(p, ul, ol, h1, h2, h3, h4, h5, h6, .page-title, .note-dates) { max-width: var(--text-w, none); margin-left: auto; margin-right: auto; }
:is(.media-circle, [data-card-shape]).text-narrow .page > :is(p, ul, ol) { max-width: var(--text-w, 40rem); }
:is(.media-circle, [data-card-shape]).headings-narrow .page > :is(h1, h2, h3, h4, h5, h6):not(.page-title) { max-width: var(--text-w, 40rem); }
:is(.media-circle, [data-card-shape]).title-narrow .page > :is(.page-title, .note-dates) { max-width: var(--text-w, 40rem); }

/* "sidebar: none": the page has no sidebar and no « » button (on phones, no menu button) */
.no-sidebar .left, .no-sidebar .side-toggle { display: none !important; }
.no-sidebar .layout { display: block; }
.no-sidebar .mobile-bar .menu-btn { display: none; }

/* the white theme: the light theme on white (sidebar a touch off-white, so it still reads as a column) */
:root.theme-light.theme-white { --bg: #ffffff; --bg-side: #f7f7f5; --border: #e4e2dd; --code-bg: #efede8; --meta-bg: rgba(0, 0, 0, .04); }

/* circle pages with their text at the cards' edge: Text width still narrows it, from that edge */
:is(.media-circle, [data-card-shape]).text-cards .page > :is(p, ul, ol, h1, h2, h3, h4, h5, h6, .page-title, .note-dates) {
  margin-left: var(--text-left, 0px); margin-right: 0; max-width: min(var(--text-w, 98ch), calc(100% - var(--text-left, 0px)));
}

/* "card-shape:" in a note — every card of the page in one shape, whatever the video's own: vertical (9:16), horizontal
   (16:9), square, circle. --cw: a portrait card's width at this size (the shapes keep Black Oil's 2–3 a row) */
:root[data-card-shape] .page .media-row > .m:not(.sized) {
  --cw: min(calc(var(--ph) * var(--size, 1) * var(--base) * 0.5625), calc(100cqw - 2 * var(--frame, 0px)));
  --ar: var(--shape-ar) !important; aspect-ratio: auto;
  width: calc(var(--cw) * var(--shape-wide, 1)) !important; height: calc(var(--cw) * var(--shape-wide, 1) / var(--shape-ar)) !important;
}
:root[data-card-shape] .page .media-row > .m > :is(video, img) { width: 100%; height: 100%; object-fit: cover; }
:root[data-card-shape="vertical"] { --shape-ar: 0.5625; }
:root[data-card-shape="horizontal"] { --shape-ar: 1.7778; --shape-wide: 1.7778; }
:root[data-card-shape="square"], :root[data-card-shape="circle"] { --shape-ar: 1; }
:root[data-card-shape="circle"] .page .media-row > .m, :root[data-card-shape="circle"] .page .media-row > .m > :is(video, img) { border-radius: 50% !important; }

.shape-toggle { flex-wrap: wrap; padding-top: 8px; }
.shape-toggle button.on { color: var(--accent); border-color: var(--accent); }

/* "mobileColumns": 2 — on phones, two cards to a row (each half the row, its height from its shape) */
@media (max-width: 800px) {
  :root.m-cols-2 .page .media-row > .m:not(.sized) {
    --cw: calc((100cqw - var(--gap-x, 10px)) / 2 - 2 * var(--frame, 0px) - 1px);
    width: var(--cw) !important; height: calc(var(--cw) / var(--shape-ar, var(--ar, 0.5625))) !important; max-width: none;
  }
  :root.m-cols-2 .page .media-row > .m:not(.sized) > :is(video, img) { width: 100%; height: 100%; object-fit: cover; }
}

/* "cardMax" (settings → pages): cards never wider than that — their height follows their shape */
:root[style*="--card-max"] .page .media-row > .m { --cm: calc(var(--card-max) - 2 * var(--frame, 0px)); max-width: min(var(--cm), calc(100% - 2 * var(--frame, 0px))); max-height: calc(var(--cm) / var(--ar, 0.5625)); } /* frame included */

/* a quote as an epigraph: the words in italics, the attribution under them on the right, plain */
.page blockquote:has(.q-by) { border-left: 0; padding: 0; margin-top: 0; margin-bottom: 2.2em; color: var(--text); max-width: 48rem !important; }
.page .callout-meta blockquote:has(.q-by) { max-width: none !important; }
.page blockquote:has(.q-by) p:not(.q-by) { font-style: italic; margin: 0 0 .6em; }
.page blockquote .q-by { text-align: right; font-style: normal; color: var(--muted); font-size: .92em; margin: 0; }

/* phones: the note starts right under the top bar */
@media (max-width: 800px) {
  .page { padding-top: 16px; }
  .page > :first-child, .page > .media-row:first-child { margin-top: 0 !important; }
}

/* the random number in the page's top-right corner */
.page { position: relative; }
.center { position: relative; }
.page-number { position: absolute; top: 46px; right: 24px; z-index: 5; font: 400 12px/1.4 var(--font-head); color: var(--muted); text-decoration: none; }
a.page-number:hover { color: var(--accent); }
a.page-number:hover { color: var(--accent); }
.style-fullbleed .page-number { top: 24px; right: 24px; z-index: 5; color: rgba(255,255,255,.7); }
@media (max-width: 800px) { .page-number { top: 16px; right: 16px; } }

/* a quote and the facts box next to it: two columns on wide screens, one on phones */
.page > .intro-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; margin: 0 0 2.2em; }
.page > .intro-cols > blockquote { max-width: none !important; margin: 0 !important; }
.page > .intro-cols > .callout-meta { margin: 0; width: auto; max-width: none; }
.text-cards .page > .intro-cols { margin-left: var(--text-left, 0px); width: calc(100% - 2 * var(--text-left, 0px)); max-width: none; }
@media (max-width: 800px) { .page > .intro-cols { grid-template-columns: minmax(0, 1fr); gap: 1.6em; } }

/* a [!meta] box that holds a quote (> > …): the quote in the left column, the facts in the right (one column on phones) */
.page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
.page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :is(blockquote, .callout-quotes) { grid-column: 1; grid-row: 1 / span 30; margin: 0 !important; max-width: none !important; }
.page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :not(blockquote, .callout-quotes) { grid-column: 2; }
.page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) > p + p { margin-top: 0; }
@media (max-width: 800px) {
  .page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) { grid-template-columns: minmax(0, 1fr); }
  .page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) > * { grid-column: 1 !important; grid-row: auto !important; }
  .page .callout-meta3 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :is(blockquote, .callout-quotes) { margin-bottom: 1.2em !important; }
}

/* the number sits in the corner without pushing the title down */
@media (min-width: 801px) {
  .page:has(> .page-number:first-child + .page-title) { padding-top: 36px; }
  .page > .page-number:first-child + .page-title { margin-top: 0; }
}
@media (max-width: 800px) {
  .page > .page-number:first-child + * { margin-top: 0 !important; }
}

/* phones: a long facts box folded to a few lines (site.js) */
@media (max-width: 800px) {
  .page .callout-meta.folded > .callout-content { max-height: var(--fold-h, 3em); overflow: hidden; } /* two whole lines */
  .meta-more { font: inherit; font-size: inherit; color: color-mix(in srgb, var(--muted) 70%, transparent); background: none; border: 0; padding: 4px 0 0; cursor: pointer; }
}
/* phones: less air between the title, the facts box and the first cards */
@media (max-width: 800px) {
  .page > .page-title { margin-bottom: .45em; }
  .page > .callout-meta { margin-bottom: 8px; }
  .page .media-row { margin-top: 1.4em; }
}

/* > [!quotes] — quotes in the box's typewriter font, at most 80 characters a line; a line starting with "— " is the
   attribution, under the quote on the right */
.page .callout-quotes { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 2em; max-width: none; font-family: var(--font-meta); font-size: var(--meta-size, .8em); line-height: 1.5; color: var(--text); }
.page .callout-quotes > .callout-content > * { max-width: 80ch; }
.page .callout-quotes p { margin: 0 0 .8em; font-style: italic; }
.page .callout-quotes p.q-by { font-style: normal; text-align: right; color: var(--muted); margin: 0 0 1.6em; }
.text-cards .page > .callout-quotes { margin-left: var(--text-left, 0px); }

/* [!quotes] inside a facts box: the box's size (not smaller again) */
.page .callout-meta .callout-quotes { font-size: 1em; margin: .8em 0 0; }
.page .callout-meta .callout-quotes p.q-by { margin-bottom: 0; }

/* the accent colour picked in the ⚙ panel (site.js sets --accent-pick on <html>) */
:root[style*="--accent-pick"], :root[style*="--accent-pick"].theme-light, :root[style*="--accent-pick"].style-obsidian { --accent: var(--accent-pick) !important; }
.accent-row { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 12px; color: var(--muted); }
.accent-row button { font: inherit; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; cursor: pointer; }

/* a quote's credit ends where the quote's text ends (the block is only as wide as its lines) */
.page .callout-quotes > .callout-content { width: fit-content; max-width: 80ch; }
.page .callout-quotes > .callout-content > * { max-width: none; }
.page blockquote:has(.q-by) { width: fit-content; }

/* "cssclasses: medium": the text in a wider middle column than "narrow" (40rem = 640px): 56rem = 896px;
   "medium-headings" does the same for the headings */
.text-medium .page > :is(p, ul, ol) { max-width: 56rem; margin-left: auto; margin-right: auto; }
.headings-medium .page > :is(h1, h2, h3, h4, h5, h6):not(.page-title) { max-width: 56rem; margin-left: auto; margin-right: auto; }
:is(.media-circle, [data-card-shape]).text-medium .page > :is(p, ul, ol) { max-width: var(--text-w, 56rem); }
:is(.media-circle, [data-card-shape]).headings-medium .page > :is(h1, h2, h3, h4, h5, h6):not(.page-title) { max-width: var(--text-w, 56rem); }

/* "cssclasses: wide": the text in an 80rem (1280px) middle column; "wide-headings" for the headings */
.text-wide .page > :is(p, ul, ol) { max-width: 80rem; margin-left: auto; margin-right: auto; }
.headings-wide .page > :is(h1, h2, h3, h4, h5, h6):not(.page-title) { max-width: 80rem; margin-left: auto; margin-right: auto; }
:is(.media-circle, [data-card-shape]).text-wide .page > :is(p, ul, ol) { max-width: var(--text-w, 80rem); }

/* no theme switch on the website (each page has its theme) */
.left .theme-toggle { display: none; }

/* sidebar folded: the website's name and the page's name at the top left, next to ☰ (like the page number) */
.crumb { display: none; }
@media (min-width: 801px) {
  .side-collapsed .crumb { display: block; position: absolute; top: 46px; left: 52px; z-index: 5; font: 400 12px/1.4 var(--font-head); color: var(--muted); }
  .no-sidebar .crumb { left: 24px; }
  .crumb a { color: var(--muted); text-decoration: none; }
  .crumb a:hover { color: var(--accent); }
  .crumb span { margin: 0 .3em; opacity: .6; }
}

/* the dot background: one tile drawn by site.js (--dot-tile), repeated over the whole page */
:where(:root[data-dot-pattern]:not([data-dot-pattern="none"])) body { position: relative; overflow-x: clip; }
:where(:root[data-dot-pattern]:not([data-dot-pattern="none"])) body::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--dot-opacity, .35);
  background-image: var(--dot-tile); background-size: var(--dot-tw) var(--dot-th); background-repeat: repeat;
}
:where(:root.dots-fixed[data-dot-pattern]:not([data-dot-pattern="none"])) body::after { position: fixed; }
:where(:root[data-dot-pattern]:not([data-dot-pattern="none"])) .layout { position: relative; z-index: 1; }
.dot-toggle { flex-wrap: wrap; padding-top: 8px; }
.dot-toggle button.on { color: var(--accent); border-color: var(--accent); }
/* sidebar folded: the names (left) and the number (right) on their own line, the page starts under them */
@media (min-width: 801px) {
  .side-collapsed .crumb { top: 50px; }
  .side-collapsed .page-number { top: 50px; }
  .side-collapsed .page, .side-collapsed .page:has(> .page-title:first-child) { padding-top: 92px; }
  .side-collapsed.style-fullbleed .page { padding-top: 0; }
}

/* the word "pun": a pun of the day when pointed at */
.pun { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* ── type: the sidebar's every level and every heading in the notes in the header font ── */
.left :is(.site-name, .nav-item, .nav-sub, .crumb), .page :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-head); }
/* the credit line: like the page number — header font, 12px, regular, grey */
.credit, .credit a, .page-credit { font: 400 12px/1.5 var(--font-head) !important; color: var(--muted); }
.credit a { color: var(--muted) !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.credit a:hover { color: var(--accent) !important; }

/* ── the top line while the sidebar is folded (☰ · the path · the page number): it stays at the top of the screen,
   slides away while scrolling down and comes back on scrolling up (site.js: .bar-hidden) ── */
.topbar { display: none; }
@media (min-width: 801px) {
  .side-collapsed .topbar { display: block; position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 30; background: var(--bg); }
  .side-collapsed .crumb { position: fixed; z-index: 41; }
  .side-collapsed .page-number { position: fixed; z-index: 41; right: 40px; }
  .side-collapsed :is(.topbar, .crumb, .page-number, .side-toggle) { transition: translate .25s ease; }
  .side-collapsed.bar-hidden :is(.topbar, .crumb, .page-number, .side-toggle) { translate: 0 -100px; }
  .style-fullbleed.side-collapsed .topbar { background: transparent; }
}
/* phones: the top bar does the same */
@media (max-width: 800px) {
  .mobile-bar { transition: translate .25s ease; }
}

/* ── back to the top: appears after two screens of scrolling, above the ⚙ button ── */
.to-top { position: fixed; right: 16px; bottom: 64px; z-index: 50; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: var(--bg-side); border: 1px solid var(--border); color: var(--muted); font: 400 18px/1 var(--font-head); cursor: pointer;
  display: grid; place-items: center; transition: opacity .2s; }
.to-top:hover { color: var(--strong); border-color: var(--muted); }
.to-top[hidden] { display: none; }

/* the sidebar's own font (⚙ → Sidebar → Font), else the header font */
.left :is(.site-name, .nav-item, .nav-sub) { font-family: var(--sb-font, var(--font-head)); }
.sb-toggle, [data-sbfont] { flex-wrap: wrap; padding-top: 8px; }
:is(.sb-toggle, [data-sbfont]) button.on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 1200px) { :root:not([style*="--side-w"]) { --side-w: 260px; } }

/* the path: the page you're on, in the accent colour, not a link */
.crumb .crumb-here { color: var(--accent); }

/* the top strip fades out at its bottom edge, so the page doesn't show cut-off lines under it */
@media (min-width: 801px) {
  .side-collapsed .topbar { height: 84px; background: var(--bg); border-bottom: 1px solid var(--border); }
}

/* every link in the accent colour; the credit line in the facts box's typewriter look, its links grey */
.page a:not(.m a):not(.fp-card):not(.ix-card), .page a.cap-link, .backlinks a { color: var(--accent); }
.credit, .credit a, .page-credit { font: 400 12px/1.5 var(--font-meta) !important; }
.credit a, .credit a:visited { color: var(--muted) !important; }

/* "Linked from" at the end of a page */
.backlinks { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 56px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font: 400 13px/1.5 var(--font-head); }
.backlinks .bl-h { color: var(--muted); margin-right: 4px; }
.backlinks a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-cards .page > .backlinks { margin-left: var(--text-left, 0px); }

/* the preview card next to a link */
.link-peek { position: fixed; z-index: 60; width: 280px; background: var(--bg-side); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); pointer-events: none; }
.link-peek :is(img, video) { display: block; width: 100%; height: 150px; object-fit: cover; }
.link-peek .lp-t { font: 700 15px/1.3 var(--font-head); color: var(--strong); padding: 10px 12px 2px; }
.link-peek .lp-x { font: 400 13px/1.45 var(--font); color: var(--muted); padding: 0 12px 12px; }
.link-peek .lp-x:empty { display: none; }

/* the Numbers title stays the title colour */
#numbers-app .nb-wordmark, #numbers-app .nb-wordmark:hover { color: var(--strong) !important; }

/* "linked from:" — the facts box's look (typewriter, green key), across the page like it, no line */
.backlinks { display: block; border-top: 0; padding: 0; margin: 48px 0 0; font: 400 var(--meta-size, .8em)/1.5 var(--font-meta); color: var(--text); gap: 0; }
.backlinks strong { font-weight: 400; color: var(--accent); }
.backlinks a { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.backlinks a:hover { color: var(--accent) !important; }
:root:not(.style-obsidian) .page > .backlinks { max-width: none; width: 100cqw; margin-left: calc((100% - 100cqw) / 2); }
:root.text-cards:not(.style-obsidian) .page > .backlinks { width: calc(100% - 2 * var(--text-left, 0px)); margin-left: var(--text-left, 0px); }

/* quotes: the facts box's size and font, and placed exactly where a facts box would be (full width, or at the
   cards' edge) — the lines themselves stay at most 80 characters */
.page blockquote:has(.q-by) { font: italic 400 var(--meta-size, .8em)/1.5 var(--font-meta); }
.page blockquote:has(.q-by) p { font-style: italic; }
:root:not(.style-obsidian) .page > :is(.callout-quotes, blockquote:has(.q-by)) { width: 100cqw !important; max-width: none !important; margin-left: calc((100% - 100cqw) / 2) !important; }
:root.text-cards:not(.style-obsidian) .page > :is(.callout-quotes, blockquote:has(.q-by)) { width: calc(100% - 2 * var(--text-left, 0px)) !important; margin-left: var(--text-left, 0px) !important; }
.page > blockquote:has(.q-by) > * { max-width: 80ch; }
.page > blockquote:has(.q-by) { padding-right: 0; }

/* small text: one size for the meta boxes, quotes, captions' text ("Small text" slider in ⚙) */
:root[style*="--small"] { --meta-size: var(--small) !important; }
:root[style*="--small"] :is(.cap-x, .page .cap-block .cap-x) { font-size: var(--small) !important; }

/* "linked from:" exactly like the credit line: typewriter, 12px, links green */
.backlinks, .backlinks a { font: 400 12px/1.5 var(--font-meta) !important; }
.backlinks a, .backlinks a:visited { color: var(--accent) !important; }
.backlinks a:hover { color: var(--strong) !important; }

/* the credit at a page's end starts where "linked from" and the media start */
@media (min-width: 801px) { .side-collapsed .page-credit { margin-left: 0; padding: 8px 0 16px; } }
@media (max-width: 800px) { .page-credit { margin-left: 0; } }

/* the top line: just the words, no strip and no line */
@media (min-width: 801px) { .side-collapsed .topbar { background: none !important; border: 0 !important; } }

/* folded quotes on phones */
@media (max-width: 800px) {
  .page .callout-quotes.folded > .callout-content, .page blockquote.folded { max-height: var(--fold-h, 4.5em); overflow: hidden; }
}

/* the type scale, in one place: the notes' headings and the sidebar levels use the same sizes */
:root { --title: 33.6px; --h1: 32px; --h2: 25.6px; --h3: 21.9px; --h4: 20px; --h5: 20px; --h6: 17.6px; --text: 16px; --small: 13px; }
:root { --sb-l1: var(--h2); --sb-l2: var(--h4); --sb-l3: var(--text); --sb-l4: var(--text); }
.page h1 { font-size: var(--h1); } .page h2 { font-size: var(--h2); } .page h3 { font-size: var(--h3); }
.page h4 { font-size: var(--h4); } .page h5 { font-size: var(--h5); } .page h6 { font-size: var(--h6); }
.page-title { font-size: var(--title); }
/* each sidebar level's own font (⚙ → Sidebar), else the sidebar's, else the header font */
.left .site-name.lvl1 { font-family: var(--sb-f1, var(--sb-font, var(--font-head))); }
.left .site-name.lvl2 { font-family: var(--sb-f2, var(--sb-font, var(--font-head))); }
.left .nav-tree .nav-item { font-family: var(--sb-f3, var(--sb-font, var(--font-head))); }
.left .nav-sub { font-family: var(--sb-f4, var(--sb-font, var(--font-head))) !important; }

/* ── the type scale, seven steps (the whole website uses only these) ──
   title 33.6 · h1 32 · h2 25.6 · h3 20 · text 16 · small 13 · tiny 12
   notes: # = h1, ## = h2, ### and #### = h3, ##### and ###### = text (bold) */
:root { --title: 33.6px; --h1: 32px; --h2: 25.6px; --h3: 20px; --text: 16px; --small: 13px; --tiny: 12px;
  --h4: var(--h3); --h5: var(--text); --h6: var(--text); --meta-size: var(--small); }
:root[data-font-meta] { --meta-size: var(--small); }
.style-obsidian .page h5 { font-size: var(--h3); }
.style-obsidian .page h6 { font-size: var(--text); }
.ix-h { font-size: var(--h3) !important; }
.cap-t, .page .cap-block .cap-t { font-size: var(--text); }
.cap-x, .page .cap-block .cap-x { font-size: var(--small); }
.site-name.lvl2 { font-size: var(--sb-l2, var(--h3)); }

/* less air at a page's end: the last block, "linked from:" and the credit sit closer */
.page { padding-bottom: 40px; }
.page > .backlinks { margin-top: 28px; }
@media (min-width: 801px) { .side-collapsed .page { padding-bottom: 24px; } .side-collapsed .page-credit { padding-top: 0; } }
/* intro after the first row: a little space above it */
.intro-after .page > .media-row:first-of-type + * { margin-top: 1.4em; }

/* the graph page */
.graph { position: relative; width: 100cqw; margin-left: calc((100% - 100cqw) / 2); height: calc(100svh - 180px); min-height: 420px; }
.graph canvas { display: block; touch-action: none; cursor: grab; }

/* a single page next to sub-folders in a section: the same size and font as them */
.left .nav-tree .nav-item.nav-peer { font-size: var(--sb-l4, var(--text)); font-family: var(--sb-f4, var(--sb-font, var(--font-head))); }

/* every link is underlined (not the cards, not the Numbers title) */
.page a:not(.fp-card):not(.ix-card):not(.nb-wordmark):not(:has(img, video)), .credit a, .backlinks a, .page a.cap-link, .cap-t a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* the type label after a name in the sidebar */
/* the type, raised like a footnote number */
.nav-type { font: 400 10px/1 var(--font-meta); color: var(--muted); margin-left: .25em; white-space: nowrap; letter-spacing: 0; vertical-align: super; }
/* the quote in a two-column facts box: its own size, no extra space */
.page .callout-meta3 .callout-quotes { margin: 0; }

/* single pages next to sub-folders: the same weight and colour as the folder names */
.left .nav-tree .nav-item.nav-peer { font-weight: 600; color: var(--strong); }
.left .nav-tree .nav-item.nav-peer.active { color: var(--accent); }

/* [!meta4]: three lines, then "… more" (like the captions) */
.page .callout-meta4 > .callout-content { position: relative; max-height: 4.5em; overflow: hidden; }
.page .callout-meta4 > .callout-content.open { max-height: none; overflow: visible; }
.page .callout-meta4 .meta4-more { position: absolute; font: inherit; line-height: inherit; color: color-mix(in srgb, var(--muted) 55%, transparent); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.page .callout-meta4 .meta4-more:hover { color: var(--strong); }
.page .callout-meta4 > .callout-content.open .meta4-more { position: static; display: inline; margin-left: .35em; }

.page .callout-meta4 .callout-quotes { margin: 0 0 .4em; }
.page .callout-meta4 .callout-quotes p { margin: 0; }

.page .callout-meta4 .meta4-more.below { position: static; display: block; margin-top: 2px; }

/* [!meta4]: at most 80em wide; "… more" in the box's own text size, on the line */
.page .callout-meta4 > .callout-content { max-width: 80em; }
.page .callout-meta4 .meta4-more { font-size: 1em; vertical-align: baseline; display: inline-flex; align-items: baseline; }

/* [!meta5] / "> [!meta]-": closed until its line is clicked */
.page details.callout-closed > summary { list-style: none; cursor: pointer; color: var(--accent); width: fit-content; }
.page details.callout-closed > summary::-webkit-details-marker { display: none; }
.page details.callout-closed > summary::after { content: " +"; color: var(--muted); }
.page details.callout-closed[open] > summary::after { content: " -"; }
.page details.callout-closed > summary:hover { color: var(--strong); }
.page details.callout-closed[open] > .callout-content { margin-top: .4em; }

/* [!meta6]: two columns pushed to the sides — the facts on the left, the quote on the right, aligned right */
.page .callout-meta6 > .callout-content:has(> :is(blockquote, .callout-quotes)) { grid-template-columns: auto minmax(0, 1fr); }
.page .callout-meta6 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :is(blockquote, .callout-quotes) { grid-column: 2 !important; justify-self: end; text-align: right; max-width: 80ch; }
.page .callout-meta6 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :not(blockquote, .callout-quotes) { grid-column: 1 !important; }
.page .callout-meta6 .callout-quotes > .callout-content { margin-left: auto; }
.page .callout-meta6 .q-by { text-align: right; }
@media (max-width: 800px) { .page .callout-meta6 > .callout-content:has(> :is(blockquote, .callout-quotes)) > :is(blockquote, .callout-quotes) { justify-self: start; text-align: left; } }

/* [!quotes2]: beside the title, aligned right (on phones under it) */
.page > .title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; margin: 0 0 .6em; }
.page > .title-row > .page-title { margin: 0; flex: 0 1 auto; }
.page > .title-row > .callout-quotes2 { flex: 0 1 auto; margin: .35em 0 0 auto !important; width: auto !important; max-width: min(80ch, 55%) !important; text-align: right; }
.page > .title-row > .callout-quotes2 > .callout-content { margin-left: auto; }
.text-cards .page > .title-row { margin-left: var(--text-left, 0px); margin-right: var(--text-left, 0px); }
.text-cards .page > .title-row > .page-title { margin-left: 0 !important; }
@media (max-width: 800px) {
  .page > .title-row { flex-direction: column; }
  .page > .title-row > .callout-quotes2 { max-width: none !important; text-align: left; margin: 0 !important; }
}

/* the Index's ⚙ "First video its own size": the page's first card at --first-size instead of --size */
:root.first-own .page .media-row > .m.first-card { --size: var(--first-size, 1); }
/* …and "First video a circle": as big as fits (the row's width, at most the screen's height less some air), alone on
   its row (the side margins fill the rest of the line) */
html:root.first-circle .page .media-row > .m.first-card {
  --d: min(calc(100cqw - 2 * var(--frame, 0px)), calc(100svh - 96px - 2 * var(--frame, 0px)));
  width: var(--d) !important; height: var(--d) !important; aspect-ratio: 1; border-radius: 50% !important;
  margin-inline: calc((100% - var(--d)) / 2 - var(--frame, 0px));
}
:root.first-circle .page .media-row > .m.first-card > :is(video, img) { border-radius: 50% !important; }
/* the Index starts with its cards: no extra space above them (the page's own top space is enough) */
:root.ix-look .page > .media-row:first-child { margin-top: 0; }

/* no ⚙ button on the page: ↑ takes its place in the corner */
:root:not(:has(.tuner-btn)) .to-top { bottom: 16px; }
/* quotes: at least as wide as two cards (lines up to 56rem, or 80 characters when that is wider) */
.page .callout-quotes > .callout-content, .page > blockquote:has(.q-by) > * { max-width: max(80ch, 56rem) !important; }
.page .callout-quotes > .callout-content { width: auto; }

/* "first-wide: true": on phones the first card is full width (like Black Oil), the others two to a row */
@media (max-width: 800px) {
  :root.m-cols-2.m-first-wide .page .media-row > .m:first-child:not(.sized) {
    --cw: calc(100cqw - 2 * var(--frame, 0px) - 1px);
    width: var(--cw) !important; height: calc(var(--cw) / var(--shape-ar, var(--ar, 0.5625))) !important;
  }
}


/* ── Numbers, "Give or Take 100" design (html.nb-v2): pure black and white, square frames, one accent; the ⚙ Numbers
   section sets --nbv-frame / --nbv-rule (lines), --nbv-weight (bold titles), --nbv-title (title size), --nbv-font ── */
:root.nb-v2 { --nbv-frame: 2px; --nbv-rule: 2px; --nbv-weight: 700; --nbv-title: 1; --nbv-font: "DD Grotesk", "Helvetica Neue", Arial, sans-serif; }
:root.nb-v2 #numbers-app { font-family: var(--nbv-font); color: #000; font-size: 16px; line-height: 1.5; }
:root.nb-v2 #numbers-app :is(.nb-wordmark, .nb-number, .nb-caption, h3) { font-family: var(--nbv-font); }
:root.nb-v2 #numbers-app a { color: #0000ee; }
:root.nb-v2 .nb-mast { gap: 8px; padding: 0 0 12px; margin-bottom: 16px; border-bottom: var(--nbv-rule) solid #000; }
:root.nb-v2 .nb-row1 { align-items: baseline; }
:root.nb-v2 .nb-wordmark { font-size: calc(32px * var(--nbv-title)); font-weight: var(--nbv-weight); color: #000 !important; letter-spacing: 0; line-height: 1.2; text-decoration: none !important; }
:root.nb-v2 .nb-wordmark:hover { background: #eee; }
:root.nb-v2 .nb-donate { font-size: 13px; color: #555; }
:root.nb-v2 .nb-progress { font-size: 16px; color: #000; }
:root.nb-v2 .nb-progress strong { color: #000; font-weight: var(--nbv-weight); }
:root.nb-v2 .nb-cta { font: 400 13px var(--nbv-font); color: #000; background: #fff; border: var(--nbv-frame) solid #000; border-radius: 0; padding: 6px 12px; filter: none; }
:root.nb-v2 .nb-cta:hover { background: #eee; filter: none; }
:root.nb-v2 .nb-demo { color: #555; margin: -8px 0 16px; }
:root.nb-v2 .nb-grid { grid-template-columns: repeat(auto-fill, minmax(var(--nbv-cell, 90px), 1fr)); gap: var(--nbv-gap-y, 12px) var(--nbv-gap-x, 12px); }
:root.nb-v2 .nb-cell { border: var(--nbv-frame) solid #000; border-radius: var(--nbv-round, 0%); outline: 0; background: #fff; margin: 0; --in: calc(4px + var(--nbv-round, 0%) * 0.29); }
:root.nb-v2 .nb-cell.empty { background: var(--nbv-empty, #fff); }
:root.nb-v2 .nb-cell img { transition: none; }
:root.nb-v2 .nb-cell:hover img { transform: none; }
:root.nb-v2 .nb-cell.empty:hover { background: #eee; }
:root.nb-v2 .nb-empty-label { font-size: 28px; color: #000; }
:root.nb-v2 .nb-cell.empty:hover .nb-empty-label { color: #000; }
:root.nb-v2 .nb-mark { background: none; padding: 0; border-radius: 0; top: var(--in); bottom: auto; line-height: 1.2; }
:root.nb-v2 .nb-plus { left: var(--in); right: auto; opacity: 1; font-size: 16px; color: #fff; }
:root.nb-v2 .nb-cell.empty .nb-plus { color: #555; }
:root.nb-v2 .nb-count { right: var(--in); left: auto; font-size: 13px; color: #fff; }
:root.nb-v2 .nb-detail { gap: 12px; }
:root.nb-v2 .nb-back { font-size: 16px; color: #0000ee; text-decoration: underline; }
:root.nb-v2 .nb-nav { padding-bottom: 10px; border-bottom: var(--nbv-rule) solid #000; }
:root.nb-v2 .nb-nav > a { font-size: 18px; color: #0000ee; text-decoration: none; }
:root.nb-v2 .nb-nav > a:hover { background: #eee; color: #0000ee; }
:root.nb-v2 .nb-number { font-size: calc(96px * var(--nbv-title)); font-weight: var(--nbv-weight); line-height: 1.1; letter-spacing: 0; color: #000; }
:root.nb-v2 .nb-sub { font-size: 16px; color: #555; margin-top: 4px; }
:root.nb-v2 .nb-gallery { display: block; column-width: 220px; column-gap: 24px; margin-top: 12px; }
:root.nb-v2 .nb-item { break-inside: avoid; margin-bottom: 24px; }
:root.nb-v2 .nb-item img { aspect-ratio: auto; border: var(--nbv-frame) solid #000; border-radius: min(var(--nbv-round, 0%), 24px); }
:root.nb-v2 .nb-caption { font-size: 16px; font-weight: var(--nbv-weight); color: #000; margin-top: 6px; }
:root.nb-v2 .nb-meta { font-size: 13px; color: #555; }
:root.nb-v2 .nb-comment { font-size: 13px; }
:root.nb-v2 .nb-upload { border-top: var(--nbv-rule) solid #000; }
:root.nb-v2 .nb-upload h3 { font-size: calc(20px * var(--nbv-title)); font-weight: var(--nbv-weight); color: #000; }
:root.nb-v2 .nb-drop { border: var(--nbv-frame) dashed #000; border-radius: 0; color: #555; }
:root.nb-v2 .nb-fields label { font-size: 13px; color: #555; }
:root.nb-v2 .nb-fields :is(input, textarea) { border: var(--nbv-frame) solid #000 !important; border-radius: 0 !important; background: #fff !important; font-family: var(--nbv-font) !important; }
:root.nb-v2 .nb-upload button { font: 400 13px var(--nbv-font); color: #000; background: #fff; border: var(--nbv-frame) solid #000; border-radius: 0; }
@media (max-width: 640px) { :root.nb-v2 .nb-gallery { column-count: 2; } }
.nbv-toggle { flex-wrap: wrap; padding-top: 8px; }
.nbv-toggle button.on { color: var(--accent); border-color: var(--accent); }

/* the title in two lines, each its own size (⚙ Numbers: Title line 1 / line 2) */
.nb-wordmark .nbw1, .nb-wordmark .nbw2 { display: inline; }
:root.nb-v2 .nb-wordmark .nbw1, :root.nb-v2 .nb-wordmark .nbw2 { display: block; }
:root.nb-v2 .nb-wordmark { font-size: 0; }
:root.nb-v2 .nb-wordmark .nbw1 { font-size: var(--nbv-t1, 13px); line-height: 1.3; }
:root.nb-v2 .nb-wordmark .nbw2 { font-size: var(--nbv-t2, 48px); line-height: 1.05; }
/* ⚙ Numbers → Buttons: website: the rounded green buttons of the rest of the site */
:root.nb-v2[data-nbv-btn="site"] .nb-cta { font: 600 14px var(--nbv-font); color: #111; background: var(--accent); border: 0; border-radius: 999px; padding: 9px 18px; }
:root.nb-v2[data-nbv-btn="site"] .nb-cta:hover { background: var(--accent); filter: brightness(1.1); }
:root.nb-v2[data-nbv-btn="site"] .nb-upload button { font: 600 14px var(--nbv-font); color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; }
.nbv-color { display: flex; align-items: center; gap: 10px; padding-top: 8px; font-size: 12px; color: var(--muted); }
.nbv-color input[type=color] { width: 34px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; }