/* ============================================================
Sterling Admissions: brand-motifs.css
The signature colours and five recurring motifs, drawn from the
homepage painting (painted-arch.js) and the mark (logo.js). They let a
page read as Sterling without showing the artwork itself. Pure CSS:
inline SVG data URIs and masks, no images to download, no script.
Load it after the page's own stylesheet:
The app (app.html) and admin can load it too; every class starts with
m- and every token is new, so nothing here collides with brand.css.
------------------------------------------------------------------
SIGNATURE COLOURS
Sampled from painted-arch.js's palette (P.poppy, P.meadow, P.iron,
P.wallMid, P.skyMid), which follows Szinyei Merse Pál's Pipacsos mező.
They sit beside the core brand colours (navy, paper, stone, passage),
never instead of them.
Text is navy or ink on paper, always. The accents are for motifs,
seals, highlights and small interface states. Where an accent has to
carry words (a status label, a short kicker), use its -ink variant,
which passes WCAG AA (4.5:1) for small text on paper and on white.
token hex on paper use
--poppy #E42E22 3.99:1 the one key highlight per page; achievement seals
--poppy-deep #B21E22 6.07:1 shading inside poppy artwork
--poppy-ink #B21E22 6.07:1 rare small text in the poppy role (5.45:1 on stone)
--meadow #98C04E 1.88:1 growth: brush bands, stems, sprigs. Never text.
--meadow-deep #427452 4.89:1 stems and leaves; small text on paper or white only
--meadow-ink #3B6A2C 5.73:1 small text in the meadow role (5.15:1 on stone)
--verdigris #2E5E56 6.60:1 progress and completion: tick-seals, progress
fills, done states, credit tokens (5.93:1 on stone)
--patina #96C6AC 1.72:1 highlights on verdigris bronze. Never text.
--limestone #D8BA8C 1.66:1 surfaces and frames: arch frames, ticket grounds
--limestone-light #F2E0BA 1.17:1 the lit face of a frame or panel
--limestone-ink #7A5A2E 5.65:1 small text on limestone grounds (5.08:1 on stone)
--sky #3E8ED6 3.11:1 wayfinding: routes, next stops, the tern's world
--sky-pale #A4CCEC 1.51:1 soft rings, pale washes
--sky-ink #24699E 5.24:1 the same as --passage-ink; small text in the sky role
Rules for each colour
- Poppy is scarce on purpose: one key phrase per page (.m-key) and
things a person has earned (milestone seals, rank-up, badges). Never
on buttons, never for errors (errors stay --alert #A8362A).
- Verdigris is the gates' bronze: anything that shows progress or a
finished step, and session credits (the tokens are bronze, not gold).
It is not a link colour; links stay --passage-ink.
- Limestone is the stone of the gateway: frames, cards, tickets, quiet
panels next to --stone. Never text except --limestone-ink.
- Meadow is growth: a secondary brush band, a sprig, a stem. It never
carries meaning on its own.
- Sky is direction: route lines, the next stop, the sky brush band.
The mark itself stays Passage and Daylight, as logo.js says.
- Max one accent per small component; poppy and verdigris never sit
side by side at the same size.
------------------------------------------------------------------
THE FIVE MOTIFS (use at most one or two per section)
1. The pointed arch: the gateway's silhouette, two arcs of radius 1.5
half-widths, as in painted-arch.js. One arch: two arcs of radius 1.5
half-widths, springing a√2 below the apex. Never round-headed,
never a lancet of straight lines.
.m-arch mask any block (img, video, div) to the arch.
The head is always true to proportion; the
straight sides stretch with the element.
.m-arch-frame a wrapper that draws the moulded orders around
its one child: a navy hairline, a limestone
band, a second hairline. Put the img inside.
![]()
2. The brushstroke band: a short dry-brush stroke in poppy, meadow or
sky, painted like the meadow. On a key phrase (.m-key) it is a paint
wash under the lower half of the words, never a line.
.m-key washes ONE key phrase per page (poppy).
Wrap the words in . It
paints itself in once when scrolled into view,
where the browser supports scroll timelines and
motion is allowed; otherwise it is simply there.
.m-key--meadow, .m-key--sky colour variants.
.m-stroke-rule a short painted divider (block element, often an
). Default meadow; --poppy and --sky variants.
3. The tern glyph: the real mark, small, as a wayfinding sign. Never
rotated, never recoloured outside Passage/Daylight/Navy/Paper.
.m-tern an inline glyph (an empty ).
.m-tern-mark puts the tern before a short label or kicker.
.m-tern-list a list with terns for bullets.
.m-tern-inline terns before each item of a wrapped list of chips.
.m-tern--navy, .m-tern--paper one-colour versions (mask).
4. The engraved horizon: a hairline with fine hatching under it, longer
in the middle and fading at the ends, like the horizon line on an
engraved plate.
.m-horizon a rule (an
, or any empty block).
.m-horizon-top replaces a section's top border with the horizon.
5. The single poppy: a small flower for a highlight or a badge.
.m-poppy an inline glyph (an empty ).
.m-poppy-badge a small label with a poppy before it, for an
earned badge or a single standout item.
All of it is responsive (sizes are in em or clamp()), costs nothing at
load, and the only motion (.m-key painting in) respects
prefers-reduced-motion.
============================================================ */
:root{
/* accent colours: brand.css */
--m-arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 2000' preserveAspectRatio='xMidYMin meet'%3E%3Cpath d='M0 2000 V141.42 A150 150 0 0 1 100 0 A150 150 0 0 1 200 141.42 V2000 Z'/%3E%3C/svg%3E");
--m-stroke-poppy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 5.6 Q6 5.6 10.2 5.8 Q14.3 6 18.5 6.3 Q22.7 6.5 26.8 6.4 Q31 6.2 35.2 6.4 Q39.3 6.6 43.5 6.6 Q47.7 6.6 51.8 6.6 Q56 6.6 60.2 7 Q64.3 7.3 68.5 7.3 Q72.7 7.2 76.8 6.8 Q81 6.4 85.2 6.6 Q89.3 6.9 93.5 6.6 Q97.7 6.2 101.8 6.4 Q106 6.6 110.2 6.9 Q114.3 7.2 118.5 7.1 Q122.7 6.9 126.8 7 Q131 7.2 135.2 7.1 Q139.3 7 143.5 7.1 Q147.7 7.1 151.8 6.7 Q156 6.3 160.2 6.7 Q164.3 7.1 168.5 6.9 Q172.7 6.7 176.8 6.5 Q181 6.4 185.2 6.7 Q189.3 7 193.5 6.5 Q197.7 5.9 201.8 6.3 L214.4 7.7 L203.5 9.1 L221.2 9.4 L201.6 10.8 L217.6 11.1 L203.4 12.5 L221 12.8 L202.7 14.2 L215.2 14.5 L203.8 15.9 L206 16.8 Q206 16.8 201.8 17.1 Q197.7 17.3 193.5 17.2 Q189.3 17.1 185.2 17.6 Q181 18.2 176.8 17.8 Q172.7 17.5 168.5 17.9 Q164.3 18.3 160.2 18.4 Q156 18.5 151.8 18.4 Q147.7 18.2 143.5 18.4 Q139.3 18.6 135.2 18.7 Q131 18.8 126.8 19.2 Q122.7 19.6 118.5 19.4 Q114.3 19.2 110.2 19.6 Q106 20 101.8 20 Q97.7 20 93.5 19.9 Q89.3 19.8 85.2 20.2 Q81 20.5 76.8 20.4 Q72.7 20.3 68.5 20.1 Q64.3 19.9 60.2 20.1 Q56 20.3 51.8 20 Q47.7 19.8 43.5 20.1 Q39.3 20.5 35.2 20.6 Q31 20.7 26.8 20.4 Q22.7 20 18.5 20.3 Q14.3 20.6 10.2 20.6 C2 19.5 1.5 6.6 6 5.6 Z' fill='%23E42E22' fill-opacity='.92'/%3E%3Cpath d='M23.4 6.4 C83.4 5.8 90.7 7.4 150.7 6.5' stroke='%23B21E22' stroke-opacity='0.35' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.7 9.2 C71.7 8.4 96.4 10 156.4 9.2' stroke='%23F86C42' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.1 12 C71.1 10.8 134.8 12.4 194.8 12.2' stroke='%23B21E22' stroke-opacity='0.22' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M25.9 13.4 C85.9 12.6 138.3 14.2 198.3 12.8' stroke='%23F86C42' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M27.6 15.8 C87.6 14.8 142.1 16.4 202.1 15.1' stroke='%23B21E22' stroke-opacity='0.3' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12.1 17.2 C72.1 16.6 141.8 18.2 201.8 18' stroke='%23F86C42' stroke-opacity='0.35' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M203.6 11.4 L228.4 10.7' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.8' stroke-linecap='round' stroke-dasharray='7 2'/%3E%3Cpath d='M198.3 13.7 L229.8 13.4' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='6.3 1.8'/%3E%3Cpath d='M204.2 9.6 L234.6 10' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.6' stroke-linecap='round' stroke-dasharray='5.6 2.7'/%3E%3Cpath d='M203 13.1 L227.8 12.4' stroke='%23E42E22' stroke-opacity='.7' stroke-width='1' stroke-linecap='round' stroke-dasharray='5.9 1.3'/%3E%3C/svg%3E");
--m-stroke-meadow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 5.7 Q6 5.7 10.2 5.8 Q14.3 5.9 18.5 6.2 Q22.7 6.4 26.8 6.7 Q31 7 35.2 7.1 Q39.3 7.3 43.5 7 Q47.7 6.8 51.8 6.8 Q56 6.8 60.2 7.1 Q64.3 7.4 68.5 7.4 Q72.7 7.5 76.8 7 Q81 6.5 85.2 6.6 Q89.3 6.7 93.5 6.6 Q97.7 6.6 101.8 6.6 Q106 6.5 110.2 6.9 Q114.3 7.4 118.5 7.1 Q122.7 6.8 126.8 6.5 Q131 6.2 135.2 6.3 Q139.3 6.3 143.5 6.5 Q147.7 6.7 151.8 6.8 Q156 6.8 160.2 6.8 Q164.3 6.8 168.5 7 Q172.7 7.1 176.8 7.2 Q181 7.3 185.2 6.7 Q189.3 6.2 193.5 6.3 Q197.7 6.4 201.8 6.9 L220.1 8.4 L202.2 9.8 L210.3 9.9 L204.3 11.3 L218 11.5 L202.5 12.9 L212.6 13 L203.3 14.4 L212.9 14.6 L204.1 16 L206 16.7 Q206 16.7 201.8 17 Q197.7 17.3 193.5 17.4 Q189.3 17.4 185.2 17.5 Q181 17.6 176.8 17.5 Q172.7 17.5 168.5 17.5 Q164.3 17.6 160.2 18.1 Q156 18.7 151.8 18.7 Q147.7 18.6 143.5 19 Q139.3 19.4 135.2 19.4 Q131 19.4 126.8 19.5 Q122.7 19.5 118.5 19.7 Q114.3 19.9 110.2 19.8 Q106 19.7 101.8 20.1 Q97.7 20.6 93.5 20.7 Q89.3 20.8 85.2 20.6 Q81 20.3 76.8 19.9 Q72.7 19.5 68.5 19.6 Q64.3 19.7 60.2 20.2 Q56 20.7 51.8 20.3 Q47.7 20 43.5 20.1 Q39.3 20.2 35.2 19.9 Q31 19.6 26.8 20.2 Q22.7 20.8 18.5 20.4 Q14.3 20 10.2 20 C2 19.1 1.5 6.7 6 5.7 Z' fill='%2398C04E' fill-opacity='.92'/%3E%3Cpath d='M24.7 6.8 C84.7 5.8 169.6 7.4 229.6 6.6' stroke='%23427452' stroke-opacity='0.35' stroke-width='0.7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.3 9.4 C71.3 8.4 167.2 10 227.2 9.9' stroke='%23D8D860' stroke-opacity='0.55' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M31.8 11.2 C91.8 10.8 157.5 12.4 217.5 12' stroke='%23427452' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round' fill='none'/%3E%3Cpath d='M26.6 13.6 C86.6 12.6 137 14.2 197 13.5' stroke='%23D8D860' stroke-opacity='0.4' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M25.8 15.3 C85.8 14.8 107.9 16.4 167.9 16.3' stroke='%23427452' stroke-opacity='0.3' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M29.6 17.8 C89.6 16.6 97.1 18.2 157.1 16.9' stroke='%23D8D860' stroke-opacity='0.35' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M196.6 12 L219.9 11.2' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='6.3 1.5'/%3E%3Cpath d='M205.1 13.3 L217.2 12.9' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1' stroke-linecap='round' stroke-dasharray='3.5 2'/%3E%3Cpath d='M202 12.4 L223.9 11.7' stroke='%2398C04E' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='6.8 1.8'/%3E%3Cpath d='M200.9 12.5 L216.6 12.9' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='4.5 2.6'/%3E%3C/svg%3E");
--m-stroke-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 6 Q6 6 10.2 5.7 Q14.3 5.3 18.5 6 Q22.7 6.8 26.8 6.6 Q31 6.3 35.2 6.6 Q39.3 6.9 43.5 6.7 Q47.7 6.5 51.8 6.6 Q56 6.7 60.2 6.6 Q64.3 6.5 68.5 6.9 Q72.7 7.3 76.8 7 Q81 6.7 85.2 6.5 Q89.3 6.3 93.5 6.5 Q97.7 6.6 101.8 6.4 Q106 6.2 110.2 6.7 Q114.3 7.1 118.5 6.7 Q122.7 6.3 126.8 6.3 Q131 6.4 135.2 6.6 Q139.3 6.7 143.5 6.9 Q147.7 7 151.8 6.9 Q156 6.8 160.2 6.7 Q164.3 6.5 168.5 6.9 Q172.7 7.3 176.8 7 Q181 6.7 185.2 6.5 Q189.3 6.4 193.5 6.5 Q197.7 6.5 201.8 6.6 L213.6 7.7 L203.7 9.1 L220.2 9.4 L203.6 10.8 L213.3 11 L203.5 12.4 L210.1 12.7 L201.3 14.1 L218.6 14.4 L205 15.8 L206 16.6 Q206 16.6 201.8 17.3 Q197.7 18 193.5 17.8 Q189.3 17.6 185.2 17.3 Q181 17 176.8 17.5 Q172.7 18 168.5 18.1 Q164.3 18.3 160.2 18.5 Q156 18.7 151.8 18.7 Q147.7 18.7 143.5 18.9 Q139.3 19 135.2 19.2 Q131 19.3 126.8 19.4 Q122.7 19.4 118.5 19.4 Q114.3 19.4 110.2 19.6 Q106 19.9 101.8 20 Q97.7 20.2 93.5 20.3 Q89.3 20.4 85.2 20.3 Q81 20.3 76.8 20 Q72.7 19.8 68.5 20.1 Q64.3 20.4 60.2 20.2 Q56 20.1 51.8 20.3 Q47.7 20.6 43.5 20.5 Q39.3 20.5 35.2 20.6 Q31 20.7 26.8 20.4 Q22.7 20.2 18.5 20.5 Q14.3 20.8 10.2 20.4 C2 19 1.5 7 6 6 Z' fill='%233E8ED6' fill-opacity='.92'/%3E%3Cpath d='M9.2 6.3 C69.2 5.8 111.4 7.4 171.4 6.5' stroke='%231E62B8' stroke-opacity='0.35' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.8 9.5 C71.8 8.4 126.2 10 186.2 9.1' stroke='%23A4CCEC' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M36.2 11.2 C96.2 10.8 110.5 12.4 170.5 11.3' stroke='%231E62B8' stroke-opacity='0.22' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M23.9 13.2 C83.9 12.6 156.1 14.2 216.1 13.7' stroke='%23A4CCEC' stroke-opacity='0.4' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M28.2 15.5 C88.2 14.8 133.2 16.4 193.2 15.9' stroke='%231E62B8' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M22.3 17.1 C82.3 16.6 141.3 18.2 201.3 17.1' stroke='%23A4CCEC' stroke-opacity='0.35' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M196.2 15.9 L220.9 15.2' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='4.3 2.1'/%3E%3Cpath d='M196.1 12.1 L219.4 11.8' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.9' stroke-linecap='round' stroke-dasharray='7 1.2'/%3E%3Cpath d='M203.3 10.5 L220.7 9.9' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.9' stroke-linecap='round' stroke-dasharray='4 2.4'/%3E%3Cpath d='M201.2 8.2 L232 8.9' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.8' stroke-linecap='round' stroke-dasharray='5.9 2.4'/%3E%3C/svg%3E");
/* paint washes for .m-key: the strokes above at .36 opacity (the strokes stay for .m-stroke-rule) */
--m-wash-poppy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 5.6 Q6 5.6 10.2 5.8 Q14.3 6 18.5 6.3 Q22.7 6.5 26.8 6.4 Q31 6.2 35.2 6.4 Q39.3 6.6 43.5 6.6 Q47.7 6.6 51.8 6.6 Q56 6.6 60.2 7 Q64.3 7.3 68.5 7.3 Q72.7 7.2 76.8 6.8 Q81 6.4 85.2 6.6 Q89.3 6.9 93.5 6.6 Q97.7 6.2 101.8 6.4 Q106 6.6 110.2 6.9 Q114.3 7.2 118.5 7.1 Q122.7 6.9 126.8 7 Q131 7.2 135.2 7.1 Q139.3 7 143.5 7.1 Q147.7 7.1 151.8 6.7 Q156 6.3 160.2 6.7 Q164.3 7.1 168.5 6.9 Q172.7 6.7 176.8 6.5 Q181 6.4 185.2 6.7 Q189.3 7 193.5 6.5 Q197.7 5.9 201.8 6.3 L214.4 7.7 L203.5 9.1 L221.2 9.4 L201.6 10.8 L217.6 11.1 L203.4 12.5 L221 12.8 L202.7 14.2 L215.2 14.5 L203.8 15.9 L206 16.8 Q206 16.8 201.8 17.1 Q197.7 17.3 193.5 17.2 Q189.3 17.1 185.2 17.6 Q181 18.2 176.8 17.8 Q172.7 17.5 168.5 17.9 Q164.3 18.3 160.2 18.4 Q156 18.5 151.8 18.4 Q147.7 18.2 143.5 18.4 Q139.3 18.6 135.2 18.7 Q131 18.8 126.8 19.2 Q122.7 19.6 118.5 19.4 Q114.3 19.2 110.2 19.6 Q106 20 101.8 20 Q97.7 20 93.5 19.9 Q89.3 19.8 85.2 20.2 Q81 20.5 76.8 20.4 Q72.7 20.3 68.5 20.1 Q64.3 19.9 60.2 20.1 Q56 20.3 51.8 20 Q47.7 19.8 43.5 20.1 Q39.3 20.5 35.2 20.6 Q31 20.7 26.8 20.4 Q22.7 20 18.5 20.3 Q14.3 20.6 10.2 20.6 C2 19.5 1.5 6.6 6 5.6 Z' fill='%23E42E22' fill-opacity='.36'/%3E%3Cpath d='M23.4 6.4 C83.4 5.8 90.7 7.4 150.7 6.5' stroke='%23B21E22' stroke-opacity='0.35' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.7 9.2 C71.7 8.4 96.4 10 156.4 9.2' stroke='%23F86C42' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.1 12 C71.1 10.8 134.8 12.4 194.8 12.2' stroke='%23B21E22' stroke-opacity='0.22' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M25.9 13.4 C85.9 12.6 138.3 14.2 198.3 12.8' stroke='%23F86C42' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M27.6 15.8 C87.6 14.8 142.1 16.4 202.1 15.1' stroke='%23B21E22' stroke-opacity='0.3' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12.1 17.2 C72.1 16.6 141.8 18.2 201.8 18' stroke='%23F86C42' stroke-opacity='0.35' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M203.6 11.4 L228.4 10.7' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.8' stroke-linecap='round' stroke-dasharray='7 2'/%3E%3Cpath d='M198.3 13.7 L229.8 13.4' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='6.3 1.8'/%3E%3Cpath d='M204.2 9.6 L234.6 10' stroke='%23E42E22' stroke-opacity='.7' stroke-width='0.6' stroke-linecap='round' stroke-dasharray='5.6 2.7'/%3E%3Cpath d='M203 13.1 L227.8 12.4' stroke='%23E42E22' stroke-opacity='.7' stroke-width='1' stroke-linecap='round' stroke-dasharray='5.9 1.3'/%3E%3C/svg%3E");
--m-wash-meadow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 5.7 Q6 5.7 10.2 5.8 Q14.3 5.9 18.5 6.2 Q22.7 6.4 26.8 6.7 Q31 7 35.2 7.1 Q39.3 7.3 43.5 7 Q47.7 6.8 51.8 6.8 Q56 6.8 60.2 7.1 Q64.3 7.4 68.5 7.4 Q72.7 7.5 76.8 7 Q81 6.5 85.2 6.6 Q89.3 6.7 93.5 6.6 Q97.7 6.6 101.8 6.6 Q106 6.5 110.2 6.9 Q114.3 7.4 118.5 7.1 Q122.7 6.8 126.8 6.5 Q131 6.2 135.2 6.3 Q139.3 6.3 143.5 6.5 Q147.7 6.7 151.8 6.8 Q156 6.8 160.2 6.8 Q164.3 6.8 168.5 7 Q172.7 7.1 176.8 7.2 Q181 7.3 185.2 6.7 Q189.3 6.2 193.5 6.3 Q197.7 6.4 201.8 6.9 L220.1 8.4 L202.2 9.8 L210.3 9.9 L204.3 11.3 L218 11.5 L202.5 12.9 L212.6 13 L203.3 14.4 L212.9 14.6 L204.1 16 L206 16.7 Q206 16.7 201.8 17 Q197.7 17.3 193.5 17.4 Q189.3 17.4 185.2 17.5 Q181 17.6 176.8 17.5 Q172.7 17.5 168.5 17.5 Q164.3 17.6 160.2 18.1 Q156 18.7 151.8 18.7 Q147.7 18.6 143.5 19 Q139.3 19.4 135.2 19.4 Q131 19.4 126.8 19.5 Q122.7 19.5 118.5 19.7 Q114.3 19.9 110.2 19.8 Q106 19.7 101.8 20.1 Q97.7 20.6 93.5 20.7 Q89.3 20.8 85.2 20.6 Q81 20.3 76.8 19.9 Q72.7 19.5 68.5 19.6 Q64.3 19.7 60.2 20.2 Q56 20.7 51.8 20.3 Q47.7 20 43.5 20.1 Q39.3 20.2 35.2 19.9 Q31 19.6 26.8 20.2 Q22.7 20.8 18.5 20.4 Q14.3 20 10.2 20 C2 19.1 1.5 6.7 6 5.7 Z' fill='%2398C04E' fill-opacity='.36'/%3E%3Cpath d='M24.7 6.8 C84.7 5.8 169.6 7.4 229.6 6.6' stroke='%23427452' stroke-opacity='0.35' stroke-width='0.7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.3 9.4 C71.3 8.4 167.2 10 227.2 9.9' stroke='%23D8D860' stroke-opacity='0.55' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M31.8 11.2 C91.8 10.8 157.5 12.4 217.5 12' stroke='%23427452' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round' fill='none'/%3E%3Cpath d='M26.6 13.6 C86.6 12.6 137 14.2 197 13.5' stroke='%23D8D860' stroke-opacity='0.4' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M25.8 15.3 C85.8 14.8 107.9 16.4 167.9 16.3' stroke='%23427452' stroke-opacity='0.3' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M29.6 17.8 C89.6 16.6 97.1 18.2 157.1 16.9' stroke='%23D8D860' stroke-opacity='0.35' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M196.6 12 L219.9 11.2' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='6.3 1.5'/%3E%3Cpath d='M205.1 13.3 L217.2 12.9' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1' stroke-linecap='round' stroke-dasharray='3.5 2'/%3E%3Cpath d='M202 12.4 L223.9 11.7' stroke='%2398C04E' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='6.8 1.8'/%3E%3Cpath d='M200.9 12.5 L216.6 12.9' stroke='%2398C04E' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='4.5 2.6'/%3E%3C/svg%3E");
--m-wash-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M6 6 Q6 6 10.2 5.7 Q14.3 5.3 18.5 6 Q22.7 6.8 26.8 6.6 Q31 6.3 35.2 6.6 Q39.3 6.9 43.5 6.7 Q47.7 6.5 51.8 6.6 Q56 6.7 60.2 6.6 Q64.3 6.5 68.5 6.9 Q72.7 7.3 76.8 7 Q81 6.7 85.2 6.5 Q89.3 6.3 93.5 6.5 Q97.7 6.6 101.8 6.4 Q106 6.2 110.2 6.7 Q114.3 7.1 118.5 6.7 Q122.7 6.3 126.8 6.3 Q131 6.4 135.2 6.6 Q139.3 6.7 143.5 6.9 Q147.7 7 151.8 6.9 Q156 6.8 160.2 6.7 Q164.3 6.5 168.5 6.9 Q172.7 7.3 176.8 7 Q181 6.7 185.2 6.5 Q189.3 6.4 193.5 6.5 Q197.7 6.5 201.8 6.6 L213.6 7.7 L203.7 9.1 L220.2 9.4 L203.6 10.8 L213.3 11 L203.5 12.4 L210.1 12.7 L201.3 14.1 L218.6 14.4 L205 15.8 L206 16.6 Q206 16.6 201.8 17.3 Q197.7 18 193.5 17.8 Q189.3 17.6 185.2 17.3 Q181 17 176.8 17.5 Q172.7 18 168.5 18.1 Q164.3 18.3 160.2 18.5 Q156 18.7 151.8 18.7 Q147.7 18.7 143.5 18.9 Q139.3 19 135.2 19.2 Q131 19.3 126.8 19.4 Q122.7 19.4 118.5 19.4 Q114.3 19.4 110.2 19.6 Q106 19.9 101.8 20 Q97.7 20.2 93.5 20.3 Q89.3 20.4 85.2 20.3 Q81 20.3 76.8 20 Q72.7 19.8 68.5 20.1 Q64.3 20.4 60.2 20.2 Q56 20.1 51.8 20.3 Q47.7 20.6 43.5 20.5 Q39.3 20.5 35.2 20.6 Q31 20.7 26.8 20.4 Q22.7 20.2 18.5 20.5 Q14.3 20.8 10.2 20.4 C2 19 1.5 7 6 6 Z' fill='%233E8ED6' fill-opacity='.36'/%3E%3Cpath d='M9.2 6.3 C69.2 5.8 111.4 7.4 171.4 6.5' stroke='%231E62B8' stroke-opacity='0.35' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.8 9.5 C71.8 8.4 126.2 10 186.2 9.1' stroke='%23A4CCEC' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M36.2 11.2 C96.2 10.8 110.5 12.4 170.5 11.3' stroke='%231E62B8' stroke-opacity='0.22' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M23.9 13.2 C83.9 12.6 156.1 14.2 216.1 13.7' stroke='%23A4CCEC' stroke-opacity='0.4' stroke-width='0.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M28.2 15.5 C88.2 14.8 133.2 16.4 193.2 15.9' stroke='%231E62B8' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M22.3 17.1 C82.3 16.6 141.3 18.2 201.3 17.1' stroke='%23A4CCEC' stroke-opacity='0.35' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M196.2 15.9 L220.9 15.2' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.7' stroke-linecap='round' stroke-dasharray='4.3 2.1'/%3E%3Cpath d='M196.1 12.1 L219.4 11.8' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.9' stroke-linecap='round' stroke-dasharray='7 1.2'/%3E%3Cpath d='M203.3 10.5 L220.7 9.9' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.9' stroke-linecap='round' stroke-dasharray='4 2.4'/%3E%3Cpath d='M201.2 8.2 L232 8.9' stroke='%233E8ED6' stroke-opacity='.7' stroke-width='0.8' stroke-linecap='round' stroke-dasharray='5.9 2.4'/%3E%3C/svg%3E");
--m-tern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 324 95 96'%3E%3Cpath fill='%234FA9E8' d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 C160.26 347.19 173.39 335.14 194.2 330.77 Z'/%3E%3Cpath fill='%232E8FD6' d='M151.5 362.52 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 Z'/%3E%3Cpath fill='%234FA9E8' d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3Cellipse fill='%2314324F' cx='151.5' cy='357.6' rx='4.4' ry='4.9'/%3E%3C/svg%3E");
--m-poppy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath transform='rotate(-118 10 10.4)' d='M10 10.4 C6.6 9.6 4.8 6.4 6 3.6 C7 1.6 9.1 1.9 10 3.2 C10.9 1.9 13 1.6 14 3.6 C15.2 6.4 13.4 9.6 10 10.4 Z' fill='%23B21E22'/%3E%3Cpath transform='rotate(118 10 10.4)' d='M10 10.4 C6.6 9.6 4.8 6.4 6 3.6 C7 1.6 9.1 1.9 10 3.2 C10.9 1.9 13 1.6 14 3.6 C15.2 6.4 13.4 9.6 10 10.4 Z' fill='%23B21E22'/%3E%3Cpath transform='rotate(-44 10 10.4)' d='M10 10.4 C6.6 9.6 4.8 6.4 6 3.6 C7 1.6 9.1 1.9 10 3.2 C10.9 1.9 13 1.6 14 3.6 C15.2 6.4 13.4 9.6 10 10.4 Z' fill='%23E42E22'/%3E%3Cpath transform='rotate(44 10 10.4)' d='M10 10.4 C6.6 9.6 4.8 6.4 6 3.6 C7 1.6 9.1 1.9 10 3.2 C10.9 1.9 13 1.6 14 3.6 C15.2 6.4 13.4 9.6 10 10.4 Z' fill='%23E42E22'/%3E%3Cpath transform='rotate(0 10 10.4)' d='M10 10.4 C6.6 9.6 4.8 6.4 6 3.6 C7 1.6 9.1 1.9 10 3.2 C10.9 1.9 13 1.6 14 3.6 C15.2 6.4 13.4 9.6 10 10.4 Z' fill='%23F0503A'/%3E%3Ccircle cx='10' cy='10' r='2.3' fill='%231E1418'/%3E%3Ccircle cx='9.4' cy='9.5' r='.7' fill='%235B4A55'/%3E%3C/svg%3E");
}
/* ---------- 1. the pointed arch ---------- */
.m-arch{
-webkit-mask:var(--m-arch) center top / 100% auto no-repeat;
mask:var(--m-arch) center top / 100% auto no-repeat;
}
/* Portrait photos are plain: no arch, no gilt moulding (Ben, 2026-11-09).
The class name stays because several pages use it. */
.m-arch-frame{position:relative;display:block;margin:0;padding:0;overflow:hidden;border-radius:3px;background:var(--stone,#EFE9DD)}
.m-arch-frame > *{position:relative;display:block;width:100%;margin:0}
.m-arch-frame > img{height:auto;object-fit:cover}
/* a missing photo: a small limestone arch with initials, never a large empty block */
.portrait-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;width:100%;max-width:96px;
background:var(--portrait-ground);color:var(--navy);font:400 1.6rem/1 var(--titling);letter-spacing:.06em;
-webkit-mask:var(--m-arch) center top / 100% auto no-repeat;mask:var(--m-arch) center top / 100% auto no-repeat}
.portrait-ph.sm{max-width:56px;font-size:1.05rem}
.portrait-ph.lg{max-width:132px;font-size:2.3rem}
/* ---------- 2. the brushstroke band ---------- */
/* the wash sits low, under the letters like a brush stroke beneath the line, touching their feet rather than crossing them */
.m-key{background:var(--m-wash-poppy) left 0 bottom 0 / 100% .42em no-repeat;padding:0 .08em .14em;margin:0 -.08em;white-space:nowrap;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.m-key--meadow{background-image:var(--m-wash-meadow)}
.m-key--sky{background-image:var(--m-wash-sky)}
/* a phrase longer than a phone line wraps, and the wash follows each line (clone) */
@media (max-width:760px){.m-key{white-space:normal}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.m-key{animation:m-paint linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
}
}
@keyframes m-paint{from{background-size:0% .42em}to{background-size:100% .42em}}
.m-stroke-rule{
display:block;width:clamp(96px,22vw,168px);height:12px;border:0;margin:30px 0;padding:0;
background:var(--m-stroke-meadow) left center / 100% 100% no-repeat;
}
.m-stroke-rule--poppy{background-image:var(--m-stroke-poppy)}
.m-stroke-rule--sky{background-image:var(--m-stroke-sky)}
/* ---------- 3. the tern glyph ---------- */
.m-tern{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:var(--m-tern) center / contain no-repeat}
.m-tern--navy,.m-tern--paper{background:currentColor;
-webkit-mask:var(--sui-ternMask) center / contain no-repeat;mask:var(--sui-ternMask) center / contain no-repeat}
.m-tern--navy{color:var(--navy,#14324F)}
.m-tern--paper{color:var(--paper,#F7F2E8)}
.m-tern-mark{display:flex;align-items:center;gap:.55em}
.m-tern-mark::before{content:"";flex:none;width:1.15em;height:1.15em;background:var(--m-tern) center / contain no-repeat}
.m-tern-list{list-style:none;padding-left:0}
.m-tern-list > li{position:relative;padding-left:1.7em}
.m-tern-list > li::before{content:"";position:absolute;left:0;top:.3em;width:1em;height:1em;background:var(--m-tern) center / contain no-repeat}
.m-tern-inline > li::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.42em;vertical-align:-.12em;background:var(--m-tern) center / contain no-repeat}
/* ---------- 4. the engraved horizon ---------- */
.m-horizon,.m-horizon-top::before{
display:block;height:9px;border:0;margin:0;padding:0;
color:var(--m-horizon-ink,var(--navy,#14324F));opacity:.5;
background:
linear-gradient(currentColor,currentColor) 0 0 / 100% 1px no-repeat,
repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 4px) 0 3px / 100% 6px no-repeat;
-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),radial-gradient(58% 130% at 50% 0,#000 30%,transparent 100%);
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),radial-gradient(58% 130% at 50% 0,#000 30%,transparent 100%);
mask-composite:intersect;
}
.m-horizon-top{border-top:0 !important;position:relative}
.m-horizon-top::before{content:"";position:absolute;left:0;right:0;top:0}
/* ---------- 5. the single poppy ---------- */
.m-poppy{display:inline-block;width:1em;height:1em;vertical-align:-.15em;background:var(--m-poppy) center / contain no-repeat}
.m-poppy-badge{display:inline-flex;align-items:center;gap:.4em}
.m-poppy-badge::before{content:"";flex:none;width:1em;height:1em;background:var(--m-poppy) center / contain no-repeat}
@media print{.m-key{background:none;text-decoration:underline}}