/* ============================================================
   THE GEOMETRY PAGES
   The dependency graph and the entries it points into. Shared by
   the treatise graph and any page that reads in geometric order.
   ============================================================ */
.geom-hero, .geom-body-wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.geom-hero { padding-block: var(--section-space) 1.25rem; }
.geom-hero h1 {
  font-family: var(--serif-body);
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--parchment);
  margin: .55rem 0 0;
}
.geom-hero h1 em { color: var(--gold); font-style: italic; }
.geom-lead { max-width: var(--measure-lead); color: var(--ink-soft); font-size: var(--t-read); line-height: 1.6; margin: 1rem 0 0; }
.geom-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.geom-counts b { color: var(--gold); font-variant-numeric: lining-nums tabular-nums; font-weight: 400; }

/* Graph -------------------------------------------------------- */
.geom-canvas {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--surface-1);
  border: 1px solid var(--gold-a18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), var(--edge-light);
  overflow-x: auto;
}
.geom-canvas svg { display: block; width: 100%; height: auto; min-width: 620px; }
.geom-edge { fill: none; stroke: var(--gold-a18); stroke-width: 1.1; }
.gnode { cursor: pointer; }
.gnode .gnode-box { fill: #16110a; stroke: var(--gold-a35); stroke-width: 1; }
.gnode .gnode-label {
  fill: var(--parchment);
  font-family: var(--serif-head);
  font-size: 13px;
  letter-spacing: .04em;
}
.gnode .gnode-claim {
  fill: var(--ink-faint);
  font-family: var(--serif-body);
  font-size: 11px;
}
.gnode:hover .gnode-box { stroke: var(--gold); }
.gnode:focus { outline: none; }
.gnode:focus .gnode-box { stroke: var(--gold-bright); stroke-width: 2; }
.gnode.is-selected .gnode-box { fill: var(--gold-a18); stroke: var(--gold-bright); stroke-width: 2; }
.gnode.is-selected .gnode-label { fill: var(--gold-bright); }
.gnode.is-ancestor .gnode-box { stroke: var(--gold); }
.gnode.is-ancestor .gnode-label { fill: var(--gold); }
.gnode.is-descendant .gnode-box { stroke: var(--gold-deep); stroke-dasharray: 3 3; }
.gnode.is-descendant .gnode-label { fill: var(--gold-deep); }
.gnode.is-dim { opacity: .28; }
.gnode.is-filtered { opacity: .12; }
.geom-status { margin: 1rem 0 0; color: var(--ink-faint); font-size: var(--t-label); letter-spacing: .04em; }

/* Filters ------------------------------------------------------ */
.geom-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.geom-filters button {
  min-height: 38px;
  padding: .4rem .85rem;
  background: transparent;
  border: 1px solid var(--gold-a18);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font: var(--t-label)/1.2 var(--serif-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.geom-filters button[aria-pressed="true"] { color: var(--parchment); border-color: var(--gold-a35); background: var(--gold-a04); }
.geom-filters button:hover { color: var(--parchment); border-color: var(--gold-a60); }

/* Entries ------------------------------------------------------ */
.geom-body-wrap { padding-block: var(--section-space) 4rem; }
.geom-part { margin-top: 3rem; border-top: 1px solid var(--gold-a18); padding-top: 1.25rem; }
.geom-part > h2 {
  font-family: var(--serif-head);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 .25rem;
}
.geom-part > p { margin: 0 0 1.5rem; color: var(--ink-faint); font-size: var(--t-label); }
.geom-part.is-filtered { display: none; }

.geom-entry {
  max-width: var(--measure-prose);
  padding: 1.1rem 0 1.1rem 1rem;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--gold-a04);
  scroll-margin-top: 5rem;
}
.geom-entry.is-lit { border-left-color: var(--gold-a35); background: var(--gold-a04); }
.geom-entry.is-active { border-left-color: var(--gold); background: var(--gold-a10); }
.geom-entry.is-filtered { display: none; }
.geom-entry h3 { margin: 0; font-size: var(--t-h3); color: var(--parchment); font-weight: 400; }
.geom-entry h3 .geom-label {
  display: block;
  font-family: var(--serif-head);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.geom-entry h3 .geom-claim { display: block; font-family: var(--serif-body); font-size: var(--t-h3); line-height: 1.35; }
.geom-entry p { font-size: var(--t-read); line-height: 1.65; color: var(--ink); }
.geom-entry .geom-proof, .geom-entry .geom-scholium, .geom-entry .geom-corollary { max-width: var(--measure-prose); }
.geom-entry .geom-field {
  font-family: var(--serif-head);
  font-style: italic;
  color: var(--gold-deep);
  letter-spacing: .04em;
  margin-right: .35rem;
}
.geom-deps, .geom-carries {
  margin: .8rem 0 0;
  font-size: var(--t-label);
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.geom-deps a, .geom-carries a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-a35);
  margin-right: .5rem;
}
.geom-deps a:hover, .geom-carries a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.geom-none { font-style: italic; }
.geom-note { color: var(--ink-soft); }
@media (max-width: 768px) {
  .geom-canvas { padding: .5rem; }
  .geom-entry { padding-left: .7rem; }
}