/* ============================================================================ The Barrhaven Bugle — letterpress community-broadsheet system Aesthetic: wartime newspaper nameplate · newsprint paper · brass + bottle green Type: Fraunces (display) · Newsreader (body) · Saira Condensed (kickers/labels) Cache: edits ship immediately — a pre-commit hook re-stamps ?v= on the /styles.css reference in every HTML page (see scripts/stamp-asset-versions.mjs). ========================================================================== */ :root { --green: #123a2b; --green-deep: #0c2a1f; --green-ink: #0a241a; --page: #faf7f0; /* warm-ivory page background (brighter than the old muddy paper) */ --paper: #f3ead7; /* reserved for the masthead band — the locked flag palette */ --paper-2: #efe2c9; --paper-card: #ffffff; /* white card / panel surfaces, crisp against ivory */ --paper-soft: #fbf8f1; /* faintly-warm panel when pure white is too stark */ --brass: #bd8526; --brass-bright: #d8a23a; --brass-deep: #8a611a; --ink: #1c1810; --ink-soft: #2c271c; --red: #9e3324; --muted: #6a6049; --rule: #c9bb9b; --rule-soft: #d9cdb2; --rule-ink: #1c1810; --shell: 1180px; --gutter: clamp(18px, 4vw, 40px); --serif: "Newsreader", Georgia, "Times New Roman", serif; --display: "Fraunces", Georgia, serif; --gothic: "Saira Condensed", "Arial Narrow", system-ui, sans-serif; color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--page); /* faint newsprint grain — dialed down so the ivory stays bright */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); color: var(--ink); font-family: var(--serif); font-optical-sizing: auto; font-size: 18px; line-height: 1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } ::selection { background: var(--brass-bright); color: var(--green-ink); } a { color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(189, 133, 38, 0.6); transition: color .18s ease, text-decoration-color .18s ease; } a:hover { color: var(--brass-deep); text-decoration-color: var(--brass); } /* ========================================================================= SITE-WIDE WEATHER WARNING — hourly TWN/ECCC watcher ========================================================================= */ .weather-alert { /* Static, not sticky: it renders at the very top of every page (site.js prepends it to ) but scrolls away — pinned at top:0 it sat on the same sticky shelf as .runninghead/.site-header and, with the higher z-index, buried the nav on every scrolled page while an alert was active. */ position: static; background: #7a1f14; color: #fff7e8; border-bottom: 3px solid #f0b84a; box-shadow: 0 4px 14px rgba(28, 24, 16, 0.24); } .weather-alert--heat { background: linear-gradient(90deg, #7a1f14, #9e3324 45%, #7a1f14); } .weather-alert-inner { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); min-height: 44px; margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 8px 0; font-family: var(--gothic); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; } .weather-alert-label { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 5px 9px; background: #f0b84a; color: #1c1810; border: 1px solid rgba(255,255,255,0.45); font-weight: 800; letter-spacing: 0.12em; } .weather-alert-label::before { content: "⚠"; margin-right: 7px; } .weather-alert-text { flex: 1 1 auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: 0.9rem; } .weather-alert-text strong { color: #fff; font-weight: 800; } .weather-alert-link { flex: 0 0 auto; color: #fff; text-decoration-color: rgba(255,255,255,0.75); font-weight: 800; white-space: nowrap; } .weather-alert-link:hover { color: #ffe4a8; text-decoration-color: #ffe4a8; } @media (max-width: 720px) { .weather-alert-inner { align-items: flex-start; flex-direction: column; gap: 6px; padding: 10px 0; } .weather-alert-text { font-size: 0.82rem; } } h1, h2, h3, h4 { font-family: var(--display); color: var(--green-ink); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 0.7rem; font-weight: 800; } h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); } h2 { font-size: clamp(1.95rem, 4vw, 3.1rem); } h3 { font-size: 1.4rem; font-weight: 700; } p { margin: 0 0 1rem; } strong { font-weight: 650; } .inner { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; } /* ---- kicker / section labels ------------------------------------------- */ .eyebrow, .kicker { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600; font-size: 0.8rem; color: var(--red); display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 0.9rem; } .eyebrow::before, .kicker::before { content: ""; width: 1.7em; height: 0; border-top: 2px solid var(--brass); } /* ========================================================================= MASTHEAD — the front-page nameplate ========================================================================= */ .masthead { background: linear-gradient(180deg, rgba(18,58,43,0.05), transparent 150px), var(--paper); padding-top: 14px; border-bottom: 1px solid var(--rule); } .dateline { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .dateline-date { text-align: left; color: var(--green-ink); } .dateline-edition { text-align: center; color: var(--brass-deep); } .dateline-free { text-align: right; } /* Circulation rides in the "Free" cell, as it would on a printed flag. */ .dateline-circ { color: var(--brass-deep); white-space: nowrap; } /* ========================================================================= WEATHER EAR — glanceable conditions widget in the masthead corner ========================================================================= */ .nameplate-ear { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .wx { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--paper-card); border: 1.5px solid var(--green-ink); border-radius: 3px; box-shadow: 3px 3px 0 rgba(12,42,31,0.14); text-decoration: none; color: var(--green-ink); min-width: 150px; } .wx[hidden] { display: none; } .wx-ico { font-size: 1.7rem; line-height: 1; } .wx-read { display: flex; flex-direction: column; line-height: 1.1; } .wx-temp { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--green-ink); letter-spacing: -0.01em; } .wx-meta { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; font-weight: 600; color: var(--muted); } .wx-place { color: var(--brass-deep); } .nameplate { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; gap: clamp(14px, 3vw, 34px); padding: clamp(18px, 3.4vw, 34px) 0 clamp(10px, 2vw, 18px); border-top: 1px solid var(--rule); margin-top: -1px; } .nameplate-emblem { display: block; filter: drop-shadow(0 4px 14px rgba(12,42,31,0.28)); } .nameplate-emblem img { width: clamp(70px, 9vw, 96px); height: auto; border-radius: 50%; } .nameplate-words { text-decoration: none; text-align: center; display: block; } .nameplate-the { display: block; font-family: var(--display); font-style: italic; font-weight: 500; color: var(--brass-deep); font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: 0.02em; margin-bottom: -0.18em; } .nameplate-name { display: block; font-family: var(--display); font-weight: 900; color: var(--green-ink); font-size: clamp(2.5rem, 8.6vw, 6.1rem); letter-spacing: -0.02em; line-height: 0.9; } .nameplate-motto { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-align: right; line-height: 1.5; } /* double rule under nameplate, newspaper style */ .masthead-rule { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; border: 0; border-top: 3px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); height: 4px; margin-top: 6px; } /* ========================================================================= RUNNING HEAD — slim sticky bar for nav + persistent subscribe ========================================================================= */ .runninghead { position: sticky; top: 0; z-index: 40; background: rgba(250, 247, 240, 0.93); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--rule); } .runninghead-inner { position: relative; width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .runninghead-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; color: var(--green-ink); text-decoration: none; font-size: 1.06rem; } .runninghead-brand img { width: 26px; height: 26px; border-radius: 50%; } .runninghead-nav { display: flex; align-items: center; gap: 20px; } .runninghead-nav a { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); text-decoration: none; } .runninghead-nav a:hover { color: var(--brass-deep); } .runninghead-nav a.button { color: #fff; } /* ========================================================================= NAV DROPDOWN GROUPS — sections roll up so the bar stays under the shell. Markup: .nav-group > .nav-group-btn (click toggles data-open, wired in site.js) + .nav-drop (real anchors in static HTML — crawlable without JS). Shared by the homepage .runninghead-nav and the interior .nav-links. On mobile (hamburger breakpoint below) groups flatten into the menu. ========================================================================= */ .nav-group { position: relative; display: inline-flex; align-items: center; } .nav-group-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); } .nav-group-btn:hover { color: var(--brass-deep); } .nav-group--current > .nav-group-btn { color: var(--brass-deep); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.15s ease; } .nav-group[data-open] .nav-caret { transform: rotate(180deg); } .nav-drop { display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 190px; background: var(--page); border: 1px solid var(--rule-ink); border-top: 3px double var(--rule-ink); box-shadow: 0 14px 30px rgba(12, 42, 31, 0.18); padding: 6px 0; z-index: 60; } .nav-group[data-open] .nav-drop { display: block; } .runninghead-nav .nav-drop a, .nav-links .nav-drop a { display: block; padding: 11px 20px; white-space: nowrap; border-bottom: 1px dotted var(--rule); } .runninghead-nav .nav-drop a:last-child, .nav-links .nav-drop a:last-child { border-bottom: 0; } /* ========================================================================= BUTTONS — "press stamp" subscribe ========================================================================= */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 24px; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.92rem; color: #fdf7e8; background: var(--green); border: 2px solid var(--green-ink); border-radius: 2px; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 rgba(12,42,31,0.9); transition: transform .12s ease, box-shadow .12s ease, background .18s ease; } .button:hover { color: #fff; background: var(--green-deep); transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(12,42,31,0.95); } .button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(12,42,31,0.9); } .button.secondary { background: transparent; color: var(--green-ink); box-shadow: 4px 4px 0 rgba(189,133,38,0.55); border-color: var(--brass-deep); } .button.secondary:hover { background: rgba(189,133,38,0.12); color: var(--green-ink); } .button.brass { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; box-shadow: 4px 4px 0 rgba(138,97,26,0.85); } .button.brass:hover { background: #6f4d15; color: #fff; } a:focus-visible, button:focus-visible, .button:focus-visible, .chip:focus-visible, .share-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; text-decoration: none; } /* ========================================================================= FRONT PAGE — lede + subscription rail ========================================================================= */ .frontpage { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr); gap: 0; padding: clamp(30px, 5vw, 56px) 0 clamp(34px, 5vw, 60px); } .lede { padding-right: clamp(24px, 4vw, 52px); } .lede h1 { margin-top: 0.2rem; } .lede-copy { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-soft); max-width: 58ch; } .lede-copy.drop::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 4.4em; line-height: 0.72; padding: 0.06em 0.12em 0 0; color: var(--green-ink); } .byline { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; color: var(--muted); font-weight: 600; margin: 0 0 1.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); } .hero-figure { margin: clamp(20px, 3vw, 30px) 0 0; border: 1px solid var(--rule-ink); position: relative; overflow: hidden; background: #d9cdb2; } .hero-figure img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; /* natural colour, with a light print-style contrast lift */ filter: contrast(1.04) saturate(1.03); mix-blend-mode: normal; } /* Portrait hero (e.g. an official's headshot): the wide cover band would slice the forehead and chin, so show the whole picture, centred on a paper matte, in a taller box. */ .hero-figure--portrait img { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; } .hero-figure::after { content: ""; position: absolute; inset: 0; /* faint halftone dot texture only — no colour tint */ background-image: radial-gradient(rgba(28,24,16,0.18) 22%, transparent 23%); background-size: 4px 4px; mix-blend-mode: soft-light; opacity: 0.12; pointer-events: none; } .hero-figure figcaption { position: absolute; left: 0; bottom: 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 600; color: #f3ead7; background: rgba(10,36,26,0.86); padding: 6px 12px; } .hero-actions, .section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(22px, 3vw, 30px); } /* vertical column rule between lede and rail */ .rail { padding-left: clamp(24px, 3.4vw, 44px); border-left: 1px solid var(--rule-ink); position: relative; } .rail::before { /* second hairline → newspaper double column rule */ content: ""; position: absolute; top: 0; bottom: 0; left: 3px; border-left: 1px solid var(--rule); } /* ========================================================================= SIGNUP PANEL — "the subscription desk" ========================================================================= */ .signup-panel { background: var(--paper-card); border: 2px solid var(--green-ink); box-shadow: 6px 6px 0 rgba(12,42,31,0.16); padding: clamp(20px, 2.6vw, 26px); } .signup-panel h2, .signup-panel h3 { font-size: 1.32rem; line-height: 1.12; margin-bottom: 0.6rem; } .rail .signup-panel { position: static; } .signup-panel--featured { border-top: 5px solid var(--brass); } .signup-value { font-size: 1rem; color: var(--ink-soft); margin: 0 0 1rem; } .signup-panel label { display: block; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 600; color: var(--green-ink); margin-bottom: 8px; } .signup-row { display: grid; grid-template-columns: 1fr; gap: 10px; } .signup-row input { min-width: 0; width: 100%; min-height: 50px; border: 2px solid var(--rule); border-radius: 2px; background: #fffdf6; padding: 0 14px; font-family: var(--serif); font-size: 1rem; color: var(--ink); } .signup-row input:focus-visible { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(216,162,58,0.3); } .signup-row .button { width: 100%; } .signup-panel small { display: block; color: var(--muted); margin-top: 12px; font-size: 0.86rem; } .form-status { color: var(--muted); font-size: 0.84rem; margin: 12px 0 0; font-style: italic; } /* ========================================================================= READER POLL — aggregate ICP learning, no PII collected in repo ========================================================================= */ .reader-poll-section { background: linear-gradient(135deg, rgba(18,58,43,0.96), rgba(12,42,31,0.98)); color: #fbf3df; } .reader-poll { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr); gap: clamp(22px, 4vw, 44px); align-items: center; } .reader-poll .kicker { color: var(--brass); } .reader-poll h2 { color: #fff7e6; margin-bottom: 0.7rem; } .reader-poll p { color: #efe3c8; max-width: 50rem; } .reader-poll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .reader-poll-options a { display: flex; align-items: center; min-height: 54px; padding: 12px 14px; border: 2px solid rgba(216,162,58,0.75); background: rgba(255,248,232,0.08); color: #fff7e6; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.035em; font-size: 0.9rem; text-decoration: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.22); } .reader-poll-options a:hover, .reader-poll-options a:focus-visible { background: var(--brass); color: var(--green-deep); } @media (max-width: 760px) { .reader-poll { grid-template-columns: 1fr; } .reader-poll-options { grid-template-columns: 1fr; } } /* ========================================================================= READER PULSE — an iCALLEDIT deck on the front page. This block wears iCalledit's brand ON PURPOSE (dark stage, amethyst card, #FF4458 iCi mark). The front page is the shop window for iCalledit surveys, which are a product that sells — re-skinning it in Bugle ivory/green would hide the very thing it advertises. Brand contract: AMA Engine/STYLE-GUIDE.yaml. Markup is generated by scripts/build-pulse-block.mjs — edit there, not here. ========================================================================= */ .ici-section { /* Bugle brand background — NOT iCalledit's black stage (Jay, 2026-07-11). The black is for icalledit.live itself; here only the CARD and its iconography carry iCalledit's brand, and the amethyst/pink pops harder against the paper anyway. */ background: var(--paper-2); color: var(--ink, #1c1a17); } .ici-pulse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 0.95fr); gap: clamp(24px, 4vw, 52px); /* start, not center: the copy column carries the tally strip below the intro (info top, stats bottom-left, deck right — Jay, 2026-07-15), so both columns square off at the top. */ align-items: start; } /* WHY THESE COLOURS (Jay, 2026-07-12: "the font on the tan background washes it out"). The old greys (#3c3b46 body, #6c6a76 supporting) were lifted straight from iCalledit's card, which sits on WHITE. They are cool, purple-tinted greys — and on the paper's warm tan they read muddy and washed even though the body grey's contrast is fine (8.6:1). The problem was never luminance; it was hue. So: use the PAPER's own warm ink tokens. --muted also lifts the supporting text from 4.14:1 (fails AA body) to 4.85:1 (passes). */ .ici-copy .kicker { color: #ff4458; } .ici-copy h2 { color: var(--green-deep); margin-bottom: 0.7rem; } .ici-copy p { color: var(--ink-soft); max-width: 44rem; } .ici-copy em { color: var(--green-deep); font-style: italic; } /* .ici-copy .ici-promise, not .ici-promise: the promise line lives INSIDE .ici-copy, so the plain class loses on specificity to `.ici-copy p` and the fine print would render at full body weight — readable, but it flattens the hierarchy. */ .ici-copy .ici-promise { font-size: 0.9rem; color: var(--muted); margin-top: 0.9rem; } /* The whole card is one tap target — thumb-sized on a phone. */ /* iCalledit's type is Inter/system sans, NOT the Bugle's serif. The card has to read as iCalledit's product sitting inside the paper, not as one more newspaper module. */ .ici-card, .ici-tallies, .ici-updated, .ici-promise { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .ici-card { display: block; text-decoration: none; } .ici-rail { height: 4px; border-radius: 99px; background: rgba(28,26,23,0.14); overflow: hidden; } .ici-rail span { display: block; height: 100%; border-radius: 99px; background: #a855f7; } .ici-face { margin-top: 16px; background: #fff; border: 8px solid #a855f7; border-radius: 26px; padding: clamp(22px, 3.6vw, 30px) clamp(18px, 3vw, 26px); text-align: center; box-shadow: 0 14px 30px rgba(28,26,23,0.16); } .ici-eyebrow { font-size: 0.78rem; font-weight: 600; color: #6c6a76; margin: 0; } .ici-sponsor { color: #a855f7; font-weight: 800; } .ici-wordmark { font-size: 0.92rem; font-weight: 800; color: #ff4458; margin: 2px 0 0; } .ici-question { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); font-weight: 800; line-height: 1.26; letter-spacing: -0.01em; color: #a855f7; margin: 22px 0 0; } .ici-rule { width: 78%; height: 1px; background: #e7e6ec; margin: 18px auto; } .ici-swipe { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; font-weight: 800; color: #a855f7; } .ici-mark { margin: 16px 0 0; color: #ff4458; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; } .ici-cta { margin: 14px 0 0; text-align: center; color: #6c6a76; font-size: 0.8rem; } .ici-card:hover .ici-face, .ici-card:focus-visible .ici-face { border-color: #ff4458; } /* Live tallies — the count moves every night, so coming back is the point. */ .ici-tallies { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; } .ici-tally-q { margin: 0 0 6px; font-size: 0.9rem; color: var(--ink-soft); } .ici-tally-bar { height: 10px; border-radius: 99px; background: rgba(28,26,23,0.12); overflow: hidden; } .ici-tally-bar span { display: block; height: 100%; border-radius: 99px; background: #a855f7; } .ici-tally-n { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); } .ici-tally-n strong { color: var(--green-deep); } .ici-updated { margin: 18px 0 0; font-size: 0.85rem; color: var(--muted); } /* The LIVE embedded deck (engine embed add-on, ?embed=1) — readers swipe and vote without leaving the Bugle. Keep the iframe lazy so a below-the-fold third-party request does not slow the newspaper. The stage paints a card-shaped loading state immediately, then the iframe replaces it on load; readers never land on an unexplained grey rectangle. */ .ici-stage { position: relative; width: 100%; max-width: 440px; height: min(640px, 82svh); } .ici-frame { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; border-radius: 22px; background: #bcbdc4; /* engine stage grey while loading */ box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06); } .ici-stage.ici-loading .ici-frame { opacity: 0; } .ici-frame-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: #bcbdc4; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06); opacity: 0; pointer-events: none; transition: opacity 140ms ease-out; } .ici-stage.ici-loading .ici-frame-placeholder { opacity: 1; } .ici-placeholder-card { width: min(78%, 340px); min-height: 58%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 26px; border: 8px solid #a855f7; border-radius: 26px; background: #fff; box-shadow: 0 14px 30px rgba(28,26,23,0.18); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .ici-placeholder-wordmark { color: #ff4458; font-size: 0.92rem; font-weight: 800; } .ici-placeholder-line { width: 84%; height: 14px; border-radius: 99px; background: #e5d2f8; animation: ici-placeholder-pulse 1.25s ease-in-out infinite alternate; } .ici-placeholder-line--short { width: 42%; } .ici-placeholder-line--medium { width: 66%; } .ici-placeholder-actions { width: 84%; display: flex; justify-content: space-between; margin-top: 14px; } .ici-placeholder-actions i { width: 34%; height: 34px; border-radius: 99px; background: #a855f7; opacity: 0.38; } @keyframes ici-placeholder-pulse { from { opacity: 0.45; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ici-placeholder-line { animation: none; opacity: 0.72; } .ici-frame-placeholder { transition: none; } } .ici-open-full { margin: 10px 0 0; font-size: 0.85rem; } .ici-open-full a { color: var(--muted); } .ici-factoid { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--green-deep); background: rgba(62, 125, 79, 0.06); font-size: 0.95rem; line-height: 1.5; } .ici-factoid-k { font-family: "Saira Condensed", sans-serif; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-deep); margin-right: 4px; } .ici-thanks { margin: 12px 0 0; font-size: 0.86rem; font-weight: 700; color: var(--green-deep); } /* The map, sitting with its own deck on the front page (Jay, 2026-08-03: "keep that map and match that map right there with its own deck"). Same nightly SVG /icalledit/ regenerates; static here, interactive there. Capped so it reads as a picture beside the copy, not a second hero. */ .deck-map-figure { margin: 18px 0 6px; } .deck-map-figure a { display: block; } .deck-map-figure img { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid var(--rule-ink, rgba(28, 26, 23, 0.25)); border-radius: 4px; background: var(--paper-card, #faf7f0); } .deck-map-figure figcaption { margin-top: 8px; max-width: 420px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft, #6a6049); } /* The front page's pointer to the deck (build-deck-pointer.mjs). Same factoid treatment as the embed carried before the split, so the line reads as the deck's voice wherever it appears. */ .deck-pointer-factoid { margin: 14px 0 18px; padding: 10px 14px; border-left: 3px solid var(--green-deep); background: rgba(62, 125, 79, 0.06); font-size: 0.95rem; line-height: 1.5; max-width: 44rem; } /* THE DECK ON ITS OWN PAGE (/icalledit/, build-canadiana-page.mjs — 2026-08-03). Same stage, same frame, different job: on the front page the embed is one column of a two-column pulse block, here it is the page's own invitation sitting above the map it draws. Copy first, frame centred under it, so the reader reads what they are joining before the cards appear. This is a separate rule rather than a reuse of .ici-pulse because that grid's proportions exist to square the tally strip against the frame, and there is no tally strip here. */ .ici-deck-solo { display: grid; justify-items: center; gap: clamp(18px, 3vw, 28px); } .ici-deck-solo-copy { max-width: 44rem; text-align: center; } .ici-deck-solo-copy h2 { color: var(--green-deep); margin-bottom: 0.7rem; } .ici-deck-solo-stage { display: grid; justify-items: center; width: 100%; } .ici-deck-solo-stage .ici-open-full { text-align: center; } @media (max-width: 860px) { /* Phone: the deck leads — it is the hook — and the copy sits under it. */ .ici-pulse { grid-template-columns: 1fr; } .ici-copy { order: 2; } .ici-deck { order: 1; } .ici-swipe { font-size: 0.86rem; } /* Phone type scale. This block used to only re-order the grid: every line of copy stayed at its desktop size, so on a phone the supporting text sat at 12-13px. Body copy goes UP on a phone (you read it closer and in worse light), and nothing drops below ~13.6px. */ .ici-copy p { font-size: clamp(1.0625rem, 4vw, 1.125rem); line-height: 1.65; } .ici-copy .ici-promise, .ici-tally-q, .ici-tally-n, .ici-updated, .ici-open-full { font-size: 0.95rem; } } @media (max-width: 480px) { /* On a phone the 82svh cap still eats most of the screen for one embed, reading as a huge block of dead space while it loads. Trim the ceiling so the deck stays prominent without dominating the whole first scroll. */ .ici-stage { height: min(520px, 66svh); } } /* ========================================================================= RESULT BARS — shared by /pulse/ (build-pulse-page.mjs) and /canadiana/ (build-canadiana-page.mjs). These builders had been emitting .pulse-* markup that the stylesheet never defined, so every result bar rendered as an empty, zero-height div: the numbers were on the page but the bar was invisible. Defined here once, for both pages. ========================================================================= */ .pulse-deck { margin: 0 0 2rem; } .pulse-kicker { font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: #6c6a76; margin: 0 0 0.2rem; } .pulse-when { font-size: 0.82rem; color: #6c6a76; margin: 0 0 1rem; } .pulse-empty { font-size: 0.9rem; color: #56535f; } .pulse-results, .can-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .pulse-q { margin: 0 0 0.45rem; font-size: 0.95rem; color: var(--ink, #1c1a17); } .pulse-bar { height: 12px; border-radius: 99px; background: rgba(28, 26, 23, 0.12); overflow: hidden; } .pulse-bar span { display: block; height: 100%; border-radius: 99px; background: var(--green-deep); min-width: 2px; /* a 1% result should still show a sliver, not nothing */ } .pulse-n { margin: 0.4rem 0 0; font-size: 0.82rem; color: #6c6a76; } .pulse-n strong { color: var(--green-deep); } .pulse-n em { font-style: italic; } .pulse-cta { display: inline-block; margin-top: 0.9rem; font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--green-deep); } /* /canadiana/ — 250 cards is far too many for one list, so each of the five groups is a

the reader opens. No JS. */ .can-group { border-top: 1px solid rgba(28, 26, 23, 0.14); padding: 0.9rem 0; } .can-group summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; list-style: none; } .can-group summary::-webkit-details-marker { display: none; } .can-group summary::before { content: "▸"; color: var(--green-deep); transition: transform 0.15s ease; } .can-group[open] summary::before { content: "▾"; } .can-group-label { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--green-deep); } .can-group-meta { font-size: 0.8rem; color: #6c6a76; } .can-group .can-cards { margin-top: 1.1rem; } .can-card.is-unanswered { opacity: 0.62; } .can-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 99px; background: var(--paper-2); border: 1px solid rgba(28, 26, 23, 0.18); font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; color: #6c6a76; vertical-align: middle; } .can-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .can-funnel li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dotted rgba(28, 26, 23, 0.18); font-size: 0.9rem; } .can-funnel-pos { font-weight: 700; color: var(--green-deep); } .can-funnel-n { color: var(--muted); } .can-note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); } /* THE SPLIT BAR — the same language the deck speaks. NO grows LEFT in red from the centre, YES grows RIGHT in green. Each half owns half the bar, so each side is drawn at half its percentage (100% yes fills the right half completely). */ .split-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(28, 26, 23, 0.09); overflow: hidden; } /* The halves are ANCHORED to the fixed centre tick and grow outward: flex centring drew the no+tick+yes run as one centred group, which shifted the tick toward the heavier side. */ .split-no { position: absolute; top: 0; right: calc(50% + 1px); height: 100%; background: var(--red); border-radius: 999px 0 0 999px; } .split-yes { position: absolute; top: 0; left: calc(50% + 1px); height: 100%; background: var(--green); border-radius: 0 999px 999px 0; } .split-tick { position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 100%; background: rgba(28, 26, 23, 0.3); } .split-legend { display: flex; justify-content: space-between; margin: 0.35rem 0 0; font-size: 0.8rem; font-weight: 700; } .split-lno { color: var(--red); } .split-lyes { color: var(--green-deep); } .can-card.is-thin .split-bar { opacity: 0.55; } /* Group roll-up — the aggregate payoff. We never hand a reader their own scorecard (they remember where they've been), so the neighbourhood's shape is the reward. */ .can-rollup { margin: 0.9rem 0 1.2rem; padding: 0.9rem 1rem; background: var(--paper-2); border-radius: 8px; } .can-rollup-avg { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink-soft); } .can-rollup-line { margin: 0.3rem 0; font-size: 0.9rem; color: var(--ink-soft); } .can-rollup-tag { display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 99px; font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; font-weight: 700; color: #fff; } .can-rollup-tag.is-most { background: var(--green); } .can-rollup-tag.is-blind { background: var(--brass-deep); } /* CANADIANA CHARTS — the data pictures on /canadiana/. All static SVG from the build; a dot only takes a colour once its card has enough answers, so an empty map is hollow dots, never fake colour. Aggregate only — no personal history, ever. */ .can-map-wrap, .can-inset-wrap { margin: 1.2rem 0 0.4rem; } .can-map-svg, .can-inset-svg { width: 100%; height: auto; display: block; } .can-map-land { fill: #f7efdd; stroke: rgba(28, 26, 23, 0.28); stroke-width: 0.7; } .can-map-svg, .can-inset-svg { touch-action: manipulation; } /* a map tap is a tap, not a zoom gesture */ .can-inset-svg { max-width: 640px; background: #f7efdd; border: 1px solid rgba(28, 26, 23, 0.18); border-radius: 8px; } .can-inset-base { pointer-events: none; } .can-inset-water { fill: none; stroke: #9fb8c4; stroke-width: 2.6; stroke-linecap: round; } .can-inset-road { fill: none; stroke: rgba(28, 26, 23, 0.16); stroke-width: 1.6; } .can-inset-place { font-family: "Saira Condensed", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--muted); pointer-events: none; } .can-inset-h { margin: 1.6rem 0 0.4rem; font-size: 1.05rem; } .can-dot { fill: transparent; stroke: rgba(28, 26, 23, 0.45); stroke-width: 1.4; } .can-dot.is-live { stroke: rgba(28, 26, 23, 0.25); stroke-width: 0.8; } .can-dot { cursor: pointer; } .can-dot.is-picked { stroke: var(--green-deep); stroke-width: 3; } .can-dot { transition: transform 0.25s ease; } .can-dot.is-fanned { stroke: rgba(28, 26, 23, 0.55); stroke-width: 1.6; } .can-spider-leg { stroke: rgba(28, 26, 23, 0.3); stroke-width: 1; } /* Columns may list off the coastline past the viewBox edge — let them show. */ .can-map-svg { overflow: visible; } .can-home { pointer-events: none; } /* it's a label — it must never eat a tap meant for a dot under it */ .can-home circle { fill: var(--green-deep); stroke: #fff; stroke-width: 1.5; } .can-home text { font-family: "Saira Condensed", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--green-deep); } .can-map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.6rem 0 0; } .can-leg { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); } .can-leg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .can-leg-dot.is-hollow { background: transparent; border: 2px solid rgba(28, 26, 23, 0.45); } .can-chart-note { margin-top: 0.8rem; font-size: 0.88rem; color: var(--muted); } /* The passport — 13 tiles, stamped as provinces collect answers */ .can-passport { display: grid; gap: 0.45rem; margin-top: 1.1rem; } .can-pass-row { display: flex; gap: 0.45rem; } .can-pass-tile, .can-pass-gap { flex: 1 1 0; min-width: 0; border-radius: 8px; padding: 0.55rem 0.2rem; text-align: center; } .can-pass-gap { visibility: hidden; } .can-pass-tile { color: #fff; } .can-pass-tile b { display: block; font-family: "Saira Condensed", sans-serif; font-size: 1.05rem; letter-spacing: 0.06em; } .can-pass-tile i { display: block; font-style: normal; font-size: 0.82rem; font-weight: 700; } .can-pass-tile.is-empty { background: var(--paper-2); border: 1px dashed rgba(28, 26, 23, 0.3); color: var(--muted); } /* The reach curve — average yes by distance ring from Barrhaven */ .can-reach { display: grid; gap: 0.65rem; margin-top: 1.1rem; } .can-reach-row { display: flex; align-items: center; gap: 0.8rem; } .can-reach-label { flex: 0 0 10.5rem; font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); text-align: right; } .can-reach-track { flex: 1; display: flex; align-items: center; gap: 0.5rem; height: 18px; border-radius: 999px; background: rgba(28, 26, 23, 0.09); padding-right: 0.4rem; } .can-reach-bar { height: 100%; border-radius: 999px; } .can-reach-pct { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); } .can-reach-wait { font-size: 0.78rem; color: var(--muted); padding-left: 0.7rem; } /* Rites of passage — a dot ladder from nobody to everybody */ .can-rites { margin-top: 1.1rem; } .can-rites-axis { display: flex; justify-content: space-between; margin: 0 0 0.4rem 0; padding-left: 12.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .can-rite { display: flex; align-items: center; gap: 0.8rem; padding: 0.32rem 0; } .can-rite-q { flex: 0 0 11.5rem; font-size: 0.86rem; color: var(--ink-soft); text-align: right; } .can-rite-track { flex: 1; position: relative; height: 6px; border-radius: 999px; background: rgba(28, 26, 23, 0.09); } .can-rite-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.2); } .can-rite-pct { flex: 0 0 2.6rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); } .can-rites-sample { margin: 0.6rem 0 0 1.1rem; font-size: 0.9rem; color: var(--ink-soft); } .can-rites-sample li { margin: 0.25rem 0; } /* Depth — readers still swiping, by card position */ .can-depth-svg { width: 100%; max-width: 640px; height: auto; display: block; margin-top: 1rem; } .can-depth-area { fill: rgba(62, 125, 79, 0.16); } .can-depth-line { fill: none; stroke: var(--green-deep); stroke-width: 2.5; } .can-depth-pt circle { fill: var(--green-deep); stroke: #fff; stroke-width: 1.5; } .can-depth-pt text { font-family: "Saira Condensed", sans-serif; font-size: 13px; fill: var(--muted); text-anchor: middle; } @media (max-width: 860px) { /* SVG text scales with the viewBox — at phone width the map label shrinks to ~5px, so give it more user units there. */ .can-map-svg .can-home text { font-size: 30px; } .can-map-svg .can-home circle { r: 7; } /* Dots are 1000-viewBox user units — at phone width r:6 is a 2px speck nobody can tap. */ .can-map-svg .can-dot { r: 12; stroke-width: 2.4; } .can-reach-label { flex-basis: 6.6rem; font-size: 0.74rem; } .can-rite-q { flex-basis: 7.4rem; font-size: 0.8rem; } .can-rites-axis { padding-left: 8.2rem; } .can-pass-tile b { font-size: 0.92rem; } .can-pass-tile i { font-size: 0.74rem; } } /* Substack native subscribe embed */ .substack-embed { width: 100%; max-width: 480px; height: 320px; display: block; border: 1px solid var(--rule); border-radius: 3px; background: #fff; } .embed-fallback { margin: 10px 0 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; } .embed-fallback a { color: var(--brass-deep); } @media (max-width: 760px) { .substack-embed { display: none; } .embed-fallback a { display: inline-flex; width: 100%; justify-content: center; align-items: center; padding: 12px 14px; background: var(--brass); color: var(--green-deep); border: 2px solid var(--green-ink); box-shadow: 3px 3px 0 rgba(12,42,31,0.2); text-decoration: none; } } /* whats-inside list in the rail */ .rail-list { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); } .rail-list .kicker { margin-bottom: 0.7rem; } .rail-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 0.98rem; } .rail-list .rail-list-heading { grid-template-columns: 1fr; } .rail-list .rail-list-heading .kicker { margin: 0; } .rail-list li:last-child { border-bottom: 0; } .rail-list .num { font-family: var(--display); font-weight: 900; color: var(--brass-deep); font-size: 1.1rem; line-height: 1.3; } /* news teaser under the hero photo */ .hero-news { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); } .hero-news .kicker { margin-bottom: 0.4rem; } .hero-news-title { margin: 0 0 0.4rem; font-family: var(--display); line-height: 1.15; font-size: clamp(1.25rem, 2.4vw, 1.6rem); } .hero-news-title a { color: inherit; text-decoration: none; } .hero-news-title a:hover { color: var(--brass-deep); } .hero-news-sum { margin: 0; color: var(--ink-soft); max-width: 62ch; } .hero-news-more { color: var(--brass-deep); font-weight: 600; text-decoration: none; white-space: nowrap; } .hero-news-more:hover { text-decoration: underline; } /* latest-headlines list in the rail */ .rail-news { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); } .rail-news .kicker { margin-bottom: 0.7rem; } .rail-news-list { list-style: none; margin: 0; padding: 0; } .rail-news-list li { padding: 10px 0; border-bottom: 1px dotted var(--rule); font-size: 0.98rem; } .rail-news-list li:last-child { border-bottom: 0; } .rail-news-tag { display: block; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 600; color: var(--brass-deep); margin-bottom: 2px; } .rail-news-list a { color: inherit; text-decoration: none; font-weight: 500; } .rail-news-list a:hover { color: var(--brass-deep); } .rail-news-more { margin: 14px 0 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; } .rail-news-more a { color: var(--brass-deep); } /* Front-page headline band — secondary headlines as a FULL-WIDTH row spanning both columns under the lead + subscribe row, so neither column is left with a dead side-gap. The news is the page spine; the band runs three-up on desktop. */ .frontpage-headlines { grid-column: 1 / -1; margin: clamp(24px, 3vw, 34px) 0 0; padding: clamp(18px, 2.2vw, 24px) 0 0; border-top: 3px double var(--green-ink); } .frontpage-headlines .kicker { margin-bottom: 0.9rem; } .frontpage-headlines .rail-news-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3.5vw, 52px); } .frontpage-headlines .rail-news-list li { font-size: 1rem; } .frontpage-headlines .rail-news-more { margin-top: 16px; } @media (max-width: 820px) { .frontpage-headlines .rail-news-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .frontpage-headlines .rail-news-list { grid-template-columns: 1fr; } } /* "What's going on" — rolling week-ahead agenda on the front page */ .agenda-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 18px; } /* The week-ahead grid auto-fills as many ~220px day columns as fit, then wraps; it collapses to a single column on narrow screens with no breakpoint needed. */ .agenda-week { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .agenda-col { min-width: 0; } .agenda-daylabel { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 700; color: var(--brass-deep); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--rule); } .agenda-list { list-style: none; margin: 0; padding: 0; } .agenda-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dotted var(--rule); } .agenda-item:last-child { border-bottom: 0; } .agenda-time { font-family: var(--gothic); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding-top: 2px; } .agenda-detail { display: block; } .agenda-title { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; } .agenda-title a { color: inherit; text-decoration: none; } .agenda-title a:hover { color: var(--brass-deep); text-decoration: underline; } .agenda-venue { display: block; margin-top: 2px; color: var(--muted); font-size: 0.86rem; } .agenda-none { color: var(--muted); font-family: var(--serif); margin: 6px 0 0; } .agenda-none a { color: var(--brass-deep); } /* "Starts today/tomorrow" flag for an ongoing item making its debut in a column */ .agenda-time--new { color: var(--brass-deep); font-weight: 700; } /* Split agenda — weekdays stack in the left column (Today/Tomorrow + any later day with events, each a compact sub-block), the weekend anchors the right behind a newspaper column rule. Replaces one-skinny-column-per-day, which left half the section blank whenever Today/Tomorrow were quiet. */ .agenda-week--split { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); } .agenda-col--weekend { border-left: 1px solid var(--rule-ink); padding-left: clamp(24px, 3.4vw, 48px); } .agenda-day + .agenda-day { margin-top: 26px; } /* Ongoing strip — multi-day items, listed once, ends-soonest first. Two-up on desktop to stay compact; stacks on mobile. */ .agenda-ongoing { margin-top: clamp(22px, 3.4vw, 32px); padding-top: clamp(14px, 2vw, 18px); border-top: 2px solid var(--rule); } .agenda-daylabel--ongoing { color: var(--ink-soft); } .agenda-ongoing-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); } .agenda-ongoing-item { padding: 10px 0; border-bottom: 1px dotted var(--rule); } .agenda-ongoing-when { display: inline-block; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; font-weight: 700; color: var(--brass-deep); margin-bottom: 3px; } @media (max-width: 620px) { .agenda-cols, .agenda-week, .agenda-week--split { grid-template-columns: 1fr; gap: 26px; } .agenda-col--weekend { border-left: 0; padding-left: 0; } .agenda-ongoing-list { grid-template-columns: 1fr; } /* tighter time gutter so titles get the width on small screens */ .agenda-item { grid-template-columns: 4.2rem 1fr; gap: 10px; } } /* ========================================================================= GENERIC SECTIONS ========================================================================= */ .page-section { padding: clamp(48px, 7vw, 88px) 0; } .page-section.white { background: var(--paper-card); border-block: 1px solid var(--rule); } .page-section.ink { background: var(--green-ink); color: #ece2cd; border-block: 1px solid var(--green-deep); } .page-section.ink h2, .page-section.ink h3 { color: #fbf3df; } .page-section.ink .kicker { color: var(--brass-bright); } .page-section.ink a { color: var(--brass-bright); } .page-section.ink .button.brass { color: #fff; } /* keep filled orange buttons white, not link-orange */ .intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 420px); gap: clamp(28px, 6vw, 68px); align-items: start; } .content { max-width: 70ch; } .answer-box { border-left: 5px solid var(--brass); background: var(--paper-card); padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px); box-shadow: 5px 5px 0 rgba(12,42,31,0.1); font-size: 1.1rem; } .answer-box strong { color: var(--green-ink); } .page-section.ink .answer-box { background: rgba(255,255,255,0.05); color: #ece2cd; } /* coverage area */ .coverage-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-top: 30px; border: 1px solid var(--rule-ink); } .coverage-pill { padding: 26px 16px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--green-ink); border-right: 1px solid var(--rule); background: var(--paper-card); } .coverage-pill:last-child { border-right: 0; } .coverage-pill span { display: block; font-family: var(--gothic); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; color: var(--muted); margin-top: 6px; } /* departments / cards */ .cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 30px; } .card { padding: clamp(22px, 2.6vw, 30px); background: var(--paper-card); border: 1px solid var(--rule-ink); margin-right: -1px; margin-bottom: -1px; } .card .card-no { font-family: var(--gothic); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; color: var(--red); display: block; margin-bottom: 0.7rem; } .card h3 { margin-bottom: 0.5rem; } .card p:last-child { margin-bottom: 0; } /* trust list */ .trust-grid { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); gap: clamp(30px, 5vw, 56px); align-items: start; } .list { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; } .list li { border-left: 4px solid var(--brass); padding: 14px 18px; background: rgba(255,255,255,0.04); } .page-section:not(.ink) .list li { background: var(--paper-card); border-bottom: 1px solid var(--rule); } /* answer hub question links */ .answer-group { margin-top: 40px; } .answer-group:first-of-type { margin-top: 26px; } .answer-group-title { font-family: var(--gothic); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--brass-deep); margin: 0; } .answer-group .question-list { margin-top: 10px; } .question-list { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--rule-ink); } .question-link { display: block; padding: 20px 0; text-decoration: none; border-bottom: 1px solid var(--rule); transition: padding-left .18s ease, background .18s ease; } .question-link:hover { padding-left: 14px; background: rgba(189,133,38,0.08); } .question-link strong { display: block; font-family: var(--display); font-weight: 700; color: var(--green-ink); font-size: 1.32rem; margin-bottom: 5px; } .question-link span { color: var(--ink-soft); } /* ========================================================================= AD SLOTS — IAB-standard, fillable; "your ad here" until sold Sizes: Featured 970x250 / 300x600 · Regular 300x250 (MPU) · Classified 320x100 ========================================================================= */ .ad-slot { --ad-w: 300px; --ad-h: 250px; width: 100%; max-width: var(--ad-w); margin-inline: auto; position: relative; border: 1px solid var(--rule-ink); background: var(--paper-soft); overflow: hidden; } .ad-slot--featured { --ad-w: 970px; --ad-h: 250px; } .ad-slot--featured.ad-slot--rail { --ad-w: 300px; --ad-h: 600px; } .ad-slot--regular { --ad-w: 300px; --ad-h: 250px; } .ad-slot--classified{ --ad-w: 728px; --ad-h: 100px; } /* Native cards are the Bugle's own format (image + copy + CTA), not a fixed IAB image. Let a native regular card FILL its column instead of the 300px image cap, and grow in height with its copy. Image/placeholder ads keep their exact IAB footprint (untouched). On a wide content section the card is capped so it does not run full-bleed. */ .ad-rail:has(.ad-slot--regular .ad-native), .ad-slot--regular:has(.ad-native) { max-width: 100%; } .page-section .ad-rail:has(.ad-slot--regular .ad-native) { max-width: 460px; } /* the "ADVERTISEMENT" eyebrow that sits above every slot */ .ad-rail { width: 100%; max-width: var(--ad-w); margin-inline: auto; } .ad-label { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.6rem; font-weight: 700; color: var(--muted); text-align: center; margin: 0 0 5px; } /* placeholder ("your ad here") state */ .ad-slot.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; aspect-ratio: var(--ad-w) / var(--ad-h); border-style: dashed; border-color: var(--brass-deep); text-decoration: none; padding: 14px; } .ad-slot.is-empty strong { font-family: var(--display); font-weight: 800; color: var(--green-ink); font-size: 1.05rem; } .ad-slot.is-empty span { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; font-weight: 600; color: var(--brass-deep); } .ad-slot.is-empty:hover { background: rgba(189,133,38,0.08); } /* filled: plain image banner */ .ad-image { display: block; text-decoration: none; } .ad-image img { width: 100%; height: auto; aspect-ratio: var(--ad-w) / var(--ad-h); object-fit: cover; } /* filled: native (Amazon-style) card — image + title + body + brand/CTA */ .ad-native { display: block; text-decoration: none; color: var(--ink); background: var(--paper-card); } .ad-native .ad-native-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-soft); } /* Opt-in frames for creative that is not 16:9 (set via the card's `frame` field). */ .ad-native .ad-native-img--square { aspect-ratio: 1 / 1; } .ad-native .ad-native-img--portrait { aspect-ratio: 4 / 5; } .ad-native .ad-native-body { padding: 12px 14px; } .ad-native .ad-native-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .ad-native .ad-native-brand img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; } .ad-native .ad-native-brand span { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; font-weight: 700; color: var(--muted); } .ad-native h4 { font-family: var(--display); font-weight: 700; color: var(--green-ink); font-size: 1.08rem; line-height: 1.12; margin: 0 0 5px; } .ad-native p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 10px; } .ad-native .ad-cta { display: inline-block; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--brass-deep); padding: 8px 16px; border-radius: 2px; } .ad-native:hover .ad-cta { background: #6f4d15; } .ad-native .ad-price { font-weight: 700; color: var(--green-ink); } /* classified: compact text-led unit */ .ad-slot--classified.ad-native .ad-native-img { display: none; } .ad-slot--classified.ad-native h4 { font-size: 0.98rem; } /* featured billboard (970x250): native card lays out horizontally — image left, copy right — so it fills the wide-short box instead of overflowing with a full-width 16:9 image. */ .ad-slot--featured .ad-native { display: grid; grid-template-columns: minmax(0, 445px) 1fr; align-items: stretch; height: var(--ad-h); } .ad-slot--featured .ad-native .ad-native-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } .ad-slot--featured .ad-native .ad-native-body { padding: 18px 28px; display: flex; flex-direction: column; justify-content: center; } .ad-slot--featured .ad-native h4 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.1; margin-bottom: 8px; } .ad-slot--featured .ad-native p { font-size: clamp(0.9rem, 1.4vw, 1.02rem); margin-bottom: 12px; } /* A square hero in the fixed-height featured box: narrow the image column to the card height so the 1:1 creative fits exactly — uncropped — instead of overflowing 445px tall and being cut off by .ad-slot's overflow:hidden. The copy takes the reclaimed width. aspect-ratio must go back to auto here so the card height, not the ratio, sizes the image. */ .ad-slot--featured:not(.ad-slot--rail) .ad-native:has(.ad-native-img--square) { grid-template-columns: minmax(0, var(--ad-h)) 1fr; } /* A square hero sized to a 250px-tall card renders a 250x250 image: too small for the brand mark on it to read on desktop. Give a square featured card more height so the hero is big enough to carry branding. The copy column keeps 630px, which is plenty. */ .ad-slot--featured:not(.ad-slot--rail):has(.ad-native-img--square) { --ad-h: 340px; } .ad-slot--featured .ad-native .ad-native-img--square { aspect-ratio: auto; } @media (max-width: 560px) { .ad-slot--featured .ad-native { grid-template-columns: 1fr; height: auto; } .ad-slot--featured:not(.ad-slot--rail) .ad-native:has(.ad-native-img--square) { grid-template-columns: 1fr; } /* HOUSE RULE (Jay, 2026-07-14): EVERY native ad image is SQUARE on mobile, whatever its `frame`. A phone column is narrow, so a 16:9 strip reads as a thin banner nobody looks at; a square earns real estate and stops the scroll. Landscape creative is centre-cropped to fit — that is a display frame, not a re-edit of the advertiser's photo, so it stays within the local-business image rule (their own photo, unretouched). Check the crop when you onboard an advertiser: if their subject sits far off-centre it will lose its head. */ .ad-native .ad-native-img, .ad-slot--featured .ad-native .ad-native-img, .ad-slot--featured .ad-native .ad-native-img--square { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; } } /* house ad — the Bugle selling its own ad inventory (distinct from a paid creative) */ .ad-house { display: flex; flex-direction: column; justify-content: center; aspect-ratio: var(--ad-w) / var(--ad-h); background: var(--green-ink); border-color: var(--green-ink); text-decoration: none; padding: 16px 18px; } .ad-house-body { display: flex; flex-direction: column; gap: 6px; max-width: 62ch; } .ad-house-eyebrow { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; font-weight: 700; color: var(--brass-bright); } .ad-house strong { font-family: var(--display); font-weight: 800; color: #fbf3df; font-size: 1.15rem; line-height: 1.1; } .ad-house p { margin: 0; color: #e7ddc8; font-size: 0.9rem; } .ad-house .ad-cta { align-self: flex-start; margin-top: 4px; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; color: var(--green-ink); background: var(--brass-bright); padding: 7px 14px; border-radius: 2px; } .ad-house:hover .ad-cta { background: #fff; } .ad-slot--featured.ad-house { padding: 22px clamp(20px, 4vw, 40px); } .ad-slot--featured.ad-house strong { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .ad-slot--featured.ad-house p { font-size: 1rem; } /* ========================================================================= SUBPAGE HEADER (running head reused on interior pages via .site-header) ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(250,247,240,0.95); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 3px double var(--rule-ink); } .nav { position: relative; width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--green-ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.18rem; } .brand-logo { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; } .nav-links { display: flex; align-items: center; gap: 20px; } .nav-links a { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); text-decoration: none; } .nav-links a:hover { color: var(--brass-deep); } .nav-links a.button { color: #fdf7e8; } .nav-links a[aria-current="page"], .runninghead-nav a[aria-current="page"] { color: var(--brass-deep); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; } /* ========================================================================= MOBILE NAV — hamburger disclosure (shared: .site-header + .runninghead) ========================================================================= */ .nav-toggle { display: none; /* desktop: hidden, links are inline */ flex: 0 0 auto; width: 44px; height: 40px; align-items: center; justify-content: center; gap: 5px; flex-direction: column; background: transparent; border: 1.5px solid var(--rule-ink); border-radius: 3px; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--green-ink); transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* PWA hard-refresh button — hidden everywhere by default; shown ONLY when the site is launched as an installed app (home screen). .pwa-standalone is set on by site.js. Sits just left of the hamburger; matches its frame. */ .nav-refresh { display: none; } .pwa-standalone .nav-refresh { display: inline-flex; flex: 0 0 auto; margin-left: auto; /* push it (and the hamburger after it) to the right edge */ width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--rule-ink); border-radius: 3px; color: var(--green-ink); cursor: pointer; padding: 0; } .pwa-standalone .nav-refresh + .nav-toggle { margin-left: 0; } /* keep the pair tight */ .nav-refresh svg { display: block; } .nav-refresh:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .nav-refresh.is-refreshing svg { animation: nav-refresh-spin .6s linear infinite; } @keyframes nav-refresh-spin { to { transform: rotate(360deg); } } /* Floating back button — injected by site.js on every page but the front page. Hidden on desktop widths (browser chrome covers it); shown on mobile and always in the installed app. Fixed bottom-right, clear of the iPhone home-indicator via safe-area insets, so it does not sit on top of article copy at the left edge. */ .pwa-back { position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-ink); color: var(--paper); border: 1.5px solid var(--brass); box-shadow: 0 3px 10px rgba(28, 24, 16, .35); cursor: pointer; padding: 0; } @media (max-width: 760px) { .pwa-back { display: inline-flex; } } .pwa-standalone .pwa-back { display: inline-flex; } .pwa-back svg { display: block; width: 26px; height: 26px; } .pwa-back:active { transform: scale(.94); } .pwa-back:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* keep the inline nav on one line at desktop widths (no mid-width wrapping) */ .brand span, .runninghead-brand { white-space: nowrap; } .nav-links a, .runninghead-nav a { white-space: nowrap; } .page-hero { padding: clamp(48px, 8vw, 92px) 0 16px; } .page-hero h1 { max-width: 16ch; } /* Interior content pages (about, sponsor, privacy, directory, etc.) use the homepage-scale display H1, which looks top-heavy over a short page. Right-size headings + add rhythm so a page with a big title and little text doesn't feel awkward. */ article.content > h1 { font-size: clamp(2.05rem, 3.6vw, 3.05rem); max-width: 22ch; margin-bottom: 1rem; } article.content h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-top: 2.2rem; } article.content h2:first-of-type { margin-top: 1.6rem; } article.content > p { max-width: 70ch; } .founding-page h1 { font-size: clamp(2.35rem, 9vw, 3.25rem); line-height: 0.98; max-width: 12ch; } @media (max-width: 430px) { .founding-page h1 { font-size: clamp(2.05rem, 10vw, 2.6rem); } } /* .founding-page sits outside .page-section, so .list li would fall back to a near-invisible tint against the plain page background. Give it the same white-card/rule-line separation the rest of the site uses for bordered lists, so the Brief contents read as distinct rows instead of a plain bullet list. No new colours or imagery, just the existing .list styling. */ .founding-page .list li { background: var(--paper-card); border-bottom: 1px solid var(--rule); margin-bottom: 2px; } .founding-page .list li:last-child { margin-bottom: 0; } .breadcrumbs { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; font-weight: 600; color: var(--muted); margin-bottom: 20px; } .breadcrumbs a { color: var(--brass-deep); text-decoration: none; } .related { border-top: 1px solid var(--rule-ink); margin-top: 38px; padding-top: 28px; } /* ========================================================================= THIS WEEKEND HUB — acquisition landing surface ========================================================================= */ .weekend-hero { background: linear-gradient(135deg, rgba(18,58,43,0.08), transparent 42%), var(--paper-soft); border-bottom: 1px solid var(--rule); padding-bottom: clamp(36px, 6vw, 68px); } .weekend-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr); gap: clamp(24px, 5vw, 56px); align-items: start; } .weekend-lede { max-width: 64ch; font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: var(--ink-soft); } .weekend-note { background: var(--paper-card); border: 2px solid var(--green-ink); border-top: 6px solid var(--brass); box-shadow: 7px 7px 0 rgba(12,42,31,0.16); padding: clamp(20px, 2.8vw, 28px); } .weekend-note h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .weekend-section h2 { max-width: 18ch; } .weekend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); margin-top: 22px; } .weekend-card { background: var(--paper-card); border: 1.5px solid var(--rule-ink); box-shadow: 4px 4px 0 rgba(12,42,31,0.12); padding: clamp(18px, 2.4vw, 24px); } .weekend-card h3 { font-size: 1.35rem; line-height: 1.12; } .weekend-card p { font-size: .98rem; } .weekend-card-media { margin: 0 0 1rem; } .weekend-card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .weekend-card-media figcaption { color: var(--muted); font-family: var(--gothic); font-size: .72rem; letter-spacing: .04em; margin-top: .4rem; } .weekend-when { font-family: var(--gothic); text-transform: uppercase; letter-spacing: .13em; font-size: .78rem !important; font-weight: 700; color: var(--red); margin-bottom: .65rem; } .weekend-meta { color: var(--muted); font-family: var(--gothic); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem !important; font-weight: 600; } .weekend-source { border-top: 1px dotted var(--rule); color: var(--muted); font-size: .84rem !important; margin-top: 1rem; padding-top: .75rem; } .weekend-outdoor-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(16px, 2.5vw, 24px); margin-top: 22px; align-items: start; } .weekend-outdoor-card--featured { border-top: 6px solid var(--green-ink); } .weekend-outdoor-alternatives { display: grid; gap: 16px; } .weekend-outdoor-alternatives h3 { font-family: var(--gothic); text-transform: uppercase; letter-spacing: .1em; font-size: .86rem; margin: 0; } .weekend-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: .8rem 0 1rem; } .weekend-tags span { border: 1px solid var(--rule); border-radius: 999px; color: var(--green-ink); font-family: var(--gothic); font-size: .72rem; font-weight: 700; letter-spacing: .07em; padding: .28rem .55rem; text-transform: uppercase; } .weekend-dog-rule { background: rgba(216, 162, 58, .16); border-left: 4px solid var(--brass); padding: .75rem .85rem; } @media (max-width: 920px) { .weekend-hero-grid, .weekend-grid, .weekend-outdoor-layout { grid-template-columns: 1fr; } } /* ========================================================================= COLOPHON / FOOTER ========================================================================= */ .footer { background: var(--green-ink); color: #d9cdaf; padding: clamp(40px, 6vw, 60px) 0; border-top: 4px solid var(--brass); } .footer a { color: #f1e6c8; text-decoration-color: rgba(216,162,58,0.5); } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; } .footer-grid strong { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: #fbf3df; display: block; margin-bottom: 0.5rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px; } .footer-links a { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.84rem; font-weight: 600; } .colophon-note { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: #9d8f6e; margin-top: 8px; } /* footer follow + share row */ .footer-social { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin: 28px auto 0; padding-top: 22px; border-top: 1px solid rgba(216,162,58,0.28); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .footer-follow, .footer-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .footer-share { margin-left: auto; } .footer-social-label { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: #9d8f6e; } .social-btn, .share-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; line-height: 1; color: #f1e6c8; text-decoration: none; border: 1.5px solid rgba(216,162,58,0.5); border-radius: 2px; padding: 8px 12px; background: transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .social-btn:hover, .share-btn:hover { color: #fff; background: var(--brass); border-color: var(--brass); } .social-ico { width: 16px; height: 16px; fill: currentColor; flex: none; } .share-btn.copied { color: #fff; background: var(--brass-bright); border-color: var(--brass-bright); } @media (max-width: 620px) { .footer-share { margin-left: 0; } } /* ========================================================================= FOLLOW ON FACEBOOK — front-page block (build-social-block.mjs) Dark "ink" section, so it borrows the footer's .social-btn treatment. ========================================================================= */ .fb-follow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .fb-follow .kicker { color: var(--brass); } .fb-follow h2 { margin: 6px 0 14px; } .fb-follow .section-lede { max-width: 56ch; } .fb-follow-btn { margin-top: 6px; } .fb-stats { border: 1px solid rgba(216,162,58,0.32); border-radius: 3px; padding: clamp(18px, 2.4vw, 26px); background: rgba(0,0,0,0.14); } .fb-stats-head { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 700; color: #f1e6c8; margin: 0 0 14px; } .fb-stats-head span { display: block; text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.74rem; color: #9d8f6e; margin-top: 4px; } .fb-split { margin: 0 0 16px; font-size: 0.95rem; } .fb-split strong { font-family: var(--display); font-size: 1.2rem; color: var(--brass-bright, var(--brass)); } .fb-ages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fb-ages li { display: grid; grid-template-columns: 9.5em 1fr 3.2em; align-items: center; gap: 10px; font-size: 0.86rem; } .fb-age-bar { height: 8px; border-radius: 2px; background: rgba(241,230,200,0.16); overflow: hidden; } .fb-age-bar > span { display: block; height: 100%; background: var(--brass); } .fb-age-pct { text-align: right; font-variant-numeric: tabular-nums; } .fb-stats-note { margin: 16px 0 0; font-size: 0.76rem; color: #9d8f6e; } @media (max-width: 780px) { .fb-follow { grid-template-columns: 1fr; } .fb-ages li { grid-template-columns: 8em 1fr 3em; font-size: 0.8rem; } } /* ========================================================================= MOTION — front-page reveal (refined, single orchestrated load) ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .dateline { animation: fall .6s ease both; } .nameplate-emblem { animation: settle .9s cubic-bezier(.2,.8,.2,1) both .05s; } .nameplate-the { animation: fall .7s ease both .12s; } .nameplate-name { animation: rise .8s cubic-bezier(.2,.8,.2,1) both .18s; } .nameplate-motto { animation: fall .7s ease both .26s; } .masthead-rule { animation: grow .9s cubic-bezier(.6,0,.2,1) both .3s; transform-origin: center; } .lede > * { animation: rise .7s ease both .38s; } .rail { animation: rise .7s ease both .5s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes fall { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes settle { from { opacity: 0; transform: translateY(-14px) rotate(-12deg) scale(.85); } to { opacity: 1; transform: none; } } } /* ========================================================================= RESPONSIVE ========================================================================= */ /* Nav collapses to the hamburger below 1024px. The grouped nav (7 top-level items + Subscribe, sections in dropdowns) needs ~1050px measured; if a TOP-LEVEL item is ever added, re-measure at 1024-1100px before shipping — the flat 14-link bar once outgrew this breakpoint silently and overlapped the brand at every desktop width. */ @media (max-width: 1024px) { .nav-toggle { display: flex; } .nav-links, .runninghead-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--page); border: 1px solid var(--rule-ink); border-top: 0; box-shadow: 0 14px 30px rgba(12,42,31,0.18); padding: 6px 0; max-height: calc(100vh - 60px); overflow-y: auto; } .nav-links[data-open], .runninghead-nav[data-open] { display: flex; } .nav-links a, .runninghead-nav a { padding: 13px 20px; font-size: 0.92rem; border-bottom: 1px dotted var(--rule); } .nav-links a:last-child, .runninghead-nav a:last-child { border-bottom: 0; } /* the Subscribe button sits in-flow inside the menu instead of floating over it */ .nav-links a.button, .runninghead-nav a.button { margin: 10px 16px 6px; box-shadow: none; } /* Dropdown groups FLATTEN in the hamburger menu: the group button disappears and the group's links join the column as ordinary rows (display:contents lets them pick up the .nav-links a / .runninghead-nav a row styles above). */ .nav-group, .nav-drop, .nav-group[data-open] .nav-drop { display: contents; } .nav-group-btn { display: none; } .nav-links .nav-drop a, .runninghead-nav .nav-drop a { padding: 13px 20px; border-bottom: 1px dotted var(--rule); } } @media (max-width: 920px) { .frontpage { grid-template-columns: 1fr; } .lede { padding-right: 0; } .rail { padding-left: 0; border-left: 0; margin-top: 36px; padding-top: 30px; border-top: 3px double var(--rule-ink); } .rail::before { display: none; } .rail .signup-panel { position: static; } .trust-grid, .intro-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { body { font-size: 16.5px; } .hide-mobile { display: none; } .masthead { padding-top: 10px; } .nameplate { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "emblem words" "ear ear"; justify-items: center; text-align: left; gap: 8px 14px; padding: 14px 0 10px; } .nameplate-emblem { grid-area: emblem; } .nameplate-emblem img { width: clamp(54px, 16vw, 68px); } .nameplate-words { grid-area: words; text-align: left; justify-self: start; } .nameplate-the { font-size: 0.95rem; margin-bottom: -0.08em; } .nameplate-name { font-size: clamp(1.6rem, 8.7vw, 2.25rem); } .nameplate-ear { grid-area: ear; width: 100%; flex-direction: row; justify-content: center; align-items: center; gap: 12px; } .nameplate-motto { text-align: left; font-size: 0.66rem; line-height: 1.35; margin: 0; } .dateline { grid-template-columns: 1fr; justify-items: center; gap: 3px; text-align: center; padding-bottom: 8px; } .dateline-date, .dateline-edition, .dateline-free { text-align: center; } .wx { min-width: 0; padding: 7px 10px; } .cards { grid-template-columns: 1fr; } .coverage-strip { grid-template-columns: 1fr 1fr; } .coverage-pill:nth-child(2) { border-right: 0; } .coverage-pill { border-bottom: 1px solid var(--rule); } .footer-grid { grid-template-columns: 1fr; } .hero-actions .button, .section-actions .button { width: 100%; } } /* ========================================================================= COMMUNITY CALENDAR (/events/) ========================================================================= */ .cal-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .events-hero-copy--mobile { display: none; } .cal-date-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 10px; } .date-chip { min-height: 44px; padding: 7px 16px; border: 1.5px solid var(--rule-ink); border-radius: 999px; background: var(--paper-card); color: var(--ink-soft); font-family: var(--gothic); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .date-chip:hover { background: rgba(189,133,38,0.14); } .date-chip.active { background: var(--green-ink); border-color: var(--green-ink); color: #f3ead7; } .cal-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 12px; border-bottom: 1px solid var(--rule); font-family: var(--gothic); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .cal-result-summary { margin: 0; color: var(--muted); } .cal-ongoing-jump { color: var(--green-ink); white-space: nowrap; } .cal-filters > summary { display: none; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--green-ink); color: var(--green-ink); font-family: var(--gothic); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .cal-filters > summary::marker { color: var(--brass-deep); } .cal-toolbar { display: grid; gap: 14px; padding: 22px 0 28px; border-bottom: 3px double var(--rule-ink); margin-bottom: 28px; } .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .chip-label { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: var(--muted); width: 56px; flex: 0 0 auto; } .chip { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; padding: 7px 14px; background: var(--paper-card); color: var(--ink-soft); border: 1.5px solid var(--rule-ink); border-radius: 2px; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; } .chip:hover { background: rgba(189,133,38,0.14); } .chip.active { background: var(--green-ink); color: #f3ead7; border-color: var(--green-ink); } .cal-list { display: block; } .cal-day-label { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; font-weight: 700; color: var(--red); padding: 6px 0; margin: 26px 0 0; border-bottom: 2px solid var(--brass); } .cal-day-label:first-child { margin-top: 0; } .cal-day-label--ongoing { color: var(--green-ink); border-bottom-color: var(--green-ink); margin-top: 40px; } .cal-day { display: grid; gap: 0; } .event-card { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 18px 0 18px 14px; border-bottom: 1px solid var(--rule); border-left: 4px solid var(--rule); } /* Category-colour left rail: a dense column of text briefs (news + events share this markup) is hard to scan for topic at a glance. Reuses existing brand tokens only, no new colours, no new markup: keyed off the data-category the builders already emit. */ .event-card[data-category="Roads & Transit"] { border-left-color: var(--brass); } .event-card[data-category="Development"] { border-left-color: var(--red); } .event-card[data-category="Council"] { border-left-color: var(--green-ink); } .event-card[data-category="Community"] { border-left-color: var(--brass-deep); } .event-card[data-category="Business"] { border-left-color: var(--green-deep); } .event-card[data-category="Schools"] { border-left-color: var(--brass-bright); } .event-card[data-category="Safety"] { border-left-color: var(--muted); } .event-time { font-family: var(--gothic); font-weight: 600; letter-spacing: 0.04em; font-size: 0.92rem; color: var(--green-ink); padding-top: 2px; } .event-time-note { display: block; margin-top: 2px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; color: var(--brass-deep); } .event-title { font-size: 1.4rem; margin: 0 0 6px; line-height: 1.1; } .event-title a { text-decoration: none; } .event-title a:hover { text-decoration: underline; } .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; } .event-tag { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; font-weight: 600; padding: 3px 8px; border-radius: 2px; } .tag-cat { background: var(--green-ink); color: #f3ead7; } .tag-hood { background: transparent; color: var(--brass-deep); border: 1px solid var(--brass); } .event-venue { color: var(--muted); font-size: 0.92rem; } .event-desc { margin: 0 0 6px; color: var(--ink-soft); max-width: 62ch; } .event-source { margin: 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--muted); } .event-source a { color: var(--muted); text-underline-offset: 3px; } .event-source a:hover { color: var(--green-ink); } .event-flyer { display: inline-block; margin: 4px 0 10px; max-width: 260px; } .event-flyer img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 2px; } .event-clip { margin: 4px 0 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; } .event-clip a { color: var(--brass); text-decoration: none; } .event-clip a:hover { text-decoration: underline; } .biz-card-clip { margin: 12px 0 0; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; } .biz-card-clip a { color: var(--brass); text-decoration: none; } .biz-card-clip a:hover { text-decoration: underline; } .cal-empty { padding: 40px 0; font-size: 1.1rem; color: var(--ink-soft); border-bottom: 1px solid var(--rule); } .cal-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--muted); } .ongoing-toggle { display: none; } @media (max-width: 600px) { .events-page .page-hero { padding: 34px 0 26px; } .events-page .breadcrumbs { display: none; } .events-page .page-hero h1 { max-width: 10ch; font-size: clamp(2.4rem, 12vw, 3rem); } .events-page .page-hero .content { font-size: 0.98rem; line-height: 1.48; } .events-hero-copy--desktop { display: none; } .events-hero-copy--mobile { display: inline; } .events-page .cal-actions { margin-top: 18px; gap: 10px 16px; } .events-page .cal-actions .button.brass { width: 100%; min-height: 46px; } .events-page .cal-actions .button.secondary { min-height: 44px; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 0.76rem; text-decoration: underline; text-underline-offset: 4px; } .cal-date-row { display: grid; grid-template-columns: 1fr 1fr; padding-top: 14px; } .date-chip { width: 100%; padding-inline: 8px; } .cal-summary-row { padding: 11px 0; font-size: 0.7rem; } .cal-filters { padding: 10px 0 16px; border-bottom: 3px double var(--rule-ink); } .cal-filters > summary { display: flex; align-items: center; } .cal-filters[open] > summary { margin-bottom: 10px; } .cal-toolbar { gap: 12px; padding: 0; margin: 0; border: 0; } .event-card { grid-template-columns: 1fr; gap: 2px; padding: 14px 0 14px 12px; } .event-time { padding-top: 0; color: var(--brass-deep); font-size: 0.8rem; } .event-title { margin-bottom: 5px; font-size: 1.22rem; line-height: 1.08; } .event-meta { gap: 6px; margin-bottom: 6px; } .event-venue { order: -1; flex-basis: 100%; font-size: 0.86rem; } .event-desc { display: -webkit-box; margin-bottom: 5px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.96rem; line-height: 1.45; } .event-source { font-size: 0.65rem; } .cal-day-label { margin-top: 22px; scroll-margin-top: 12px; } .cal-day-label--ongoing { margin-top: 34px; } .chip-row { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; } .chip-label { width: auto; min-width: max-content; } .chip { min-height: 44px; flex: 0 0 auto; padding-inline: 12px; } .cal-day--ongoing.is-collapsible:not(.is-expanded) .event-card:nth-of-type(n + 6) { display: none; } .cal-day--ongoing.is-collapsible + .ongoing-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: 12px 0 0; border: 1.5px solid var(--green-ink); background: transparent; color: var(--green-ink); font-family: var(--gothic); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } } /* ===================== THE STRAND HERD (editorial cartoon) ===================== */ .strand-herd-section .section-lede { max-width: 60ch; margin: 0.35rem 0 1.25rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.05rem; } /* Home page: cartoon on the left, ad rail filling the space beside it. The rail matches the home-rail ad width (~406px) and the ad fills its column. */ .strand-herd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 406px); gap: clamp(20px, 3vw, 32px); align-items: start; } .strand-herd-rail { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 16px); position: relative; } /* The label sits in flow directly above the ad (the newsletter card now leads the rail). */ .strand-herd-rail .ad-label { margin: 0 0 -6px; text-align: left; } .strand-herd-rail .ad-slot { width: 100%; max-width: 100%; } /* Stacked rail modules that fill the column beside the (tall, square) cartoon */ .sh-rail-card { border: 1px solid var(--rule); background: var(--paper-card); box-shadow: 0 2px 14px rgba(28, 24, 16, 0.08); padding: clamp(18px, 1.8vw, 24px); text-decoration: none; display: block; transition: box-shadow .18s ease, transform .18s ease; } a.sh-rail-card:hover { box-shadow: 0 6px 22px rgba(28, 24, 16, 0.16); transform: translateY(-2px); } .sh-rail-card h3 { margin: 0.1rem 0 0.5rem; font-size: 1.5rem; } .sh-rail-card p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.98rem; } .sh-rail-card .ad-cta { margin-top: auto; } /* ===================== THE BARRHAVEN MINI (weekly crossword section) ===================== The clickable grid image is built weekly by scripts/build-games-teaser.mjs. */ .barrhaven-mini-section .section-lede { max-width: 60ch; margin: 0.9rem 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.05rem; } .mini-teaser { margin: 0; max-width: 420px; } .mini-teaser-link { display: block; border: 1px solid var(--rule); box-shadow: 0 2px 14px rgba(28, 24, 16, 0.1); transition: box-shadow .18s ease, transform .18s ease; } .mini-teaser-link:hover { box-shadow: 0 6px 22px rgba(28, 24, 16, 0.18); transform: translateY(-2px); } .mini-teaser-grid { display: block; width: 100%; height: auto; } .mini-teaser figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.6rem; } /* Home cartoon rail: compact the two cards so the ad + both cards fit within the cartoon's height. Tighter padding, smaller heads/body, trimmed margins. */ .strand-herd-rail .sh-rail-card { padding: clamp(12px, 1.2vw, 16px); box-shadow: 0 2px 10px rgba(28, 24, 16, 0.07); } .strand-herd-rail .sh-rail-card .kicker { font-size: 0.62rem; margin: 0; } .strand-herd-rail .sh-rail-card h3 { font-size: 1.12rem; margin: 0.15rem 0 0.3rem; line-height: 1.15; } .strand-herd-rail .sh-rail-card p { font-size: 0.85rem; line-height: 1.4; margin: 0 0 0.5rem; } .strand-herd-rail .sh-rail-card .ad-cta { font-size: 0.82rem; } @media (max-width: 980px) { .strand-herd-layout { grid-template-columns: 1fr; } .strand-herd-rail { position: static; max-width: 460px; } .strand-herd-rail .ad-label { position: static; text-align: center; } } .strand-herd { margin: 0; max-width: 760px; } /* Share row beneath a cartoon (light-background variant of the footer share buttons) */ /* [hidden] must beat the display rule below, or the native-share button shows on desktop browsers that have no Web Share API — a button that does nothing. (UA `display:none` loses to an author `display:inline-flex`.) Applies to the cartoon share block too, which had this bug. */ .sh-share-btn[hidden], .share-btn[hidden] { display: none !important; } /* Front-page share ask — the paper asking to be passed on, once, under the lede. */ .share-ask { margin: 1.15rem 0 0.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); } .share-ask-line { margin: 0; font-family: var(--gothic); font-size: 0.86rem; color: var(--muted); } .share-ask .sh-share { margin-top: 0.6rem; } .sh-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0.85rem; } .sh-share-label { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-right: 2px; } .sh-share-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.74rem; font-weight: 600; line-height: 1; color: var(--green-ink); text-decoration: none; border: 1.5px solid var(--rule); border-radius: 2px; padding: 7px 11px; background: var(--paper-card); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .sh-share-btn:hover { color: #fff; background: var(--brass); border-color: var(--brass); } .sh-share-btn.copied { color: #fff; background: var(--brass-bright); border-color: var(--brass-bright); } .sh-share-btn.copy-failed { color: #fff; background: var(--ink); border-color: var(--ink); } /* Official share iconography (Jay 2026-07-15): site.js turns every [data-share]/[data-net] text button into one of these round chips — official brand glyph, brand colour, white mark. The text label stays in the markup for no-JS readers and crawlers (.sr-only). */ .share-ico-btn.share-btn, .share-ico-btn.sh-share-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: transform .15s, filter .15s, background .15s; } .share-ico-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; } .share-ico-btn.share-ico--facebook { background: #1877f2; } .share-ico-btn.share-ico--whatsapp { background: #25d366; } .share-ico-btn.share-ico--x { background: #0f1419; } .share-ico-btn.share-ico--email { background: var(--green); } .share-ico-btn.share-ico--copy { background: var(--ink-soft); } .share-ico-btn.share-ico--more { background: var(--brass); } .share-ico-btn.share-btn:hover, .share-ico-btn.sh-share-btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); } .share-ico-btn.copied { color: #fff; background: #1f8a3b !important; } .share-ico-btn.copy-failed { color: #fff; background: var(--red) !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .strand-herd-img { display: block; border: 1px solid var(--rule); background: var(--paper-card); box-shadow: 0 2px 14px rgba(28, 24, 16, 0.10); text-decoration: none; } .strand-herd-img img { display: block; width: 100%; height: auto; } .strand-herd figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.6rem; } .strand-herd-kicker { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--green-ink); } .strand-herd-more { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--brass-deep); } /* Graceful placeholder before the first cartoon ships */ .strand-herd--placeholder { max-width: 760px; } .strand-herd-soon { border: 1px dashed var(--rule); background: var(--paper-soft); padding: clamp(28px, 6vw, 56px); text-align: center; border-radius: 2px; } .strand-herd-soon .strand-herd-kicker { display: block; margin-bottom: 0.5rem; } .strand-herd-soon p { margin: 0; color: var(--muted); font-family: var(--serif); } /* Archive grid (/cartoon/) */ .sh-archive { margin: 1.5rem 0 1rem; } /* Cartoon page: archive on the left, an ad rail filling the space beside it. The rail matches the home-rail ad width (~406px) and the ad fills its column. */ .sh-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 406px); gap: clamp(20px, 3vw, 32px); align-items: start; } .sh-layout > .sh-archive { margin-top: 0; } .sh-rail .ad-slot { width: 100%; max-width: 100%; } @media (max-width: 980px) { .sh-layout { grid-template-columns: 1fr; } .sh-rail { max-width: 460px; } } /* Each month is its own grid; the newest month is open, older months collapse (native details). */ .sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(18px, 3vw, 28px); } .sh-month-block + .sh-month, .sh-month + .sh-month { margin-top: clamp(1.4rem, 3vw, 2.2rem); } .sh-month-title { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; color: var(--green-ink); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } details.sh-month { border-top: 1px solid var(--rule); padding-top: 0.4rem; } details.sh-month > summary { cursor: pointer; list-style: none; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; font-weight: 700; color: var(--green-ink); padding: 0.6rem 0; } details.sh-month > summary::-webkit-details-marker { display: none; } details.sh-month > summary::before { content: "\25B8\00a0\00a0"; color: var(--brass); } details.sh-month[open] > summary::before { content: "\25BE\00a0\00a0"; } details.sh-month[open] > summary { margin-bottom: 1rem; } .sh-card { margin: 0; border: 1px solid var(--rule); background: var(--paper-card); box-shadow: 0 1px 8px rgba(28, 24, 16, 0.08); } .sh-card-link { display: block; color: inherit; text-decoration: none; } .sh-card img { display: block; width: 100%; height: auto; } .sh-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 0.8rem; padding: 0.55rem 0.7rem 0.7rem; } .sh-card-reg { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; font-size: 0.8rem; color: var(--green-ink); } .sh-card-meta { font-size: 0.8rem; color: var(--muted); } .sh-archive-empty { color: var(--muted); font-family: var(--serif); font-size: 1.05rem; max-width: 52ch; } /* ===================== FEATURED BUSINESS (daily local spotlight) ===================== */ .featured-business-section .section-lede { max-width: 60ch; } .fb-empty { color: var(--muted); font-family: var(--serif); font-size: 1.05rem; max-width: 54ch; } /* Homepage card: screenshot left, writeup right; stacks on mobile. */ .fb-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; margin-top: 1.5rem; background: #fff; border: 1px solid rgba(18, 58, 43, 0.12); border-radius: 14px; overflow: hidden; } .fb-card-media { display: block; } .fb-shot { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 900; object-fit: cover; object-position: top center; border-right: 1px solid rgba(18, 58, 43, 0.1); } .fb-card-body { padding: clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) 0; } .fb-loc { display: inline-block; font-family: var(--sans, "Saira Condensed", sans-serif); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.75rem; color: var(--brass); margin-bottom: 0.35rem; } .fb-name { font-family: var(--display, "Fraunces", serif); margin: 0 0 0.5rem; line-height: 1.15; } .fb-writeup { font-family: var(--serif); color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin: 0 0 0.75rem; } .fb-disclosure { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 0 0 0.9rem; } .fb-visit { display: inline-block; font-weight: 700; color: var(--green-ink); text-decoration: none; border-bottom: 2px solid var(--brass); padding-bottom: 1px; } .fb-visit:hover { color: var(--brass); } .fb-more { display: inline-block; margin-left: 1rem; color: var(--muted); font-size: 0.9rem; } /* Archive page entries */ .fb-month-title, .fb-month summary { font-family: var(--display, "Fraunces", serif); } .fb-month { margin: 1.5rem 0; } .fb-month summary { cursor: pointer; font-size: 1.1rem; padding: 0.4rem 0; } .fb-entry { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; padding: clamp(18px, 3vw, 30px) 0; border-bottom: 1px solid rgba(18, 58, 43, 0.12); } .fb-entry-media .fb-shot { border: 1px solid rgba(18, 58, 43, 0.12); border-radius: 12px; } .fb-entry-meta { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.4rem; } .fb-date { font-size: 0.85rem; color: var(--muted); } .fb-archive-empty { color: var(--muted); font-family: var(--serif); font-size: 1.05rem; max-width: 52ch; } @media (max-width: 720px) { .fb-card, .fb-entry { grid-template-columns: 1fr; } .fb-shot { border-right: none; border-bottom: 1px solid rgba(18, 58, 43, 0.1); } .fb-card-body { padding: 0 clamp(16px, 5vw, 22px) clamp(18px, 5vw, 24px); } } /* Event poster (answer/news pages) — responsive, centred, framed */ .event-poster { margin: clamp(20px, 4vw, 32px) 0; text-align: center; } .event-poster img { width: 100%; max-width: 560px; height: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(18, 58, 43, 0.18); } .event-poster figcaption { margin-top: 10px; font-size: 0.85rem; color: rgba(18, 58, 43, 0.7); font-style: italic; } /* Seasonal feature ribbon (e.g. Canada Day) — self-removes after data-until via site.js */ .season-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 2.5vw, 22px); padding: 12px clamp(16px, 4vw, 22px); border-radius: 12px; text-decoration: none; color: #fff; box-shadow: 0 6px 20px rgba(180, 22, 28, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .season-banner:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(180, 22, 28, 0.34); } .season-banner.canada-day { background: linear-gradient(100deg, #c8102e 0%, #a40e26 100%); } .season-leaf { width: 30px; height: 30px; flex: 0 0 auto; fill: #fff; } .season-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; } .season-text strong { font-family: "Saira Condensed", sans-serif; font-size: 1.18rem; letter-spacing: 0.01em; text-transform: uppercase; } .season-sub { font-size: 0.86rem; opacity: 0.94; } .season-cta { flex: 0 0 auto; font-weight: 600; font-size: 0.9rem; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.5); } @media (max-width: 620px) { .season-cta { display: none; } .season-sub { font-size: 0.82rem; } .season-text strong { font-size: 1.05rem; } } /* ===================== BUGLE BUSINESS (BI teaser strip) ===================== */ /* Deliberately lighter/shorter than the news section — clearly a secondary department. */ .bugle-business-section .biz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .biz-card { display: block; overflow: hidden; background: var(--paper-soft); border: 1px solid var(--rule-soft); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .biz-card:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28,24,16,.10); color: var(--ink); } .biz-card-img { display: block; width: 100%; aspect-ratio: 1216 / 832; height: auto; object-fit: cover; border-bottom: 1px solid var(--rule-soft); background: var(--paper-soft); } .biz-card-body { padding: .85rem 1.1rem 1rem; border-left: 3px solid var(--brass); } .biz-card-meta { display: flex; gap: .6rem; align-items: baseline; font-family: "Saira Condensed", sans-serif; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .35rem; } .biz-card-date { color: var(--ink-soft); } .biz-card-title { font-size: 1.05rem; line-height: 1.25; margin: 0 0 .35rem; } .biz-card-summary { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); margin: 0; } .biz-empty { color: var(--ink-soft); } /* Homepage Business signal = THE STORY (Jay, 2026-07-15, locked in the builder): smaller image beside the full signal/opportunity/why text so readers get the whole note on the front page; only the "what you could do" tail jumps to the full note, newspaper-style. */ .biz-card--home { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); } .biz-card--home:hover { transform: none; box-shadow: none; border-color: var(--rule-soft); } .biz-card--home .biz-card-figure { display: block; min-height: 100%; } .biz-card--home .biz-card-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-bottom: 0; border-right: 1px solid var(--rule-soft); } .biz-card--home .biz-card-body { padding: 1.15rem 1.5rem 1.25rem; } .biz-card--home .biz-card-title { font-size: 1.35rem; margin-bottom: .2rem; } .biz-card--home .biz-card-title a { color: inherit; text-decoration: none; } .biz-card--home .biz-card-title a:hover { color: var(--brass-deep); } .biz-card-more { margin: .9rem 0 0; font-size: .92rem; } .biz-card-more a { color: var(--brass-deep); } @media (max-width: 720px) { .biz-card--home { grid-template-columns: 1fr; } .biz-card--home .biz-card-img { height: auto; aspect-ratio: 1216 / 832; border-right: 0; border-bottom: 1px solid var(--rule-soft); } } /* Bugle Business — /business/ page grid + Brief CTA */ .biz-cards--page { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .biz-brief-cta { margin-top: 1.75rem; padding: 1.5rem 1.6rem; background: var(--green, #123a2b); color: var(--paper, #f3ead7); border-radius: 10px; } .biz-brief-cta h2 { color: var(--paper, #f3ead7); margin: 0 0 .4rem; } .biz-brief-cta p { color: var(--paper-2, #efe2c9); margin: 0 0 1rem; max-width: 60ch; } /* Bugle Business — full opportunity cards on /business/ */ .biz-cards--page { grid-template-columns: 1fr; gap: 1.25rem; } .biz-card--full .biz-card-img { aspect-ratio: 1216 / 500; } .biz-card--full .biz-card-summary { font-size: .98rem; } .biz-do { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--rule-soft); } .biz-do-label { font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; color: var(--brass-deep); margin: 0 0 .5rem; } .biz-do-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; } .biz-do-col h4 { font-family: "Saira Condensed", sans-serif; font-size: .9rem; margin: 0 0 .3rem; color: var(--ink); } .biz-do-col ul { margin: 0; padding-left: 1.1rem; } .biz-do-col li { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); margin-bottom: .25rem; } /* Bugle Business — structured opportunity sections */ .biz-sec { margin-top: .85rem; } .biz-sec-label { font-family: "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; color: var(--brass-deep); margin: 0 0 .25rem; } .biz-sec p { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); } .biz-sec-src { font-size: .8rem !important; font-style: italic; color: var(--muted, #7a7163) !important; } /* Bugle Business — CTA buttons readable on the green block + spacing between them */ .biz-brief-cta .button { margin: .4rem .6rem .4rem 0; } .biz-brief-cta .button.secondary { background: transparent; color: var(--paper, #f3ead7); border-color: var(--paper, #f3ead7); box-shadow: 4px 4px 0 rgba(0,0,0,0.28); } .biz-brief-cta .button.secondary:hover { background: rgba(255,255,255,0.15); color: #fff; } /* Bugle Business — opportunity archive list */ .biz-arch-list { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; } .biz-arch-item { padding: .85rem 0; border-bottom: 1px solid var(--rule-soft); } .biz-arch-meta { display: flex; gap: .6rem; align-items: baseline; font-family: "Saira Condensed", sans-serif; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .2rem; } .biz-arch-date { color: var(--ink-soft); } .biz-arch-title { font-size: 1.1rem; margin: 0 0 .2rem; } .biz-arch-title a { color: var(--ink); text-decoration: none; } .biz-arch-title a:hover { color: var(--brass-deep); } .biz-arch-blurb { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); margin: 0; } /* Barrhaven Asked — homepage swipe-card deck (behind BARRHAVEN_ASKED_HOME_DECK flag) */ .barrhaven-asked-section { background: radial-gradient(circle at 10% 0%, rgba(216,162,58,.18), transparent 34%), linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); color: var(--paper-card); } .barrhaven-asked { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); gap: clamp(20px, 4vw, 52px); align-items: center; } .barrhaven-asked h2, .barrhaven-asked h3 { color: var(--paper-card); } .barrhaven-asked .kicker { color: var(--brass-bright); } .barrhaven-asked-privacy { color: #f2e4bf; font-weight: 650; } .asked-card { background: var(--paper-card); color: var(--ink); border: 4px solid var(--brass-bright); border-radius: 28px; box-shadow: 0 22px 60px rgba(0,0,0,.24); padding: clamp(20px, 4vw, 34px); min-height: 420px; display: flex; flex-direction: column; justify-content: center; } .asked-card h3 { color: var(--green-ink); font-size: clamp(1.65rem, 5vw, 2.5rem); } .asked-card-progress { align-self: flex-start; font-family: var(--gothic); letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; } .asked-choices { display: grid; gap: .7rem; } .asked-choice { appearance: none; border: 2px solid var(--rule-soft); border-radius: 999px; background: var(--paper-soft); color: var(--green-ink); cursor: pointer; font: 700 1rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: .85rem 1rem; text-align: left; } .asked-choice:hover, .asked-choice:focus-visible { border-color: var(--brass); background: #fff7df; outline: none; } .asked-choice:disabled { opacity: .58; cursor: wait; } .asked-status { color: var(--muted); font-size: .95rem; margin: .9rem 0 0; } .asked-card--done { min-height: 300px; } @media (max-width: 760px) { .barrhaven-asked { grid-template-columns: 1fr; } .asked-card { border-radius: 22px; min-height: 360px; } .asked-choice { padding: .9rem 1rem; } } /* ---- Five Minutes With: interview photo (build-interviews.mjs) -------------------------------- MOBILE-FIRST AND FULL WIDTH BY DEFAULT (Jay, 2026-07-27). This used to be an inline `max-width:min(280px,45%);float:right`, which on a phone is 45% of a ~390px screen: an 82-person FC Bayern team photo rendered about 175px wide, a thumbnail nobody can see. A float is a DESKTOP-only idea, so it now only applies once there is room for text beside it, and a wide image never floats at all: it runs the full column so the faces are big enough to find yourself in. Inline styles cannot hold a media query, which is why this lives here. */ .interview-photo { float: none; width: 100%; max-width: 100%; margin: 0 0 1.15rem; } .interview-photo img { width: 100%; height: auto; border-radius: 12px; display: block; } .interview-photo figcaption { font-size: .75rem; color: #5c584f; margin-top: .35rem; } /* Portrait or squarish art may float beside the text once the column is wide enough. */ @media (min-width: 760px) { .interview-photo--portrait { float: right; width: auto; max-width: 300px; margin: 0 0 1rem 1.4rem; } } /* ========================================================================= FROM JAY — the publisher's column (/from-jay/) and its front-page slot ========================================================================= */ .lede-more { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; color: var(--brass-deep); text-decoration: none; white-space: nowrap; } .lede-more:hover { text-decoration: underline; } /* the column masthead: portrait once at the top of the page, never per note */ .column-head { margin-bottom: 8px; } .column-head::after { content: ""; display: block; clear: both; } .column-head h1 { margin-bottom: 6px; } /* the standfirst's brass bar is dropped here on purpose: a left border on a block that wraps a float runs behind the portrait instead of beside the text. */ .column-head .page-standfirst { border-left: 0; padding-left: 0; margin-bottom: 0; } .column-portrait { float: left; margin: 4px 18px 8px 0; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--brass); } @media (max-width: 560px) { .column-portrait { width: 76px; height: 76px; margin-right: 14px; } } /* the column's front-page section, deliberately built like .hero-news below it */ .hero-jay { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); } .hero-jay .kicker { margin-bottom: 0.4rem; } .hero-jay-title { margin: 0 0 0.6rem; font-family: var(--display); line-height: 1.15; font-size: clamp(1.25rem, 2.4vw, 1.6rem); } .hero-jay-title a { color: inherit; text-decoration: none; } .hero-jay-title a:hover { color: var(--brass-deep); } .page-standfirst { font-size: 1.12rem; color: var(--ink-soft); max-width: 46em; border-left: 3px solid var(--brass); padding-left: 16px; margin-bottom: 34px; } .publisher-note { border-top: 1px solid var(--rule); padding-top: 26px; margin-top: 30px; max-width: 46em; } .publisher-note:first-of-type { border-top: 2px solid var(--rule-ink); } .publisher-note h2 { font-family: var(--display); margin: 0 0 6px; } .note-date { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; font-weight: 600; color: var(--muted); margin: 0 0 16px; } .note-sign { font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-top: 18px; } .note-foot { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 20px; font-family: var(--gothic); letter-spacing: 0.04em; color: var(--muted); } /* ---- Daily push opt-in (/app/) ---------------------------------------- */ .push-wrap { margin: 18px 0 10px; } #push-optin { font-family: var(--gothic); font-weight: 700; letter-spacing: 0.04em; font-size: 0.95rem; text-transform: uppercase; background: var(--green); color: #fff; border: 1.5px solid var(--green-ink); border-radius: 3px; padding: 14px 26px; cursor: pointer; /* 48px min target: this page is aimed at readers on phones, many of them 55+. */ min-height: 48px; } #push-optin:hover:not(:disabled) { background: var(--green-deep); } #push-optin:focus-visible { outline: 3px solid var(--brass-bright); outline-offset: 2px; } #push-optin:disabled { opacity: 0.55; cursor: not-allowed; } .push-status:empty { display: none; } .push-status { margin: 6px 0 0; padding: 10px 12px; border-left: 3px solid var(--rule); background: rgba(0,0,0,0.03); font-size: 0.95rem; color: var(--ink-soft); } .push-status--ok { border-left-color: var(--green); } .push-status--err { border-left-color: #9a2c1e; } .push-note { font-size: 0.9rem; color: var(--muted); margin-top: 12px; } /* ---- Daily-alerts bell (header) --------------------------------------- */ /* Hidden until site.js proves push can actually work here. On an iPhone browser tab Safari hides the push APIs, so an always-visible bell would be dead. */ .nav-bell { display: none; } .nav-bell.is-available { display: inline-flex; flex: 0 0 auto; margin-left: auto; /* first of the right-hand cluster carries the push */ width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--rule-ink); border-radius: 3px; color: var(--green-ink); cursor: pointer; padding: 0; } /* When the bell is showing it owns the auto margin, so the refresh button must give it up or the two separate across the whole header. */ .nav-bell.is-available + .nav-refresh { margin-left: 0; } .nav-bell svg { display: block; } .nav-bell:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .nav-bell[data-state="on"] { background: var(--green); border-color: var(--green-ink); color: #fff; } .nav-bell[data-state="on"] svg { fill: var(--brass-bright); stroke: var(--brass-bright); } .nav-bell[data-state="busy"] { opacity: 0.5; } /* Transient confirmation for the header bell, which has no room for a status line. */ .push-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); z-index: 900; max-width: min(92vw, 420px); background: var(--green-ink); color: #fff; font-family: var(--gothic); font-size: 0.92rem; letter-spacing: 0.02em; padding: 12px 18px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.28); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .push-toast.is-up { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .push-toast { transition: none; } } /* Portrait how-to screen recording on /app/. The clip is 720x1558, so it is capped by HEIGHT rather than width — left to fill the column it would push the rest of the page off a phone screen entirely. */ .howto-video { margin: 1.6rem 0 2rem; text-align: center; } .howto-video video { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: min(70vh, 620px); height: auto; border: 1px solid rgba(20,48,31,0.22); border-radius: 10px; background: #111; } .howto-video figcaption { margin-top: 0.6rem; font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(20,48,31,0.66); } /* ===================== Submitted by the Community (reader photos) ===================== */ .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; } .cp-card { margin: 0; } .cp-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; } .cp-card figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; } .cp-credit { display: block; font-family: var(--gothic); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; margin-top: 2px; }