/* ---------- Fonts, served from this site ---------- SELF-HOSTED, and that is the point rather than a preference: linking fonts.googleapis.com meant every visitor's browser announced their IP address to Google before a word of the page was drawn. Nothing was stored and no cookie was set, but the site tells people there is no tracking of any kind, and a request to a third party on every page load is the sort of thing that makes a reader right to be sceptical. This was the last one. ONE FILE PER FAMILY PER SUBSET, not per weight: all three are VARIABLE fonts, and Google was serving the identical file for every weight we asked for (verified by sha256 — 30 downloads, 9 distinct files). The `font-weight` ranges below are the real axis ranges read out of the files, so the browser interpolates rather than synthesising a bold. The unicode-range lines are Google's own, kept verbatim. They are what stops a visitor reading English from ever downloading the Bengali subset — 187KB that only somebody reading Bengali needs. VERSIONED IN THE FILENAME, which is what asset_version() does for the stylesheet and cannot do here: a url() inside a static .css is not Jinja and cannot carry a computed token. So the token is the first eight hex of the file's own sha256, baked into the name. nginx serves /static with `expires 30d`, and that is only safe while the URL changes when the bytes do — replace a font and the name changes with it, so no browser can hold a month-old face for a typeface that has been swapped. Regenerate with tools/hash-fonts.py after adding or replacing a file. */ /* Bricolage Grotesque — latin */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/bricolage-grotesque-latin.a79fdb52.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Bricolage Grotesque — latin-ext */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/bricolage-grotesque-latin-ext.776f6dca.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Bricolage Grotesque — vietnamese */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/bricolage-grotesque-vietnamese.b50a9d90.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* Noto Serif Bengali — latin */ @font-face{ font-family:'Noto Serif Bengali'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/noto-serif-bengali-latin.6b52f9bb.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Noto Serif Bengali — latin-ext */ @font-face{ font-family:'Noto Serif Bengali'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/noto-serif-bengali-latin-ext.b400a793.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Noto Serif Bengali — bengali */ @font-face{ font-family:'Noto Serif Bengali'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/noto-serif-bengali-bengali.8ae8a8ce.woff2') format('woff2'); unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } /* Public Sans — latin */ @font-face{ font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/public-sans-latin.5ed4d31c.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Public Sans — latin-ext */ @font-face{ font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/public-sans-latin-ext.3a00a32f.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Public Sans — vietnamese */ @font-face{ font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/public-sans-vietnamese.94593e69.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } :root{ --green:#00563F; --green-deep:#02382A; --green-tint:#E9F1EC; --red:#E8333F; --paper:#F6F5EF; --ink:#17251F; --ink-soft:#4A5A52; /* The quiet secondary line under an admin figure. It used to be --ink-soft at opacity:.8, which computes to #6e7b75 — 4.41:1 on white, failing AA by 0.09. A real token rather than a token dimmed at the point of use: an opacity is invisible to anyone reading the palette, and the colour it produces is nobody's decision. 4.87:1. */ --ink-muted:#68746E; /* WCAG's "large text" threshold: at 14pt BOLD (18.6667px) or 18pt regular, the AA contrast requirement drops from 4.5:1 to 3:1. 18.7 and not 18.6667, because a rounding that lands below the line is a failure. ONE thing uses it: the dashboard's launch blocker, where being loud is the point of the sentence. It is not the general answer to the brand red — see --red-ink. */ --large-text:18.7px; /* The brand red, darkened until white on it is 5.64:1 and it on white is 5.64:1 — comfortably past AA at any size. This is what carries every RED SURFACE and every red word on the site: both Donate buttons, Subscribe, the admin Delete links, the album photo count. Growing type to reach the 3:1 large-text bar was tried first and was the wrong lever — it changed the design to fix a colour, and every element it touched came out louder than it was drawn to be. --red itself is untouched and still the flag red: it is the eyebrow dot, the focus ring, the alert borders and the launch-blocker text, none of which is small white-on-red. On whether this reads as a second colour, measured rather than guessed: THE BRAND MARK ITSELF IS PAINTED #C82028. --red-ink is 0.77 dE2000 from it, which is below the distance at which anyone can tell two samples apart; --red was 8.46 from it. So in the header, where the pill sits beside the mark, this change makes the two AGREE where they used to differ — the pill was the odd one out and now it is not. Against --red itself the difference is 8.1 dE2000 and almost all of it lightness (L* 51.7 to 43.7), hue and chroma barely moving: the same red, darker, not another red. */ --red-ink:#C9202B; --line:#DCE3DD; --white:#FFFFFF; --radius:14px; --font-display:"Bricolage Grotesque", sans-serif; --font-body:"Public Sans", -apple-system, sans-serif; --font-bn:"Noto Serif Bengali", serif; --max:1120px; --header-h:78px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ font-family:var(--font-body);background:var(--paper);color:var(--ink); line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} section{padding:80px 0} section.tinted{background:var(--green-tint)} /* wraps every content image (templates/_picture.html); display:contents makes it invisible to layout so every `.x img` rule and every grid cell behaves exactly as with a bare . */ picture{display:contents} /* ---------- Type ---------- */ h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.01em} /* h1 and h2 share the page-title size deliberately. Every public page below the homepage titles itself with an h1 now, and it should look exactly as the h2 it replaced did — the change is to the OUTLINE, not to the design. The hero and the two card shells override below. */ h1,h2{font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:16px} .lede{color:var(--ink-soft);max-width:62ch} .eyebrow{ display:flex;align-items:center;gap:10px; font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--green);margin-bottom:14px; } .eyebrow::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--red);flex:none} .eyebrow .bn{font-family:var(--font-bn);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:14px} /* Breadcrumbs: a list that wraps, separators drawn here so they are not read aloud, the current page as plain text. */ .breadcrumbs{margin:0 0 18px;font-size:14px} .breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;align-items:center} .breadcrumbs li{display:flex;align-items:center;min-width:0} .breadcrumbs li+li::before{content:"\203A";margin:0 8px;color:var(--ink-muted)} .breadcrumbs a{color:var(--green);font-weight:700;text-decoration:none} .breadcrumbs a:hover{text-decoration:underline} .breadcrumbs [aria-current]{color:var(--ink-soft);overflow-wrap:anywhere} /* "When do backup emails arrive?" on the backups panel. */ .backup-mail-help{margin-top:18px} .backup-mail-list{margin:0 0 14px 18px;padding:0} .backup-mail-list li{margin:4px 0} .backup-mail-status p{margin:6px 0} .backup-mail-warn{color:var(--red-ink)} .backup-mail-test{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .backup-mail-test small{color:var(--ink-soft)} /* The receipt line on an admin row, and the thank-you page printed: the page is the receipt when no email went, so the chrome goes. */ .receipt-state{display:block;color:var(--ink-muted)} .receipt-missing{color:var(--red-ink)} .inline-form{display:inline} @media print{ body:not(.admin-body)>header,body:not(.admin-body)>footer,.cookie-notice, .breadcrumbs,.thanks-cta,.no-print,.skip-link{display:none !important} .thanks{max-width:none;text-align:left} } /* "More from EBWA" at the foot of a detail page: a tinted band, the listing cards, then the two ways back. */ .more-from{padding-top:0} /* the article's own 80px is the gap */ .more-from h2{margin:0} .more-cards{margin-top:28px} .more-links{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-display);font-weight:600;font-size:16px; padding:12px 26px;border-radius:999px;text-decoration:none;border:none;cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; } .btn:hover{transform:translateY(-2px)} .btn:focus-visible{outline:3px solid var(--red);outline-offset:3px} .btn-green{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(0,86,63,.28)} .btn-ghost{border:2px solid var(--green);color:var(--green);background:transparent} /* Same size and weight as .btn-green — it is the same kind of button and should read as one. White on --red is 4.21:1 and fails at this size, so the SURFACE is --red-ink (5.64:1) rather than the type being grown to meet the bar. */ .btn-red{background:var(--red-ink);color:#fff;box-shadow:0 6px 18px rgba(201,32,43,.26)} /* Serious but reversible — suspending a member. 7.0:1 on white text. */ .btn-amber{background:#7A5309;color:#fff;box-shadow:0 6px 18px rgba(122,83,9,.26)} .btn-small{padding:7px 16px;font-size:14px} .btn-ghost.danger{border-color:var(--red-ink);color:var(--red-ink)} /* ---------- Skip to content ---------- Off-screen until focused, rather than display:none — a hidden element cannot take focus, so display:none would make the link unreachable by the very people it is for. It comes back on :focus, which is the only time anybody needs to see it. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--green);color:#fff;padding:12px 20px; font-family:var(--font-display);font-weight:700;font-size:15px; text-decoration:none;border-radius:0 0 10px 0; } .skip-link:focus{left:0} .skip-link:focus-visible{outline:3px solid var(--red);outline-offset:-3px} /* The target must not draw a focus ring of its own: focus is moved there programmatically, and a box around the whole page would be alarming. */ #main:focus{outline:none} /* ---------- Header ---------- */ header{ position:sticky;top:0;z-index:50; background:rgba(246,245,239,.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:22px;height:var(--header-h)} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none} .brand-mark{display:inline-flex;align-items:center;flex:none} .brand-mark img{height:56px;width:auto;display:block} /* 78px header: 11px above and below */ /* The login badge is the only branding on an otherwise bare page, so it carries it: roughly double the old 90px. Capped against the card's own width so it shrinks with the card on a phone rather than pressing against the padding. */ .login-card .brand-mark img{height:180px;max-width:100%;object-fit:contain} /* White circular backing so the badge reads as a seal on the dark green */ .foot-logo{ width:96px;height:96px;border-radius:50%;background:#fff;flex:none; display:flex;align-items:center;justify-content:center; margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.18); } .foot-logo img{height:88px;width:88px;display:block} .brand-name{font-family:var(--font-display);font-weight:800;font-size:25px;line-height:1.05} /* The strapline is the widest thing in the brand block; it is decorative, so it steps down before the nav is ever squeezed. */ /* The subtitle: 13px, in --ink (not --ink-soft) — at this size on paper the soft ink was 6.6:1, fine for AA but a word that is meant to be READ off a header deserves more, and the dark ink is 14:1. */ .brand-name small{display:block;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--ink);letter-spacing:.04em;white-space:nowrap} /* Nav sits hard right and never wraps — if it cannot fit, the menu button takes over at the breakpoint below instead of going two lines. */ .main-nav{margin-left:auto} /* align-items:center matters now: the group triggers are full header height (that is the hover bridge down to their panel), so without it the Donate pill and the Admin link hang off the top of the row. */ .nav-links{display:flex;align-items:center;gap:20px;list-style:none;flex-wrap:nowrap} .nav-links a{ text-decoration:none;font-weight:600;font-size:14.5px;color:var(--ink-soft); padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap; transition:color .15s, border-color .15s; } .nav-links a:hover{color:var(--green);border-color:var(--red)} /* ---------- Grouped nav ---------- CSS only: the panel opens on hover and on :focus-within, so a keyboard walks trigger -> items -> next trigger without a line of script, and the whole thing behaves identically with JavaScript off. The items are `visibility:hidden` rather than `display:none` so they can transition; hidden items are not focusable, which is exactly what we want until the group has focus. */ .nav-group{position:relative} /* Full-height trigger, so there is no gap for the pointer to fall through on the way down to the panel. */ .nav-group > a{ display:flex;align-items:center;gap:6px;height:var(--header-h); padding:0 2px;border-bottom:none; } .nav-group > a::after{ content:"";width:0;height:0;flex:none; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.65; transition:transform .15s ease; } .nav-group:hover > a,.nav-group:focus-within > a{color:var(--green)} .nav-group:hover > a::after,.nav-group:focus-within > a::after{transform:rotate(180deg)} .nav-drop{ position:absolute;top:calc(var(--header-h) - 10px);left:-14px;z-index:60; min-width:216px;list-style:none;display:grid;gap:2px;padding:10px; background:var(--paper);border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 40px rgba(2,56,42,.16); opacity:0;visibility:hidden;transform:translateY(-6px); /* Opacity and position fade; VISIBILITY DOES NOT. Transitioning it delays the switch to `visible` by the length of the transition, and an item that is still hidden cannot take focus — so a keyboard user tabbing at any speed sailed straight past the second and third panels. Only the look is animated; focusability changes at once. */ transition:opacity .15s ease, transform .15s ease; } .nav-group:hover > .nav-drop, .nav-group:focus-within > .nav-drop{opacity:1;visibility:visible;transform:none} /* The rightmost group's panel opens LEFTWARDS, or it hangs off the edge of the window. The nav is right-aligned, so how far right that group sits depends on what else is in the row — and with donations switched off there is no Donate pill after it: measured 76px of sideways scroll at 1024 and 900 in that state. A panel is visibility:hidden until it is hovered, and a hidden panel still counts toward the page's scrollWidth, so this was a sideways scroll on every page with no panel open at all. */ .nav-group-last > .nav-drop{left:auto;right:-14px} .nav-drop a{ display:block;padding:9px 12px;border-radius:9px;border-bottom:none; white-space:nowrap;font-size:15px; } .nav-drop a:hover{background:var(--green-tint);color:var(--green);border-color:transparent} .nav-drop a:focus-visible{outline:3px solid var(--green);outline-offset:-1px} /* The one primary action in the header: a red pill carrying the same weight as .btn-green, without the button padding that would push the nav onto a second line. */ .nav-links a.nav-donate{ background:var(--red-ink);color:#fff;border-radius:999px;padding:8px 18px; font-family:var(--font-display);font-weight:700;border-bottom:none; box-shadow:0 4px 14px rgba(201,32,43,.28); } .nav-links a.nav-donate:hover{color:#fff;border-color:transparent;filter:brightness(1.06)} /* The phone number lives in the mobile menu, the footer and /contact — the header row is spoken for by the nav and the Donate action. */ .nav-phone-item,.nav-home-item{display:none} /* menu-only; see the mobile breakpoint */ .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px} .menu-btn span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px} /* ---------- Flash messages ---------- */ .flashes{padding-top:18px} .flash{padding:12px 18px;border-radius:10px;font-weight:600;font-size:15px;margin-bottom:10px} .flash-ok{background:#E3F2E8;color:#0B5C36;border:1px solid #BFE0CB} .flash-error{background:#FCE9EA;color:#9B1B26;border:1px solid #F3C3C8} /* ---------- Hero ---------- */ /* The red circle deliberately overhangs the photo. Below ~1080px that overhang reached past the viewport edge and gave the whole page a 10px sideways scroll, so the section clips its own bleed. Nothing is lost at wide widths, where the circle sits well inside the viewport. */ .hero{padding:64px 0 76px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .hero h1{font-size:clamp(36px,5.2vw,56px);font-weight:800;margin:14px 0 20px} .hero .lede{font-size:18px;margin-bottom:30px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .hero-photo{position:relative} .hero-photo img{ border-radius:var(--radius);aspect-ratio:4/3.4;object-fit:cover;width:100%; box-shadow:0 24px 60px rgba(2,56,42,.22); } .hero-photo::before{ content:"";position:absolute;inset:auto -34px -34px auto;width:150px;height:150px; border-radius:50%;background:var(--red);opacity:.92;z-index:-1; } .img-placeholder{ border:2px dashed var(--line);border-radius:var(--radius);aspect-ratio:4/3.4; display:grid;place-items:center;color:var(--ink-soft);font-size:14px;font-weight:600; background:var(--white);text-align:center;padding:20px; } /* ---------- Rich content presets ---------- Three deliberately different shapes sharing one set of parts. Reading width is capped at 68ch everywhere; every figure gets an aspect-ratio so images reserve their space before they load. Any transition here is already disabled under prefers-reduced-motion by the rule at the top. */ .rc{margin-top:34px} .rc-text{max-width:68ch} .rc-text p{color:var(--ink-soft);font-size:17px;line-height:1.75;margin-bottom:18px} .rc-text p:last-child{margin-bottom:0} .rc-text p:first-child{font-size:19px;color:var(--ink)} /* A content image whose file is not on the server. Admins only — a visitor never gets one, the list is filtered before the macro runs. Deliberately unmistakable: this is a fault notice, not a design. */ .rc-missing{ display:grid;place-items:center;background:#FFF7F7; border:2px dashed var(--red-ink);border-radius:12px;padding:20px; } .rc-missing-note{max-width:44ch;text-align:center;font-size:14px;line-height:1.55} .rc-missing-note b{display:block;color:var(--red-ink);margin-bottom:6px;font-size:15px} .rc-missing-note span{display:block;color:var(--ink-soft)} .rc-missing-note code{font-size:13px;word-break:break-all} .rc-missing-you{margin-top:8px;font-style:italic;font-size:13px} .rc-figure{margin:0} .rc-figure img{ width:100%;aspect-ratio:var(--rc-ratio, 4 / 3);object-fit:cover; border-radius:var(--radius);background:var(--green-tint); box-shadow:0 14px 36px rgba(2,56,42,.14); } .rc-figure figcaption{ margin-top:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5; padding-left:14px;border-left:3px solid var(--red); } /* Classic — lead photo beside the text, the rest in a strip below */ .rc-classic-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start} /* No photo and no placeholder: the words take the full reading width */ .rc-classic-top.is-textonly{grid-template-columns:minmax(0,68ch)} .rc-lead{position:relative} .rc-lead::after{ content:"";position:absolute;inset:auto -22px -22px auto; width:104px;height:104px;border-radius:50%;background:var(--red); opacity:.92;z-index:-1; } /* NATURAL SHAPE on a detail page: the whole picture, never cropped, capped at 70vh so a tall poster does not push the words off a laptop. The img box is the picture's own size, centred, so nothing shows through a letterbox; the red circle moves to the figure and sits BEHIND it (z-index:-1), peeking from the corner, never over it. */ .rc-figure.is-natural img{aspect-ratio:auto;object-fit:contain;width:auto;height:auto;max-width:100%;max-height:70vh;display:block;margin:0 auto} .rc-lead.is-natural{display:flex;flex-direction:column;align-items:center} .rc-lead.is-natural::after{display:none} .rc-lead.is-natural .rc-figure{position:relative;display:inline-block;max-width:100%} .rc-lead.is-natural .rc-figure a{display:block} .rc-lead.is-natural .rc-figure::after{ content:"";position:absolute;right:-22px;bottom:-22px; width:104px;height:104px;border-radius:50%;background:var(--red); opacity:.92;z-index:-1; } /* No words at all: the picture alone, centred, not beside an empty column. */ .rc-classic-top.is-mediaonly{grid-template-columns:minmax(0,760px);justify-content:center} .rc-flyer{margin:18px 0 0;text-align:center} .rc-lead-flyer{align-self:center} .rc-strip{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px; margin-top:44px;padding-top:34px;border-top:1px solid var(--line); } /* Gallery — text, then a masonry grid built from CSS columns */ .rc-gallery .rc-masonry{ columns:3;column-gap:20px;margin-top:40px; } .rc-masonry .rc-figure{break-inside:avoid;margin-bottom:20px} /* Staggered ratios are what make it read as masonry rather than a grid */ .rc-masonry .rc-figure:nth-child(3n+1) img{aspect-ratio:3 / 4} .rc-masonry .rc-figure:nth-child(3n+2) img{aspect-ratio:1 / 1} .rc-masonry .rc-figure:nth-child(3n+3) img{aspect-ratio:4 / 5} .rc-masonry .rc-figure:first-child img{aspect-ratio:4 / 3} /* Alternating — text and photo side by side, swapping sides down the page */ .rc-alt{display:grid;gap:76px} .rc-alt-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .rc-alt-row.is-flipped .rc-text{order:2} .rc-alt-row.is-flipped .rc-alt-media{order:1} .rc-alt-row.is-textonly{grid-template-columns:minmax(0,68ch)} /* A spare image with no words left to sit beside becomes a full-width band */ .rc-alt-row.is-mediaonly{grid-template-columns:1fr} .rc-alt-row.is-mediaonly .rc-figure img{aspect-ratio:16 / 7} .rc-alt-row.is-mediaonly .rc-alt-media::before{display:none} /* ...and so does a row whose WORDS are too short to hold up a column. The line goes above the photograph rather than beside it: centred in a column next to a 406px image it had 373px of nothing split above and below it, which reads as marooned rather than as paired. The row is a normal band with one row of text on top, so it needs no geometry of its own — only the ordering, since .is-flipped would otherwise put the words underneath on every other row and the rhythm of a caption above its picture is worth more here than the left-right alternation, which the full-width band has already given up. */ .rc-alt-row.is-shorttext{gap:18px} .rc-alt-row.is-shorttext .rc-text, .rc-alt-row.is-flipped.is-shorttext .rc-text{order:0} .rc-alt-row.is-shorttext .rc-alt-media, .rc-alt-row.is-flipped.is-shorttext .rc-alt-media{order:1} .rc-alt-row.is-shorttext .rc-text{max-width:68ch} .rc-alt-media{position:relative} /* A tinted panel behind every other image, so the rhythm is visible even before the photographs arrive */ .rc-alt-row:not(.is-flipped) .rc-alt-media::before{ content:"";position:absolute;inset:-18px -18px auto -18px;height:66%; background:var(--green-tint);border-radius:var(--radius);z-index:-1; } .rc-alt-row.is-flipped .rc-alt-media::before{ content:"";position:absolute;inset:auto -18px -18px -18px;height:66%; background:var(--green-tint);border-radius:var(--radius);z-index:-1; } @media (max-width: 920px){ .rc-classic-top{grid-template-columns:1fr;gap:36px} .rc-lead{order:-1} .rc-strip{grid-template-columns:repeat(2,1fr);gap:14px} .rc-gallery .rc-masonry{columns:2} .rc-alt{gap:52px} .rc-alt-row,.rc-alt-row.is-textonly{grid-template-columns:1fr;gap:28px} /* BELOW HERE A SHORT-TEXT ROW IS NOTHING SPECIAL. The row is already one column at this width, so there was no empty half to fix and nothing should change — and .is-mediaonly's 16/7 band would change it, cropping the photograph to less than half the height it had (274px to 150px at 390). A row with genuinely NO words keeps the band, as it always has; this is only the short-text case. */ .rc-alt-row.is-shorttext .rc-figure img{aspect-ratio:5 / 4} .rc-alt-row.is-shorttext{gap:28px} .rc-alt-row.is-flipped .rc-text{order:0} .rc-alt-row.is-flipped .rc-alt-media{order:0} } @media (max-width: 640px){ .rc-gallery .rc-masonry{columns:1} .rc-strip{grid-template-columns:1fr 1fr} .rc-lead::after{display:none} .rc-lead.is-natural .rc-figure::after{display:none} } /* ---------- Our Journey ---------- Unlike About, a news post or an event, this page carries EVERY milestone at once. Rendered at full page scale the three presets stop being layouts and become three unrelated page designs stacked, and the year headings vanish into a wall of photographs — so inside .journey-entry each preset is scaled down to an image treatment for one entry: shorter figures, tighter gaps, none of the page-scale flourishes. Same macro, same markup, same three shapes; entry sized. The sticky year keeps you oriented however long the timeline gets. */ .journey-year{margin-top:56px} .journey-year-head{ position:sticky;top:var(--header-h);z-index:2; font-size:clamp(24px,2.6vw,30px);color:var(--green);margin-bottom:0; padding:10px 0 10px;border-bottom:2px solid var(--green); background:var(--paper); } /* EACH ENTRY IS A BOUNDED BLOCK, and this is the important one. The separator used to be a 1px line between entries, with 26px of padding above a title and 4px below the last thing in an entry — so a trailing photograph sat 31px above the NEXT entry's funder line and 31px below its own text. At those distances the eye has no way to tell which milestone a photograph belongs to, and on an entry whose preset puts images last it consistently read as belonging to the wrong one. A card settles it: everything inside the box is this milestone. It also gives the photographs a ground to sit on, which the 1px rule never did. */ .journey-entry{ background:var(--white);border:1px solid var(--line); border-radius:var(--radius);padding:24px 28px 28px;margin-top:20px; } .journey-entry-title{font-size:clamp(20px,2vw,24px);margin:4px 0 0} .journey-entry .event-date{margin-bottom:2px} /* --- the presets, at entry scale --- */ .journey-entry .rc{margin-top:16px} .journey-entry .rc-figure img{box-shadow:0 8px 20px rgba(2,56,42,.10)} /* The photo is a link to the full-size file (the shared lightbox upgrades it). It must not pick up the underline and colour of a text link, and it needs a focus ring of its own — a keyboard user tabbing the page lands on every photograph here. */ .journey-entry .rc-figure a{display:block;border-bottom:none;line-height:0} .journey-entry .rc-figure a:focus-visible{ outline:3px solid var(--green);outline-offset:3px;border-radius:12px; } .journey-entry .rc-figure figcaption{margin-top:8px;font-size:12.5px} /* Classic — lead beside the words, the rest as thumbnails underneath */ /* 400px, up from 340. The constraint that matters is that an entry's photograph must not read as a page-width band — at 400px it is 38% of the ~1050px inside a card at 1440, so it is plainly part of an entry and not a section of its own. Below that it was reading as a stamp beside the words rather than as a photograph. */ .journey-entry .rc-classic-top{ grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:34px; } .journey-entry .rc-lead::after{display:none} /* page-scale flourish */ .journey-entry .rc-lead .rc-figure img{aspect-ratio:4 / 3} /* The strip was the worst of it: 124px at 1440 and 96px at 360, which is an icon rather than a photograph. 190px puts three or four across the entry instead of eight, at a size where you can see what is in them. */ .journey-entry .rc-strip{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px;margin-top:18px;padding-top:0;border-top:none; } /* Gallery — a tidy grid of the entry's photos, not a page of masonry */ .journey-entry .rc-gallery .rc-masonry{ columns:auto;display:grid;gap:16px;margin-top:20px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .journey-entry .rc-masonry .rc-figure{margin-bottom:0} /* Beats the staggered nth-child ratios above by order, not !important */ .journey-entry .rc-masonry .rc-figure img{aspect-ratio:4 / 3} /* Alternating — compact rows inside the entry, rather than half-page bands. The media column is a fixed width, so the swap between sides is still obvious while the entry stays the size of an entry; the flipped rows need the mirrored track order to keep it. */ .journey-entry .rc-alt{gap:22px} .journey-entry .rc-alt-row{ grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:30px;align-items:start; } .journey-entry .rc-alt-row.is-flipped{ grid-template-columns:minmax(0,380px) minmax(0,1fr); } .journey-entry .rc-alt-row.is-textonly{grid-template-columns:minmax(0,68ch)} .journey-entry .rc-alt-row.is-mediaonly{grid-template-columns:minmax(0,380px)} .journey-entry .rc-alt-media::before{display:none} /* tinted page panel */ .journey-entry .rc-alt-media .rc-figure img{aspect-ratio:4 / 3} .journey-entry .rc-alt-row.is-mediaonly .rc-figure img{aspect-ratio:4 / 3} @media (max-width: 920px){ /* One column, and the lead photo leads — the same stacking the presets use everywhere else at this width. Photos keep a ceiling rather than going full-bleed: a page of full-width 4:3 photographs is exactly the wall of images this layout exists to avoid, and one tablet-width milestone was 2,400px tall before this. */ .journey-entry .rc-lead, .journey-entry .rc-alt-media{max-width:440px} .journey-entry .rc-classic-top{grid-template-columns:1fr;gap:22px} .journey-entry .rc-alt-row, .journey-entry .rc-alt-row.is-flipped, .journey-entry .rc-alt-row.is-textonly, .journey-entry .rc-alt-row.is-mediaonly{grid-template-columns:1fr;gap:18px} .journey-entry .rc-alt{gap:26px} } @media (max-width: 640px){ .journey-year-head{position:static} /* a phone screen is short enough */ /* The card keeps its edges and gives back its inset. At 28px a side it was taking 56px out of a 342px phone column, and the photographs came out SMALLER than they were before the card existed — which is the opposite of the point. 14px still reads as a card and costs the photographs almost nothing. */ .journey-entry{padding:18px 14px 20px} .journey-entry .rc-strip{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .journey-entry .rc-gallery .rc-masonry{grid-template-columns:1fr 1fr} } /* ---------- FAQ ---------- Plain
/: the browser gives us the keyboard handling, the ARIA and the open/closed state for free, and the page still works with the whole script gone. */ .faq-group{font-size:clamp(20px,2.4vw,26px);color:var(--green);margin:48px 0 0} .faq-list{max-width:74ch;margin-top:22px;display:grid;gap:12px} .faq-item{ background:var(--white);border:1px solid var(--line); border-radius:var(--radius);padding:0 22px; } .faq-item summary{ cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative; font-family:var(--font-display);font-weight:600;font-size:17.5px; color:var(--ink); } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%); font-size:24px;color:var(--green);line-height:1; } .faq-item[open] summary::after{content:"–"} .faq-item summary:hover{color:var(--green)} .faq-item summary:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px} .faq-answer{padding:0 0 20px} .faq-answer p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;margin-bottom:12px} .faq-answer p:last-child{margin-bottom:0} .faq-foot{margin-top:36px;color:var(--ink-soft)} .faq-foot a{color:var(--green);font-weight:700} /* ---------- Server health panel ---------- Read-only cards. The colour is the whole point of the traffic lights, so the level is on the card rather than on a number somewhere inside it — you should be able to tell across the room. */ .health-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;margin-bottom:14px; } .health-card{ background:var(--white);border:1px solid var(--line); border-left:4px solid var(--line);border-radius:12px;padding:18px 20px; } .health-card h3{ font-family:var(--font-body);font-size:12.5px;font-weight:700; text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft); margin-bottom:10px; } .health-card b{display:block;font-family:var(--font-display);font-size:30px;color:var(--green);line-height:1.1} .health-card span{display:block;font-size:14px;color:var(--ink-soft);margin-top:4px} .health-card em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-muted);margin-top:8px} .health-card.is-green{border-left-color:var(--green)} .health-card.is-amber{border-left-color:#C98A16} .health-card.is-amber b{color:#9A6A10} .health-card.is-red{border-left-color:var(--red)} .health-card.is-red b{color:#9B1B26} .health-card.is-unknown{border-left-color:var(--line)} .health-list{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-soft)} .health-list li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .health-list b{display:inline;font-family:var(--font-body);font-size:14px;color:var(--ink);font-weight:700} .health-list small{flex-basis:100%;font-size:12px} .health-bad{color:var(--red)} .health-auto{display:inline-flex;align-items:center;gap:8px;margin-left:6px;font-size:13.5px} .health-auto input{width:auto} /* ---------- The downloadable visitor report ---------- Print-friendly HTML rather than a generated PDF: the browser's own Save as PDF gives selectable text and the site's real fonts (which are ours now, so nothing is fetched while printing), with no dependency and no deploy step. What prints is .report-doc and nothing else — see the @media print block. */ /* THE PUBLIC SHELL STYLES BARE
,