/* Council Record. Spacing comes only from the tokens below; colours are overridden per city in theme.css. */
:root {
  --s4: 4px; --s8: 8px; --s16: 16px; --s20: 20px; --s24: 24px; --s32: 32px; --s36: 36px;
  --radius: 12px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  /* banknote paper and green ink; light only (Boss: boomers love light mode) */
  color-scheme: light;
  --bg: #f3f0e3;
  --surface: #fbf9f1;
  --surface-2: #ece7d4;
  --line: #d6cfb4;
  --ink: #1b2a22;
  --ink-2: #44524a;
  --ink-3: #66705f;
  --accent: #245238;
  --accent-ink: #fbf9f1;
  --gold: #8a6a1f;
  --frame: #0e3b22;
  --rule: rgba(14, 59, 34, 0.42);
  --rule-gold: rgba(138, 106, 31, 0.5);
  --tint: rgba(36, 82, 56, 0.08);
  --tint-strong: rgba(36, 82, 56, 0.16);
  --mark: #f0d98a;
  --shadow: 0 1px 2px rgba(27, 42, 34, 0.07), 0 2px 8px rgba(27, 42, 34, 0.05);
  --shadow-lift: 0 4px 16px rgba(27, 42, 34, 0.13), 0 2px 4px rgba(27, 42, 34, 0.06);
  --series-1: #245238;
  --series-2: #a4442a;
  --grid: #e4dec8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* kit: .btn sets display, which beat the hidden attribute ("Show more" showed with nothing more) */
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.55 var(--font);
}
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.06rem; }
p { margin: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 0.94rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s24); }
@media (max-width: 600px) { .wrap { padding: 0 var(--s16); } }

/* Interactive base: every clickable thing lifts and tints on hover, settles on press. */
.hit {
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
  cursor: pointer;
}
@media (hover: hover) {
  .hit:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background-color: var(--tint); }
}
.hit:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow); background-color: var(--tint-strong); }
.hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hit, .hit:hover, .hit:active { transition: none; transform: none; }
}

/* Header */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); padding-top: var(--s20); padding-bottom: var(--s20); }
.brand h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
.brand p { color: var(--ink-2); font-size: 0.94rem; }
.btn {
  min-height: var(--tap); padding: 0 var(--s16); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.94rem; display: inline-flex; align-items: center; gap: var(--s16);
}
.btn[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (hover: hover) {
  .btn[aria-pressed="true"]:hover, .chip[aria-pressed="true"]:hover { background: var(--accent); filter: brightness(1.08); }
}

/* Meeting sheet */
dialog.sheet {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
}
dialog.sheet::backdrop { background: rgba(10, 14, 20, 0.45); }
.sheet-head { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s20) var(--s24); display: flex; justify-content: space-between; gap: var(--s16); align-items: flex-start; z-index: 2; }
.sheet-head h2 { font-size: 1.35rem; }
.sheet-body { padding: var(--s24); display: grid; gap: var(--s32); }
.docs { display: grid; gap: var(--s16); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.doc { padding: var(--s16) var(--s20); text-decoration: none; color: inherit; display: block; }
.doc b { display: block; color: var(--accent); }
.doc span { font-size: 0.88rem; color: var(--ink-2); }
.actions { display: grid; gap: var(--s16); margin: 0; padding: 0; list-style: none; }
.action { padding: var(--s16) var(--s20); border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.action blockquote { margin: 0; white-space: pre-wrap; font-size: 0.97rem; }
.action .cite { margin-top: var(--s16); font-size: 0.88rem; display: flex; gap: var(--s16); flex-wrap: wrap; align-items: center; }
.notice { padding: var(--s16) var(--s20); border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.notes { margin: 0; padding-left: var(--s20); color: var(--ink-2); font-size: 0.94rem; }
.items { margin: 0; padding-left: var(--s20); }
.items li + li { margin-top: var(--s16); }

footer { margin-top: var(--s36); padding: var(--s32) 0 var(--s36); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.94rem; }
footer .wrap { display: grid; gap: var(--s16); }

/* A motion */
.action .item { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: var(--s16); }
.action .summary { font-weight: 600; }
.action.failed { border-left-color: var(--series-2); }
.action.tabled, .action.unclear { border-left-color: var(--ink-3); }
.action .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--s20); margin: var(--s16) 0 0; font-size: 0.94rem; }
.action .facts dt { color: var(--ink-3); }
.action .facts dd { margin: 0; }
.action blockquote { margin: var(--s16) 0 0; padding-top: var(--s16); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.94rem; }
.unsure-note { margin-top: var(--s16); padding: var(--s16); border-radius: var(--radius); background: var(--tint-strong); font-size: 0.94rem; }

/* Month page */
.month-bar { display: flex; gap: var(--s16); flex-wrap: wrap; align-items: center; padding-top: var(--s24); }
.month-bar select { appearance: auto; min-width: 200px; }
.month-bar .btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.meeting-block { margin-top: var(--s32); display: grid; gap: var(--s16); }
@media print {
  .top, .month-bar, footer .small { display: none; }
  body { background: #fff; color: #000; }
  .action { break-inside: avoid; }
}

/* Meetings page: one search box pinned on top, a plain list, details only on a click */
.searchbar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s16) 0; box-shadow: var(--shadow); }
.searchbar input {
  width: 100%; min-width: 0; min-height: 60px; padding: 0 var(--s20); font: inherit; font-size: 1.2rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
@media (hover: hover) { .searchbar input:hover { border-color: var(--accent); } }
.searchbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint-strong); }

section { padding-top: var(--s32); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s16); flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

.next { padding: var(--s20) var(--s24); border-left: 6px solid var(--accent); }
.next h2 { font-size: 0.94rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: var(--s16); }
.next p { font-size: 1.15rem; }

.year + .year { margin-top: var(--s16); }
.year > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s16);
  min-height: 60px; padding: 0 var(--s20); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); font-size: 1.2rem; font-weight: 600;
}
.year > summary::-webkit-details-marker { display: none; }
.year > summary::after { content: "Show ▾"; font-size: 0.94rem; font-weight: 400; color: var(--accent); }
.year[open] > summary::after { content: "Hide ▴"; }
.year > summary .n { font-size: 0.94rem; font-weight: 400; color: var(--ink-2); margin-left: auto; }
.list { display: grid; gap: var(--s16); margin-top: var(--s16); }
.meeting {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s16);
  padding: var(--s20) var(--s24); text-align: left; width: 100%; font: inherit; color: inherit;
}
.meeting .what b { display: block; font-size: 1.1rem; }
.meeting .what span { color: var(--ink-2); }
.meeting .go { color: var(--accent); font-weight: 600; white-space: nowrap; }
.empty { padding: var(--s32); text-align: center; color: var(--ink-2); }

.results { display: grid; gap: var(--s16); }
.result { padding: var(--s20) var(--s24); }
.result .meta { color: var(--ink-2); }
.result .meta b { color: var(--ink); }
.result .snip { margin-top: var(--s16); }
.result mark { background: var(--mark); color: inherit; border-radius: 3px; }
.result .cite { margin-top: var(--s16); display: flex; flex-wrap: wrap; gap: var(--s16); }
.result .cite a.btn { text-decoration: none; color: var(--accent); }
.more { margin-top: var(--s20); width: 100%; justify-content: center; min-height: 52px; }
.simple .btn { font-size: 1rem; min-height: 52px; }

.fold > summary { cursor: pointer; color: var(--accent); min-height: 52px; display: flex; align-items: center; padding: 0 var(--s16); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.fold > .items, .fold > .notes { margin-top: var(--s16); }
.sheet-body h3 { margin-bottom: var(--s16); }
@media (max-width: 600px) {
  .meeting { padding: var(--s20); }
  .meeting .go { display: none; }
  .next, .result { padding: var(--s20); }
}
.ocr-note { color: var(--ink-3); font-size: 0.82rem; }

/* Header: the name only, no menu */
.top .wrap.brand { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s16); }

/* Recent council action: the newest votes and agenda items that match the search */
.recent { padding: var(--s20) var(--s24); margin-bottom: var(--s20); border-left: 6px solid var(--accent); }
.recent h3 { margin-bottom: var(--s16); }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); }
.recent li button { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s16) var(--s20); display: grid; }
.recent .when { font-size: 0.88rem; font-weight: 600; color: var(--accent); }
@media (max-width: 600px) { .recent { padding: var(--s20); } }

/* Apple pass (Boss's month of UI notes + DESIGN-NOTES tokens): glass bar, layered cards, and motion only when someone acts */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --d-fast: 150ms; --d: 200ms; --d-slow: 250ms; --radius: 16px;
  --glass: rgba(243, 240, 227, 0.82); --glow: 0 0 0 1px rgba(36, 82, 56, 0.30), 0 0 0 4px rgba(36, 82, 56, 0.10); }
body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums lining-nums; }
.hit { transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease), background-color var(--d) var(--ease), border-color var(--d) var(--ease); }
@media (hover: hover) { .hit:hover { box-shadow: var(--shadow-lift), var(--glow); } }
.hit:active { transition-duration: var(--d-fast); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .searchbar { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.card { border-color: transparent; box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* the chevron nudges toward where the click goes */
.meeting .go { display: inline-block; transition: transform var(--d) var(--ease); }
@media (hover: hover) { .meeting:hover .go { transform: translateX(3px); } }

/* results and the council box rise in when a search answers (the cause: they typed) */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.results > *, .recent { animation: rise var(--d-slow) var(--ease) both; }
.results > *:nth-child(2) { animation-delay: 30ms; } .results > *:nth-child(3) { animation-delay: 60ms; } .results > *:nth-child(n+4) { animation-delay: 90ms; }
.year[open] > .list { animation: rise var(--d-slow) var(--ease) both; }
.year > summary::after { transition: color var(--d) var(--ease); }

/* the meeting sheet: scales up on desktop, slides up from the bottom on phones like an app */
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
dialog.sheet[open] { animation: sheet-in var(--d-slow) var(--ease); border-radius: 22px; }
dialog.sheet[open]::backdrop { animation: fade var(--d-slow) var(--ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 600px) {
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.sheet[open] { animation: sheet-up var(--d-slow) var(--ease); border-radius: 22px 22px 0 0; }
  .sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 999px; background: var(--line); }
  .sheet-head { padding-top: var(--s24); }
}

@media (prefers-reduced-motion: reduce) {
  .results > *, .recent, .year[open] > .list, dialog.sheet[open], dialog.sheet[open]::backdrop { animation: none; }
  .meeting .go { transition: none; }
}

/* ---------- Banknote dress: engraved frame, serif titles, framed panels ---------- */
h1, h2, .year > summary span:first-child, .meeting .what b, .sheet-head h2 { font-family: var(--serif); }
h2 { font-weight: 600; letter-spacing: 0.005em; }

/* the header is a framed note: guilloche border, corner rosettes, the city's logo, title, and the church engraving */
.top.note { background: var(--bg); border-bottom: 0; padding: var(--s20) 0 var(--s16); }
.top.note .wrap { display: block; padding-top: 0; padding-bottom: 0; }
/* the frame is one 9-slice image: rosettes sit on the band's centre line and the lattice meets them with no break.
   Inside it, a green rule and then a gold one. */
.frame { position: relative; padding: var(--s24) var(--s32);
  border: 40px solid transparent; border-image: url(art/frame.svg) 40 round;
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--frame), inset 0 0 0 8px var(--bg), inset 0 0 0 9px var(--gold); }

.note .brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: var(--s32); }
.titles { display: grid; gap: var(--s16); }
.titles h1 { font-size: 2.6rem; font-weight: 600; line-height: 1.05; color: var(--ink); letter-spacing: -0.005em; }
.titles .kicker, .titles .serial { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.titles .serial { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; color: var(--series-2); font-weight: 500; }
.titles .sub { color: var(--ink-2); font-size: 1.05rem; }
.vignette img { display: block; width: 100%; height: auto;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); }

.note.compact .frame { padding: var(--s20) var(--s32); }
.note.compact .titles h1 { font-size: 1.9rem; }
.note.compact .brand { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }

@media (max-width: 900px) {
  .note .brand { grid-template-columns: minmax(0, 1fr); }
  .note .vignette { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 420px); }
}
@media (max-width: 600px) {
  .top.note { padding: var(--s16) 0; }
  .frame, .note.compact .frame { padding: var(--s20) var(--s16); border-width: 30px; }
  .note .brand { grid-template-columns: minmax(0, 1fr); gap: var(--s16); text-align: center; }
  .note.compact .brand { text-align: center; }
  .titles { gap: 0; }
  .titles h1 { font-size: 1.55rem; margin: var(--s4) 0; }
  .titles .kicker { font-size: 0.72rem; letter-spacing: 0.16em; }
  .titles .sub { font-size: 0.94rem; }
  .titles .serial { display: none; }
  .searchbar input { font-size: 1.05rem; }
  .meeting .go { display: none; }
}

/* panels are framed like a certificate: an outer rule and a hairline inside it */
.card { box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--rule-gold), var(--shadow); }
.next { position: relative; overflow: hidden; border-left: 0; padding: var(--s24) var(--s32); }
.next::after { content: ""; position: absolute; right: -40px; top: 50%; width: 200px; height: 200px; margin-top: -100px; background: var(--frame); opacity: 0.12;
  -webkit-mask: url(art/counter.svg) center / contain no-repeat; mask: url(art/counter.svg) center / contain no-repeat; pointer-events: none; }
.next h2 { font-family: var(--font); color: var(--gold); letter-spacing: 0.14em; }
.next p { font-family: var(--serif); font-size: 1.3rem; }
.next p b { color: var(--accent); }

/* section titles carry a short engraved rope under them */
.section-head h2 { position: relative; padding-bottom: var(--s16); }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: var(--s4); width: 96px; height: 4px;
  border-top: 2px solid var(--gold); border-bottom: 1px solid var(--gold); }
.section-head { margin-bottom: var(--s20); }

.year > summary { background: var(--surface-2); }
.year > summary span:first-child { font-size: 1.35rem; }

footer { border-top: 0; margin-top: var(--s36); padding-top: 0; }
footer .oak { margin: 0 auto var(--s32); padding: 0 var(--s16); max-width: 440px; text-align: center; }
footer .oak img { width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }
footer .oak figcaption { margin-top: var(--s8); font-family: var(--serif); font-style: italic; font-size: 0.94rem; color: var(--ink-2); }
footer .rope { height: 18px; margin-bottom: var(--s32); background: var(--gold); opacity: 0.7;
  -webkit-mask: url(art/rope.svg) repeat-x 0 0 / 72px 18px; mask: url(art/rope.svg) repeat-x 0 0 / 72px 18px; }

/* ---------- Layout: meetings on the left, recent council business down the right ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "next side" "past side"; column-gap: var(--s36); align-items: start; }
#next-section { grid-area: next; }
#past-section { grid-area: past; }
#business { grid-area: side; position: sticky; top: 76px; padding-top: var(--s32); }
#results-section { grid-area: next / next / past / past; }
.searching .browse:not(#business) { display: none; }
.side { max-height: calc(100vh - 140px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: var(--s8) var(--s8) var(--s16); margin: calc(-1 * var(--s8)) calc(-1 * var(--s8)) 0; }
.side-note { color: var(--ink-2); font-size: 0.94rem; margin: calc(-1 * var(--s16)) 0 var(--s16); }
.business { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); }
.business > li.entry {
  border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--rule-gold), var(--shadow);
  transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
/* the whole card lifts on hover, not the meeting button inside it, so no shadow lands on the "Show more" button */
.business .open.hit:hover, .business .open.hit:active { transform: none; box-shadow: none; background-color: transparent; }
@media (hover: hover) {
  .business > li.entry:has(> .open:hover) {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--rule-gold), var(--shadow-lift), var(--glow);
  }
}
@media (prefers-reduced-motion: reduce) { .business > li.entry { transition: none; } .business > li.entry:has(> .open:hover) { transform: none; } }
.business .open {
  width: 100%; text-align: left; font: inherit; color: inherit; display: grid; gap: var(--s4);
  padding: var(--s16) var(--s20); border: 0; border-radius: var(--radius); background: transparent;
}
.business .expand {
  margin: calc(-1 * var(--s8)) var(--s20) var(--s16); padding: var(--s4) var(--s16); min-height: 36px;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px;
}
.business li.extra { animation: rise var(--d-slow) var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .business li.extra { animation: none; } }
.business .when { font-size: 0.94rem; color: var(--ink-2); }
.business .when b { font-family: var(--serif); font-size: 1.06rem; color: var(--ink); }
.business .tag { justify-self: start; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.business ul { margin: var(--s4) 0 0; padding-left: var(--s20); display: grid; gap: var(--s4); font-size: 0.97rem; }
.side-foot { margin-top: var(--s20); font-weight: 600; }
.side-foot a { text-decoration: none; }
@media (hover: hover) { .side-foot a:hover { text-decoration: underline; } }

@media (max-width: 1000px) {
  .layout { display: flex; flex-direction: column; }
  #business { position: static; }
  .side { max-height: none; overflow: visible; padding: 0; margin: 0; }
  .searching #business { display: none; }
  #results-section { order: 0; }
  #next-section { order: 1; }
  #business { order: 2; }
  #past-section { order: 3; }
}

/* the city's own logo stands where the seal was */
.note .city-logo { display: block; width: 200px; height: auto; margin-bottom: var(--s8); }
.note.compact .city-logo { width: 160px; }
.titles .demo-note { font-size: 0.82rem; color: var(--ink-3); font-style: italic; }
@media (max-width: 600px) {
  .note .city-logo { justify-self: center; width: 180px; margin: 0 auto var(--s8); }
  .note.compact .city-logo { width: 120px; }
}

/* richer green rules on everything framed */
.year > summary { border-color: var(--rule); }
.searchbar { border-bottom: 2px solid var(--frame); }
.searchbar input { border-color: var(--rule); }
.fold > summary, .btn { border-color: var(--rule); }
dialog.sheet { border-color: var(--frame); }
.sheet-head { border-bottom: 2px solid var(--frame); }

/* document viewer: the city's PDF beside the results on wide screens, full screen on phones and tablets */
.btn.primary { background: var(--frame); border-color: var(--frame); color: var(--surface); font-weight: 600; }
.viewer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(760px, 55vw);
  display: flex; flex-direction: column; background: var(--surface);
  border-left: 2px solid var(--frame); box-shadow: -12px 0 32px var(--viewer-shadow, rgba(14, 59, 34, 0.18));
  animation: viewer-in var(--d-slow) var(--ease);
}
.viewer[hidden] { display: none; }
@keyframes viewer-in { from { transform: translateX(var(--s32)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .viewer { animation: none; } }
.viewer-head {
  display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  padding: calc(var(--s16) + env(safe-area-inset-top, 0px)) var(--s20) var(--s16);
  border-bottom: 2px solid var(--frame); background: var(--surface);
}
.viewer-titles { flex: 1 1 240px; min-width: 0; }
.viewer-titles h2 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.viewer-sub { margin: var(--s4) 0 0; font-size: 0.88rem; color: var(--ink-3); }
#viewer-page { font-weight: 600; color: var(--accent); }
.viewer-body { position: relative; flex: 1; background: var(--surface-2); }
.viewer-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* pdf.js sizes pages as content-box; the site-wide border-box rule would squeeze the canvas under the text layer */
#viewer .pdfViewer, #viewer .pdfViewer * { box-sizing: content-box; }
#viewer .textLayer .highlight { --highlight-bg-color: rgb(240 217 138 / 0.7); --highlight-selected-bg-color: rgb(212 160 23 / 0.6); }
@media (max-width: 1000px) {
  .viewer { width: 100%; border-left: 0; box-shadow: none; }
  body.viewing { overflow: hidden; }
}

/* wide screens: the empty margins get a faint banknote ground that fades out before the content column */
@media (min-width: 1240px) {
  body::before, body::after {
    content: ""; position: fixed; top: 0; bottom: 0; width: calc((100vw - 1120px) / 2); z-index: 0; pointer-events: none;
    background: url(art/side.svg) 0 0 / 96px 96px; opacity: 0.22;
  }
  body::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
  body::after { right: 0; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
}

/* ---------- Council votes: a sub page of the archive ---------- */
.sub-page .brand { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); }
.sub-page .titles h1 { font-size: 2.1rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); font-size: 0.94rem; color: var(--ink-3); }
.crumbs a { display: inline-flex; align-items: center; gap: var(--s8); padding: var(--s4) var(--s8); margin-left: calc(-1 * var(--s8));
  border-radius: var(--radius); color: var(--accent); font-weight: 600; text-decoration: none; }
.crumbs img { width: 72px; height: auto; }
.crumbs [aria-current] { color: var(--gold); font-weight: 600; letter-spacing: 0.04em; }
.vignette.tower img { -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }

.month-band { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 2px solid var(--frame); box-shadow: var(--shadow); }
.month-band .month-bar { padding-top: var(--s16); padding-bottom: var(--s16); }
.month-bar .print { margin-left: auto; }

.votes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s36); align-items: start; padding-top: var(--s32); }
.votes-side { position: sticky; top: 92px; }
.votes-side .side { max-height: calc(100vh - 120px); }
.tally { display: flex; flex-wrap: wrap; gap: var(--s8); margin: 0 0 var(--s8); padding: 0; list-style: none; }
.tally .chip { padding: var(--s4) var(--s16); border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); font-size: 0.94rem; color: var(--ink-2); }
.tally .chip b { color: var(--ink); }
.tally .chip.passed { box-shadow: 0 0 0 1px var(--accent); background: var(--tint); }
.tally .chip.passed b { color: var(--accent); }
.tally .chip.failed { box-shadow: 0 0 0 1px var(--series-2); }
.tally .chip.failed b { color: var(--series-2); }

.votes-page .meeting-block { margin-top: var(--s36); gap: var(--s20); }
.meeting-head { display: grid; gap: var(--s4); padding-bottom: var(--s16); border-bottom: 1px solid var(--rule-gold); }
.meeting-head h3 { font-family: var(--serif); font-size: 1.3rem; }
.votes-page .action { background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 0 0 1px var(--rule), var(--shadow); transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease); }
@media (hover: hover) {
  .votes-page .action:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--rule), var(--shadow-lift), var(--glow); }
}
@media (prefers-reduced-motion: reduce) { .votes-page .action { transition: none; } .votes-page .action:hover { transform: none; } }
.votes-page .action .cite .btn { padding: var(--s4) var(--s16); font-size: 0.88rem; }

.index-year + .index-year { margin-top: var(--s20); }
.index-year h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); margin-bottom: var(--s8); }
.index-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); }
.index-months .month { display: grid; justify-items: center; gap: 0; padding: var(--s8) 0; font: inherit; font-size: 0.88rem; color: var(--ink-2);
  background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.index-months .month b { font-size: 1rem; color: var(--ink); }
.index-months .month.unposted { background: transparent; box-shadow: 0 0 0 1px var(--line); color: var(--ink-3); }
.index-months .month.unposted b { color: var(--ink-3); font-weight: 400; }
#month-index { margin-top: var(--s8); }
.index-months .month.on { background: var(--frame); color: var(--surface); box-shadow: 0 0 0 1px var(--frame), inset 0 0 0 3px var(--frame), inset 0 0 0 4px var(--gold); }
.index-months .month.on b { color: var(--surface); }

@media (max-width: 1000px) {
  .votes-layout { display: flex; flex-direction: column; }
  .votes-side { position: static; width: 100%; margin-top: var(--s36); }
  .votes-side .side { max-height: none; }
  .index-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sub-page .brand { grid-template-columns: minmax(0, 1fr); }
  .sub-page .vignette.tower { width: min(100%, 150px); }
}
@media (max-width: 600px) {
  .month-band .month-bar { padding-top: var(--s8); padding-bottom: var(--s8); gap: var(--s8); }
  .month-bar .print { display: none; }
  .month-bar select { min-width: 0; flex: 1; }
  .sub-page .titles h1 { font-size: 1.7rem; }
  .crumbs { justify-content: center; gap: var(--s4); font-size: 0.88rem; }
  .crumbs img { display: none; }
  .index-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media print {
  .month-band, .votes-side, .viewer, footer .oak { display: none; }
  .votes-layout { display: block; }
  .votes-page .action { box-shadow: none; border: 1px solid #999; }
}

/* engraved plate at the foot of a side column; on the home page it is the link to the votes page */
.plate { display: block; margin: var(--s24) 0 0; text-align: center; color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.plate img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 72%, transparent 100%); }
.plate figcaption { margin-top: var(--s8); font-family: var(--serif); font-style: italic; font-size: 0.94rem; }
a.plate span { display: block; margin-top: var(--s8); font-size: 0.94rem; font-weight: 600; color: var(--accent); }
a.plate { transition: transform 0.18s ease, box-shadow 0.18s ease; }
@media (hover: hover) { a.plate:hover { transform: translateY(-2px); box-shadow: var(--glow, 0 6px 20px rgba(18, 58, 36, 0.14)); } a.plate:hover span { text-decoration: underline; } }
a.plate:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { a.plate { transition: none; } a.plate:hover { transform: none; } }
@media print { .plate { display: none; } }

/* ---------- Kit: a city with no logo or landmark engraving yet gets its engraved seal (assets/art/seal.svg) ---------- */
.vignette.seal { justify-self: center; width: min(100%, 300px); }
.vignette.seal img { -webkit-mask: none; mask: none; }
.sub-page .vignette.tower.seal { width: min(100%, 180px); }
.crumbs img[src$="seal.svg"] { width: 40px; }
.plate.bare { padding: var(--s16) var(--s20); box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--rule-gold); border-radius: var(--radius); }
a.plate.bare span { margin-top: 0; }
#business-list > li.empty { list-style: none; padding: var(--s20); color: var(--ink-2); }
@media (max-width: 900px) { .note .vignette.seal { width: min(100%, 220px); } }
@media (max-width: 600px) { .note .vignette.seal { width: 160px; } }