/* CAMRO's own stylesheet. Tokens live in site.config.json (design.desktop); this is the rest. */ /* ── Minute Book chrome — ported from the Essentials CAMRO stylesheet ── */ body{-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em} /* masthead: paper, one row, double rule */ .site-header{background:#F5F8F4;border-bottom:3px double #0B4F3A} .site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.15rem;padding-bottom:1.15rem} .site-logo{width:200px;height:auto} .site-title--lockup .site-title-lock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} nav.nav-top a[aria-current=page]{text-decoration:underline;text-underline-offset:5px} /* footer: navy register with link columns */ .site-footer-inner{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2rem} @media(max-width:64rem){.site-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:46rem){.site-footer-inner{grid-template-columns:1fr}} .footer-col{display:flex;flex-direction:column;gap:.55rem;font-size:.94rem} .footer-col a{color:#93C7AE;text-decoration:none} .footer-col a:hover{text-decoration:underline} .footer-col-heading{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:.2rem} .footer-name--lockup{background:url(/assets/images/camro-logo-reverse.png) no-repeat left top;background-size:230px auto;min-height:70px;margin:0 0 .4rem} .footer-name--lockup .site-title-lock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .footer-colophon{border-top:1px solid rgba(255,255,255,.15);padding-top:1.1rem;margin-top:.6rem;font-size:.85rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .footer-legal a{color:#93C7AE;margin-left:1.25rem} /* documentary tables: ruled rows, no boxes */ main table{border-collapse:collapse;width:100%} main th,main td{border:0;border-bottom:1px solid #C9DCD0;padding:.6rem .75rem .6rem 0;text-align:left} main th{font-family:'Instrument Sans',system-ui,sans-serif;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#5E7268} .p-hero__eyebrow,.p-doors__links{font-family:'Instrument Sans',system-ui,sans-serif;} /* one-row masthead: nav right, tighter gaps like the register head */ nav.nav-top{margin-left:auto} nav.nav-top > ul{justify-content:flex-end;gap:.9rem 1.1rem;font-size:.92rem} /* full-bleed navy band, content held to the page column */ .p-hero--navy{box-shadow:0 0 0 100vmax #0B4F3A;clip-path:inset(0 -100vmax)} .p-hero__stats{padding-left:0;list-style:none} nav.nav-top .nav-search{display:none} /* interior page opening: full-bleed mist register band, h1 + lede */ .breadcrumb{display:none} .page-band{background:#DCEAE0;box-shadow:0 0 0 100vmax #DCEAE0;clip-path:inset(0 -100vmax);margin:0 0 var(--space-m);padding:clamp(2.25rem,4.5vw,3.5rem) 0} .page-band h1{margin:0} .page-band-lede{font-size:1.15rem;color:#5E7268;max-width:38em;margin:.85rem 0 0} /* register alignment: text sits at the column left, as in the minute book */ .page .page-body > *{margin-inline:0} /* ── Direction C bridge: the old stylesheet's variables, mapped to the engine's tokens so Site design still drives every colour ── */ :root{--accent:var(--color-primary);--gold:var(--color-accent);--paper:var(--color-bg); --ink:var(--color-text);--deep:var(--color-primary);--muted:#5E7268;--mist:#DCEAE0; --rule:#C9DCD0;--onDark:#C3DACB;--accentSoft:#93C7AE;--w:var(--content-width); --pad:var(--gutter)} /* the artboards' .wrap centres to the same column the page already provides */ .page-body .wrap{max-width:var(--content-width);margin-inline:auto;padding-inline:0} /* bands and the canvas hero run edge to edge; their content stays in column */ /* The band bleed moved out of here on 2026-09-01. It lived in this file as `margin-inline: calc(50% - 50vw)` with a matching padding — the element pulled out to the viewport and its content pushed back — which is the wrong mechanism in the wrong file: the rules that PAINT a band live in patterns/minute-book (.band-mist, .band-navy) and patterns/register-shapes (.c-hero), and a ground should be spread by whatever paints it. Those now carry `box-shadow: 0 0 0 100vmax` with a matching clip-path — the same idiom as .p-hero--navy and .page-band below, and as the engine's .blk[data-bg]. Two declarations that undo each other also have to AGREE about the viewport width, and they cannot: `vw` counts the scrollbar and the viewport does not, so every band came out one scrollbar too wide. THE BARE `.band` GETS NOTHING IN RETURN: it declares padding and no colour, so it was dragged out and pushed back for no visible result. Measured on live before removing it — band content and ordinary page content both land at 56.5px — so this is a no-op deleted, not an alignment fixed. `html{overflow-x:clip}` BELOW STAYS, and here is the criterion for removing it, recorded so the next person does not have to re-derive it. Measured 2026-09-01 with BOTH the html and body clips removed, on /, /about/, /membership/, /for-clerks/ and /events/: zero horizontal scroll, scrollWidth == clientWidth == 1265, widest element right edge 1265. So on those five nothing overshoots any more and the clip is doing no work. IT STAYS ANYWAY, because five pages is a sample and this site has ~37. The remaining risk is not in these rules — it is content-level: one wide table or one oversized image on a page nobody opened. Removing a safety net on a sample is how the earlier "the html clip is containing it" mistake was made, from the other direction. REMOVE IT when a sweep across every page shows no overshoot with both clips off — not before. If anything does overshoot, the clip stays and this note says which page needs it. */ .page-body .c-sec .wrap{padding-inline:0} /* ── full-bleed unclip (2026-08-26) ────────────────────────────────────── The engine boxes one-off html blocks with overflow-x:auto (core.css) so a stray fixed width cannot push the page sideways. Every page of this site IS a designed html block with full-viewport bands, so that guard clipped every band to the content column and drew a horizontal scrollbar inside each block. Unclip the blocks; enforce the same no-sideways promise at the page level instead, which the 50vw band math needs anyway on browsers with classic scrollbars. */ .page-body .block-html{overflow-x:visible} html{overflow-x:clip} /* the opening band sits flush under the masthead's double rule, as the original design had it: counter main's top padding + the block gap */ article.page-full{margin-top:-1.5rem} .page-full .page-body > .block-html:first-child{margin-top:0} /* the mobile Menu button sits on paper, not navy - ink it */ .nav-mobile-toggle{color:#0B4F3A;border-color:#0B4F3A} /* ── CAMRO block dress (Minute Book) — generated by design-camro-blocks/_port.py ── */ /* ───────────────────────────────────────────────────────────────────────── THE CAMRO BLOCK DRESS — "Minute Book", applied to every page block. Written against the ENGINE'S OWN CLASS NAMES on purpose, so this file is both the drawing and the port: it drops into sites/camro/site.config.json under design.custom_css and every block on association-demo.com wears it. The promise it keeps: a client opens the block picker, drops a block on a page, types their words, and it already looks like the site. Nothing to style, no options to get wrong. FOUR DEVICES, and every block is made of them: 1. The register head a block's own heading — Public Sans, small, tracked capitals, over a 2px navy rule that runs the width of the block. This is what a minute book does at the top of a column, and it is the single move that makes fourteen unrelated blocks read as one set. 2. The hairline row #C9DCD0 between entries. No boxes, no cards, no shadows: the rule separates, the paper stays paper. 3. The top-rule entry a "card" is a 2px --rule over its content, not a box round it. (design-camro-c already does this for .card under body[data-rules=double]; blocks simply join in.) 4. The gold square every marker, dot, bullet and current-state mark is a small gold SQUARE. The site's radius is 0; a round dot is the one shape that would give it away. Deliberately absent: rounded corners, drop shadows, coloured left borders (the house rule bans them), hover lift on anything that is not a link. ───────────────────────────────────────────────────────────────────────── */ /* ── shared: the register head ─────────────────────────────────────────── */ .pairs-label, .docs-label, .people-label, .slider-label, .timeline-label, .attachments-title, .recording__title, .finder-rail-title { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5E7268; border-top: 2px solid #0B4F3A; padding-top: .55rem; margin: 0 0 1.1rem; } /* Small print — counts, sizes, dates, roles, formats. One voice for all of it, so the eye learns to skip it. Tabular figures because a column of sizes and timecodes that does not line up looks like a fault. */ .doc-meta, .att-format, .att-note, .citem-date, .citem-meta, .person-role, .finder-count, .finder-showing, .recording__t, .gallery-item figcaption, .slide figcaption { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .78rem; letter-spacing: .04em; color: #5E7268; font-variant-numeric: tabular-nums; } /* ── Text ──────────────────────────────────────────────────────────────── */ /* The reading column is the site's measure; the site already sets it. All this adds is the heading rhythm — a heading is a section marker, so it gets air above it and sits close to the words it names. */ .b-text__inner h2 { margin-top: 2.4rem; } .b-text__inner h2 + p { margin-top: .55rem; } .b-text__inner h3 { margin-top: 1.9rem; } .b-text__inner > :first-child { margin-top: 0; } .b-text__inner a { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; text-decoration-color: #B01D42; } .b-text__inner blockquote { margin: 1.6rem 0; padding: 0 0 0 1.4rem; border-left: 0; /* the accent rail is banned here */ border-top: 2px solid #C9DCD0; padding-top: 1rem; font-size: 1.1rem; color: #12231C; } /* ── Image columns (the picture block) ─────────────────────────────────── */ .p-media-text figure, figure.picture { margin: 0; } .p-media-text img, figure.picture img { display: block; width: 100%; height: auto; } .p-media-text figcaption, figure.picture figcaption { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .78rem; color: #5E7268; letter-spacing: .04em; border-top: 1px solid #C9DCD0; padding-top: .5rem; margin-top: .55rem; } /* ── Accordion ─────────────────────────────────────────────────────────── */ /* No boxes. A run of ruled rows; the open one is marked by a navy rule at its head rather than by a fill, so an open panel still reads as part of the same register. */ .accordion { border-bottom: 1px solid #C9DCD0; } .accordion-item { border-top: 1px solid #C9DCD0; border-bottom: 0; } .accordion-item[open] { border-top: 2px solid #0B4F3A; } .accordion-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: .95rem 0; cursor: pointer; font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: 1.12rem; font-weight: 500; color: #0B4F3A; list-style: none; } .accordion-label::-webkit-details-marker { display: none; } .accordion-label::after { content: ""; flex: none; width: .62rem; height: .62rem; border-right: 2px solid #B01D42; border-bottom: 2px solid #B01D42; transform: rotate(45deg) translateY(-.18rem); transition: transform .18s ease; } .accordion-item[open] > .accordion-label::after { transform: rotate(225deg) translateY(-.1rem); } .accordion-label:hover { color: #B01D42; } .accordion-body { padding: 0 0 1.35rem; max-width: 42em; } @media (prefers-reduced-motion: reduce) { .accordion-label::after { transition: none; } } /* ── Attachments ───────────────────────────────────────────────────────── */ .att-item { border-top: 1px solid #C9DCD0; } .att-item:last-child { border-bottom: 1px solid #C9DCD0; } .att-inner { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; text-decoration: none; color: #0B4F3A; } a.att-inner:hover .att-label { text-decoration: underline; text-underline-offset: .16em; color: #B01D42; } .att-label { font-size: 1.02rem; } /* The format is real text, set as a register mark: navy hairline box, no fill, so a list of thirty scans does not turn into thirty navy chips. */ .att-format { flex: none; order: -1; min-width: 3.6rem; border: 1px solid #C4D6CB; padding: .1rem .4rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-align: center; color: #0B4F3A; } .att-out { margin-left: auto; } .att-item.is-unlinked .att-inner { color: #5E7268; } /* ── Record grid + Finder results ──────────────────────────────────────── */ /* A record card is an ENTRY IN A REGISTER: a navy rule over it, its date above its title in small print, and nothing round it. */ .collection-cards .citem, .collection-list .citem, .finder-results .citem { background: transparent; border: 0; border-top: 2px solid #C9DCD0; border-radius: 0; padding: .95rem 0 1.4rem; } .citem-link:hover .citem-title { color: #B01D42; } .citem-title { font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: 1.24rem; font-weight: 500; line-height: 1.25; color: #0B4F3A; } .citem-link .citem-title { text-decoration: none; } .citem-link:hover .citem-title { text-decoration: underline; text-underline-offset: .16em; } .citem-date { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; margin: 0 0 .35rem; } .citem-summary { color: #3F5A4C; max-width: 34em; } .citem-img { border-radius: 0; } /* ── Documents ─────────────────────────────────────────────────────────── */ .docs-list { list-style: none; margin: 0; padding: 0; } .doc { border-top: 1px solid #C9DCD0; } .doc:last-child { border-bottom: 1px solid #C9DCD0; } .doc-link { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: .8rem 0; color: #0B4F3A; text-decoration: underline; text-underline-offset: .16em; text-decoration-color: #C4D6CB; } .doc-link:hover { color: #B01D42; text-decoration-color: #B01D42; } .doc-meta { flex: none; white-space: nowrap; } .doc-kind { border: 1px solid #C4D6CB; padding: .08rem .38rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #0B4F3A; margin-right: .5rem; } /* ── Feature ───────────────────────────────────────────────────────────── */ /* The engine draws a bordered block. A box is the wrong furniture here, so the border becomes a navy rule at the head and a hairline at the foot — the same entry shape as everything else, at a larger scale. */ .feature { border: 0; border-top: 2px solid #0B4F3A; border-bottom: 1px solid #C9DCD0; border-radius: 0; background: transparent; padding: 1.6rem 0 1.9rem; gap: 2.2rem; } .feature + .feature { border-top: 1px solid #C9DCD0; } .feature h2, .feature h3 { margin-top: 0; } .feature-media img { border-radius: 0; } /* ── Finder ────────────────────────────────────────────────────────────── */ .finder-q input { border: 1px solid #C4D6CB; border-radius: 0; background: #fff; font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: 1rem; padding: .7rem .9rem .7rem 2.4rem; } .finder-q input:focus-visible { outline: 2px solid #B01D42; outline-offset: 1px; } .finder-rail { border-top: 2px solid #0B4F3A; padding-top: .55rem; } .facet { border-bottom: 1px solid #C9DCD0; padding: .7rem 0; } .facet legend, .facet-head { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #12231C; } .facet-opt { display: flex; align-items: center; gap: .55rem; padding: .22rem 0; font-size: .94rem; } .facet-opt input { accent-color: #0B4F3A; } .facet-n { margin-left: auto; font-family: 'Instrument Sans',system-ui,sans-serif; font-size: .76rem; color: #5E7268; font-variant-numeric: tabular-nums; } .facet-opt.is-empty { color: #9FB6A9; } /* A removed-filter chip: square, navy hairline, no fill. */ .finder-chip { border: 1px solid #0B4F3A; border-radius: 0; background: transparent; color: #0B4F3A; font-family: 'Instrument Sans',system-ui,sans-serif; font-size: .76rem; letter-spacing: .04em; padding: .25rem .55rem; } .finder-chip:hover { background: #0B4F3A; color: #F5F8F4; } .finder-count b { color: #0B4F3A; } .finder-toolbar { border-bottom: 1px solid #C9DCD0; padding-bottom: .6rem; } .finder-more-btn { border: 1px solid #0B4F3A; border-radius: 5px; background: transparent; color: #0B4F3A; font-family: 'Instrument Sans',system-ui,sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1.5rem; } .finder-more-btn:hover { background: #0B4F3A; color: #F5F8F4; } /* ── Gallery ───────────────────────────────────────────────────────────── */ .gallery-item img { border-radius: 0; } .gallery-item figcaption { border-top: 1px solid #C9DCD0; padding-top: .45rem; margin-top: .5rem; } /* ── Pairs ─────────────────────────────────────────────────────────────── */ /* The shape a retention schedule is already in: term on the left in small tracked capitals, the answer on the right in the reading face. */ .pairs dl { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 0; margin: 0; } .pairs dt, .pairs dd { border-top: 1px solid #C9DCD0; padding: .7rem 1.5rem .7rem 0; margin: 0; } .pairs dt { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5E7268; padding-top: .95rem; } .pairs dd { color: #12231C; } .pairs dl > :nth-last-child(-n+2) { border-bottom: 1px solid #C9DCD0; } @media (max-width: 32rem) { .pairs dl { grid-template-columns: 1fr; } .pairs dt { border-bottom: 0; padding-bottom: 0; } .pairs dd { border-top: 0; padding-top: .2rem; } } /* ── People ────────────────────────────────────────────────────────────── */ .person { border-top: 2px solid #C9DCD0; padding-top: .9rem; } .person-photo { border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; margin-bottom: .75rem; } .person-name { font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: 1.12rem; font-weight: 500; color: #0B4F3A; } .person-role { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; margin: .25rem 0 0; } .person-note { font-size: .92rem; color: #3F5A4C; margin: .45rem 0 0; max-width: 26em; } .person-link:hover .person-name { color: #B01D42; } .person-contact { color: #0B4F3A; } .person-contact:hover { color: #B01D42; } /* ── Recording ─────────────────────────────────────────────────────────── */ /* The transcript is the point, so it gets the paper and the reading face; the player and the chapter list are apparatus and sit on mist. */ .recording__media { background: #DCEAE0; padding: 1rem; } .recording__chapters ol { list-style: none; margin: 0; padding: 0; } .recording__chapter { border-top: 1px solid #C9DCD0; padding: .5rem 0; display: flex; gap: 1rem; align-items: baseline; } .recording__t { flex: none; min-width: 4.2rem; color: #B01D42; font-weight: 700; } .recording__seek { color: #0B4F3A; text-decoration: none; } .recording__seek:hover { color: #B01D42; text-decoration: underline; text-underline-offset: .16em; } .recording__transcript.is-panel .recording__passages { background: #DCEAE0; border: 0; border-top: 2px solid #0B4F3A; border-radius: 0; padding: 1.1rem 1.2rem; max-height: 26rem; } .recording__passage { padding: .3rem 0; } .recording__passage.is-current { background: transparent; color: #0B4F3A; box-shadow: inset 0 -2px 0 #B01D42; } .recording__legend { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5E7268; } /* ── Slider ────────────────────────────────────────────────────────────── */ .slide img { border-radius: 0; } .slide figcaption { border-top: 1px solid #C9DCD0; padding-top: .45rem; margin-top: .5rem; } .slider-btn { border: 1px solid #0B4F3A; border-radius: 0; background: transparent; color: #0B4F3A; width: 2.4rem; height: 2.4rem; } .slider-btn:hover:not(:disabled) { background: #0B4F3A; color: #F5F8F4; } .slider-btn:disabled { border-color: #C4D6CB; color: #C4D6CB; } /* Square dots. A round dot on a site with radius 0 is the one detail that would give the whole thing away. */ .slider-dot::before { border-radius: 0; width: .5rem; height: .5rem; background: #C4D6CB; } .slider-dot.is-current::before { background: #B01D42; } /* ── Timeline ──────────────────────────────────────────────────────────── */ .timeline-vertical .timeline-list { list-style: none; margin: 0; padding-left: 1.9rem; } .timeline-vertical .timeline-item { position: relative; padding: 0 0 1.6rem; border-left: 1px solid #C9DCD0; padding-left: 1.6rem; margin-left: -1.9rem; } .timeline-vertical .timeline-item::before { content: ""; position: absolute; left: -.28rem; top: .42rem; width: .55rem; height: .55rem; background: #B01D42; border-radius: 0; } .timeline-when { display: block; font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: 1.18rem; font-weight: 600; color: #0B4F3A; letter-spacing: .01em; margin-bottom: .15rem; } .timeline-what { color: #12231C; max-width: 40em; display: block; } .timeline-media { border-radius: 0; margin-top: .7rem; } .timeline-horizontal .timeline-item { border-left: 0; border-top: 1px solid #C9DCD0; padding: .9rem 1.5rem 0 0; margin: 0; } .timeline-horizontal .timeline-item::before { left: 0; top: -.28rem; } /* ── Timeline, third attempt ───────────────────────────────────────────── Attempt one was a line with dots down the side — the shape every timeline on the internet has. Attempt two put the year in a ruled column beside the entry, which fixed the cliché and replaced it with a spreadsheet: hairline, row, hairline, row. Cam killed both, and he was right twice. So: stop drawing a timeline and draw the RECORD ITSELF. The years become display numerals — Spectral 600 at 2.5rem, hanging in their own margin, the largest thing on the block. Entries are separated by air rather than by rules, which is what stops it reading as a table. And the only rule in the whole block is a 3px DOUBLE navy rule at each new decade, carrying its own gold square: the same double rule that sits under the masthead of every page on this site, which is the site's single most recognisable mark. The eras are found, not typed — a leading four-digit year in the date is read off and rounded down; an entry whose date does not parse ("the 1890s", "c. 1912") simply joins the era above it rather than inventing one. ───────────────────────────────────────────────────────────────────────── */ /* the engine's own rule puts a 2px border-left on the list — the spine the dotted design hung off. Nothing hangs off it now, so it goes. */ .timeline-vertical .timeline-list { list-style: none; margin: 0; padding: 0; border: 0; } .timeline-era { position: relative; display: block; border-top: 3px double var(--blk-deep, #0B4F3A); padding-top: .65rem; margin: 2.6rem 0 1.6rem; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blk-quiet, #5E7268); } .timeline-era:first-child { margin-top: 0; } .timeline-era::before { content: ""; position: absolute; left: 0; top: -1px; width: .5rem; height: .5rem; background: var(--blk-accent, #B01D42); } .timeline-vertical .timeline-item { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); gap: 0 2.2rem; border: 0; padding: 0 0 1.9rem; margin: 0; } .timeline-vertical .timeline-item::before { content: none; } .timeline-vertical .timeline-when { font-family: 'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--blk-deep, #0B4F3A); font-variant-numeric: tabular-nums; margin: 0; padding-top: .1rem; } /* nudged down so the first line of the entry sits on the year's midline rather than on its cap height — the two are wildly different sizes and aligning their tops makes the entry look like it has slipped */ .timeline-vertical .timeline-what { display: block; max-width: 38em; margin: 0; padding-top: .55rem; font-size: 1.02rem; } .timeline-vertical .timeline-media { grid-column: 2; margin-top: 1rem; max-width: 30rem; border-radius: 0; } @media (max-width: 34rem) { .timeline-vertical .timeline-item { grid-template-columns: minmax(0, 1fr); gap: .25rem; } .timeline-vertical .timeline-when { font-size: 1.9rem; } .timeline-vertical .timeline-what { padding-top: 0; } .timeline-vertical .timeline-media { grid-column: 1; } } /* Along the page: the eras become the columns, so the double rule still does the dividing and the years still carry the weight. */ .timeline-horizontal .timeline-list { list-style: none; border: 0; display: flex; gap: 2.6rem; overflow-x: auto; padding-bottom: .6rem; } .timeline-horizontal .timeline-item { position: relative; flex: 0 0 15rem; display: block; border: 0; border-top: 3px double var(--blk-deep, #0B4F3A); padding: .8rem 0 0; } .timeline-horizontal .timeline-item::before { content: ""; position: absolute; left: 0; top: -1px; width: .5rem; height: .5rem; background: var(--blk-accent, #B01D42); } .timeline-horizontal .timeline-when { font-size: 1.9rem; } .timeline-horizontal .timeline-what { padding-top: .5rem; } /* ── The register left edge, inside a dressed block ───────────────────── The site aligns page content to the column's left edge rather than centring it — `.page .page-body > *` in the chrome above, the minute book's own alignment. A block wrapped in its dress is no longer a direct child of `.page-body`, so that rule stops reaching it and the text block's reading measure springs back to centred: the heading sits flush left and the words it names sit indented from it. Restate it for the dress. */ .blk .b-text__inner { margin-inline: 0; /* not centred: the register's left edge */ padding-inline: 0; /* and no gutter of its own — the dress already provides the inset, and with both the words sat 51px right of the heading naming them */ } /* ── The four grounds, pinned ─────────────────────────────────────────── The engine computes these from the site's tokens (core.css, "THE BLOCK DRESS") and lands within a hair of the Minute Book values. Pinned anyway, because "within a hair" of #DCEAE0 is a mist band that does not match the .page-band already on every interior page, and two nearly-identical warm greys on one page reads as a mistake rather than as a system. WORTH REVISITING: the house blocks still name --color-primary and --color-accent directly, which is why the mapping below has to exist at all. As each block.css moves to --blk-deep / --blk-accent / --blk-line, the matching rule here can be deleted. Nothing else changes when it is. ─────────────────────────────────────────────────────────────────────── */ .blk[data-bg="paper"]{--blk-ground:#F5F8F4;--blk-ink:#12231C;--blk-line:#C9DCD0; --blk-deep:#0B4F3A;--blk-accent:#B01D42;--blk-quiet:#5E7268} .blk[data-bg="mist"]{--blk-ground:#DCEAE0;--blk-ink:#12231C;--blk-line:#C9DCD0; --blk-deep:#0B4F3A;--blk-accent:#B01D42;--blk-quiet:#0B4F3A} .blk[data-bg="sand"]{--blk-ground:#CFE3D6;--blk-ink:#12231C;--blk-line:#B3D0C0; --blk-deep:#0B4F3A;--blk-accent:#0B4F3A;--blk-quiet:#4E6459} /* #FA8CA3 on #0B4F3A is 6.1:1. The brand gold is 2.4:1 and unreadable. */ .blk[data-bg="navy"]{--blk-ground:#0B4F3A;--blk-ink:#F5F8F4; --blk-line:rgba(252,251,248,.25);--blk-deep:#F5F8F4;--blk-accent:#FA8CA3; --blk-quiet:#93C7AE} /* What the editor's Style tab calls each ground (2026-09-25). The engine's own names are Paper, Mist, Sand and Navy; here they are named after what they actually are on this site: a white and three greens. */ .blk[data-bg="paper"]{--blk-name:"Paper"} .blk[data-bg="mist"]{--blk-name:"Light sage"} .blk[data-bg="sand"]{--blk-name:"Sage"} .blk[data-bg="navy"]{--blk-name:"Pine"} /* ── What a ground reaches inside CAMRO's own block dress ──────────────── */ .blk[data-bg] .blk-eyebrow, .blk[data-bg] .pairs-label,.blk[data-bg] .docs-label,.blk[data-bg] .people-label, .blk[data-bg] .slider-label,.blk[data-bg] .timeline-label, .blk[data-bg] .attachments-title,.blk[data-bg] .recording__title, .blk[data-bg] .recording__legend{color:var(--blk-quiet);border-top-color:var(--blk-deep)} .blk[data-bg] .citem-title,.blk[data-bg] .person-name,.blk[data-bg] .accordion-label, .blk[data-bg] .att-inner,.blk[data-bg] .doc-link,.blk[data-bg] .timeline-when, .blk[data-bg] .att-format,.blk[data-bg] .doc-kind{color:var(--blk-deep)} .blk[data-bg] .doc-meta,.blk[data-bg] .att-note,.blk[data-bg] .citem-date, .blk[data-bg] .citem-meta,.blk[data-bg] .person-role,.blk[data-bg] figcaption, .blk[data-bg] .finder-showing{color:var(--blk-quiet)} .blk[data-bg] .doc,.blk[data-bg] .att-item,.blk[data-bg] .accordion-item, .blk[data-bg] .accordion,.blk[data-bg] .pairs dt,.blk[data-bg] .pairs dd, .blk[data-bg] .citem,.blk[data-bg] .person,.blk[data-bg] figcaption, .blk[data-bg] .att-format,.blk[data-bg] .doc-kind{border-color:var(--blk-line)} .blk[data-bg] .accordion-item[open],.blk[data-bg] .timeline-era, .blk[data-bg] .feature{border-top-color:var(--blk-deep)} .blk[data-bg] .accordion-label::after{border-color:var(--blk-accent)} .blk[data-bg] .timeline-era::before,.blk[data-bg] .slider-dot.is-current::before{background:var(--blk-accent)} .blk[data-bg] .recording__t{color:var(--blk-accent)} .blk[data-bg] .citem-link:hover .citem-title,.blk[data-bg] .person-link:hover .person-name, .blk[data-bg] .accordion-label:hover,.blk[data-bg] .doc-link:hover{color:var(--blk-accent)} .blk[data-bg] .citem-summary,.blk[data-bg] .person-note, .blk[data-bg] .timeline-what{color:var(--blk-ink);opacity:.88} .blk[data-bg] .slider-btn{border-color:var(--blk-deep);color:var(--blk-deep)} .blk[data-bg] .slider-btn:hover:not(:disabled){background:var(--blk-deep);color:var(--blk-ground)} .blk[data-bg] .recording__media, .blk[data-bg] .recording__transcript.is-panel .recording__passages{ background:color-mix(in srgb, var(--blk-ink) 7%, var(--blk-ground))} /* ── end CAMRO block dress ── */ /* ── Minute Book, second edition (2026-09-07) ────────────────────────────── The register kept its bones — navy, gold, paper, the double rule, square corners, hairlines instead of boxes — and changed its type and its air. Sora carries every heading and numeral (third edition; it was Fraunces); Public Sans carries every sentence, label and menu. Spectral and Cinzel are retired. Cards lost their coloured rails and became quiet mist panels. The one navy moment on a page is a statement band, not the opening. Everything below overrides the first edition above it by source order; nothing new is a mechanism. */ :root{ --mb-ink:#12231C; --mb-body:#23342C; --mb-quiet:#4E6459; --mb-mist:#DCEAE0; --mb-rule:#D3E4D9; --mb-rule-strong:#BFD5C7; --mb-navy:#0B4F3A; --mb-navy-2:#0F6349; --mb-gold:#F0567A; --mb-gold-ink:#B01D42; --mb-gold-light:#FA8CA3; --mb-serif:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; --mb-sans:'Instrument Sans', system-ui, sans-serif; } body{color:var(--mb-body);font-family:var(--mb-sans);font-size:1.0625rem;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--mb-serif);font-weight:500;letter-spacing:-.018em;color:var(--mb-navy); font-variation-settings:"opsz" 96,"SOFT" 30;text-wrap:balance} h1{font-size:clamp(2.6rem,5.2vw,4rem);line-height:1.04} h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.12;margin:0 0 1.25rem} h3{font-size:1.35rem;line-height:1.25;letter-spacing:-.01em;font-variation-settings:"opsz" 36,"SOFT" 30} h4{font-size:1.08rem;font-variation-settings:"opsz" 20} p,li{max-width:none} a{color:var(--mb-navy);text-decoration-thickness:1px;text-underline-offset:.16em} a:hover{color:var(--mb-gold-ink)} .lede,.page-band-lede,.p-hero__lede,.c-hero p{font-family:var(--mb-sans);font-size:1.18rem;line-height:1.6;color:var(--mb-quiet)} .eyebrow,.p-hero__eyebrow,.lbl,.blk-eyebrow{font-family:var(--mb-sans);font-size:.74rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mb-gold-ink);margin:0 0 1.1rem} strong{color:var(--mb-ink)} /* ── utility strip: a hairline of small print, no longer a navy bar ── */ .header-utility{background:var(--mb-mist);color:var(--mb-quiet);border-bottom:1px solid var(--mb-rule); font-family:var(--mb-sans);font-size:.78rem;letter-spacing:.01em} .header-utility-inner{padding:.45rem var(--gutter);gap:1.6rem} .header-utility a{color:var(--mb-navy);font-weight:600;text-decoration:none} .header-utility a:hover{color:var(--mb-gold-ink);text-decoration:underline} /* ── masthead: paper, the double rule kept, the menu set quietly ── */ .site-header{background:var(--color-bg);border-bottom:3px double var(--mb-navy)} .site-header-inner{padding-top:1.3rem;padding-bottom:1.3rem;gap:1.5rem 2.5rem} .site-logo{width:188px} nav.nav-top > ul{gap:.1rem 1.9rem;font-size:.94rem} .nav-top a,.nav-parent{font-family:var(--mb-sans);font-weight:500;color:var(--mb-ink);padding:.55rem 0;border-radius:0; letter-spacing:.005em} .nav-top a:hover,.nav-parent:hover,.nav-item.open>.nav-parent{background:transparent;color:var(--mb-navy)} .nav-top .nav-item.in-section > a,.nav-top .nav-item.in-section > .nav-parent{box-shadow:inset 0 -2px 0 0 var(--mb-gold)} nav.nav-top a[aria-current=page]{text-decoration:none;box-shadow:inset 0 -2px 0 0 var(--mb-navy);color:var(--mb-navy)} .nav-top .submenu{background:var(--color-bg);border:1px solid var(--mb-rule);border-top:2px solid var(--mb-navy); border-radius:0;box-shadow:0 22px 44px -18px rgba(20,41,77,.28);padding:.55rem;min-width:15.5rem;left:-.9rem;margin-top:0} .nav-top .submenu a{display:block;padding:.6rem .9rem;font-size:.9rem;font-weight:500;color:var(--mb-ink);border-radius:0} .nav-top .submenu a:hover{background:var(--mb-mist);color:var(--mb-navy)} .nav-top .submenu a.in-section,.nav-top .submenu a[aria-current=page]{box-shadow:none;color:var(--mb-navy);font-weight:600; background:var(--mb-mist)} .nav-mobile-toggle{color:var(--mb-navy);border:1px solid var(--mb-navy);border-radius:4px;font-family:var(--mb-sans); font-weight:600;font-size:.9rem;padding:.5rem .9rem} @media(max-width:760px){ .site-header-inner{gap:1rem} .nav-top-list{border-top:1px solid var(--mb-rule);margin-top:.75rem;padding-top:.25rem} .nav-top .nav-item{border-bottom:1px solid var(--mb-rule)} .nav-top .nav-item:last-child{border-bottom:0} .nav-top-list > .nav-item > a,.nav-parent{font-weight:600;font-size:1rem;padding:.85rem 0} .nav-top .nav-item.in-section > a,.nav-top .nav-item.in-section > .nav-parent{box-shadow:none;color:var(--mb-navy)} .nav-top .submenu{border:0;box-shadow:none;background:var(--mb-mist);padding:.35rem .5rem} .nav-top .nav-item.open > .submenu{margin:0 0 .75rem;padding:.4rem .6rem;border-left:0} .nav-top .submenu a{padding:.6rem .5rem;font-size:.95rem;opacity:1} } /* ── bands: more air, and a heading that names the section ── */ .band{padding:clamp(3rem,6.5vw,5.25rem) 0} .band-mist{background:var(--mb-mist);box-shadow:0 0 0 100vmax var(--mb-mist)} .band-navy{background:var(--mb-navy);box-shadow:0 0 0 100vmax var(--mb-navy)} .band-navy p{color:#C3DACB} .band-navy .lede{color:#A9C9B7} .band-navy .eyebrow{color:var(--mb-gold-light)} .band-navy a{color:#fff} .band-navy a:hover{color:var(--mb-gold-light)} .band-head{align-items:flex-end;margin-bottom:2rem;gap:1.5rem 3rem} .band-head h2{margin:0} .band-head .lede{margin-top:.5rem;font-size:1.05rem} .band-head > a{font-family:var(--mb-sans);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap} .band-head > a:hover{text-decoration:underline} .band > .wrap > h2:first-child{margin-bottom:1.75rem} /* ── the opening of a section page: mist ground, big type, one action ── */ .hero{padding:clamp(3.25rem,7vw,5.5rem) 0} .hero h1{max-width:14em;margin:0} .hero .lede{margin-top:1.1rem;max-width:36em} .hero .actions{margin-top:2rem} .c-hero{padding:clamp(3.25rem,7vw,5.5rem) 0} .c-hero h1{font-size:clamp(2.6rem,5.2vw,4rem);line-height:1.04;max-width:14em} .c-hero .lbl{margin-bottom:1.1rem} .c-hero p{margin-top:1.1rem;max-width:36em;font-size:1.18rem} .page-band{background:var(--mb-mist);box-shadow:0 0 0 100vmax var(--mb-mist);padding:clamp(3rem,6vw,4.5rem) 0} .page-band-lede{font-size:1.18rem} /* ── buttons: one filled action, everything else a link ── */ .btn,.actions>a:not([class]):first-child,.finder-more-btn{display:inline-flex;align-items:center;gap:.5rem; background:var(--mb-navy);color:#fff;border:1px solid var(--mb-navy);border-radius:4px;padding:.8rem 1.35rem; font-family:var(--mb-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none; transition:background-color .15s ease,border-color .15s ease,color .15s ease} .btn:hover,.actions>a:not([class]):first-child:hover{background:var(--mb-navy-2);border-color:var(--mb-navy-2);color:#fff;filter:none} .btn-ghost{background:transparent;color:var(--mb-navy)} .btn-ghost:hover{background:var(--mb-navy);color:#fff} .btn-invert{background:#fff;color:var(--mb-navy);border-color:#fff} .btn-invert:hover{background:var(--mb-gold-light);border-color:var(--mb-gold-light);color:var(--mb-navy)} .btn-ghost-invert{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost-invert:hover{background:#fff;color:var(--mb-navy);border-color:#fff} /* a second bare link in an actions row is a link, not a second button */ .actions>a:not([class]):not(:first-child){background:transparent;border:0;padding:.8rem 0;color:var(--mb-navy); font-family:var(--mb-sans);font-weight:600;font-size:.95rem;text-decoration:none;border-radius:0} .actions>a:not([class]):not(:first-child)::after{content:"\2192";margin-left:.45rem;transition:transform .15s ease;display:inline-block} .actions>a:not([class]):not(:first-child):hover{text-decoration:underline;filter:none} .actions>a:not([class]):not(:first-child):hover::after{transform:translateX(.2rem)} .band-navy .actions>a:not([class]):first-child{background:#fff;color:var(--mb-navy);border-color:#fff} .band-navy .actions>a:not([class]):not(:first-child){color:#fff} .actions{gap:.75rem 1.5rem;margin-top:1.75rem} a.strong{font-family:var(--mb-sans);font-weight:600;text-decoration:none} a.strong:hover{text-decoration:underline} /* ── cards: a quiet panel, no rails, no box round a box ── */ .card,.p-doors__panel{background:var(--mb-mist);border:0;border-radius:0;padding:2rem 2.1rem 2.1rem;gap:.8rem} .band-mist .card,.band-mist .p-doors__panel{background:var(--color-bg)} .cards-bordered .card,.card-accent,.card-gold,.card-none{border:0} .card h3,.p-doors__heading{font-size:1.38rem;margin:0} .card p,.p-doors__body{color:var(--mb-body);font-size:.98rem;line-height:1.6} .linklist,.p-doors__links{margin-top:auto;padding-top:.5rem;gap:.5rem} .linklist a,.p-doors__links a{font-family:var(--mb-sans);font-weight:600;font-size:.95rem;color:var(--mb-navy);text-decoration:none} .linklist a::after,.p-doors__links a::after{content:"\2192";margin-left:.4rem;display:inline-block;transition:transform .15s ease} .linklist a:hover,.p-doors__links a:hover{color:var(--mb-gold-ink);text-decoration:underline} .linklist a:hover::after,.p-doors__links a:hover::after{transform:translateX(.2rem)} .grid{gap:1.5rem} .p-doors{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6.5vw,5.25rem)} .p-doors__grid{gap:1.5rem} .badge{border:0;border-radius:0;padding:0;margin:0 0 1.1rem;font-family:var(--mb-sans);font-size:.74rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mb-gold-ink)} .badge .i{display:none} .band-navy .badge{color:var(--mb-gold-light)} .checks .i{color:var(--mb-gold-ink)} .pill{border-radius:0;font-weight:700;letter-spacing:.1em} .meta{font-size:.86rem} /* the register shapes: heading without the gold underline; the aside keeps its rule */ .c-sec{padding:clamp(2.5rem,4.5vw,3.5rem) 0;border-top:1px solid var(--mb-rule)} .c-sec > h2{display:block;border-bottom:0;padding-bottom:0;font-size:clamp(1.65rem,2.6vw,2.05rem);margin-bottom:1.1rem} .c-sec p{max-width:42em} .c-note{border-top:2px solid var(--mb-gold);padding:1.5rem 1.7rem;margin-top:1.75rem} .c-index a{font-size:.95rem;text-decoration:none} .c-index a:hover{text-decoration:underline;color:var(--mb-gold-ink)} .c-defs dt{font-family:var(--mb-serif);font-size:1.25rem} .c-table th,.c-facts dt,.c-table caption{font-family:var(--mb-sans)} /* A four-column table is wider than a phone. Until now it simply lost its last column: every ancestor is overflow visible, the page does not scroll sideways, so "Anchor towns" was drawn past the edge and unreachable. Making the table its own scroll container is the fix that does not touch the markup, which matters because these tables live inside Custom HTML blocks on three pages. Full-width above the breakpoint, so nothing changes on a desktop. */ @media (max-width:48rem){ .c-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .c-table caption{white-space:normal} } .c-facts dd{font-family:var(--mb-serif);font-size:1.15rem;font-weight:500;color:var(--mb-navy)} .q{border-left:0;border-top:2px solid var(--mb-rule-strong);padding:.8rem 0 0} .prose blockquote{border-left:0;border-top:2px solid var(--mb-gold);border-radius:0;background:transparent; padding:1rem 0 0;font-family:var(--mb-serif);font-size:1.2rem;color:var(--mb-navy)} .step-n{font-family:var(--mb-serif);color:var(--mb-gold);font-size:2.4rem;font-variation-settings:"opsz" 96} .steps .step h3{margin:0} .panel{border-radius:0} .split{gap:clamp(2rem,5vw,4rem)} .split-a h2{font-size:clamp(2rem,3.6vw,2.9rem)} .stat-n,.p-hero__stat-n,.timeline-when,.citem-title,.person-name,.accordion-label,.recording__t{font-family:var(--mb-serif)} main table,.prose table{font-family:var(--mb-sans);font-size:.95rem} /* ── record cards (events, news): a mist panel with the date as its label ── */ .collection-cards .citem,.finder-results .citem{background:var(--mb-mist);border:0;padding:1.6rem 1.7rem 1.7rem; display:flex;flex-direction:column;gap:.3rem} .band-mist .collection-cards .citem,.blk[data-bg="mist"] .collection-cards .citem{background:var(--color-bg)} .collection-cards .citem-date{order:-1} .citem-date{font-family:var(--mb-sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--mb-gold-ink);margin:0 0 .6rem} .citem-title{font-family:var(--mb-serif);font-size:1.34rem;font-weight:500;line-height:1.2;letter-spacing:-.012em; color:var(--mb-navy);font-variation-settings:"opsz" 36,"SOFT" 30} .citem-link .citem-title{text-decoration:none} .citem-link:hover .citem-title{color:var(--mb-gold-ink);text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px} .citem-summary{font-family:var(--mb-sans);font-size:.95rem;line-height:1.55;color:var(--mb-body);margin-top:.5rem} .citem-meta,.citem-facts{font-family:var(--mb-sans);font-size:.8rem;color:var(--mb-quiet);margin-top:.35rem} .collection-list .citem{border-top:1px solid var(--mb-rule);padding:1.25rem 0 1.35rem} .collection-list .citem:first-child{border-top:2px solid var(--mb-navy)} .collection-list .citem-title{font-size:1.4rem} .collection-grid{gap:1.5rem} .collection-cards{gap:1.5rem} /* the site's first-edition rule drew record cards as ruled entries; on a cards grid that reads as a list wearing a grid. Restated above; this only restores the list's own hairline rhythm where a list is wanted. */ .collection-cards .citem{border-top:0} .ev-cards.band{padding-bottom:0} /* ── people, accordion, attachments pick up the new voices ── */ .person{border-top:1px solid var(--mb-rule)} .person-name{font-size:1.2rem} .person-role{font-family:var(--mb-sans);color:var(--mb-gold-ink)} .accordion-label{font-family:var(--mb-serif);font-size:1.18rem} .att-label,.doc-link{font-family:var(--mb-sans);font-size:.98rem} .finder-q input{font-family:var(--mb-sans);border-color:var(--mb-rule-strong)} .pairs-label,.docs-label,.people-label,.slider-label,.timeline-label,.attachments-title,.recording__title,.finder-rail-title{ color:var(--mb-gold-ink)} /* ── forms ── */ form.cantata label{font-family:var(--mb-sans)} form.cantata input,form.cantata textarea,form.cantata select{font-family:var(--mb-sans);border:1px solid var(--mb-rule-strong); border-radius:4px;padding:.7rem .85rem;background:#fff} form.cantata input:focus-visible,form.cantata textarea:focus-visible{outline:2px solid var(--mb-gold);outline-offset:1px} form.cantata button,form.cantata [type=submit]{background:var(--mb-navy);color:#fff;border:0;border-radius:4px;padding:.8rem 1.35rem; font-family:var(--mb-sans);font-weight:600;font-size:.95rem} /* ── footer: the register's index, set with air ── */ .site-footer{background:var(--mb-navy);color:#A9C9B7;padding:clamp(3rem,6vw,4.5rem) var(--gutter) 1.15rem;font-family:var(--mb-sans)} .site-footer-inner{gap:2.5rem 3rem;padding-bottom:.9rem} .site-footer p{margin:.2rem 0;font-size:.92rem;color:#A9C9B7} .site-footer a{color:#C3DACB} .footer-col{gap:.6rem;font-size:.92rem} .footer-col a{color:#C3DACB;text-decoration:none} .footer-col a:hover{color:#fff;text-decoration:underline} .footer-col-heading{color:var(--mb-gold-light);font-size:.7rem;font-weight:700;letter-spacing:.16em;margin-bottom:.45rem} .footer-name--lockup{background-size:200px auto;min-height:62px;margin-bottom:1.1rem} .footer-colophon{border-top:1px solid rgba(255,255,255,.14);padding-top:1.25rem;margin-top:1rem;font-size:.82rem;color:#7FB29A} .footer-legal a{color:#A9C9B7;text-decoration:none} .footer-legal a:hover{color:#fff;text-decoration:underline} /* ── the block dress reads the new voices too ── */ .blk-head h2{font-size:clamp(1.8rem,3vw,2.4rem)} .blk-lede{font-family:var(--mb-sans);color:var(--mb-quiet)} .b-text__inner{font-size:1.05rem} .b-text__inner a{text-decoration-color:var(--mb-gold)} /* focus, motion */ :focus-visible{outline:2px solid var(--mb-gold);outline-offset:2px} @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}} /* ── second edition, corrections after the first render ── */ h1,h2,h3,h4,.citem-title,.p-hero__heading,.p-hero__stat-n,.step-n{font-variation-settings:"SOFT" 0,"WONK" 0;font-optical-sizing:auto} /* patterns carry their own gutter; inside the page column that doubles it */ .page-body .p-hero__inner,.page-body .p-doors__inner{padding-inline:0} .p-hero__grid{align-items:start} .p-hero__stats{margin-top:.4rem} @media(max-width:760px){.header-utility-text{display:none}.header-utility-inner{justify-content:flex-start;gap:1.25rem}} /* the events and news lists: date first, then the title, then the words */ .collection-list .citem{display:flex;flex-direction:column;gap:.15rem;padding:1.5rem 0 1.6rem} .collection-list .citem-date{order:-1;margin-bottom:.45rem} .collection-list .citem-summary{max-width:44em;margin-top:.45rem} .collection-list .citem-meta,.collection-list .citem-facts{margin-top:.4rem} .collection-list .citem-title{font-size:1.5rem} .collection-list .citem .ext-mark{margin-left:.35rem} /* the plain listing (events page, news page) is a ruled register: date, then title, then the words */ .collection-grid:not(.collection-cards) .citem{display:flex;flex-direction:column;gap:.15rem;padding:1.5rem 0 1.6rem; border:0;border-top:1px solid var(--mb-rule)} .collection-grid:not(.collection-cards) .citem:first-child{border-top:2px solid var(--mb-navy)} .collection-grid:not(.collection-cards) .citem-date{order:-1;margin-bottom:.45rem} .collection-grid:not(.collection-cards) .citem-title{font-size:1.5rem} .collection-grid:not(.collection-cards) .citem-summary{max-width:44em;margin-top:.45rem} .collection-grid:not(.collection-cards){gap:0} /* mobile masthead: the Menu button sits beside the lockup, the list opens beneath both */ @media(max-width:760px){ .site-header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem} nav.nav-top{display:contents} .nav-mobile-toggle{margin-left:auto} .nav-top-list{flex-basis:100%;width:100%} .site-logo{width:150px} } /* record pages (an event, a news item): the register's own opening */ .record-page h1{font-size:clamp(2.2rem,4.4vw,3.2rem);margin:0 0 .5rem} .record-event > h1::before,.record-news > h1::before{display:block;font-family:var(--mb-sans);font-size:.74rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mb-gold-ink);margin-bottom:1rem} .record-event > h1::before{content:"Event"} .record-news > h1::before{content:"From the association"} .record-meta{font-family:var(--mb-sans);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-quiet);margin:0 0 1.5rem} .record-facts{border-top:2px solid var(--mb-navy);margin:0 0 2rem;display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:0} .record-facts dt,.record-facts dd{border-bottom:1px solid var(--mb-rule);padding:.7rem 1rem .7rem 0;margin:0} .record-facts dt{font-family:var(--mb-sans);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-quiet);padding-top:.85rem} .record-facts dd{font-family:var(--mb-sans);color:var(--mb-ink)} .record-back{margin-top:2.5rem;border-top:1px solid var(--mb-rule);padding-top:1.25rem} .record-back a{font-family:var(--mb-sans);font-weight:600;text-decoration:none} .record-back a:hover{text-decoration:underline} .record-page .page-body img{display:block;width:100%;height:auto} /* a record page keeps its words under its title, at the register's left edge */ .record-page .page-body{margin-inline:0;max-width:var(--text-width)} .record-page .page-body > *{margin-inline:0} .record-page form.cantata{margin-inline:0} /* ── record pages, a further pass (DS, 2026-09-07) ───────────────────────── Every kind of record now opens the same way — what it is, what it is called, its particulars in a ruled table — so an event, a news item and a municipality read as three entries in one book rather than three pages that happen to share a stylesheet. */ /* what this entry IS, above its name. The engine has no element for it, so it is drawn here per type, as Event and From the association already were. A directory of 48 municipalities is the case that needed it: the title is a town's name, and nothing else on the page says so. */ .record-clerk > h1::before{display:block;font-family:var(--mb-sans);font-size:.74rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mb-gold-ink);margin-bottom:1rem;content:"Municipality"} /* the sentence under a headline: the reading face's size, the quiet colour, short enough to be read in one go */ .record-standfirst{font-family:var(--mb-sans);font-size:1.18rem;line-height:1.6;color:var(--mb-quiet); max-width:36em;margin:0 0 1.75rem} /* "kept for reference" is a note about the page, not a badge on it: no pill, no radius, no colour wash — a hairline over small print, like every other aside in the register. */ .record-past-note{background:transparent;border-top:2px solid var(--mb-rule-strong);border-radius:0; display:block;max-width:36em;padding:.7rem 0 0;margin:0 0 2rem;font-family:var(--mb-sans); font-size:.9rem;color:var(--mb-quiet)} /* on a record with no body at all — a municipality is six lines and a phone number — the fact table IS the entry, so it gets room to be read. */ .record-page .record-facts{max-width:44em} .record-facts dd{font-size:1.02rem} .record-clerk .record-facts{margin-bottom:0} /* the table already ends on a rule; the back link's own would be a second hairline 30px under the first, which reads as an empty row of the table */ .record-clerk .record-back{border-top:0;margin-top:1.75rem} /* on a phone the two columns are 224px of label and 111px of answer, so a clerk's name and a phone number both wrap. A label over its answer is how the register reads on a narrow page. */ @media(max-width:640px){ .record-facts{grid-template-columns:1fr} .record-facts dt{border-bottom:0;padding:.9rem 0 .1rem} .record-facts dd{padding:0 0 .9rem} } /* ── the search page ─────────────────────────────────────────────────────── Pagefind's Default UI ships its own drawing: a system font, an 8px radius, a 2px #eee frame, bold system-font result titles. On a page whose every other line is Sora and Public Sans on paper, the one box a visitor types into was the only thing wearing somebody else's design. Its custom properties do the colours and the shape — the supported surface, and they survive an upgrade. The rules under them are prefixed with #search, the id of the element the widget builds itself INTO, because Pagefind's stylesheet is a inside the page body: it loads after this one and its deepest rules run to four classes, so a plain class-for-class override loses every tie silently. An id wins outright and says where it applies, which !important does not. The properties go on #search itself and not on .pagefind-ui, because the widget builds .pagefind-ui as a CHILD of #search: set on the wrong one they fall back to Pagefind's own :root defaults and nothing says so. */ #search, #search .pagefind-ui{ --pagefind-ui-scale:.8; --pagefind-ui-primary:var(--mb-navy); --pagefind-ui-text:var(--mb-navy); --pagefind-ui-background:var(--color-bg); --pagefind-ui-border:var(--mb-rule-strong); --pagefind-ui-tag:var(--mb-mist); --pagefind-ui-border-width:1px; --pagefind-ui-border-radius:0; --pagefind-ui-font:var(--mb-sans); } #search .pagefind-ui__form{margin-top:.5rem} #search .pagefind-ui__search-input{border-radius:4px;font-family:var(--mb-sans);font-size:1.05rem; font-weight:500;color:var(--mb-ink);background:#fff} #search .pagefind-ui__search-input:focus-visible{outline:2px solid var(--mb-gold);outline-offset:1px} #search .pagefind-ui__search-clear{font-family:var(--mb-sans);font-size:.85rem;font-weight:600; color:var(--mb-navy);background:transparent} #search .pagefind-ui__message{font-family:var(--mb-sans);font-size:.74rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mb-quiet); border-bottom:2px solid var(--mb-navy);padding:1.75rem 0 .8rem;margin:0;height:auto} #search .pagefind-ui__results{margin:0} /* every result was indented by a thumbnail column holding nothing: these pages carry no picture, and an empty column that pushes a title off the left margin is a hole in the register rather than a layout. */ #search .pagefind-ui__result{display:block;border-top:0;border-bottom:1px solid var(--mb-rule); padding:1.4rem 0} #search .pagefind-ui__result:last-of-type{border-bottom:1px solid var(--mb-rule)} #search .pagefind-ui__result-thumb:empty{display:none} #search .pagefind-ui__result-title{margin:0;font-weight:500} #search .pagefind-ui__result-title .pagefind-ui__result-link{font-family:var(--mb-serif);font-size:1.34rem; font-weight:500;line-height:1.2;letter-spacing:-.012em;color:var(--mb-navy);text-decoration:none; font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 0} #search .pagefind-ui__result-title .pagefind-ui__result-link:hover{color:var(--mb-gold-ink); text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px} #search .pagefind-ui__result-excerpt{font-family:var(--mb-sans);font-size:.95rem;line-height:1.55; color:var(--mb-body);max-width:44em;margin-top:.5rem} #search .pagefind-ui__result-excerpt mark{background:color-mix(in srgb,var(--mb-gold) 30%,transparent); color:var(--mb-ink);padding:0 .1em} #search .pagefind-ui__button{font-family:var(--mb-sans);font-weight:600;border-radius:4px; border:1px solid var(--mb-rule-strong);background:transparent;color:var(--mb-navy);height:auto; padding:.8rem 1.35rem;margin-top:2rem} #search .pagefind-ui__button:hover{background:var(--mb-mist);border-color:var(--mb-navy)} /* the line explaining why somebody is here after a retired address forwarded them: a note, set like every other aside in the register */ .search-why{font-family:var(--mb-sans);font-size:1.05rem;color:var(--mb-quiet);max-width:40em; border-top:2px solid var(--mb-rule-strong);padding-top:.9rem;margin:1.25rem 0 0} /* ── end second edition ── */ /* ── Third edition (2026-09-07, evening): toward the new mark ─────────────── Cam, having seen the new lockup live: "the rest of the site doesn't reflect the logo — the site still looks very professional, and the logo is more minimalistic and modern. I'd like the rest of the site to look more minimalistic and modern, just like the new logo." So the register's SERIF goes. Sora carries every display line, in the same geometry as the mark; Public Sans keeps every sentence. What else changes is subtraction: the double rule under the masthead becomes one hairline, the ruled registers lose their navy caps, cards lose their remaining lines, the figures stand in air rather than in a table, and everything gets more room. Paper, navy, gold and the square corners stay — this is the same brand with less furniture, not a new one. */ :root{ --mb-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; --mb-serif:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; /* the old variable, repointed */ --mb-rule:#D8E7DE; --mb-rule-strong:#C4D6CB; } h1,h2,h3,h4,.citem-title,.p-hero__heading,.p-hero__stat-n,.step-n,.stat-n, .timeline-when,.person-name,.accordion-label,.recording__t,.csec,.c-defs dt,.c-facts dd{ font-family:var(--mb-display);font-variation-settings:normal;font-optical-sizing:auto} h1,.p-hero__heading{font-weight:600;letter-spacing:-.028em;line-height:1.02} h2{font-weight:600;letter-spacing:-.022em;line-height:1.1} h3,.card h3,.p-doors__heading{font-weight:600;letter-spacing:-.015em} .citem-title{font-weight:600;letter-spacing:-.015em} /* the masthead: one hairline, not a double rule; more air round the lockup */ .site-header{border-bottom:1px solid var(--mb-rule)} .site-header-inner{padding-top:1.6rem;padding-bottom:1.6rem} .nav-top a,.nav-parent{font-weight:500;letter-spacing:0} /* the opening: bigger type, more room, no furniture */ .p-hero,.hero,.c-hero{padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:clamp(3rem,6vw,5rem)} .p-hero__heading{font-size:clamp(2.8rem,6vw,4.6rem)} .p-hero__lede,.lede{font-size:1.2rem;line-height:1.55} .p-hero__eyebrow,.eyebrow,.badge,.blk-eyebrow{letter-spacing:.14em;font-size:.72rem;font-weight:600} /* the figures: air instead of a ruled table */ .p-hero__stats{border-top:0;display:flex;flex-wrap:wrap;gap:1.5rem clamp(1.5rem,5vw,4rem)} .p-hero__stat{border:0;padding:0;display:block} .p-hero__stat-n{font-weight:700;font-size:clamp(2.2rem,3.1vw,3rem);letter-spacing:-.035em;line-height:1} .p-hero__stat-l{font-size:.95rem;color:var(--mb-quiet);margin-top:.35rem;letter-spacing:0;text-transform:none} /* cards and panels: one quiet surface, no lines at all */ .card,.p-doors__panel,.p-columns__cell--tint{background:var(--mb-mist);border:0;padding:2.25rem 2.25rem 2rem} .collection-cards .citem,.finder-results .citem{background:var(--mb-mist);border:0;padding:1.9rem 1.9rem 1.75rem} .c-note,.record-past-note{border-top:0;background:var(--mb-mist);padding:1.4rem 1.6rem} /* the ruled registers become spaced lists with one light divider */ .collection-list .citem,.collection-grid:not(.collection-cards) .citem{ border-top:1px solid var(--mb-rule);padding:1.9rem 0} .collection-list .citem:first-child,.collection-grid:not(.collection-cards) .citem:first-child{ border-top:0} .c-sec{border-top:0;padding-top:clamp(2rem,4vw,3rem)} .record-facts{border-top:1px solid var(--mb-rule)} .record-facts dt,.record-facts dd{border-bottom:1px solid var(--mb-rule);padding-top:1rem;padding-bottom:1rem} .record-back{border-top:0} /* dates and labels: sentence case, quieter, no wide tracking */ .citem-date{letter-spacing:.1em;font-size:.7rem;color:var(--mb-quiet)} .record-meta{letter-spacing:.08em;font-size:.78rem} /* buttons: a softer modern shape, more room, no fill on the secondary */ .btn,form.cantata button,form.cantata [type=submit],.finder-more-btn{ border-radius:6px;padding:.9rem 1.5rem;font-weight:600;letter-spacing:0} .btn-ghost{border-color:var(--mb-rule-strong)} /* bands: more whitespace everywhere */ .band{padding:clamp(3.5rem,7vw,6rem) 0} .band-head{margin-bottom:2.5rem} .p-doors__grid,.grid,.collection-cards{gap:1.75rem} /* the footer keeps navy but loses its density */ .site-footer{padding-top:clamp(2.6rem,4vw,3.6rem)} .footer-col-heading{letter-spacing:.14em} /* A record page's furniture sits at the register's left edge, all of it. The second edition pinned the page body and the fact table; `.record-back` is a direct child of the article, so at 1440 it kept core.css's centred reading measure and stood 240px in from everything above it. One rule for every direct child rather than a list that the next element added will fall off. */ .record-page > *{margin-inline:0} /* ── the mega panel, in this site's own surfaces ─────────────────────────── The engine draws the panel from HOUSE tokens, which is right — a site restyling its menu restyles this too. Two of those tokens are not what the register wants: --card-bg here is paper, so the featured card vanished into the panel behind it, and --card-border is the ink line a card uses, which as a full-width rule under the header is far too heavy. The site says which surface it means; the engine keeps no opinion. Scoped with body.nav-style-mega to match core.css: a bare class loses to a body-scoped one however much later it loads, because order only breaks a tie between EQUAL specificities. */ body.nav-style-mega .nav-mega-panel{border-top:1px solid var(--mb-rule);border-bottom:1px solid var(--mb-rule)} body.nav-style-mega .nav-mega-feat{background:var(--mb-mist)} body.nav-style-mega .nav-mega-col a{color:var(--mb-navy)} body.nav-style-mega .nav-mega-col a:hover{color:var(--mb-gold-ink)} /* The panel's column heading is set by the engine in --color-accent, and this site's accent is a FILL: rose on the panel's chalk ground is 3.1:1 at 11.5px. The same rose that carries words everywhere else carries them here. Any site whose accent is chosen for fills rather than text needs this line, which is worth saying to the engine one day. */ body.nav-style-mega .nav-mega-col-title{color:var(--mb-gold-ink)} body.nav-style-mega .nav-mega-sub{color:var(--mb-quiet)} body.nav-style-mega .nav-mega-col-note{color:var(--mb-quiet)} body.nav-style-mega .nav-mega-util{border-left-color:var(--mb-rule)} body.nav-style-mega .nav-mega-util-link{color:var(--mb-navy)} body.nav-style-mega .nav-mega-util-link:hover{color:var(--mb-gold-ink)} body.nav-style-mega .nav-mega-feat-title{color:var(--mb-navy)} body.nav-style-mega .nav-mega-feat-go{color:var(--mb-navy)} @media(max-width:760px){ body.nav-style-mega .nav-mega-item{border-top-color:var(--mb-rule)} body.nav-style-mega .nav-mega-panel{background:var(--mb-mist);border:0} body.nav-style-mega .nav-mega-feat{background:var(--color-bg)} } /* ── end third edition ── */ /* ── third pass, 2026-09-07: the pages are built from blocks ────────────── The section fronts, the home page's statement band and the contact page are now composed from the editor's own blocks (text, columns, pairs, the hero pattern) instead of one pasted html block, so a paragraph can be clicked, a block inserted or removed. The rules below let those blocks wear the second edition's shapes; nothing here is a new mechanism. */ /* the register's left edge: a text block on a full-width page sits at the column edge, as every band did, not centred in it */ .page-full .b-text__inner{margin-inline:0;padding-inline:0} /* a heading block naming the arrangement under it sits close to it */ .page-body > .b-text + .p-columns{margin-top:calc(1.75rem - var(--space-l))} .page-body > .p-columns{margin-block:var(--space-s) clamp(3rem,6.5vw,5.25rem)} /* a tinted cell is the second edition's card: a quiet mist panel, square */ .p-columns__cell--tint{background:var(--mb-mist);border-radius:0;padding:2rem 2.1rem 2.1rem; display:flex;flex-direction:column;gap:.8rem;align-self:stretch} .p-columns__cell--tint h3{font-size:1.38rem;margin:0} .p-columns__cell--tint p{color:var(--mb-body);font-size:.98rem;line-height:1.6;margin:0} .p-columns__cell--tint .linklist{margin-top:auto;padding-top:.5rem} /* a button written in prose is the site's one button */ .button,a.button{display:inline-flex;align-items:center;gap:.5rem;background:var(--mb-navy);color:#fff; border:1px solid var(--mb-navy);border-radius:4px;padding:.8rem 1.35rem;font-family:var(--mb-sans); font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none} .button:hover,a.button:hover{background:var(--mb-navy-2);border-color:var(--mb-navy-2);color:#fff} /* the prose link colour outranks the button's ink; say it at the same weight */ .b-text__inner a.button{color:#fff} .blk[data-bg="navy"] .b-text__inner a.button{color:var(--mb-navy)} .b-text__inner p > a.button + a{margin-left:1.5rem;font-family:var(--mb-sans);font-weight:600;font-size:.95rem; text-decoration:none;color:var(--mb-navy)} .b-text__inner p > a.button + a::after{content:"\2192";margin-left:.45rem;display:inline-block} .b-text__inner p > a.button + a:hover{text-decoration:underline} /* a dressed block is a band: the band's own air, once */ .page-body > .blk[data-bg]:not([data-bg="paper"]){--blk-pad:clamp(3rem,6.5vw,5.25rem);--blk-pad-x:0} .page-body > .blk[data-bg]:not([data-bg="paper"]) .b-text{padding-block:0} /* a WIDE dressed text block with a heading is a statement: the words it names sit beside the heading, not under it (the split of the second edition — the navy band on home, the mentorship band on For Clerks) */ .page-body > .blk:has(> .blk-head + .b-text--wide){display:grid;grid-template-columns:5fr 7fr; gap:clamp(2rem,5vw,4rem);align-items:start} .page-body > .blk:has(> .blk-head + .b-text--wide) > .blk-head{margin:0} .page-body > .blk:has(> .blk-head + .b-text--wide) > .blk-head h2{font-size:clamp(2rem,3.6vw,2.9rem)} @media(max-width:760px){.page-body > .blk:has(> .blk-head + .b-text--wide){grid-template-columns:minmax(0,1fr)}} .blk[data-bg="navy"] .b-text__inner p{color:#C3DACB} .blk[data-bg="navy"] .b-text__inner a{color:#fff} .blk[data-bg="navy"] .button,.blk[data-bg="navy"] a.button{background:#fff;color:var(--mb-navy);border-color:#fff} .blk[data-bg="navy"] .button:hover{background:var(--mb-gold-light);border-color:var(--mb-gold-light);color:var(--mb-navy)} .blk[data-bg="navy"] .blk-eyebrow{color:var(--mb-gold-light)} .blk[data-bg="navy"] .blk-head h2{color:#fff} .blk[data-bg="navy"] .blk-lede{color:#A9C9B7} /* the pairs block reads as the register's fact rows */ .pairs dd{font-family:var(--mb-serif);font-size:1.15rem;font-weight:500;color:var(--mb-navy)} /* a note beside the prose keeps its gold rule, at the column edge */ .page-body > .c-note{margin-block:var(--space-s)} /* ── end third pass ── */ /* Contrast, measured: the engine paints these three with the site ACCENT, and this site's accent is a FILL (#F0567A: 3.11:1 at 11.5px on the panel, 2.67 on mist). The site rule that fixes it has the SAME specificity as the engine's, so source order decides it; prefixed with html here so it cannot lose a tie either way. V-03, 2026-09-07. */ html body.nav-style-mega .nav-mega-col-title{color:var(--mb-gold-ink)} html body .footer-col-heading{color:#FBD9E1} /* This line does NOT win: .blk[data-bg] .blk-eyebrow (0,3,0) out-specifies html body .blk-eyebrow (0,1,2), so the ground's --blk-quiet paints it. The real fix is the mist ground's token above. Kept only for the undressed case. */ html body .blk-eyebrow{color:#4A5C53} /* ── Cantata admin skin, v1 ────────────────────────────────────────────── The house dress for the engine's admin screens: pine left rail, Bricolage Grotesque headings, chalk paper. Pure CSS — same furniture, Cantata's look. Repainted 2026-09-08 to the site's Field Guide palette; it was navy and gold while the site it administers was pine and rose, and Cam reads the two on the same screen. Values and the reasoning are in the token block. MASTER COPY. The copy inside each site's site.config.json (design.custom_css, between the "Cantata admin skin" markers) is generated from this file by inject.py in this folder. Edit HERE, then re-run the injector; never edit the injected copy by hand. CAMRO / /assets/images/camro-logo-reverse.png are replaced at injection time. Every rule is guarded with html:not([data-adm-skin=classic]) - the paired snippet (cantata-snippet.html, injected into snippets.head) sets that attribute from localStorage before paint and draws the two rail extras: the logo home link and the Appearance switch. Classic mode = the engine's stock admin, chrome and all. Scoping: rules on .adm-* / #cb-adm-* / #mm-* only ever match admin-screen DOM. Page-level moves (hiding the site chrome, the rail layout) are gated behind body:has(nav.adm-bar), which matches only on admin pages; browsers without :has() simply keep the site chrome and the top bar, restyled. Selectors carry a leading `body`/`main` on purpose: the engine's admin stylesheet is inline in the page body, AFTER this file, so equal specificity would lose. Do not "simplify" them away. */ /* — the palette and type, in one place ————————————————————————————— Added 2026-09-08. The desks were still navy-and-gold while the site had moved to Field Guide (pine, mint, chalk, rose; Bricolage Grotesque over Instrument Sans), so the back end read as a different product from the site it administers. Palette and type only: no structure, no layout. EVERY VALUE HERE WAS MEASURED, NOT PICKED BY EYE. The constraint is 4.5:1 for text under 18px and 3.0:1 for large, and two of them decided the design rather than merely passing it: - ROSE IS A FILL, NEVER SMALL TEXT ON PINE. #F0567A on pine is 2.88:1. The old gold was a LIGHT accent on a dark rail; rose is a dark accent, so the rail's marker is --ac-mark, a tint that clears 5.14:1, and the rose itself only ever appears as a background. - TEXT ON ROSE IS INK, NOT WHITE. White on rose is 3.32:1 and fails. Ink clears 4.92:1. The hover therefore goes LIGHTER (7.10:1), because a hover that darkened would force the text colour to flip mid-gesture. Both fonts are already served by the site (site.config.json loads Bricolage Grotesque and Instrument Sans), so the desks inherit them rather than asking for another download. */ html:not([data-adm-skin=classic]) body { --ac-pine: #0B4F3A; /* rail, headings, links, primary fills */ --ac-deep: #08382A; /* the pressed/hover state of a pine fill */ --ac-chalk: #F5F8F4; /* the page under the desks */ --ac-paper: #FFFFFF; /* a card on that page */ --ac-mint: #DCEAE0; --ac-body: #2C3A32; /* body text on light — 11.2:1 on chalk */ --ac-muted: #455A4E; /* small print on light — 6.9:1 on chalk */ --ac-line: #D3E2D8; /* hairline between rows */ --ac-line-strong: #BBCFC1; /* a control's own edge */ --ac-on-pine: #EAF3EC; /* text on the rail — 8.5:1 */ --ac-on-pine-soft: #A8C7B6; /* the rail's quietest link — 5.3:1 */ --ac-on-pine-dim: #B9D2C3; /* rail section labels — 6.0:1 */ /* THE MARKER IS SIZED AGAINST THE HIGHLIGHTED ROW, NOT THE RAIL. It only ever appears on the current item, and that row is pine under 13% white — a LIGHTER ground than the rail itself. Measured against the rail this was #F6A9B8 at 5.14:1 and looked settled; on the row it actually sits on it was 3.60:1 and failed, four times, on a real desk. Sized against the row: 6.97:1 on the rail, 4.88:1 where it lives. */ --ac-mark: #FFD0DA; /* THE ALERT NUMERAL — the count on a rail item that needs attention (Go live's blockers, New content's waiting submissions). This line read `var(--ac-alert)` — a custom property naming ITSELF, which is a cycle, so the token was never a colour and `color: var(--ac-alert)` fell back to INHERIT. Measured in a rendered rail: the badge came out #B9D2C3, the ordinary rail link colour, 1.06:1 from the plain counts beside it. It passed contrast at 5.96:1 the whole time, which is why nothing caught it — the failure was semantic, not a ratio. A checker cannot see a warning that has quietly stopped being one. #FFB4AB is the value the comment was written for and the engine's own alert tint (_shell.njk), so skin and engine agree on the hue. It is sized against PLAIN PINE and not against the lighter current row, where it measures 3.95 — because the current row never shows it: the a[aria-current] .adm-n rule outranks it and paints --ac-mark instead. That was measured in the browser, not counted off the selectors. Do not "fix" this to a lighter value on the row's account. */ --ac-alert: #FFB4AB; /* something needs attention — 5.6:1 on pine */ --ac-rose: #F0567A; /* accent FILL only */ --ac-rose-lift: #F58BA3; /* its hover — lighter, so ink still reads */ --ac-ink: #12231C; /* the only text colour allowed on rose */ --ac-font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --ac-font-text: 'Instrument Sans', system-ui, sans-serif; } /* — the admin page itself: full-screen, site chrome off — */ html:not([data-adm-skin=classic]) body:has(nav.adm-bar) { background: var(--ac-chalk); } html:not([data-adm-skin=classic]) body:has(nav.adm-bar) .header-utility, html:not([data-adm-skin=classic]) body:has(nav.adm-bar) header.site-header, html:not([data-adm-skin=classic]) body:has(nav.adm-bar) footer.site-footer, html:not([data-adm-skin=classic]) body:has(nav.adm-bar) .breadcrumb { display: none; } html:not([data-adm-skin=classic]) body:has(nav.adm-bar) main { /* padding, not margin-left: the engine gives main its full width, so a margin adds 248px of horizontal scroll; padding stays inside the box */ margin: 0; padding: 46px 56px 60px 304px; max-width: none; min-height: 100vh; box-sizing: border-box; } /* the studio's corner ribbon lands on the rail's corner — the rail owns it now */ html:not([data-adm-skin=classic]) body:has(nav.adm-bar) .preview-ribbon { display: none; } /* AN rgba() IS A SECOND SPELLING OF A COLOUR, and the first pass missed every one of them: the palette swap replaced hex literals, so six values written as rgba() kept the old navy-and-gold. Five were invisible; the sixth was not. The rail's count numerals were pale blue at 62% over pine, which the contrast sweep caught at 3.77:1 against a 4.5 requirement, four times on one screen. Translucency is what did it — the alpha drags any colour toward the ground behind it, so a token that passes solid can fail at 62%. The rail's small text is therefore SOLID, never veiled. */ /* — the rail — */ html:not([data-adm-skin=classic]) body nav.adm-bar { position: fixed; left: 0; top: 0; bottom: 0; width: 248px; z-index: 60; box-sizing: border-box; overflow-y: auto; /* nowrap: the shell's bar wraps, and a wrapping column silently starts a second column beside the first once the studio's item list outgrows the viewport — scroll instead */ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; background: var(--ac-pine); margin: 0; padding: 26px 14px 18px; border-bottom: 0; font-family: var(--ac-font-text); } html:not([data-adm-skin=classic]) body nav.adm-bar::before { content: "CAMRO\A site admin"; white-space: pre-line; font-family: var(--ac-font-display); font-size: 1.3rem; line-height: 1.5; color: var(--ac-on-pine); padding: 0 10px; margin-bottom: 22px; } html:not([data-adm-skin=classic]) body nav.adm-bar::after { content: "Cantata"; margin-top: auto; padding: 16px 10px 0; font-weight: 700; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ac-mark); } html:not([data-adm-skin=classic]) body nav.adm-bar a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ac-on-pine-dim); font-size: .95rem; font-weight: 600; } /* HIDDEN MEANS HIDDEN ON THE RAIL. * * The rule above sets `display: flex` on every rail link, which beats the user * agent's [hidden]{display:none} — so NO rail link could be hidden by the * attribute, including the ones the ENGINE ships hidden. Modules is shipped as *