/* =========================================================================== CIVIC — "the ledger" --------------------------------------------------------------------------- BANDS ON THE PAGE. A SECTION IS OPENED BY A RULE AND PRINTED ON A STOCK. ══════════════════════════════════════════════════════════════ ← folio 01 Certified through Jul 21 · 6 DECISIONS On the record standing intro, full width … ────────────────────────────────────────────────────────────── ● AGENDA POSTED AUG 18, 2026 Tuesday · 4:00 PM ← the strip City Council ← the heading every word of the entry, full width, one left edge … WHAT CHANGED AND WHY, IN THREE PASSES. 1. SECTIONS BECAME FINDABLE. The page used to be one unbroken column from the masthead to the last footnote, every section announced by a 12px uppercase label sitting in a 156px rail — which is also where each row's date and vote tally sat, at the same size and weight. So "ON THE RECORD", the mark that a whole new section of the document had begun, was rendered exactly like "JUL 21, 2026". Everything was legible; nothing was findable. Each section now opens on a real head: a numeral taken from the page's own contents index, the section's size, and its name set as a display headline across the full measure. 2. THE RAIL WENT. It was a 156px channel of empty page running the height of the document — a date is 90px tall, the row beside it runs to hundreds — and it capped every line of text at 640px inside a 1,056px measure, so each entry had a wide margin of nothing on both sides of its words. Jessie: "I do not like that there is a side gutter under the dates. I want the text to fill the whole width and the titles and dates to go above sections." So the rail is a horizontal strip above the entry it labels — chip, date, weekday, seats, tally, all on one line — and the heading and the text under it measure the page. 3. THE PANELS WENT — this pass. Jessie: "make it look more like the rest of the website." Pass 1 made each section a bounded card: white, 20px corners, two drop shadows, floating on a warm #f1ede7 ground. That solved findability and it solved it in a vocabulary this site does not own. The home page and the issue library say so in as many words — "Rules, not shadows … nothing on the page floats on a drop shadow", "a card that rises off the page on a drop shadow is the single most recognisable gesture in generated web design" — and then /civic/ was eleven of them in a column. It was the one page a reader arriving from the newsletter would not have recognised as the same publication. So the sectioning survives and the *printing* changes. What separated two panels was a gap and two borders; what separates two sections now is the same thing that separates them everywhere else on this site: a heavy ink rule opening the second one (.emv-c-sechead is a folio now — see §2), the band's own air, and the stock underneath. The page runs navy → paper → white → navy → white, which is the front page's own rhythm, and city hall is marked out by what it is printed on rather than by a box drawn round it. NOTHING WAS DROPPED FROM ANY SECTION HEAD: the numeral, the provenance note and the count all still print, on the folio line. The one object that keeps its edges is the posted agenda in the sidebar, and it keeps them because it earns them — a scroll box has to have a bottom, and unbounded it would run its list out over the record beside it. It is set as .emv-coupon is set on the front page: a warm sheet with an ink hairline round it and a heavy rule across the top, square, no shadow. Same object, second use. WHAT THAT COSTS, STATED PLAINLY: running text now sets at ~1,056px, which is a long line. Type is a step larger with more leading to pay for it. If it ever needs capping again, that is one max-width on .emv-c-col and nothing else — the rule that survived all three passes is that width is a property of the layout, never of the individual element. Tokens and atoms are the home page's, re-declared in this scope. .emv-btn, .emv-link, .emv-eyebrow, .emv-chip, .emv-head and .emv-deck are global in style.css and only their tokens are scoped, so redeclaring the tokens here buys the whole shared component set. Civic gets its own *layout* inside the site's design system rather than a second design system. =========================================================================== */ .emv-civic { /* -- Brand tokens — identical to .emv-broadsheet ---------------------------- */ --nv-900: #071825; --nv-800: #0d2337; --nv-700: #16344e; --nv-600: #24486a; --nv-500: #37618c; --gold-500: #eda23c; --gold-400: #f2b764; --ink: #111827; /* Same two accessibility-adjusted tokens the home page derives, for the same reason: this page sets accent and secondary text on paper as well as white, where the unadjusted values drop below WCAG AA. */ --gold-800: #a0601f; --slate: #64707d; --mist-200: #e5e7eb; --mist-100: #eef0f3; --mist-50: #f7f8fa; /* NEWSPRINT, LIGHTENED. #fbf4ec was set for one big block of display type on the lead. The posted agenda is the same stock carrying nineteen rows of 15px text, a tan hairline under every one of them and a 2px rule under every group heading — same colour, four times the ink per square inch, and it read heavy against the white panels beside it. Jessie: "its pretty dark." So the stock is two steps lighter and the hairlines are split in two. A panel's BORDER still has to hold its edge against the ground and keeps --paper-line; the rules INSIDE it only have to separate two rows of text from each other, and at nineteen repetitions that job wants the lightest line that still does it. Splitting them is what lets the panel keep a visible edge while its interior gets quieter. */ --paper: #fdf9f3; --paper-line: #e8d5bb; --paper-rule: #f0e4d4; --dim: #a9bdd0; --display: 'Mona Sans', system-ui, -apple-system, sans-serif; --ui: 'Mona Sans', system-ui, -apple-system, sans-serif; /* -- Verdict ---------------------------------------------------------- */ --yea: #1b7f5a; --nay: #a4231c; --abstain: #8a6d3b; /* -- The measure ------------------------------------------------------ THE SAME NUMBERS THE HOME PAGE USES, and that is the point of restating them rather than deriving something close: 1120px of shell with a 32px gutter puts content at 1056px on a left edge of 192px at 1440. The panel model got to the identical figures by a different route — a 1136px shell with 40px of panel inset — so the type on this page has not moved a pixel. What moved is that there is no longer a border 8px outside it. There is no column token. Everything measures the page: one left edge, one right edge, no reading column and no rail. See the note on .emv-c-row for what that replaced and what it costs. */ --shell: 1120px; --gutter: 32px; /* -- Rules, not shadows ----------------------------------------------- Lifted verbatim from .emv-broadsheet, because a rule that means "a new department opens here" has to be the same weight and the same ink on every page of the paper. Two weights: the heavy one opens a section, the hairline separates entries inside it, and --rule-warm is the hairline's value on newsprint. --rule is re-pointed per band, so a component can ask for "the hairline" without knowing what it is standing on. */ --rule-heavy: var(--ink); --rule: #dde2e8; --rule-warm: #e8d9c4; /* -- The certainty ladder --------------------------------------------- THREE MARKS, NOT THREE COLOURS. This page carries the council record in three states — a plan nobody has voted on, an unofficial account of a meeting, and the certified record — and printed all three identically: the same 2px ink folio, the same gold numeral, the same standfirst. The page's whole argument is that these are different kinds of fact, and its typography said they were the same kind. So a tiered section's folio rule is drawn in the mark that means it, and the mark is a property of the rule rather than a hue laid over it: open single GOLD — the site's act-now accent, the same gold that marks every other thing a reader can do draft DASHED — a line not yet inked in final DOUBLE — heavy over light, which is what a ledger rules under a settled figure; this section IS one Two consequences worth stating. A reader with no colour vision gets the full ladder from the pattern alone, and a monochrome print gets it too — see the print block, which keeps all three and only changes the ink. And the sections that are NOT on the ladder (the week's lead, the roster, the how-to) keep the plain 2px ink rule, because three departures only read as departures if something stays put. AND THE OPEN TIER TAKES --gold-800, NOT --gold-500. A tier rule is a meaningful graphic rather than decoration, so it owes 3:1 against the stock behind it, and #eda23c manages 2.1 on white — the same reason this file already derives gold-800 for accent text. The two tokens are the same gold; one of them is the one that survives being the only mark. */ --tier-open: var(--gold-800); --tier-draft: var(--slate); --tier-final: var(--ink); /* -- Sticky geometry -------------------------------------------------- Two things pin to the top of this page: the site header (76px, but it grows a second scrolling row of nav links under 780px and stands at 138px there) and the section index below it. Neither height is a constant, so assets/js/civic.js measures both and writes them here; these are the no-JS fallbacks, and they are the desktop figures because the mobile index is not sticky at all. Everything that has to clear them — the anchor landing offset and the travelling rail — derives from this one value rather than repeating the arithmetic. */ --emv-headh: 116px; --emv-indexh: 47px; --sticky-top: calc(var(--emv-headh) + var(--emv-indexh)); /* -- Vertical rhythm — the home page's band scale --------------------- 74px is .emv-band's own figure, not an approximation of it. Under the panel model this was 72px of padding *inside* each card plus 14px of ground either side of it, so two sections were 172px apart; ruled bands put them 148px apart. The document gets shorter and the sections read as further apart, because what is between them is now air rather than two borders and a gap. */ --band: 74px; --row: 36px; font-family: var(--ui); color: var(--ink); background: #fff; } .emv-civic *, .emv-civic *::before, .emv-civic *::after { box-sizing: border-box; } /* THE GROUND IS GONE. It used to be #f1ede7 painted over .emv-site with an !important, because the subscribe band that renders after .emv-civic closes carries no background of its own and would otherwise have drawn a hard white seam at the colophon. With the page back on white there is nothing to match — the band, the document and the site's own stock are one colour, which is the arrangement every other page on the site is already in. */ /* One shell, and it is .emv-shell's geometry to the pixel — see the note on --shell. Every band, rule and block on this page begins and ends here, on the same left edge as the site header's logo and the home page's headlines. */ .emv-c-shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* --------------------------------------------------------------------------- THE BAND. A section is a full-bleed band with its content on the shell — .emv-band, under this page's name. What it is NOT any more is a bounded card: no border, no radius, no shadow, no ground behind it. Sections are told apart by the folio rule that opens each one (.emv-c-sechead), by the band's own air, and by the stock they are printed on. The vertical padding is the band's whole geometry now; the horizontal padding belongs to the shell inside it, so a band's background can run to the edges of the viewport while its type stays on the measure. --------------------------------------------------------------------------- */ .emv-c-band { padding: var(--band) 0; } /* --------------------------------------------------------------------------- ONE COLUMN. Every row is a stacked block: its metadata strip on top, then its heading, then its text, all on one left edge and all running the full width of the panel. WHAT THIS REPLACED, AND WHY. Rows used to be a two-column grid — a 156px rail carrying the chip, the date and the vote tally, and a 640px column carrying the words. It kept a strict measure, and it cost a 156px channel of empty panel down the whole document plus a 250px+ margin past the end of every line, because a date is 90px tall and the row beside it runs to hundreds. Jessie, twice: "so much wasted space on this page where information can't be displayed", then "I do not like that there is a side gutter under the dates. I want the text to fill the whole width and the titles and dates to go above sections." So the rail is a strip, above the thing it labels, at every width — which is what it already became below 760px, promoted here to the only behaviour. Nothing is lost from it: the chip, the date, the weekday, the seats and the tally all still print, now on one line reading left to right instead of stacked in a column nobody's eye went to. The trade is line length: running text now measures the panel, ~1,056px at full width, which is long. Type is set a step larger with more leading to pay for it — see .emv-c-body. If it ever needs a cap again, that is one max-width on .emv-c-col here, and nowhere else. --------------------------------------------------------------------------- */ .emv-c-row { display: block; } .emv-c-rail, .emv-c-col { min-width: 0; } /* THE STRIP. Everything the rail used to stack, on one baseline above the entry. `align-items: baseline` rather than center so a 20px vote graphic cannot drag a 13px date off the line it shares. */ .emv-c-rail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; } /* The seats are the one item in the strip that is a graphic rather than text, so it is centred against the line instead of sitting on it. */ .emv-c-rail .emv-c-seats { align-self: center; } /* The document's two ends. The bands carry their own air between them, so this only has to clear the contents strip above and the subscribe band below. */ .emv-civic-main { padding: 0 0 8px; } /* NEWSPRINT, FULL BLEED — .emv-band--paper, exactly as the home page sets city hall. Sections the reader is meant to stop at are printed on a warm stock: the week's lead story, and the agenda for the meeting they can still turn up to. Everything else is a record they consult, and stays white. The hairlines are the band's own top and bottom edges rather than a border round a box, which is what makes a change of stock read as a change of department instead of as an object dropped on the page. At --paper's current value the stock alone is a faint call against white — these two lines are what actually declare the band, and they are why the stock is allowed to stay as light as Jessie asked for it. */ .emv-c-band--paper { background: var(--paper); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); /* The interior rule, not the border — see the note on --paper-rule. */ --rule: var(--paper-rule); } /* Two newsprint sections running together — the featured note and the posted agenda, in the stacked layout below 1081px. Their touching hairlines would draw a 2px seam inside what is one continuous piece of stock; the folio rule opening the second section is the mark that separates them, and it is the same mark that separates two white sections. */ .emv-c-band--paper + .emv-c-band--paper { border-top: 0; } /* The first section starts flush against the contents strip, which already draws its own bottom hairline. A band border there would be the second of two lines 0px apart. */ .emv-civic-main > .emv-c-band:first-child { border-top: 0; } /* A shorter band for the sections that are a list or a footnote rather than a body of reading — .emv-band--tight's job, and its figure. */ .emv-c-band--tight { padding-top: 56px; padding-bottom: 56px; } /* The colophon is the only band that is not a section of the record — it is the page's own small print, so it takes no folio and closes the document on a hairline instead of opening on one. */ .emv-c-band--colophon { padding-top: 0; padding-bottom: 64px; } .emv-c-band--colophon > .emv-c-shell { padding-top: 34px; border-top: 1px solid var(--rule); } /* Screen-reader-only. Gives the vote graphic a spoken form. */ .emv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* One focus treatment, matching the home page's, never removed. */ .emv-civic :focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; } /* Every anchor target on the page lands clear of the two sticky strips above it. Without this the index scrolls a heading to y=0, which is underneath the site header — the reader jumps to a section and arrives one paragraph into it, which reads as a broken link rather than a short one. */ .emv-civic [id] { scroll-margin-top: calc(var(--sticky-top) + 20px); } /* =========================================================================== 1c. THE LEVELS — one page, three widths ┌──────────────────────────────────────────────────────────┐ ← LEVEL 1 │ 01 What matters now │ full width │ the read, half │ the calculator, half │ two columns └──────────────────────────────────────────────────────────┘ ┌──────────────────────────────────────────────────────────┐ │ 02 Also worth knowing │ │ two across └──────────────────────────────────────────────────────────┘ ┌───────────────────────────────────┐ ┌────────────────────┐ ← LEVEL 2 │ 04 Just happened │ │ 03 Posted agenda │ the split ├───────────────────────────────────┤ │ ▲ pinned, scrolls │ │ 05 On the record │ │ │ inside itself │ │ │ │ ▼ │ └───────────────────────────────────┘ └────────────────────┘ ┌──────────────────────────────────────────────────────────┐ ← LEVEL 3 │ Want the whole record? · Your council · colophon │ full width └──────────────────────────────────────────────────────────┘ WHAT THIS REPLACED. The page was one run of full-width panels from the masthead to the footnote, in one column, at one width. Everything was a section and every section looked exactly as important as every other one — and the posted agenda, which is a scanning list rather than a read, took 4,182px of a 12,372px document doing it. Jessie: "the agenda should show as a side bar, or at least as an aside. there needs to be different levels and columns on this page." THE RULE FROM THE LAST TWO PASSES STILL HOLDS AND IS WHAT THIS IS BUILT ON: width is a property of the layout, never of the element. Nothing below sets a max-width on a heading, a paragraph or a card. Three containers set three widths, and everything inside each one measures its container exactly as it always has. ONE BREAKPOINT, 1081px, for all of it — the lead's two columns, the feed's two across and the split. Below it the page is the single column it was, in source order, which is also the order the contents strip lists. =========================================================================== */ .emv-c-split { /* The sidebar's width. Item titles are shortened now, but "Approving the 5th Amendment to the Amended and Restated Overland Development Agreement" is still 86 characters, and at the old 348px of text that set as four lines with two words on the last. Widened until the common case is two. IT IS BOUGHT OUT OF THE RECORD COLUMN, NOT OUT OF THE PAGE. The split is the measure of the sections above and below it and must stay that way, or the page grows a second spine — so every pixel the sidebar gains, the record loses. That is affordable in one direction only: the record column stays inside a readable measure for 17px prose, while the sidebar goes from a cramped column to a readable one. Past about 450px it stops being affordable. */ --aside: 372px; /* THE GUTTER GREW WITH THE PANELS COMING OFF, and it had to. It was 24px between two bordered cards, where each card's own edge was doing the separating and the gap only had to keep the two edges apart. The record column has no edge now — it is bare type — so the gutter is the only thing between the last word of a line and the sidebar's border, and 24px of that reads as the sidebar crowding the text. 36px rather than the front page's 48: .emv-cityhall pays 48 because it hangs a column RULE in the middle of its gutter and needs clear air on both sides of it. The sidebar's own border is that rule here, so the gutter only has to be read as a gutter. MEASURED, both columns of running text, across the range: 1100px record 628, sidebar 372 (aside is 372 below 1200) 1440px record 584, sidebar 436 — and flat from 1200 up, where the container stops growing. Under the panels these were 560 and 594; the record gains 68px at the narrow end of the split and gives 10px back at the wide end, which is the trade for a gutter wide enough to read as one. */ --split-gap: 36px; } @media (min-width: 1081px) { /* The split carries the page geometry the bands inside it give up: the shell's width, centred, with the page gutter beside it. So the left column's left edge and the sidebar's right edge land exactly on the measure of the full-width sections above and below — the level changes, the spine does not move. */ .emv-c-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); column-gap: var(--split-gap); max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* The aside is FIRST in the DOM so that the stacked layout below this breakpoint reads feed → agenda → record. Here it is placed explicitly in the second column of the first row, and the record column in the first, which is the whole of the reordering. */ .emv-c-split > .emv-c-aside { grid-column: 2; grid-row: 1; } .emv-c-split__main { grid-column: 1; grid-row: 1; min-width: 0; } /* Both columns hand their horizontal geometry to the grid. The vertical padding stays: it is still the air between two stacked sections. */ .emv-c-split .emv-c-band > .emv-c-shell { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* The aside stops being a band here and becomes a column. Its newsprint and its edges move inside, onto the sheet — a full-bleed stock painted up a column that stretches to the height of the record beside it would be a tall block of paper with a second piece of paper stuck to the top of it. */ .emv-c-split > .emv-c-aside { background: none; border: 0; } /* --------------------------------------------------------------------- THE SIDEBAR ITSELF. The aside is a grid item and stretches to the height of the record beside it — deliberately, because that stretched box is what the panel inside it sticks against. The panel pins under the two sticky strips and is capped at the height of what is left of the screen; the agenda scrolls inside that cap. The cap is the point. Without it a 28-item agenda is 4,000px tall, the grid row grows to fit it, and the "sidebar" is a second full-length column — which is the layout this replaced, rotated. With it the agenda is bounded by the viewport at every length, so a recess week with three posted agendas costs the page nothing. `100dvh`, not `100vh`: on a phone-sized landscape window the browser chrome moves and `vh` measures the tallest state, which would push the foot of the sidebar under the bottom of the screen. THE SHEET IS .emv-coupon, SECOND USE. This is the one object on /civic/ that keeps real edges after the panels came off, and it keeps them because it earns them: a scroll box has to have a bottom, and a list bounded by nothing would run out over the record beside it. So rather than invent a container for it, it is set the way the front page sets its subscription coupon — warm stock, one ink hairline round it, a heavy ink rule across the top, square corners, no shadow. A reader who has seen the front page has seen this object before. --------------------------------------------------------------------- */ .emv-c-split > .emv-c-aside > .emv-c-shell { position: sticky; top: calc(var(--sticky-top) + 14px); max-height: calc(100dvh - var(--sticky-top) - 34px); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--nv-900); border-top: 3px solid var(--nv-900); padding: 24px 24px 0; } /* THE SHEET'S EDGE IS THE TIER RULE HERE — see the note in the markup. The head inside gives up its folio so that this is the only heavy line on the sheet, so this is the line that has to carry the mark. Gold, single, the same rule the section takes at every other width. */ .emv-c-split > .emv-c-aside[data-tier="open"] > .emv-c-shell { border-top-color: var(--tier-open); } /* The pinned part of the sidebar is the section's name and its size, and nothing else — everything a reader has already read scrolls away with the list. It needs a rule under it, because without one a line of agenda text passing under the headline reads as the headline running out of room rather than as a list scrolling behind a fixed head. And it gives up its OWN rule, the folio's, in exchange: the sheet's 3px top edge is 24px above it and doing that job already. Two heavy rules that close on each other are a ladder, which is the thing the coupon's head was restructured on the front page to avoid. */ .emv-c-split > .emv-c-aside > .emv-c-shell > .emv-c-sechead { flex: none; margin-bottom: 0; padding-top: 0; padding-bottom: 15px; border-top: 0; border-bottom: 1px solid var(--rule); } .emv-c-split .emv-c-aside__scroll { flex: 1 1 auto; /* A flex child's default min-height is its content, which would defeat the cap and let the panel grow past the screen. */ min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--paper-line) transparent; /* Pulled out to the panel's edges so the scrollbar and the fade below run the full width of the box rather than sitting in an inset channel, then given the inset back as its own padding. */ margin: 0 -24px; padding: 0 24px 26px; } /* The scroll box is a focus stop in its own right, and it runs to the panel's inner edge — so the shared ring's 3px outset would be drawn on top of the panel's own border and read as the panel lighting up rather than the list. Inset, it outlines the thing that actually took focus. */ .emv-c-split .emv-c-aside__scroll:focus-visible { outline-offset: -3px; } /* --------------------------------------------------------------------- THE PANEL'S FLOOR — the lead meeting's route to the city's own copy. `flex: none` beside the scroll box's `flex: 1 1 auto`, so the list keeps every pixel the button does not need and the button never scrolls away. It is the section's exit, and an exit that has to be scrolled back to is an exit a reader loses. The negative inline margin pulls it to the panel's edges the same way the scroll box is pulled, so the ink hairline above it runs the full width of the sheet rather than sitting in an inset channel — and it sits ON the 3px-bordered coupon's floor, which is why it needs its own rule above it rather than borrowing the panel's border. --------------------------------------------------------------------- */ .emv-c-split .emv-agenda__foot { flex: none; margin: 0 -24px; padding: 14px 24px 18px; border-top: 1px solid var(--rule); background: var(--paper); } .emv-c-split .emv-agenda__foot .emv-btn { width: 100%; justify-content: center; } /* The mark that says there is more below. A hairline at the foot of a scroll box reads as the end of the list; a fade reads as the list continuing, which is the true statement. It is the paper token, so it only ever exists over the sidebar's own ground. */ .emv-c-split > .emv-c-aside > .emv-c-shell::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 46px; /* The transparent stop has to be the paper token's own colour or the fade runs through grey on its way to nothing. It is a literal because a custom property cannot be given an alpha channel here. */ background: linear-gradient(rgba(253, 249, 243, 0) 0%, var(--paper) 82%); pointer-events: none; } /* --------------------------------------------------------------------- DENSITY, WOUND BACK. The first pass stepped every size in here down a notch, on the theory that a narrow column wants small type. That was the wrong theory: the column was narrow because the type was small enough to survive it, and the result was nineteen rows of 14.5px text with 10px of air between them — legible, and tiring. Type is back at the size it takes in the run, with more leading and more room per row, and the column was widened to carry it rather than the other way round. The one thing still stepped down is the meeting's own name (.emv-c-lede), which is a heading inside a sidebar rather than a heading on the page. --------------------------------------------------------------------- */ .emv-c-split > .emv-c-aside .emv-c-lede { font-size: 1.25rem; } .emv-c-split > .emv-c-aside .emv-c-intro { font-size: 15px; line-height: 1.72; } .emv-c-split > .emv-c-aside .emv-agenda__standfirst { margin-top: 18px; } .emv-c-split > .emv-c-aside .emv-agenda__item { font-size: 15.5px; line-height: 1.65; padding: 14px 0; } .emv-c-split > .emv-c-aside .emv-c-actions .emv-btn { width: 100%; justify-content: center; } /* THE CLERK'S SECTION HEADING TRAVELS. A twenty-item agenda is 4,000px of list inside a 530px box, and the one thing that tells a reader what they are looking at — CONSENT, where an item is expected to pass without discussion, against ORDINANCES/PUBLIC HEARINGS, where they can speak — was scrolled off the top of the box four items ago. Pinned to the top of the scroll port it answers that question continuously, for one heading's worth of height. The padding is bought back out of the margin so the heading has an opaque band to cover the items passing under it without moving where it sits when the list is at rest. Only in the sidebar: at full width the group is never far enough from its heading for this to be worth a pinned strip. */ .emv-c-split > .emv-c-aside .emv-agenda__section { position: sticky; top: 0; z-index: 1; background: var(--paper); padding-top: 9px; margin-top: -9px; } /* The gloss used to clamp at three lines here. There is no gloss any more — an item is one shortened line at every width, so the sidebar needs no density rule of its own beyond the type step above. */ } /* The sidebar's head is set for a 308px measure at every width, because that is the only place it is ever used. */ .emv-c-sechead--narrow { margin-bottom: 20px; } .emv-c-sechead--narrow .emv-c-sechead__meta { gap: 10px; margin-bottom: 11px; } .emv-c-sechead--narrow .emv-c-sechead__title { font-size: 1.5rem; margin-bottom: 0; } .emv-c-sechead--narrow .emv-c-intro { font-size: 14.5px; line-height: 1.62; margin-top: 10px; } /* Stepped down half a point and allowed to shrink, so that in a 372px column the state and the count still share the line the spacer holds open between them — the sidebar's head has no numeral (see `numbered` in emv_civic_sechead) and the two of them are the whole meta line. It wraps of its own accord at a large text size, which is the only time it should. */ .emv-c-sechead--narrow .emv-c-sechead__state { flex: 0 1 auto; font-size: 12px; gap: 7px; } /* The sidebar's standfirst lives inside the scroll box rather than in the head above it — see the note in emv_agenda_section(). Stacked, the head's own bottom margin already separates them; pinned, the head gives that margin up for its rule, so the standfirst carries the gap instead. */ .emv-agenda__standfirst { margin-top: 0; } /* The route out to the city's own copy, and the date the city posted it, now sit above the list rather than under it — in a scroll box the foot of a twenty-item list is six flicks away, and both of these are how a reader gets from this abridgement to the document that governs the meeting. */ .emv-agenda__posted { margin-top: 10px; } .emv-agenda__actions { margin-top: 14px; margin-bottom: 4px; } /* THE STEP IS AT 1200 BECAUSE THAT IS WHERE THE SHELL STOPS GROWING. The split is `min(viewport, 1200) - 64` wide, so from 1200px up the container is a fixed 1136 and the two columns are dividing a constant. A step set any higher — it was at 1360 — would be taking 64px off the record column at a width where nothing had become available to spend, which is the opposite of "wider screens can afford more". Below 1200 the container really is shrinking, and there the sidebar gives its share back so the record is not squeezed from both sides at once. Record column measure across the range: ~553px at 1081, ~659px at 1199, ~596px from 1200 up. All of it inside a readable measure for 17px prose. */ @media (min-width: 1200px) { .emv-c-split { --aside: 436px; } } /* =========================================================================== 1b. The section index — the page's contents /civic/ is a 12,000px document and its sections have always had headings and ids; what they never had was anything that let a reader use them. This is a plain list of in-page anchors that pins under the site header, marks where the reader currently is, and carries the size of each section so they can judge the trip before making it. It sits in the flow rather than over it — a full-width strip on the page's own shell, so its first entry begins on the same left edge as every heading below it. It is furniture, so it is set at label size in the UI face and never competes with the masthead it sits under. =========================================================================== */ .emv-c-index { position: sticky; top: var(--emv-headh); /* Under the site header's 50, above the page's own content and its staggered reveals. */ z-index: 20; /* WHITE AND OPAQUE, not the frosted panel it was. It used to be a tinted translucent bar because it travelled over a warm ground; on a page that is white it can simply be white, which makes it read as a second row of the site header rather than as a floating control — and the header is directly above it and also white, so the two meet with no seam. The one thing it does need is opacity, because it passes over the paper band and the navy one. */ background: #fff; border-bottom: 1px solid var(--rule); } .emv-c-index__list { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; /* Six entries fit a 1120px shell comfortably; a seventh, or a reader at 130% text size, scrolls sideways rather than wrapping to a second row that would double the height of a strip pinned to every screen. */ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .emv-c-index__list::-webkit-scrollbar { display: none; } .emv-c-index__item { flex: none; } .emv-c-index__link { display: flex; align-items: baseline; gap: 7px; /* The VERTICAL padding IS the touch target on this component — the label is 15px tall and everything else is padding — so it carries the strip to 44px and is not negotiable down for tighter type. The strip is pinned on tablets too, where these are fingers rather than a cursor. The horizontal padding is not load-bearing in the same way: an entry is 140-280px wide on its label alone. It gives back five pixels a side between 1120px and about 960px, which is what pays for the tier marks — the five entries plus three 14px marks measure 988px, and a 1024px window has 960px of shell. Without this the strip starts scrolling sideways at 1024 and clips the last entry by ten pixels; with it the threshold stays where it was. Below ~960 the strip has always scrolled and still does, which is the behaviour the note on .emv-c-index__list describes. Expressed as a clamp rather than a media query on purpose: this is one value easing between two known widths, and it would otherwise be the file's fifth breakpoint, set at a width nothing else on the page cares about. */ padding-top: 15px; padding-bottom: 14px; padding-left: clamp(12px, 1.25vw, 18px); padding-right: clamp(12px, 1.25vw, 18px); font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate); white-space: nowrap; /* The active mark is drawn as an inset shadow rather than a border so it cannot change the strip's height when it moves between entries. */ box-shadow: inset 0 -2px 0 transparent; transition: color 160ms ease, box-shadow 160ms ease; } .emv-c-index__item:first-child .emv-c-index__link { padding-left: 0; } /* --------------------------------------------------------------------------- THE LADDER, IN THE STRIP — the section's own folio rule, 14px wide, set in front of the entry's name. NOT ON THE TOP EDGE, AND THAT WAS THE FIRST ATTEMPT. Each tiered entry took its rule along the top of the link, which measured correctly and looked wrong: the strip's top edge is a boundary whose other side CHANGES AS YOU SCROLL — the navy masthead at the top of the page, white or newsprint once it pins — and a 3px dark rule flush against navy has no white in front of it to belong to. It read as three marks hanging off the bottom of the masthead rather than as furniture inside the strip. Jessie, with a screenshot of exactly that: "whats going on here". Anything flush to that edge loses the same argument, so the mark moved inside the item, where it touches nothing. In front of the label it also does a job the edge rule could not: it is a legend. A reader meets the mark and the section's name together up here, then meets the same mark full-width at the head of the section itself. Still a rule and not a badge — see the note on .emv-c-index__n for why this strip refuses filled counters. Drawn in backgrounds rather than borders so all three patterns fit one box: a 14x6 slot with the rule painted inside it, which is what lets the double rule have two lines while the other two have one, without three different element heights on one baseline. --------------------------------------------------------------------------- */ .emv-c-index__mark { flex: none; width: 14px; height: 6px; /* The link sets `align-items: baseline` for its text; a 6px block on a baseline hangs off the bottom of the line. Centred against the cap height of the 12px label instead. */ align-self: center; background-repeat: no-repeat; } .emv-c-index__link[data-tier="open"] .emv-c-index__mark { background-image: linear-gradient(var(--tier-open), var(--tier-open)); background-size: 100% 3px; background-position: 0 2px; } /* 3px on, 2px off — just under three dashes across 14px. At 4-on-3-off it is two dashes, which reads as an ellipsis rather than as a broken rule. */ .emv-c-index__link[data-tier="draft"] .emv-c-index__mark { background-image: repeating-linear-gradient(90deg, var(--tier-draft) 0 3px, transparent 3px 5px); background-size: 100% 3px; background-position: 0 2px; } /* Heavy over light, the folio's own arrangement at a fourteenth of the width. 2px over 1px rather than 3 over 1: at 14px a 3px line is a block. */ .emv-c-index__link[data-tier="final"] .emv-c-index__mark { background-image: linear-gradient(var(--tier-final), var(--tier-final)), linear-gradient(var(--tier-final), var(--tier-final)); background-size: 100% 2px, 100% 1px; background-position: 0 1px, 0 5px; } .emv-c-index__link:hover { color: var(--ink); } /* Set by assets/js/civic.js as the reader passes each section. Colour alone would not carry it — the gold underline is the mark that does the work, and the weight of the number changes too, so this is legible without colour. */ .emv-c-index__link[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold-500); } /* THE SIDEBAR'S ENTRY NEEDS ITS OWN STATE, and the reason is arithmetic. The active mark is "the last section heading the reader has passed", which is the right question for a stack of sections and the wrong one for a column that sits beside them: the posted agenda's box and "Just happened"'s heading start 117px apart, so the agenda would light for a tenth of a screen and then hand over for the remaining six thousand pixels — during which it is, in fact, the thing on the right of every one of them. So the strip carries two facts rather than one. `aria-current` still follows the reading position in the main column, and this says the section is on screen right now. Deliberately quieter than the active mark — a hollow gold ring rather than the solid underline — because "you can see this" is a weaker claim than "you are here", and both can be true of different entries at once. Set by assets/js/civic.js, and only while the sidebar is actually pinned; below 1080px the agenda is an ordinary section in the run and the active mark works on it like any other. */ .emv-c-index__link[data-onscreen] { color: var(--ink); } .emv-c-index__link[data-onscreen]:not([aria-current]) .emv-c-index__label::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: 0.12em; border: 1.5px solid var(--gold-500); border-radius: 50%; } /* How big the section is. A count, not a badge: no pill, no fill, because six filled counters across a strip pinned to every screen would be the loudest thing on the page — the /directory/ repetition rule applied to furniture. */ .emv-c-index__n { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-800); font-variant-numeric: tabular-nums; } .emv-c-index__link[aria-current="true"] .emv-c-index__n { font-weight: 700; } /* The phone's way back to the index — see the note in inc/civic-view.php. Desktop keeps the pinned strip and never needs this. */ .emv-c-jump { display: none; } @media (max-width: 780px) { .emv-c-jump { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; /* Clear of the home indicator on a gesture-navigation phone. */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; /* The label sets a 39px box, so the minimum is stated rather than inferred from padding — 44px is the floor, and a later change to the type size must not be able to quietly drop it below. */ padding: 12px 17px; min-height: 44px; /* .emv-btn's radius, not a capsule. It was a pill on a wide drop shadow, which is the one shape on this site that says "app" — and the site has exactly one button shape. It still needs *some* shadow, because unlike everything else here it genuinely does float over the document, but a tight one that reads as lift rather than as glow. */ border-radius: 8px; background: var(--nv-800); color: #fff; box-shadow: 0 3px 10px rgba(7, 24, 37, 0.24); font-family: var(--ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* [hidden] has to win over the display above — an attribute selector and a class are the same specificity, and the class is written later. */ .emv-c-jump[hidden] { display: none; } } /* =========================================================================== 1. Masthead =========================================================================== */ .emv-c-head { position: relative; overflow: hidden; background: var(--nv-800); border-bottom: 1px solid var(--nv-700); } /* The same survey-grid atmosphere the home page hero uses — the council's agenda is mostly plats, rezones and rights-of-way. */ .emv-c-head::before, .emv-c-head::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .emv-c-head::before { background-image: linear-gradient(rgba(55, 97, 140, 0.26) 1px, transparent 1px), linear-gradient(90deg, rgba(55, 97, 140, 0.26) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(120% 100% at 94% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 100% at 94% 0%, #000 0%, transparent 60%); } .emv-c-head::after { background: radial-gradient(56% 52% at 90% 0%, rgba(237, 162, 60, 0.13), transparent 64%), radial-gradient(78% 68% at 0% 106%, rgba(7, 24, 37, 0.9), transparent 62%); } .emv-c-head .emv-c-shell { position: relative; z-index: 1; } .emv-c-head__inner { padding-top: var(--band); padding-bottom: 44px; } /* -- The nameplate ---------------------------------------------------------- The h1 is set as a plate, not as a headline. "Civic" is five letters; at the 3.25rem this used to be it held about 160px of ink inside a 1,056px panel and left the top half of the masthead empty. A newspaper's inside page does the same thing this now does: the plate stands small in a rule across the full measure, and the headline underneath is what takes the size. The rule is .emv-eyebrow's device — a mark, then a line that runs to the edge of the measure — grown to the width of the panel. `flex: 1` on the rule is what makes it measure the panel rather than the words. */ .emv-c-plate { display: flex; align-items: center; gap: 18px; } .emv-c-plate__name { font-family: var(--ui); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin: 0; flex: none; } .emv-c-plate__rule { flex: 1 1 auto; min-width: 20px; height: 1px; background: rgba(255, 255, 255, 0.28); } .emv-c-plate__standing { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); margin: 0; flex: none; } /* The deck, promoted. In Inter at 17px under a display headline it read as a caption for the word above it; in the display face it reads as the page's standfirst, which is what it is. Roman, not italic — this is a statement of what the page does, and italic at this size on navy loses too much weight. */ .emv-c-head__deck { font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.008em; color: var(--dim); margin: 22px 0 0; max-width: 34ch; text-wrap: balance; } /* -- The docket ------------------------------------------------------------- Two questions, in the order a resident asks them: what is coming, and what just happened. They are not equally urgent and they no longer look it — the lead takes the display face and the accent, the record is set at two thirds the size in the same ruled column vocabulary .emv-figstrip uses on the front page. No fills, no corners, no boxes; a heavy rule opens the strip and a hairline divides the cells. THE ACCENT IS SPENT ONCE, on the agenda figure. Everything else up here is white or --dim, so the one gold object on the masthead is the number that tells a reader whether tomorrow is worth an evening. */ .emv-c-docket { display: grid; grid-template-columns: 1.32fr 1fr; gap: 0; margin: 36px 0 0; border-top: 2px solid rgba(255, 255, 255, 0.32); /* stretch, not start: the hairline between the cells is a column rule, and a column rule that stops two thirds of the way down because the right-hand cell ran out of copy reads as an unfinished line rather than as a divider. Stretching the cells runs it the full depth of the strip. The content inside each cell stays top-aligned — pinning the record's link to the bottom to match the lead's would open 80px of nothing above it. */ align-items: stretch; } /* With no certified or pending record there is no second cell, and the lead should not sit in a two-column grid holding a gap open for it. */ .emv-c-docket--solo { grid-template-columns: minmax(0, 1fr); } .emv-c-docket__lead, .emv-c-docket__record { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 40px 0 0; } /* The hairline lives in the gutter, hung off the second cell so the first one's measure is not short by the gutter it is paying for. */ .emv-c-docket__record { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--nv-600); } /* The gold segment overprinting the head rule marks the forward-looking cell. Sized to the kicker beneath it rather than to a round number, so it reads as a mark on an entry rather than as a bar with an arbitrary length — the previous 92px on a 1,056px rule read as a progress bar. */ .emv-c-docket__lead::before { content: ''; position: absolute; top: -2px; left: 0; width: 64px; height: 2px; background: var(--gold-500); } /* -- Kickers ---------------------------------------------------------------- */ .emv-c-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 14px; } .emv-c-kicker--quiet { color: var(--dim); } .emv-c-kicker__pip { position: relative; width: 7px; height: 7px; border-radius: 999px; background: var(--gold-500); flex: none; } .emv-c-kicker__pip::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid var(--gold-500); opacity: 0; } /* -- The dates -------------------------------------------------------------- */ .emv-c-docket__date { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.02; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; } /* The record's date is the same object at two thirds, which is the whole of how the hierarchy is stated. */ .emv-c-docket__date--sm { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.014em; } .emv-c-docket__date--quiet { color: var(--dim); font-weight: 400; } .emv-c-docket__meta { font-family: var(--ui); font-size: 13.5px; line-height: 1.6; color: var(--dim); margin: 12px 0 0; } .emv-c-docket__note { font-family: var(--ui); font-size: 15px; line-height: 1.6; color: #fff; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--nv-600); } /* -- The figure ------------------------------------------------------------- The masthead's focal point, and the only gold object on it. Set as the front page sets a figure — display face, baseline-aligned unit label beside it — over a hairline, so it reads as a measurement rather than as a badge. `tabular-nums` because this number changes every week and a 1 that is narrower than a 2 makes the strip twitch between meetings. */ .emv-c-docket__figure { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--nv-600); } .emv-c-docket__n { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--gold-500); } /* One line. Capped at 9ch this broke as "items on / the agenda", and a two-line label beside a baseline-aligned numeral hangs its second line below the figure's foot — the unit stops reading as a unit and starts reading as a caption that has slipped. There is 561px of cell for a 135px label. */ .emv-c-docket__unit { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--dim); line-height: 1.35; white-space: nowrap; } /* -- The record's status flag ----------------------------------------------- */ .emv-c-docket__flag { display: flex; align-items: flex-start; gap: 9px; font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--dim); margin: 16px 0 0; } .emv-c-docket__flag::before { content: ''; width: 6px; height: 6px; margin-top: 6px; border-radius: 999px; background: currentColor; flex: none; } .emv-c-docket__flag--warm { color: var(--gold-400); } .emv-c-docket__flag--warm::before { background: var(--gold-500); } /* -- The way out ------------------------------------------------------------ Each cell's link follows its own content rather than being pinned to a shared baseline. The lead is always the taller of the two — it carries the figure — so aligning the feet would push the record's link 80px clear of the flag it belongs to, which is worse than two links at different heights. */ .emv-c-docket__act { margin: 24px 0 0; padding: 0; } .emv-c-docket__cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ui); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--gold-400); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 160ms ease, border-color 160ms ease; } .emv-c-docket__cta:hover { color: #fff; border-bottom-color: var(--gold-500); } .emv-c-docket__cta svg { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } .emv-c-docket__cta:hover svg { transform: translate(2px, -2px); } /* =========================================================================== 2. Section heads — the mark that says a new section of the document begins THIS IS .emv-folio. That is the whole idea: every department on the front page and in the issue library opens on a heavy ink rule running the full measure, with the department's mark under its left end and the way onward under its right, and from this pass /civic/ opens its sections the same way. ══════════════════════════════════════════════════════════════════ 01 Certified through Jul 21 · 6 DECISIONS On the record Decisions from approved minutes, where every member's vote … WHAT IT REPLACED. A 2px gold-lead-to-hairline gradient threaded BETWEEN the numeral and the provenance line — a rule that filled whatever space the two text items left over, so it was a different length in every section and it never reached either edge of the measure. It read as a divider inside the head rather than as the head's own opening mark, and it was the one piece of section furniture on the site that no other page had. A rule that spans the measure is what ties a whole page to one width; that is why the front page was given .emv-folio in the first place. Nothing was dropped in the swap. The numeral, the provenance note and the count all still print — the numeral hanging under the left end of the rule, the other two under its right end, which is the folio's own arrangement. THE NUMERAL IS SET IN THE DISPLAY FACE, and that is a quotation rather than a whim: .emv-hero__folio does exactly this on the front page, where the edition number is the one figure on a line of small caps and is therefore allowed to be the one thing on it that is not small caps. A folio number in Newsreader is the oldest mark in this vocabulary. The headline under it is the section's name; the intro is the standing copy that used to sit in the column beside a 12px label. Both measure the page, because the rail's job — dates, tallies, chips — is per row, and a section mark that shares the rail's geometry reads as another row. The numeral is the page's own count, printed by emv_civic_sechead() from the same ordered list the contents strip is built from. =========================================================================== */ /* 30px, not --row: the first entry below carries its own --row of padding under its rule, so the head's own margin only has to clear the intro. */ .emv-c-sechead { margin: 0 0 30px; padding-top: 13px; border-top: 2px solid var(--rule-heavy); } /* -- The three tiered rules ------------------------------------------------ See --tier-open and the note above it for why these are three marks rather than three colours. Each one also re-points --tier, which is what the pip on the state line and nothing else reads. */ .emv-c-sechead[data-tier="open"] { --tier: var(--tier-open); border-top-width: 3px; border-top-color: var(--tier-open); padding-top: 12px; } /* Dashed at 3px gives a long dash with a wide gap in every engine — a rule that is clearly one rule and clearly not solid, which is the whole claim. */ .emv-c-sechead[data-tier="draft"] { --tier: var(--tier-draft); border-top: 3px dashed var(--tier-draft); padding-top: 12px; } /* THE DOUBLE RULE IS PAINTED, NOT BORDERED. `border-top: 4px double` divides its width into three by a rule the spec leaves to the engine, so the two lines come out the same weight and 1px apart — a thick fuzzy line, not a double rule. Two backgrounds give the ledger's own arrangement exactly: a 3px rule with a 1px rule 3px under it, heavy over light. The head keeps a border-top of the same total height so the padding above the numeral is unchanged from every other section head on the page. */ .emv-c-sechead[data-tier="final"] { --tier: var(--tier-final); border-top: 7px solid transparent; padding-top: 8px; background-image: linear-gradient(var(--tier-final), var(--tier-final)), linear-gradient(var(--tier-final), var(--tier-final)); background-size: 100% 3px, 100% 1px; background-position: 0 0, 0 6px; background-repeat: no-repeat; background-origin: border-box; background-clip: border-box; } /* -- What the tier means, said in words ------------------------------------ The rule above carries "these are different"; this line carries what the difference costs the reader, and it is the half that cannot be inferred. It sits at the LEFT of the folio, under the rule's left end with the numeral, because it is a fact about the material; the provenance and the count stay at the right end. Ink rather than slate: the note beside it is a detail about where the section came from, this is a warning about how much of it to believe, and the two are deliberately not set alike. */ .emv-c-sechead__state { flex: none; display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink); text-wrap: pretty; } /* The one place the tier is a colour, and it is 7px of it — enough to tie the sentence to the rule 12px above without competing with either. */ .emv-c-sechead__pip { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tier, var(--ink)); transform: translateY(-1px); } /* The dashed rule's tier is the page's secondary text colour, and a 7px disc in it beside 12.5px text in ink reads as a bullet somebody forgot to remove rather than as a mark. Hollow, so it is a state and not punctuation. */ .emv-c-sechead[data-tier="draft"] .emv-c-sechead__pip { background: transparent; box-shadow: inset 0 0 0 2px var(--tier-draft); } .emv-c-sechead__meta { display: flex; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; margin: 0 0 14px; font-family: var(--ui); } /* The folio number. Lining tabular figures so 01 and 10 occupy the same box, and gold because the numeral is the one piece of this component that is pure wayfinding. */ .emv-c-sechead__num { flex: none; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--gold-800); font-variant-numeric: lining-nums tabular-nums; } /* WHAT IS LEFT OF THE OLD GRADIENT RULE: the space it used to fill. It sits between the numeral and the provenance in the markup, which is exactly where a spacer belongs, so keeping it as one pushes the right-hand items to the far end of the measure without a wrapper element and without giving two optional items an `auto` margin each — with both present, two autos split the free space between them and neither lands at the edge. It is `aria-hidden` in the markup and now draws nothing, so it costs a reader nothing in either mode. */ .emv-c-sechead__rule { flex: 1 1 auto; min-width: 0; height: 0; } /* Provenance — "Certified through July 21, 2026". Sentence case on purpose: it is a fact about the section, not a label for it. */ .emv-c-sechead__note { flex: none; font-size: 12.5px; font-weight: 500; color: var(--slate); font-variant-numeric: tabular-nums; } /* How big the section is, under the right end of the rule — the same figure the contents strip carries, in the place a reader looks once they have arrived. Small caps, because it is a label; the note beside it is a sentence, and the two are deliberately not set alike. */ .emv-c-sechead__count { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-variant-numeric: tabular-nums; } .emv-c-sechead__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; } /* The colophon's head, which is a rail label rather than a section mark. */ .emv-c-sechead__title--small { font-size: 1.25rem; margin-bottom: 0; } /* The rail's eyebrow is now only ever a row label — the section heads that used to share this rule have their own component above. */ .emv-c-rail .emv-eyebrow { margin: 0; line-height: 1.45; } /* .emv-c-note was the ledger's "Certified through …" line, sitting under the section label in the rail. Provenance about a whole section belongs to the section, so it is now the head's `note` slot (.emv-c-sechead__note) and the rail carries nothing but row data. */ /* Full width, like everything else in the panel. */ .emv-c-intro { font-family: var(--ui); font-size: 17px; line-height: 1.75; color: var(--slate); margin: 0; text-wrap: pretty; } .emv-c-intro strong { color: var(--ink); font-weight: 700; } /* =========================================================================== 3. Rows — bulletins and ledger entries share one skeleton =========================================================================== */ .emv-c-entry { padding-top: var(--row); padding-bottom: var(--row); border-top: 1px solid var(--rule); } .emv-c-entry:last-child { padding-bottom: 0; } /* A dissent is the most newsworthy thing a council record produces, so it marks the whole entry rather than hiding at the bottom of the copy. It used to mark the rail; with the rail gone the bar runs the height of the block, pulled out into the panel's padding so the text keeps its left edge. */ .emv-c-entry--split { border-left: 2px solid var(--nay); padding-left: 18px; margin-left: -20px; } /* -- Strip contents -------------------------------------------------------- All of these were stacked blocks in a 156px rail. In a strip they are inline items on one line, so the display and the stacking margins come off. */ .emv-c-date { font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nv-800); font-variant-numeric: tabular-nums; } .emv-c-sub { font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--slate); font-variant-numeric: tabular-nums; } /* -- The vote, drawn as seats ---------------------------------------------- One block per recorded vote. Colour never carries meaning alone: the tally is written beside it and a full sentence sits in the accessible name. */ .emv-c-seats { display: flex; gap: 3px; } .emv-c-seat { width: 14px; height: 20px; border-radius: 2px; flex: none; } .emv-c-seat--yea { background: var(--yea); } .emv-c-seat--nay { background: var(--nay); } .emv-c-seat--other { background: repeating-linear-gradient(135deg, #c9cfd6 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px #c9cfd6; } /* -- The key, printed once at the top of the section that uses the graphic -- A legend has to be quieter than the thing it explains or it becomes the loudest line in the section, so it is one 13px row: the label, three swatch-and-word pairs in the order the blocks appear in every entry below, and the sentence that makes the row countable. No box and no rule round it — the first entry's own hairline is 26px below and a second line here would fence the key off as an object instead of leaving it as a caption. */ .emv-c-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: -4px 0 26px; font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--slate); } .emv-c-key__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .emv-c-key__item { display: inline-flex; align-items: center; gap: 8px; } /* The real seat at label size. A legend drawn in a different mark from the thing it explains is not a legend — same class, same colours, same corner radius, stepped down until it sits on a 13px line. */ .emv-c-key .emv-c-seat { width: 11px; height: 15px; } .emv-c-key__note { color: var(--slate); } .emv-c-tally { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .emv-c-tally--none { font-weight: 600; color: var(--slate); font-size: 13px; } .emv-c-verdict { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); } .emv-c-verdict--split { color: var(--nay); } /* -- Entry contents -------------------------------------------------------- The optical nudge that used to lift each heading's cap-height onto the rail's first baseline is gone with the rail: the heading now follows the strip in normal flow and starts where the flow puts it. */ .emv-c-title { font-family: var(--display); font-weight: 700; font-size: 1.625rem; line-height: 1.22; letter-spacing: -0.016em; color: var(--ink); margin: 0 0 10px; text-wrap: balance; } /* The reported layer has no headline in the data — only an editorial lede — so it leads with the lede set as display type. */ .emv-c-lede { font-family: var(--display); font-weight: 500; font-size: 1.375rem; line-height: 1.45; letter-spacing: -0.008em; color: var(--ink); margin: 0; text-wrap: pretty; } .emv-c-lede--minor { font-size: 1.125rem; line-height: 1.55; } /* The lede carried no bottom margin because the rail's geometry used to open the gap under it. In one column nothing does, so the space is stated. */ .emv-c-lede + .emv-prose, .emv-c-lede + .emv-c-body { margin-top: 12px; } /* A line now measures the panel rather than 640px, so the type goes up a step and the leading with it — long lines need the extra leading to keep a reader's eye from dropping a line on the return sweep. */ .emv-c-body { font-family: var(--ui); font-size: 17px; line-height: 1.75; color: var(--slate); margin: 0; text-wrap: pretty; } .emv-c-title + .emv-c-body { margin-top: 0; } /* -- Who broke ranks ------------------------------------------------------- */ .emv-c-dissent { margin: 18px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--nay); font-family: var(--ui); font-size: 15px; line-height: 1.6; color: var(--slate); } .emv-c-dissent strong { color: var(--ink); font-weight: 700; } .emv-c-dissent span { display: block; font-size: 13.5px; margin-top: 3px; } .emv-c-dissent--abstain { border-left-color: var(--abstain); } .emv-c-col > .emv-link { margin-top: 18px; } /* =========================================================================== 4. Motions — a disclosure, so a routine six-motion night cannot out-weigh the lead on column height alone =========================================================================== */ .emv-c-fold { margin-top: 24px; } .emv-c-fold > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate); padding: 8px 0; transition: color 160ms ease; } .emv-c-fold > summary::-webkit-details-marker { display: none; } .emv-c-fold > summary:hover { color: var(--gold-800); } .emv-c-fold__n { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold-800); font-variant-numeric: tabular-nums; } .emv-c-fold > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms ease; flex: none; } .emv-c-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .emv-c-motions { list-style: none; margin: 4px 0 0; padding: 0; } .emv-c-motions li { padding: 14px 0; border-top: 1px solid var(--rule); font-family: var(--ui); font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; } .emv-c-result { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 5px; } .emv-c-result--pass { color: var(--yea); } .emv-c-result--fail { color: var(--nay); } .emv-c-motionvote { display: block; font-size: 13.5px; color: var(--slate); margin-top: 5px; font-variant-numeric: tabular-nums; } /* -- Actions + the caveat that travels with every reported item ------------ */ .emv-c-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .emv-c-caveat { font-family: var(--ui); font-size: 13px; line-height: 1.65; color: var(--slate); margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); text-wrap: pretty; } /* One treatment for a link sitting inside civic body copy. .emv-c-inline is the class to reach for in new markup, and it now lives in style.css instead of here — the shared civic-tool wrapper emits one, and that wrapper travels to pages this stylesheet does not load on. These are the selectors that already existed when this was written, and they are civic-only. */ .emv-c-caveat a, .emv-c-fine a, .emv-voice__row a { color: var(--gold-800); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .emv-c-caveat a:hover, .emv-c-fine a:hover, .emv-voice__row a:hover { color: #7f4b16; } /* =========================================================================== 4b. Agenda — the same list as the motions above, before the vote instead of after. It sits next to the motions on purpose: both are item lists inside a row's column, both are ruled by row, and neither may set its own width. The one deliberate difference is weight. A motion is a decision and is set in ink; an agenda item is a proposal and is set a step quieter, because the whole risk of this section is that it reads as though the council has already acted. Section headings are the clerk's own ("CONSENT", "ORDINANCES/PUBLIC HEARINGS"). They group the list, so they must be legible as structure while staying lighter than .emv-c-lede, which is the meeting itself. =========================================================================== */ .emv-agenda__sessions { font-family: var(--ui); font-size: 13px; line-height: 1.6; color: var(--slate); margin: 6px 0 0; font-variant-numeric: tabular-nums; } .emv-agenda__group { margin-top: 22px; } /* The heading hangs on a hairline rather than a background: a tinted strip here would be a box with its own padding, and this page has exactly two vertical edges. */ .emv-agenda__section { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-800); margin: 0 0 2px; padding-bottom: 8px; border-bottom: 2px solid var(--rule); text-wrap: pretty; } .emv-agenda__items { list-style: none; margin: 0; padding: 0; } /* TWO THINGS WERE TRIED HERE AND BOTH WERE REVERTED ON MEASUREMENT. Recorded so nobody spends the afternoon on them again. Baseline for all three figures is the posted-agenda band at 1440px, 28 items across two meetings. 1. Setting long groups in two CSS columns: 4,581 → 4,344. It saved 237px of 4,581 and cost every clerk title — some run to 267 characters, because they are the city's own wording and trimming them would be editorialising — a third of its measure. Text reflows; it does not pack. Halving the width very nearly doubles the height of everything in it. 2. Moving the kind label into a 128px rail inside each item, the page's own idiom one level down: 4,129 → 4,157. It reads well and it is a net LOSS, because the ~15 items carrying a kind give back one line each while all 28 lose 148px of title measure. What actually worked was the width itself — the row taking the panel rather than a 640px column, nothing inside it changed — for 4,604 → 4,129. Every row on the page takes the panel now, so this is no longer an exception granted to one section; it is just the layout. Clamping the gloss to two lines was measured too and changes nothing: at this measure it already fits in two. */ /* Ruled by row, like the issue library grid and the motions list — every item owns its bottom hairline, so a section is one continuous set of rules regardless of how many items land in it. */ .emv-agenda__item { padding: 13px 0; border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; } .emv-agenda__item:last-child { border-bottom: 0; } /* The kind — RESOLUTION, ORDINANCE/PUBLIC HEARING, DISCUSSION — lifted out of the item text so 23 lines do not each open with a shouted prefix. Set above the title rather than inline: a third of these run past 20 characters, and inline they push every title to a ragged second indent. */ .emv-agenda__kind { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; } .emv-agenda__title { display: block; } /* .emv-agenda__desc and .emv-agenda__note are gone with the markup that emitted them. An item used to carry the clerk's 220-character background extract and a line naming the presenter and the minutes allotted, under a verbatim title running to 267 characters; it is one shortened line now. See emv_agenda_sections() for what was cut and emv_agenda_plain() for how. */ /* =========================================================================== 5. Handoff to the record =========================================================================== */ /* The one dark band in the run, and the page's only standing call to action. Full bleed like every other band, so the page reads navy → paper → white → NAVY → white from the masthead down, which is the front page's own rhythm: a department is marked out by what it is printed on rather than by a box drawn round it. The survey grid from the masthead comes back here, which is what ties the top and the bottom of the page together. It was a navy card on two drop shadows — the heaviest object on the page, floating between two white ones. Laid down as a band it stops being an advertisement dropped into the document and becomes a section of it. */ .emv-c-band--navy { position: relative; overflow: hidden; --rule: var(--nv-600); /* The folio rule goes white-at-a-third on a dark ground, for the reason .emv-hero__foot does: an opaque rule over navy reads as a bar laid on the band, and this has to read as printed into it. */ --rule-heavy: rgba(255, 255, 255, 0.32); background: radial-gradient(74% 120% at 92% 0%, rgba(237, 162, 60, 0.12), transparent 62%), var(--nv-800); border-top: 1px solid var(--nv-700); border-bottom: 1px solid var(--nv-700); } .emv-c-band--navy::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(55, 97, 140, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(55, 97, 140, 0.22) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(110% 100% at 96% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(110% 100% at 96% 0%, #000 0%, transparent 62%); } .emv-c-band--navy > .emv-c-shell { position: relative; } /* The handoff has no .emv-c-sechead wrapper — it is one meta line and then a headline — so the folio rule is hung on the meta line itself. The label leads it rather than closing it: there is no numeral to open it with, and a label under the right end of a rule with nothing under the left end reads as a caption that has come adrift. */ .emv-c-sechead__meta--onDark { margin-bottom: 20px; padding-top: 13px; border-top: 2px solid var(--rule-heavy); } .emv-c-sechead__meta--onDark .emv-c-sechead__count { color: var(--gold-400); } .emv-c-handoff h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem); line-height: 1.14; letter-spacing: -0.018em; color: #fff; margin: -4px 0 12px; text-wrap: balance; } /* Scoped to the body rather than the panel: the head's meta line is a

too, and it carries its own type and its own margin. */ .emv-c-handoff__body p { font-family: var(--ui); font-size: 16.5px; line-height: 1.7; color: var(--dim); margin: 0; text-wrap: pretty; } /* The proof-of-scale figures. Equal columns so the numbers form a row, not a ragged line of differently-sized cells. */ .emv-c-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid var(--nv-600); } .emv-c-figures dt { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; } .emv-c-figures dd { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--gold-500); margin: 0; font-variant-numeric: tabular-nums; } .emv-c-handoff .emv-btn { margin-top: 32px; } /* =========================================================================== 6. Who represents you =========================================================================== */ /* THE ROSTER IS A LEDGER, AND THE LEDGER IS THE ARGUMENT. IT WAS SIX CELLS THREE ACROSS, AND EVERY ONE OF THEM WAS THREE QUARTERS EMPTY. A 340px cell held a 10.5px role, a 20px name and two 13px links — about 120px of content — six times, in two rows. There was no styling fix for that, because the emptiness was not a spacing mistake: the section's own standfirst promised "how each of them has voted" and then printed no vote at all. The record was a link labelled "Voting record". Nothing was being drawn because nothing was being said. So the seat now carries the tally the feed has published all along, and the grid turns ninety degrees: ═══════════════════════════════════════════════════════════ 2px ink SEAT TERM ROLL-CALL RECORD REACH THEM ← heads ─────────────────────────────────────────────────────────── MAYOR ← wash Jared Gray 2026–2029 ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▊▨▨ Email 277 roll calls · … Voting record ─────────────────────────────────────────────────────────── COUNCILMEMBER Brett Wright 2026–2029 ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▊ Email … ROWS, NOT TILES, FOR ONE REASON: SIX BARS ONLY COMPARE IF THEY START AT THE SAME X. Three across, each bar is an ornament inside its own cell and the eye has to carry a length across 380px of gutter to use it. Stacked, drawn to the same scale from the same left edge, they are a chart — and what the chart says is legible in one look: this council votes yes almost always, one seat holds most of the dissent, and one seat has missed a lot of meetings. That is a finding, and it is the finding the section exists to deliver. HORIZONTAL RULES ONLY. The old cells hung a hairline in the gutter to make a ruled table out of a grid of boxes; at four columns those verticals would fence every row into four compartments and fight the one horizontal reading the row wants. Alignment holds the columns — which is what a standings table in a newspaper does, and it is the same 1px --rule doing it. -------------------------------------------------------------------------- */ .emv-c-roster { border-top: 2px solid var(--rule-heavy); } /* One template, declared once, used by the head strip and by every row — that shared declaration is the only thing keeping the columns in line, so the two selectors stay joined. */ .emv-c-roster__head, .emv-c-member { display: grid; /* Three columns since C8. The roll-call bar had the widest track on the row and pushed the email — the only part of the row that does anything — to the far edge. Its measure goes back to the seat and the contact. AND THE BAR IS NOT DRAWN AT ALL — Jessie's call, 2026-09-02. Everything below from .emv-c-rec__track down is kept and is currently unused; the tally is still in the digest if it is ever wanted back. What must not happen again is the half-removal: the first time the bar came out, this declaration changed and nothing else did, so the template went on computing six figures it never printed, the comments here went on describing four columns, and the chair's wash kept a stop measured against a graphic that no longer existed. */ grid-template-columns: minmax(0, 1.4fr) 110px minmax(200px, 1fr); gap: 0 28px; align-items: center; } .emv-c-roster__head { margin: 0; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } .emv-c-members { list-style: none; margin: 0; padding: 0; } .emv-c-member { padding: 15px 0 16px; border-bottom: 1px solid var(--rule); color: inherit; } /* Role over name — a masthead's staff box, not an accident of markup order. The role is the kicker and the name is the entry. */ .emv-c-member__role { display: block; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 0 0 6px; } .emv-c-member__name { display: block; font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); line-height: 1.2; text-wrap: pretty; } /* THE COLUMN LABEL RIDES IN THE ROW. Above 1080 the head strip prints it and this copy is clipped — but it stays in the accessibility tree, because a header strip six rows above is something a screen reader would have to hold in mind, and "Term, 2024 to 2027" in the row is simply the answer. Below 1080 the strip is gone and these are what print. Same markup, both ways. */ .emv-c-member__lab { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The term set in the display face, quoting the folio numerals at the head of every section on this page: a year is the other number this document keeps, and it belongs in the same hand. */ .emv-c-member__years { display: block; font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.004em; white-space: nowrap; } /* -- The record, drawn as one bar per seat --------------------------------- THE SAME THREE MARKS AS SECTION 04, MEASURING A DIFFERENT THING. There the blocks are discrete — one per seat, countable, a single motion. Here one bar is hundreds of motions, so it is continuous and proportional instead: green for yes, red for no, the hatch for every roll call where no vote was cast. Same fills, same 2px corner, same key. Proportion comes from flex-grow on the segments, set inline from the tally, so the bar is exact rather than quantised. min-width keeps a single-vote sliver visible at 3px — on a 300px bar that is under a per cent of distortion, and it is the difference between a mark and nothing at all. The figures underneath are the precise reading either way, which is also why colour is never carrying this alone. */ /* THE TRACK IS THE SCALE. Every bar is a percentage of the same 304px, so length is comparable down the column — which is only true because the track is a fixed box rather than the bar taking the column's own width. */ .emv-c-rec__track { display: block; max-width: 304px; } .emv-c-rec__bar { display: flex; gap: 2px; height: 15px; width: 100%; } .emv-c-rec__seg { flex: 1 1 0; min-width: 3px; border-radius: 2px; } .emv-c-rec__seg--yea { background: var(--yea); } .emv-c-rec__seg--nay { background: var(--nay); } .emv-c-rec__seg--other { background: repeating-linear-gradient(135deg, #c9cfd6 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px #c9cfd6; } /* The count leads in ink and the exceptions follow in slate: "380 roll calls" is the denominator that makes "7 no" mean anything, and a first-year member at 100 is not a quieter one. */ .emv-c-rec__figs { display: block; margin-top: 8px; font-family: var(--ui); font-size: 12.5px; line-height: 1.45; color: var(--slate); font-variant-numeric: tabular-nums; } .emv-c-rec__n { font-weight: 600; color: var(--ink); } .emv-c-rec__sep { margin: 0 6px; color: var(--mist-200); } /* The seat is a row of two links now, so the hover mark lives on the links — a whole-row hover state on something that is not one target would promise a click the row cannot take. */ .emv-c-member__acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .emv-c-member__act { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--slate); transition: color 160ms ease; } /* The one a resident came for is set in the page's action colour; the voting record stays quiet beside it. Both are real links, and the order is the order of the questions people actually arrive with. */ .emv-c-member__act--reach { color: var(--gold-800); } .emv-c-member__act:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .emv-c-member__act--reach:hover { color: var(--gold-800); } /* THE CHAIR, MARKED LIGHTLY. The mayor sorts to the first row (see template-civic.php), which is where a reader looking for the chair looks first; this is the small confirmation that they found them. A warm wash that is spent by the term column — across a full-width row the old 82% stop would have run the tint under the bars and tinted the graphic. No border, no box and no extra padding: the roster's left edge has to stay flush with the section head above it, and the chair has to stay the same kind of object as the five below. */ .emv-c-member--chair { background: linear-gradient(90deg, rgba(237, 162, 60, 0.1), rgba(237, 162, 60, 0) 34%); } .emv-c-member--chair .emv-c-member__role { color: var(--gold-800); } .emv-c-member--chair .emv-c-member__name { font-size: 22.5px; } /* The roster's key is the section-04 key with a longer note; the note is the provenance line for the whole graphic and it wraps to its own row rather than pushing the three swatch pairs apart. */ .emv-c-key--roster { margin-bottom: 22px; } .emv-c-key--roster .emv-c-key__note { flex: 1 0 100%; } /* =========================================================================== 7. Editor copy + provenance =========================================================================== */ .emv-civic .emv-prose { font-family: var(--ui); font-size: 16.5px; line-height: 1.7; color: var(--slate); } .emv-civic .emv-prose p { margin: 0 0 1.1em; } .emv-civic .emv-prose > *:last-child { margin-bottom: 0; } .emv-c-fine { font-family: var(--ui); font-size: 13px; line-height: 1.7; color: var(--slate); margin: 0; text-wrap: pretty; } /* =========================================================================== THE SUBSCRIBE BAND emv_subscribe_band() closes every page on the site, and it is a real component now (`.emv-signup` in style.css) rather than a block of inline style attributes. The forty lines that used to stand here — square the card, put the headline in Newsreader, rebuild the form as a ruled blank, restore the focus ring — were all undoing those attributes, and they are gone with them. The component draws itself the same way on all eleven templates. One line survives, for the same reason it was written: /civic/ closes on a rule of its own and does not want 56px of air before the band. It is hung off `body` rather than off .emv-civic because the band renders AFTER .emv-civic closes, so a descendant selector would silently match nothing. =========================================================================== */ body.page-template-template-civic .emv-signup { margin-top: 0; } /* =========================================================================== The manual layer — featured slot and running feed. These sit above the synced record and are the only part of the page a person writes. No new grid: both are `.emv-c-row` like everything else, so the two vertical edges hold from the masthead to the footnote. The featured lede is the one place on the page that steps up in size. That is the entire visual weight the slot gets — it earns its position by being first and by being set larger, not by a card, a border or a background of its own. A text-only week has to look deliberate, so nothing here depends on a figure or a tool being present. =========================================================================== */ .emv-c-feature__lede { font-size: 1.75rem; line-height: 1.28; letter-spacing: -0.014em; color: var(--ink); } /* The figures list is calibrated for navy. On paper, gold-500 on paper-line drops under WCAG AA, so the accessible pair is swapped in — the same two tokens .emv-broadsheet re-derives, for the same reason. */ .emv-c-figures--paper { border-top-color: var(--paper-line); } .emv-c-figures--paper dt { color: var(--slate); } .emv-c-figures--paper dd { color: var(--gold-800); } .emv-c-tool { margin-top: 28px; } /* The estimator is a rounded white card on a 44px drop shadow where it is defined, because that is right in the one place it was designed for. The front page already strips both off it (.emv-home .emv-calc) on the grounds that nothing on a page set in rules floats; /civic/ is set in rules now, so it takes the same override for the same reason. It keeps its border — it is a control, and the one thing on either page still allowed to look like an instrument you operate. */ .emv-civic .emv-calc { border-radius: 0; box-shadow: none; border-color: var(--mist-200); } /* On newsprint a cool grey border is the wrong hairline; --rule is the paper's *interior* line here and far too faint to hold a control's edge, so this asks for the panel line by name. */ .emv-c-band--paper .emv-calc { border-color: var(--paper-line); } /* --------------------------------------------------------------------------- THE LEAD, IN TWO COLUMNS — the read on the left, the instrument on the right. The calculator used to run the full 1,056px measure *underneath* the paragraph explaining it: the largest object on the page, set below its own caption, so a reader met the explanation and the instrument one after the other instead of together. Jessie: "the first section should for sure be in two columns with the calculator only taking 50%." Exactly half, not a weighted split. The two halves are a read and a thing you operate, and neither is subordinate — an editorial 60/40 would say the calculator is an illustration of the story, when on a tax week it is the reason the story is on the page. `align-items: start` so the calculator hangs from the top of the story rather than stretching to its height, and the strip above spans both columns because the date and the status belong to the whole entry, not to the left half. THE MODIFIER IS ONLY PRESENT WHEN A TOOL IS. Most weeks the featured note is text alone, and on those weeks this rule does not exist and the block is the full-measure read it always was — the layout may never depend on a tool being attached. See emv_civic_featured_slot(). --------------------------------------------------------------------------- */ @media (min-width: 1081px) { .emv-c-feature__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; align-items: start; } .emv-c-feature__row > .emv-c-rail { grid-column: 1 / -1; } /* The 28px that separated the tool from the text below it is a gap between two stacked blocks. Side by side there is nothing above it to clear, and the margin would drop the calculator's head a line below the headline it sits beside. */ .emv-c-feature__row .emv-c-tool { margin-top: 0; } } /* THE RUNNING FEED once carried the page's only display-size section head — .emv-c-feed__title, with the eyebrow's gold-lead rule promoted above it, because set as a rail label it read as the tail of the featured slot rather than as a section anybody was meant to stop at. That was the right diagnosis applied to one section. Every head on the page is now that head (.emv-c-sechead), so the special case is gone and the feed is styled by the same component as the ledger below it. Nothing feed-specific remains. */ /* THE FEED SECTION IS NOT RENDERED. "Also worth knowing" was removed from /civic/ on 2026-08-17; emv_civic_feed_section() survives uncalled, so the two-across grid it used to set is left here — it is the only styling that component has, and deleting it would mean rebuilding the layout as well as the call site if the section ever comes back. Nothing on the page matches these selectors today. */ @media (min-width: 1081px) { .emv-c-feed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; } .emv-c-feed__grid .emv-c-entry { padding-bottom: 0; } } /* No responsive rule for .emv-c-figures here on purpose. The 760px and 360px blocks below already step it down to a smaller dd and then to one column, and measured at a real 390px layout viewport the longest key-figure value ("+$251/yr") still fits its 107px cell without overflowing. A second rule here would only lose to those and read as if it were doing something. */ /* =========================================================================== 8. Empty state =========================================================================== */ .emv-c-empty { padding: 36px 0 0; border-top: 1px solid var(--rule); } .emv-c-empty h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.016em; color: var(--ink); margin: -4px 0 12px; } .emv-c-empty p { font-family: var(--ui); font-size: 16.5px; line-height: 1.7; color: var(--slate); margin: 0 0 24px; } /* =========================================================================== 9. Motion — one staggered reveal, matching the home page's curve =========================================================================== */ @keyframes emv-c-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* The board's pip. A slow single ring — the page's one piece of continuous motion, on the one card that is about something that has not happened. */ @keyframes emv-c-ping { 0% { opacity: 0.85; transform: scale(0.85); } 70% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } } @media (prefers-reduced-motion: no-preference) { /* The index is a set of jumps within one document, so the jump should read as travel rather than teleportation — it is how a reader keeps their bearings on a page this long. Set on `html` because that is the element that scrolls; this stylesheet only ever loads on /civic/, so it cannot leak onto another page. Guarded, because for a reader who has asked for less motion a 12,000px smooth scroll is the worst thing on the site. */ html { scroll-behavior: smooth; } .emv-civic [data-rise] { opacity: 0; animation: emv-c-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); } /* The masthead arrives with the page rather than on scroll — it is already in view on load, so an intersection observer would never fire for it. Staggered top to bottom, in reading order: plate, standfirst, then the two docket cells left to right. Four steps at 70ms is a quarter of a second end to end, which is a settle rather than a performance. */ .emv-c-plate, .emv-c-head__deck, .emv-c-docket__lead, .emv-c-docket__record { opacity: 0; animation: emv-c-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .emv-c-head__deck { animation-delay: 70ms; } .emv-c-docket__lead { animation-delay: 140ms; } .emv-c-docket__record { animation-delay: 210ms; } .emv-c-kicker__pip::after { animation: emv-c-ping 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; } } /* =========================================================================== 10. Responsive — the bands lose their air, and then their gutter There is nothing here about the rail any more. The strip-above-the-entry layout that used to arrive at 760px is now the layout at every width, so the whole set of rules that folded the grid has gone; what is left only trims padding and type. And nothing here about panel insets or corner radii either — a band has no inset to trim and no corners to round off, so the two rules that used to run the panels down from 40px to 18px and from 20px of radius to none have simply gone. The gutter does that job on its own now, which is one token instead of three. =========================================================================== */ @media (max-width: 1080px) { /* No panel, no floor: below the split this is simply the last thing in the section, and it takes the same spacing any actions row would. */ .emv-agenda__foot { margin: 22px 0 0; padding: 0; border-top: 0; background: none; } /* THE LEDGER DOES NOT COLLAPSE HERE, AND THAT IS DELIBERATE. 1080 is where /civic/ gives up its second column, but the roster is not the split — at 1024 the four columns still measure 265 / 100 / 336 / 175 inside a 960px shell, which is more room than the longest name and the longest link pair need. Collapsing on the page's breakpoint rather than on its own would throw away a table that still fits and hand a 15px bar a 960px measure to run across. It gives up its gutters first instead, and its columns at 820 (see below), which is a width about this table. */ .emv-c-roster__head, .emv-c-member { gap: 0 22px; grid-template-columns: minmax(0, 1.35fr) 100px minmax(180px, 1fr); } /* The gutter closes before the columns do. 40px of air on each side of the column rule is right at 1,056px of panel and is simply lost measure once the lead's date has to wrap. */ .emv-c-docket { grid-template-columns: 1.2fr 1fr; } .emv-c-docket__lead { padding-right: 28px; } .emv-c-docket__record { padding-left: 28px; } /* Six entries measure 1,013px, which fits the shell down to about here and then starts losing "Your council" off the right. The strip scrolls, so nothing is lost — but an entry a reader cannot see on arrival is an entry they do not know exists, and this is the one component on the page whose whole job is telling them what is on it. Buying it back out of the horizontal padding costs nothing: the block padding is untouched, so the 44px target is untouched with it. */ .emv-c-index__link { padding-left: 12px; padding-right: 12px; } /* AND THE TIER MARKS COME OFF HERE, for the same reason and by the same arithmetic. Three 14px marks cost the strip 42px; the five entries and the marks measure 988px, and a 1024px window — an iPad in landscape — has 960px of shell. Keeping them would move the width at which the strip starts scrolling from 1024 up to 1080 and clip "How to be heard" by ten pixels on arrival, which is the exact failure the padding above this was written to prevent. Losing them costs less than it looks. The strip is a locator; the ladder is taught in the document by the folio rules and the sentence under each of them, at full width, and neither of those goes anywhere. Below 1081px the page is a single column and every section is met head-on rather than from beside — the same breakpoint the split collapses at. */ .emv-c-index__mark { display: none; } } /* Two cards hold their pairing much further down than three did — at 780px each one is still ~360px wide, so "Summarised from the recording — minutes pending" keeps to two lines. The stack waits for the 760px rule below. */ /* The site header grows a second, sideways-scrolling row of nav links here and stands at 138px. A second pinned strip under it would take 185px off an 844px screen, so the index stops pinning and becomes what it is on paper: a contents page at the top of the document. The button in the corner is how a reader gets back to it — see .emv-c-jump above. */ @media (max-width: 780px) { .emv-c-index { position: static; } /* Nothing is pinned any more, so an anchor only has to clear the header. */ .emv-civic { --emv-indexh: 0px; } /* Tighter sideways so more of the strip is readable before it scrolls, but the block padding holds the 44px target — this is the breakpoint where every tap is a thumb. */ .emv-c-index__link { padding: 15px 14px 14px; } } /* =========================================================================== THE ROSTER LIES DOWN — 820px Its own breakpoint, and the only rule in this file that has one. It is the width at which "Reach them" stops fitting on one line beside a name, which is a fact about this table and about nothing else on the page. The head strip goes when the columns do: a header for columns that no longer exist is four labels floating over a stack. What replaces it is already inside every row — .emv-c-member__lab stops being clipped and prints as the kicker over each figure, which is how a seat read on a phone before there was a table at all. Same markup, both ways. =========================================================================== */ @media (max-width: 820px) { .emv-c-roster__head { display: none; } .emv-c-member { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding: 18px 0 20px; } .emv-c-member__lab { position: static; display: block; width: auto; height: auto; margin: 0 0 5px; overflow: visible; clip: auto; clip-path: none; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } /* Term reads as one line down here — "TERM 2026–2029" — because stacking a caps label over four digits spends 20px of a phone on a fact that fits beside its own name. The record cannot do the same: its label sits over a bar, and a bar has to start at the left edge with the five below it. */ .emv-c-member__term:not(:empty) { display: flex; align-items: baseline; gap: 10px; margin-top: 13px; } .emv-c-member__term .emv-c-member__lab { margin: 0; } .emv-c-member__rec:not(:empty) { margin-top: 14px; } .emv-c-member__acts { margin-top: 15px; } /* THE TRACK KEEPS A CAP, IT JUST GETS A WIDER ONE. Letting it take the measure would draw a 15px bar across 700px of phone or tablet — a hairline, not a figure — and would quietly rescale the whole chart every time the viewport moved. A fixed ceiling keeps six lengths comparable at every width, which is the only reason the bars are worth drawing. */ .emv-c-rec__track { max-width: 420px; } /* The wash was spent by a 92px term column; in a stack, 34% lands in the middle of the name. */ .emv-c-member--chair { background: linear-gradient(90deg, rgba(237, 162, 60, 0.1), rgba(237, 162, 60, 0) 76%); } } @media (max-width: 760px) { .emv-civic { --gutter: 20px; --band: 44px; --row: 28px; } .emv-civic-main { padding: 0 0 4px; } /* --band steps down, so the tight band has to step with it or the sections that are a list rather than a read end up the roomiest on the page. */ .emv-c-band--tight { padding-top: 34px; padding-bottom: 34px; } .emv-c-band--colophon { padding-top: 0; padding-bottom: 44px; } /* The head's meta line is a single measure on a desktop. On a phone the note and the count have nowhere to be pushed to, so the spacer stands down and the three pieces sit on one line at their own size under the folio rule, wrapping if they must. */ .emv-c-sechead__rule { display: none; } .emv-c-sechead__meta { gap: 5px 12px; } .emv-c-sechead { margin-bottom: 24px; } /* With the spacer stood down, the state, the note and the count are three items flowing on one wrapped line and the state would end up beside the provenance it is not related to. It takes its own line under the numeral, where it opens the section the way it does at every other width. */ .emv-c-sechead__state { flex: 1 0 100%; } /* The key wraps to two or three lines on a phone. Tighter gaps so the swatch stays next to the word it belongs to rather than drifting to the far side of a stretched row. */ .emv-c-key { gap: 6px 16px; font-size: 12.5px; margin-bottom: 22px; } /* The strip is tighter on a phone, where it is competing with the entry below it for a screen that holds about six lines of text. */ .emv-c-rail { gap: 6px 12px; margin-bottom: 12px; } .emv-c-entry--split { padding-left: 14px; margin-left: -16px; } /* One cell per row, and the column rule lies down and becomes the rule between two stacked entries — which is what a ruled table does when it runs out of width. */ .emv-c-docket, .emv-c-docket--solo { grid-template-columns: minmax(0, 1fr); margin-top: 30px; } .emv-c-docket__lead { padding: 18px 0 0; } .emv-c-docket__record { padding: 20px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--nv-600); } /* The plate's standing line drops. At 390px "Civic ——— What the city did" leaves the rule about 30px of room, and a hairline that short reads as a dash between two labels rather than as a plate. The eyebrow is not lost: it is the deck's job on a phone, and the deck is directly beneath. */ .emv-c-plate__standing { display: none; } .emv-c-head__deck { margin-top: 20px; max-width: none; } /* The figure keeps its rule but loses the air around it — the lead is the tallest thing on the phone masthead and this is where the height is. */ .emv-c-docket__figure { margin-top: 18px; padding-top: 14px; gap: 12px; } .emv-c-docket__act { margin-top: 20px; } .emv-c-head__inner { padding-bottom: 36px; } .emv-c-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .emv-c-figures dd { font-size: 1.5rem; } /* The roster is already one column by here (see the 1080 block); on a phone it only wants the display sizes wound back a step so a long name does not set two lines of 21px serif inside a 320px measure. */ .emv-c-member__name { font-size: 19.5px; } .emv-c-member--chair .emv-c-member__name { font-size: 20.5px; } .emv-c-member__years { font-size: 15.5px; } .emv-c-actions .emv-btn { flex: 1 1 auto; } .emv-c-lede { font-size: 1.25rem; } .emv-c-feature__lede { font-size: 1.4rem; } .emv-c-sechead__title { font-size: 1.5rem; } .emv-c-title { font-size: 1.375rem; } /* The measure is a phone's now, so the step up that pays for a 1,056px line is not needed and costs words per line. */ .emv-c-intro, .emv-c-body { font-size: 16px; line-height: 1.7; } } /* THE 520px BREAKPOINT IS GONE. It existed to run the panels to the edges of the screen once their 18px inset cost more than the ground beside them was worth — a rule about panel edges, on a page that no longer has any. A band is already full bleed at every width, and its type keeps the 20px gutter down to 320px, which is where type should stop rather than where it should go flush to the glass. */ @media (max-width: 360px) { .emv-c-figures { grid-template-columns: minmax(0, 1fr); gap: 16px; } .emv-c-figures dd { font-size: 1.75rem; } } /* =========================================================================== 11. Print — a council record is a thing people take to a meeting =========================================================================== */ @media print { /* Both are navigation for a scrolling screen. On paper the contents page is a row of links that cannot be followed. */ .emv-c-index, .emv-c-jump { display: none; } /* MUCH LESS TO UNDO THAN THERE WAS. This block used to strip a background, a border, a radius and two drop shadows off every section, plus a warm ground painted over .emv-site with an !important. None of that exists on screen any more, so print inherits a document rather than converting one. What is left is the stock — a tinted band costs ink and a laser printer renders #fdf9f3 as a grey wash — and the vertical air, which is set for a scroll and is roughly a third of a sheet of A4 between sections. The folio rules survive and are the reason the sections stay findable. */ .emv-civic { background: #fff; } .emv-c-band { padding: 24px 0; background: none; border-top: 0; border-bottom: 0; } .emv-c-band > .emv-c-shell { max-width: none; padding-left: 0; padding-right: 0; } .emv-c-sechead { break-after: avoid; border-top-color: #000; } .emv-c-sechead__title { break-after: avoid; } .emv-c-sechead__num { color: #000; } /* THE LADDER SURVIVES THE PRINTER, and it is the reason the three marks are a pattern and a weight rather than three hues. On paper the gold goes to black and the dashes and the double rule carry the whole distinction by themselves — which is the same thing that makes them work for a reader who cannot tell gold from slate on screen. `print-color-adjust: exact` on the final head only: its double rule is painted as two backgrounds (see the note there) and a print stylesheet that drops backgrounds would drop the mark with it. Everything else on this page is content and may print as the browser prefers. */ .emv-c-sechead[data-tier="open"] { border-top-color: #000; } .emv-c-sechead[data-tier="draft"] { border-top-color: #000; } .emv-c-sechead[data-tier="final"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; background-image: linear-gradient(#000, #000), linear-gradient(#000, #000); } .emv-c-sechead__pip { background: #000; box-shadow: none; } .emv-c-sechead[data-tier="draft"] .emv-c-sechead__pip { background: transparent; box-shadow: inset 0 0 0 2px #000; } /* The key's swatches are the one graphic on the page whose colour IS the information, so they keep it — a monochrome legend for a monochrome graphic would say green, red and hatched all look alike. The seats in the entries below print in colour for the same reason; see .emv-c-seat. */ .emv-c-key, .emv-c-key .emv-c-seat { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* The split is a screen device: a column pinned beside another column is meaningless once the page stops scrolling. On paper the two levels flatten back into the run, in source order, which puts the posted agenda between the feed and "Just happened" — where it reads correctly, and where someone printing this to carry into the meeting expects it. The sidebar's cap and its scroll come off with it, or the paper comes out holding one screenful of a twenty-item agenda. */ .emv-c-split { display: block; max-width: none; padding: 0; } .emv-c-split > .emv-c-aside > .emv-c-shell { position: static; max-height: none; display: block; padding: 24px 0; background: none; border: 0; } .emv-c-split > .emv-c-aside > .emv-c-shell::after { display: none; } .emv-c-aside__scroll { overflow: visible; max-height: none; margin: 0; padding: 0; } /* Both grids are screen affordances too — a print column break is not worth the risk of an entry split across two sheets. */ .emv-c-feature__row, .emv-c-feed__grid { display: block; } .emv-c-head { background: #fff; border-bottom: 2px solid #000; } .emv-c-head::before, .emv-c-head::after { display: none; } .emv-c-head__deck { color: #000; } .emv-c-plate__name { color: #000; } .emv-c-plate__rule { background: #000; } .emv-c-plate__standing { color: #333; } /* On paper the docket is a table of the record's state. The rules survive and go to ink; the gold segment, the pip and the accent on the figure are screen affordances that cost colour for nothing — the figure keeps its size, which is what carries it. */ .emv-c-docket { border-top-color: #000; } .emv-c-docket__lead, .emv-c-docket__record { opacity: 1; animation: none; } .emv-c-docket__record { border-left-color: #999; } .emv-c-docket__lead::before, .emv-c-kicker__pip { display: none; } .emv-c-docket__date, .emv-c-docket__note, .emv-c-docket__n { color: #000; } .emv-c-docket__figure, .emv-c-docket__note { border-top-color: #999; } .emv-c-kicker, .emv-c-docket__meta, .emv-c-docket__unit, .emv-c-docket__flag { color: #333; } .emv-c-docket__act { display: none; } /* The one section that takes a box on paper: it is a pointer to somewhere else, and a rule around it is what stops it being read as another section of the record. On screen its navy does that job; ink cannot. */ .emv-c-band--navy > .emv-c-shell { border: 1px solid #000; padding: 22px 20px; } .emv-c-band--navy::before { display: none; } .emv-c-sechead__meta--onDark { border-top: 0; padding-top: 0; } .emv-c-sechead__meta--onDark .emv-c-sechead__count { color: #333; } /* The roster keeps its rules — they are what makes six names a table rather than a paragraph of names — and it keeps its columns, because a ledger is the one thing on this page that reads better on paper than on glass. */ .emv-c-member, .emv-c-roster__head { border-bottom-color: #999; } .emv-c-roster { border-top-color: #000; } .emv-c-member--chair { background: none; } /* The bars are the same case as the key's swatches: their colour IS the information, so they print in colour or they print as three grey lengths that all look alike. The hatch is a background too and goes with them. */ .emv-c-rec__seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .emv-c-member { break-inside: avoid; } .emv-c-handoff h2, .emv-c-handoff__body p, .emv-c-figures dt, .emv-c-figures dd { color: #000; } .emv-c-actions, .emv-c-handoff .emv-btn { display: none; } .emv-c-entry { break-inside: avoid; } .emv-civic [data-rise] { opacity: 1; animation: none; } /* The agenda is the single thing on this page most likely to be printed — it is what someone carries into the meeting to follow along. So the fold is forced open (a collapsed

prints as a one-line summary and the paper comes out blank), the summary chrome goes, and items are kept off page breaks. */ .emv-agenda .emv-c-fold > summary { display: none; } .emv-agenda .emv-c-fold > *:not(summary) { display: block !important; } .emv-agenda__group { break-inside: avoid; } .emv-agenda__item { break-inside: avoid; } .emv-agenda__section { color: #000; } .emv-agenda__kind, .emv-agenda__sessions { color: #333; } } /* --- How to be heard ------------------------------------------------------- The block that turns this page from a briefing into something a resident can act on. Set as a definition list on paper stock: it is reference material a reader comes back to, not prose they read once, and a
is what a list of "here is the question, here is the answer" actually is. -------------------------------------------------------------------------- */ .emv-voice__list { margin: 0; border-top: 1px solid var(--rule); } .emv-voice__row { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 6px 26px; align-items: baseline; padding: 15px 0 14px; border-bottom: 1px solid var(--rule); } .emv-voice__row dt { margin: 0; font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); } .emv-voice__row dd { margin: 0; font-family: var(--ui); font-size: 16px; line-height: 1.6; color: var(--ink); } /* The "not every item is a public hearing" line. Set apart on its own baseline because it is the correction to the assumption the row above creates, and run on it reads as more of the same rule rather than as a caveat to it. */ .emv-voice__caveat { display: block; margin-top: 7px; font-size: 14.5px; color: var(--slate); } .emv-voice__closing { margin: 18px 0 0; font-family: var(--ui); font-size: 15px; font-style: italic; color: var(--slate); } @media (max-width: 640px) { .emv-voice__row { grid-template-columns: 1fr; gap: 3px; } } /* --- What an agenda item is worth to you ----------------------------------- Two marks under an item, and they answer different questions. "You can speak on this one" is derived from the city's own agenda and says what a resident can DO; the meaning line is Colten's and says what the item IS. Both sit under the title rather than beside it — the column is narrow, and a second thing on the same line turns every item into two lines of ragged type. -------------------------------------------------------------------------- */ .emv-agenda__meaning { display: block; margin-top: 5px; } /* The action, in the page's action colour, and an anchor rather than a badge because it goes somewhere: the standing "How to be heard" block, which owns the one copy of the three-minute rule. */ .emv-agenda__speak { display: inline-block; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--gold-800); border-bottom: 1px solid var(--gold-500); transition: color 160ms ease, border-color 160ms ease; } .emv-agenda__speak:hover { color: var(--ink); border-bottom-color: var(--ink); } .emv-agenda__impact { display: block; margin-top: 5px; font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--slate); } .emv-agenda__impact b { color: var(--ink); font-weight: 700; } /* "Most residents: no change" is set quieter than the rest, on purpose. It is the most trusted sentence on the page precisely because it is not selling anything, and a reader scanning for what matters should be able to skip it. */ .emv-agenda__impact--none, .emv-agenda__impact--none b { color: var(--slate); font-weight: 600; } .emv-agenda__introlink { color: var(--gold-800); border-bottom: 1px solid var(--gold-500); } /* --- We covered this ------------------------------------------------------- The one on-site destination in a brief that otherwise ends in a link to the raw record. Set ahead of that link and in the page's action colour, because the ratio was the finding: twenty ways off this page and none back into six months of our own writing about the same decisions. -------------------------------------------------------------------------- */ .emv-c-covered { display: inline-block; margin-right: 18px; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--gold-800); border-bottom: 1px solid var(--gold-500); transition: color 160ms ease, border-color 160ms ease; } .emv-c-covered:hover { color: var(--ink); border-bottom-color: var(--ink); } /* The section it lands in, said quietly beside the date — a jump several thousand pixels into a page the reader has never opened should name where it is going before they take it. */ .emv-c-covered__where { font-weight: 500; color: var(--slate); } .emv-c-covered:hover .emv-c-covered__where { color: var(--ink); } /* A glossed term. Dotted underline is the long-standing convention for "there is a definition attached to this", and it is quiet enough to sit inside an agenda item without turning the list into a field of links. cursor: help because it is not a link and must not pretend to be one. */ .emv-gloss { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--slate); cursor: help; } /* --- A pending meeting the council has since undone ------------------------- Section 03 promises its summaries are "accurate enough to act on". When a vote in it has been reversed, saying so has to be the loudest thing in the entry — louder than the motion, which is why this sits above the fold rather than in the caveat below it, and why it carries the warm rule the tier system already uses for "still moving" rather than the neutral hairline. The entry is not removed: it happened, and the certainty model is an argument that we show our working, including the parts time has overtaken. -------------------------------------------------------------------------- */ .emv-c-superseded { font-family: var(--ui); font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0 0 22px; padding: 14px 16px; border-left: 3px solid var(--gold-800); background: var(--mist-50); text-wrap: pretty; } .emv-c-superseded strong { font-weight: 700; } .emv-c-superseded a { color: var(--gold-800); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .emv-c-superseded a:hover { text-decoration-thickness: 2px; } /* The one chip on this page that is filled rather than outlined. Every other chip names a category — a tier, a certainty state — and reads at the same weight as its neighbours on purpose. This one names a change, sits beside "Minutes pending" rather than replacing it, and has to win that adjacency. */ .emv-chip--warm { color: var(--paper, #fff); background: var(--gold-800); border-color: var(--gold-800); } /* ---------------------------------------------------------------------------- THE TOOLS TILES — .emv-c-tiles ---------------------------------------------------------------------------- Destinations, so they are pressable objects rather than a list of links. Ruled rather than boxed, in the same key as the roster and the docket: a hair rule around each, a heavy one on top when hovered, and no shadow anywhere — nothing on this page floats. -------------------------------------------------------------------------- */ /* THE POINTER THAT REPLACES A SECOND CALCULATOR. On a week when the featured lead already carries the estimator, this section prints one line saying so instead of a duplicate of a 660px instrument. Set as a line of reading at the section's own measure, not as a button: it is a cross-reference in a document, and the thing it points at is 2,000px up the same page. */ .emv-c-tools__echo { margin: 22px 0 0; font-family: var(--ui); font-size: 15.5px; line-height: 1.68; color: var(--slate); text-wrap: pretty; } .emv-c-tools__echo a { color: var(--gold-800); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .emv-c-tools__echo a:hover { color: var(--ink); } /* THE ARROW MAY NOT ORPHAN. The sheet's padding took 16px off the measure and "Agendas, packets and meeting video" started breaking with the offsite arrow alone on the second line — the /directory/ lesson about a glyph hung off a link, in a title rather than in body copy. Balanced, the title breaks between two words and the arrow stays on the line it belongs to. */ .emv-c-tile__title { text-wrap: balance; } .emv-c-tiles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .emv-c-tile__link { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 20px 20px 22px; border: 1px solid var(--rule); border-top: 3px solid var(--rule-heavy); background: var(--paper, #fbf4ec); transition: border-color 160ms ease; } .emv-c-tile__link:hover { border-top-color: var(--gold-500, #eda23c); } .emv-c-tile__title { font-family: var(--ui); font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); } .emv-c-tile__text { font-family: var(--ui); font-size: 13.5px; line-height: 1.55; color: var(--slate); } @media (max-width: 860px) { .emv-c-tiles { grid-template-columns: minmax(0, 1fr); } } /* The routine-items collapse line. C7 shows three items and says how many it is not showing; this is that sentence. Set as a note rather than as an item so it cannot be mistaken for a fourth agenda entry. */ .emv-agenda__rest { margin: 18px 0 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.55; color: var(--slate); } /* =========================================================================== THE SEARCH — "ask the record" (Stage 3) --------------------------------------------------------------------------- A BOX YOU TYPE A QUESTION INTO NOW MEANS ONE THING TO EVERYBODY, and this one is not that thing. It retrieves; it does not answer. Everything in this block is drawn to keep that distinction visible, because the control's shape makes a promise the machinery behind it deliberately does not keep. Three decisions carry it: 1. THE FIELD IS A FIELD, NOT A COMPOSER. One line, a magnifier, a Search button beside it — the search control this site already uses on /directory/. No avatar, no send arrow, no rounded speech capsule, no blinking caret animation. The vocabulary of a chat client would say "something is about to write you an answer" in a language no caption can argue with afterwards. 2. WHAT IT SEARCHED FOR IS PRINTED ABOVE WHAT IT FOUND (.emv-a-readback, .emv-a-note). A retrieval search fails by returning the wrong thing in exactly the format of the right thing, and the reader's only defence is seeing the query it actually ran. Under the results it would be a footnote; above them it is the caption on the evidence. 3. THE ARCHIVE BAND IS DRAWN AS A DIFFERENT KIND OF THING, not as more results. 59% of the corpus is pre-2024 scanned minutes with no summary and no per-member votes. Interleaved, BM25 noise decides which certainty tier a resident meets first, on a page whose entire argument is a certainty ladder. Nothing here invents an atom. The rows are .emv-c-row, the marks are .emv-c-seat, the chips and buttons are the site's, and the three tier patterns are the ones the section folios and the contents strip already draw — at card scale, which is a new place to put them and not a new mark. =========================================================================== */ /* -- The band ------------------------------------------------------------ */ /* The lead sits on newsprint with the featured note under it, and the two run as one piece of stock — .emv-c-band--paper's adjacent rule already drops the seam. That is right here: the search and the week's lead are the two things on this page a reader is meant to stop at, and the record they consult starts below both of them, on white. */ .emv-a-band .emv-c-sechead { margin-bottom: 22px; } /* -- The field ------------------------------------------------------------ */ .emv-a-form { display: flex; align-items: stretch; gap: 12px; margin: 0; } /* WHITE ON THE NEWSPRINT, and it is the only white object in a paper band. An input filled with --paper on a --paper ground is an outline drawn round nothing; the reason a field reads as writable is that it looks cut into the surface. It also buys the placeholder its contrast back: --slate on white is 4.63, on this stock 4.82, and the placeholder is a step lighter again. */ .emv-a-form__field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--paper-line); /* Square. The page has one radius, on .emv-btn, and it is 8px; a pill here would be the chat capsule this control is not. */ border-radius: 4px; transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } /* TWO MARKS ON FOCUS, and the second one is the point. The page-wide :focus-visible ring is gold-500 — 2.1:1 on white, which is a decoration rather than an indicator on the one control this page is built around. The ink border is what actually carries the state; the gold ring is the family resemblance to every other focus on the site. */ .emv-a-form__field:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .emv-a-form__icon { flex: none; display: flex; align-items: center; padding-left: 14px; color: var(--slate); } .emv-a-form__input { flex: 1 1 auto; min-width: 0; padding: 15px 12px; font-family: var(--ui); font-size: 16.5px; line-height: 1.4; color: var(--ink); background: transparent; border: 0; /* 16px+ or iOS zooms the whole page on focus, which on a sticky-heavy layout leaves the reader somewhere they did not ask to be. */ } .emv-a-form__input:focus { outline: 0; } /* The field draws the focus state for the whole control, so the input inside it must not draw a second ring 1px away from the first. */ .emv-a-form__input:focus-visible { outline: 0; } .emv-a-form__input::placeholder { color: var(--slate); opacity: 1; } /* Safari paints its own clear affordance on type=search, which would sit beside ours and do something subtly different — it empties the field and leaves the results standing. */ .emv-a-form__input::-webkit-search-decoration, .emv-a-form__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* A LINK, NOT A BUTTON — see the note in inc/civic-answer.php. Clearing this search is a navigation, and drawing it as a control that only empties the box would leave the answer to a deleted question sitting underneath it. */ .emv-a-form__clear { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; align-self: stretch; margin-right: 4px; font-size: 20px; line-height: 1; color: var(--slate); text-decoration: none; border-radius: 4px; } .emv-a-form__clear:hover { color: var(--ink); } .emv-a-form__go { flex: none; } /* -- The promise --------------------------------------------------------- */ /* LOAD-BEARING COPY, SET AS COPY. /about/ai/ says this site does not publish generated prose about the city, "no exceptions" — and a question box is the most recognisable promise of generated prose there is. This sentence is the only thing that closes that gap, so it sits directly under the field where the promise is made, not in the colophon where a reader meets it after they have already believed something. */ .emv-a-form__pledge { margin: 14px 0 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.6; color: var(--slate); text-wrap: pretty; } .emv-a-form__pledge a { color: var(--gold-800); } .emv-a-form__pledge a:hover { color: var(--ink); } /* -- The example questions ------------------------------------------------ */ /* NOT DECORATION. The corpus speaks a city clerk's vocabulary: a resident asks about their water bill and the record says "water and sewer rate changes". An empty box over that vocabulary reads as broken on the first miss, and these five are the cheapest way to show both what to type and that the search has a member dimension at all. Each was run against the live corpus and returns a first result that answers it. */ .emv-a-eg { margin-top: 22px; } .emv-a-eg__lab { margin: 0 0 10px; font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); } .emv-a-eg__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } /* Bordered, not filled. A filled pill is a chosen state, and none of these is chosen — they are five things you may do. */ .emv-a-eg__link { display: inline-block; padding: 7px 13px; font-family: var(--ui); font-size: 13.5px; line-height: 1.4; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; } .emv-a-eg__link:hover { border-color: var(--ink); background: #fff; } /* -- What was searched for ------------------------------------------------ */ /* THE READ-BACK. The question typed and the query run are different objects — stop words dropped, question words pruned once the intent is known, a surname lifted out of the text entirely and turned into a filter on the structured vote array. When an answer is wrong, this strip is the only thing on the page that shows why, and it costs one line. */ .emv-a-readback { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 20px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .emv-a-readback > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .emv-a-readback dt { flex: none; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); } .emv-a-readback dd { margin: 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.5; color: var(--ink); } /* -- What could not be found --------------------------------------------- */ /* ABOVE THE RESULTS, ALWAYS. This is the block that stops "how did Burnham vote on short term rentals" from printing "Outdoor watering banned — Donna Burnham voted Yes" as though it were an answer. Every fact on that card is true; the card is a lie, and this paragraph is the only thing that says so. A reader who has to scroll past the results to reach the caveat has already believed the results. */ .emv-a-note { margin: 0 0 20px; padding: 14px 16px; font-family: var(--ui); font-size: 14px; line-height: 1.62; color: var(--ink); background: var(--mist-50); border-left: 3px solid var(--slate); text-wrap: pretty; } /* The gold left rule is this page's act-now accent and it is the right one here: unlike everything else in the block, this note is a thing the reader has to do something about — change the question. --gold-800 rather than --gold-500 because a 3px rule carrying meaning owes 3:1, and #eda23c is 2.1 on this ground where #a0601f is 5.0. */ .emv-a-note--hard { background: #fdf6ec; border-left-color: var(--gold-800); } .emv-a-note strong { font-weight: 700; } .emv-a-note a { color: var(--gold-800); } .emv-a-note a:hover { color: var(--ink); } /* -- One result ----------------------------------------------------------- */ /* The page's own row — rail strip on top, then the words — separated by the band's hairline. Nothing here is a card: /civic/ says "Rules, not shadows" in three places and results are the last thing that should start arguing with that, being the part of the page a reader trusts least. */ .emv-a-hit { padding: 22px 0; border-top: 1px solid var(--rule); } .emv-a-hit:first-of-type { border-top: 0; padding-top: 4px; } .emv-a-hit .emv-c-lede a { color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 var(--mist-200); } .emv-a-hit .emv-c-lede a:hover { box-shadow: inset 0 -2px 0 var(--gold-500); } .emv-a-hit .emv-c-lede svg { margin-left: 5px; color: var(--slate); vertical-align: baseline; } /* The fallback is the sheet, not 74ch. A blurb printed OUTSIDE #emv-worth — which is every answer card the search returns — took the literal and stopped 705px into a 1,038px panel, so the one view a reader reaches by typing a question was the last place on the site still setting a narrow column inside a wide box. */ .emv-a-blurb { margin: 10px 0 0; max-width: var(--blurb, 100%); font-family: var(--ui); font-size: 15.5px; line-height: 1.68; color: var(--ink); text-wrap: pretty; } .emv-a-hit__more { margin: 12px 0 0; } .emv-a-hit__more a { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: var(--gold-800); } .emv-a-hit__more a:hover { color: var(--ink); } .emv-a-hit__more svg { margin-left: 4px; vertical-align: -1px; } /* THE VOTE READ-OUT. Read out of the structured `votes` array by member_id, never out of the motion text — which names everyone present in seventy per cent of rows and would let a member who abstained read as one who voted aye. The seat mark is .emv-c-seat at the key's own size, so the hatched block here means exactly what the hatched block in HOW TO READ A VOTE means. The sentence beside it carries the whole fact on its own, so the mark is aria-hidden and nothing is lost with images off. */ .emv-a-votes { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } /* `flex-start`, not `center`. "Melissa Clark was excused from this vote." wraps to two lines in the split's column, and centred the mark then floats between them pointing at nothing. It belongs against the first line, which is where the name is. */ .emv-a-votes li { display: flex; align-items: flex-start; gap: 9px; font-family: var(--ui); font-size: 14.5px; line-height: 1.5; color: var(--ink); } .emv-a-votes .emv-c-seat { width: 11px; height: 15px; flex: none; /* Optically centred on the cap height of the 14.5px line above it rather than on the line box, which sits the mark 2px high. */ margin-top: 3px; } /* -- The older record ----------------------------------------------------- */ /* A DIFFERENT KIND OF THING, DRAWN AS ONE. These are the 665 pre-2024 motions with no summary, no impact line and no per-member votes — the thin side of the record's 2024 cliff. They are not hidden and they are not worthless; they are offered as what they are, underneath, counted and labelled, rather than interleaved as though they answered to the same standard. Inset on the mist ground so the boundary is a change of stock, which is the device this page already uses to mean "a different department". */ .emv-a-archive { margin-top: 34px; padding: 24px 24px 6px; background: var(--mist-50); border-top: 2px solid var(--rule-heavy); } .emv-a-archive__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ink); } .emv-a-archive__count { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); } .emv-a-archive__intro { margin: 0 0 4px; font-family: var(--ui); font-size: 14px; line-height: 1.62; color: var(--slate); text-wrap: pretty; } /* The band inside the inset re-points its own hairline, so the rows in here separate against the mist rather than against white. */ .emv-a-archive .emv-a-hit { border-top-color: var(--mist-200); } /* -- The empty and the overflow ------------------------------------------ */ /* "No results" is a statement about this search, never about the council, and the copy says so in as many words. Set as a paragraph of reading rather than as an error state: nothing went wrong, the record simply does not contain the words asked for. */ .emv-a-empty { margin: 0; font-family: var(--ui); font-size: 15.5px; line-height: 1.68; color: var(--ink); text-wrap: pretty; } .emv-a-empty strong { display: block; margin-bottom: 4px; font-size: 1.05em; } .emv-a-empty a { color: var(--gold-800); } .emv-a-empty a:hover { color: var(--ink); } .emv-a-empty svg { margin-left: 3px; vertical-align: -1px; } .emv-a-more { margin: 20px 0 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.6; color: var(--slate); } .emv-a-more a { color: var(--gold-800); } .emv-a-more a:hover { color: var(--ink); } .emv-a-more svg { margin-left: 3px; vertical-align: -1px; } .emv-a-back { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--ui); font-size: 13.5px; } .emv-a-back a { color: var(--gold-800); font-weight: 600; } .emv-a-back a:hover { color: var(--ink); } /* -- The highlights ------------------------------------------------------- */ /* THE TIER MOVES ONTO THE CARD, and this is the whole reason the section is allowed to exist. It replaces the full run of "Just happened — unofficial", which was a tier of the certainty ladder with its own head, its own rule and its own state line. Three highlights drawn from two tiers and printed identically would quietly undo that — an unofficial account of last Tuesday and a certified motion from July rendered alike is the exact fault the ladder was built to fix. So the section head carries no tier and each card carries its own, in the two patterns the folios and the contents strip already draw. Same marks, one level further down, which is where they belong once the material is mixed. Painted rather than bordered for the same reason the folio is: `border-top: Npx double` divides its width by an engine-defined rule and comes out a fuzzy thick line. */ /* EVERY PART OF A CARD SHARES ONE MEASURE, and this is where it is declared. The blurb was capped for reading and the caveat under it was not, so the caveat's rule and its line ran the band's full 1,056px while the paragraph they belong to stopped 334px short — a rule pointing at nothing for a third of its length, three times down the section. Inside the split's column the two agreed by accident, because 74ch is wider than that column; on a week with no posted agenda there is no column, and the disagreement is the first thing the section shows. */ /* THE MEASURE IS DECLARED ON THE SECTION, NOT ON THE CARD, because the head shares it now. The standfirst under "Lately at the council" was running the band's full width at 17px while every paragraph below it stopped at 45rem — four lines of instructions set wider and looser than the three decisions they are instructions for. It is the same cap, so it is the same token, and it is stated once. AND THE CAP IS NOW 100%, 2026-09-16. Everything the paragraph above argues for still holds — head, headline, blurb, caveat, link and tier mark share ONE measure, stated in one place — but the value is the sheet's width instead of 45rem. At 45rem the section printed a 720px column of text inside a 1,038px panel, so the entry rules and the tier marks, which correctly agree with the measure, stopped short of the sheet's edge together and the whole section read as a narrow column pinned inside a wide box. That is the fault this token was invented to prevent, arriving from the other side. See "THE MEASURE" in style.css. */ #emv-worth { --blurb: 100%; } /* The head is a standfirst, so it reads at a standfirst's size — and it is the only thing in this section that is not news, so it does not get to be the loudest paragraph in it. */ #emv-worth > .emv-c-shell > .emv-c-sechead .emv-c-intro { max-width: var(--blurb); font-size: 15.5px; line-height: 1.7; } .emv-a-worth { border-top: 0; /* THE RULE HAS TO CAP THE CARD, NOT DIVIDE TWO OF THEM. With 20px under it and the previous card's last link about the same distance above, a full-width double rule between two entries is a separator — it belongs to the gap, and a reader has no way to know the mark is a property of the entry BELOW it. That is fatal for this particular rule, because the whole point of it is that it says what the entry under it is worth. So the space is split unevenly and decisively: 34px above, 14px below. The mark now sits with the thing it marks. */ margin-top: 34px; padding-top: 14px; /* IN REM, NOT CH, BECAUSE FOUR DIFFERENT TYPE SIZES SHARE IT. `ch` is resolved against the element that uses the value, so the blurb's 74ch at 15.5px (722px) came out as 605px on the 13px caveat below it — the cap agreed with the paragraph in name and disagreed with it by 117px on the page, which is how the caveat came to wrap where it never had. The value itself is on #emv-worth above; this is the fallback for a card printed outside it, and it matches — the card measures whatever it is put in. */ --blurb: 100%; } /* The first card opens directly under the standfirst, which already carries the head's own bottom margin. */ .emv-a-worth:first-of-type { margin-top: 6px; } /* The rule belongs to the paragraph it separates, so it stops where that paragraph stops. Only inside a card — the featured lead's caveat sits under a full-width read and correctly runs the full width with it. */ .emv-a-worth .emv-c-caveat, .emv-a-worth .emv-a-hit__more { max-width: var(--blurb); } .emv-a-worth[data-tier] { border-top: 5px solid transparent; background-repeat: no-repeat; background-origin: border-box; background-clip: border-box; } /* AND THE MARK STOPS WHERE THE CARD STOPS. `100%` is the article, which is the band — 1,056px on a week with no posted agenda, where every line under the mark caps at 45rem. That is the caveat's old fault exactly: a rule running a third of its length past the thing it belongs to, three times down the section, and invisible inside the split because there the column is narrower than the measure. min() keeps it honest at both widths. */ .emv-a-worth[data-tier] { --mark: min(100%, var(--blurb)); } /* A line not yet inked in — 3px on, 2px off, the contents strip's own figure. */ .emv-a-worth[data-tier="draft"] { background-image: repeating-linear-gradient(90deg, var(--tier-draft) 0 3px, transparent 3px 5px); background-size: var(--mark) 2px; background-position: 0 0; } /* Heavy over light — what a ledger rules under a settled figure. 2px over 1px rather than the folio's 3 over 1: this opens a card, not a department. */ .emv-a-worth[data-tier="final"] { background-image: linear-gradient(var(--tier-final), var(--tier-final)), linear-gradient(var(--tier-final), var(--tier-final)); background-size: var(--mark) 2px, var(--mark) 1px; background-position: 0 0, 0 4px; } /* Each tier re-points --tier, exactly as the section heads at .emv-c-sechead[data-tier] do, and the state label below is the only thing that reads it. */ .emv-a-worth[data-tier="draft"] { --tier: var(--tier-draft); } .emv-a-worth[data-tier="final"] { --tier: var(--tier-final); } /* Same job one column over: the posted agenda's entry head reads --tier for its state word, and the only thing carrying the tier over there is the