/* ============================================================
   builtonfacts.com — baseline styles
   Quietly academic: serif typography, paper-and-ink palette,
   a single centered column. See CLAUDE.md for the design intent.
   ============================================================ */

:root {
  --paper:  #faf8f3;   /* warm off-white background        */
  --ink:    #232020;   /* near-black, faintly warm          */
  --muted:  #6b655c;   /* secondary text                    */
  --accent: #3a5a78;   /* deep, desaturated blue            */
  --accent-dark: #28425a;
  --rule:   #e4ded2;   /* hairline rules                    */
  --measure: 38rem;    /* ~70-character line length          */
}

* { box-sizing: border-box; }

html {
  /* Refined system serifs — no web-font download needed yet. */
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Charter, Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Single centered column with generous margins; flows from the top
   like a document, not vertically centered like a landing page. */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 6rem 1.5rem 8rem;
}

/* — Masthead — */
.masthead { margin-bottom: 2.5rem; }

.kicker {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  margin: 2.2em 0 0.6em;
  padding-bottom: 0.25em;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--rule);
}

h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.12rem;
  font-weight: 600;
}

/* Hairline rule beneath the masthead. */
.masthead::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
  margin-top: 2.5rem;
}

/* — Body text — */
p { margin: 0 0 1.4rem; }

.lede {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 2rem;
}

/* — Links — */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-dark); }

/* — Inline code — */
code {
  font-family: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  font-size: 0.85em;
  background: #efece4;
  padding: 0.08em 0.35em;
  border-radius: 2px;
}

/* — Site navigation — */
.site-nav {
  margin-bottom: 3rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a {
  margin-right: 1.5rem;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* — Verse (e.g. the placeholder Latin, set as verse) — */
.verse {
  margin: 0 0 1.6rem;
  line-height: 1.5;
}

/* — Block quotation set as verse (e.g. scripture), with attribution — */
blockquote.verse {
  margin: 1.8rem 0;
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 2px solid var(--rule);
}
.verse-attrib {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* — Footnotes: superscript references and an end-of-page notes list — */
sup.fn { line-height: 0; }
sup.fn a {
  font-size: 0.75em;
  text-decoration: none;
}
.footnotes {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.footnotes ol { margin: 0; padding-left: 1.3rem; }
.footnotes li { margin: 0 0 0.7rem; }
.fn-back { text-decoration: none; }

/* — Sign-off (author name + date at the end of a piece) — */
.signoff {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.signoff time {
  font-variant-numeric: tabular-nums;
}

::selection { background: #dfe6ec; }

.hidden { display: none; }

/* ============================================================
   Front-page index: parallel "Projects" / "Essays" columns.
   ============================================================ */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1rem;
}
.column-head {
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { margin: 0 0 1.4rem; }
.index-list a { font-size: 1.1rem; }
.index-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}
.index-empty { color: var(--muted); font-style: italic; }

/* ============================================================
   Project / atlas pages — a wider measure for figures and data,
   while running text stays near the comfortable reading width.
   Set <body class="project">.
   ============================================================ */
body.project main { max-width: 48rem; }
body.project main > p,
body.project main > ul,
body.project main > ol,
body.project main > h2,
body.project main > h3,
body.project main > pre,
body.project main > .note,
body.project .generated > p,
body.project .generated > ul,
body.project .generated > ol,
body.project .generated > h2,
body.project .generated > h3 { max-width: 38rem; }

.meta-line {
  margin: -0.5rem 0 1.8rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* — Figures & captions — */
figure { margin: 2rem 0; }
figure img {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  cursor: zoom-in;
}
figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* — Portrait: a modest centered figure, not full measure — */
.portrait { max-width: 15rem; margin: 2.2rem auto; }
.portrait img { cursor: default; }
.portrait figcaption { text-align: center; }

/* — Scale toggle (log / linear): plain text controls, no pills — */
.scale-toggle {
  display: flex;
  gap: 1.4rem;
  margin: 1.5rem 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scale-toggle button {
  margin: 0;
  padding: 0 0 0.15em;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.scale-toggle button:hover { color: var(--ink); }
.scale-toggle button.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* — Aside / note: a quiet hairline-ruled remark, not a card — */
.note {
  margin: 1.8rem 0;
  padding: 0.1rem 0 0.1rem 1.2rem;
  border-left: 2px solid var(--rule);
}
.note p:last-child { margin-bottom: 0; }
.note-accent { border-left-color: var(--accent); }
.note-head {
  font-weight: 600;
  color: var(--accent-dark);
}

/* — Standing notice / provenance blurb: a quietly framed academic note — */
.disclosure {
  margin: 1.8rem 0;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  border: 1px solid var(--rule);
}
.disclosure :last-child { margin-bottom: 0; }

/* — Auto-generated appendix: machine-produced tables and notes, set a
   half-step lighter and smaller than the hand-written prose above so the
   human/AI boundary is visible (see the AI Disclosure page). — */
.generated {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;          /* a gentle step down from the 1.125rem body */
  color: #575148;           /* softened ink, halfway toward --muted      */
}
.generated h2 {
  font-size: 1.25rem;
  color: inherit;
}
.generated-notice {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
}
.generated-notice .notice-label {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* — Data tables — */
table.data {
  width: 100%;
  margin: 1.4rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* A table with several numeric columns cannot shrink below its content width,
   so on a phone it pushes the whole page sideways. Wrapping it in .table-scroll
   lets the table scroll within its own box and leaves the page itself put.
   Desktop is unaffected: the table is still width:100% of the wrapper. */
.table-scroll {
  margin: 1.4rem 0;
  overflow-x: auto;
}
.table-scroll > table.data { margin: 0; }
table.data th,
table.data td {
  padding: 0.45em 0.7em;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
table.data th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
table.data td.num {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* — Preformatted code blocks — */
pre {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  overflow: auto;
  font-family: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  background: #f3f0e8;
  border: 1px solid var(--rule);
}
pre code { background: none; padding: 0; font-size: 1em; }

/* — Page footer (sources / colophon) — */
.page-footer {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* — Click-to-zoom lightbox — */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: rgba(20, 18, 16, 0.92);
  cursor: zoom-out;
}
.lb.open { display: flex; }
.lb img {
  max-width: 95vw;
  max-height: 92vh;
  background: #fff;
  border: 1px solid #000;
  cursor: zoom-in;
}
.lb img.full { max-width: none; max-height: none; cursor: grab; }
.lb-x {
  position: fixed;
  top: 0.5rem;
  right: 1.1rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--paper);
  cursor: pointer;
}
.lb-tip {
  position: fixed;
  bottom: 0.8rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.78rem;
  color: #9aa7b5;
  pointer-events: none;
}

@media (max-width: 32rem) {
  main { padding: 3.5rem 1.25rem 5rem; }
  .columns { grid-template-columns: 1fr; gap: 2rem; }
  .figpair { grid-template-columns: 1fr; }
}