/* AnmolUni is the font the source text was typed in: it draws every pairin
   (੍ਹ ੍ਰ ੍ਵ ੍ਯ ੍ਨ ੍ਚ ੍ਟ) as the small letter under the akhar, as in the Bir. */
@font-face { font-family: 'AnmolUni'; src: url('../fonts/AnmolUni.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AnmolUni'; src: url('../fonts/AnmolUni-Bold.ttf') format('truetype'); font-weight: 600 700; font-display: swap; }
:root {
  --paper: #eaf1fb;
  --paper-2: #d9e5f6;
  --card: #ffffff;
  --ink: #132341;
  --ink-2: #41557a;
  --ink-3: #6f82a3;
  --rule: #c3d3ea;
  --accent: #1d4f9c;
  --accent-soft: #d8e5f8;
  --indigo: #9a6400;
  --indigo-soft: #fbefd0;
  --mark: #ffe08a;
  --mark-strong: #a34a00;
  --mark-word: #fff3c9;
  --shadow: 0 1px 2px rgba(19, 35, 65, .06), 0 6px 20px rgba(19, 35, 65, .08);
  --gb-size: 22px;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --gurmukhi: 'AnmolUni', 'Noto Serif Gurmukhi', 'Raavi', 'Nirmala UI', 'Mukta Mahee', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1628; --paper-2: #122038; --card: #15243f; --ink: #e5edf9; --ink-2: #aebdd6; --ink-3: #7d8ead;
    --rule: #293b5c; --accent: #82b1ff; --accent-soft: #1b3058; --indigo: #f2c14e; --indigo-soft: #2e2814;
    --mark: #6a5310; --mark-strong: #ffd166; --mark-word: #2c2714; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1628; --paper-2: #122038; --card: #15243f; --ink: #e5edf9; --ink-2: #aebdd6; --ink-3: #7d8ead;
  --rule: #293b5c; --accent: #82b1ff; --accent-soft: #1b3058; --indigo: #f2c14e; --indigo-soft: #2e2814;
  --mark: #6a5310; --mark-strong: #ffd166; --mark-word: #2c2714; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  min-height: 100vh;
}
.hidden { display: none !important; }
.pa, .gb, .gbin { font-family: var(--gurmukhi); }
.gb { font-size: var(--gb-size); line-height: 1.85; }
code { font-size: .88em; background: var(--paper-2); padding: 0 .3em; border-radius: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: var(--ink); }

/* ---------- loading ---------- */
.loading { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; text-align: center;
  background: var(--paper); color: var(--ink-2); }
.loading .ik { font-family: var(--gurmukhi); font-size: 64px; color: var(--accent); animation: breathe 1.6s ease-in-out infinite; }
.loading p { font-family: var(--gurmukhi); }
.loading span { font-family: var(--serif); font-style: italic; }
@keyframes breathe { 50% { opacity: .45; } }

/* ---------- masthead ---------- */
.masthead {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px 16px; align-items: center;
  padding: 12px clamp(16px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--paper-2), var(--paper));
}
.masthead > .ik {
  grid-column: 2; grid-row: 1; justify-self: center;
  font-family: var(--gurmukhi); font-size: 40px; line-height: 1.1; color: var(--accent);
}
.brand { grid-column: 1 / -1; grid-row: 2; text-align: center; }
.brand h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 0; letter-spacing: .01em; }
.brand .sub { margin: 0; color: var(--ink-2); font-family: var(--serif); font-style: italic; }
.brand .sub .pa { font-style: normal; color: var(--accent); }
.tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 8px; align-items: center; }
.sizer { display: flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.sizer button, .icon-btn { background: var(--card); border: 0; padding: 4px 10px; font-family: var(--gurmukhi); }
.sizer button + button { border-left: 1px solid var(--rule); }
.icon-btn { border: 1px solid var(--rule); border-radius: 6px; }
.tabs { grid-column: 1 / -1; grid-row: 3; justify-content: center; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
.tabs button {
  background: none; border: 0; padding: 8px 14px 10px; display: flex; flex-direction: column; align-items: flex-start;
  color: var(--ink-2); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14px;
}
.tabs button .pa { font-size: 15px; color: var(--ink); line-height: 1.4; }
.tabs button.on { border-bottom-color: var(--accent); color: var(--accent); }
.tabs button.on .pa { color: var(--accent); }

main { padding: 20px clamp(16px, 4vw, 40px) 60px; max-width: 1500px; margin: 0 auto; }

/* ---------- workbench ---------- */
.workbench { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; }
.panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 18px; box-shadow: var(--shadow);
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto;
}
.panel h2, .view h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 12px; }
.panel h2 .pa, .view h2 .pa { color: var(--accent); margin-right: 6px; font-size: .9em; }
.step { border-top: 1px dashed var(--rule); padding-top: 10px; margin-top: 12px; }
.step h3 { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 8px; }
.step h3 b { display: inline-grid; place-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--card); font-size: 12px; margin-right: 4px; }
.step h3 .pa { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.seg button { background: var(--paper); border: 0; padding: 6px 4px; font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; }
.seg button .pa { font-size: 15px; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--accent); color: var(--card); }
.seg button.on .pa { color: var(--card); }

.field { display: block; margin: 10px 0; }
.lbl { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 4px; }
.inputrow { display: flex; gap: 6px; }
.gbin { flex: 1; min-width: 0; font-size: 22px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.gbin::placeholder { color: var(--ink-3); opacity: .55; }
.gbin:focus::placeholder { color: transparent; }
.gbin:focus, select:focus, input[type=number]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kbd-btn {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  border-radius: 8px; padding: 0 10px; font-family: var(--gurmukhi); font-size: 16px; white-space: nowrap;
}
.kbd-btn:hover, .kbd-btn.on { background: var(--accent); color: var(--card); }
.kbd-btn svg { flex-shrink: 0; }
.hint, .note { display: block; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.opts { display: flex; flex-direction: column; gap: 3px; margin: 10px 0; font-size: 15px; }
.opts label { display: flex; gap: 8px; align-items: center; }
.opts .chk { margin-top: 4px; }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }

.filters { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 8px; }
.filters summary { cursor: pointer; font-weight: 600; color: var(--indigo); }
.filters select, .filters input[type=number] { width: 100%; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.searchbtn {
  display: block; width: 100%; margin-top: 12px; padding: 9px 12px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--card); font-size: 16px; font-weight: 600; box-shadow: var(--shadow);
}
.searchbtn .pa { font-size: 18px; margin-right: 6px; }
.searchbtn:hover { filter: brightness(1.1); }
.angrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.angrow .lbl { width: 100%; }
.angrow input { width: 0 !important; flex: 1; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 15px; }

/* chips & letter grid */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips button, .presets button {
  border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--ink-2);
}
.chips button.on { background: var(--indigo); border-color: var(--indigo); color: var(--card); }
.gbchips button { border-radius: 8px; padding: 2px 8px; display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.gbchips button .g { font-family: var(--gurmukhi); font-size: 22px; line-height: 1.3; color: var(--ink); }
.gbchips button small { font-size: 10.5px; line-height: 1.1; }
.gbchips button.on .g { color: var(--card); }
.gbchips button .c { font-size: 10px; opacity: .7; }
.poslbl { margin-top: 10px; }
.poschips button .pa { font-size: 15px; color: var(--ink); }
.poschips button.on .pa { color: var(--card); }
.lettergrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; max-width: 300px; }
.lettergrid button { border: 1px solid var(--rule); background: var(--paper); border-radius: 6px; font-size: 21px; line-height: 1.6; padding: 0; font-family: var(--gurmukhi); }
.lettergrid button:hover, .chips button:hover, .presets button:hover { border-color: var(--accent); }
.lettergrid button.on { background: var(--accent); color: var(--card); border-color: var(--accent); }
.lettergrid .sep { grid-column: 1 / -1; height: 0; border-top: 1px dotted var(--rule); margin: 2px 0; }

.preview { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 14px; }
.preview .glyph { font-size: 56px; line-height: 1.2; min-width: 70px; text-align: center; color: var(--accent); }
.preview .desc { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 16px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { border-radius: 8px; text-align: left; padding: 4px 10px; }
.presets button .pa { font-size: 16px; color: var(--ink); }

/* ---------- results ---------- */
.results { min-width: 0; }
.empty { text-align: center; padding: 8vh 4vw; color: var(--ink-2); }
.empty .big { font-size: calc(var(--gb-size) * 1.3); color: var(--ink); }
.cite { font-family: var(--serif); font-style: italic; color: var(--ink-3); margin-top: -10px; }
.summary { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.summary .num { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent); }
.summary .stat { display: flex; flex-direction: column; }
.summary .stat span:last-child { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.summary .qd { flex-basis: 100%; font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.summary .qd .pa { font-style: normal; }
.didmean {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--mark-word); border: 1px solid var(--mark);
  font-style: normal; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.summary .act { margin-left: auto; display: flex; gap: 6px; }
.btn { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.btn:hover { border-color: var(--accent); }

.dist { margin: 12px 0; }
.dist summary { cursor: pointer; color: var(--indigo); font-weight: 600; font-size: 14px; }
.distgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.bars { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bars li { display: grid; grid-template-columns: 9.5em 1fr 3.5em; gap: 8px; align-items: center; padding: 2px 0; cursor: pointer; }
.bars li:hover .bl { color: var(--accent); }
.bars .bar { height: 8px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--indigo); border-radius: 4px; }
.bars .bn { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bars .bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.forms { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; align-items: center; }
.forms .flbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 4px; }
.forms button { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 0 8px; font-family: var(--gurmukhi); font-size: 18px; }
.forms button sup { font-family: var(--sans); font-size: 10px; color: var(--ink-3); margin-left: 3px; }
.forms button.on { background: var(--mark); border-color: var(--mark-strong); }
.forms .more { font-family: var(--sans); font-size: 13px; color: var(--indigo); }

.hits { list-style: none; margin: 0; padding: 0; counter-reset: hit var(--start, 0); }
.hits li {
  counter-increment: hit; position: relative; padding: 10px 12px 10px 48px; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.hits li::before { content: counter(hit); position: absolute; left: 6px; top: 16px; width: 32px; text-align: right; font-family: var(--serif); color: var(--ink-3); font-size: 14px; }
.hits li:hover { background: var(--card); }
.hits .gb { display: block; }
.hits .meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hits .meta b { color: var(--accent); font-weight: 600; }
.hits li.head .gb { color: var(--indigo); font-size: calc(var(--gb-size) * .85); }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.hw { background: var(--mark-word); border-radius: 3px; }
.hw mark { background: none; color: var(--mark-strong); text-decoration: underline 2px; text-underline-offset: 6px; font-weight: 700; }
.pager { display: flex; gap: 6px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.pager button { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; min-width: 36px; padding: 4px 8px; }
.pager button.on { background: var(--accent); color: var(--card); border-color: var(--accent); }

/* ---------- reader ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20, 14, 6, .35); z-index: 40; }
.reader {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(860px, 100%); z-index: 41; background: var(--card);
  border-left: 1px solid var(--rule); box-shadow: -10px 0 30px rgba(0,0,0,.15); display: flex; flex-direction: column;
}
.reader header { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.rtitle { flex: 1; min-width: 0; }
.rtitle .gb { font-size: calc(var(--gb-size) * .95); color: var(--indigo); line-height: 1.5; }
.rmeta { font-size: 13px; color: var(--ink-2); }
.ractions { display: flex; gap: 4px; flex-shrink: 0; }
.ractions button { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 4px 10px; font-size: 14px; }
.rbody { overflow: auto; padding: 18px 26px 60px; }
.verse { display: block; padding: 2px 6px; border-radius: 4px; }
.verse.head { text-align: center; color: var(--indigo); font-size: .88em; margin-top: 10px; }
.verse.hit { background: var(--mark-word); }
.verse.rahao { font-weight: 500; }
.angsep { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: 13px var(--sans); margin: 16px 0 6px; }
.angsep::before, .angsep::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }

/* ---------- Ang view ---------- */
.view h2 { margin-top: 0; }
.angbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.angbar label { display: flex; gap: 6px; align-items: center; font-family: var(--serif); font-size: 18px; }
.angbar input[type=number] { width: 90px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); }
.angbar input[type=range] { flex: 1; min-width: 160px; accent-color: var(--accent); }
.nav { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 4px 12px; }
.angmeta { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin-bottom: 10px; }
.page {
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: clamp(18px, 4vw, 48px);
  box-shadow: var(--shadow); max-width: 1100px; margin: 0 auto;
}
.pline { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; }
.pline .ln { font: 12px var(--sans); color: var(--ink-3); text-align: right; padding-top: .9em; }
.pline .tx .verse { display: inline; padding: 0 2px; cursor: pointer; }
.pline .tx .verse:hover { background: var(--paper-2); }
.pline .tx .verse.head { display: block; margin: 0; }

/* ---------- tables ---------- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border-bottom: 2px solid var(--ink); padding: 6px; }
table.data td { border-bottom: 1px solid var(--rule); padding: 5px 6px; vertical-align: middle; }
table.data td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--card); }
table.data .g { font-family: var(--gurmukhi); font-size: 20px; }
table.data .ex { font-family: var(--gurmukhi); font-size: 16px; color: var(--ink-2); }
.minibar { display: inline-block; height: 6px; background: var(--indigo); border-radius: 3px; vertical-align: middle; margin-left: 6px; }
.lede { font-family: var(--serif); font-size: 18px; color: var(--ink-2); max-width: 70ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.cards div { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
.cards b { display: block; font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--accent); }
.cards span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.view h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 22px 0 6px; }
.view h3 .pa { color: var(--accent); font-size: .85em; }
.matrixwrap { overflow: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); max-height: 70vh; }
table.matrix { border-collapse: collapse; font-size: 12px; }
table.matrix th, table.matrix td { padding: 0; text-align: center; border: 1px solid var(--rule); }
table.matrix thead th { position: sticky; top: 0; background: var(--paper-2); font-family: var(--gurmukhi); font-size: 18px; padding: 2px 6px; z-index: 1; }
table.matrix thead th small { display: block; font: 10px var(--sans); color: var(--ink-3); }
table.matrix tbody th { position: sticky; left: 0; background: var(--paper-2); font-family: var(--gurmukhi); font-size: 20px; padding: 0 10px; }
table.matrix td { min-width: 52px; height: 34px; cursor: pointer; font-variant-numeric: tabular-nums; }
table.matrix td:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
table.matrix td.z { color: var(--ink-3); opacity: .4; cursor: default; }

.prose { max-width: 78ch; font-family: var(--serif); font-size: 18px; line-height: 1.65; }
.prose h3 { margin-top: 26px; }
.prose li { margin: 4px 0; }
.prose .pa { font-size: .95em; }

/* ---------- keyboard ---------- */
.kbd {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow);
  padding: 12px; width: 100%; max-width: 640px; margin: 0 auto 18px; line-height: 1;
}
.empty:has(+ .kbd:not(.hidden)) { padding-bottom: 20px; }
.kbd .kcols { display: grid; grid-template-columns: 5fr 6fr; gap: 14px; }
.kbd .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 3px; }
.kbd .row.five { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.kbd .row.five button { font-size: 21px; padding: 6px 0; }
.kbd > .row { grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
@media (max-width: 520px) { .kbd .kcols { grid-template-columns: 1fr; gap: 4px; } }
.kbd button { border: 1px solid var(--rule); background: var(--paper); border-radius: 5px; font-family: var(--gurmukhi); font-size: 19px; padding: 5px 0; }
.kbd button:hover { border-color: var(--accent); }
.kbd .wide { font: 13px var(--sans); }
.kbd .lab { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 4px 0 2px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .workbench { grid-template-columns: 1fr; }
  .panel { position: static; max-height: none; }
  .twocol, .distgrid { grid-template-columns: 1fr; }
  .masthead { position: static; }
}
@media (max-width: 520px) {
  .masthead > .ik { font-size: 32px; }
  .tabs { justify-content: flex-start; }
  .hits li { padding-left: 36px; }
  .hits li::before { width: 24px; }
  .bars li { grid-template-columns: 7em 1fr 3em; }
  .reader header { flex-wrap: wrap; }
}
@media print {
  .masthead, .panel, .pager, .summary .act, .reader header .ractions { display: none !important; }
  .workbench { display: block; }
}

/* footnote */
.sitefoot { border-top: 1px solid var(--rule); margin: 32px 16px 0; padding: 16px 0 24px; text-align: center; font-family: var(--serif); font-size: 15px; color: var(--ink-2); }
.sitefoot a { color: var(--accent); }
@media print { .sitefoot { margin-top: 12px; } }