/* style.css — a faithful Tufte reading surface for a literate projection.
 *
 * Base metrics are adapted directly from tufte.css (et-book / Palatino, the
 * 87.5%-wide page with a 12.5% left margin, the 55% text column, floating
 * sidenotes, large light headings, thin offset underlines). Our additions —
 * the navigation, the margin metadata + related rail, the ink dependency
 * graph, dark mode — are layered below and kept inside the same language. */

/* ======================================================================== */
/* Tufte base                                                               */
/* ======================================================================== */

/* et-book — the real Tufte face (roman, display-italic, bold). Self-hosted. */
@font-face {
  font-family: "et-book";
  src: url("et-book/et-book-roman-line-figures.woff") format("woff"),
       url("et-book/et-book-roman-line-figures.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("et-book/et-book-display-italic-old-style-figures.woff") format("woff"),
       url("et-book/et-book-display-italic-old-style-figures.ttf") format("truetype");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("et-book/et-book-bold-line-figures.woff") format("woff"),
       url("et-book/et-book-bold-line-figures.ttf") format("truetype");
  font-weight: bold; font-style: normal; font-display: swap;
}
/* The old-style-figures face Tufte uses for sidenote numerals and .numeral. */
@font-face {
  font-family: "et-book-roman-old-style";
  src: url("et-book/et-book-roman-old-style-figures.woff") format("woff"),
       url("et-book/et-book-roman-old-style-figures.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --bg: #fffff8;
  --fg: #111111;
  --muted: #67625a;
  --faint: #807a6d;
  --rule: #e6e0cf;
  --rule-ink: #c9c2ad;
  --contrast: #a00000;        /* used very sparingly */
  --code-bg: #f7f2e4;
  --serif: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  --mono: "Consolas", "Liberation Mono", Menlo, "SF Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15140f;
    --fg: #e9e2d0;
    --muted: #a79f8c;
    --faint: #8a8374;
    --rule: #38332a;
    --rule-ink: #4f4a3c;
    --contrast: #e08a6a;
    --code-bg: #1e1c15;
  }
}

html { font-size: 15px; }

/* The book: a fixed geometry on every page — left shoulder (the tree), the
 * text block, right shoulder (sidenotes). The landing page simply leaves the
 * left shoulder unprinted; the widths never change. */
body {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  counter-reset: sidenote-counter;
}

.book { display: grid; grid-template-columns: 16rem minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
/* The shoulder must span the full row height or its sticky tree has no
 * room to travel and scrolls away with the page. */
.shoulder { min-width: 0; align-self: stretch; }
.shoulder .tree {
  position: sticky;
  top: 1.6rem;
  max-height: calc(100vh - 3.2rem);
  overflow-y: auto;
  overflow-x: hidden;
  /* First line aligns with the page title: article top padding (5rem) +
   * kicker line and gap (~1.74rem) + h1 top margin (1.5rem). */
  margin: 8.2rem 0 0;
  padding: 0 .4rem 1rem 1.7rem; /* the left pad is the manicule's gutter */
}

/* Tufte relies on the default content-box so width 87.5% + padding-left 12.5%
 * sum correctly. Apply border-box only to the few padded boxes that want it. */
.search-box, pre.code, .proj-card { box-sizing: border-box; }

/* Tufte gives the whole article generous top and bottom breathing room. */
article { padding: 5rem 0; }

h1, h2, h3, h4 { font-weight: 400; }
h1 { font-size: 3.2rem; margin: 1.5rem 0 1.5rem; line-height: 1; }
/* titles, subtitles, and headings stay inside the text block — the right
 * shoulder belongs to the margin notes */
article > header, main h2, main h3, main h4 { width: 55%; }
h2 { font-style: italic; font-size: 2.2rem; margin: 2.1rem 0 1.4rem; line-height: 1; }
h3 { font-style: italic; font-size: 1.7rem; margin: 2rem 0 1.4rem; line-height: 1; }
h4 { font-style: italic; font-size: 1.3rem; margin: 1.6rem 0 1rem; line-height: 1; color: var(--muted); }

p.subtitle { font-style: italic; margin: 1rem 0; font-size: 1.8rem; display: block; line-height: 1.1; color: var(--muted); }

p, dl, ol, ul { font-size: 1.4rem; line-height: 2rem; }
p { margin: 1.4rem 0; }
/* Tufte wraps each section in its own <section> with vertical padding; that
 * padding does not collapse with the paragraph margins, so the gap between
 * sections is additive — the breath that a single body <section> lacks. */
section { padding-top: 1rem; padding-bottom: 1rem; }
section > p, section > footer, section > table { width: 55%; }
section > dl, section > ol, section > ul { width: 50%; padding-inline-start: 5%; }
/* Tufte spaces only non-first items, by their top margin (no leading gap). */
dt:not(:first-child), li:not(:first-child) { margin-top: .25rem; }

strong { font-weight: 600; }
em { font-style: italic; }
span.newthought { font-variant: small-caps; font-size: 1.2em; }

/* links: ink, thin offset underline, no mouseover change (Tufte). The underline
 * is the same ink as the text; prose links do not restyle on hover. */
a:link, a:visited { color: inherit; text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .1em; }
a:focus-visible { outline: 2px solid var(--contrast); outline-offset: 2px; }
a.bare, a.bare:link { text-decoration: none; }

/* sidenotes & margin-notes — the right shoulder of the book: text block 55%,
 * a gutter, notes ~32%, ending inside the page edge. Two contexts share that
 * geometry: notes authored inside a paragraph (percentages relative to the
 * 55% column) and notes injected as section-level blocks (percentages
 * relative to the full text area). */
.sidenote, .marginnote {
  float: right;
  clear: right;
  margin-right: -67%;   /* inside a 55%-wide paragraph: lands in the shoulder */
  width: 58%;
  margin-top: .3rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
}
section > .marginnote { margin-right: 3%; width: 32%; } /* section-level: same shoulder */
/* a note set inside an excerpt reaches further into the margin (Tufte) */
blockquote .sidenote, blockquote .marginnote { margin-right: -82%; min-width: 59%; text-align: left; }
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number:after, .sidenote .sn-num:before { font-family: "et-book-roman-old-style"; position: relative; vertical-align: baseline; }
.sidenote-number:after { content: counter(sidenote-counter); font-size: 1rem; top: -.5rem; left: .1rem; }
.sidenote .sn-num:before { content: counter(sidenote-counter) " "; font-size: 1rem; top: -.5rem; }

/* Destination notes: the arrow slug is the note's TITLE line; the comment
 * beneath interprets the edge (nothing is presented uninterpreted). The
 * block is pulled up by the slug's height so the numbered first line still
 * aligns with its in-body marker; when stacked notes push one down, the
 * slug-above-comment bond still holds. */
.sidenote .dest-slug, .marginnote .dest-slug { display: block; font-style: normal; line-height: 1.3; margin-bottom: .1rem; }
.sidenote .dest-slug a, .marginnote .dest-slug a { color: var(--muted); text-decoration: none; }
.sidenote .dest-slug a:hover, .marginnote .dest-slug a:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: .05em; }
.sidenote.has-dest, .marginnote.has-dest { margin-top: calc(.3rem - 1.53em); }
input.margin-toggle { display: none; }
label.sidenote-number { display: inline-block; max-height: 2rem; }
label.margin-toggle:not(.sidenote-number) { display: none; }

/* Excerpts — a plain Markdown > blockquote and a div.epigraph blockquote are
 * styled identically: indented from the text column, italic, muted, with any
 * attribution footer set right. */
blockquote, .epigraph > blockquote { font-size: 1.4rem; margin: 1.6rem 0; padding-left: 2.5rem; }
blockquote p, .epigraph > blockquote > p { width: 48%; margin-right: 0; font-style: italic; color: var(--muted); }
blockquote.prompt p { color: var(--fg); }
blockquote footer, .epigraph > blockquote > footer { width: 48%; margin: .3rem 0 0; font-style: normal; text-align: right; color: var(--faint); font-size: 1.1rem; }

/* Full Tufte vocabulary — reachable from content via raw-HTML passthrough
 * (inline tags and ::: blocks). These complete the classes tufte.css expects. */
.sans { font-family: "Gill Sans", "Gill Sans MT", Calibri, "Helvetica Neue", Arial, sans-serif; letter-spacing: .03em; font-feature-settings: "liga" 0; }
section section { margin-top: 2.1rem; }                 /* author <section> for vertical grouping */
.marginnote img, .marginnote svg, .sidenote img, .sidenote svg { width: 100%; height: auto; display: block; margin: .3rem 0; }
img { max-width: 100%; height: auto; }
figure svg, figure img { max-width: 100%; height: auto; display: block; }
figure.fullwidth { max-width: 90%; clear: both; }
figure.fullwidth img, figure.fullwidth svg { width: 100%; }
div.fullwidth, table.fullwidth { width: 100%; }
/* div.epigraph wrapper just adds spacing; its blockquote matches the excerpt
 * rule above, so an authored epigraph and a Markdown > excerpt look identical. */
.epigraph { margin: 1.6rem 0 2.4rem; }

/* Code is naked (no box), monospace, per the authority. Inline code sits in the
 * prose; a block indents 2.5% and scrolls long lines within its column. */
code { font-family: var(--mono); font-size: 1rem; line-height: 1.42; }
.sans > code { font-size: 1.2rem; }
h1 > code, h2 > code, h3 > code { font-size: .8em; }
.marginnote > code, .sidenote > code { font-size: 1rem; }
pre.code { margin: 1.6rem 0; }
pre.code > code { display: block; width: 52.5%; margin-left: 2.5%; overflow-x: auto; font-size: .9rem; line-height: 1.45; white-space: pre; }
pre.code.wide > code, pre.fullwidth > code { width: 90%; }

table { border-collapse: collapse; font-size: 1.1rem; line-height: 1.5; margin: 1.4rem 0; }
th, td { border: none; border-bottom: 1px solid var(--rule); padding: .35rem 1.2rem .35rem 0; text-align: left; vertical-align: top; }
th { font-style: italic; font-weight: 400; border-bottom: 1px solid var(--rule-ink); }
div.table-wrapper { overflow-x: auto; font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; }

/* hr is a thematic break within the text column (Tufte: 55%, not full width). */
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0; width: 55%; }

.fullwidth { max-width: 90%; clear: both; }
/* Tufte figures default to the text column (55%); the caption floats into the
 * margin rather than sitting below it. .fullwidth widens to 90%. */
figure { max-width: 55%; margin: 0 0 3em; }
figcaption { float: right; clear: right; max-width: 40%; margin: 0; font-size: 1.1rem; line-height: 1.6; vertical-align: baseline; position: relative; }
figure.fullwidth figcaption { margin-right: 24%; }

/* old-style numerals, the danger accent, and superscript line-height (Tufte) */
.numeral { font-family: "et-book-roman-old-style"; }
.danger { color: red; }
sup { line-height: 0; }

/* skip link */
.skip { position: absolute; left: -999px; }
.skip:focus { left: .5rem; top: .5rem; background: var(--fg); color: var(--bg); padding: .4rem .8rem; }

/* ======================================================================== */
/* Our additions — Tufte-toned                                              */
/* ======================================================================== */

/* navigation: a quiet line of italics, no chrome */
/* The masthead is intentionally blank: the brand name now lives at the root
 * of every page's slug path. The band is kept (visibility, not display) so the
 * content does not shift up, and the divider is gone. */
.spine {
  font-size: 1rem;
  padding: .8rem 0;
  margin: 0 0 1rem;
  visibility: hidden;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .15rem;
}
.spine a { color: var(--muted); text-decoration-color: transparent; padding: 0 .15rem; font-style: italic; }
.spine a:hover { color: var(--fg); text-decoration-color: var(--rule-ink); }
.spine .brand { color: var(--fg); font-style: normal; letter-spacing: .04em; }
.spine .sep { color: var(--faint); }
.spine [aria-current="page"] { color: var(--fg); }
.spine .agent-door { margin-left: auto; }
.spine .stage-flag { color: var(--contrast); }

main { display: block; }

/* the related rail (the "ask your agent" prompt) lives in the margin */
.marginnote.related { color: var(--muted); }
.marginnote .mn-head { display: block; font-style: italic; font-size: .92em; color: var(--faint); margin-bottom: .1rem; }
.marginnote .draftmark { font-variant: small-caps; font-size: .82em; letter-spacing: .03em; color: var(--faint); }

/* unresolved targets: a planned page is faint and carries no anchor; a link
 * that resolves only in the draft projection keeps the link form, dotted */
.planned { color: var(--faint); }
a.xdraft { text-decoration-style: dotted; }

/* stability labels — small-caps text, not boxes */
.chip { font-variant: small-caps; letter-spacing: .03em; font-style: normal; }
.chip-research { color: var(--contrast); }
.chip-stable, .chip-evolving, .chip-historical { color: var(--muted); }

/* the tree — THE canonical navigation object. Native disclosure (<details>),
 * no JS: the arrow expands or collapses without navigating; the title is the
 * link. Down is the reading order, right is depth. */
.tree { font-size: 1.05rem; }
.tree ul { list-style: none; padding: 0; margin: 0; width: 100%; font-size: 1em; line-height: 1.75; }
.tree ul ul { padding-left: 1.1rem; }
.tree li { margin: .1rem 0; padding-left: 0; }
.tree li.leaf { padding-left: 1.3rem; }
.tree li.leaf::before { content: "·"; color: var(--faint); display: inline-block; width: 1.05rem; margin-left: -1.3rem; text-align: center; }
/* hanging indent: a wrapped title's next line aligns under its first
 * character, never back under the arrow or dot */
.tree summary { cursor: pointer; list-style: none; padding-left: 1.3rem; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: "▸"; display: inline-block; width: 1.3rem; margin-left: -1.3rem; color: var(--faint); }
.tree details[open] > summary::before { content: "▾"; color: var(--muted); }
.tree summary:hover::before { color: var(--fg); }
.tree summary:focus-visible { outline: 2px solid var(--contrast); outline-offset: 2px; }
.tree a.tlink { color: var(--muted); text-decoration: none; }
.tree a.tlink:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: .05em; }
.tree a.tlink.you { color: var(--fg); font-style: italic; }
/* the manicule — the classical "you are here" — hangs in the gutter to the
 * left of the arrow or dot, so indentation never shifts */
.tree li.you-li { position: relative; }
.tree li.you-li::after { content: "☞"; position: absolute; left: -1.55rem; top: 0; color: var(--fg); }


/* breadcrumb kicker above the title */
.kicker { font-variant: small-caps; letter-spacing: .08em; font-size: 1.1rem; color: var(--muted); margin: 0 0 .2rem; }
.kicker a { color: var(--muted); text-decoration: none; }
.kicker a:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: .05em; }
.kicker .here-crumb { color: var(--fg); }
.ksep { color: var(--faint); }
.kicker .status-sep { color: var(--faint); margin: 0 .45rem 0 .65rem; }
.kicker .chip { letter-spacing: .04em; }

/* contents — the tree as a table of contents; indentation is depth */
.toc { list-style: none; padding: 0; margin: 0; width: 60%; }
.toc li { display: flex; align-items: baseline; gap: .9rem; margin: .35rem 0; font-size: 1.3rem; padding-left: calc(var(--d, 0) * 1.7rem); }
.toc li[style*="--d:0"] { margin-top: .9rem; }
.toc-n { color: var(--faint); min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .85em; }
.toc li a { flex: 1; }

/* T0 homepage lists: belief / pillar lines with their one-sentence claims */
.t0-list { list-style: none; padding: 0; width: 65%; }
.t0-list li { margin: .7rem 0; font-size: 1.35rem; }
.t0-list .t0-def { display: block; color: var(--muted); font-size: .85em; line-height: 1.6; }

.mirrors { font-size: 1rem; color: var(--muted); }

footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 1.05rem; width: 100%; }
footer p { width: 60%; margin: 0; }
footer a { color: var(--muted); }

/* homepage */
.home .wordmark { font-size: 3.2rem; margin: 1.5rem 0 .4rem; letter-spacing: .02em; }
.home .tagline { font-style: italic; font-size: 1.8rem; color: var(--muted); margin: 0 0 1.2rem; }
/* the home body reuses the measured text column; its linked section headings
 * are the doors deeper */
.home section > p { width: 55%; }
.home .epigraph { width: 55%; font-style: italic; font-size: 1.4rem; color: var(--fg); margin: 0 0 2rem; }
.home section h2 { width: 55%; }
.home section h2 a { text-decoration: none; }
.home section h2 a:hover { text-decoration: underline; text-decoration-thickness: .04em; }
/* the destination tag — a Tufte margin comment beside a section heading: where
 * this section leads. Quiet, upright, aligned to the heading's first line. */
.marginnote.dest { font-style: normal; font-size: 1.1rem; margin-top: .9rem; }
.marginnote.dest a { color: var(--muted); text-decoration: none; }
.marginnote.dest a:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: .05em; }
.home-doors { width: 55%; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1.05rem; color: var(--muted); }
.home-doors a { color: var(--muted); }
.home-doors a:hover { color: var(--fg); }

/* The chromatic geodesic sphere is the one colour event on the page. It is a
 * mark beside the wordmark, not a status display. */
.sphere-cv { display: block; }

/* Inline beside the wordmark, anchored to the text baseline. The
 * sphere is centred in a square canvas with padding all round, so it reads a bit
 * high; translateY drops its visual bottom onto the bottom edge of the
 * "Geodesic" glyphs (margin-bottom is ignored under baseline alignment, so
 * translate is the real knob). */
.home-title-row { display: flex; align-items: baseline; gap: .55rem; }
.sphere-cv-logo { width: 4.6rem; height: 4.6rem; transform: translateY(8px); }

/* listing pages */
.glossary { width: 55%; }
.glossary .term { border-top: 1px solid var(--rule); padding: .6rem 0; }
.glossary dt { font-style: italic; font-size: 1.3rem; }
.glossary dd { margin: .2rem 0 0; color: var(--muted); font-size: 1.2rem; }
table.claims { width: 90%; }
table.claims td.clm-id { font-variant: small-caps; white-space: nowrap; }
.search-box { width: 55%; font-family: var(--serif); font-size: 1.3rem; padding: .5rem .7rem; background: var(--bg); color: var(--fg); border: 1px solid var(--rule-ink); }
.search-results { width: 55%; list-style: none; padding: 0; }
.search-results li { border-top: 1px solid var(--rule); padding: .6rem 0; font-size: 1.2rem; }
.search-results li[hidden] { display: none; }
.res-def { color: var(--muted); font-size: 1.05rem; }

/* the chooser — control room */
.chooser .wordmark { font-size: 3rem; }
.chooser .lede { font-style: italic; font-size: 1.6rem; color: var(--muted); width: 70%; }
.projections { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 2.4rem 0; width: 90%; }
.proj-card { display: block; text-decoration: none; border-top: 2px solid var(--fg); padding-top: 1rem; }
.proj-card .count { font-size: 3.4rem; line-height: 1; }
.proj-card .count small { font-style: italic; font-size: 1.1rem; color: var(--muted); }
.proj-card h2 { margin: .4rem 0; font-size: 1.8rem; }
.proj-card p { width: auto; font-size: 1.2rem; }
.proj-card .enter { font-style: italic; color: var(--muted); }
.proj-card.is-draft { border-top-color: var(--rule-ink); }

/* ======================================================================== */
/* Responsive (Tufte)                                                       */
/* ======================================================================== */

@media (max-width: 760px) {
  body { width: 84%; padding-left: 8%; padding-right: 8%; }
  hr, section > p, section > footer, section > table,
  .home section > p, .home .epigraph, .home section h2, .home-doors, .glossary, .toc, .search-box, .search-results, blockquote p, blockquote footer, .epigraph > blockquote > p, .epigraph > blockquote > footer, footer p {
    width: 100%;
  }
  .book { grid-template-columns: 1fr; }
  .shoulder { order: 2; }
  .shoulder .tree { position: static; max-height: none; overflow: visible; margin: 3rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule-ink); }
  section > dl, section > ol, section > ul { width: 90%; }
  pre.code > code, pre.code.wide > code { width: 97%; }
  figure { max-width: 90%; }
  figcaption, figure.fullwidth figcaption { margin-right: 0; max-width: none; }
  table.claims, .projections { width: 100%; }
  .projections { grid-template-columns: 1fr; }
  label.margin-toggle:not(.sidenote-number) { display: inline; color: var(--contrast); cursor: pointer; }
  .sidenote, .marginnote { display: none; }
  .margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote {
    display: block; float: left; left: 1rem; clear: both; width: 95%; margin: 1rem 2.5%; position: relative;
  }
  /* the ask-your-agent prompt stays visible, reflowed inline */
  .marginnote.related {
    display: block; float: none; width: 100%; margin: .8rem 0; padding-left: .8rem; border-left: 2px solid var(--rule);
  }
}

@media print {
  .spine, .skip, .shoulder, .kicker, footer { display: none; }
  .book { display: block; }
  body { color: #000; background: #fff; }
}

/* ------------------------------------------------------------------ */
/* Colophon — bibliographic apparatus (AGENT-NATIVE.md Phase 1): the   */
/* page's Lurk identity and the text license. Quiet by design.        */
.colophon {
  margin-top: 5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  width: 55%;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.45);
}
.colophon .colo-id { word-break: break-all; }
.colophon .colo-license { white-space: nowrap; }
@media (max-width: 760px) { .colophon { width: 100%; } }
@media (prefers-color-scheme: dark) {
  .colophon { border-top-color: rgba(221, 221, 221, 0.18); color: rgba(221, 221, 221, 0.4); }
}

/* ------------------------------------------------------------------ */
/* The drill lens: on a content page the tree renders whole, but only  */
/* the reader's actual moves carry full ink — you, the path up         */
/* (ancestors), and the paths down (children). The rest recedes.       */
.page .tree .tlink { color: var(--muted); }
.page .tree .tlink:hover { color: var(--fg); }
.page .tree .tlink.you,
.page .tree .tlink.anc,
.page .tree .tlink.kid { color: var(--fg); }