/*! paper.css -- N. Bushaw.
 *
 *  The site is two pages: the main one, and the extras.  Each is set like an
 *  offprint -- one measured column of Latin Modern on white, section numbers
 *  in the margin -- with a running table of contents pinned in the left
 *  margin that tracks where you are.  Long lists sit inside <details> so the
 *  page stays scannable.
 *
 *  Palette is the VCU digital brand: gold #ffb300 for rules and markers, a
 *  darkened gold #8a5d00 wherever text has to carry contrast on white, plum
 *  #8e6a90 for asides.
 *
 *  Type asks for Latin Modern Roman first, local() before url(), so a TeX
 *  installation is used with no download at all; then Palatino.
 */

@font-face {
  font-family: "LM Roman Web";
  font-style: normal; font-weight: 400; font-display: swap;
  src: local("Latin Modern Roman"), local("LMRoman10-Regular"),
       local("CMU Serif"), local("CMU Serif Roman"),
       url("fonts/lmroman10-regular.woff2") format("woff2");
}
@font-face {
  font-family: "LM Roman Web";
  font-style: italic; font-weight: 400; font-display: swap;
  src: local("Latin Modern Roman Italic"), local("LMRoman10-Italic"),
       local("CMU Serif Italic"),
       url("fonts/lmroman10-italic.woff2") format("woff2");
}
@font-face {
  font-family: "LM Roman Web";
  font-style: normal; font-weight: 700; font-display: swap;
  src: local("Latin Modern Roman Bold"), local("LMRoman10-Bold"),
       local("CMU Serif Bold"),
       url("fonts/lmroman10-bold.woff2") format("woff2");
}

:root {
  --gold: #ffb300;
  --gold-ink: #8a5d00;
  --plum: #8e6a90;

  --serif: "LM Roman Web", "Latin Modern Roman", "CMU Serif",
           "Palatino Linotype", Palatino, "URW Palladio L", "P052",
           "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "DejaVu Sans Mono",
          "Liberation Mono", Menlo, Consolas, monospace;

  --bg: #ffffff;
  --sheet: rgba(255, 255, 255, 0.84);
  --sheet-flat: #ffffff;
  --ink: #14130f;
  --ink-soft: #5c574e;
  --ink-faint: #8b857a;
  --rule: rgba(20, 19, 15, 0.16);
  --rule-faint: rgba(20, 19, 15, 0.09);
  --link: #8a5d00;
  --link-hover: #c07f00;

  /* bootstrap percolation: the healthy state is the paper, the infected
     state a visible parchment, and the frontier gold */
  --panel: rgba(255, 255, 255, 0.86);
  --node-fill: rgba(255, 255, 255, 0.92);
  --node-fill-hi: #fffaf0;
  --graph-bg: rgba(255, 255, 255, 0.72);

  --perc-a: #ffffff;
  --perc-b: #e4d5a2;
  --perc-glow: #e8a200;
  --perc-alpha: 0.60;

  /* random geometric graph: settled edges quiet, new edges gold */
  --graph-edge: #cec5b2;
  --graph-edge-alpha: 0.95;
  --graph-glow: #d99400;
  --graph-node-lo: #cec5b2;
  --graph-node-hi: #c98a00;
  --graph-node-alpha: 0.9;

  --measure: 34em;
  --rail: 13rem;
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.28vw, 1.18rem);
  line-height: 1.58;
  color: var(--ink);
  background: transparent;
  font-variant-numeric: oldstyle-num;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

#tidal-graph {
  position: fixed; top: 0; left: 0; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: -1; pointer-events: none;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--rule);
}
a:hover, a:focus { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--gold); color: #000;
  padding: 0.6rem 1rem; font: 600 0.8rem var(--mono);
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* One control switches both at once: bootstrap percolation on white, the
   random geometric graph on black.  The percolation covers the whole field
   and wants a little more body behind the text; the graph is sparse. */
:root[data-bg="perc"] { --sheet: rgba(255, 255, 255, 0.68); }

:root[data-bg="graph"] {
  --bg: #0d0d0f;
  --sheet: rgba(14, 14, 17, 0.62);
  --sheet-flat: #111114;
  --ink: #eceae4;
  --ink-soft: #a8a49b;
  --ink-faint: #7d786f;
  --rule: rgba(236, 234, 228, 0.22);
  --rule-faint: rgba(236, 234, 228, 0.11);
  --link: #ffb300;
  --link-hover: #ffd36b;
  --gold-ink: #ffb300;

  --panel: rgba(17, 17, 20, 0.86);
  --node-fill: rgba(21, 21, 25, 0.92);
  --node-fill-hi: #241d0c;
  --graph-bg: rgba(16, 16, 19, 0.70);

  --graph-edge: #6f6757;
  --graph-edge-alpha: 0.95;
  --graph-glow: #ffb300;
  --graph-node-lo: #6f6757;
  --graph-node-hi: #ffb300;
  --graph-node-alpha: 1;
}

/* ---------- shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 3rem;
  width: min(62rem, 100% - 3rem);
  margin: 0 auto;
  padding-bottom: 5rem;
}
.column {
  background: var(--sheet);
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2.6rem);
  border-left: 1px solid var(--rule-faint);
  border-right: 1px solid var(--rule-faint);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .column { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
}

/* ---------- running contents ---------- */
.rail { position: relative; }
.rail-inner { position: sticky; top: 0; padding: clamp(1.5rem, 3vw, 3rem) 0 2rem;
              font-size: 0.92rem; }
.rail .who { font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.05rem;
             margin: 0 0 0.15rem; }
.rail .who a { text-decoration: none; color: var(--ink); }
.rail .where { margin: 0 0 1.3rem; font-size: 0.8rem; color: var(--ink-faint);
               line-height: 1.35; }
.rail .where a { color: inherit; text-decoration: none; }
.rail .where a:hover { color: var(--link-hover); text-decoration: underline; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0 0 0.12rem; }
.rail a { display: block; padding: 0.18rem 0 0.18rem 0.85rem;
          border-left: 2px solid transparent; text-decoration: none;
          color: var(--ink-soft); line-height: 1.3; }
.rail a:hover { color: var(--link-hover); }
.rail a.is-here { color: var(--ink); border-left-color: var(--gold); }
.rail .jump { margin: 1.5rem 0 0; padding-top: 0.9rem;
              border-top: 1px solid var(--rule-faint); }
.rail .jump a { padding-left: 0; border-left: 0; font-variant: small-caps;
                letter-spacing: 0.05em; font-size: 1rem; color: var(--gold-ink); }
.rail .jump .gloss { display: block; font-size: 0.78rem; color: var(--ink-faint);
                     font-variant: normal; letter-spacing: 0; margin-top: 0.1rem; }

/* ---------- masthead ---------- */
.masthead { margin: 0 0 2.6rem; }
.masthead h1 { margin: 0; font-weight: 400;
               font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.6rem);
               line-height: 1.02; letter-spacing: -0.015em; }
.masthead .role { margin: 0.7rem 0 0; font-style: italic; font-size: 1.06rem;
                  color: var(--ink-soft); max-width: var(--measure); }
.masthead .affil { margin: 0.1rem 0 0; font-size: 0.95rem; color: var(--ink-soft);
                   text-align: left; max-width: var(--measure); }
.masthead .affil:first-of-type { margin-top: 0.5rem; }
.masthead .affil a { color: inherit; text-decoration-color: var(--rule-faint); }
.masthead .affil a:hover { color: var(--link-hover); }
.masthead .stamp { margin: 1.3rem 0 0; padding-top: 0.8rem;
                   border-top: 2px solid var(--gold);
                   font: 400 0.78rem var(--mono); color: var(--ink-faint);
                   letter-spacing: 0.04em; }

/* ---------- sections ---------- */
.section { margin: 0 0 3rem; scroll-margin-top: 1.5rem; }
h2 { font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin: 0 0 1rem;
     font-variant: small-caps; letter-spacing: 0.04em; padding-bottom: 0.4rem;
     border-bottom: 1px solid var(--rule); }
h3 { font-weight: 400; font-style: italic; font-size: 1.12rem;
     margin: 1.9rem 0 0.6rem; }

p { max-width: var(--measure); margin: 0 0 0.9rem; text-align: justify; hyphens: auto; }
p:last-child { margin-bottom: 0; }
/* justify body prose only; short lines look like chasms when stretched */
.rail p, .masthead p, .colophon p, .note, .gen-pmeta, .gen-pnote,
.gen-prel, .gen-pthesis { text-align: left; hyphens: manual; }
.lede { font-size: 1.06rem; }
.note { font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }

.epigraph { max-width: 25em; margin: 0 0 1.8rem auto; font-size: 0.95rem;
            font-style: italic; text-align: right; color: var(--ink-soft); }
.epigraph p { text-align: right; margin-bottom: 0.3rem; max-width: none; }
.epigraph cite { font-style: normal; font-variant: small-caps;
                 letter-spacing: 0.07em; font-size: 0.84rem; color: var(--plum); }

/* ---------- bibliography ---------- */
.biblio { list-style: none; margin: 0; padding: 0; }
.biblio > li { position: relative; padding: 0 0 0.9rem 1.4rem;
               max-width: calc(var(--measure) + 1.4rem); }
.biblio > li::before { content: "\2022"; position: absolute; left: 0.1rem; top: 0;
                       color: var(--gold); }
.biblio .title { font-style: italic; }
.biblio .remark { color: var(--ink-soft); font-size: 0.92rem; }

.linkrow { margin-top: 0.26rem; display: flex; flex-wrap: wrap; gap: 0.3rem;
           align-items: baseline; }
.tag { font: 400 0.76rem/1.45 var(--mono); padding: 0.06rem 0.42rem;
       border: 1px solid var(--rule-faint); border-radius: 2px;
       text-decoration: none; color: var(--ink-soft); background: none;
       cursor: pointer; }
.tag:hover { color: var(--link-hover); border-color: var(--rule); }
.tag--src { color: var(--gold-ink); border-color: rgba(201, 138, 0, 0.35); }
.tag[hidden] { display: none; }

/* ---------- dated entries ---------- */
.entries { list-style: none; margin: 0; padding: 0; }
.entries > li { position: relative; min-height: 1.9em; padding: 0 0 0.55rem 7rem;
                max-width: calc(var(--measure) + 7rem); }
.entries > li > .when { position: absolute; left: 0; top: 0; width: 6.1rem;
                        text-align: right; white-space: nowrap;
                        font: 400 0.78rem/1.8 var(--mono); color: var(--ink-faint);
                        font-variant-numeric: lining-nums; }
.entries--plain > li { padding-left: 0; min-height: 0; max-width: var(--measure); }

/* ---------- courses ---------- */
.courses { list-style: none; margin: 0; padding: 0; }
.courses > li { margin: 0 0 1rem; max-width: var(--measure); }
.courses .cnum { font: 400 0.8rem var(--mono); color: var(--gold-ink); }
.courses .ctitle { font-style: italic; }
.cterms { color: var(--ink-soft); font-size: 0.93rem; }
.cdesc { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.2rem; }

/* ---------- folded lists ---------- */
details.fold { margin: 0.9rem 0 0; }
details.fold > summary { cursor: pointer; list-style: none;
  font-variant: small-caps; letter-spacing: 0.05em; color: var(--gold-ink);
  padding: 0.3rem 0; border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; display: inline-block;
  margin-right: 0.55em; color: var(--gold); transition: transform 0.12s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > *:not(summary) { margin-top: 0.9rem; }

/* ---------- controls ---------- */
.controls { position: fixed; right: 0.8rem; bottom: 0.8rem; z-index: 5;
            display: flex; gap: 0.35rem; }
.ctl { font: 400 0.74rem/1 var(--mono); color: var(--ink-soft);
       background: var(--panel); border: 1px solid var(--rule-faint);
       border-radius: 999px; padding: 0.42rem 0.6rem; cursor: pointer;
       line-height: 1; }
/* the controls are symbols; the words stay for screen readers only */
.ctl-txt { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ctl { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.ctl:hover { color: var(--link-hover); border-color: var(--rule); }
.ctl-ico { font-size: 1.05rem; line-height: 1; }

/* ---------- abstract dialog ---------- */
dialog#abstract-dialog { border: 1px solid var(--rule); border-radius: 3px;
  background: var(--sheet-flat); color: var(--ink); padding: 0;
  max-width: min(38rem, 92vw); width: 100%;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); }
dialog#abstract-dialog::backdrop { background: rgba(20, 19, 15, 0.35); }
.dlg-inner { padding: 1.6rem 1.7rem 1.2rem; }
.dlg-title { font-style: italic; margin: 0 0 0.15rem; font-size: 1.06rem;
             text-align: left; max-width: none; }
.dlg-meta { margin: 0 0 1rem; font-size: 0.85rem; color: var(--ink-soft);
            text-align: left; max-width: none; }
.dlg-body { font-size: 0.94rem; line-height: 1.55; }
.dlg-body p { text-align: justify; hyphens: auto; max-width: none; }
.dlg-foot { display: flex; justify-content: space-between; align-items: baseline;
            gap: 1rem; margin-top: 1.1rem; padding-top: 0.75rem;
            border-top: 1px solid var(--rule-faint); }
.dlg-src { font: 400 0.74rem var(--mono); color: var(--ink-faint); }

/* ---------- colophon ---------- */
.colophon { margin: 3rem 0 0; padding: 1.1rem 0 0;
            border-top: 1px solid var(--rule); font-size: 0.85rem;
            color: var(--ink-faint); }
.colophon p { max-width: var(--measure); text-align: left; }

/* ---------- narrow ---------- */
@media (max-width: 56rem) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0;
           width: min(46rem, 100% - 1.6rem); }
  /* sticky cannot leave its grid row, so the bar is fixed on narrow screens
     and the shell is padded to make room for it */
  .shell { padding-top: 3.1rem; }
  .rail { position: fixed; top: 0; left: 0; right: 0; z-index: 6; }
  .rail-inner { padding: 0.55rem max(0.8rem, calc((100vw - 46rem) / 2));
                background: var(--panel);
                border-bottom: 1px solid var(--rule-faint);
                display: flex; align-items: center; gap: 0.7rem; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rail-inner { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  }
  .rail .who, .rail .where { display: none; }
  .rail ol { display: flex; gap: 0.1rem 0.9rem; overflow-x: auto; flex: 1 1 auto;
             scrollbar-width: none; }
  .rail ol::-webkit-scrollbar { display: none; }
  .rail li { margin: 0; }
  .rail a { white-space: nowrap; padding: 0.3rem 0; border-left: 0;
            border-bottom: 2px solid transparent; }
  .rail a.is-here { border-left: 0; border-bottom-color: var(--gold); }
  .rail .jump { margin: 0; padding: 0.3rem 0 0.3rem 0.7rem; border-top: 0;
                border-left: 1px solid var(--rule-faint); flex: 0 0 auto; }
  .rail .jump .gloss { display: none; }
  .column { border: 0; padding-left: 0; padding-right: 0; }
  .entries > li { padding-left: 0; min-height: 0; }
  .entries > li > .when { position: static; display: block; width: auto;
                          text-align: left; line-height: 1.4; }
  p, .dlg-body p { text-align: left; }
  .epigraph { margin-left: 0; text-align: left; }
  .epigraph p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print {
  #tidal-graph, .controls, .skip, .rail, .tag { display: none !important; }
  html, body { background: #fff; color: #000; }
  .shell { display: block; width: auto; }
  .column { background: none; border: 0; padding: 0;
            -webkit-backdrop-filter: none; backdrop-filter: none; }
  details.fold > summary { display: none; }
  details.fold > *:not(summary) { display: block !important; }
  a { color: #000; }
}

/* ---------- genealogy applet ---------- */
.gen-wrap { display: grid; grid-template-columns: 1fr 16rem; gap: 1rem;
            align-items: start; margin: 0 0 0.8rem; }
#gen-graph { border: 1px solid var(--rule-faint); border-radius: 3px;
             background: var(--graph-bg); overflow: hidden;
             touch-action: none; cursor: grab; height: min(58vh, 30rem); }
#gen-graph.is-dragging { cursor: grabbing; }
#gen-graph svg { display: block; width: 100%; height: 100%; }

.gen-edge { fill: none; stroke: var(--rule); stroke-width: 0.8; opacity: 0.35; }
.gen-edge.is-lit { stroke: var(--gold); opacity: 1; stroke-width: 1.4; }

.gen-node { cursor: pointer; }
.gen-node:focus { outline: none; }
.gen-box { fill: var(--node-fill); stroke: var(--rule-faint); stroke-width: 1; }
.gen-node.is-lit .gen-box { stroke: var(--gold); }
.gen-node.is-sel .gen-box { stroke: var(--gold); stroke-width: 2; }
.gen-node.is-me .gen-box { fill: var(--node-fill-hi); stroke: var(--gold); }
.gen-node:focus-visible .gen-box { stroke: var(--gold-ink); stroke-width: 2; }
.gen-name { font: 400 12.5px var(--serif); fill: var(--ink); }
.gen-years { font: 400 10px var(--mono); fill: var(--ink-faint); }
.gen-initials { font: 400 10px var(--mono); fill: var(--ink-faint); }
.gen-avatar { fill: none; stroke: var(--rule-faint); stroke-width: 1; }

.gen-dot { fill: var(--node-fill); stroke: var(--rule); stroke-width: 1; }
.gen-dot-initials { font: 400 8.5px var(--mono); fill: var(--ink-faint); }
.gen-node.is-dot.is-lit .gen-dot,
.gen-node.is-dot.is-sel .gen-dot { stroke: var(--gold); stroke-width: 1.8;
                                   fill: var(--node-fill-hi); }
.gen-node.is-dot.is-sel .gen-dot-initials { fill: var(--gold-ink); }
.gen-node.is-coauthor .gen-dot { stroke: var(--plum); stroke-width: 1.6; }
.gen-node.is-coauthor .gen-avatar { stroke: var(--plum); stroke-width: 1.5; }

#gen-panel { border: 1px solid var(--rule-faint); border-radius: 3px;
             background: var(--panel); padding: 0.9rem 1rem 1rem;
             font-size: 0.88rem; }
.gen-portrait { width: 100%; aspect-ratio: 1 / 1; max-height: 9.5rem;
                border: 1px solid var(--rule-faint); border-radius: 2px;
                display: flex; align-items: center; justify-content: center;
                overflow: hidden; margin-bottom: 0.6rem; color: var(--ink-faint);
                font: 400 1.5rem var(--mono); }
.gen-portrait img { width: 100%; height: 100%; object-fit: cover; }
.gen-pname { font-size: 1rem; margin: 0 0 0.15rem; text-align: left; max-width: none; }
.gen-pmeta, .gen-pthesis, .gen-prel, .gen-pnote { margin: 0 0 0.35rem;
  text-align: left; max-width: none; font-size: 0.84rem; color: var(--ink-soft); }
.gen-prel span, .gen-pthesis span { font-variant: small-caps;
  letter-spacing: 0.06em; color: var(--ink-faint); }
.gen-pnote { font-style: italic; }
#gen-panel .linkrow { margin-top: 0.6rem; }

@media (max-width: 56rem) { .gen-wrap { grid-template-columns: 1fr; } }

/* A small plate in the margin, under the running head.  Deliberately not a
   focal point: it sits in the furniture of the page, quiet by default and
   in full colour only when you look at it. */
.rail .plate {
  display: block;
  width: 100%;
  max-width: 9.4rem;
  height: auto;
  margin: 0 0 1.3rem;
  border: 1px solid var(--rule-faint);
  border-radius: 2px;
  filter: grayscale(0.45) contrast(0.96);
  opacity: 0.88;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.rail .plate:hover { filter: none; opacity: 1; }
@media (max-width: 56rem) { .rail .plate { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail .plate { transition: none; } }

/* Ardila's axioms, set as a numbered display rather than a policy block */
.axioms { list-style: none; counter-reset: ax; margin: 0 0 1rem; padding: 0;
          max-width: var(--measure); }
.axioms > li { position: relative; padding: 0 0 0.55rem 4.6rem;
               font-size: 0.97rem; }
.axioms > li::before {
  counter-increment: ax;
  content: "Axiom " counter(ax) ".";
  position: absolute; left: 0; top: 0; width: 4rem;
  font-variant: small-caps; letter-spacing: 0.05em;
  color: var(--gold-ink); font-size: 0.9rem;
}
@media (max-width: 56rem) {
  .axioms > li { padding-left: 0; }
  .axioms > li::before { position: static; display: block; width: auto;
                         margin-bottom: 0.1rem; }
}