/* Elections decisions archive — built on Ruby, the Darrow design system.
 *
 * Primitives and semantic tokens come from brand/ruby-tokens.css unchanged.
 * One deviation, deliberate: Ruby specifies Inter as the only typeface, but
 * Inter carries no Hebrew glyphs. Inter still sets Latin text and numerals;
 * Assistant — a neutral grotesque cut to match — picks up the Hebrew.
 */
@import url("/brand/ruby-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&display=swap");

:root {
  --font-body: "Inter", "Assistant", -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --page-max: 1180px;
  --thread-max: 780px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-gray-25:#FAFAFA; --color-gray-50:#F7F7F7; --color-gray-100:#F0F0F1;
    --color-gray-200:#ECECED; --color-gray-300:#CECFD2; --color-gray-400:#94979C;
    --color-gray-500:#85888E; --color-gray-600:#61656C; --color-gray-700:#373A41;
    --color-gray-800:#22262F; --color-gray-900:#13161B; --color-gray-950:#0C0E12;
    --color-text-primary:#FFFFFF;
    --color-text-secondary:var(--color-gray-300);
    --color-text-tertiary:var(--color-gray-400);
    --color-text-brand-secondary:var(--color-brand-300);
    --color-bg-primary:var(--color-gray-950);
    --color-bg-secondary:var(--color-gray-900);
    --color-bg-primary-hover:var(--color-gray-800);
    --color-bg-active:var(--color-gray-800);
    --color-bg-brand-primary:rgba(79,61,127,.28);
    --color-bg-brand-subtle:rgba(79,61,127,.16);
    --color-border-primary:var(--color-gray-800);
    --color-border-secondary:var(--color-gray-700);
    --color-fg-brand-primary:var(--color-brand-300);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font: 400 var(--text-md)/var(--text-md-lh) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-text-brand-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── masthead ─────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
}
.head-in {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-lg) var(--space-3xl);
  display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
/* The wordmark is drawn as a mask so it always takes the current text colour,
   which keeps contrast correct in both themes from a single asset. */
.wordmark {
  display: block; width: 88px; height: 19px; flex: none;
  background-color: var(--color-text-primary);
  -webkit-mask: url("/brand/logo-dark.svg") no-repeat center / contain;
  mask: url("/brand/logo-dark.svg") no-repeat center / contain;
}
.wordmark.muted { background-color: var(--color-text-quaternary); height: 17px; width: 79px; }
.wordmark:hover { background-color: var(--color-text-brand-secondary); }
.rule { width: 1px; height: 22px; background: var(--color-border-primary); }
.title { min-width: 0; cursor: pointer; }
.title:hover h1 .project { color: var(--color-text-brand-secondary); }
.title h1 {
  margin: 0; display: flex; align-items: baseline; gap: var(--space-sm);
  font: 400 var(--text-sm)/var(--text-sm-lh) var(--font-display);
  color: var(--color-text-tertiary);
}
.title h1 .project { font-weight: 600; color: var(--color-text-primary); }
.title h1 .sep { color: var(--color-fg-quaternary); }
@media (max-width: 600px) { .title h1 .sep, .title h1 { font-size: var(--text-xs); } }
.title .sub {
  font: 400 var(--text-xs)/var(--text-xs-lh) var(--font-body);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-lg); }
.ghost {
  border: 1px solid var(--color-border-primary); background: var(--color-bg-primary);
  color: var(--color-text-secondary); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg); cursor: pointer;
  font: 500 var(--text-sm)/1 var(--font-body);
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.ghost:hover { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.tabs {
  display: flex; gap: var(--space-xxs);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md); padding: 3px;
}
.tabs button {
  border: 0; background: none; color: var(--color-text-tertiary);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm); cursor: pointer;
  font: 500 var(--text-sm)/1 var(--font-body);
  transition: background .2s ease-out, color .2s ease-out;
}
.tabs button:hover { color: var(--color-text-primary); }
.tabs button[aria-selected="true"] {
  background: var(--color-bg-brand-solid); color: var(--color-text-on-brand);
  box-shadow: var(--shadow-xs-skeumorphic);
}

.view { display: none; }
.view.on { display: block; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-3xl) var(--space-8xl); }

/* ── ask ──────────────────────────────────────────────────────────────── */
#chat-scroll { max-width: var(--thread-max); margin: 0 auto; padding: var(--space-4xl) var(--space-3xl) 200px; }
.hero { padding: var(--space-8xl) 0 var(--space-4xl); }
.hero h2 {
  margin: 0 0 var(--space-lg);
  font: 600 var(--text-display-sm)/var(--text-display-sm-lh) var(--font-display);
  letter-spacing: -0.6px; color: var(--color-text-primary);
}
.hero p {
  margin: 0; max-width: var(--paragraph-max-width);
  color: var(--color-text-tertiary);
  font: 400 var(--text-md)/var(--text-md-lh) var(--font-body);
}
.examples { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-4xl); }
.examples button {
  text-align: start; background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl); cursor: pointer;
  font: 400 var(--text-sm)/var(--text-sm-lh) var(--font-body);
  transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
}
.examples button:hover {
  border-color: var(--color-border-secondary);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.msg { margin-bottom: var(--space-5xl); }
.msg.me { display: flex; }
.msg.me .bubble {
  background: var(--color-bg-brand-primary);
  color: var(--color-text-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl); max-width: 82%;
  font: 500 var(--text-sm)/var(--text-sm-lh) var(--font-body);
}
.answer { font: 400 var(--text-md)/26px var(--font-body); color: var(--color-text-secondary); }
.answer p { margin: 0 0 var(--space-xl); }
.answer ul, .answer ol { margin: 0 0 var(--space-xl); padding-inline-start: var(--space-3xl); }
.answer li { margin-bottom: var(--space-md); }
.answer strong { font-weight: 600; color: var(--color-text-primary); }
.answer h3 {
  margin: var(--space-3xl) 0 var(--space-lg);
  font: 600 var(--text-lg)/var(--text-lg-lh) var(--font-display);
  color: var(--color-text-primary);
}
.working { display: inline-flex; align-items: center; gap: var(--space-lg); color: var(--color-text-tertiary); }
.working-label { font-size: var(--text-sm); }
.dots span {
  display: inline-block; width: 5px; height: 5px; margin-inline-end: 3px;
  border-radius: var(--radius-full); background: var(--color-fg-quaternary);
  animation: pulse 1.4s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%,70%,100% { opacity: .3 } 35% { opacity: 1 } }

.cite {
  display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 2px;
  text-align: center; vertical-align: 1px;
  background: var(--color-bg-brand-primary); color: var(--color-text-brand-secondary);
  border: 1px solid transparent; border-radius: var(--radius-xs);
  font: 600 var(--text-xs)/17px var(--font-body); cursor: pointer;
  transition: background .2s ease-out, color .2s ease-out;
}
.cite:hover { background: var(--color-bg-brand-solid); color: var(--color-text-on-brand); }

.sources { margin-top: var(--space-3xl); }
.sources h4 {
  margin: 0 0 var(--space-lg);
  font: 600 var(--text-xs)/var(--text-xs-lh) var(--font-body);
  color: var(--color-text-tertiary); letter-spacing: .02em;
}
.src {
  display: flex; gap: var(--space-lg); align-items: flex-start;
  border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-md);
  background: var(--color-bg-primary);
  transition: border-color .2s ease-out, background .2s ease-out;
}
.src.hi { border-color: var(--color-border-brand); background: var(--color-bg-brand-subtle); }
.src .num {
  flex: none; width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: var(--color-bg-brand-primary); color: var(--color-text-brand-secondary);
  border-radius: var(--radius-xs); font: 600 var(--text-xs)/20px var(--font-body);
}
.src .body { min-width: 0; flex: 1; }
.src .t {
  font: 500 var(--text-sm)/var(--text-sm-lh) var(--font-body);
  color: var(--color-text-primary); margin-bottom: var(--space-xs);
}
.src .m {
  display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center;
  font: 400 var(--text-xs)/var(--text-xs-lh) var(--font-body);
  color: var(--color-text-tertiary);
}
.src .acts { display: flex; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
.act {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  border: 1px solid var(--color-border-primary); background: var(--color-bg-primary);
  color: var(--color-text-secondary); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg); cursor: pointer; text-decoration: none;
  font: 500 var(--text-xs)/18px var(--font-body);
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.act:hover {
  background: var(--color-bg-secondary); border-color: var(--color-border-secondary);
  color: var(--color-text-primary); text-decoration: none;
}
.act svg { width: 13px; height: 13px; flex: none; }
/* Secondary: the collection page, not this decision. */
.act.subtle { color: var(--color-text-quaternary); border-color: transparent; }
.act.subtle:hover { color: var(--color-text-secondary); border-color: var(--color-border-primary); }
/* The document itself is the primary action on a source. */
.src .acts a.act:not(.subtle) { border-color: var(--color-border-brand-alt); color: var(--color-text-brand-secondary); }
.src .acts a.act:not(.subtle):hover { background: var(--color-bg-brand-subtle); }

/* ── composer ─────────────────────────────────────────────────────────── */
.composer {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  padding: var(--space-4xl) var(--space-3xl) var(--space-2xl);
  background: linear-gradient(to top, var(--color-bg-primary) 62%, transparent);
}
.composer-in {
  max-width: var(--thread-max); margin: 0 auto;
  display: flex; gap: var(--space-md); align-items: flex-end;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl); padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.composer-in:focus-within {
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--color-focus-ring-brand);
}
#ask {
  flex: 1; border: 0; background: none; color: inherit; resize: none; outline: none;
  padding: var(--space-md) var(--space-lg); max-height: 160px; min-height: 24px;
  font: 400 var(--text-sm)/22px var(--font-body);
}
#ask::placeholder { color: var(--color-text-placeholder); }
.send {
  flex: none; width: 36px; height: 36px; border: 0; cursor: pointer;
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid); color: var(--color-text-on-brand);
  box-shadow: var(--shadow-xs-skeumorphic);
  display: grid; place-items: center;
  transition: background .2s ease-out;
}
.send:hover:not(:disabled) { background: var(--color-bg-brand-solid-hover); }
.send:disabled { background: var(--color-bg-disabled); color: var(--color-fg-disabled); cursor: default; box-shadow: none; }
.send svg { width: 16px; height: 16px; }
.send.stop { background: var(--color-bg-secondary); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary); box-shadow: none; }
.send.stop:hover { background: var(--color-bg-active); color: var(--color-text-primary); }

.msg-tools { display: flex; gap: var(--space-md); margin-top: var(--space-lg); opacity: 0; transition: opacity .2s ease-out; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
.msg.me .msg-tools { justify-content: flex-start; }
.tool-btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  border: 1px solid transparent; background: none; color: var(--color-text-quaternary);
  border-radius: var(--radius-md); padding: var(--space-xs) var(--space-md);
  cursor: pointer; font: 500 var(--text-xs)/16px var(--font-body);
  transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.tool-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-secondary); border-color: var(--color-border-primary); }
.tool-btn svg { width: 12px; height: 12px; }
.tool-btn.done { color: var(--color-text-success-primary); }

.searching {
  display: flex; align-items: center; gap: var(--space-md);
  color: var(--color-text-quaternary); margin: var(--space-lg) 0;
  font: 400 var(--text-xs)/18px var(--font-body);
}
.searching svg { width: 12px; height: 12px; flex: none; }
.stopped { color: var(--color-text-quaternary); font-size: var(--text-xs); margin-top: var(--space-lg); }

.note {
  max-width: var(--thread-max); margin: var(--space-lg) auto 0; text-align: center;
  font: 400 var(--text-xs)/var(--text-xs-lh) var(--font-body);
  color: var(--color-text-quaternary);
}
.disclaimer {
  max-width: var(--thread-max); margin: var(--space-5xl) auto 0;
  border-top: 1px solid var(--color-border-primary); padding-top: var(--space-xl);
  font: 400 var(--text-xs)/18px var(--font-body); color: var(--color-text-quaternary);
}

/* ── search ───────────────────────────────────────────────────────────── */
.searchbox {
  display: flex; align-items: center; gap: var(--space-lg);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg); padding: 0 var(--space-xl);
  margin-top: var(--space-3xl);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.searchbox:focus-within {
  border-color: var(--color-border-brand);
  box-shadow: 0 0 0 4px var(--color-focus-ring-brand);
}
.searchbox svg { color: var(--color-fg-quaternary); flex: none; }
#q {
  flex: 1; border: 0; background: none; color: inherit; outline: none;
  padding: var(--space-lg) 0; font: 400 var(--text-sm)/22px var(--font-body);
}
#q::placeholder { color: var(--color-text-placeholder); }

main { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-5xl); margin-top: var(--space-3xl); align-items: start; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
aside { position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow: auto; }
.facet { padding-bottom: var(--space-xl); }
.facet > label {
  display: block; margin-bottom: var(--space-sm);
  font: 500 var(--text-xs)/var(--text-xs-lh) var(--font-body);
  color: var(--color-text-tertiary);
}
select, input[type=number] {
  width: 100%; background: var(--color-bg-primary); color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font: 400 var(--text-sm)/20px var(--font-body);
}
select:hover, input[type=number]:hover { border-color: var(--color-border-secondary); }
.years { display: flex; gap: var(--space-md); align-items: center; }
.years span { color: var(--color-text-quaternary); }
.count {
  color: var(--color-text-tertiary); margin: 0 0 var(--space-xl);
  font: 400 var(--text-sm)/var(--text-sm-lh) var(--font-body);
  font-variant-numeric: tabular-nums;
}

.card {
  border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl);
  padding: var(--space-xl); margin-bottom: var(--space-lg); cursor: pointer;
  background: var(--color-bg-primary);
  transition: border-color .2s ease-out, background .2s ease-out;
}
.card:hover { border-color: var(--color-border-secondary); background: var(--color-bg-secondary); }
.card-top { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.tag {
  font: 500 var(--text-xs)/18px var(--font-body); padding: 1px var(--space-md);
  border-radius: var(--radius-full); white-space: nowrap;
  background: var(--color-bg-brand-primary); color: var(--color-text-brand-secondary);
}
.tag.plain { background: var(--color-bg-secondary); color: var(--color-text-tertiary); border: 1px solid var(--color-border-primary); }
.tag.ok { background: var(--color-bg-success-primary); color: var(--color-text-success-primary); }
.tag.no { background: var(--color-bg-error-primary); color: var(--color-text-error-primary); }
.score { margin-inline-start: auto; font: 400 var(--text-xs)/18px var(--font-mono); color: var(--color-text-quaternary); }
.card h3 {
  margin: 0 0 var(--space-md);
  font: 500 var(--text-md)/24px var(--font-display); color: var(--color-text-primary);
}
.parties { font: 400 var(--text-xs)/18px var(--font-body); color: var(--color-text-tertiary); margin-bottom: var(--space-md); }
.parties b { font-weight: 500; color: var(--color-text-secondary); }
.snippet {
  font: 400 var(--text-sm)/22px var(--font-body); color: var(--color-text-tertiary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
mark {
  background: var(--color-brand-100); color: var(--color-brand-900);
  border-radius: var(--radius-xxs); padding: 0 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark {
    background: rgba(125, 94, 187, .32); color: var(--color-text-primary);
  }
}

.empty { padding: var(--space-9xl) var(--space-3xl); text-align: center; color: var(--color-text-tertiary); font-size: var(--text-sm); }
.spinner {
  width: 18px; height: 18px; margin: 0 auto var(--space-lg);
  border: 2px solid var(--color-border-primary); border-top-color: var(--color-fg-brand-primary);
  border-radius: var(--radius-full); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ── record detail ────────────────────────────────────────────────────── */
dialog {
  border: 0; padding: 0; border-radius: var(--radius-2xl);
  background: var(--color-bg-primary); color: var(--color-text-primary);
  width: min(860px, 94vw); max-height: 88vh; box-shadow: var(--shadow-3xl);
}
dialog::backdrop { background: rgba(10, 13, 18, .6); }
.dlg-head {
  position: sticky; top: 0; background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
  padding: var(--space-3xl) var(--space-3xl) var(--space-xl);
  display: flex; gap: var(--space-xl); align-items: flex-start;
}
.dlg-head h2 {
  margin: 0 0 var(--space-md);
  font: 600 var(--text-xl)/var(--text-xl-lh) var(--font-display);
  color: var(--color-text-primary);
}
.x {
  margin-inline-start: auto; flex: none; width: 30px; height: 30px; border: 0;
  background: var(--color-bg-secondary); color: var(--color-text-tertiary);
  border-radius: var(--radius-md); cursor: pointer; display: grid; place-items: center;
  transition: background .2s ease-out, color .2s ease-out;
}
.x:hover { background: var(--color-bg-active); color: var(--color-text-primary); }
.dlg-body { padding: var(--space-3xl); overflow: auto; max-height: calc(88vh - 96px); }
.kv {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md) var(--space-3xl);
  font: 400 var(--text-sm)/var(--text-sm-lh) var(--font-body); margin: 0 0 var(--space-4xl);
}
.kv dt { color: var(--color-text-tertiary); }
.kv dd { margin: 0; color: var(--color-text-primary); }
h4.sec {
  margin: var(--space-4xl) 0 var(--space-lg);
  font: 600 var(--text-xs)/var(--text-xs-lh) var(--font-body); color: var(--color-text-tertiary);
}
.doc { border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); overflow: hidden; }
.doc summary {
  padding: var(--space-lg) var(--space-xl); cursor: pointer;
  background: var(--color-bg-secondary);
  display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap;
  font: 500 var(--text-sm)/20px var(--font-body); color: var(--color-text-primary);
}
.doc .body {
  padding: var(--space-xl); white-space: pre-wrap; overflow: auto; max-height: 420px;
  border-top: 1px solid var(--color-border-primary);
  font: 400 var(--text-sm)/24px var(--font-body); color: var(--color-text-secondary);
}
.doc-acts { margin-inline-start: auto; display: flex; gap: var(--space-md); }
.sim {
  display: block; width: 100%; text-align: start; cursor: pointer;
  border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg);
  background: var(--color-bg-primary); color: var(--color-text-primary);
  padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-md);
  font: 400 var(--text-sm)/var(--text-sm-lh) var(--font-body);
  transition: border-color .2s ease-out, background .2s ease-out;
}
.sim:hover { border-color: var(--color-border-secondary); background: var(--color-bg-secondary); }
.sim .s { color: var(--color-text-tertiary); font-size: var(--text-xs); margin-top: 2px; }

/* ── colophon ─────────────────────────────────────────────────────────── */
.colophon {
  border-top: 1px solid var(--color-border-primary);
  margin-top: var(--space-8xl); padding: var(--space-4xl) var(--space-3xl) var(--space-6xl);
  background: var(--color-bg-primary); position: relative; z-index: 21;
}
/* The composer is fixed to the viewport, so on the chat view the page needs
   room to scroll the colophon clear of it instead of underneath it. */
body.chat-view .colophon { padding-bottom: 200px; }
body.chat-view #chat-scroll { padding-bottom: var(--space-6xl); }
.colophon-in {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; gap: var(--space-4xl); align-items: flex-start; flex-wrap: wrap;
}

.colophon p {
  margin: 0; max-width: 620px;
  font: 400 var(--text-xs)/19px var(--font-body); color: var(--color-text-quaternary);
}
.colophon p + p { margin-top: var(--space-md); }