/* born.builders / philosophy — section design system.
   Shared by the spine essay, the audit instrument, and every door, so the
   recurring components (collision block, pull quote, door chooser, spine exit)
   get identical treatment everywhere — which is the brief's requirement, not a
   convenience: a reader has to be able to learn what the collision border means.

   Tokens: near-black on warm paper, one structural accent (--acc) for the door
   system, and one muted accent (--proc) reserved EXCLUSIVELY for the audit's
   process fields, so process/outcome separation stays legible at a glance and
   consistent across the section. Do not spend --proc on decoration. */

html[data-theme="dark"] {
  --bg: #191712;
  --ink: #ebe4d6;
  --mut: #a49a86;
  --line: rgba(235, 228, 214, .16);
  /* --line is a TEXT DIVIDER: near-invisible on purpose. Never use it for a
     diagram's structure — at 16% it measures 1.5:1 and the drawing disappears
     while its labels stay readable. --edge is the load-bearing stroke, tuned
     to clear the 3:1 minimum for graphical objects. */
  --edge: rgba(235, 228, 214, .42);
  --acc: #c5a266;
  --proc: #8cbca5;
  --card: #1f1c16;
}
html[data-theme="paper"] {
  --bg: #f4efe3;
  --ink: #221d14;
  --mut: #6f6759;
  --line: rgba(34, 29, 20, .18);
  --edge: rgba(34, 29, 20, .55);
  --acc: #8d6c26;
  --proc: #3e7a61;
  --card: #ede6d6;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 20px/1.68 "Newsreader", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 1px;
  text-underline-offset: 3.5px;
}
a:hover { color: var(--acc); }
::selection { background: var(--acc); color: var(--bg); }

.ui { font-family: "Archivo", system-ui, sans-serif; }
.cjk { font-family: "Noto Serif SC", "Songti SC", serif; }

/* ── header ─────────────────────────────────────────────────────────── */
.ph-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 36px;
  border-bottom: 1px solid var(--line);
  font-family: "Archivo", system-ui, sans-serif;
}
.ph-head-brand { display: flex; align-items: baseline; gap: 14px; }
.ph-brand {
  font-size: 13px;
  letter-spacing: .22em;
  font-weight: 600;
  text-decoration: none;
}
.ph-sec { font-size: 12px; letter-spacing: .18em; color: var(--mut); }
.ph-nav {
  display: flex;
  gap: 26px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .16em;
}
.ph-nav a, .ph-nav span.soon { text-decoration: none; }
.ph-nav a.here { color: var(--acc); }
.ph-theme {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 12px;
  cursor: pointer;
}
.ph-theme:hover { border-color: var(--ink); }

/* ── long-form article ──────────────────────────────────────────────── */
.ph-article { max-width: 704px; margin: 0 auto; padding: 84px 26px 40px; }
.ph-eyebrow {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--acc);
  margin-bottom: 26px;
}
.ph-article h1 {
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 62px;
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0 0 30px;
}
.ph-deck {
  font-size: 24px;
  line-height: 1.5;
  font-style: italic;
  color: var(--mut);
  margin: 0 0 18px;
}
/* where-this-goes note: every page announces its destination up front */
.ph-frontmatter {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mut);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 0 0 72px;
}
.ph-h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--mut);
  margin: 72px 0 22px;
}
.ph-h2:first-of-type { margin-top: 0; }
.ph-article p { margin: 0 0 26px; }

/* margin note */
.ph-note {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mut);
  border-top: 1px solid var(--line);
  margin: 30px 0 30px 22%;
  padding-top: 10px;
}

/* ── collision block — the section's signature ──────────────────────── */
/* Used wherever a page names its own strongest objection. Same treatment
   everywhere so the border itself becomes legible as a promise. */
.ph-collision {
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: 30px 32px;
  margin: 0 0 34px;
}
.ph-collision-label {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--acc);
  margin-bottom: 16px;
}
.ph-collision p { font-size: 18.5px; line-height: 1.66; }
.ph-collision p:last-child { margin-bottom: 0; }

/* ── derivation ladder ──────────────────────────────────────────────── */
/* Lets a reader BUILD the hierarchy instead of being handed it. Each rung
   carries what it rests on and what fails above if you pull it, so assent is
   traceable to the reader's own checking. Shared: the Rand and lineage doors
   reuse this. Rungs are marked `fundamental`, `joint` (the contested one) or
   `aside` (aesthetics, which hangs off the base, not off the politics —
   drawing this as a linear five-step stack is the usual misrepresentation). */
.ph-ladder { margin: 34px 0 40px; border-top: 1px solid var(--line); }
.ph-rung {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 6px 26px;
  border-bottom: 1px solid var(--line);
}
.ph-rung-n {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--acc);
  padding-top: 3px;
}
.ph-rung-branch {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 9px;
}
.ph-rung-tag {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: .16em;
  font-weight: 400;
  color: var(--mut);
  border: 1px solid var(--line);
  padding: 2px 6px;
  margin-left: 9px;
  white-space: nowrap;
}
.ph-rung-q {
  font-size: 21px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 10px;
}
.ph-rung-claim { font-size: 17.5px; line-height: 1.6; color: var(--mut); margin: 0 0 14px; }
.ph-rung-claim strong { color: var(--ink); font-weight: 500; }
/* the two derivation lines — the part that makes the rung checkable */
.ph-derive {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut);
  margin-top: 7px;
  padding-left: 13px;
  border-left: 1px solid var(--line);
}
.ph-derive .k { color: var(--acc); letter-spacing: .14em; font-size: 10.5px; margin-right: 8px; }
/* value/virtue pairing — Rand's architecture, shown rather than described.
   Shared: the Rand door needs the same table for the full seven virtues. */
.ph-pairs { margin: 16px 0 4px; border-top: 1px solid var(--line); }
.ph-pairs-lead {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mut);
  padding: 10px 0 12px;
}
.ph-pairs-lead strong { color: var(--ink); font-weight: 500; }
.ph-pairs-head, .ph-pair {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ph-pairs-head {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--mut);
}
.ph-pair .val { font-size: 18px; color: var(--ink); }
.ph-pair .vir { font-size: 18px; color: var(--acc); }
.ph-pair .role {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mut);
}

/* the contested rung: the whole argument's weak joint */
.ph-rung.joint { border-left: 2px solid var(--acc); padding-left: 18px; }
.ph-rung.joint .ph-derive { border-left-color: var(--acc); }
.ph-rung.aside .ph-rung-branch { color: var(--mut); }

/* ── full-bleed figure ──────────────────────────────────────────────── */
/* Breaks out of the 704px measure for diagrams. The article is centred in the
   viewport (max-width + margin auto), so margin-left:50% + translateX(-50%)
   centres on the VIEWPORT here — unlike a two-column layout, where the same
   trick centres on the offset column and clips. Verified at 1440/1280/375. */
.ph-figure {
  position: relative;
  width: min(1080px, calc(100vw - 40px));
  margin: 46px 0 44px 50%;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0 14px;
}
.ph-figure-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
}
.ph-figure-kicker { color: var(--acc); }
.ph-figure-title { text-align: right; color: var(--mut); }
.ph-figure-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.ph-figure svg { width: 100%; min-width: 900px; height: auto; }
.ph-figure figcaption {
  max-width: 760px;
  margin-top: 14px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mut);
}
/* SVG paint hooks — themed, so the map follows the dark/paper toggle */
.f-ink { fill: var(--ink); }
.f-mut { fill: var(--mut); }
.f-acc { fill: var(--acc); }
.f-bg { fill: var(--bg); }
.f-card { fill: var(--card); }
.f-none { fill: none; }
.s-ink { stroke: var(--ink); fill: none; }
/* Inside a figure a "line" IS the drawing, so it takes --edge, not --line. */
.s-line { stroke: var(--edge); fill: none; }
.s-acc { stroke: var(--acc); fill: none; }
.s-mut { stroke: var(--mut); fill: none; }
/* outline for filled bands — a --card fill alone measures ~1:1 against the
   page and cannot carry a shape on its own */
.s-edge { stroke: var(--edge); }
.ph-figure text { font-family: "Archivo", system-ui, sans-serif; }
.ph-figure .t-serif { font-family: "Newsreader", Georgia, serif; }
.ph-figure .t-cjk { font-family: "Noto Serif SC", serif; }

@media (max-width: 560px) {
  .ph-figure { width: calc(100vw - 24px); padding-left: 0; padding-right: 0; }
  .ph-figure-head, .ph-figure figcaption { padding: 0 8px; }
  .ph-figure-title { display: none; }
}

/* ── pull quote ─────────────────────────────────────────────────────── */
.ph-quote {
  margin: 0 0 84px;
  padding: 34px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ph-quote blockquote {
  margin: 0;
  font-size: 30px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
}
.ph-quote .cjk { font-style: normal; font-weight: 500; }
.ph-quote figcaption {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mut);
  margin-top: 16px;
}

/* ── portrait figure ────────────────────────────────────────────────── */
.ph-portrait { margin: 0 0 84px; }
.ph-portrait-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 26px;
  align-items: end;
}
.ph-portrait img {
  display: block;
  width: 180px;
  height: 236px;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.04);
}
.ph-portrait figcaption {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--mut);
  padding-bottom: 4px;
}
.ph-portrait figcaption .src { font-size: 11.5px; letter-spacing: .1em; }

/* ── door chooser — problem first, thinker as subtitle ──────────────── */
.ph-doors-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.ph-doors-head h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 38px;
  font-weight: 500;
  margin: 0 0 8px;
}
.ph-doors-kicker {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--mut);
}
.ph-door {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 28px 6px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.ph-door:last-of-type { border-bottom: 1px solid var(--line); }
a.ph-door:hover { background: var(--card); color: inherit; }
.ph-door-n {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--acc);
}
.ph-door-q { display: block; font-size: 25px; line-height: 1.35; font-style: italic; }
.ph-door-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--mut);
}
.ph-door-meta .who { color: var(--ink); }

/* ── forthcoming ────────────────────────────────────────────────────── */
/* Pages in this section are shipped one at a time (build order is in the
   brief). A destination that does not exist yet is marked, never linked —
   a dead link would be the first dishonest thing on the page. */
.soon {
  color: var(--mut);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  cursor: default;
}
.soon-tag {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--acc);
  border: 1px solid var(--line);
  padding: 2px 6px;
  margin-left: 8px;
  white-space: nowrap;
  vertical-align: 1.5px;
}
.ph-door.soon { border-bottom: none; cursor: default; }
.ph-door.soon:last-of-type { border-bottom: 1px solid var(--line); }
.ph-door.soon .ph-door-q { color: var(--mut); }

/* ── spine exit / calls to action ───────────────────────────────────── */
.ph-exit { display: flex; gap: 14px; flex-wrap: wrap; margin: 44px 0 0; }
.ph-btn {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .16em;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 13px 22px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ph-btn-primary { border-color: var(--ink); }
a.ph-btn-primary:hover { background: var(--ink); color: var(--bg); }
a.ph-btn:hover { border-color: var(--ink); }
.ph-btn.soon { border-bottom: 1px solid var(--line); color: var(--mut); }

/* ── footer ─────────────────────────────────────────────────────────── */
.ph-foot {
  max-width: 704px;
  margin: 0 auto;
  padding: 28px 26px 64px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mut);
}

/* ── responsive ─────────────────────────────────────────────────────── */
/* The design canvas is desktop-only; born.builders is read on phones, so the
   long-form measure, display sizes and the 22% margin-note indent all have to
   collapse. Reading experience is the design — protect it at 375px too. */
@media (max-width: 860px) {
  .ph-head { padding: 20px 22px; }
  .ph-article { padding: 60px 22px 36px; }
  .ph-article h1 { font-size: 46px; }
  .ph-deck { font-size: 21px; }
  .ph-note { margin-left: 0; padding-left: 16px; border-left: 1px solid var(--line); }
  .ph-quote blockquote { font-size: 26px; }
  .ph-doors-head h2 { font-size: 32px; }
  .ph-door-q { font-size: 22px; }
  .ph-rung-q { font-size: 19.5px; }
}

@media (max-width: 560px) {
  body { font-size: 18.5px; }
  .ph-head { gap: 14px; }
  .ph-nav { gap: 16px; font-size: 11px; }
  .ph-article { padding: 44px 18px 30px; }
  .ph-article h1 { font-size: 36px; letter-spacing: 0; }
  .ph-deck { font-size: 19px; }
  .ph-h2 { margin: 56px 0 18px; }
  .ph-collision { padding: 22px 20px; }
  .ph-collision p { font-size: 17px; }
  .ph-quote blockquote { font-size: 22px; }
  .ph-portrait-grid { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .ph-rung { grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 2px 22px; }
  .ph-rung.joint { padding-left: 12px; }
  .ph-rung-q { font-size: 18.5px; }
  .ph-rung-claim { font-size: 16.5px; }
  .ph-rung-tag { margin-left: 0; display: inline-block; margin-top: 5px; }
  .ph-pairs-head { display: none; }
  .ph-pair { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .ph-pair .vir::before { content: "↳ "; color: var(--mut); }
  .ph-door { grid-template-columns: 34px 1fr; gap: 12px; padding: 22px 2px; }
  .ph-door-q { font-size: 20px; }
  .ph-door-meta { gap: 8px; font-size: 11px; }
  .ph-exit { flex-direction: column; align-items: stretch; }
  .ph-btn { text-align: center; }
  .ph-foot { padding: 22px 18px 48px; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body, .ph-door, .ph-btn { transition: none; }
}