:root {
  --paper: #FDFDFB;
  --paper-deep: #F3F4F2;
  --ink: #1E1F22;
  --ink-soft: #55585E;
  --rule: #D6D7D2;
  --accent: #1F3A68;
  --danger: #8A1F1F;
  --text: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --measure: 34rem;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16181C;
    --paper-deep: #1D2026;
    --ink: #E6E4DE;
    --ink-soft: #A5A7AC;
    --rule: #34373D;
    --accent: #A9BDE3;
    --danger: #E09A9A;
  }
}
:root[data-theme="dark"] {
  --paper: #16181C;
  --paper-deep: #1D2026;
  --ink: #E6E4DE;
  --ink-soft: #A5A7AC;
  --rule: #34373D;
  --accent: #A9BDE3;
  --danger: #E09A9A;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--text);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }

.page { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page.wide { max-width: calc(46rem + 2 * var(--gutter)); }

/* Running head */
.runhead {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem;
  max-width: 62rem; margin: 0 auto; padding: 22px var(--gutter);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--rule);
}
.runhead .home { color: var(--ink); text-decoration: none; font-style: italic; }
.runhead nav { display: flex; gap: 1.5rem; }
.runhead nav a { color: var(--ink-soft); text-decoration: none; }
.runhead nav a:hover, .runhead nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Title page */
.titlepage { text-align: center; padding: clamp(56px, 11vh, 120px) 0 clamp(40px, 7vh, 72px); }
.titlepage h1 {
  font-family: var(--display);
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.titlepage .rule { width: 3rem; height: 1px; background: var(--ink); margin: 1.75rem auto; border: 0; }
.titlepage .byline { font-style: italic; font-size: 1.125rem; }
.titlepage .venue { color: var(--ink-soft); margin-top: 0.35rem; }
.titlepage .count { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--ink-soft); min-height: 1.7em; }

/* Body sections */
.section { padding: clamp(36px, 6vh, 56px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-title {
  font-family: var(--display);
  font-size: 1.625rem; line-height: 1.2;
  text-align: center;
  margin-bottom: 1.5rem;
}
.prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.prose p + p { text-indent: 1.5em; }

.abstract {
  margin: 0 auto; max-width: 30rem;
  font-size: 1.1875rem; line-height: 1.75;
  text-align: left; hyphens: manual;
}
.abstract::first-letter {
  font-family: var(--display);
  float: left; font-size: 3.6em; line-height: 0.82;
  padding: 0.06em 0.08em 0 0;
}

/* Articles */
.articles { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.article { position: relative; }
.article + .article { margin-top: 1.4rem; }
.article .numeral {
  display: block;
  font-family: var(--display); color: var(--accent);
  font-size: 0.9375rem; letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.article p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.article .head { font-weight: 700; }
.article .head i { font-weight: 400; }
@media (min-width: 900px) {
  .article .numeral {
    position: absolute; right: calc(100% + 1.75rem); top: 0.18em;
    margin: 0; text-align: right; white-space: nowrap;
  }
}

/* Call to sign */
.call { text-align: center; }
.call p { color: var(--ink-soft); max-width: 28rem; margin: 0 auto 1.5rem; }
.button {
  display: inline-block;
  font: inherit; font-size: 1rem; letter-spacing: 0.02em;
  padding: 0.7em 1.6em;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--accent); border-color: var(--accent); }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.button[disabled] { opacity: 0.5; cursor: progress; }

/* Notes */
.notes { font-size: 0.9375rem; color: var(--ink-soft); }
.notes ol { margin: 0; padding-left: 1.25rem; }
.notes li + li { margin-top: 0.4rem; }
.notes h2 { font-family: var(--display); font-size: 1.125rem; color: var(--ink); margin-bottom: 0.75rem; }
sup a { text-decoration: none; padding: 0 0.1em; }

.colophon {
  max-width: 62rem; margin: 0 auto; padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  font-size: 0.875rem; color: var(--ink-soft); font-style: italic;
}

/* Forms */
.form { display: grid; gap: 2.25rem; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.form legend {
  font-family: var(--display); font-size: 1.25rem;
  padding: 0 0 0.5rem; margin-bottom: 0.5rem; width: 100%;
  border-bottom: 1px solid var(--ink);
}
.form legend span { font-family: var(--text); font-style: italic; font-size: 0.9375rem; color: var(--ink-soft); }
.field { display: grid; gap: 0.2rem; }
.field label { font-size: 0.9375rem; }
.field .hint { font-size: 0.875rem; font-style: italic; color: var(--ink-soft); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  padding: 0.35rem 0; width: 100%;
}
.field textarea { border: 1px solid var(--rule); padding: 0.5rem 0.6rem; min-height: 6.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field .error, .oath .error { color: var(--danger); font-size: 0.875rem; font-style: italic; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.pair { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .pair { grid-template-columns: 1fr 1fr; } }
.oath {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  padding: 1rem 1.1rem; background: var(--paper-deep); border-left: 2px solid var(--ink);
}
.oath input { width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; accent-color: var(--accent); }
.oath.invalid { border-left-color: var(--danger); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formstatus { font-style: italic; }
.formstatus.error { color: var(--danger); }
.receipt { text-align: center; padding: 2rem 0; }
.receipt h2 { font-family: var(--display); font-size: 2rem; margin-bottom: 0.75rem; }
.receipt p { color: var(--ink-soft); max-width: 28rem; margin: 0 auto; }

/* Register */
.register-intro { text-align: center; color: var(--ink-soft); max-width: 32rem; margin: 0 auto; }
.filters { margin: 2rem 0 0.5rem; display: grid; gap: 0.9rem; }
.filters input {
  font: inherit; color: var(--ink); background: transparent; width: 100%;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0.4rem 0;
}
.filters input:focus { outline: none; border-color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.tag {
  font: inherit; font-size: 0.875rem; font-style: italic;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 0; padding: 0.1rem 0.55rem; cursor: pointer;
}
.tag:hover { border-color: var(--ink-soft); color: var(--ink); }
.tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.register { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry .no { font-family: var(--display); color: var(--accent); font-size: 0.9375rem; padding-top: 0.35rem; }
.entry h2 { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; }
.entry .role { font-style: italic; color: var(--ink-soft); }
.entry dl { margin: 0.8rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; }
.entry dt { font-size: 0.875rem; font-style: italic; color: var(--ink-soft); padding-top: 0.12rem; }
.entry dd { margin: 0; }
.entry blockquote { margin: 0.9rem 0 0; padding-left: 1rem; border-left: 1px solid var(--rule); font-style: italic; }
.entry .links { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.9375rem; }
@media (max-width: 520px) {
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry .no { padding: 0 0 0.2rem; }
  .entry dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry dd + dt { margin-top: 0.4rem; }
}
.empty { text-align: center; padding: 3rem 0; color: var(--ink-soft); font-style: italic; }

/* Admin */
.admin-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 1.5rem 0; }
.admin-bar .field { flex: 1 1 16rem; }
.status-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.5rem; }
.status-tabs button {
  font: inherit; background: none; border: 0; padding: 0.5rem 0; cursor: pointer; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.status-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.entry .actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.entry .meta { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.4rem; }

@media (prefers-reduced-motion: no-preference) {
  .titlepage > * { animation: ink 1100ms ease-out both; }
  .titlepage > *:nth-child(n+2) { animation-delay: 250ms; }
  @keyframes ink { from { opacity: 0; } to { opacity: 1; } }
}

/* Corpus: the author's other work */
.colophon { display: block; }
.corpus { padding-bottom: 28px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); font-style: normal; }
.corpus-title { font-family: var(--display); font-size: 1.125rem; color: var(--ink); margin-bottom: 1rem; }
.corpus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; }
@media (min-width: 760px) { .corpus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.corpus h2 { font-size: 0.875rem; font-style: italic; color: var(--ink-soft); margin-bottom: 0.4rem; }
.corpus ul { list-style: none; margin: 0; padding: 0; }
.corpus li + li { margin-top: 0.2rem; }
.corpus a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.corpus a:hover { color: var(--accent); text-decoration: underline; }
.colophon-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }

/* Key phrases in the manifesto, and their commentary */
:root { --mark: color-mix(in srgb, var(--accent) 12%, transparent); --mark-strong: color-mix(in srgb, var(--accent) 22%, transparent); }
a.gloss {
  color: inherit; text-decoration: none;
  background: var(--mark);
  box-shadow: inset 0 -1px 0 var(--accent);
  padding: 0 0.1em; margin: 0 -0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color 120ms ease;
}
a.gloss:hover, a.gloss.is-active { background: var(--mark-strong); }
.gloss-hint { text-align: center; margin-top: 1.25rem; font-size: 0.875rem; font-style: italic; color: var(--ink-soft); }

.gloss-panel {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(30rem, 100vw); height: 100%; max-height: none; max-width: none;
  padding: 0; border: 0; border-left: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  display: none; flex-direction: column;
}
.gloss-panel[open] { display: flex; }
.gloss-panel::backdrop { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.gloss-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 28px; border-bottom: 1px solid var(--rule);
}
.gloss-kicker { font-style: italic; color: var(--ink-soft); font-size: 0.9375rem; }
.gloss-pos { margin-left: 0.5rem; font-variant-numeric: oldstyle-nums; }
.gloss-close, .gloss-nav button {
  font: inherit; font-size: 0.9375rem; color: var(--accent); background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.gloss-content { flex: 1; overflow-y: auto; padding: 28px 28px 8px; }
.gloss-nav { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 28px 20px; border-top: 1px solid var(--rule); }
.gloss-nav button { text-align: left; max-width: 48%; }
.gloss-nav .gloss-next { text-align: right; }

/* A note, in the panel and on the commentary page */
.note h2 { font-family: var(--display); font-size: 1.75rem; line-height: 1.2; margin-bottom: 1rem; }
.note-body p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.note-body p + p { text-indent: 1.5em; }
.note .related, .note .further { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.75rem; }
.note .related { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.notes-list .note { padding: clamp(32px, 5vh, 48px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.notes-list .note:target h2 { color: var(--accent); }
.article { scroll-margin-top: 32px; }

@media (max-width: 640px) {
  .gloss-panel {
    inset: auto 0 0 0; width: 100%; height: auto; max-height: 85vh;
    border-left: 0; border-top: 1px solid var(--ink);
  }
  .gloss-bar, .gloss-nav { padding-left: 20px; padding-right: 20px; }
  .gloss-content { padding: 22px 20px 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gloss-panel[open] { animation: gloss-in 260ms cubic-bezier(.2,.7,.2,1); }
  .gloss-panel.closing { animation: gloss-out 220ms ease-in forwards; }
  .gloss-panel[open]::backdrop { animation: ink 260ms ease-out; }
  @keyframes gloss-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes gloss-out { to { transform: translateX(100%); } }
  @media (max-width: 640px) {
    @keyframes gloss-in { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes gloss-out { to { transform: translateY(100%); } }
  }
}

/* Signatures: drawn on the sign form, inked in the register */
.sigpad { position: relative; border-bottom: 1px solid var(--ink); background: var(--paper-deep); }
.sigpad canvas { display: block; width: 100%; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; color: var(--ink); }
.sigmark { position: absolute; left: 0.6rem; bottom: 0.2rem; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); pointer-events: none; }
.sigtools { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.35rem; }
.linkbutton {
  font: inherit; font-size: 0.9375rem; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
#field-signature.invalid .sigpad { border-bottom-color: var(--danger); }
svg.sig { display: block; width: 100%; height: auto; overflow: visible; }
svg.sig path { fill: var(--ink); stroke: none; }
.sig-host { max-width: 15rem; margin: -0.25rem 0 0.35rem; }
.receipt-sig { max-width: 22rem; margin: 0 auto 1.5rem; }
.receipt-sig:empty { display: none; }

/* Phones */
@media (max-width: 640px) {
  .prose p, .article p, .note-body p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
  .sigpad canvas { aspect-ratio: 2 / 1; overscroll-behavior: contain; }
  .oath input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; }
  .runhead nav { gap: 1.25rem; }
  .runhead nav a { padding: 0.35rem 0; }
  .button { padding: 0.85em 1.6em; }
}

.field select {
  font: inherit; color: var(--ink); background: transparent; width: 100%;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0.35rem 0;
}
.field select:focus { outline: none; border-color: var(--accent); }
.note-numeral { display: block; font-size: 0.9375rem; color: var(--accent); margin-bottom: 0.2rem; }
.runhead nav { flex-wrap: wrap; row-gap: 0.25rem; }
@media (max-width: 640px) {
  .runhead nav { width: 100%; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
}

/* Home page: the key phrases are read plain first, then fade in as highlights */
.js [data-reveal-after] a.gloss { transition: background-color 1.6s ease, box-shadow 1.6s ease; }
.js [data-reveal-after]:not(.revealed) a.gloss { background-color: transparent; box-shadow: inset 0 -1px 0 transparent; }
.js [data-reveal-after] + .gloss-hint { transition: opacity 1.6s ease 0.4s; }
.js [data-reveal-after]:not(.revealed) + .gloss-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-after] a.gloss, .js [data-reveal-after] + .gloss-hint { transition: none; }
}
.js [data-reveal-after].settled a.gloss { transition: background-color 120ms ease; }

/* Admin: an entry against its proposed update */
.compare { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9375rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid var(--rule); }
.compare th { font-weight: 400; font-style: italic; color: var(--ink-soft); width: 8rem; }
.compare tr:first-child th { font-style: normal; color: var(--ink); }
.compare tr.changed td:last-child { background: var(--mark); }
.compare-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }

/* Simplified signing */
.oathline { font-size: 0.9375rem; color: var(--ink-soft); font-style: italic; margin-bottom: 1rem; max-width: 30rem; }
#nodraw { justify-self: start; margin-top: 0.25rem; font-size: 0.875rem; }
.sigpad.off { opacity: 0.35; pointer-events: none; }
.label-like { font-size: 0.9375rem; }
.sig-current { max-width: 18rem; padding: 0.5rem 0; }
.entry .signed { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.15rem; }