/* TTT — The Trap Temple
   Reader-first. Two art-directed reading themes:
     PAPER  warm archival cream, near-black ink
     BLACK  deep warm black, soft ivory
   Literata for reading, Archivo (width axis) for interface and section heads,
   IBM Plex Mono for code. One accent, "safelight" ochre, for category, section
   numbers, link underlines and reading progress. */

:root {
  /* PAPER (default light) */
  --bg: #ece5d6;
  --bg-2: #e3dac8;
  --bg-3: #d7ccb6;
  --elev: #f3eee3;
  --ink: #1e1a15;
  --ink-2: #4b443a;
  --ink-3: #665d51; /* the quietest text: still 4.5:1 (WCAG AA) on --bg, --bg-2 (code) and --elev (sheets, menu), in both themes */
  --rule: #d2c7b1;
  --rule-2: #b6a98f;
  --accent: #8a470f;
  --accent-soft: rgba(138, 71, 15, 0.1);
  --bar-bg: rgba(236, 229, 214, 0.9);
  --scrim: rgba(30, 24, 16, 0.3);
  --img-filter: none;
  --body-wght: 400;
  --shadow: 0 18px 40px -18px rgba(50, 35, 15, 0.45), 0 2px 6px -2px rgba(50, 35, 15, 0.12);
  color-scheme: light;

  --f-serif: 'Literata', 'Iowan Old Style', Charter, 'Palatino Linotype', Georgia, serif;
  --f-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs: 18px;
  --gutter: 22px;
  --measure: 640px;
  --bar-h: 52px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* BLACK — follows the system/host dark setting unless the reader picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13110e; --bg-2: #1b1814; --bg-3: #26221c; --elev: #1f1c17;
    --ink: #e7e0d1; --ink-2: #aca494; --ink-3: #8d8576;
    --rule: #2e2a23; --rule-2: #454036;
    --accent: #d69a52; --accent-soft: rgba(214, 154, 82, 0.12);
    --bar-bg: rgba(19, 17, 14, 0.86); --scrim: rgba(0, 0, 0, 0.5);
    --img-filter: brightness(0.76) contrast(1.06) saturate(0.95);
    --body-wght: 370;
    --shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 240, 210, 0.03);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13110e; --bg-2: #1b1814; --bg-3: #26221c; --elev: #1f1c17;
  --ink: #e7e0d1; --ink-2: #aca494; --ink-3: #8d8576;
  --rule: #2e2a23; --rule-2: #454036;
  --accent: #d69a52; --accent-soft: rgba(214, 154, 82, 0.12);
  --bar-bg: rgba(19, 17, 14, 0.86); --scrim: rgba(0, 0, 0, 0.5);
  --img-filter: brightness(0.76) contrast(1.06) saturate(0.95);
  --body-wght: 370;
  --shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 240, 210, 0.03);
  color-scheme: dark;
}
/* The reader's own choice wins over system and host (declared last, same specificity). */
:root[data-reading="paper"] {
  --bg: #ece5d6; --bg-2: #e3dac8; --bg-3: #d7ccb6; --elev: #f3eee3;
  --ink: #1e1a15; --ink-2: #4b443a; --ink-3: #665d51;
  --rule: #d2c7b1; --rule-2: #b6a98f;
  --accent: #8a470f; --accent-soft: rgba(138, 71, 15, 0.1);
  --bar-bg: rgba(236, 229, 214, 0.9); --scrim: rgba(30, 24, 16, 0.3);
  --img-filter: none;
  --body-wght: 400;
  --shadow: 0 18px 40px -18px rgba(50, 35, 15, 0.45), 0 2px 6px -2px rgba(50, 35, 15, 0.12);
  color-scheme: light;
}
:root[data-reading="black"] {
  --bg: #13110e; --bg-2: #1b1814; --bg-3: #26221c; --elev: #1f1c17;
  --ink: #e7e0d1; --ink-2: #aca494; --ink-3: #8d8576;
  --rule: #2e2a23; --rule-2: #454036;
  --accent: #d69a52; --accent-soft: rgba(214, 154, 82, 0.12);
  --bar-bg: rgba(19, 17, 14, 0.86); --scrim: rgba(0, 0, 0, 0.5);
  --img-filter: brightness(0.76) contrast(1.06) saturate(0.95);
  --body-wght: 370;
  --shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 240, 210, 0.03);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
#app { overflow-x: clip; min-height: 60vh; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); }
.ic { width: 20px; height: 20px; flex: none; }
html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ---------- reading bar ---------- */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  height: var(--bar-h);
  padding-inline: max(8px, calc((100% - 1180px) / 2));
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: transform 0.32s var(--ease), border-color 0.2s linear;
}
.bar.is-scrolled { border-bottom-color: var(--rule); }
.bar.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 2px)); }
.bar[data-view="home"] .bar-back { visibility: hidden; }
.bar[data-view="admin"] { display: none; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-2);
  transition: background-color 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn[aria-expanded="true"] { background: var(--bg-2); color: var(--ink); }

.brand {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  color: var(--ink);
  text-decoration: none;
}
.brand .mark { width: 21px; height: auto; }
/* Research and The Index: in the menu on phones, beside it on wider screens. */
.bar-end { justify-self: end; display: flex; align-items: center; gap: 4px; min-width: 0; }
.bar-nav { display: none; }
.bar-nav a {
  padding: 11px 10px; border-radius: 8px;
  font: 650 11.5px/1 var(--f-sans); font-stretch: 95%;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.bar-nav a:hover { background: var(--bg-2); color: var(--ink); }
.bar-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
@media (min-width: 760px) {
  .bar-nav { display: flex; gap: 2px; }
}
.brand-t {
  font: 700 15px/1 var(--f-sans);
  font-stretch: 115%;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

.progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  height: 2px;
  z-index: 35;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* ---------- reading menu ---------- */
.menu {
  position: fixed;
  z-index: 45;
  top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) - 2px);
  right: max(10px, calc((100vw - 1180px) / 2 + 8px));
  width: min(304px, calc(100vw - 20px));
  padding: 6px;
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.22s var(--ease);
}
.menu.is-open { opacity: 1; transform: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px 8px 10px; }
.menu-label {
  font: 650 11px/1 var(--f-sans);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}
.seg { display: flex; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 9px; padding: 2px; }
.seg button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 11px;
  border-radius: 7px;
  font: 650 11.5px/1 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); }
.seg button:disabled { opacity: 0.35; cursor: default; }
.sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 110, 80, 0.55); }
.sw--black { background: #13110e; }
.sw--paper { background: #ece5d6; }
.seg--size button { min-width: 42px; font: 600 15px/1 var(--f-serif); letter-spacing: 0; text-transform: none; }
.seg--size button:first-child { font-size: 12.5px; }
.seg--size output { min-width: 28px; display: grid; place-items: center; font: 600 12px/1 var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.menu-actions { display: grid; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.menu-nav { display: grid; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.menu-nav .menu-act[aria-current] { background: var(--accent-soft); }
@media (min-width: 760px) { .menu-nav { display: none; } }
.menu-act {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 10px;
  border-radius: 8px;
  font: 500 15px/1 var(--f-sans);
  color: var(--ink); text-decoration: none; text-align: left;
}
.menu-act:hover { background: var(--bg-2); }
.menu-act .ic { color: var(--accent); }
.menu:not([data-view="article"]) .menu-row--size,
.menu:not([data-view="article"]) .menu-actions { display: none; }

/* ---------- shared type ---------- */
.kicker {
  margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font: 650 11.5px/1.2 var(--f-sans);
  font-stretch: 95%;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}
.kicker > * { min-width: 0; }
.kicker .cat { color: var(--accent); text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.kicker .sep { width: 16px; height: 1px; background: var(--rule-2); }
.label {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font: 700 11.5px/1 var(--f-sans);
  font-stretch: 95%;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.meta-line { margin: 0; font: 500 12.5px/1.4 var(--f-sans); color: var(--ink-3); letter-spacing: 0.02em; }

/* ---------- article ---------- */
.reader { container: reader / inline-size; padding-inline: var(--gutter); }
.article { max-width: var(--measure); margin-inline: auto; }

.a-head { padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.a-title {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 32px;
  font-size: clamp(26px, 9.2cqi, 50px); /* 26px floor: a long word (Compartmentalizing) still fits whole on a 320px phone */
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.a-dek { margin: 0; font: italic 400 18.5px/1.45 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.a-meta {
  margin: 4px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; row-gap: 4px;
  font: 500 13px/1.4 var(--f-sans);
  color: var(--ink-2);
}
.a-meta { align-items: center; }
.a-meta > span { min-width: 0; }
.a-meta > span + span::before { content: "·"; margin: 0 10px; color: var(--ink-3); }
.a-by { display: inline-flex; align-items: center; gap: 9px; }
.a-av {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: 50%;
  background: var(--bg-2);
  font: 700 10.5px/1 var(--f-sans); font-stretch: 115%;
  color: var(--accent);
}
.a-by-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.a-meta b { font: 700 12px/1 var(--f-sans); letter-spacing: 0.12em; color: var(--ink); }

.a-cover { margin: 22px calc(-1 * var(--gutter)) 0; }
.a-cover figcaption { padding-inline: var(--gutter); }

/* media */
.fig-media { position: relative; overflow: hidden; background: #e9e0cb; }
.fig-media > img, .fig-media > svg { width: 100%; height: auto; filter: var(--img-filter); }
.fig-media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(70, 48, 18, 0.16));
  mix-blend-mode: multiply;
  opacity: 0.6;
}
figure { margin: 0; }
figcaption {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 10px;
  font: 400 13.5px/1.5 var(--f-sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
figcaption > span { min-width: 0; } /* beside "Fig. 2", a long link in the caption wraps instead of pushing out */
.fig-n { flex: none; font: 650 10.5px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

/* prose */
.prose {
  margin-top: 30px;
  font-family: var(--f-serif);
  font-size: calc(var(--fs) + var(--boost, 0px));
  font-weight: var(--body-wght);
  line-height: 1.66;
  color: var(--ink);
}
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: var(--flow, 1.05em); }
.prose p { text-wrap: pretty; }
.prose > p:first-child { font-size: 1.055em; }
.prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose strong { font-weight: 650; }
/* Headings are already bold: bold inside one changes nothing, so every heading looks the same. */
.sec-head h2 strong, .prose h3 strong { font-weight: inherit; }
.prose code, .callout code {
  font-family: var(--f-mono); font-size: 0.8em;
  padding: 0.08em 0.35em;
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px;
  overflow-wrap: anywhere;
}

/* section opener: the field-manual device */
.prose .sec-head { --flow: 2.9em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: calc(var(--bar-h) + 18px); }
.prose .sec-head + * { --flow: 0.85em; }
.sec-line {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font: 650 12.5px/1 var(--f-sans);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.sec-line .sec-of { color: var(--ink-3); font-weight: 500; }
.sec-line::after {
  content: ""; flex: 1; height: 1px;
  background: var(--rule-2);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease) 0.15s;
}
.sec-head h2 {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 700;
  font-stretch: 86%;
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
.prose h3 { --flow: 1.8em; font: 600 calc(var(--fs) * 1.1)/1.3 var(--f-serif); letter-spacing: -0.005em; text-wrap: balance; }
.prose h3 + * { --flow: 0.4em; }

/* figures in the flow */
.prose .fig { --flow: 2em; }
.prose .fig + * { --flow: 2em; }
.fig--full { margin-inline: calc(-1 * var(--gutter)); }
.fig--full figcaption { padding-inline: var(--gutter); }

/* quote */
.prose .quote { --flow: 2em; }
.prose .quote + * { --flow: 2em; }
.quote::before {
  content: "“";
  display: block;
  height: 0.5em;
  font: 600 3em/1 var(--f-serif);
  color: var(--accent);
}
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font: italic 400 1.2em/1.45 var(--f-serif); letter-spacing: -0.005em; text-wrap: pretty; hyphens: manual; }
.quote figcaption { display: block; margin-top: 12px; font: 650 11px/1.5 var(--f-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }

/* callout / analyst note */
.prose .callout { --flow: 1.8em; }
.prose .callout + * { --flow: 1.8em; }
.callout {
  padding: 15px 18px 17px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.callout--caution { background: transparent; border: 1px dashed var(--rule-2); }
.callout--method { background: transparent; border-color: var(--rule-2); }
.callout--reference { background: transparent; border-width: 1px 0; border-radius: 0; padding-inline: 0; }
.callout--reference .callout-label { color: var(--ink-3); }
.callout-label {
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
  font: 650 11px/1 var(--f-sans);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
  overflow-wrap: anywhere; /* a long label of the owner's own still fits beside the icon */
}
.callout-label .ic { width: 16px; height: 16px; }
.callout-text { margin: 0; font-size: 0.92em; line-height: 1.6; }

/* lists */
.prose .list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5em; padding: 0; list-style: none; }
.prose ol.list { counter-reset: li; }
.prose .list > li { position: relative; padding-left: 1.75em; }
.prose ol.list > li { counter-increment: li; }
.prose ol.list > li::before {
  content: counter(li);
  position: absolute; left: 0; top: 0;
  font: 650 0.76em/1 var(--f-sans);
  line-height: calc((var(--fs) + var(--boost, 0px)) * 1.66);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.prose ul.list > li::before {
  content: "";
  position: absolute; left: 0.15em; top: 0.86em;
  width: 0.62em; height: 1.5px;
  background: var(--accent);
}

/* code */
.prose .code { --flow: 1.8em; }
.prose .code + * { --flow: 1.8em; }
.code { border: 1px solid var(--rule); border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.code-head {
  margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 4px 4px 14px;
  border-bottom: 1px solid var(--rule);
  font: 500 12px/1 var(--f-mono);
  color: var(--ink-3);
}
.code-head > span { min-width: 0; line-height: 1.4; } /* a long file name wraps beside Copy */
.code-copy {
  min-height: 34px; padding: 0 10px; border-radius: 5px;
  font: 650 10.5px/1 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.code-copy:hover { background: var(--bg-3); color: var(--ink); }
.code pre { margin: 0; padding: 14px 14px 16px; overflow-x: auto; font: 400 13.5px/1.62 var(--f-mono); color: var(--ink); tab-size: 2; }
.code code { font: inherit; padding: 0; background: none; border: 0; }
.code .c { color: var(--ink-3); }

/* divider: three stems, the mark without its lintel */
.prose .divider { --flow: 2.4em; display: flex; justify-content: center; gap: 9px; }
.prose .divider + * { --flow: 2.4em; }
.divider i { display: block; width: 2px; height: 11px; background: var(--ink-3); opacity: 0.7; }

/* see also */
.prose .seealso { --flow: 2em; }
.seealso {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px;
  padding-block: 14px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none !important;
}
.seealso-label { grid-column: 1 / -1; font: 650 10.5px/1.6 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.seealso-title { font: 600 1em/1.3 var(--f-serif); text-wrap: balance; }
.seealso-meta { grid-column: 1; font: 500 12.5px/1.4 var(--f-sans); color: var(--ink-3); }
.seealso .ic { grid-column: 2; grid-row: 2 / span 2; align-self: center; color: var(--ink-3); transition: transform 0.2s var(--ease), color 0.2s; }
.seealso:hover .ic { transform: translateX(3px); color: var(--accent); }

/* footnote refs */
sup.fn { font-size: 1em; line-height: 0; vertical-align: baseline; position: relative; top: -0.48em; }
.fn button {
  position: relative;
  padding: 0 0.15em;
  font: 700 0.6em/1 var(--f-sans);
  color: var(--accent);
}
.fn button::after { content: ""; position: absolute; inset: -12px -9px; }

/* end of article */
.a-end { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.endmark { display: flex; justify-content: center; color: var(--accent); }
.endmark .mark { width: 20px; height: auto; }
.share { display: grid; gap: 16px; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-row .btn { flex: 1 1 auto; }
.share-row .btn--primary { flex: 1 1 190px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--rule-2); border-radius: 9px;
  font: 600 14.5px/1 var(--f-sans);
  color: var(--ink); background: transparent;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--bg-2); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink); opacity: 0.88; }
.btn--sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; border-radius: 7px; }

.byline { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 20px; border-top: 1px solid var(--rule); }
.avatar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-2); border-radius: 50%;
  background: var(--bg-2);
  font: 700 15px/1 var(--f-sans); font-stretch: 115%;
  color: var(--accent);
}
.byline-name { margin: 2px 0 0; font: 700 12.5px/1.3 var(--f-sans); letter-spacing: 0.14em; }
.byline-bio { margin: 5px 0 0; font: 400 15.5px/1.5 var(--f-serif); color: var(--ink-2); }

.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.notes ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.notes li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px;
  margin-inline: -8px; padding: 6px 8px;
  border-radius: 6px;
  font: 400 14.5px/1.55 var(--f-sans);
  color: var(--ink-2);
  scroll-margin-top: 90px;
  transition: background-color 1.2s ease;
}
.notes li.is-flash { background: var(--accent-soft); transition: none; }
.notes p { margin: 0; }
.note-n { font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.a-dates { margin: 0; font: 500 12.5px/1.5 var(--f-sans); color: var(--ink-3); }

/* related reading */
.related { max-width: var(--measure); margin: 60px auto 0; }
.rel-list, .posts { list-style: none; margin: 8px 0 0; padding: 0; }
.rel, .post {
  display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.rel { align-items: center; }
.rel-text, .post-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.rel-title { font: 600 18px/1.28 var(--f-serif); text-wrap: balance; }
.thumb { aspect-ratio: 1; overflow: hidden; background: #e9e0cb; position: relative; border-radius: 2px; }
.thumb > svg, .thumb > img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.rel:hover .rel-title, .post:hover .post-title, .feature-link:hover .feature-title {
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}

/* desktop margin contents */
.toc { display: none; }
@media (min-width: 1340px) {
  .toc {
    display: block;
    position: fixed;
    top: calc(var(--bar-h) + 64px);
    left: calc(50% - 644px);
    width: 200px;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s var(--ease);
  }
  .toc.is-on { opacity: 1; transform: none; pointer-events: auto; }
}
.toc-label { margin: 0 0 12px; font: 650 11px/1 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc button {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px;
  width: 100%; padding: 7px 0;
  text-align: left;
  font: 500 13.5px/1.35 var(--f-sans);
  color: var(--ink-3);
  transition: color 0.2s;
}
.toc button span { font-weight: 650; font-variant-numeric: tabular-nums; }
.toc button:hover, .toc button[aria-current] { color: var(--ink); }
.toc button[aria-current] span { color: var(--accent); }

/* wider reading column: container-based so the editor preview renders at phone width */
@container reader (min-width: 700px) {
  .a-head { padding-top: 56px; gap: 18px; }
  .a-dek { font-size: 21px; }
  .a-cover, .fig--full { margin-inline: calc((100% - min(840px, 100cqi)) / 2); }
  .a-cover { margin-top: 36px; }
  .a-cover figcaption, .fig--full figcaption { padding-inline: max(0px, calc((100% - var(--measure)) / 2)); }
  .fig--wide { margin-inline: calc((100% - min(760px, 100cqi)) / 2); }
  .fig--wide figcaption { padding-inline: max(0px, calc((100% - var(--measure)) / 2)); }
  .prose { --boost: 1px; margin-top: 40px; }
}

/* ---------- section reveals (only for content below the first screen) ---------- */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-pending { opacity: 0; transform: translateY(12px); }
.sec-head.is-pending .sec-line::after { transform: scaleX(0); }
.fig.is-pending { transform: none; }
.fig .fig-media > * { transition: transform 1.4s var(--ease); }
.fig.is-pending .fig-media > * { transform: scale(1.03); }

/* ---------- section navigation: floating pill ---------- */
.secnav {
  position: fixed; z-index: 28;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center;
  height: 44px; padding: 0 2px;
  border: 1px solid var(--rule);
  border-radius: 22px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 28px -14px rgba(20, 12, 4, 0.45);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.4s var(--ease);
}
.secnav.is-on, .secnav:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.secnav-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
.secnav-btn .ic { width: 19px; height: 19px; }
.secnav-btn:hover { background: var(--bg-2); color: var(--ink); }
.secnav-btn:disabled { opacity: 0.28; cursor: default; background: none; }
.secnav-mid {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 10px;
  border-radius: 20px;
  font: 650 12px/1 var(--f-sans);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.secnav-mid:hover { background: var(--bg-2); }
.secnav-mid::before, .secnav-mid::after { content: ""; position: absolute; top: 12px; bottom: 12px; width: 1px; background: var(--rule); }
.secnav-mid::before { left: 0; }
.secnav-mid::after { right: 0; }
.secnav-of { color: var(--ink-3); font-weight: 500; }
.secnav-of:empty { display: none; }
.secnav.is-intro .secnav-mid { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.prose .sec-head:focus { outline: none; }

/* ---------- footnote sheet, contents sheet, toast ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); opacity: 0; transition: opacity 0.2s ease; }
.scrim.is-open { opacity: 1; }
.sheet {
  position: fixed; z-index: 51;
  left: 50%; bottom: 0;
  width: min(640px, 100%);
  padding: 26px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--elev);
  border: 1px solid var(--rule); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  max-height: 85%;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate(-50%, 100%);
  transition: transform 0.28s var(--ease);
}
.sheet.is-open { transform: translate(-50%, 0); }
/* While a sheet is open the page behind it is pinned where it was (app.js keeps the place and puts it back). */
html.is-locked body { position: fixed; top: var(--lock-y, 0); left: 0; right: 0; }
html.is-locked.keep-gutter { overflow-y: scroll; }
.sheet::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--rule-2); }
.sheet-label { margin: 0; font: 650 11px/1 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.sheet-text { margin: 10px 0 20px; font: 400 16.5px/1.6 var(--f-serif); color: var(--ink); }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; }

.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-status { margin: 0; flex: 1; min-width: 0; font: 500 12.5px/1.3 var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sheet-x { margin: -10px -12px -10px 0; }
.contents-title { margin: 8px 0 14px; font: italic 400 16px/1.4 var(--f-serif); color: var(--ink-2); text-wrap: balance; }
.contents { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.contents-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 10px; align-items: center; gap: 6px;
  width: 100%; min-height: 52px; padding: 10px;
  border-radius: 10px;
  text-align: left;
  color: var(--ink);
  transition: background-color 0.15s;
}
.contents-row:hover { background: var(--bg-2); }
.c-n { font: 650 12.5px/1 var(--f-sans); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.c-t { font: 700 15px/1.25 var(--f-sans); font-stretch: 88%; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
.contents-row.is-read .c-t { color: var(--ink-3); font-weight: 600; }
.contents-row[aria-current] { background: var(--accent-soft); }
.contents-row[aria-current] .c-n { color: var(--accent); }
.c-now { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.toast {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font: 500 14px/1.4 var(--f-sans);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.toast > span { min-width: 0; } /* "The link is https://…" wraps inside the toast */
.toast a, .toast button { color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- homepage ---------- */
.home, .page { max-width: 704px; margin-inline: auto; padding-inline: var(--gutter); }
.masthead { padding-block: 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--rule); }
.masthead-name { margin: 0; display: flex; align-items: baseline; gap: 12px; font: 600 30px/1.05 var(--f-serif); letter-spacing: -0.015em; }
.masthead-name .mark { width: 26px; height: auto; color: var(--accent); align-self: center; }
.masthead-tag { margin: 0; font: italic 400 17px/1.45 var(--f-serif); color: var(--ink-2); max-width: 32ch; }

.feature { padding-top: 24px; }
.feature-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; color: inherit; text-decoration: none; }
.feature-media { margin: 0 calc(-1 * var(--gutter)) 6px; }
.feature-title { margin: 0; font: 600 28px/1.12 var(--f-serif); letter-spacing: -0.012em; text-wrap: balance; }
.feature-dek { margin: 0; font: 400 17px/1.5 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }

.home-sec { margin-top: 48px; }
.post-title { margin: 0; font: 600 19.5px/1.25 var(--f-serif); text-wrap: balance; }
.post-ex {
  margin: 0;
  font: 400 15.5px/1.5 var(--f-serif); color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.filter-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font: 500 13px/1.4 var(--f-sans); color: var(--ink-2); }
.filter-note button { font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; min-height: 36px; }

.topics { list-style: none; margin: 8px 0 0; padding: 0; }
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px;
  width: 100%; padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.topic-name { font: 600 18px/1.2 var(--f-serif); }
.topic-desc { grid-column: 1; font: 400 14px/1.4 var(--f-sans); color: var(--ink-3); }
.topic-n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 12px/1 var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.topic[aria-pressed="true"] .topic-name { color: var(--accent); }
.topic:hover .topic-name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

.sec-intro { margin: 14px 0 0; font: 400 15.5px/1.5 var(--f-serif); color: var(--ink-2); }
.ix { list-style: none; margin: 8px 0 0; padding: 0; }
.ix-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.ix-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 9px; background: var(--bg-2); color: var(--ink-2); }
.ix-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ix-name { margin: 0; font: 600 17.5px/1.25 var(--f-serif); }
.ix-text { margin: 0; font: 400 15px/1.5 var(--f-serif); color: var(--ink-2); }
.ix-status { margin: 4px 0 0; }
.more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding-block: 8px;
  font: 650 13.5px/1 var(--f-sans);
  color: var(--ink); text-decoration: none;
}
.more .ic { width: 18px; height: 18px; color: var(--accent); transition: transform 0.2s var(--ease); }
.more:hover .ic { transform: translateX(3px); }

/* No hyphenation anywhere: a word that doesn't fit moves whole to the next line. Only a single word wider than
 * the whole column (an onion address, a URL used as link text) is broken, so nothing ever leaves the column.
 * It is inherited, so it reaches every line of text: headings, lists, captions, quotes, callouts, notes, the
 * sheets. Grid and flex children above get min-width: 0 (or a minmax(0, 1fr) track), so such a word can't
 * stretch their column past the screen either. Code doesn't wrap: it scrolls inside its own box. */
body { overflow-wrap: break-word; }
.a-title, .post-title, .rel-title, .feature-title, .page-title { overflow-wrap: break-word; }
.post-title, .rel-title { overflow-wrap: anywhere; }
.post .meta-line span, .rel .meta-line span { white-space: nowrap; }
/* On the narrowest phones the byline takes its own line, so no line starts with a separator. */
@media (max-width: 379px) {
  .a-meta .a-by { flex-basis: 100%; margin-bottom: 6px; }
  .a-meta > .a-by + span::before { content: none; }
  /* Beside its thumbnail the card title has ~184px: one size down so long words fit whole. */
  .rel-title { font-size: 17px; }
}
.rel--text { grid-template-columns: minmax(0, 1fr); }
/* The publication's own article is the front door: no back arrow. */
.bar.is-front .bar-back { visibility: hidden; }

.page-head { padding-block: 26px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--rule); }
.page-title { margin: 0; font: 600 32px/1.08 var(--f-serif); letter-spacing: -0.015em; }
.page-dek { margin: 0; font: italic 400 17.5px/1.5 var(--f-serif); color: var(--ink-2); }
.page-note { margin: 22px 0 0; }

/* ---------- Research (the archive) and The Index (the directory) ---------- */
.br-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.br-head { padding-block: 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.br-head .page-dek { max-width: 38ch; text-wrap: pretty; }
.br-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.br-search { position: relative; display: flex; align-items: center; }
.br-search .ic { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.br-q {
  width: 100%; min-width: 0; height: 46px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--rule-2); border-radius: 9px;
  background: var(--elev); color: var(--ink);
  font: 400 16px/1 var(--f-sans); /* 16px: phones don't zoom into the field */
  -webkit-appearance: none; appearance: none;
}
.br-q::placeholder { color: var(--ink-3); opacity: 1; }
.br-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Category and subcategory rows: one line that scrolls sideways, edge to edge on a phone. */
.br-pills {
  display: flex; gap: 6px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.br-pills::-webkit-scrollbar { display: none; }
.br-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 12px;
  border: 1px solid var(--rule-2); border-radius: 7px;
  font: 650 11.5px/1 var(--f-sans); font-stretch: 95%;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.br-pill:hover { color: var(--ink); border-color: var(--ink-3); }
.br-pill[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.br-n { font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; opacity: 0.7; }
.br-pills--sub .br-pill { min-height: 34px; padding: 0 11px; border-color: transparent; background: var(--bg-2); font: 550 13px/1 var(--f-sans); letter-spacing: 0.01em; text-transform: none; }
.br-pills--sub .br-pill:hover { border-color: var(--rule-2); }
.br-pills--sub .br-pill[aria-current] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
#brSubs:empty { display: none; }

.br-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 12px; }
.br-count { margin: 0; font: 500 12.5px/1.4 var(--f-sans); color: var(--ink-3); letter-spacing: 0.02em; }
.br-opts { display: flex; gap: 2px; margin-right: -8px; }
.br-opt {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; border-radius: 6px;
  font: 650 10.5px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.br-opt:hover { color: var(--ink); background: var(--bg-2); }
.br-opt[aria-pressed="true"] { color: var(--accent); }
.br-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 0 0; padding: 6px 6px 6px 12px;
  border-radius: 7px; background: var(--bg-2);
  font: 500 13.5px/1.3 var(--f-sans); color: var(--ink-2);
}
.br-chip span { min-width: 0; overflow-wrap: anywhere; }
.br-chip b { color: var(--ink); font-weight: 650; }
.br-chip a { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 6px; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* the newest article, a little larger */
.br-lead { border-bottom: 1px solid var(--rule); }
.br-lead-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 18px 20px; color: inherit; text-decoration: none; }
.br-lead-media { aspect-ratio: 16 / 9; margin-bottom: 4px; border-radius: 2px; }
.br-lead-media > img, .br-lead-media > svg { height: 100%; object-fit: cover; }
.br-lead-title { font: 600 25px/1.14 var(--f-serif); letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: anywhere; }
.br-lead-dek { font: 400 16.5px/1.5 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.br-lead-link:hover .br-lead-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

/* the archive */
.br-list { list-style: none; margin: 0; padding: 0; }
.br-item { border-bottom: 1px solid var(--rule); }
.br-item .post { border-bottom: 0; }
.br-post--text { grid-template-columns: minmax(0, 1fr); }
.br-meta { display: flex; flex-wrap: wrap; }
.br-meta span { white-space: nowrap; }
.br-meta span:not(:last-child)::after { content: "·"; margin: 0 7px; }
.br-read { padding: 3px 5px 2px; border: 1px solid var(--rule-2); border-radius: 3px; font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-3); }
.br-item.is-read .post-title { color: var(--ink-2); }
.br-tags { display: flex; flex-wrap: wrap; gap: 0 14px; margin: -8px 0 0; padding-bottom: 10px; }
.br-tags a {
  display: inline-flex; align-items: center; min-height: 32px;
  font: 600 10.5px/1 var(--f-sans); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.br-tags a::before { content: "#"; margin-right: 2px; color: var(--rule-2); }
.br-tags a:hover { color: var(--ink); }

.br-empty { padding: 30px 0 8px; }
.br-empty-t { margin: 0; font: italic 400 19px/1.4 var(--f-serif); color: var(--ink-2); overflow-wrap: anywhere; }
.br-empty-x { margin: 8px 0 0; font: 400 14.5px/1.5 var(--f-sans); color: var(--ink-3); }
.br-empty .more { margin-top: 12px; }

/* the directory */
.ix-shelf { margin-top: 30px; }
.ix-list { list-style: none; margin: 4px 0 0; padding: 0; }
.ix-e { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 16px 10px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--bar-h) + 12px); }
.ix-e-head { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 6px; width: 100%; text-align: left; color: inherit; }
.ix-e-head > * { grid-column: 1; min-width: 0; }
.ix-e-head .kicker:empty { display: none; }
.ix-e-name { font: 600 19px/1.25 var(--f-serif); letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: anywhere; }
.ix-e-desc { font: 400 15.5px/1.5 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.ix-e-facts { display: flex; flex-wrap: wrap; font: 600 10.5px/1.5 var(--f-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
/* The dot trails each fact, so a wrapped line never starts with one. */
.ix-e-facts span:not(:last-child)::after { content: "·"; margin: 0 7px; }
.ix-e-head .ix-e-chev { grid-column: 2; grid-row: 1 / span 2; align-self: start; color: var(--ink-3); transition: transform 0.25s var(--ease), color 0.15s; }
.ix-e-head:hover .ix-e-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ix-e-head:hover .ix-e-chev { color: var(--ink); }
.ix-e.is-open .ix-e-chev { transform: rotate(180deg); color: var(--accent); }
.ix-e-host {
  justify-self: start; max-width: 100%;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding-right: 8px;
  font: 600 13.5px/1.25 var(--f-sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.ix-e-host > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ix-e-host .ic { width: 16px; height: 16px; color: var(--accent); }
.ix-e-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px 0 10px; }
.ix-e-more[hidden] { display: none; }
.ix-e-label { margin: 0 0 6px; font: 650 10.5px/1.2 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.ix-e-text { margin: 0; font: 400 15.5px/1.55 var(--f-serif); color: var(--ink); text-wrap: pretty; }
.ix-e-used { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ix-e-used a { font: 600 16px/1.35 var(--f-serif); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ix-e-dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 16px; }
.ix-e-dl dt { font: 650 10px/1.3 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ix-e-dl dd { margin: 3px 0 0; font: 500 14px/1.4 var(--f-sans); color: var(--ink); }
.ix-e-open { width: 100%; }
.ix-e-open .ic { width: 18px; height: 18px; }
.ix-e-hint { margin: -8px 0 0; font: 400 12.5px/1.45 var(--f-sans); color: var(--ink-3); overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .ix-e-open { width: auto; justify-self: start; }
}
@media (min-width: 760px) {
  .br-head { padding-block: 44px 22px; }
  .br-head .page-title { font-size: 40px; }
  /* Room for every category: the rows wrap instead of scrolling. */
  .br-pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .br-lead-title { font-size: 30px; }
  .br-lead-link { padding-block: 22px 24px; }
  .ix-e-name { font-size: 20.5px; }
}

@media (min-width: 760px) {
  .masthead { padding-block: 44px 28px; }
  .masthead-name { font-size: 40px; }
  .feature-media { margin-inline: 0; }
  .feature-title { font-size: 36px; }
  .post { grid-template-columns: minmax(0, 1fr) 112px; gap: 24px; padding-block: 22px; }
  .post-title { font-size: 22px; }
}

/* ---------- reading states (prototype review page) ---------- */
.states-page { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.states-page .page-head { max-width: 640px; border-bottom: 0; }
.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 44px 32px;
  justify-items: center;
  margin-top: 12px;
}
.state { width: 100%; max-width: 390px; }
/* The transform makes the phone the containing block for the fixed-position reading chrome. */
.phone {
  position: relative;
  height: 760px;
  overflow: hidden;
  transform: translateZ(0);
  clip-path: inset(0 round 34px);
  isolation: isolate;
  border: 1px solid var(--rule-2);
  border-radius: 34px;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.phone .bar { position: absolute; top: 0; left: 0; right: 0; }
.phone-scroll { position: absolute; inset: 0; overflow: hidden; }
.phone .reader { padding-bottom: 40px; }
.state > figcaption { margin-top: 18px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.state > figcaption .fig-n { color: var(--accent); padding-top: 3px; }
.state > figcaption b { display: block; margin-bottom: 3px; font: 600 17px/1.3 var(--f-serif); color: var(--ink); }
.states-foot { margin: 36px 0 0; }

/* ---------- footer ---------- */
.site-foot { margin-top: 80px; padding: 28px var(--gutter) 44px; border-top: 1px solid var(--rule); }
.foot-in { max-width: 660px; margin-inline: auto; display: grid; gap: 14px; }
.foot-in p { margin: 0; font: 400 14.5px/1.5 var(--f-serif); color: var(--ink-2); max-width: 38ch; }
.brand--foot { justify-self: start; padding: 12px 8px 12px 0; margin-block: -12px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-nav a { padding-block: 10px; font: 650 11.5px/1 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }

/* ---------- editor (owner only) ---------- */
.admin { min-height: 100vh; }
.admin-bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding-inline: 8px 12px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.admin-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 4px; font: 600 14px/1 var(--f-sans); color: var(--ink-2); text-decoration: none; }
.admin-title { margin: 0; display: none; align-items: center; gap: 10px; font: 700 12px/1 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; }
.pill { padding: 4px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font: 650 10px/1 var(--f-sans); letter-spacing: 0.12em; }
.admin-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.admin-status { display: none; font: 500 12.5px/1 var(--f-sans); color: var(--ink-3); margin-right: 6px; }
.admin-tabs {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 19;
  display: flex; gap: 4px;
  padding: 4px var(--gutter) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.admin-tabs button { padding: 12px 12px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 650 13px/1 var(--f-sans); color: var(--ink-3); }
.admin-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.admin-confirm {
  margin: 16px var(--gutter) 0;
  padding: 14px 16px;
  display: grid; gap: 6px;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent-soft);
  font: 400 15px/1.45 var(--f-sans);
}
.admin-confirm p { margin: 0; }
.confirm-actions { display: flex; gap: 8px; margin-top: 8px; }

.admin-form { padding: 22px var(--gutter) 72px; display: grid; gap: 22px; max-width: 760px; margin-inline: auto; }
.admin[data-tab="edit"] .admin-preview { display: none; }
.admin[data-tab="preview"] .admin-form { display: none; }
.pv-head { display: none; }

.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend, .flabel {
  padding: 0;
  font: 650 11px/1 var(--f-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.field > legend { margin-bottom: 8px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.input {
  width: 100%; min-width: 0;
  padding: 10px 12px;
  font: 400 16px/1.4 var(--f-sans);
  color: var(--ink);
  background: var(--elev);
  border: 1px solid var(--rule-2); border-radius: 7px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--ink-3); opacity: 0.8; }
textarea.input { resize: vertical; line-height: 1.5; }
.input--title { font: 600 23px/1.2 var(--f-serif); padding: 11px 12px; }
.input--prose { font: 400 16px/1.55 var(--f-serif); }
.input--mono { font: 400 14px/1.55 var(--f-mono); }
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.hint { margin: 0; font: 400 12.5px/1.45 var(--f-sans); color: var(--ink-3); }
.slug { display: flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 7px; background: var(--elev); }
.slug:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slug span { padding-left: 12px; font: 400 14px/1 var(--f-mono); color: var(--ink-3); }
.slug .input { border: 0; background: transparent; padding-left: 2px; box-shadow: none; font-family: var(--f-mono); font-size: 15px; }
.cover-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; }
.cover-thumb, .blk-img-thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--bg-3); }
.cover-thumb > svg, .cover-thumb > img, .blk-img-thumb > svg, .blk-img-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.stack { display: grid; gap: 8px; }
.file-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 12px;
  border: 1px dashed var(--rule-2); border-radius: 7px;
  font: 600 13px/1 var(--f-sans); color: var(--ink-2);
  cursor: pointer;
}
.file-btn input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-btn:hover { border-style: solid; color: var(--ink); }

.blk-list { display: grid; gap: 12px; margin-top: 16px; }
.blk { border: 1px solid var(--rule); border-radius: 10px; background: var(--elev); }
.blk-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 3px 12px; border-bottom: 1px solid var(--rule); }
.blk-type { font: 650 10.5px/1 var(--f-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.blk-tools { display: flex; }
.blk-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-3); }
.blk-btn .ic { width: 18px; height: 18px; }
.blk-btn:hover { background: var(--bg-2); color: var(--ink); }
.blk-btn:disabled { opacity: 0.3; cursor: default; background: none; }
.blk-body { padding: 12px; display: grid; gap: 10px; }
.blk-body .input { background: var(--bg); }
.blk-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.blk-img { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.blk-note { margin: 0; font: italic 400 15px/1.4 var(--f-serif); color: var(--ink-3); }
.blk-empty { margin: 0; padding: 18px; border: 1px dashed var(--rule-2); border-radius: 10px; font: 400 14px/1.4 var(--f-sans); color: var(--ink-3); text-align: center; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.add-btn { min-height: 40px; padding: 0 13px; border: 1px dashed var(--rule-2); border-radius: 7px; font: 600 13px/1 var(--f-sans); color: var(--ink-2); }
.add-btn:hover { border-style: solid; border-color: var(--accent); color: var(--ink); }

.admin-preview .reader { padding-bottom: 40px; }

@media (min-width: 1000px) {
  .admin-title, .admin-status { display: flex; }
  .admin-bar { padding-inline: 12px 20px; gap: 16px; }
  .admin-tabs { display: none; }
  .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
  .admin[data-tab] .admin-form { display: grid; }
  .admin-form { padding: 32px 40px 96px; }
  .admin[data-tab] .admin-preview {
    display: flex; flex-direction: column; gap: 12px;
    position: sticky; top: 56px;
    height: calc(100vh - 56px);
    padding: 18px 34px 24px;
    background: var(--bg-2);
    border-left: 1px solid var(--rule);
  }
  .pv-head { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 650 10.5px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .pv-frame { flex: 1; min-height: 0; width: 390px; margin-inline: auto; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 24px; background: var(--bg); box-shadow: var(--shadow); }
  .pv-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal.is-pending { opacity: 1; transform: none; }
  .sec-head.is-pending .sec-line::after, .fig.is-pending .fig-media > * { transform: none; }
}

/* ---------- print and Save as PDF: the article alone, dark ink on paper ---------- */
@page { margin: 18mm 16mm; }
@media print {
  /* :root:root outranks the theme rules above (same weight, declared later): a reader on Black still prints
     dark text, since browsers leave page backgrounds out. */
  :root:root {
    --bg: #fff; --bg-2: #f3efe7; --bg-3: #e6dfd0; --elev: #fff;
    --ink: #1e1a15; --ink-2: #4b443a; --ink-3: #665d51;
    --rule: #d2c7b1; --rule-2: #b6a98f;
    --accent: #8a470f; --accent-soft: rgba(138, 71, 15, 0.1);
    --img-filter: none; --body-wght: 400; --shadow: none;
    color-scheme: light;
  }
  body { background: none; }
  html.is-locked body { position: static; }
  /* No reading chrome, nothing to tap. */
  .bar, .progress, .menu, .secnav, .scrim, .sheet, .toast, .toc, .share, .related, .foot-nav, .code-copy { display: none !important; }
  /* Everything still waiting to slide in is simply there. */
  .reveal, .reveal.is-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sec-head.is-pending .sec-line::after, .fig.is-pending .fig-media > * { transform: none !important; }
  .fig-media::after { display: none; }
  .site-foot { margin-top: 40px; }
  /* Code can't scroll on paper: long lines wrap. */
  .code pre { white-space: pre-wrap; overflow: visible; overflow-wrap: anywhere; }
  /* Page breaks: a heading stays with what follows it; code, pictures, quotes, callouts and notes aren't split. */
  .sec-head, .prose h3, .label { break-after: avoid; page-break-after: avoid; break-inside: avoid; }
  .code, .fig, .a-cover, .quote, .callout, .seealso, .notes li, .byline, .prose .list > li { break-inside: avoid; page-break-inside: avoid; }
  .prose p, .callout-text, .notes p { orphans: 3; widows: 3; }
  /* Links: still underlined, with the address written out after them (app.js marks which need it). */
  a[data-print]::after { content: " (" attr(data-print) ")"; font: 400 0.8em/1.4 var(--f-sans); color: var(--ink-2); overflow-wrap: anywhere; }
  .seealso[data-print]::after { grid-column: 1 / -1; padding-top: 2px; }
}