/* BRAND LAYER (mirror preview, Direction A) */ /* ==== 2026-09-18 REBUILD (agent A3, REBUILD_PLAN_2026-09-18 W2.2). THE MASTHEAD IS BURGUNDY. ==== `[RYAN 2026-09-18]` "ONLY do the new branding kit app drop the other one. FIX." SUPERSEDED, KEPT HERE IN FULL SO ONE LINE PUTS IT BACK: .hdr{background:#fff !important;padding:0 !important;box-shadow:none !important; border-bottom:1px solid #ececec !important;position:sticky;top:0;z-index:40} That single `background:#fff !important` is what kept the masthead white for 49 days. app.css:126 has said `background:var(--bw-burgundy)` since A1's pass tonight and could never be seen, because brand.css loads after app.css (index.html) and carried importance on top of order. The `!important`s are DROPPED, not re-pointed: nothing else in the wall declares `.hdr` background except app.css:126, and the two now agree, so importance has nothing left to beat. Burgundy #7A2636 / Warm Cream #FAF6EC = 9.02:1. Hairline Rule Burgundy #904A57, non-text ornament between the cream credit strip and the cream canvas, not a boundary anything depends on reading. */ .hdr{background:var(--bw-burgundy);color:var(--bw-cream);padding:0;box-shadow:none;border-bottom:1px solid var(--bw-rule-burgundy);position:sticky;top:0;z-index:40} /* REBRAND 2026-08-30: .hdr-row/.bw-mark/.hdr-title/.hdr-sub were display:none because the .bw-banner MLK image below carried the visible masthead instead. Ryan, 2026-08-30: remove the MLK banner and all Beloved Woonsocket branding including the nav. Once WIRE_rebrand_FINAL.txt's index.html edit removes the .bw-banner block, THIS is the only masthead left, so it must be visible or the header collapses to an empty bar. Un-hidden here so the CSS is ready the moment the HTML lands; harmless no-op today because .bw-banner (still in index.html until that WIRE edit is applied) sits on top of it in source order with its own background, same as before. Undo: restore the four `display:none !important` half-rules from brand.css.BAK_rebrand_20260830_165845Z. */ /* ================================================================================================== * RETIRED AT SOURCE 2026-09-04, THE MASTHEAD. These sixteen lines dressed the 2026-08-30 text masthead: * the "WC" letter badge, an uppercase 19px title, the subtitle, and a 10.5-11px credit line that * measured 2.98:1 in light and 4.46:1 in dark (both fail AA) with 14-16px logos nobody could read. * Replaced by the block at the end of this file (2026-09-04 THE MASTHEAD). Inner comment markers below * are written /-* and *-/ so this one comment can hold the whole block. Kept on disk, never deleted. * Undo: brand.css.bak_20260904_premasthead in NEVER_OVERWRITE_BACKUPS/masthead_2026-09-04/. .hdr-row{padding:10px 14px;display:flex !important;align-items:center;gap:10px} .bw-mark{display:flex !important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#2C4A6E;color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px;flex:none} .hdr-title{display:block !important;font-size:19px;font-weight:800;color:#1a2733;margin:0;line-height:1.2} .hdr-sub{display:block !important;font-size:12.5px;color:#5b6b7a;margin:1px 0 0} /-* powered-by credit line (Margaux Morisseau, City of Woonsocket Human Services Director, 2026-08-28: "powered by Beloved Woonsocket and the City of Woonsocket"). Deliberately quiet: smaller than the subtitle, muted colour, one line. Populated by poweredby_2026-08-30.js from CITY_CONFIG.poweredBy; empty and invisible (rendering nothing, zero height) until that script runs and the WIRE'd container exists in index.html. DECISION 1, 2026-08-30: the City seal (org2Logo) is now a real, on-disk, unmodified asset -- .powered-by-mark sizes it and its still-unpicked Beloved Woonsocket counterpart (org1Logo) identically so whichever renders (either, both, or neither -- poweredby_2026-08-30.js only emits an when a Logo path is set) sits inline with the text at the same small size. *-/ /-* 2026-08-30, TAP-SAFETY PASS: "one line" was the intent (comment above) but was never checked at 320px, the narrowest phone this app supports. Measured this session, real headless Chromium, 320x568: the credit line text wrapped to 2-3 lines, growing `.hdr` from its intended ~14-16px addition to 46.9px, which pushed the sticky header's real height past what any existing reservation accounted for and stole all twelve Help doors (falsify_occlusion_2026-08-28.mjs, this session: 0 of 12 opened, every one landing on #powered-by / .powered-by-mark). Truncating with an ellipsis keeps the exact same real, verified, un-fabricated text (LAW L6 - nothing here is invented or reworded, only visually clipped when the viewport is too narrow to show all of it) and restores the single-line height "Deliberately quiet: ... one line" already asked for. *-/ #powered-by{font-size:11px;color:#8a97a6;margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #powered-by .powered-by-mark{width:16px;height:16px;vertical-align:-3px;margin-right:3px;border-radius:2px} .phone.dark .hdr-title{color:#eef2f7} .phone.dark .hdr-sub{color:#9fb0c2} .phone.dark #powered-by{color:#7c8a99} .phone.dark .bw-mark{background:#3B4A5E} * ---- END RETIRED 2026-09-04 ---- */ /* 2026-09-18 (A3): the three `.bw-banner` rules below match ZERO elements today. `.bw-banner` left index.html with the 2026-08-30 rebrand (WIRE_rebrand_FINAL.txt STEP 2) and `document.querySelector('.bw-banner') === null` is confirmed in settingsgear_2026-09-02.css's own header. They are kept on disk per L5 and re-pointed to brand tokens anyway, so that if the banner is ever restored it does not bring a white disc and a blue-grey ring back with it. The `!important` markers are dropped: they existed to climb over the old white masthead, which is gone. SUPERSEDED VALUES: .bw-banner background:#fff; .bw-banner .hdr-gear border 1px solid #d9dce1, background:#fff, color:#2b2f36, box-shadow:0 2px 7px rgba(0,0,0,.2), all !important. */ .bw-banner{position:relative;width:100%;background:var(--bw-burgundy);display:block;overflow:hidden} .bw-banner img{width:100%;max-width:100%;height:auto;display:block} .bw-banner .hdr-gear{position:absolute;top:8px;right:8px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--bw-cream);box-shadow:none;display:inline-flex;align-items:center;justify-content:center} .bw-banner .hdr-gear .ic{font-size:19px;margin:0} .bw-banner .hdr-gear .lb{display:none !important} /* nav: 5 identical badges, no text labels, middle pops by color. [ATTRIBUTION RETRACTED 2026-08-08] This line used to end "(Ryan)". It is not his. HIS actual words, RYAN_BACKLOG_2026-08-01.md lines 4 to 6, dated 2026-08-01, ask for the OPPOSITE of middle-only colour: "instead of just the middle help being in color, what if they are ALL color and the selected one (app opens on home) is the black-and-white version to differentiate it? Make it pop? I can work with the artist for more badges, a home instead of a heart." This comment is a SESSION'S description of what the code does, wearing his name. That is the wordmark pattern: three sessions once built against a want he never expressed because a comment claimed him. The code below is UNCHANGED and still correct as a description of what ships today. What changed is that it no longer says he asked for it. Not built yet, and it is not a filename swap: app.js showView() and applyNavCustom() never swap the img src on selection, so the colour split is static, not a selected state. Only two nav images exist for five slots and the coloured one is a red heart, which collides with the red-is-crisis-only rule. OI-82 is his to rule on, OI-111 was this retraction. */ .nav-inner{padding:5px 2px;gap:2px} /* 2026-09-18 (A3): `background:none !important` RETIRED FROM THIS LINE. SUPERSEDED VALUE: .nbtn{min-height:68px;display:flex;align-items:center;justify-content:center;background:none !important} It is a leftover of the circle-behind-icon nav that stopped existing on 2026-08-30, and it is the reason THREE other files carry an `!important` they did not want: nav_rebuild_2026-08-30.css .nbtn.active background ("This is the one !important in this file") navcopy_2026-09-02.css .nbtn:active and .nbtn.pressed background (JANK_NAV_2026-09-02: the press state never painted at all until they added it) All three are dropped tonight in their own files. This is `[RYAN 2026-09-02 CARD_DECLAN]` "go fix things at the source and delete the patches that exist only to work around them" applied to the nav's selected state, which is also the state the brand has to colour gold. Undo: put `background:none !important` back on the line below and the three !importants return. */ .nbtn{min-height:68px;display:flex;align-items:center;justify-content:center} .nbtn{position:relative} /* ================================================================================================== * RETIRED AT SOURCE 2026-09-02, NAV COPY. THIS IS THE ROOT THE OTHERS WERE ALL WORKING AROUND. * `[RYAN 2026-09-02]` "Open the wall files up. Go fix things at the source and delete the patches * that exist only to work around them", and the same day, about agingwellinc.org's bottom nav, * "Just copy the whole thing as closely as you can." * * These two lines drew the nav label as a floating dark chip: position:absolute, left:50% + * translateX(-50%), white-space:nowrap, 8px of padding a side, 11px type, white on rgba(15,20,28,.9) * -- and a RED chip on Help. Because it was absolute and nowrap, a long translated word walked out * of its own chip and over its neighbour's; because it was 11px it sat one pixel under the app's own * twelve-pixel readability floor and was the ONLY declaration in the whole app that did. * * FIVE SEPARATE BLOCKS EXISTED SOMEWHERE ELSE PURELY TO FIGHT THESE TWO LINES, and every one of * them is retired today with the same date stamp: * app.css .phone.text-large/.text-xlarge .nav .nbtn .lb {position:static;transform:none;...} * app.css html[data-nav-labels="size12"|"short12"] .nav .nbtn .lb {font-size:12px} * app.css html:not([lang=pl]):not([lang=el]):not([lang=vi]) .nav .nbtn .lb {font-size:12px} * app.css .nav .nbtn-help .lb / .nav .nbtn.active .lb {background:... !important} x3 * nav_rebuild_2026-08-30.css's eleven-property !important reset of .lb, which its own comment * calls "FULL RESET of brand.css:28's floating pill-chip label" (that reset STAYS -- it is what * makes the label an ordinary centred word, and it now has nothing to fight) * The label's look is defined in exactly one place from today: navcopy_2026-09-02.css, copied value * for value off the nav he pointed at. * * Kept on disk, commented, never deleted. Undo: uncomment these two lines and the five blocks named * above. Backup: brand.css.BAK_NAVCOPY_20260902. .nbtn .lb{display:block !important;position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:11px;line-height:1;font-weight:800;letter-spacing:.3px;color:#fff;background:rgba(15,20,28,.9);padding:3px 8px;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.4);text-shadow:none;white-space:nowrap;pointer-events:none} .nbtn-help .lb{background:#c1121f !important;color:#fff !important} * ---- END RETIRED 2026-09-02 ---- */ .nbtn .ic{line-height:0} .nav .navico{width:54px;height:54px;object-fit:contain;display:block;margin:0 auto} .nav .navico-help{filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.3))} .nbtn.active .ic{background:none !important} /* crisis buttons hardcoded to brand deep red, all modes (fixes dark-mode 2.61:1) */ .res-crisis-acc .cq.call,.phone.dark .res-crisis-acc .cq.call,.phone:not(.appearance-set) .res-crisis-acc .cq.call, .res-crisis-acc .cbtn.call,.phone.dark .res-crisis-acc .cbtn.call, .res-crisis .cpill.call,.phone.dark .res-crisis .cpill.call,.phone:not(.appearance-set) .res-crisis .cpill.call{ background:#C00C0C !important;color:#fff !important;border-color:#C00C0C !important} /* ==== BRAIN 5.9 banner cap (reversible) ==== */ .bw-banner { max-width:520px !important; margin:0 auto !important; } /* ==== END ==== */ /* ==== 2026-08-21 DARK-MODE HEADER, BROKEN SINCE 2026-08-04 ==== The `.hdr{background:#fff !important}` at the top of THIS file beat app.css:801 `.phone.dark .hdr{background:#16233a}` because brand.css loads AFTER app.css (index.html:221 then 223) and the app.css rule carries no !important. Dark mode wore a white header for 17 days. Fixed HERE: same file, later in the cascade, dark-scoped, !important, so dark wins by importance plus order and light mode is untouched. .bw-banner goes transparent in dark (it is #fff at line 5 above, no !important, and on a phone it fills the whole header) so the 12px padding frame (app.css:799) shows the navy through it: the "clean rounded card on a deep-navy header" app.css #5 intended. No auto-dark @media twin on purpose: since 2026-08-18 boot defaults an unset appearance to light and adds .appearance-set (app.js:198), and app.css itself has no auto-dark .hdr rule to mirror. Undo: delete this block. */ /* 2026-09-18 (A3): SUPERSEDED VALUE `.phone.dark .hdr{background:#16233a !important}`. The masthead stays Burgundy in dark (BRANDSPEC 2026-09-17, Settings section: "Dark mode: swap to Ink canvas, #102F3D cards, #FAF6EC text, gold accents; Burgundy masthead stays"). Cream on Burgundy is 9.02 in every theme, so the one masthead serves all four. The `!important` is dropped with the white rule it was built to beat; app.css:1745 says the same thing and the two agree. */ .phone.dark .hdr{background:var(--bw-burgundy)} .phone.dark .bw-banner{background:transparent} /* ==== 2026-09-03 THE MASTHEAD COMPACTS ONCE SHE SCROLLS, STAYS COMPACT UNTIL TAPPED ==== `[RYAN 2026-09-03]` "Yes. Compact the masthead once she scrolls, stays compact until tapped, same as my banner rule." His banner rule, `[RYAN 2026-08-13]`: "The mlk logo has to change height because it is too big; but once it goes does it should stick until clicked on to expand it I think." The one-way .compact class on .hdr has existed since 2026-08-13 (index.html, the inline script after "#6 (Ryan)"); the MLK banner it dressed left on 2026-08-30 and nothing dressed the text masthead that replaced it, so .hdr.compact toggled for four days and changed nothing. This is that rule, extended to the text masthead, on phones only (desktop is untouched; his rule is about the phone). ZERO LAYOUT SHIFT, BY CONSTRUCTION, NOT BY ANIMATION. Nothing that stays visible moves or changes size: - the row is top-aligned in BOTH states, so the WC mark, the title and the 44px gear sit at the same y whether the masthead is full or compact (align-items:center would have slid the gear up 48px on collapse and cost a 0.016 shift, measured 2026-09-03); - compact only hides the subtitle and the powered-by line (a hidden node is not a shifted node) and drops the row's bottom padding; the title keeps its font, its wrap and its position exactly; - the height changes in one frame, no transition (a height animation is a layout-shift generator by definition), and the inline script moves scrollY by exactly the pixels the header lost in the same task, with scroll anchoring off for that frame so Chrome does not compensate twice (Safari never compensates, so the script's own move is the one that runs everywhere). MEASURED HEIGHTS, real on-screen px, getBoundingClientRect through the phone's own zoom (_HARNESS/_stack_2026-09-03/mast_2026-09-03.jsonl, 35 cells, five sizes, en/pl/ar/el/km): compact 56.6px at 100% text at EVERY phone width, 84.4px at 150% and 200%; full 118.8px (390x844 and 360x640 en), 151.7px (320x568 en, the name takes two lines), 227px at 200% text, 197.9-206.8px at 430x932. So the masthead gives back 47-63px at 100% and 113-163px at 150/200% - the single largest block of chrome this app has ever returned to the reader. Nothing in it goes below 44px, per `[RYAN 2026-09-02]` "Keep 44px. Screen space matters more.": the gear measures 44px on a phone and 66px at 150/200%, hit-testable at its centre in all 35 cells. Desktop is deliberately untouched: 1280x800 saves 0px and shifts 0, his rule is about the phone. Measured: _HARNESS/_stack_2026-09-03/ (STACK_2026-09-03.md). Undo: delete this block and restore index.html from NEVER_OVERWRITE_BACKUPS/stack_2026-09-03/. */ @media (max-width:900px){ /* 2026-09-04: align-items:flex-start and padding-bottom:0 retired here and re-stated in the 2026-09-04 block below: the credit line is no longer inside the title cell, so the row is 44px in BOTH states and can be centre-aligned with nothing moving. The subtitle is hidden in both states now. */ .hdr.compact .hdr-sub, .hdr.compact #powered-by{display:none !important} /* the whole row is the tap target for "show the full masthead and go to the top"; the gear is excluded in the script. The WC mark is the keyboard and screen-reader door (role=button, tabindex, set there). */ .hdr.compact .hdr-row{cursor:pointer} } /* ==== END 2026-09-03 MASTHEAD ==== */ /* ==== 2026-09-04 THE MASTHEAD: SEAL, NAME, GEAR, CREDIT. A PUBLIC UTILITY. ==== `[RYAN 2026-09-04]` "I would like to see at the top of the home screen a top with the new logo margaux just gave me and a cool font and just an awesome app that helps real people. i have said for a bit i see this after me and mine are ok a public utility, think that way and crush" Margaux Morisseau, City of Woonsocket Human Services Director, 2026-08-28: "Woonsocket Connect", powered by Beloved Woonsocket and the City of Woonsocket, with both logos. WHAT IT IS. Two rows. Row one never changes height or shape: the City seal at 44px (the masthead logo, ONE swappable file, see index.html "THE MASTHEAD LOGO"), the name in Josefin Sans 700 title case (the face Ryan set his own organisation's name in on agingwellinc.org, already shipped and preloaded, zero new bytes, font-display:optional so it never reflows), and the 44px gear. Row two is the credit line, Margaux's own wording, 12.5px Source Sans Pro at 7.8:1 light and 8.2:1 dark (AA and AAA), the Beloved Woonsocket mark inline at 20px next to its name. The City's mark is the seal directly above, so it is not repeated inline (delete the .pb-org2 rule below to show it inline too). No tagline: a utility has a name and a mark. The subtitle node stays in the DOM, translated in sixteen languages, hidden; one line restores it. COMPACT (his 2026-08-13 banner rule, extended 2026-09-03): row two folds away once she scrolls. Row one is identical in both states, so nothing that stays visible moves, same as 2026-09-03. Compact measures 6 + 44 + 5 + 1 = 56px, which is under the 56.6px it was, so no screen space is spent back. THE NAME CANNOT STACK. overflow-wrap:normal, word-break:normal, hyphens:none on the title, and at the large text steps the row tightens (36px seal, 10px side padding, 8px gaps, 16px name) so the longest word, "Woonsocket", always has a cell to fit in: 320/1.5 = 213px of layout, 20 + 36 + 16 + 44 = 116, leaving 97px for a 90px word. At 320x568 and 100% the name takes two lines at 20px (2 x 22 = 44, the row's own height, so it costs nothing). The 2026-09-01 stacking failure (twenty single letters, 29 x 581px) is the planted bad in _HARNESS/_masthead_2026-09-04/falsify_masthead_2026-09-04.mjs. FOLDED IN: hdrwrap_2026-09-01.css and poweredbyfit_2026-09-01.css are retired (links commented out in index.html, files kept). Their rules live here. Measured: _HARNESS/_masthead_2026-09-04/ (MASTHEAD_2026-09-04.md in LFG4/NEVER_OVERWRITE). Undo: NEVER_OVERWRITE_BACKUPS/masthead_2026-09-04/. */ .hdr .hdr-row{padding:6px 14px 5px;display:flex !important;align-items:center;gap:10px;flex-wrap:nowrap} .hdr .hdr-row>.hdr-mark{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;cursor:pointer} .hdr .hdr-mark .hdr-logo{display:block;width:44px;height:44px;object-fit:contain} .hdr .hdr-mark:focus-visible{outline:3px solid var(--bw-gold);outline-offset:2px} /* 2026-09-18 (A3): was #0048B4. Community Gold on Burgundy 3.71, past the 3:1 WCAG 1.4.11 floor for a non-text focus indicator; cream would also pass at 9.02 but the ring is the brand's accent and this element is display:none today anyway */ .bw-mark{display:none !important} /* the "WC" letter badge, retired 2026-09-04. app.js renderBrand() still writes CONFIG.logo into it; harmless, hidden. */ .hdr .hdr-row>div:nth-child(2){flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:44px} /* 2026-09-18 (A3): THE H1 IS NOW THE ACCESSIBLE NAME ONLY, OFF SCREEN, NEVER display:none. SUPERSEDED VALUE, kept whole so one line restores the text masthead: .hdr-title{display:block !important;font-family:'Josefin Sans','Source Sans Pro',system-ui,sans-serif; font-weight:700;font-size:21px;letter-spacing:0;text-transform:none;line-height:1.1;color:#1a2733; margin:0;padding-top:.12em;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance} The visible name is now the two-voice wordmark A2 typed into index.html directly above this h1. The h1 KEEPS its text, its id and its place in the accessibility tree: app.js renderBrand() still rewrites it per language and a screen reader still reads "Woonsocket Connect" as the page's h1. `display:none` would take it out of the tree, which is exactly the defect org_landing_2026-08-23.js line 589 documents ("the whole document had no VISIBLE h1 while this page was open", WCAG 1.3.1 and 2.4.6). Off-screen positioning is the fix that does not re-open it. clip and clip-path are both set: clip is deprecated but is what older WebKit honours. */ .hdr-title{display:block !important;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0;top:auto;left:auto} /* ==== SOURCE 2026-10-01 THE TAGLINE SWITCH. ONE THING, AND IT WORKS. ==== WHAT STOOD HERE, VERBATIM, NOT DELETED: .hdr-sub{display:none !important} /-* the tagline. A public utility has a name and a mark. Translated node kept; change to display:block to restore. *-/ WHY IT CHANGED. `[RYAN 2026-08-14]` "Woonsocket in your pocket." He named the app himself and a resident sees it nowhere. There were TWO locks and both were in the source agent's files: this rule, and a `hidden` attribute on the div in index.html. Changing either one ALONE did nothing, so if he had tapped "show the tagline" and only one had been fixed it would have looked like he was ignored. It is now ONE switch. HOW TO SHOW IT: put data-tagline="on" on . Nothing else. No CSS edit, no !important. NO !important WAS ADDED. One was REMOVED: `display:none !important` became plain `display:none`, which is enough because, with comments stripped from all six live stylesheets, the only other live rule declaring display on .hdr-sub is the compact-header rule above, which keeps its !important and so still hides the tagline in the compact header in BOTH switch states. That is exactly what "Home only" means. The rule reading `.hdr-sub{display:block !important}` earlier in this file is INSIDE A COMMENT and was never live. STILL OFF BY DEFAULT. Whether to show it is `[RYAN]`'s call and is carded; this pass only made the switch real and measured what it costs. Undo: restore the one line quoted above. */ .hdr-sub{display:none} html[data-tagline="on"] .hdr-sub{display:block} .hdr-credit{padding:0;margin:0} /* padding lives on #powered-by so hiding that one node in compact removes every pixel */ /* 2026-09-18 (A3): colour #46545f -> var(--bw-ink), because the credit line now sits on its own Cream Deep band (see THE CREDIT STRIP block at the end of this file), not on the page. Ink #0D2018 on Cream Deep #EDE7D9 = 13.77:1. THE FACE IS DELIBERATELY NOT CHANGED, AND THIS IS THE MEASUREMENT THAT DECIDED IT. BRANDSPEC 2026-09-17 (Masthead) asks for this strip in DM Sans. It was set to var(--font-sans) during this pass and measured in a real render at five widths: DM Sans is wider than 'Source Sans Pro' at the same size (at 375px the three pieces of the line went 58.6 / 125.5 / 116.7 px to 64.5 / 136.9 / 130.2 px) and the largest size that still fits ONE line fell to 11.0px at 375 and 10.5px at 360, under this app's own 11px floor for this line. `[RYAN 2026-09-10]` "get it on a normal phone all on one line Powered by with the 2 logos" is a measured, asked-for behaviour and a face swap does not get to cost it. BRANDSPEC's own answer is a SHORTER STRING ("With ... and ..." instead of "Powered by ... & the ..."), which would free the room at every width, but that wording is Margaux Morisseau's and it is Ryan's to change, not A3's. So: the brand colour and the brand band land tonight, the brand face on this one 11px line goes on a card. Recorded in A3_CHROME_2026-09-18.md. Undo for the face: `font-family:var(--font-sans)` and retune the clamp below. */ #powered-by{display:block;font-family:'Source Sans Pro',system-ui,sans-serif;font-size:12.5px;line-height:1.4;color:var(--bw-ink);margin:0;padding:0 14px 6px;box-sizing:border-box;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;text-wrap:pretty} #powered-by .powered-by-mark{width:20px;height:20px;vertical-align:middle;margin:0 3px 0 0;border-radius:50%;position:relative;top:-1px} /* 2026-09-10: the 44px seal is off the top, so the City's mark now shows inline at 20px beside its name (the old .pb-org2{display:none} rule is removed). */ .hdr .hdr-row>.hdr-mark{display:none !important} /* 2026-09-10 SEAL OFF THE TOP: row one is the name and the gear only */ #powered-by .pb-lead{display:block} /* 2026-09-10: "Powered by" on its own line */ #powered-by .pb-org{white-space:nowrap} /* 2026-09-10: a logo and its name never split across lines ("City / of Woonsocket" at 320px) */ /* THE GEAR, ICON ONLY, AT EVERY SIZE. Its text label has been white on a white masthead since 2026-08-30 (0:1 contrast, invisible) and still took 51-91px of the row, which is what wrapped the name at 390px. settingsgear_2026-09-02.css hid it at the large text steps only; this is the same fix at 100%. The accessible name is the button's aria-label="Settings", unchanged. 44x44 [RYAN 2026-09-02]. The icon draws 40px inside it, the size his own site's gear is. */ .hdr .hdr-gear{min-width:44px;width:44px;min-height:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%;border:none;background:transparent} .hdr .hdr-gear .lb{display:none !important} .hdr .hdr-gear .ic{font-size:0;line-height:0;display:flex} .hdr .hdr-gear .ic svg{width:40px;height:40px} /* 2026-09-18 (A3): THIS `!important` PAIR IS KEPT, AND HERE IS THE PROOF OF WHAT IT BEATS. It was dropped during this pass and the dark gear came back as a grey disc in a grey ring. Measured in a real render: `getComputedStyle('.hdr-gear')` returned background rgb(36,38,42) and border rgb(58,61,66), the OLD dark surface and border literals. The winning rule is `scale_2026-08-27.css:83 .phone.dark .hdr-gear{background:#24262a !important;border-color:#3a3d42 !important}`. That file is in the plan's A4a row but is NOT in tonight's A4 brief, so nobody owns it and nobody can retire those two literals at their source tonight. Until someone does, importance is the only thing that reaches them, and this selector then wins on specificity (0,3,0 against 0,2,0). HANDOFF TO WHOEVER TAKES scale_2026-08-27.css: retire line 83 and this `!important` pair can go. Constraint 7 allows a kept `!important` whose comment proves what it beats. This is that. */ .phone.dark .hdr .hdr-gear{background:transparent !important;border-color:transparent !important} /* 2026-09-18 (A3): `.phone.dark .hdr-title{color:#eef2f7}` RETIRED. The h1 is off-screen in every theme now, so it has no colour to have. Kept as this comment, not deleted. */ .phone.dark #powered-by{color:var(--bw-cream)} /* 2026-09-18 (A3): was #aebdcc. Warm Cream on the dark credit band #1A3A4A = 11.13:1 */ @media (max-width:359px){ /* the name takes two lines here; 2 x 19 x 1.08 + the .12em cap nudge = 43.3px, inside the row's own 44 */ .hdr-title{font-size:19px;line-height:1.08} } /* DESKTOP (above 900px, where the masthead never compacts): one 56px band. .hdr-row becomes display:contents so the seal, the name, the credit line and the gear are all items of one flex row, credit before gear. The white band stays full width; the content is centred at 1140px by the padding, same width app.css gives .hdr-row at that size. */ @media (min-width:901px){ .hdr{display:flex;align-items:center;gap:14px;padding:6px max(14px,calc(50% - 570px)) 5px !important} .hdr .hdr-row{display:contents !important;padding:0 !important;margin:0 !important;max-width:none !important} .hdr .hdr-row>.hdr-mark{order:0} .hdr .hdr-row>div:nth-child(2){order:1;flex:1 1 auto} .hdr .hdr-credit{order:2;flex:0 1 auto;max-width:60%} .hdr .hdr-right{order:3;margin-inline-start:0} #powered-by{padding:0;text-align:end} } /* large text: the name is a wordmark, not body copy. 16px x the 1.5 zoom is 24 real px, more than the 21px it is at 100%. The seal drops to 36 (54 real px, still bigger than at 100%). The gear stays 44 [RYAN 2026-09-02]. */ @media (max-width:900px){ .phone.text-large .hdr .hdr-row,.phone.text-xlarge .hdr .hdr-row{padding-left:10px;padding-right:10px;gap:8px} .phone.text-large .hdr .hdr-row>.hdr-mark,.phone.text-xlarge .hdr .hdr-row>.hdr-mark{flex-basis:36px;width:36px;height:36px} .phone.text-large .hdr .hdr-mark .hdr-logo,.phone.text-xlarge .hdr .hdr-mark .hdr-logo{width:36px;height:36px} .phone.text-large .hdr-title,.phone.text-xlarge .hdr-title{font-size:16px} .phone.text-large #powered-by,.phone.text-xlarge #powered-by{padding-left:10px;padding-right:10px} } /* ==== END 2026-09-04 MASTHEAD ==== */ /* 2026-09-10 TIGHTER CREDIT. [RYAN 2026-09-10] "less space between the Woonsocket Connect and Powered by, make it nice". Row one keeps its height (the gear sets it), so the credit line is pulled up into the empty space under the name. English: the first credit line is only "Powered by", short and left, so it can rise past the gear's bottom edge without touching it. Other languages start with the full org line, so they rise only to the gear's bottom edge. Phone widths only; the desktop masthead is one row. Undo: delete this block. */ /* 2026-09-18 (A3): THE THREE NEGATIVE MARGINS GO TO ZERO. SUPERSEDED VALUES: html[lang="en"] .hdr #powered-by{margin-top:-11px} html[lang="en"] .phone.text-large/.text-xlarge .hdr #powered-by{margin-top:-15px} html:not([lang="en"]) .hdr #powered-by{margin-top:-5px} HIS ASK IS NOT REOPENED, IT IS ANSWERED BETTER. `[RYAN 2026-09-10]` "less space between the Woonsocket Connect and Powered by, make it nice" was solved by dragging the credit line UP into the empty space under the name, because both sat on one white field and the gap was the only cue that they were two things. They are no longer one field: the wordmark is on Burgundy and the credit is on its own Cream Deep band that starts the pixel the Burgundy stops. The gap he asked to close is now ZERO by construction, and a negative margin here would drag cream text up onto the Burgundy row (Ink on Burgundy is 1.75:1, unreadable) and pull the band's own top edge over it. `[RYAN 2026-09-10]` "get it on a normal phone all on one line Powered by with the 2 logos" is a SEPARATE rule and is untouched: the clamp font-size, the inline "Powered by" and the 18px marks all stay exactly as they are in the block below. Undo: restore the three margin-top values above. */ @media (max-width:900px){ html[lang="en"] .hdr #powered-by{margin-top:0} html[lang="en"] .phone.text-large .hdr #powered-by,html[lang="en"] .phone.text-xlarge .hdr #powered-by{margin-top:0} html:not([lang="en"]) .hdr #powered-by{margin-top:0} .hdr .hdr-right{position:relative;z-index:1} /* the gear stays on top of the raised credit line, so its whole 44px circle still takes the tap */ } /* 2026-09-10 ONE LINE ON A NORMAL PHONE. [RYAN 2026-09-10] "get it on a normal phone all on one line Powered by with the 2 logos". At normal text size the credit is one line: "Powered by", both marks at 18px, both names. The text size follows the screen width so the line fits: with "&" it is 12.5px at 396px and wider, about 12.4 at 390, 12 at 375, 11.6 at 360, never under 11. Below 360, or with Large / Extra large text on, it wraps as before (a mark never splits from its name). The line now runs under the gear, so it starts at the gear's bottom edge (-7px), and the name sits 3px lower in both masthead states so the gap stays small and nothing moves when the header folds. Undo: delete this block. */ @media (max-width:900px){ .phone:not(.text-large):not(.text-xlarge) .hdr #powered-by .pb-lead{display:inline} /* 2026-09-18 (A3): margin-top -7px -> 0, same reason as the block above (the credit has its own band now and must not ride up onto the Burgundy row). The clamp and the 18px marks, which are what actually keep the line on ONE line on a normal phone, are untouched. */ /* 2026-09-18 (A3): THE CLAMP IS UNCHANGED. Only `margin-top:-7px` becomes `0`, for the reason in the block above. The clamp was tuned on 2026-09-10 against 'Source Sans Pro', the face this line keeps (see the note on #powered-by above), so it is still the right formula and re-measuring it after this pass gave the same one-line behaviour it had before: 1 line at 360, 375, 390 and 430, and the same wrap at 320 that it has always had. */ .phone:not(.text-large):not(.text-xlarge) .hdr #powered-by{font-size:clamp(11px,calc((100vw + 104px) / 40),12.5px);margin-top:0} .phone:not(.text-large):not(.text-xlarge) .hdr #powered-by .powered-by-mark{width:18px;height:18px} /* 2026-09-18 (A3): `.hdr .hdr-title{position:relative;top:3px}` RETIRED. It nudged the visible name down by 3px to sit nicely over the raised credit line. The h1 is off-screen now and `position: relative` would fight the `position:absolute` that puts it there. Kept as this comment. */ } /* ================================================================================================== * 2026-09-18, THE TWO-VOICE WORDMARK AND THE CREDIT STRIP. AGENT A3, REBUILD_PLAN_2026-09-18 W2.2. * `[RYAN 2026-09-18]` "ONLY do the new branding kit app drop the other one. FIX." * * WHERE THIS CAME FROM. These rules are brandskin_2026-09-17.css section 2, lines 179 to 267, moved * into the source with the `.phone.brandskin-bw` gate removed and every `!important` dropped. That * file is an override layer loaded last; Ryan looked at it and said "for the new brand did you just * paste on top? The old one loads first." He was right, and this is the answer: the rules now live in * the sheet that already owns the masthead, so the brand is on screen in the first paint instead of * 30.9 measured seconds later on a throttled phone. * * WHAT IT DRAWS. The Beloved Woonsocket Brand Guide 2.0 writes the name in two voices at once: * `Beloved` in the serif italic, then the city and the product word in tracked condensed caps. A2 * typed that into index.html as static markup directly above `h1#hdr-title`, aria-hidden and * lang="en"; these are the rules that draw it. The h1 itself is the page's accessible name and is * moved off screen above, never display:none. * * THE ONE THING THE GUIDE ASKS FOR THAT THIS DOES NOT DO. BRANDSPEC_2026-09-17 line 283 sets * `Beloved` at 20px. Community Gold #C49A2A on Burgundy #7A2636 is 3.71:1, which is the WCAG floor * for LARGE text only (24px, or 19px bold) and a fail at 20px regular. So it is 24px here, the size * brandskin already computed, and it never goes smaller at any width or text step. That is constraint * 3 of the plan beating a number in the guide, computed, not guessed. * ================================================================================================ */ .hdr .bw-wordmark{ display:flex;flex-direction:column;justify-content:center;align-items:flex-start; min-height:44px;min-width:0;line-height:1; direction:ltr; /* the wordmark is a Latin brand name. In Arabic and Hebrew the ROW mirrors (wordmark to the right, gear to the left) but the three words keep their own order */ } .hdr .bwm-beloved{ font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:24px;line-height:1; color:var(--bw-gold); /* Community Gold on Burgundy 3.71: LARGE TEXT ONLY, hence 24px, never smaller. On the high-contrast Burgundy #5C1C29 it is 4.84 and clears AA outright */ letter-spacing:.01em;margin:0 0 3px; } .hdr .bwm-caps{ display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em; font-family:var(--font-label);font-weight:700;font-size:12px;line-height:1.1; text-transform:uppercase;letter-spacing:.2em;color:var(--bw-cream); /* Warm Cream on Burgundy 9.02 */ padding-top:.1em; } /* Constraint 5 of the plan: no letter-spacing without the four-language zero pair. It cannot fire on this node, because index.html marks the wordmark lang="en" and it is a brand name, not a string any translator touches; it is written anyway so the rule is honest when read alone and so nobody adds tracking to a translated masthead later by copying this block. */ .hdr .bwm-caps:lang(ar),.hdr .bwm-caps:lang(km),.hdr .bwm-caps:lang(lo),.hdr .bwm-caps:lang(bn){letter-spacing:0} .hdr .bwm-product{color:#DAC2BE} /* Warm Cream at 75% over Burgundy = 5.77:1, past AA at 12px. The product word is the quieter of the two caps */ /* SHAPE 2026-09-22. THE ONE MEASURED CONTRAST FAILURE IN THE APP, AND IT IS IN THE MASTHEAD. The line below used to read: .hdr .bwm-product::before{content:"\00B7";margin-inline-end:.6em;color:var(--bw-gold)} with the comment: "the gold dot. Ornament, not text: 3.71 on Burgundy clears the 3:1 non-text floor. margin-inline-end, not margin-right, so RTL mirrors it". THAT ARGUMENT IS WRONG AND IT WAS MEASURED WRONG TWICE. The dot is not a graphic, it is a typographic separator set in the same 12px caps run as the words either side of it, so WCAG 1.4.3 reads it as text and the floor is 4.5:1, not 3:1. Community Gold #C49A2A on Woonsocket Burgundy #7A2636 is 3.71:1. Measured in a real Chromium at 375x812 by reading the computed colour of the pseudo-element and compositing it against every background box above it: 3.71 in English light, English dark, Arabic and Khmer, all four, because the masthead is Burgundy in every theme. It was the app's ONLY pseudo-element contrast failure, out of eighteen pseudo-elements that print text, and text-node sweeps cannot see it, which is why the app's "zero contrast failures" claim missed it for five days. THE FIX WRITES NO NEW HEX. #E2B85A is the app's own light gold: it is `--gold-ink` in .phone.dark (app.css:861), `--navy`/`--sky`/`--gold-ink` in .phone.dark.high-contrast (app.css:1358), and .phone.dark .help-cta-t (app.css:914). The masthead is a dark Burgundy ground in EVERY theme, so the dark theme's gold ink is the correct variable for it; it is written as a literal because var(--gold-ink) resolves to #8A6A15 in light, which is 1.92 on Burgundy and would be far worse. MEASURED AFTER: #E2B85A on #7A2636 = 5.21:1 (was 3.71), and on the high-contrast masthead #5C1C29 = 6.80:1 (was 4.84). Both clear 4.5:1 at 12px outright. Still unmistakably gold. Nothing else changes: same character, same .6em logical margin, so RTL still mirrors it. UNDO: put `color:var(--bw-gold)` back on the line below. */ .hdr .bwm-product::before{content:"\00B7";margin-inline-end:.6em;color:#E2B85A} /* SHAPE 2026-09-22: was color:var(--bw-gold) (#C49A2A, 3.71:1 on Burgundy at 12px, FAILS 4.5). #E2B85A is the app's own dark-theme --gold-ink: 5.21:1 here, 6.80:1 on the high-contrast masthead. margin-inline-end, not margin-right, so RTL mirrors it */ /* 320px and the two large-text steps. At 200 percent the header is zoom:2 x app.css:3000's zoom:.75 on .hdr = 1.5x net, so a 320px screen leaves 213px of layout: 20px of row padding, the 44px gear and an 8px gap leave 141px for the wordmark, which is why the caps drop to 11px and the tracking to .12em here. "Beloved" stays 24px at every step: it is the one value contrast will not let move. */ @media (max-width:900px){ .phone.text-large .hdr .bwm-beloved,.phone.text-xlarge .hdr .bwm-beloved{font-size:24px} .phone.text-large .hdr .bwm-caps,.phone.text-xlarge .hdr .bwm-caps{font-size:11px;letter-spacing:.12em;gap:0 .5em} } @media (max-width:359px){ .hdr .bwm-caps{font-size:11px;letter-spacing:.16em} } /* THE GEAR: CREAM ON BURGUNDY, NO DISC, NO RING. The inline SVG in index.html carries presentation attributes (a white disc, a #0048B4 stroke and a #0048B4 path) and a stylesheet outranks every one of them, so this is done without touching the markup. 44 x 44 is untouched: it is [RYAN 2026-09-02] "Keep 44px. Screen space matters more." Cream on Burgundy 9.02; pressed and focused it inverts to a gold disc with a Deep Navy glyph, 5.35, three cues and never colour alone. */ .hdr .hdr-gear .ic svg circle{fill:transparent;stroke:none} .hdr .hdr-gear .ic svg path{fill:var(--bw-cream)} .hdr .hdr-gear:active .ic svg circle, .hdr .hdr-gear:focus-visible .ic svg circle{fill:var(--bw-gold);stroke:var(--bw-gold)} .hdr .hdr-gear:active .ic svg path, .hdr .hdr-gear:focus-visible .ic svg path{fill:var(--bw-navy)} /* Deep Navy on Community Gold 5.35 */ .hdr .hdr-gear:focus-visible{outline:3px solid var(--bw-cream);outline-offset:2px} /* 9.02 on Burgundy, past the 3:1 WCAG 1.4.11 floor with room. Gold would be 3.71 and also pass, but the ring has to read against the gold disc it is drawn around */ /* THE CREDIT STRIP, ROW TWO, ON CREAM DEEP. The guide's own co-sign band. Margaux Morisseau's wording ("Powered by Beloved Woonsocket & the City of Woonsocket") is untouched, both marks are untouched, poweredby_2026-08-30.js still repaints it identically, and the LAW ruling on the City seal stands. It is moved off the Burgundy only because the Beloved Woonsocket stamp carries a red heart, which measures 2.18 on Burgundy and disappears. Ink #0D2018 on Cream Deep #EDE7D9 = 13.77:1. In dark, --bw-cream-deep is #1A3A4A and the text is Warm Cream, 11.13:1. The band has NO padding of its own (.hdr-credit{padding:0;margin:0}, set above) so when the masthead compacts and #powered-by goes display:none the strip collapses to zero height and no cream sliver is left behind. That is the 2026-09-03 zero-layout-shift rule, kept. */ .hdr .hdr-credit{background:var(--bw-cream-deep)} .hdr #powered-by .powered-by-mark{box-shadow:0 0 0 2px var(--bw-white);background:var(--bw-white)} /* a 2px white disc behind each mark so the stamp's red heart and the seal's colours sit on their own ground, the guide's co-sign rule */ .phone.dark .hdr #powered-by .powered-by-mark{box-shadow:0 0 0 2px var(--bw-cream);background:var(--bw-cream)} /* DESKTOP, above 900px, where .hdr-row is display:contents and the credit line is an item of the one Burgundy band rather than a strip under it. A Cream Deep block inside that band would read as a patch, so on desktop the strip is transparent and the text is Warm Cream on Burgundy, 9.02. */ @media (min-width:901px){ .hdr .hdr-credit{background:transparent} .hdr #powered-by,.phone.dark .hdr #powered-by{color:var(--bw-cream)} } /* ==== END 2026-09-18 WORDMARK AND CREDIT STRIP ==== */ /* ================================================================================================== MASTHEAD 2026-09-23. THE BELOVED TOP AND THE CONNECT TOP, BOTH LIVE, ONE VALUE APART. `[RYAN 2026-09-23]` "i made calls before about the top, dropping the powered by and putting beloved and woonsocket on the same line--- and also dropping the 01 02 etc" `[RYAN 2026-09-23]` on the two logos in the credit band: "in this beloved version drop them, but keep in mind we may revert to the Woonsocket COnnect version at some point im giving options" THE FLAG IS `window.CITY_CONFIG_MASTHEAD` IN `res_data_city.js`. Two settings, "beloved" and "connect". That file writes it onto as `data-masthead` on the line beside the value, so the value and its application cannot drift. EVERY RULE BELOW READS THAT ATTRIBUTE AND NOTHING ELSE. Switching tops is a data change: one string, one file, no code, no file restore, no commented-out block to uncomment. NOTHING ABOVE THIS COMMENT WAS CHANGED OR DELETED. Every rule of the 2026-09-18 wordmark and credit strip is still in this file, still declared, and still the thing "connect" draws, down to the gold dot's 2026-09-22 contrast fix. The Connect top is not a memory, it is a mode. THE CITY SEAL. It lives in the credit band, which "beloved" does not draw and "connect" does. Margaux Morisseau's written request of 2026-08-28 superseded the no-city-seal bright line for Woonsocket and that ruling is untouched here: no seal file is edited, moved, renamed, resized or recoloured by this block, and "connect" shows the same `city_seal_woonsocket_*` bytes in the same `` at the same size it showed yesterday. WHY "beloved" IS THE DEFAULT AND NOT AN ATTRIBUTE VALUE. The selectors below are written as `html:not([data-masthead="connect"])`, so the shipped top is correct in the FIRST PAINTED FRAME, before any script has run, and stays correct if res_data_city.js is ever slow or absent. Only the opt-in mode needs the attribute to exist. WHAT "beloved" ACTUALLY CHANGES, and it is three things: 1. the wordmark becomes ONE LINE. Row instead of column, the two words on one baseline. 2. "Connect" is not drawn. The app is Beloved Woonsocket in this mode, and the gold separator dot is drawn by `.bwm-product::before`, so it goes with the word and no rule is orphaned. 3. the credit band is not drawn: the sentence and BOTH marks, the Beloved Woonsocket stamp and the City seal. `.hdr-credit` carries no padding of its own (see above), so the band collapses to zero height and leaves no cream sliver, which is the 2026-09-03 zero-layout- shift rule kept. THE BASELINE, AND WHY IT IS NOT `align-items:baseline` ALONE. "Beloved" is 24px Cormorant italic and "Woonsocket" is 12px Barlow Condensed caps. Sat on a shared baseline the caps sit low against the serif's x-height, which is not how the guide pairs them. The caps are nudged up by their own line box instead: `align-items:baseline` plus a small `position:relative;bottom` on the caps run, a transform-free nudge that CSS `zoom` scales with everything else at the Large and Extra Large text steps. No magic number is invented: the value is the serif's own 3px former margin-bottom, reused rather than replaced. FIT. Measured in a real headless Chromium, never a fetch, at 320, 375 and 390, at Normal and Extra Large text, in all sixteen languages, reading `scrollWidth` against `clientWidth` on the wordmark and on the header row. The two words are a Latin brand name marked `lang="en"` and are the SAME GLYPHS in all sixteen languages, so the only per-language variable is the row around them (the gear's label and the RTL mirror), which is why the sweep is cheap and why it is still run. `white-space:nowrap` on the caps run is the one insurance policy: "Woonsocket" is one word and must never break to "WOONSOC KET" the way MONTH did on the calendar toggle at 320. ================================================================================================== */ html:not([data-masthead="connect"]) .hdr .bw-wordmark{ flex-direction:row;align-items:baseline;flex-wrap:nowrap; column-gap:.45em; /* the guide's own word gap for the lockup, measured against the 3px the two lines used to be apart */ justify-content:flex-start; /* THE `justify-content` IS NOT COSMETIC AND IT WAS FOUND BY LOOKING AT THE RENDER, NOT BY READING THE FILE. The rule above sets `justify-content:center`, which in a COLUMN centres the two lines VERTICALLY; turning the container into a ROW swaps the flex axes, so that same declaration started centring the lockup HORIZONTALLY and the wordmark sat in the middle of the Burgundy band while Connect's sits hard against the 20px left padding. Measured at 390: the serif began at x 80.44 where it should begin at x 20. `flex-start` puts it back. In Arabic and Hebrew the ROW still mirrors, because `flex-start` is a logical value and the header row is the thing that flips; the two words keep their own left-to-right order, which is what `direction:ltr` on the wordmark above is for. Verified in a real render in both. */ } html:not([data-masthead="connect"]) .hdr .bwm-beloved{margin:0} /* was 0 0 3px, the gap between the two lines that no longer exist */ html:not([data-masthead="connect"]) .hdr .bwm-caps{ padding-top:0;flex-wrap:nowrap;white-space:nowrap; position:relative;bottom:3px; /* the serif's own former 3px, reused: lifts the 12px caps off the 24px serif's baseline so they read as one lockup, not as a subscript */ } html:not([data-masthead="connect"]) .hdr .bwm-product{display:none} /* "Connect" and, with it, the gold separator dot its ::before draws. Nothing is deleted: the rules above still declare both, and "connect" still draws both */ html:not([data-masthead="connect"]) .hdr .hdr-credit{display:none} /* the whole credit band: Margaux's sentence and BOTH marks. Zero height, no cream sliver, no layout shift */ /* 320px and the two large-text steps, ONE LINE. At Extra Large the header is .phone zoom 2 times app.css's zoom .75 on .hdr, a net 1.5, so a 320px screen leaves 213px of layout: 20px of row padding, the 44px gear and an 8px gap leave 141px for the wordmark on one line. "Beloved" stays 24px at every step because contrast will not let it move (Community Gold on Burgundy is 3.71, which is the large-text floor and a fail below 24px), so the caps run is what gives. These two values were MEASURED at 320 x Extra Large in a real browser, not chosen: see FINISH_2026-09-23. */ @media (max-width:900px){ html:not([data-masthead="connect"]) .phone.text-large .hdr .bwm-caps, html:not([data-masthead="connect"]) .phone.text-xlarge .hdr .bwm-caps{letter-spacing:.06em;font-size:10px;bottom:2px} } @media (max-width:359px){ html:not([data-masthead="connect"]) .hdr .bwm-caps{letter-spacing:.1em} } /* ==== END MASTHEAD 2026-09-23 ==== */ /* ================================================================================================== TOP OPTIONS 2026-09-23. SIX TOPS, ONE STRING APART. THE MARK COMES BACK. `[RYAN 2026-09-23]` "some better options for the top also", sent with three frames he mocked up himself: the round Beloved Woonsocket mark on the left, "Beloved" in the Cormorant italic beside "WOONSOCKET" in Barlow Condensed caps on ONE line, and the gear on the right, all on the Woonsocket Burgundy band. Across his three frames the mark and the gear change size and in one of them the gear sits in a translucent circle. WHAT THIS IS AND WHAT IT IS NOT. It is the MARK returning to the top bar. It is NOT the credit band returning: `[RYAN 2026-09-23]` "in this beloved version drop them" still holds, `.hdr-credit` is still display:none in every "beloved*" mode, and the City seal still lives in that band and still comes back whole with "connect". No seal file and no logo file was edited, moved, renamed, resized, recoloured or cropped by this block. THE FLAG IS THE SAME FLAG. `window.CITY_CONFIG_MASTHEAD` in res_data_city.js, written onto as data-masthead on the line beside the value. It now carries eight settings: "connect" the Woonsocket Connect top, unchanged in every pixel, Margaux Morisseau's wording and the City seal included. Nothing below touches it. "beloved" the one-line wordmark with no mark, exactly as it shipped earlier today. "beloved-a" HIS OWN MOCKUP. Mark 44px left in a cream disc, "Beloved" 24px Cormorant italic in Warm Cream, "WOONSOCKET" 12px Barlow Condensed caps in Community Gold, plain gear. "beloved-b" A, with the gear in a translucent cream circle (his second and third frames). "beloved-c" A, with a larger mark (52px) and a smaller wordmark (20px / 11px). "beloved-d" A, with the wordmark optically centred in the band instead of left. "beloved-e" no mark, wordmark left. This is "beloved", the top that ships right now, given its own letter so it stands beside the others in the contact sheet. "beloved-f" A, with the caps run in #E2B85A instead of #C49A2A. SEE THE CONTRAST NOTE BELOW. Every rule above this comment reads `html:not([data-masthead="connect"])`, so all seven "beloved*" values inherit the one-line lockup and the hidden credit band for free and nothing was rewritten to make room for the letters. Nothing above this comment was changed or deleted. THE CONTRAST FINDING, PRINTED HERE BECAUSE IT IS THE ONE NUMBER HE CANNOT SEE BY LOOKING. His frames put "WOONSOCKET" in the gold. Community Gold #C49A2A on Woonsocket Burgundy #7A2636 measures 3.71:1. At the 12px this caps run is set at, WCAG 1.4.3 asks 4.5:1, so A, B, C and D carry a real contrast failure on that one word, and it is his own drawing, so it is shown rather than quietly corrected. F is the same drawing with the caps in #E2B85A, which is 5.21:1 and clears AA outright. #E2B85A writes no new hex: it is already this app's own `--gold-ink` in .phone.dark (app.css:861) and it is already what `.bwm-product::before` was moved to on 2026-09-22 for this exact reason, one screen above this comment. The colour swap is the other half of his drawing: in A through D and F "Beloved" is WARM CREAM (9.02:1) and the caps are the gold, which is the INVERSE of what ships today and of E. That swap is also what lets "Beloved" go below 24px at the large text steps: the 24px floor existed only because "Beloved" was the 3.71:1 gold. In cream it is 9.02:1 at any size. THE MARK. candidate3_beloved_woonsocket_mark_96/192_2026-08-30.png, the bytes already on the wall and already preloaded in . Its sky is transparent, so the cream disc is drawn here in CSS (background + border-radius) and the artwork is untouched: that is also the cream ring his own frames show. The mark's heart is Heart Red because it is inside the supplied logo artwork, on its own cream ground, and rule 8 forbids recolouring a mark. No Heart Red is used as UI colour anywhere in this block. RTL. The mark and the gear swap sides with no rule of their own: `.hdr-row` is a plain flex row in the document's direction, so `dir="rtl"` mirrors it. `.bw-wordmark` keeps `direction:ltr` above, so the two Latin words keep their own order inside the mirrored row. D's optical nudge is written `padding-inline-end`, so it mirrors too. Proved in a real Arabic render. ================================================================================================== */ /* --- THE MARK, SHOWN IN A, B, C, D AND F ------------------------------------------------------- */ /* `!important` is required and here is what it beats: `.hdr .hdr-row>.hdr-mark{display:none !important}` of 2026-09-10 ("SEAL OFF THE TOP"), one screen above. That rule is KEPT WHOLE and is still what "connect", "beloved" and "beloved-e" obey. This is the only thing that overrides it. */ html[data-masthead="beloved-a"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-b"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-c"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-d"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f"] .hdr .hdr-row>.hdr-mark{ display:flex !important;align-items:center;justify-content:center; flex:0 0 44px;width:44px;height:44px;border-radius:50%; background:var(--bw-cream); /* the mark's sky is transparent; on Burgundy it would vanish. This is also the cream ring his frames show */ overflow:hidden; } html[data-masthead="beloved-a"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-b"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-c"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-d"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f"] .hdr .hdr-mark .hdr-logo{width:38px;height:38px} /* 38 inside 44 leaves a 3px cream ring all round, which is the ring in his picture */ /* --- HIS COLOUR READING: CREAM SERIF, GOLD CAPS. A, B, C, D AND F ------------------------------ */ html[data-masthead="beloved-a"] .hdr .bwm-beloved, html[data-masthead="beloved-b"] .hdr .bwm-beloved, html[data-masthead="beloved-c"] .hdr .bwm-beloved, html[data-masthead="beloved-d"] .hdr .bwm-beloved, html[data-masthead="beloved-f"] .hdr .bwm-beloved{color:var(--bw-cream)} /* Warm Cream on Burgundy 9.02:1 at any size */ html[data-masthead="beloved-a"] .hdr .bwm-caps, html[data-masthead="beloved-b"] .hdr .bwm-caps, html[data-masthead="beloved-c"] .hdr .bwm-caps, html[data-masthead="beloved-d"] .hdr .bwm-caps{color:var(--bw-gold)} /* Community Gold on Burgundy 3.71:1. FAILS 4.5 at 12px. His drawing, shown as drawn. F is this same line at 5.21 */ html[data-masthead="beloved-f"] .hdr .bwm-caps{color:#E2B85A} /* 5.21:1 on Burgundy, 6.80:1 on the high-contrast Burgundy #5C1C29. No new hex: this is the app's own --gold-ink in .phone.dark (app.css:861) */ /* --- B: THE GEAR IN A TRANSLUCENT CIRCLE ------------------------------------------------------- */ /* `!important` beats scale_2026-08-27.css:83 `.phone.dark .hdr-gear{background:#24262a !important}` and the `.phone.dark .hdr .hdr-gear{background:transparent !important}` above that answers it. The disc is Warm Cream at 14% over Burgundy; the 44x44 tap target does not change by one pixel. */ html[data-masthead="beloved-b"] .hdr .hdr-gear, html[data-masthead="beloved-b"] .phone.dark .hdr .hdr-gear{background:rgba(250,246,236,.14) !important;border-color:transparent !important} /* --- C: A LARGER MARK, A SMALLER WORDMARK ------------------------------------------------------ */ html[data-masthead="beloved-c"] .hdr .hdr-row>.hdr-mark{flex:0 0 52px;width:52px;height:52px} html[data-masthead="beloved-c"] .hdr .hdr-mark .hdr-logo{width:45px;height:45px} html[data-masthead="beloved-c"] .hdr .bwm-beloved{font-size:20px} /* below 24 only because it is cream here, 9.02:1, not the 3.71 gold */ html[data-masthead="beloved-c"] .hdr .bwm-caps{font-size:11px;letter-spacing:.16em} /* --- D: THE WORDMARK OPTICALLY CENTRED IN THE BAND --------------------------------------------- */ /* justify-content:center centres it in the MIDDLE CELL, whose centre is 5px right of the band's, because the mark side costs 44 + 10 of gap and the gear side costs 44. The 10px logical padding pulls it back those 5px, so it is centred on the screen, not on the cell. */ html[data-masthead="beloved-d"] .hdr .bw-wordmark{justify-content:center;padding-inline-end:10px} @media (max-width:900px){ /* THE LARGE TEXT STEPS, WITH A MARK IN THE ROW. At Extra Large the header is .phone zoom 2 times app.css's zoom .75 on .hdr, a net 1.5, so a 320px screen has 213px of layout to spend. The mark and its gap take 30 + 8 of that, which the two-word lockup did not have to pay this morning, so the serif gives it back: 20px instead of 24px, which cream allows and gold did not. Measured at 320 x Extra Large in a real browser, not chosen. See TOP_2026-09-23.md for the headroom per option, per width, per text step, in all sixteen languages. */ html[data-masthead="beloved-a"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-b"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-c"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-d"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{flex-basis:30px;width:30px;height:30px} html[data-masthead="beloved-a"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-b"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-c"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-d"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{width:26px;height:26px} html[data-masthead="beloved-a"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-b"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-c"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-d"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-f"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .bwm-beloved{font-size:20px} } @media (max-width:359px){ /* 320px AT THE LARGE TEXT STEPS, WITH A MARK IN THE ROW. THIS BLOCK EXISTS BECAUSE THE FIRST SWEEP FAILED, NOT BECAUSE IT LOOKED TIGHT. Measured, 576 cells, six options x three widths x two text steps x sixteen languages: every option carrying the mark overflowed the caps run by exactly 16 layout px at 320 x Extra Large, in all sixteen languages, because the two words are the same glyphs in every one of them. D overflowed by 21, the extra 5 being its own optical nudge. Nothing else in the sweep failed. Where the 16px comes back, and every number is the measured cost of the thing it buys: the mark 30 -> 24 (6), the row gap 8 -> 6 (2), the row padding 10 -> 8 each side (4), "Beloved" 20 -> 18 (6), and the caps tracking .06em -> 0 (6). That is 24 layout px against a 16px debt, so the shipped headroom at the worst cell is real and not a rounding win. "Beloved" is allowed under 20px here ONLY because in these options it is Warm Cream at 9.02:1. In E, and in "beloved", it is Community Gold at 3.71:1 and it is still pinned at 24px, which is the large-text floor, and neither this block nor any other touches it there. The caps tracking going to zero at this one cell is the same move the 2026-09-18 block already makes for Arabic, Khmer, Lao and Bengali. `white-space:nowrap` above still holds, so "WOONSOCKET" cannot become "WOONSOC KET". */ html[data-masthead="beloved-a"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-b"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-c"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-d"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-f"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .hdr-row{padding-left:8px;padding-right:8px;gap:6px} html[data-masthead="beloved-a"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-b"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-c"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-d"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{flex-basis:24px;width:24px;height:24px} html[data-masthead="beloved-a"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-b"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-c"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-d"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{width:21px;height:21px} html[data-masthead="beloved-a"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-b"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-c"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-d"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-f"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .bwm-beloved{font-size:17px} /* SECOND MEASURED PASS AT THE SAME CELL. The block above took the overflow from 16 layout px to 2, which is smaller than the 1px of sub-pixel rounding the SHIPPED top (E) already carries here, but 2 is not 1 and the standard for this job is the shipped one. The serif goes 18 -> 17 and the lockup's word gap .45em -> .3em, worth about 5 layout px together against a 2px debt. Both are this one cell only: 320px wide, at the two large text steps, with a mark in the row. */ html[data-masthead="beloved-a"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-b"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-c"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-d"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-f"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .bw-wordmark{column-gap:.3em} html[data-masthead="beloved-a"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-a"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-b"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-b"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-c"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-c"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-d"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-f"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f"] .phone.text-xlarge .hdr .bwm-caps{letter-spacing:0} /* D's optical nudge is what puts it 5px past the others here, so it is the first thing to go at this one cell. The wordmark is still centred in its cell; only the 5px optical correction is spent, and a 5px correction is not visible at 320 when the row's own padding is 8. */ html[data-masthead="beloved-d"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-d"] .phone.text-xlarge .hdr .bw-wordmark{padding-inline-end:0} } /* ==== END TOP OPTIONS 2026-09-23 ==== */ /* ================================================================================================== TOP 2, 2026-09-23. F, GROWN, AND THE TWO WORDS MATCHED BY CAP HEIGHT. THREE SIZES. `[RYAN 2026-09-23]` "F but the text is bigger and closer to the same size in beloved and woonsocket i think make it propotritonal" HE PICKED F. This block does not change F by one pixel: "beloved-f" is still exactly what he pointed at, and every option A through F is still declared above and still reachable. This adds THREE MORE VALUES to the same flag, `window.CITY_CONFIG_MASTHEAD` in res_data_city.js, so he can point again at a size instead of at a design. WHY THE TWO WORDS LOOKED DIFFERENT SIZES, MEASURED, NOT EYEBALLED. Cap height is what the eye reads as "size", and a px number is not cap height. Measured in a real Chromium against the two fonts this masthead actually loads, by the ascent of a cap 'H' at 200px: Cormorant Garamond italic 500 cap height = 0.625 em Barlow Condensed 700 cap height = 0.655 em So F's 24px serif has a 15.00px cap and F's 12px caps run has a 7.86px cap. The caps run is FIFTY-TWO PERCENT of the serif. That is the thing he is looking at, and "12 is half of 24" was never the reason: at these two faces, matching cap height means caps px = serif px x 0.625 / 0.655 = serif px x 0.9542. Every pair below is chosen from that equation and then re-measured in the browser, not assumed. THE THREE SIZES. Cap-height ratio printed is (caps px x 0.655) / (serif px x 0.625), so 1.00 is a perfect match. F today is 0.52. "beloved-f2" conservative. Serif 24 (F's own size), caps 22, mark 44. Ratio 0.96. "beloved-f3" DEFAULT. Clearly bigger. Serif 27, caps 25, mark 46. Ratio 0.97. "beloved-f4" the largest that still passes every constraint. Serif 30, caps 29, mark 48. Ratio 1.01. It is width-bound, not taste-bound: at 375 it steps down to 27/26 because 30/29 does not fit there, and that step-down is measured, not guessed. WHAT IT COSTS, SAID PLAINLY. The caps run more than doubles in width when it doubles in size, and the row it lives in is fixed: the gear is 44 and does not move, the mark is on the other end, and at 320 x Extra Large the whole header is 213 layout px. So at the narrow and large-text cells all three sizes converge on the same numbers, because that cell has one answer, not three. At those cells the serif gives back what the caps run takes, and it may do that because in these options "Beloved" is Warm Cream at 9.02:1, which has no size floor. See TOP2_2026-09-23.md for the measured headroom in all 288 cells. COLOUR IS F'S COLOUR, UNCHANGED. Serif Warm Cream 9.02:1, caps #E2B85A 5.21:1 on Woonsocket Burgundy. #C49A2A is 3.71:1 and is not used by any of these three: that number is the whole reason F exists and nothing here walks it back. THE MARK IS THE SAME BYTES. candidate3_beloved_woonsocket_mark_96/192_2026-08-30.png, already on the wall and already preloaded in . Resized proportionally by CSS only, never redrawn, recoloured or cropped, and the logo inside keeps the same 3px cream ring at every size (the disc and the logo grow together: 44/38, 46/40, 48/42). NOTHING ABOVE THIS COMMENT WAS CHANGED OR DELETED. The three new values repeat the declarations they need (the mark, the cream serif, the gold caps) instead of being added to the selector lists of the 2026-09-23 block, so that block is byte-identical and F cannot be broken by this one. RTL: the row mirrors on its own, exactly as F does, because nothing here sets a physical side. The one logical property used is `padding-inline-end`, and it is not used by these three at all. ================================================================================================== */ /* --- THE FOUR NUMBERS PER SIZE. Everything below reads these. ---------------------------------- */ html[data-masthead="beloved-f2"]{--bw2-mark:44px;--bw2-logo:38px;--bw2-serif:24px;--bw2-caps:22px;--bw2-ls:.04em;--bw2-gap:.4em} html[data-masthead="beloved-f3"]{--bw2-mark:46px;--bw2-logo:40px;--bw2-serif:27px;--bw2-caps:25px;--bw2-ls:0em;--bw2-gap:.36em} html[data-masthead="beloved-f4"]{--bw2-mark:48px;--bw2-logo:42px;--bw2-serif:30px;--bw2-caps:29px;--bw2-ls:0em;--bw2-gap:.32em} /* --- THE MARK. Same rule F uses, same `!important`, same thing it beats: the 2026-09-10 `.hdr .hdr-row>.hdr-mark{display:none !important}` of "SEAL OFF THE TOP". ---------------------- */ html[data-masthead="beloved-f2"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f3"] .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f4"] .hdr .hdr-row>.hdr-mark{ display:flex !important;align-items:center;justify-content:center; flex:0 0 var(--bw2-mark);width:var(--bw2-mark);height:var(--bw2-mark);border-radius:50%; background:var(--bw-cream); /* the artwork's sky is transparent; on Burgundy it would vanish. This is also the cream ring in his own frames */ overflow:hidden; } html[data-masthead="beloved-f2"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f3"] .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f4"] .hdr .hdr-mark .hdr-logo{width:var(--bw2-logo);height:var(--bw2-logo)} /* --- F'S COLOURS, REPEATED SO F'S OWN BLOCK DOES NOT HAVE TO BE TOUCHED ------------------------ */ html[data-masthead="beloved-f2"] .hdr .bwm-beloved, html[data-masthead="beloved-f3"] .hdr .bwm-beloved, html[data-masthead="beloved-f4"] .hdr .bwm-beloved{color:var(--bw-cream)} /* Warm Cream on Burgundy 9.02:1 at any size, which is what lets the serif move at all */ html[data-masthead="beloved-f2"] .hdr .bwm-caps, html[data-masthead="beloved-f3"] .hdr .bwm-caps, html[data-masthead="beloved-f4"] .hdr .bwm-caps{color:#E2B85A} /* 5.21:1 on Burgundy, 6.80:1 on the high-contrast Burgundy. F's colour, not Community Gold's 3.71:1 */ /* --- THE SIZES THEMSELVES --------------------------------------------------------------------- */ html[data-masthead="beloved-f2"] .hdr .bwm-beloved, html[data-masthead="beloved-f3"] .hdr .bwm-beloved, html[data-masthead="beloved-f4"] .hdr .bwm-beloved{font-size:var(--bw2-serif)} html[data-masthead="beloved-f2"] .hdr .bwm-caps, html[data-masthead="beloved-f3"] .hdr .bwm-caps, html[data-masthead="beloved-f4"] .hdr .bwm-caps{font-size:var(--bw2-caps);letter-spacing:var(--bw2-ls);bottom:0} /* `bottom:0` beats the 3px lift the 2026-09-23 block gives the caps run. That lift existed to stop a 12px caps run reading as a subscript under a 24px serif. At matched cap heights there is no subscript to fix: the two words sit on one baseline and the lift would push the caps run ABOVE the serif's cap line, which is the same fault upside down. Measured, not assumed: cap tops within 0.5px of each other at every size. */ html[data-masthead="beloved-f2"] .hdr .bw-wordmark, html[data-masthead="beloved-f3"] .hdr .bw-wordmark, html[data-masthead="beloved-f4"] .hdr .bw-wordmark{column-gap:var(--bw2-gap)} @media (max-width:389px){ /* 375 AND 360. F4 IS THE ONLY SIZE WIDTH-BOUND HERE AND IT IS THE ONLY ONE THAT MOVES. 28/27 plus a 48px mark plus the 44px gear plus the row's own 20px does not fit 375, measured, so f4 is 27/26 below 390. f2 and f3 fit as drawn and are not touched. */ html[data-masthead="beloved-f4"]{--bw2-serif:27px;--bw2-caps:26px} } @media (max-width:359px){ /* 320, NORMAL TEXT. 240 layout px of row less the 44px mark and the 44px gear. ALL THREE SIZES LAND ON THE SAME PAIR HERE, and that is measured, not tidy: 21/19 with a 46px mark overflowed the wordmark's own cell by 3.23 layout px in a real render, so the one pair that fits is the pair all three use. 320 is not where he chooses a size; it is where the size survives. */ html[data-masthead="beloved-f2"], html[data-masthead="beloved-f3"], html[data-masthead="beloved-f4"]{--bw2-mark:44px;--bw2-logo:38px;--bw2-serif:20px;--bw2-caps:18px;--bw2-ls:0em;--bw2-gap:.34em} } @media (max-width:900px){ /* THE TWO LARGE TEXT STEPS. The header is .phone zoom 2 times app.css's zoom .75 on .hdr, a net 1.5, so a 390px screen is 260 layout px and a 375px screen is 250. The mark goes to 30 exactly as F does at these steps. The serif gives back what the doubled caps run takes, and it is allowed to because it is cream at 9.02:1 and has no size floor. */ html[data-masthead="beloved-f2"] .phone.text-large,html[data-masthead="beloved-f2"] .phone.text-xlarge{--bw2-mark:30px;--bw2-logo:26px;--bw2-serif:15px;--bw2-caps:14px;--bw2-ls:0em;--bw2-gap:.3em} html[data-masthead="beloved-f3"] .phone.text-large,html[data-masthead="beloved-f3"] .phone.text-xlarge{--bw2-mark:30px;--bw2-logo:26px;--bw2-serif:17px;--bw2-caps:16px;--bw2-ls:0em;--bw2-gap:.3em} html[data-masthead="beloved-f4"] .phone.text-large,html[data-masthead="beloved-f4"] .phone.text-xlarge{--bw2-mark:30px;--bw2-logo:26px;--bw2-serif:17px;--bw2-caps:16px;--bw2-ls:0em;--bw2-gap:.3em} /* SETTING THE VARIABLE IS NOT ENOUGH AT THESE STEPS AND THE FIRST SWEEP PROVED IT. The app's own `.phone.text-large .hdr .bwm-beloved{font-size:24px}` is four classes, (0,4,0), and the rule above that reads the variable is `html[data-masthead] .hdr .bwm-beloved`, (0,3,1). The app rule wins, so the first sweep measured serif 24 and caps 10 at EVERY large-text cell in all three sizes: the variables were set and silently ignored. These explicit selectors are (0,5,1) and they are the whole reason this is measured rather than read. */ /* THE MARK NEEDS THE SAME EXPLICIT SELECTORS FOR THE SAME REASON, AND THE FIRST SWEEP CAUGHT THIS ONE TOO: brand.css:325 `.phone.text-large .hdr .hdr-row>.hdr-mark{flex-basis:36px...}` is (0,4,1) and beats the variable rule's (0,3,2), so the mark measured 36 layout px at every large cell instead of the 30 its variable asked for. At 320 x Extra Large those 12 px were the difference between fitting and not. */ html[data-masthead="beloved-f2"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f3"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f4"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{flex-basis:var(--bw2-mark);width:var(--bw2-mark);height:var(--bw2-mark)} html[data-masthead="beloved-f2"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f3"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f4"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{width:var(--bw2-logo);height:var(--bw2-logo)} html[data-masthead="beloved-f2"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-f3"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .bwm-beloved, html[data-masthead="beloved-f4"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .bwm-beloved{font-size:var(--bw2-serif)} html[data-masthead="beloved-f2"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-f3"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .bwm-caps, html[data-masthead="beloved-f4"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .bwm-caps{font-size:var(--bw2-caps);letter-spacing:var(--bw2-ls);bottom:0} html[data-masthead="beloved-f2"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-f3"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .bw-wordmark, html[data-masthead="beloved-f4"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .bw-wordmark{column-gap:var(--bw2-gap)} } @media (max-width:359px){ /* 320 AT THE TWO LARGE TEXT STEPS. THE ONE CELL THAT DECIDES EVERYTHING: 213 layout px for the whole header. 16 of row padding, a 24px mark, two 6px gaps and the 44px gear leave 117 for the lockup, and 117 is the number, not an opinion. All three sizes are the same pair here. */ html[data-masthead="beloved-f2"] .phone.text-large,html[data-masthead="beloved-f2"] .phone.text-xlarge, html[data-masthead="beloved-f3"] .phone.text-large,html[data-masthead="beloved-f3"] .phone.text-xlarge, html[data-masthead="beloved-f4"] .phone.text-large,html[data-masthead="beloved-f4"] .phone.text-xlarge{ --bw2-mark:24px;--bw2-logo:21px;--bw2-serif:12px;--bw2-caps:11px;--bw2-ls:0em;--bw2-gap:.3em} html[data-masthead="beloved-f2"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-f2"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-f3"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-f3"] .phone.text-xlarge .hdr .hdr-row, html[data-masthead="beloved-f4"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-f4"] .phone.text-xlarge .hdr .hdr-row{padding-left:8px;padding-right:8px;gap:6px} } /* ==== END TOP 2 2026-09-23 ==== */ /* ================================================================================================ GEAR 2026-09-24. THE SETTINGS WHEEL, SIZED AGAINST THE MARK. `[RYAN 2026-09-24]` "also i want the settings wheel rought the size of the beloved woon icon or shaded or whatever". Driven by window.CITY_CONFIG_MASTHEAD_GEAR (res_data_city.js, read its note beside the value), written onto as data-gear. Four values, default "both". "plain" is byte-equivalent to what shipped: it declares nothing, so brand.css:286-289 stays in force untouched. MEASURED, real Chromium, 390 wide, data-masthead="beloved-f3" (mark 46x46): plain target 44.0x44.0 wheel 40px no disc bigger target 46.0x46.0 wheel 46px no disc shaded target 44.0x44.0 wheel 40px disc 44px, cream at 12% both target 46.0x46.0 wheel 44px disc 46px, cream at 12% LAW L5: every value is >= 44x44 and was hit-tested with elementFromPoint at its own centre. CONTRAST: the wheel is --bw-cream on Burgundy in all four. The disc is cream at 12% alpha over the same Burgundy, so the wheel's own local background lightens slightly and the ratio was re-measured against the COMPOSITED disc colour, not against Burgundy - the number that matters is printed per value in outputs/PHONEFIT_2026-09-24.md. Nothing here is red (LAW L6). The disc is `background`, not a border and not a box-shadow: brand.css:70 and :286 both set `background:transparent` on this button and this is the one property being turned back on. Undo: set the flag to "plain", or delete this block. */ html[data-gear="bigger"] .hdr .hdr-gear, html[data-gear="both"] .hdr .hdr-gear{min-width:46px;width:46px;min-height:46px;height:46px} html[data-gear="bigger"] .hdr .hdr-gear .ic svg{width:46px;height:46px} html[data-gear="both"] .hdr .hdr-gear .ic svg{width:44px;height:44px} html[data-gear="shaded"] .hdr .hdr-gear, html[data-gear="both"] .hdr .hdr-gear{background:rgba(247,241,227,.12)} /* ================================================================================================== WORDMARK 2026-09-24. THE LOCKUP FINALLY SCALES WITH THE SCREEN. `[RYAN 2026-09-24]` "also can the beloved woonsocket text size differ based on screen size likelooking at the png it can be a big bigger i think" WHAT WAS WRONG. "beloved-f3" is ONE SIZE for every screen: serif 27, caps 25, mark 46, band 58, with two hand-cut steps at 389 and 359. A 1440px desktop and a 375px phone got the same 27px word, and on the desktop that leaves 794 measured px of empty burgundy to the right of WOONSOCKET. He is looking at that gap. He is also right that one number cannot serve both ends. TWO REAL FAULTS IN THE SHIPPED DEFAULT, FOUND BY MEASURING BEFORE TOUCHING ANYTHING: 360 x Normal: the caps run ends at x=311.13 and the gear begins at x=302. NINE PIXELS OF OVERLAP, shipping today. The 389 step only moved f4, so 360-389 kept f3's 27/25 with no room for it. 360/375/390 x Extra Large: the lockup spills 25.20 / 14.98 / 4.75 px past its own flex box. It does not reach the gear there, so it is not visible as a collision, but it is overflow. Both are gone in f5 and the numbers are in outputs/WORDMARK_2026-09-24.md. THIS IS A NEW VALUE, NOT A CHANGE TO F3. "beloved-f5" is added and made the default on the one line in res_data_city.js. f2, f3 and f4 are byte-identical above this comment, A through F and "beloved" and "connect" are all untouched, and one word switches any of them back. The gear flag window.CITY_CONFIG_MASTHEAD_GEAR is a separate family and is not touched: his "shaded" still reads "shaded". HOW IT SCALES. One linear ramp in vw, clamped at both ends, so it moves continuously and never jumps in a way that reads as a bug: serif = clamp(20px, 10vw - 12px, 31px) phone and tablet serif = clamp(34px, 2.4vw + 9.4px, 48px) 1024 and up, where the app stops being a 430px column and the band is the full width The ramp is not chosen, it is the fit budget solved. Measured in a real Chromium: the lockup's width is 5.121 x serif + 4.114 x caps device px (two-point solve off f3's own 20/18 and 27/25 renders), the row spends 14px of padding, the mark, two 10px gaps and the 44px gear, so the width available to the lockup at frame F is F - 82 - mark. 10vw - 12px lands at 20.0 / 24.0 / 25.5 / 27.0 / 31.0 at 320 / 360 / 375 / 390 / 430 against ceilings of 20.8 / 25.5 / 26.9 / 28.3 / 32.1. Every cell keeps headroom and every cell was re-measured, not trusted. CAP HEIGHT HOLDS AT EVERY SIZE, AND NOW IT HOLDS BY CONSTRUCTION. Cormorant Garamond italic 500 is 0.625 em of cap and Barlow Condensed 700 is 0.655, so matching the two words means caps px = serif px x 0.9542. f2/f3/f4 hit that with three hand-picked pairs and land on 0.96, 0.97 and 1.01. f5 does not pick pairs at all: caps = calc(var(--bw5-serif) * .9542) so the ratio is 1.000 at 320, at 1440 and at every pixel in between, including the fractional sizes the ramp produces between breakpoints. There is no size at which it can drift. THE MARK AND THE BAND GROW WITH IT. mark = clamp(44px, serif x 1.70, 70px), which is f3's own 46/27 proportion to two places, and the logo inside keeps its 3px cream ring at every size because it is mark - 6px, which is exactly the 44/38, 46/40, 48/42 pairs f2/f3/f4 use. The mark's 44px floor is LAW L5: the mark is a tap target and it never goes under 44 at Normal text. The band is the mark plus the row's own 11px of padding, so it grows the same way, and what that costs the screen below is printed per width in the write-up rather than hidden here. THE 12px FLOOR, RAISED. brand.css carried an 11px `.bwm-caps` at 320 x Extra Large and a 10px one at the large-text steps, both flagged by audit. f5 never lands on either: its narrowest cell is 320 x Extra Large at serif 12.6px, which makes the caps run 12.02px. The old rules are still in the file, untouched, because f3 and the A-F family still read them. COLOUR IS UNCHANGED AND IS F'S COLOUR. Serif Warm Cream on Woonsocket Burgundy 9.02:1. Caps #E2B85A 5.21:1, which is the app's own --gold-ink, not a new hex. Community Gold #C49A2A is 3.71:1 and fails 4.5, and nothing here walks back to it at any size. THE MARK IS THE SAME BYTES. candidate3_beloved_woonsocket_mark_96/192_2026-08-30.png, already on the wall, already preloaded in , resized by CSS only. Never redrawn, recoloured or cropped. RTL. Nothing here sets a physical side. The row is a plain flex row, so Arabic mirrors it on its own and the mark and the gear swap ends, exactly as f3 does. Proven with a real render, not reasoned: _HARNESS/WORDMARK_SHOTS_2026-09-24/. NO NEW STYLESHEET, NO NEW SCRIPT, NO NEW IMAGE. brand.css owns the masthead and this is in it. Undo: set window.CITY_CONFIG_MASTHEAD back to "beloved-f3", or restore NEVER_OVERWRITE_BACKUPS/wordmark_2026-09-24/brand.css.PRE_WORDMARK. ================================================================================================== */ /* --- THE RAMP. Two numbers per breakpoint; everything else is derived from the serif. ---------- */ html[data-masthead="beloved-f5"]{ --bw5-serif:clamp(20px, calc(10vw - 12px), 31px); --bw5-mark:clamp(44px, calc(var(--bw5-serif) * 1.70), 70px); --bw5-ls:0em; --bw5-gap:.34em; } @media (min-width:1024px){ /* DESKTOP. The app stops being a 430px column here and the band runs the full width, which is where the 794 measured px of empty burgundy were. 34 at 1024, 40.1 at 1280, 44 at 1440, and it stops at 48 rather than running away on a 4K monitor. Width is not the binding constraint at any of these: at 1024 the lockup could be 99px before it reached the gear. This ceiling is taste and band height, and it is said plainly rather than dressed as a measurement. */ html[data-masthead="beloved-f5"]{--bw5-serif:clamp(34px, calc(2.4vw + 9.4px), 48px)} } /* --- THE MARK. Same rule and the same `!important` f2/f3/f4 use, beating the 2026-09-10 `.hdr .hdr-row>.hdr-mark{display:none !important}` of "SEAL OFF THE TOP". -------------------- */ html[data-masthead="beloved-f5"] .hdr .hdr-row>.hdr-mark{ display:flex !important;align-items:center;justify-content:center; flex:0 0 var(--bw5-mark);width:var(--bw5-mark);height:var(--bw5-mark);border-radius:50%; background:var(--bw-cream); /* the artwork's sky is transparent; on Burgundy it would vanish */ overflow:hidden; } html[data-masthead="beloved-f5"] .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw5-mark) - 6px);height:calc(var(--bw5-mark) - 6px); } /* --- F'S COLOURS, REPEATED SO F'S OWN BLOCKS DO NOT HAVE TO BE TOUCHED ------------------------ */ html[data-masthead="beloved-f5"] .hdr .bwm-beloved{color:var(--bw-cream)} /* 9.02:1 at any size */ html[data-masthead="beloved-f5"] .hdr .bwm-caps{color:#E2B85A} /* 5.21:1, --gold-ink */ /* --- THE SIZES. caps is computed from serif, so the cap-height match cannot drift. ------------- */ html[data-masthead="beloved-f5"] .hdr .bwm-beloved{font-size:var(--bw5-serif)} html[data-masthead="beloved-f5"] .hdr .bwm-caps{ font-size:calc(var(--bw5-serif) * .9542);letter-spacing:var(--bw5-ls);bottom:0; } /* `bottom:0` beats the 3px lift at brand.css:568. That lift stopped a 12px caps run reading as a subscript under a 24px serif. At matched cap heights there is no subscript to fix and the lift would push the caps ABOVE the serif's cap line, which is the same fault upside down. */ html[data-masthead="beloved-f5"] .hdr .bw-wordmark{column-gap:var(--bw5-gap)} @media (max-width:1023px){ /* THE TWO LARGE TEXT STEPS. `.phone` takes zoom:2 at Extra Large and app.css's zoom:.75 on `.hdr` leaves a net 1.5, MEASURED, not read off a comment: a 390px screen is 260 layout px and a 320px screen is 213.3. The budget here is its own budget, solved the same way and not the top ramp divided by 1.5: at these steps the row pays 10px of padding a side and an 8px gap instead of 14 and 10, and the lockup measures 13.83 real px per serif px through the zoom. Solving ink + mark <= frame - 126 gives ceilings of 14.29 / 15.20 / 16.12 / 17.58 / 18.56 at 360 / 375 / 390 / 414 / 430, and 6.143vw - 8.11px lands at 14.00 / 14.92 / 15.84 / 17.32 / 18.30. Every one of those was over its ceiling on the first cut and the sweep caught it. SETTING THE VARIABLE IS NOT ENOUGH HERE AND THE FIRST SWEEP OF THE 2026-09-23 BLOCK PROVED IT: the app's own `.phone.text-large .hdr .bwm-beloved{font-size:24px}` is (0,4,0) and the rule that reads the variable is (0,3,1), so the app rule wins and the variables are set and silently ignored. The explicit selectors below are (0,5,1). The mark needs the same treatment for the same reason: brand.css:325 is (0,4,1) and beats the variable rule's (0,3,2). */ html[data-masthead="beloved-f5"] .phone.text-large, html[data-masthead="beloved-f5"] .phone.text-xlarge{ --bw5-serif:clamp(12.6px, calc(6.143vw - 8.11px), 18.3px); /* 29.34px is not a round number and it is not meant to be: `.phone` is zoomed 1.5 at these two steps, so 29.34 LAYOUT px is 44.01 REAL px, and the mark is a tap target (LAW L5). The first cut floored this at 24 and the all-views sweep measured the mark at 40.41 x 40.41 real px on every one of the ten views at Extra Large, which would have been the only sub-44 control the night introduced. f3 floors it at 30 layout / 45 real and is not affected. */ --bw5-mark:clamp(29.34px, calc(var(--bw5-serif) * 1.70), 34px); --bw5-gap:.3em; } html[data-masthead="beloved-f5"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--bw5-mark);width:var(--bw5-mark);height:var(--bw5-mark); } html[data-masthead="beloved-f5"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw5-mark) - 6px);height:calc(var(--bw5-mark) - 6px); } html[data-masthead="beloved-f5"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .bwm-beloved{font-size:var(--bw5-serif)} html[data-masthead="beloved-f5"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .bwm-caps{ font-size:calc(var(--bw5-serif) * .9542);letter-spacing:var(--bw5-ls);bottom:0; } html[data-masthead="beloved-f5"] .phone.text-large .hdr .bw-wordmark, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .bw-wordmark{column-gap:var(--bw5-gap)} } @media (max-width:359px){ /* 320 AT THE TWO LARGE TEXT STEPS. THE ONE CELL THAT DECIDES EVERYTHING, and the only cell in the app where the caps run was ever asked to go under 12px. 213.3 layout px for the whole header. 6px of row padding each side, a 29.34px mark, a 5px gap and the 44px gear leave 118.0 px for the lockup. At serif 12.6 the lockup measures 114.0, so 4.0 px of layout headroom, and the caps run lands at 12.02px: over the 12px floor, on one line. This is the tightest cell in the app and it is named as such. The mark is 29.34 rather than 24, for the reason given at the step above: 29.34 layout px is 44.01 real px and the mark is a tap target. */ html[data-masthead="beloved-f5"] .phone.text-large, html[data-masthead="beloved-f5"] .phone.text-xlarge{ --bw5-serif:12.6px;--bw5-mark:29.34px;--bw5-gap:.28em; } html[data-masthead="beloved-f5"] .phone.text-large .hdr .hdr-row, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .hdr-row{ padding-left:6px;padding-right:6px;gap:5px; } } @media (min-width:1024px){ /* DESKTOP AT THE TWO LARGE TEXT STEPS. Without this the desktop ramp above is read straight through `.phone`'s zoom:2 and the band measures 122.5 real px against tonight's 86.5, which is a 36px tax on the screen below for no gain. Same ramp, divided by the same measured 1.5: 22.7 at 1024, 29.3 at 1440, which paint as 34 and 44 real px, the numbers the desktop ramp asked for. Explicit selectors for the reason given above: the variable alone loses to `.phone.text-large .hdr .bwm-beloved`. */ html[data-masthead="beloved-f5"] .phone.text-large, html[data-masthead="beloved-f5"] .phone.text-xlarge{ --bw5-serif:clamp(22.7px, calc(1.6vw + 6.27px), 32px); --bw5-mark:clamp(30px, calc(var(--bw5-serif) * 1.70), 47px); } html[data-masthead="beloved-f5"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--bw5-mark);width:var(--bw5-mark);height:var(--bw5-mark); } html[data-masthead="beloved-f5"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw5-mark) - 6px);height:calc(var(--bw5-mark) - 6px); } html[data-masthead="beloved-f5"] .phone.text-large .hdr .bwm-beloved, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .bwm-beloved{font-size:var(--bw5-serif)} html[data-masthead="beloved-f5"] .phone.text-large .hdr .bwm-caps, html[data-masthead="beloved-f5"] .phone.text-xlarge .hdr .bwm-caps{ font-size:calc(var(--bw5-serif) * .9542);letter-spacing:var(--bw5-ls);bottom:0; } } /* ==== END WORDMARK 2026-09-24 ==== */ /* ================================================================================================== MASTHEAD 2026-09-25. THE CONDENSED FACE WAS NEVER ON THE SCREEN. `[RYAN 2026-09-25]` "also the woonsocket at the top now looks liek shit not elegant consult brand kit and fix also" HE IS RIGHT AND THE ARITHMETIC IN f5 IS NOT THE ARGUMENT. f5 matched the two words by cap height to a measured ratio of 1.0000 and the result is ugly. Before touching a single number this pass asked what font was actually painting, with CDP `CSS.getPlatformFontsForNode` on the real page at 390 wide, and the answer is the whole fault: .hdr .bwm-caps -> PLATFORM FONT USED: SourceSansPro-Bold .hdr .bwm-beloved-> PLATFORM FONT USED: CormorantGaramondLight-MediumItalic WOONSOCKET IS NOT SET IN BARLOW CONDENSED. IT HAS NOT BEEN. The brand guide's LABEL/LOGO face is not on the screen at all; what is on the screen is a wide, heavy, plain grotesque. Measured, same page, "WOONSOCKET" at font-size 100px with letter-spacing 0: font-weight:400 -> SourceSansPro-Regular 616px font-weight:500 -> SourceSansPro-Regular 616px font-weight:600 -> BarlowCondensed-SemiBold 484px <- the only one that is the brand face font-weight:700 -> SourceSansPro-Bold 638px <- what .bwm-caps asks for today Barlow Condensed is 484 against Source Sans Pro Bold's 638. The shipped word is 32 PERCENT WIDER THAN THE BRAND FACE AND IT IS A DIFFERENT DESIGN. That is the "heavy slab shouting next to a delicate serif", and no ratio, gap or colour could have fixed it. WHY. app_fonts.css declares Barlow Condensed at 500, 600 and 700, all `font-display:optional`. index.html:581 preloads exactly ONE of them, `barlow-condensed-latin-600-normal.woff2`. Under `font-display:optional` a face that is not ready at first paint is never used for that page load, so 500 and 700 fall through the stack `"Barlow Condensed","Source Sans Pro",sans-serif` to Source Sans Pro and stay there. `.bwm-caps` has said `font-weight:700` since 2026-09-18. NOTHING IS BROKEN IN app_fonts.css OR index.html and this block does not touch either: 600 is preloaded, 600 paints, and 600 is one of the three weights the guide itself prints for this face. Every option below is 600. THE HANDBACK, in writing, for whoever owns index.html: preloading the 500 and 700 Barlow files would give the masthead a weight axis it does not have today. Until that happens, font-weight on this one node is NOT a variable anybody can set, and a rule that sets it to 700 is a rule that silently switches typeface. A SECOND NUMBER THAT WAS WRONG, AND IT FOLLOWS FROM THE FIRST. Every block above this one states "Barlow Condensed 700 cap height = 0.655 em". That 0.655 IS SOURCE SANS PRO'S CAP HEIGHT. It was measured off the fallback. Barlow Condensed 600, measured on this wall's own woff2: Cormorant Garamond italic 500 cap height 0.625 em Barlow Condensed 600 cap height 0.700 em So a true cap-height match is caps px = serif px x 0.625 / 0.700 = x 0.8929, not f5's x 0.9542. f5's "ratio 1.0000" was 1.0000 against the wrong face and the wrong cap height. Nothing above is edited: f2, f3, f4, f5, A through F, "beloved" and "connect" are byte-identical and every one of them still switches back with one string. WHAT THE GUIDE ITSELF DOES WITH THESE TWO FACES, MEASURED OFF THE GUIDE PNG WITH PILLOW. The guide sets Cormorant italic and Barlow Condensed caps ON ONE LINE IN EXACTLY ONE PLACE: its own running header, which repeats on every page of the document. Everything else is either stacked (the cover) or a single face (the section labels, the secondary-mark banner). That is said plainly rather than dressed up, because one instance is what there is. THE RUNNING HEAD, full resolution, page 1, "Beloved WOONSOCKET": "Beloved" Cormorant italic, ink x 118-169, cap 'B' y 25-35, CAP HEIGHT 11px sampled colour max (250,246,236) = #FAF6EC Warm Cream, exact "WOONSOCKET" Barlow Condensed caps, ink x 178-263, 'W' y 26-35, CAP HEIGHT 10px sampled colour max (196,154,48) = #C49A2A Community Gold, exact BASELINE: both words bottom out at y=35. BASELINE ALIGNED, not optical centre, not cap top. CAP RATIO: 10 / 11 = 0.909. THE CAPS ARE THE SMALLER OF THE TWO, and the guide's own lockup is NOT a cap-height match. f5 aimed at 1.000; the guide sits at 0.909. WORD GAP: ink 169 -> 178 = 9px, which is 0.82 of the serif's own cap height. TRACKING: ink span 86px for ten letters. Barlow Condensed 600 at this size has a natural ink span of about 67px, so the extra 19px over 9 gaps is 2.1px a letter = 0.148 em. THE COVER, same page, the stacked two-line lockup: "Beloved" cap 140px in #C49A2A Community Gold (sampled 196,154,42, exact) "WOONSOCKET" cap 45px in #FAF6EC Warm Cream, tracking 0.337 em CAP RATIO 45 / 140 = 0.321. On the cover WOONSOCKET is ONE THIRD the serif and it is the base line under it. The colours are the INVERSE of the running head's. SECTION 05 SPECIMEN, "WOONSOCKET . RHODE ISLAND", the one printed directly under the guide's own sentence about tracking: cap 40px, tracking 0.082 em, stroke 4px on a 40px cap. Guide copy, verbatim, section 05, role label "LABEL / LOGO": "Civic, signage-like. Used uppercase, with generous letter-spacing (3 to 6). Spells the city's name in the wordmark and labels every section." Weights the guide prints for this face: 500, 600, 700, "uppercase only". THE UNIT OF "(3 to 6)" IS NOT GIVEN AND STAYS UNKNOWN. Read as px it fits the section 05 specimen (4.7px measured) and roughly fits the running head (2.1px); it does not fit the cover (21.7px). So the guide's OWN rendered tracking ranges 0.082 em to 0.337 em depending on the application, and its one-line lockup, the only one that is this job, measures 0.148 em. That measurement is where g1's tracking comes from. No house style is invented here. THE THREE WAYS f5 DEPARTS FROM THE GUIDE, ALL IN THE SAME DIRECTION, ALL TOWARD HEAVINESS: face f5 asks 700 and paints Source Sans Pro Bold. The guide's face is Barlow Condensed. tracking f5 sets 0. The guide says "generous letter-spacing" and its own lockup measures .148em. size f5 matches cap heights, 1.000. The guide's own lockup puts the caps at 0.909. Three departures, three shouts. This block does not argue with his eye, it puts the guide back. SIX OPTIONS, ONE STRING APART, ADDED TO THE SAME FLAG. `window.CITY_CONFIG_MASTHEAD` in res_data_city.js, written onto as data-masthead on the line beside the value. NOTHING IS REMOVED: beloved-a through beloved-f5, "beloved" and "connect" are all still declared above and any one of them is one word away. window.CITY_CONFIG_MASTHEAD_GEAR is a separate flag and is NOT touched by this block: `[RYAN 2026-09-24]` "i like shaded" still reads "shaded", and the shaded disc is drawn by the GEAR 2026-09-24 block above for every value including these six. "beloved-g1" THE GUIDE'S OWN RUNNING HEAD, COPIED. caps 0.812 of the serif px, which is the guide's measured 0.909 cap ratio converted through the two real cap heights. Tracking .15em, the guide's own .148 rounded to a CSS value. #E2B85A. "beloved-g2" RESTRAINED. WOONSOCKET is clearly the quieter partner: caps 0.62, tracking .24em, the widest of the six. This is the shape most lockups of this kind actually take and it is the closest of the six to the guide's COVER hierarchy. "beloved-g3" CAP-HEIGHT MATCHED, CORRECTED. caps 0.8929, a true 1.000 cap match against the real Barlow cap height, tracking .10em. This is what f5 was trying to be. "beloved-g4" MONOCHROME. Both words Warm Cream, 9.02:1. Hierarchy carried by size and tracking alone, which is the cover's own logic. caps 0.70, tracking .20em. "beloved-g5" THE GUIDE'S LITERAL GOLD. Community Gold #C49A2A, the exact hex sampled off the running head, USED ONLY AT 1024px AND UP. See the contrast note below. "beloved-g6" OPTICAL CENTRE. The one option that does not sit on the shared baseline: the caps are raised so their cap band centres on the serif's. caps 0.70, tracking .18em. COLOUR AND CONTRAST, EVERY NUMBER PRINTED. Warm Cream #FAF6EC on Woonsocket Burgundy #7A2636 = 9.02:1. Passes at any size. g4's caps and every option's serif. #E2B85A on the same Burgundy = 5.21:1. Passes AA for normal text at any size. It is this app's own --gold-ink in .phone.dark (app.css:861) and writes no new hex. g1, g2, g3, g6, and g5 below 1024. Community Gold #C49A2A on the same Burgundy = 3.71:1. IT FAILS the 4.5:1 normal-text floor and clears only the 3:1 LARGE-TEXT floor, which needs 24px or larger. g5 is the only option that uses it and g5 uses it ONLY inside `@media (min-width:1024px)`, where its serif starts at 34px and its caps therefore start at 34 x 0.812 = 27.6px. 27.6px is over 24px, so every pixel of #C49A2A this app can paint is clearing the 3:1 large-text floor and the floor it is clearing is named here. Below 1024 g5 is #E2B85A at 5.21:1 and the switch is a media query, not a promise. THE COST IS PRINTED TOO: the gold is what makes WOONSOCKET unable to be quiet, since a 24px floor on the caps stops them ever being the smaller word on a phone. That is the whole reason the running head's gold works at all in the guide and would not work here. RED: none. No Heart Red, no red of any kind, in any of the six. LAW L4. NO FONT-SIZE UNDER 12px: the caps carry an explicit `max(12px, ...)` floor at every cell and the serif's own floor is 12.6px at the tightest cell. Measured per cell, not asserted. RESPONSIVE, BECAUSE HE ASKED FOR IT YESTERDAY AND HAS NOT WITHDRAWN IT. `[RYAN 2026-09-24]` "also can the beloved woonsocket text size differ based on screen size". All six ride f5's own proven ramp, unchanged, so the thing he approved last night survives: serif = clamp(20px, 10vw - 12px, 31px) phone and tablet serif = clamp(34px, 2.4vw + 9.4px, 48px) 1024 and up mark = clamp(44px, serif x 1.70, 70px), logo = mark - 6px, so the 3px cream ring holds Every option derives its caps from that one serif, so there is one ramp and six treatments of it. THERE IS MORE ROOM THAN f5 HAD, AND IT IS THE FONT FIX THAT BOUGHT IT: Barlow Condensed 600 sets WOONSOCKET at 484 units against Source Sans Pro Bold's 638, so the same serif size leaves 24 PER CENT more width on every screen. The fit sweep is still run on all of it. THE MARK IS THE SAME BYTES. candidate3_beloved_woonsocket_mark_96/192_2026-08-30.png, already on the wall, already preloaded in , resized proportionally by CSS only. Never redrawn, never recoloured, never cropped. Rule 3. RTL. Nothing in this block sets a physical side. `.hdr-row` is a plain flex row in the document's direction, so Arabic mirrors it and the mark and the gear swap ends on their own; `.bw-wordmark` keeps `direction:ltr` from the 2026-09-18 block so the two Latin words keep their own order inside the mirrored row. g6's optical lift is `bottom`, which is unaffected by direction. Proved with a real Arabic render, not reasoned. NO NEW STYLESHEET, NO NEW SCRIPT, NO NEW IMAGE, NO NEW FONT FILE. brand.css owns the masthead and this is in brand.css. Rule 2. Undo: set window.CITY_CONFIG_MASTHEAD back to "beloved-f5", or restore NEVER_OVERWRITE_BACKUPS/masthead_2026-09-25/brand.css.PRE_MASTHEAD. The numbers per option per width are in outputs/MASTHEAD_2026-09-25.md and the contact sheet beside it, outputs/MASTHEAD_2026-09-25.png. ================================================================================================== */ /* --- THE RAMP, SHARED BY ALL SIX. f5's ramp, unchanged, so last night's approved behaviour holds. The attribute selector `[data-masthead^="beloved-g"]` is (0,1,0), exactly what `[data-masthead="beloved-f5"]` is, so nothing about specificity changes by writing it once. ---- */ html[data-masthead^="beloved-g"]{ --bw6-serif:clamp(20px, calc(10vw - 12px), 31px); --bw6-mark:clamp(44px, calc(var(--bw6-serif) * 1.70), 70px); --bw6-liftf:0; /* baseline aligned, which is what the guide's running head does. g6 is the only option that sets this */ --bw6-capsink:#E2B85A; /* 5.21:1 on Burgundy. g4 and g5 override */ /* THE CAPS SIZE AND THE OPTICAL LIFT ARE DELIBERATELY *NOT* DECLARED AS VARIABLES HERE, AND THE FIRST SWEEP IS WHY. A custom property substitutes at the element that DECLARES it, so a `--bw6-caps:calc(var(--bw6-serif) * ...)` written on `html` resolves --bw6-serif AT HTML and then hands the finished px value down by inheritance. The large-text blocks below redeclare --bw6-serif on `.phone`, one level lower, so that override was computed and silently thrown away: the sweep measured caps 16.24px at 320 x Extra Large where the cell asks for 12.00, in 48 of 1344 cells. Both values are therefore written as calc() directly in the `.bwm-caps` rules, where --bw6-serif resolves against the value `.phone` actually has. f5 does the same thing for the same reason and its comment does not say why; this one does. */ } @media (min-width:1024px){ html[data-masthead^="beloved-g"]{--bw6-serif:clamp(34px, calc(2.4vw + 9.4px), 48px)} } /* --- THE SIX TREATMENTS. Four numbers and a colour each; everything else is derived. ------------ */ /* g1 THE GUIDE'S OWN RUNNING HEAD. 0.909 cap ratio x 0.8929 = 0.812. Tracking .148em measured. */ html[data-masthead="beloved-g1"]{--bw6-ratio:.812;--bw6-ls:.15em;--bw6-gap:.42em} /* g2 RESTRAINED. The quietest WOONSOCKET of the six and the widest tracking, which is the trade the guide's cover makes: as the caps get smaller the tracking opens up to hold the line. */ html[data-masthead="beloved-g2"]{--bw6-ratio:.62;--bw6-ls:.24em;--bw6-gap:.50em} /* g3 A TRUE CAP-HEIGHT MATCH, 0.625/0.700 = 0.8929. What f5 was aiming at, aimed correctly. */ html[data-masthead="beloved-g3"]{--bw6-ratio:.8929;--bw6-ls:.10em;--bw6-gap:.38em} /* g4 MONOCHROME. Warm Cream on both words, 9.02:1 on both. Hierarchy by size and tracking only. */ html[data-masthead="beloved-g4"]{--bw6-ratio:.70;--bw6-ls:.20em;--bw6-gap:.46em;--bw6-capsink:var(--bw-cream)} /* g5 THE GUIDE'S LITERAL COMMUNITY GOLD, and it is #E2B85A here. The swap to #C49A2A happens only in the min-width:1024px block below, where the caps are 27.6px and up and clear the 3:1 large-text floor. Read the contrast paragraph in the header comment before changing this. */ html[data-masthead="beloved-g5"]{--bw6-ratio:.812;--bw6-ls:.15em;--bw6-gap:.42em} /* g6 OPTICAL CENTRE. The caps band is centred on the serif's cap band instead of sharing its baseline. The lift is (serif cap - caps cap) / 2 = (0.625 x S - 0.700 x 0.70 x S) / 2, which is 0.0680 x S, derived from the two measured cap heights and not chosen. */ html[data-masthead="beloved-g6"]{--bw6-ratio:.70;--bw6-ls:.18em;--bw6-gap:.46em;--bw6-liftf:.068} @media (min-width:1024px){ html[data-masthead="beloved-g5"]{--bw6-capsink:#C49A2A} /* 3.71:1, clearing the 3:1 LARGE-TEXT floor only: caps are 27.6px at 1024 and 44.6px at 1440, both over the 24px that floor requires */ } /* --- THE MARK. Same rule and the same `!important` f2..f5 use, and the same thing it beats: the 2026-09-10 `.hdr .hdr-row>.hdr-mark{display:none !important}` of "SEAL OFF THE TOP", which is kept whole above and is still what "connect", "beloved" and "beloved-e" obey. ----------------- */ html[data-masthead^="beloved-g"] .hdr .hdr-row>.hdr-mark{ display:flex !important;align-items:center;justify-content:center; flex:0 0 var(--bw6-mark);width:var(--bw6-mark);height:var(--bw6-mark);border-radius:50%; background:var(--bw-cream); /* the artwork's sky is transparent; on Burgundy it would vanish */ overflow:hidden; } html[data-masthead^="beloved-g"] .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw6-mark) - 6px);height:calc(var(--bw6-mark) - 6px); } /* --- THE TWO WORDS -------------------------------------------------------------------------- */ html[data-masthead^="beloved-g"] .hdr .bwm-beloved{ color:var(--bw-cream); /* 9.02:1 on Burgundy at any size, which is what lets the serif move */ font-size:var(--bw6-serif); } html[data-masthead^="beloved-g"] .hdr .bwm-caps{ /* THE ONE LINE THIS WHOLE PASS IS ABOUT. 600 is the only Barlow Condensed weight index.html preloads and therefore the only one `font-display:optional` lets paint. 700 paints Source Sans Pro Bold. Proved with CSS.getPlatformFontsForNode on the real page, both before and after. */ font-weight:600; font-size:max(12px, calc(var(--bw6-serif) * var(--bw6-ratio))); /* the 12px floor is LAW-level and is carried on the declaration itself, not in a variable, so no cell can inherit past it */ letter-spacing:var(--bw6-ls); color:var(--bw6-capsink); bottom:calc(var(--bw6-serif) * var(--bw6-liftf)); /* 0 for five of the six: baseline aligned, as the guide's running head is. g6 is the optical-centre variant and is the only one that lifts */ } html[data-masthead^="beloved-g"] .hdr .bw-wordmark{column-gap:var(--bw6-gap)} @media (max-width:1023px){ /* THE TWO LARGE TEXT STEPS. `.phone` takes zoom:2 at Extra Large against app.css's zoom:.75 on `.hdr`, a net 1.5 MEASURED, so a 390px screen is 260 layout px and a 320px screen is 213.3. f5's ramp for these steps is reused unchanged and the mark keeps f5's 29.34px floor, which is 44.01 REAL px through the 1.5 zoom and is therefore LAW L5's 44px tap target, not 29px. SETTING THE VARIABLE IS NOT ENOUGH AT THESE STEPS AND TWO EARLIER SWEEPS PROVED IT: the app's own `.phone.text-large .hdr .bwm-beloved{font-size:24px}` is (0,4,0) and a bare `html[data-masthead] .hdr .bwm-beloved` is (0,3,1), so the app rule wins and the variables are set and silently ignored. The selectors below are (0,5,1). The mark needs the same treatment for the same reason: brand.css:325 is (0,4,1) against the variable rule's (0,3,2). */ html[data-masthead^="beloved-g"] .phone.text-large, html[data-masthead^="beloved-g"] .phone.text-xlarge{ --bw6-serif:clamp(12.6px, calc(6.143vw - 8.11px), 18.3px); --bw6-mark:clamp(29.34px, calc(var(--bw6-serif) * 1.70), 34px); --bw6-gap:.3em; } html[data-masthead^="beloved-g"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--bw6-mark);width:var(--bw6-mark);height:var(--bw6-mark); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw6-mark) - 6px);height:calc(var(--bw6-mark) - 6px); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .bwm-beloved, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .bwm-beloved{font-size:var(--bw6-serif)} html[data-masthead^="beloved-g"] .phone.text-large .hdr .bwm-caps, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .bwm-caps{ font-weight:600;font-size:max(12px, calc(var(--bw6-serif) * var(--bw6-ratio))); letter-spacing:var(--bw6-ls);color:var(--bw6-capsink); bottom:calc(var(--bw6-serif) * var(--bw6-liftf)); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .bw-wordmark, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .bw-wordmark{column-gap:var(--bw6-gap)} } @media (max-width:359px){ /* 320 AT THE TWO LARGE TEXT STEPS. THE TIGHTEST CELL IN THE APP AND IT IS NAMED AS SUCH. 213.3 layout px for the whole header: 6px of row padding a side, a 29.34px mark, a 5px gap and the 44px gear leave 118.0px for the lockup. The caps hit their 12px floor here in every one of the six, so all six converge on the same caps size at this one cell, which is honest rather than tidy: there is one answer at 118px, not six. The tracking is cut to .06em at this cell only, the same move the 2026-09-23 block already makes for Arabic, Khmer, Lao and Bengali, and `white-space:nowrap` from the 2026-09-23 block still holds so "WOONSOCKET" cannot break. */ html[data-masthead^="beloved-g"] .phone.text-large, html[data-masthead^="beloved-g"] .phone.text-xlarge{ --bw6-serif:12.6px;--bw6-mark:29.34px;--bw6-gap:.28em;--bw6-ls:.06em; } html[data-masthead^="beloved-g"] .phone.text-large .hdr .hdr-row, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .hdr-row{ padding-left:6px;padding-right:6px;gap:5px; } } @media (min-width:1024px){ /* DESKTOP AT THE TWO LARGE TEXT STEPS. Without this the desktop ramp is read straight through `.phone`'s zoom:2 and the band grows by about 36 real px for no gain. Same ramp divided by the same measured 1.5, and explicit selectors for the specificity reason given above. */ html[data-masthead^="beloved-g"] .phone.text-large, html[data-masthead^="beloved-g"] .phone.text-xlarge{ --bw6-serif:clamp(22.7px, calc(1.6vw + 6.27px), 32px); --bw6-mark:clamp(30px, calc(var(--bw6-serif) * 1.70), 47px); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--bw6-mark);width:var(--bw6-mark);height:var(--bw6-mark); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--bw6-mark) - 6px);height:calc(var(--bw6-mark) - 6px); } html[data-masthead^="beloved-g"] .phone.text-large .hdr .bwm-beloved, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .bwm-beloved{font-size:var(--bw6-serif)} html[data-masthead^="beloved-g"] .phone.text-large .hdr .bwm-caps, html[data-masthead^="beloved-g"] .phone.text-xlarge .hdr .bwm-caps{ font-weight:600;font-size:max(12px, calc(var(--bw6-serif) * var(--bw6-ratio))); letter-spacing:var(--bw6-ls);color:var(--bw6-capsink); bottom:calc(var(--bw6-serif) * var(--bw6-liftf)); } } /* ==== END MASTHEAD 2026-09-25 ==== */ /* ================================================================================================== RENAME 2026-09-26. THE APP IS CALLED WOONSOCKET CONNECT AND THERE IS NO CREDIT BAND. THIS IS THE CITY'S DECISION, NOT THIS BUILD'S. Margaux Morisseau, City of Woonsocket Human Services Director, by email 2026-09-25 11:32, after the Beloved Woonsocket steering committee met. Verbatim, and quoted here so the next agent cannot undo it by accident: "We just wrapped up our Beloved Woonsocket steering committee meeting. We came to a decision on 2 things: The name of the app will simply be 'Woonsocket Connect', and we will remove the 'powered by' section. The second is that we will launch Autumnfest Weekend! ... I am sure the colors/fonts recommended by BOATS will be just fine." Autumnfest weekend is 9 to 12 October, so this is the launch top. WHY A NEW VALUE AND NOT AN EDIT TO AN OLD ONE. The flag already offered two ends of a line and she asked for the middle of it: "beloved" and "beloved-a".."beloved-g6" the Beloved Woonsocket wordmark, NO credit band "connect" the Woonsocket Connect wordmark, WITH the credit band and both logos, exactly as it shipped on 2026-08-30 She wants the NAME of the second with the BAND of the first. That combination did not exist, so it is added. NOTHING IS REMOVED AND NOTHING EXISTING IS EDITED: every rule above this comment is byte-identical, "connect" still draws Margaux's own 2026-08-28 sentence and the City seal, and every "beloved*" value still draws exactly what it drew last night. Ryan is showing the steering committee options and every option he had this morning he still has. "AND WE WILL REMOVE THE 'POWERED BY' SECTION" IS ALREADY HONOURED BY THE FILE, NOT BY A NEW RULE. Every value that is not the literal string "connect" is caught by `html:not([data-masthead="connect"]) .hdr .hdr-credit{display:none}` of MASTHEAD 2026-09-23, so the two new values below inherit the band being gone. It is restated once below anyway, with her sentence beside it, because a rule that matters this much should be findable by grepping for her words and not only by reasoning about a `:not()`. THE TWO NEW VALUES. Both draw the name and nothing else. Both ride the SAME ramp beloved-g1 rides, unchanged, so `[RYAN 2026-09-24]` "can the beloved woonsocket text size differ based on screen size" still holds, and both use Barlow Condensed at font-weight 600, which MASTHEAD 2026-09-25 proved is the only weight index.html preloads and therefore the only weight `font-display:optional` lets paint. 700 silently paints Source Sans Pro Bold. Read that block before changing any weight here. "connect-two" THE DEFAULT ON THE LINE IN res_data_city.js. TWO VOICES, the guide's own one-line running-head lockup with Margaux's name poured into it. "Woonsocket" is the Cormorant Garamond italic in Warm Cream; "CONNECT" is the Barlow Condensed 600 caps in #E2B85A at 0.812 of the serif px, which is the guide's measured 0.909 cap ratio converted through the two real cap heights (Cormorant italic 0.625 em, Barlow Condensed 600 0.700 em). Tracking .15em, the guide's own measured .148 rounded to a CSS value. Baseline aligned. Word gap .42em. EVERY ONE OF THOSE FIVE NUMBERS IS beloved-g1's, UNCHANGED. This is the treatment Ryan approved last night with the words swapped, nothing re-tuned. "connect-one" ONE VOICE. Both words in Barlow Condensed 600 caps: "WOONSOCKET" in Warm Cream at 0.812 of the serif ramp, which is EXACTLY the pixel size beloved-g1 gives the word WOONSOCKET today, and "CONNECT" in #E2B85A at 0.909 of that, the guide's own cap ratio applied between the two words instead of across the two faces. Tracking .15em on both. WHY connect-two IS THE DEFAULT AND connect-one IS THE OPTION, said plainly, including the part that argues the other way. The guide, section 05, role label LABEL / LOGO, verbatim: "Civic, signage-like. Used uppercase, with generous letter-spacing (3 to 6). Spells the city's name in the wordmark and labels every section." READ LITERALLY THAT SENTENCE FAVOURS connect-one: the city's name belongs in the condensed face, and the guide prints its own "WOONSOCKET . RHODE ISLAND" specimen in exactly that shape, one voice, city name plus a qualifier. connect-two puts the city's name in the DISPLAY face instead, which that sentence does not ask for. It is still the default for two reasons that are about this screen rather than about the guide: 1. THE BRIEF IS TO MATCH THE TREATMENT ALREADY MEASURED AND CHOSEN, cap-height ratio and all. connect-two is beloved-g1's geometry to the decimal. connect-one is a new relationship between two words nobody has looked at yet. 2. WIDTH, AND IT IS MEASURED BELOW, NOT ASSERTED. "WOONSOCKET CONNECT" set entirely in tracked condensed caps is the widest wordmark this app has ever drawn. "Woonsocket Connect" is already longer than "Beloved Woonsocket", and one voice at a common size makes it longer again. The 96-cell sweep in outputs\RENAME_2026-09-26.md prints both. connect-one is one string away and is on the contact sheet so the steering committee can point at it. If they pick it, the line in res_data_city.js is the only edit. COLOUR AND CONTRAST. No new hex is written and no red of any kind appears. LAW L4. Warm Cream #FAF6EC on Woonsocket Burgundy #7A2636 = 9.02:1. The dominant word in both values. #E2B85A on the same Burgundy = 5.21:1, past AA for normal text at any size. The quieter word in both values. It is this app's own --gold-ink in .phone.dark (app.css:861). Community Gold #C49A2A is 3.71:1 and is NOT used at any size in either value. NO FONT-SIZE UNDER 12px: every caps declaration carries its own max(12px, ...) floor, written on the declaration and not in a variable, for the reason MASTHEAD 2026-09-25's own comment gives. THE GOLD SEPARATOR DOT IS NOT DRAWN, and that is Margaux's word "simply". `.bwm-product::before` still declares it and "connect" still draws it; these two values set `content:none` on the pseudo-element only, so the name reads "Woonsocket Connect" and not "Woonsocket . Connect". Nothing is deleted. THE MARK AND THE GEAR ARE UNTOUCHED AND THAT IS DELIBERATE. The round mark is the same bytes, candidate3_beloved_woonsocket_mark_96/192_2026-08-30.png, already on the wall and already preloaded, resized proportionally by CSS only. `window.CITY_CONFIG_MASTHEAD_GEAR` is a separate flag and this block does not read or set it: `[RYAN 2026-09-24]` "i like shaded" still reads "shaded" and the shaded disc is drawn by GEAR 2026-09-24 for these two values as for every other. FLAGGED, NOT DECIDED HERE: that circular mark is the Beloved Woonsocket mark. With the credit band gone it is the only Beloved Woonsocket artwork left on the screen. Keeping it is Ryan's standing pick and the brief's instruction; whether the City wants it under the new name is the City's call, not this block's, and it is one line in res_data_city.js's poweredBy.org1Logo plus one rule here if the answer is no. RTL. Nothing here sets a physical side. `.hdr-row` is a plain flex row in the document's direction so Arabic mirrors it on its own; `.bw-wordmark` keeps `direction:ltr` from the 2026-09-18 block so the two Latin words keep their own order inside the mirrored row. Proved with a real Arabic render, not reasoned. NO NEW STYLESHEET, NO NEW SCRIPT, NO NEW IMAGE, NO NEW FONT FILE. brand.css owns the masthead and this is in brand.css. Rule 2. Undo: set window.CITY_CONFIG_MASTHEAD back to "beloved-g1", or restore NEVER_OVERWRITE_BACKUPS/rename_2026-09-26/brand.css.PRE_RENAME. The numbers per value per cell are in outputs\RENAME_2026-09-26.md and the contact sheet beside it, outputs\RENAME_2026-09-26.png. ================================================================================================== */ /* --- THE RAMP. beloved-g1's ramp, copied rather than shared, so the g-block above stays byte-identical and neither family can change the other by accident. The attribute selector `[data-masthead^="connect-"]` is (0,1,0), the same weight as `[data-masthead="beloved-g1"]`. --- */ html[data-masthead^="connect-"]{ --cw-serif:clamp(20px, calc(10vw - 12px), 31px); --cw-mark:clamp(44px, calc(var(--cw-serif) * 1.70), 70px); --cw-ratio:.812; /* the guide's 0.909 cap ratio through the two real cap heights */ --cw-ls:.15em; /* the guide's own running-head tracking, measured at .148em */ --cw-gap:.42em; /* beloved-g1's word gap */ --cw-lead:var(--bw-cream); /* the dominant word. 9.02:1 on Burgundy */ --cw-tail:#E2B85A; /* the quieter word. 5.21:1 on Burgundy */ /* The caps sizes are written as calc() on the declarations below and NOT as a variable here, for the reason MASTHEAD 2026-09-25 proves: a custom property substitutes at the element that DECLARES it, so a --cw-caps written on html would resolve --cw-serif at html and hand a finished px value down, silently discarding the .phone-level override the large text steps make one level lower. That bug cost 48 of 1344 cells in the 09-25 sweep. */ } @media (min-width:1024px){ html[data-masthead^="connect-"]{--cw-serif:clamp(34px, calc(2.4vw + 9.4px), 48px)} } /* --- THE BAND IS NOT DRAWN. Margaux Morisseau, 2026-09-25 11:32: "we will remove the 'powered by' section". This is already true by inheritance from MASTHEAD 2026-09-23's `html:not([data-masthead="connect"]) .hdr .hdr-credit{display:none}`; it is restated so her decision is findable at the rule that carries it out. `.hdr-credit` has no padding of its own, so the band collapses to zero height with no cream sliver and no layout shift. NOTHING IS DELETED: the sentence, both marks and the City seal are all still in index.html and "connect" still draws every one of them. --------------------------------------------------- */ html[data-masthead^="connect-"] .hdr .hdr-credit{display:none} /* --- THE MARK. Same rule and the same `!important` the g-block uses, beating the same thing: the 2026-09-10 `.hdr .hdr-row>.hdr-mark{display:none !important}` of "SEAL OFF THE TOP". --------- */ html[data-masthead^="connect-"] .hdr .hdr-row>.hdr-mark{ display:flex !important;align-items:center;justify-content:center; flex:0 0 var(--cw-mark);width:var(--cw-mark);height:var(--cw-mark);border-radius:50%; background:var(--bw-cream); /* the artwork's sky is transparent; on Burgundy it would vanish */ overflow:hidden; } html[data-masthead^="connect-"] .hdr .hdr-mark .hdr-logo{ width:calc(var(--cw-mark) - 6px);height:calc(var(--cw-mark) - 6px); /* the 3px cream ring, at every size */ } /* --- THE NAME. "Beloved" is not a word in this name, so the node that holds it is not drawn. The node is NOT removed from index.html and "beloved*" still draws it. ------------------------- */ html[data-masthead^="connect-"] .hdr .bwm-beloved{display:none} /* `.bwm-caps` is the two words' flex row here, not a type treatment. Its own font-size is set to the serif so the .42em word gap is measured against the serif, exactly as beloved-g1's is. */ html[data-masthead^="connect-"] .hdr .bwm-caps{ font-size:var(--cw-serif);column-gap:var(--cw-gap); bottom:0; /* beloved-g1 lifts nothing and neither does this. Baseline aligned, which is what the guide's running head does */ flex-wrap:nowrap;white-space:nowrap;padding-top:0; } /* "Connect" is drawn. `html:not([data-masthead="connect"]) .hdr .bwm-product{display:none}` of MASTHEAD 2026-09-23 is (0,3,1) and catches every non-"connect" value including these two; this rule is (0,3,1) as well and later in the file, so it wins on order. Nothing above is edited. */ html[data-masthead^="connect-"] .hdr .bwm-product{display:inline} /* The gold separator dot is not drawn. "simply 'Woonsocket Connect'", not "Woonsocket . Connect". The declaration itself is untouched above and "connect" still draws the dot. */ html[data-masthead^="connect-"] .hdr .bwm-product::before{content:none;margin-inline-end:0} /* --- connect-two. TWO VOICES. The city's name in the DISPLAY face, the product word in the LABEL/LOGO face at the guide's own 0.909 cap ratio. -------------------------------------- */ html[data-masthead="connect-two"] .hdr .bwm-city{ font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:var(--cw-serif);line-height:1;letter-spacing:.01em;text-transform:none; color:var(--cw-lead); /* Warm Cream, 9.02:1 on Burgundy, which is what lets this word move with the screen */ } html[data-masthead="connect-two"] .hdr .bwm-product{ font-family:var(--font-label);font-weight:600; /* 600 is the only Barlow Condensed weight that paints. See MASTHEAD 2026-09-25 */ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio))); letter-spacing:var(--cw-ls);text-transform:uppercase;line-height:1.1; color:var(--cw-tail); } /* --- connect-one. ONE VOICE. The guide's "WOONSOCKET . RHODE ISLAND" shape, without the dot. -- */ html[data-masthead="connect-one"] .hdr .bwm-city, html[data-masthead="connect-one"] .hdr .bwm-product{ font-family:var(--font-label);font-weight:600; letter-spacing:var(--cw-ls);text-transform:uppercase;line-height:1.1;font-style:normal; } html[data-masthead="connect-one"] .hdr .bwm-city{ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio))); /* exactly the px beloved-g1 gives WOONSOCKET today */ color:var(--cw-lead); } html[data-masthead="connect-one"] .hdr .bwm-product{ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio) * .909)); /* the guide's own cap ratio, applied between the two words */ color:var(--cw-tail); } /* --- THE TWO LARGE TEXT STEPS. Same ramp and the same reason for explicit selectors that the g-block gives: the app's own `.phone.text-large .hdr .bwm-caps{font-size:11px}` is (0,4,0) and MASTHEAD 2026-09-23's `html:not([data-masthead="connect"]) .phone.text-large .hdr .bwm-caps {letter-spacing:.06em;font-size:10px;bottom:2px}` is (0,5,1) and would put this masthead at 10px, UNDER THE 12px FLOOR. The selectors below are (0,5,1) and later, so they win on order, and every caps declaration carries its own max(12px, ...). --------------------------------------------- */ @media (max-width:1023px){ html[data-masthead^="connect-"] .phone.text-large, html[data-masthead^="connect-"] .phone.text-xlarge{ --cw-serif:clamp(12.6px, calc(6.143vw - 8.11px), 18.3px); --cw-mark:clamp(29.34px, calc(var(--cw-serif) * 1.70), 34px); /* 29.34 layout px is 44.01 REAL px through the measured 1.5 net zoom, so LAW L5 holds */ --cw-gap:.3em; } html[data-masthead^="connect-"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--cw-mark);width:var(--cw-mark);height:var(--cw-mark); } html[data-masthead^="connect-"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--cw-mark) - 6px);height:calc(var(--cw-mark) - 6px); } html[data-masthead^="connect-"] .phone.text-large .hdr .bwm-caps, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .bwm-caps{ font-size:var(--cw-serif);column-gap:var(--cw-gap);bottom:0;letter-spacing:var(--cw-ls); } html[data-masthead="connect-two"] .phone.text-large .hdr .bwm-city, html[data-masthead="connect-two"] .phone.text-xlarge .hdr .bwm-city{font-size:var(--cw-serif)} html[data-masthead="connect-two"] .phone.text-large .hdr .bwm-product, html[data-masthead="connect-two"] .phone.text-xlarge .hdr .bwm-product{ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio)));letter-spacing:var(--cw-ls); } html[data-masthead="connect-one"] .phone.text-large .hdr .bwm-city, html[data-masthead="connect-one"] .phone.text-xlarge .hdr .bwm-city{ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio)));letter-spacing:var(--cw-ls); } html[data-masthead="connect-one"] .phone.text-large .hdr .bwm-product, html[data-masthead="connect-one"] .phone.text-xlarge .hdr .bwm-product{ font-size:max(12px, calc(var(--cw-serif) * var(--cw-ratio) * .909));letter-spacing:var(--cw-ls); } } @media (max-width:359px){ /* 320 AT THE TWO LARGE TEXT STEPS, THE TIGHTEST CELL IN THE APP. 213.3 layout px for the whole header: 6px of row padding a side, a 29.34px mark, a 5px gap and the 44px gear leave 118.0px for the lockup. Both values hit their 12px floor here, so they converge, which is honest rather than tidy: there is one answer at 118px, not two. Tracking is cut to .06em at this cell only, the same move MASTHEAD 2026-09-23 already makes for Arabic, Khmer, Lao and Bengali. */ html[data-masthead^="connect-"] .phone.text-large, html[data-masthead^="connect-"] .phone.text-xlarge{ --cw-serif:12.6px;--cw-mark:29.34px;--cw-gap:.28em;--cw-ls:.06em; } html[data-masthead^="connect-"] .phone.text-large .hdr .hdr-row, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .hdr-row{ padding-left:6px;padding-right:6px;gap:5px; } /* `html:not([data-masthead="connect"]) .hdr .bwm-caps{letter-spacing:.1em}` of MASTHEAD 2026-09-23 is (0,3,1) and catches these values at 320 at NORMAL text too, where it would override the .15em the words are drawn with. Put back, at (0,3,1) and later. */ html[data-masthead^="connect-"] .hdr .bwm-caps{letter-spacing:var(--cw-ls)} } @media (min-width:1024px){ /* DESKTOP AT THE TWO LARGE TEXT STEPS. Without this the desktop ramp is read through `.phone`'s zoom:2 and the band grows about 36 real px for no gain. Same ramp over the same measured 1.5. */ html[data-masthead^="connect-"] .phone.text-large, html[data-masthead^="connect-"] .phone.text-xlarge{ --cw-serif:clamp(22.7px, calc(1.6vw + 6.27px), 32px); --cw-mark:clamp(30px, calc(var(--cw-serif) * 1.70), 47px); } html[data-masthead^="connect-"] .phone.text-large .hdr .hdr-row>.hdr-mark, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .hdr-row>.hdr-mark{ flex-basis:var(--cw-mark);width:var(--cw-mark);height:var(--cw-mark); } html[data-masthead^="connect-"] .phone.text-large .hdr .hdr-mark .hdr-logo, html[data-masthead^="connect-"] .phone.text-xlarge .hdr .hdr-mark .hdr-logo{ width:calc(var(--cw-mark) - 6px);height:calc(var(--cw-mark) - 6px); } } /* ==== END RENAME 2026-09-26 ==== */