/* aaronrcarmichael.com — registry stylesheet
   two surfaces: .panel (instrument, dark) and .paper (document, bone)
   no frameworks. square corners. hairlines. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Newsreader";
  src: url(/assets/fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url(/assets/fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url(/assets/fonts/ibm-plex-mono-latin-400-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pitch: #131210;
  --pitch-deep: #0c0b0a;
  --bone: #f4f4f1;
  --bone-dim: #aaa79e;
  --graphite: #8c887e;
  --oxide: #5b8880;
  --oxide-ink: #3d6b63;
  --signal: #e65f49;
  --signal-ink: #9c2e20;

  --hairline: #2c2a26;      /* on panel */
  --hairline-lt: #d9d6cd;   /* on paper */

  --measure: 66ch;
  --rail: 13.5rem;
  --pad: clamp(1rem, 3.5vw, 2.75rem);
}

/* ---------- reset-ish ---------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--hairline) var(--pitch);
}

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

img, video, canvas { display: block; max-width: 100%; height: auto; }

/* ---------- surfaces ---------- */

body.panel {
  background: var(--pitch);
  color: var(--bone);
}
body.panel ::selection { background: var(--bone); color: var(--pitch); }

body.paper {
  --graphite: #5d5a54;
  --signal: #a22f20;
  background: var(--bone);
  color: #1a1918;
  scrollbar-color: var(--hairline-lt) var(--bone);
}
body.paper ::selection { background: #1a1918; color: var(--bone); }

/* ---------- links: inversion on hover, inherited from site v1 ---------- */

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { background: var(--bone); color: var(--pitch); text-decoration: none; }
body.paper a:hover { background: #1a1918; color: var(--bone); }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 0;
}

.skip {
  position: absolute; left: -100vw; top: 0;
  font-family: var(--mono); font-size: .75rem;
  padding: .5rem .75rem; background: var(--signal-ink); color: var(--bone);
  z-index: 10; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- type utilities ---------- */

.mono, .stamp, .crumbs, nav.rail-nav, .ledger, .plate figcaption,
.rule-label, .frame-note, .provenance, .fine, .obj-table {
  font-family: var(--mono);
}

.label {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
body.paper .label { color: var(--graphite); }

/* section rule with a label riding the line */
.rule-label {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-dim);
  margin: 3rem 0 1.25rem;
}
.rule-label::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); align-self: center; }
body.paper .rule-label { color: var(--graphite); }
body.paper .rule-label::after { border-color: var(--hairline-lt); }
.rule-label a { color: inherit; }

/* ---------- layout: rail + content ---------- */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3rem;
  padding: var(--pad);
  max-width: 78rem;
}
@media (min-width: 54rem) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .rail { position: sticky; top: var(--pad); align-self: start; }
}

.rail { margin-bottom: 2.5rem; }

.sitemark {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.sitemark:hover { background: none; color: inherit; }
.sitemark:hover .sitemark-name { background: var(--bone); color: var(--pitch); }
body.paper .sitemark:hover .sitemark-name { background: #1a1918; color: var(--bone); }
.mark-code {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline);
  flex: none;
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: .55rem;
  font-style: normal;
  line-height: 32px;
  text-align: center;
}
.mark-code i {
  border-right: 1px solid var(--hairline);
  font-style: normal;
}
.mark-code i:last-child { border-right: 0; color: var(--signal); }
body.paper .mark-code { border-color: var(--hairline-lt); color: var(--graphite); }
body.paper .mark-code i { border-color: var(--hairline-lt); }
.sitemark img {
  width: 34px; height: 34px; object-fit: cover;
  border: 1px solid var(--hairline);
  filter: contrast(1.05);
}
body.paper .sitemark img { border-color: var(--hairline-lt); }
.sitemark-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
}
.sitemark-sub {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-top: .15rem;
}

@supports (view-transition-name: none) {
  .rail { view-transition-name: site-rail; }
  main > .crumbs,
  .home-mast { view-transition-name: page-origin; }
}

nav.rail-nav { margin-top: 1.75rem; font-size: .8125rem; }
nav.rail-nav ul { list-style: none; padding: 0; }
nav.rail-nav li { margin: 0; }
nav.rail-nav a {
  display: inline-block;
  padding: .22rem 0;
  text-decoration: none;
  color: var(--bone-dim);
}
body.paper nav.rail-nav a { color: var(--graphite); }
nav.rail-nav a:hover { background: var(--bone); color: var(--pitch); }
body.paper nav.rail-nav a:hover { background: #1a1918; color: var(--bone); }
nav.rail-nav a[aria-current="page"] { color: inherit; }
nav.rail-nav a[aria-current="page"]::before { content: "▪ "; color: var(--signal); }
nav.rail-nav .nav-index { margin-top: 1rem; }

.rail-foot { margin-top: 2rem; font-family: var(--mono); font-size: .6875rem; color: var(--graphite); }
.rail-foot a { color: inherit; display: inline-block; min-height: 24px; line-height: 24px; }

@media (max-width: 53.99rem) {
  nav.rail-nav ul { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
  nav.rail-nav .nav-index { margin-top: 0; }
  .rail-foot { display: none; }
}

/* ---------- crumbs ---------- */

.crumbs {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 2.25rem;
}
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { background: var(--bone); color: var(--pitch); }
body.paper .crumbs a:hover { background: #1a1918; color: var(--bone); }

/* ---------- stamps (status) ---------- */

.stamp {
  display: inline-block;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .12rem .45rem .1rem;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
}
.stamp.raw        { color: var(--signal); }
.stamp.live       { background: var(--oxide); border-color: var(--oxide); color: var(--pitch-deep); }
body.paper .stamp.live { background: var(--oxide-ink); border-color: var(--oxide-ink); color: var(--bone); }
.stamp.developing { color: var(--oxide); }
body.paper .stamp.developing { color: var(--oxide-ink); }
.stamp.unresolved { color: #d0a76c; border-style: dotted; }
.stamp.published  { color: inherit; }
.stamp.abandoned  { color: var(--graphite); border-style: dashed; }
.stamp.dormant    { color: var(--graphite); border-style: dashed; }
.stamp.preserved  { color: var(--graphite); }
.stamp.private    { color: var(--graphite); border-style: dotted; }

/* ---------- ledger (index tables with dotted leaders) ---------- */

.ledger { list-style: none; padding: 0; font-size: .8125rem; }
.ledger li { display: flex; align-items: baseline; gap: .6rem; padding: .34rem 0; }
.ledger .l-id { color: var(--graphite); font-size: .6875rem; letter-spacing: .04em; flex: none; }
.ledger .l-title { min-width: 0; }
.ledger .l-title a { text-decoration: none; }
.ledger .l-title a:hover { background: var(--bone); color: var(--pitch); }
body.paper .ledger .l-title a:hover { background: #1a1918; color: var(--bone); }
.ledger .l-dots { flex: 1; border-bottom: 1px dotted var(--hairline); min-width: 1.5rem; transform: translateY(-3px); }
body.paper .ledger .l-dots { border-color: var(--hairline-lt); }
.ledger .l-kind { color: var(--bone-dim); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; flex: none; }
body.paper .ledger .l-kind { color: var(--graphite); }
.ledger .l-date { color: var(--graphite); font-size: .6875rem; flex: none; font-variant-numeric: tabular-nums; }
.ledger .serif-title { font-family: var(--serif); font-size: 1rem; }

@media (max-width: 40rem) {
  .ledger .l-kind { display: none; }
  .ledger .l-id { display: none; }
}

/* ---------- plates (photographs) ---------- */

.plate { margin: 0 0 3rem; }
.plate .plate-img {
  position: relative;
  background: var(--pitch-deep);
  border: 1px solid var(--hairline);
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.plate .plate-img::before, .plate .plate-img::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
}
.plate .plate-img::before { top: -1px; left: -1px; border-top: 1px solid var(--bone-dim); border-left: 1px solid var(--bone-dim); }
.plate .plate-img::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--bone-dim); border-right: 1px solid var(--bone-dim); }
.plate img { width: 100%; }
.plate figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem 1.25rem;
  padding-top: .6rem;
  font-size: .6875rem;
  letter-spacing: .05em;
  color: var(--bone-dim);
}
.plate figcaption .plate-no { color: var(--bone); font-weight: 500; letter-spacing: .12em; }
.plate figcaption .plate-desc { font-family: var(--serif); font-size: .9375rem; letter-spacing: 0; color: var(--bone); }
.plate figcaption .provenance { grid-column: 2; color: var(--graphite); }

/* ---------- empty/current field surface ---------- */

.field-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--hairline);
}
.field-head h1 {
  margin-top: .4rem;
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 430;
  line-height: 1;
}
.field-count {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field-count strong {
  color: var(--bone);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 350;
}
.empty-field {
  display: grid;
  place-content: center;
  min-height: min(58svh, 34rem);
  margin-top: 1px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px));
}
.empty-field p {
  max-width: 52ch;
  padding: 0 1rem;
  text-align: center;
  color: var(--bone-dim);
  font-size: .9rem;
}
.empty-field p + p { margin-top: .7rem; color: var(--graphite); font-family: var(--mono); font-size: .6875rem; }
@media (max-width: 40rem) {
  .field-head { grid-template-columns: 1fr; }
  .field-count { justify-content: space-between; }
}

/* ---------- prose (paper reading) ---------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose p { hanging-punctuation: first; }
.prose h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 460;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: .35em;
  text-wrap: balance;
}
.prose h2 { font-size: 1.3rem; font-weight: 550; margin-top: 2em; }
.prose em { font-style: italic; }
.prose ul { padding-left: 1.2em; }
.prose blockquote {
  border-left: 2px solid var(--hairline-lt);
  padding-left: 1.1em;
  font-style: italic;
}
body.panel .prose blockquote { border-color: var(--hairline); }
.prose code { font-family: var(--mono); font-size: .84em; }
.prose hr { border: 0; border-top: 1px solid var(--hairline-lt); margin: 2.5rem 0; }
.prose .context {
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.65;
}

.entry-head { margin-bottom: 2.5rem; }
.entry-head .entry-meta {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center;
  margin-top: .9rem;
}

/* source notes — editorial context, never Aaron-authored prose */
.frame-note {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--graphite);
  border: 1px solid var(--hairline-lt);
  border-left: 2px solid var(--graphite);
  padding: .75rem .9rem;
  max-width: var(--measure);
  margin: 2rem 0;
}
body.panel .frame-note { border-color: var(--hairline); border-left-color: var(--graphite); color: var(--bone-dim); }
.frame-note .label { display: block; margin-bottom: .35rem; }

/* raw text preserved verbatim */
.verbatim-raw {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.7;
  white-space: pre-wrap;
  background: #ecebe6;
  border: 1px dashed var(--hairline-lt);
  padding: 1rem 1.1rem;
  color: #3c3a36;
}
body.panel .verbatim-raw { background: var(--pitch-deep); border-color: var(--hairline); color: var(--bone-dim); }

.source-quote {
  margin: 2.25rem 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 360;
  font-style: italic;
  line-height: 1.3;
  hanging-punctuation: first;
}
.source-quote.compact { font-size: clamp(1.12rem, 2.4vw, 1.45rem); }
.source-trace {
  margin: 1rem 0 2rem;
  border-top: 1px solid var(--hairline-lt);
  border-bottom: 1px solid var(--hairline-lt);
}
body.panel .source-trace { border-color: var(--hairline); }
.source-trace summary {
  padding: .55rem 0;
  cursor: pointer;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  list-style: none;
  text-transform: uppercase;
}
.source-trace summary::-webkit-details-marker { display: none; }
.source-trace summary::before { content: "+ "; color: var(--signal); }
.source-trace[open] summary::before { content: "− "; }
.source-trace div {
  padding: .2rem 0 .75rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.65;
}
.source-trace code {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: inherit;
}

.dated-sequence { list-style: none; padding: 0; }
.dated-sequence > li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.3rem 0 1.6rem;
  border-top: 1px solid var(--hairline-lt);
}
body.panel .dated-sequence > li { border-color: var(--hairline); }
.dated-sequence time {
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}
.dated-sequence blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.4;
}
.dated-sequence h2 {
  margin: 0 0 .45rem;
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
}
body.paper .dated-sequence h2 { color: var(--graphite); }
.dated-sequence p + p { margin-top: .65rem; }
.dated-sequence .sequence-note {
  margin-top: .65rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.6;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
body.paper .pipeline { border-color: var(--hairline-lt); }
.pipeline li {
  position: relative;
  min-height: 7rem;
  padding: .8rem 1rem .8rem 0;
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.5;
}
body.paper .pipeline li { color: var(--graphite); }
.pipeline li + li { padding-left: 1rem; border-left: 1px solid var(--hairline); }
body.paper .pipeline li + li { border-color: var(--hairline-lt); }
.pipeline li + li::before {
  content: "→";
  position: absolute;
  top: .75rem;
  left: -.45rem;
  padding: 0 .12rem;
  background: var(--pitch);
  color: var(--signal);
}
body.paper .pipeline li + li::before { background: var(--bone); }
.pipeline strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--bone);
  font-weight: 500;
  text-transform: uppercase;
}
body.paper .pipeline strong { color: #1a1918; }
@media (max-width: 48rem) {
  .pipeline { grid-template-columns: 1fr; }
  .pipeline li { min-height: 0; padding: .75rem 0; }
  .pipeline li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  body.paper .pipeline li + li { border-color: var(--hairline-lt); }
  .pipeline li + li::before { content: "↓"; top: -.72rem; left: auto; right: .5rem; }
}
@media (max-width: 34rem) {
  .dated-sequence > li { grid-template-columns: 1fr; gap: .45rem; }
}

/* ---------- object registry table ---------- */

.obj-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.obj-table th {
  text-align: left; font-weight: 500; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite);
  border-bottom: 1px solid var(--hairline);
  padding: 0 1rem .45rem 0;
}
.obj-table td {
  border-bottom: 1px solid var(--hairline);
  padding: .55rem 1rem .55rem 0;
  vertical-align: baseline;
}
.obj-table td.obj-name { font-family: var(--serif); font-size: 1rem; white-space: nowrap; }
.obj-table td.obj-desc { color: var(--bone-dim); font-size: .75rem; max-width: 44ch; }
body.paper .obj-table th, body.paper .obj-table td { border-color: var(--hairline-lt); }
body.paper .obj-table td.obj-desc { color: var(--graphite); }
.obj-table a { text-decoration: none; border-bottom: 1px solid var(--graphite); }
.obj-table a:hover { border-bottom: none; }
@media (max-width: 40rem) {
  .obj-table td.obj-desc { display: none; }
  .obj-table th:nth-child(2) { display: none; }
}

/* ---------- home index composition ---------- */

.section-code {
  font-family: var(--mono);
  color: var(--graphite);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: .25rem 0 1.35rem;
  border-bottom: 1px solid var(--hairline);
}
.home-mast h1 {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -.015em;
  margin-top: .45rem;
}
.mast-facts {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .045em;
  color: var(--bone-dim);
  min-width: min(22rem, 38vw);
}
.mast-facts div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: .8rem;
  padding: .18rem 0;
  border-bottom: 1px dotted var(--hairline);
}
.mast-facts dt { color: var(--graphite); text-transform: uppercase; }
.mast-facts dd { margin: 0; }
.live-tick {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .45rem;
  background: var(--signal);
  transform: translateY(-1px);
}

.home-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "question"
    "bench"
    "fragments"
    "thread"
    "listens"
    "field";
  gap: 0;
  container-type: inline-size;
}
.board-question { grid-area: question; }
.board-bench { grid-area: bench; }
.board-fragments { grid-area: fragments; }
.board-thread { grid-area: thread; }
.board-listens { grid-area: listens; }
.board-listens[hidden] { display: none !important; }
.board-field { grid-area: field; }

@media (min-width: 68rem) {
  .home-board {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .72fr);
    grid-template-areas:
      "question fragments"
      "bench fragments"
      "thread listens"
      "field field";
    gap: 0 3rem;
  }
}

.lead-question { padding: .15rem 0 .5rem; }
.lead-question blockquote {
  margin-top: .8rem;
  max-width: 28ch;
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  font-weight: 360;
  font-style: italic;
  line-height: 1.16;
  hanging-punctuation: first;
  text-wrap: pretty;
}
.lead-question footer,
.fragment-stream footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin-top: .9rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.lead-question footer a { margin-left: auto; }

.bench-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.bench-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: baseline;
  padding: .65rem 0 .72rem;
  border-bottom: 1px solid var(--hairline);
}
.bench-list .bench-no,
.bench-list time {
  font-family: var(--mono);
  color: var(--graphite);
  font-size: .625rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.bench-list a {
  font-size: 1.08rem;
  text-decoration: none;
}
.bench-list p {
  max-width: 52ch;
  margin-top: .18rem;
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.55;
}
.after-list {
  margin-top: .7rem;
  text-align: right;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fragment-stream { border-top: 1px solid var(--hairline); }
.fragment-stream article {
  padding: .75rem 0 .85rem;
  border-bottom: 1px solid var(--hairline);
}
.fragment-stream blockquote {
  color: var(--bone-dim);
  font-size: 1rem;
  line-height: 1.45;
  hanging-punctuation: first;
}
.fragment-stream article:first-child blockquote { color: var(--bone); }
.fragment-stream footer { margin-top: .55rem; }
.fragment-stream footer time { margin-left: auto; }

.thread-line { padding-top: .1rem; }
.thread-title {
  max-width: 28ch;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.2;
}
.thread-line ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  list-style: none;
  padding: 0;
}
.thread-line li {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .8rem 1.2rem 0 0;
  border-top: 1px solid var(--hairline);
}
.thread-line li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--pitch);
  border: 1px solid var(--oxide);
}
.thread-line time,
.thread-line li span {
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.thread-line a {
  width: fit-content;
  line-height: 1.25;
  text-decoration: none;
}
.thread-pull {
  margin-top: 1rem;
  padding: .35rem .65rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  color: var(--graphite);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.thread-pull::after { content: " ↻"; color: var(--signal); }
.thread-pull:hover { background: var(--bone); color: var(--pitch); }

.board-field {
  min-height: 10rem;
  margin-top: 2rem;
  padding-bottom: 1rem;
  background:
    linear-gradient(135deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px))
    right bottom / 8rem 8rem no-repeat;
}
.board-field p {
  max-width: 61ch;
  color: var(--bone-dim);
  font-size: .92rem;
}
.board-field > a {
  display: inline-block;
  margin-top: .7rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 44rem) {
  .home-mast { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .mast-facts { min-width: 0; width: 100%; }
  .home-board .rule-label { margin-top: 2.4rem; }
  .lead-question blockquote { max-width: none; }
  .bench-list li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .bench-list time { grid-column: 2; }
  .thread-line ol { grid-template-columns: 1fr; }
  .thread-line li { min-height: 4rem; padding-left: 1rem; border-top: 0; border-left: 1px solid var(--hairline); }
  .thread-line li::before { top: .35rem; left: -4px; }
}

.listens { font-family: var(--mono); font-size: .75rem; color: var(--bone-dim); }
.listens ol { list-style: none; padding: 0; }
.listens li { padding: .3rem 0; border-bottom: 1px solid var(--hairline); display: flex; gap: .75rem; align-items: baseline; }
.listens .t-artist { color: var(--bone); }
.listens .t-when { margin-left: auto; color: var(--graphite); font-size: .655rem; flex: none; }
.live-dot {
  display: inline-block; width: 7px; height: 7px;
  background: var(--signal); margin-right: .45rem;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* thumbnail strip on home */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.strip a { display: block; background: var(--pitch-deep); }
.strip a:hover { background: var(--pitch-deep); outline: 1px solid var(--bone-dim); outline-offset: -1px; }
.strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: saturate(.92); }
.strip a:hover img { filter: none; }

/* ---------- archive controls ---------- */

.arch-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.arch-controls button {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--hairline); color: var(--bone-dim);
  padding: .3rem .7rem; cursor: pointer;
}
.arch-controls button[aria-pressed="true"] { border-color: var(--bone); color: var(--bone); }
.arch-controls button:hover { background: var(--bone); color: var(--pitch); }
.arch-status { margin: -.7rem 0 1.25rem; }

/* ---------- footer ---------- */

.foot {
  margin-top: 4.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--graphite);
  display: flex; flex-wrap: wrap; gap: .3rem 2rem;
}
body.paper .foot { border-color: var(--hairline-lt); }
.foot a { color: inherit; }
.foot a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---------- attractor page ---------- */

.attractor-stage {
  border: 1px solid var(--hairline);
  background: var(--pitch-deep);
  position: relative;
  touch-action: none;
}
.attractor-stage canvas { width: 100%; height: auto; cursor: grab; }
.attractor-stage canvas:active { cursor: grabbing; }
.attractor-readout {
  position: absolute; left: .75rem; bottom: .6rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--graphite); pointer-events: none;
  white-space: pre;
}

/* ---------- fine print ---------- */

.fine { font-size: .6875rem; color: var(--graphite); line-height: 1.7; }

/* ---------- view transitions (cross-document) ---------- */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 130ms ease both; }
::view-transition-new(root) { animation: vt-in 150ms ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .live-dot { animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- print: everything becomes paper ---------- */

@media print {
  body.panel { background: #fff; color: #000; }
  .rail, .foot, .arch-controls { display: none; }
}