/* fieldguide.css — print-ready book layout for the Fathohm Field Guide.
   Reads well on screen; paginates cleanly for PDF/print. Tokens from styles.css. */

:root { --fg-measure: 33em; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-deeper); color: var(--ink); font-family: 'Geist', system-ui, sans-serif; }

/* on-screen: stack pages like a manuscript */
.book { max-width: 820px; margin: 0 auto; padding: 40px 0 80px; }
.page {
  background: var(--bg-card);
  margin: 0 auto 26px;
  padding: 76px 84px;
  min-height: 1040px;
  box-shadow: 0 22px 60px -40px var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
}
.page.cover { background: var(--ink); color: var(--bg-card); justify-content: center; }
.page.section-break { background: var(--bg-deeper); justify-content: center; }

/* running foot */
.folio {
  position: absolute; bottom: 38px; left: 84px; right: 84px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cover .folio { color: rgba(255,255,255,0.4); }

/* ── cover ── */
.cover-omega {
  width: 92px; height: 92px; border-radius: 20px; background: var(--current);
  display: flex; align-items: center; justify-content: center; margin-bottom: 40px;
}
.cover-omega span { font-family: 'Newsreader', serif; font-size: 62px; color: var(--bg-card); transform: translateY(-3px); }
.cover h1 {
  font-family: 'Newsreader', serif; font-weight: 400; font-size: 88px; line-height: 0.95;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.cover h1 .ohm { color: var(--current); }
.cover .cover-tag {
  font-family: 'Newsreader', serif; font-style: italic; font-size: 30px;
  color: rgba(255,255,255,0.78); margin: 0 0 8px;
}
.cover .cover-sub { font-size: 17px; color: rgba(255,255,255,0.55); max-width: 30em; line-height: 1.5; }
.cover .cover-edition {
  margin-top: 54px; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4);
}

/* ── headings ── */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--current); margin-bottom: 14px;
}
h2.ch-title {
  font-family: 'Newsreader', serif; font-weight: 400; font-size: 46px; line-height: 1.0;
  letter-spacing: -0.015em; margin: 0 0 8px;
}
h2.ch-title em { font-style: italic; }
.ch-standfirst {
  font-family: 'Newsreader', serif; font-size: 21px; line-height: 1.45; color: var(--ink-soft);
  margin: 14px 0 30px; max-width: var(--fg-measure);
}
h3 { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 17px; margin: 26px 0 4px; color: var(--ink); }

/* ── body ── */
p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); max-width: var(--fg-measure); margin: 11px 0; }
p strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }
.lead { font-size: 17px; color: var(--ink); }
.mono { font-family: 'IBM Plex Mono', monospace; }
.water { color: var(--water); }
.current { color: var(--current); }

/* formula box */
.formula {
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--bg-deeper);
  padding: 22px 26px; margin: 22px 0; max-width: var(--fg-measure);
}
.formula .f-eq {
  font-family: 'Newsreader', serif; font-size: 34px; font-style: italic; color: var(--ink);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.formula .f-eq .mono { font-style: normal; font-size: 20px; }
.formula .f-key { margin-top: 12px; font-size: 13px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; line-height: 1.7; }

/* worked example */
.worked {
  border-left: 3px solid var(--current); padding: 4px 0 4px 22px; margin: 24px 0; max-width: var(--fg-measure);
}
.worked .w-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--current); margin-bottom: 8px; }
.worked p { margin: 6px 0; font-size: 14.5px; }

/* remember strip */
.remember {
  margin-top: auto; border-top: 1px solid var(--rule); padding-top: 18px;
  display: flex; gap: 14px; align-items: flex-start; max-width: var(--fg-measure);
}
.remember .r-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--current); margin-top: 7px; flex: 0 0 auto; box-shadow: 0 0 0 4px var(--current-faint); }
.remember .r-text { font-family: 'Newsreader', serif; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink); }

/* analogy diagram caption */
.fig { margin: 22px 0; max-width: var(--fg-measure); }
.fig svg { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); }
.fig figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); margin-top: 8px; letter-spacing: 0.04em; }

/* contents */
.toc-list { list-style: none; padding: 0; margin: 18px 0; max-width: var(--fg-measure); }
.toc-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--rule); }
.toc-list .t-n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--current); width: 42px; flex: 0 0 auto; }
.toc-list .t-t { font-family: 'Newsreader', serif; font-size: 19px; color: var(--ink); }
.toc-list .t-d { font-size: 13px; color: var(--ink-faint); margin-left: auto; }
.toc-part { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 4px; }

/* section break page */
.section-break .sb-num { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.18em; color: var(--current); text-transform: uppercase; margin-bottom: 16px; }
.section-break h2 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 64px; line-height: 1; margin: 0 0 16px; }
.section-break h2 em { font-style: italic; }
.section-break p { font-size: 18px; max-width: 28em; }

/* glossary */
.gloss { max-width: var(--fg-measure); }
.gloss dt { font-family: 'Newsreader', serif; font-size: 20px; color: var(--ink); margin-top: 16px; }
.gloss dt .sym { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--current); margin-left: 8px; }
.gloss dd { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* two-column analogy table */
.maptable { width: 100%; border-collapse: collapse; margin: 20px 0; max-width: var(--fg-measure); }
.maptable td { padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.maptable tr td:first-child { color: var(--water); font-family: 'Newsreader', serif; font-size: 18px; width: 45%; }
.maptable tr td:last-child { color: var(--ink); }
.maptable .arrow { color: var(--ink-faint); }

/* print rules */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .book { max-width: none; margin: 0; padding: 0; }
  .page {
    margin: 0; box-shadow: none; min-height: auto; height: 100vh;
    page-break-after: always; break-after: page;
    padding: 18mm 20mm;
  }
  .page:last-child { page-break-after: auto; }
  .no-print { display: none !important; }
}

/* per-level cover volume tag + spine accent */
.cover-vol {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--current);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  padding: 7px 16px; display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start; margin-bottom: 34px;
}
.cover-vol .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--current); }
.cover-series {
  margin-top: 20px; display: flex; gap: 7px; align-items: center;
}
.cover-series .seg { width: 30px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); }
.cover-series .seg.on { background: var(--current); }

/* "what this volume covers / where it sits" rail on contents pages */
.vol-rail {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 22px;
}
.vol-rail a, .vol-rail span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--ink-soft); text-decoration: none;
}
.vol-rail a:hover { border-color: var(--current); color: var(--current); }
.vol-rail .here { background: var(--current); color: var(--bg-card); border-color: var(--current); }

/* print toolbar (screen only) */
.fg-toolbar {
  position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; gap: 8px; align-items: center;
}
.fg-toolbar .fg-which {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: 4px;
}
.fg-toolbar a, .fg-toolbar button {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.06em;
  border: 1px solid var(--rule-strong); background: var(--bg-card); color: var(--ink);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.fg-toolbar .primary { background: var(--current); color: var(--bg-card); border-color: var(--current); }
.fg-toolbar a:hover, .fg-toolbar button:hover { border-color: var(--ink-soft); }

@media (max-width: 720px) {
  .page { padding: 48px 30px; min-height: auto; }
  .cover h1 { font-size: 60px; }
}