/* ========================================================================== Wisdom Quotes & Stories — Ghost theme Forked from wisdom-love-quotes v1.0.0. Structure and accessibility work are inherited; the palette is measured from this site's own logo and THE AD PIPELINE IS REMOVED ENTIRELY. NO ADS, BY DECISION. This site is not on our AdSense — its ads.txt is media.net (8CU808IUG) and pub-7439041255533808 appears only as a media.net RESELLER line. Rather than renumber an AdSense slot that does not exist here, the loader, the in-article unit, the archive units, their CSS and their package.json settings were all DELETED. ads.txt is still served unchanged, so media.net authorisation survives for whenever monetisation is decided. The site was nearly skipped entirely: it was recorded as a 1-post parked domain because its table prefix is a2mps2_ and wp_posts is a stale 2018 decoy holding one row. It actually has 1,244 posts — the largest in the fleet. ========================================================================== */ /* ========================================================================== SELF-HOSTED WEBFONTS — added 2026-08-05 -------------------------------------------------------------------------- Until now this theme shipped NO font files and no @font-face, and the site's Ghost heading_font/body_font settings are empty — so it rendered in whatever system font the visitor happened to have. The WordPress theme this site replaced self-hosted Poppins and Lora; that typographic identity was dropped at migration, on this site and on all eleven others. Both faces are SIL OFL. Served from the theme, never fonts.googleapis.com — a third-party stylesheet on the critical path costs a DNS lookup, a TLS handshake and a round trip before the first byte of font CSS arrives, and it hands the visitor's IP to a third party on every page view. Only latin and latin-ext ship. unicode-range means latin-ext downloads only if a page actually contains a character in it. Lora is the variable release, so 400..700 is one file; Poppins has no variable release, so 600 and 700 are separate. Per page that is ~50 KB, not the 138 KB on disk. THE FALLBACK METRICS ARE MEASURED, NOT GUESSED. font-display:swap trades FOIT for CLS — text paints in the fallback then reflows when the webfont lands. Rendering both faces at 200px and comparing advance widths gave: Lora vs Georgia 103.1% (x-height 104.2%) <- chosen Lora vs Times 112.0% Poppins vs Arial 112.7% (x-height 106.7%) <- chosen Poppins vs Segoe UI 113.0% Georgia sits within 3.1% of Lora, which is why it leads the serif stack. size-adjust closes the remainder so the swap barely moves the text. ========================================================================== */ /* Lora — body copy and the quotations. Variable, 400..700. */ @font-face{ font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/lora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/lora-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/lora-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/lora-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Poppins — headings and UI. No variable release, so 600 and 700 are separate. */ @font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Metric-matched fallbacks. These carry the MEASURED ratios above, so the swap-in barely moves the text instead of reflowing the page. */ @font-face{ font-family:'Lora Fallback'; src:local('Georgia'), local('Times New Roman'); size-adjust:103.1%; ascent-override:100.5%; descent-override:27.5%; } @font-face{ font-family:'Poppins Fallback'; src:local('Arial'), local('Helvetica'); size-adjust:112.7%; ascent-override:105.0%; descent-override:35.0%; } :root { /* --- palette, MEASURED FROM THE MASTER LOGO ----------------------------- REPLACED 2026-08-05. The previous palette here was violet, and it was wrong: it was quantised from a 502x82 script WORDMARK recovered off the live site, which is a derived asset, not the brand. The master is Logos/Wisdom Quotes and Stories.png — a 1600x1600 illustrated circular badge: navy tree-and-figure silhouette, sunset sky, teal ocean, amethyst and rose crystals. It shares NO colour with the wordmark. Derived with Material Color Utilities for the hue family and WCAG 2.x for the tone. Full method, area shares and matrix: 05 Wisdom All Websites/Wisdom Quotes and Stories/Brand Kit/02-Color/palette.md Token NAMES below are the legacy forked ones (brown/rust/gold/navy) kept as aliases so nothing downstream breaks. None of them describe their colour. The canonical names are declared first; migrate references to those and then delete the alias block. */ /* canonical — these are what the colours actually are */ --wqs-navy-true: #022A5C; /* 14.11:1 on paper — silhouette, 6.1% of mark */ --wqs-navy-deep: #04182F; /* 17.84:1 on paper */ --wqs-ink-soft: #4C6F81; /* 5.39:1 on paper — meta, bylines */ --wqs-ocean: #0293CE; /* 3.46:1 — FILL / large text / focus ring */ --wqs-ocean-ink: #0072A1; /* 5.36:1 on paper — the working ocean */ /* THE OCEAN INVERTED. Added 2026-08-06 with the navy footer. The kit's own matrix is explicit that the ocean is the ONE colour in this palette that does not survive being moved onto the navy: --wqs-ocean is 4.08:1 there and --wqs-ocean-ink, being darker still, is 2.64:1 — under the 3:1 WCAG 1.4.11 asks of a focus ring. This is the lifted variant the kit specifies for that case, at 5.23:1 on navy. It is FILL-ONLY on white (2.70:1). */ --wqs-ocean-lift: #34A7E3; /* 5.23:1 on navy — the ocean, for dark grounds */ --wqs-sky: #C5EAFF; /* 1.27:1 — FILL ONLY. Takes navy ink */ --wqs-apricot: #FFCD9C; /* 1.45:1 — FILL ONLY. The feature band */ --wqs-amethyst: #6F449D; /* 7.02:1 on paper — text-safe RAW */ --wqs-plum: #4C1656; /* 13.49:1 on paper */ --wqs-rose: #B0387B; /* 5.68:1 on paper — text-safe RAW */ --wqs-blush: #FFB1BA; /* 1.71:1 — FILL ONLY */ --wqs-sun: #EDE9E1; /* 1.21:1 — FILL ONLY */ /* legacy alias block — same names the rest of this file already uses */ --wqs-ink: var(--wqs-navy-true); /* was #23007B violet */ --wqs-brown: var(--wqs-amethyst); /* NOT brown. was #845DC4 */ --wqs-brown-soft: var(--wqs-plum); /* hover. was #50308D */ --wqs-navy: var(--wqs-ink-soft); /* was #525057, a neutral grey */ --wqs-rust: var(--wqs-sky); /* NOT rust. was #D9B2FF lilac */ --wqs-rust-ink: var(--wqs-ocean-ink); /* was #845DC4 */ --wqs-gold-ink: var(--wqs-rose); /* NOT gold. was #300097 violet */ --wqs-cream: var(--wqs-apricot); /* the feature band. was #E2C8FA */ --wqs-surface: #F2F9FF; /* card face, a breath of sky on white */ --wqs-paper: #FFFFFF; /* page ground */ --wqs-white: #FFFFFF; /* TITLE INK — 2026-08-05, by request. Every heading on a LIGHT ground uses this: the base h1-h4 rule and the .quote-card-title / .post-title / .archive-title / .section-title / .feed-title / .error-title overrides, which until now were a mix of --wqs-ink navy and --wqs-amethyst. 16.92:1 on white and ~16:1 on the card surface. STILL NOT APPLIED TO .site-title, but the reason changed on 2026-08-06. It used to be a contrast problem: the header bar was #300060 and #300050 measured 1.05:1 on it — the same colour, near enough, and invisible. The bar is white now, where this token would be perfectly legible. It is kept off the site title on brand grounds instead: #300050 is a hand-picked violet with no counterpart in the logo, and the header was re-inked to the measured palette by request, so .site-title takes --wqs-ink #022A5C. The footer headings still use white — they are on the footer's dark ground, which is now --wqs-navy-true and takes white at 14.11:1. OPEN, AND SAID ONCE: every heading on a light ground still carries this violet while the header now carries the badge's navy. Aligning them is a site-wide repaint and was not what was asked for. */ /* REPOINTED 2026-08-06 to the brand's own ink: #300050 -> --wqs-navy-true #022A5C. This was the LAST hand-picked colour in the stylesheet — a violet specified by eye, matching nothing in the logo — and it was setting every heading on every light ground: h1-h4, card titles, post titles, archive titles, section and feed titles, the error title. 17.84:1 would have been available via --wqs-navy-deep; navy-true at 14.11:1 is used instead so the headings match the site title in the header and the footer ground exactly, rather than being a fourth near-black. Header, footer and every heading now come from the same three logo colours. */ --wqs-title: var(--wqs-navy-true); /* THE BAND TRAP, SIXTH SITE, SIXTH SET OF COLOURS. Measured on the apricot band #FFCD9C: --wqs-ink 9.72, --wqs-plum 9.29 and --wqs-amethyst 4.84 all pass; --wqs-ink-soft 3.71, --wqs-rose 3.91 and --wqs-ocean-ink 3.69 all FAIL AA while passing comfortably on the page. On the sky tint #C5EAFF --wqs-rose is 4.49 — a miss by 0.01, which is exactly how this trap keeps getting through. All three still clear the 3:1 a focus ring needs, so the ring is unconstrained and only TEXT is. HARD RULE: the band carries --wqs-ink, --wqs-plum or --wqs-amethyst. */ --wqs-text: var(--wqs-ink); --wqs-muted: var(--wqs-ink-soft); /* 5.39:1 — meta, bylines */ /* ACCENT REPOINTED 2026-08-06, by request: amethyst -> the badge's ocean. #6F449D is a real kit token and it is text-safe (7.02:1), so this is not a contrast fix — it is a BRAND fix. The area table in palette.md lists what the artwork is actually made of: white, navy #022A5C, sky, apricot and ocean #0293CE. Amethyst never appears in it; it entered the palette as a SEED, survived into the token list, and then quietly became the colour of every link, tag pill, chip, pagination button and in-content heading on a site whose logo contains no violet at all. --wqs-ocean-ink #0072A1 is the working, text-safe form of that ocean: 5.36:1 on paper and 5.04:1 on the --wqs-surface card face, so every place the old accent was legible the new one still is. Checked against each ground it actually lands on, not just against white. SEVENTEEN RULES now read this token instead of naming a colour directly. That was the real defect — the alias block at the top of this file exists precisely so a repalette is one line, and half the stylesheet was bypassing it. Repointing this token is now the whole change. */ --wqs-accent: var(--wqs-ocean-ink); /* 5.36:1 — links, chips, pills */ --wrap: 1180px; --wrap-narrow: 720px; --radius: 10px; --gap: clamp(1rem, 2.5vw, 1.75rem); --tap: 44px; /* WCAG 2.5.8 target size */ /* Ghost still injects --gh-font-heading / --gh-font-body if an owner picks a font in admin, and that must keep winning — it is the site owner's choice. Below it now sits the BRAND pairing rather than a bare system stack: Poppins for display, Lora for body, per the brand kit. Note this inverts the old fallbacks, which had a serif on headings and a sans on body. */ --font-body: var(--gh-font-body, 'Lora', 'Lora Fallback', Georgia, "Iowan Old Style", "Times New Roman", serif); --font-head: var(--gh-font-heading, 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); /* Shadow tint follows --wqs-ink (#022A5C, the silhouette navy). */ --shadow-sm: 0 1px 2px rgba(2,42,92,.06), 0 2px 8px rgba(2,42,92,.05); --shadow-md: 0 4px 16px rgba(2,42,92,.10); } body.accent-deep { --wqs-accent: var(--wqs-rose); } /* --- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--wqs-paper); color: var(--wqs-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* defaults to display:inline, which would become the img's containing block and break every rule below that sizes or centres the img directly (.quote-card-img height:100%, .post-media img margin-inline:auto). */ picture { display: block; } a { color: var(--wqs-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Hover DARKENS toward the brand ink rather than shifting hue: ocean-ink 5.36:1 at rest -> navy-true 14.11:1 on hover. Plum #4C1656 was the old pair to the amethyst accent and is the same violet family that has just been removed everywhere else. */ a:hover { color: var(--wqs-navy-true); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--wqs-title); margin: 0 0 .5em; } /* WCAG 1.4.11 asks 3:1 of a focus indicator, not the 4.5:1 a text colour needs. outline-offset puts a 2px gap between the ring and the element, so the ring's neighbour on both sides is the container background, never a button fill — which is why the ring on an --wqs-brown button is not the comparison that matters. RE-MEASURED 2026-08-05 for the badge palette: --wqs-rust-ink is now the ocean ink #0072A1, and it rings at 5.36:1 on the white page, 5.04:1 on a card and 3.69:1 on the apricot .sections band — the band figure STILL clears the 3:1 that 1.4.11 asks, so the ring is correct on a band where TEXT in the same colour (3.69, under 4.5) is not. That is precisely why 1.4.11 and 1.4.3 set different thresholds, and why the band rule above constrains text without touching the focus ring. Twice now this comment has carried another palette's numbers and read as verified — first an orange-on-cream pair from a different site, then the violet 4.83/3.19 set from the wrong logo. Re-measure it on every repalette. */ :focus-visible { outline: 3px solid var(--wqs-ocean-ink); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--wqs-ink); color: #fff; padding: .75rem 1.25rem; } .skip-link:focus { left: 0; } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, var(--wrap-narrow)); } /* --- header ------------------------------------------------------------- */ /* HEADER GROUND CHANGED AGAIN 2026-08-06, by request: #300060 -> WHITE. History of this one bar: white -> #300050 (v1.7.1) -> #300060 (v2.0.0) -> white. A turn to white was also asked for and withdrawn mid-turn at v1.9.1, so this is the second time it has been requested and the first time it ships. THE SAME RULE APPLIES IN REVERSE, AND IT IS THE WHOLE OF THIS CHANGE. Every element in this bar had been re-inked to WHITE-ON-VIOLET at v1.7.1. On a white ground those inks measure: .site-title --wqs-white #FFFFFF 1.00:1 invisible .site-tagline --wqs-white #FFFFFF 1.00:1 invisible nav links --wqs-white #FFFFFF 1.00:1 invisible nav hover #FFCB9A 1.44:1 invisible .nav-toggle-bar --wqs-white #FFFFFF 1.00:1 invisible .nav-toggle-label --wqs-white #FFFFFF 1.00:1 invisible header icons --wqs-white #FFFFFF 1.00:1 invisible borders rgba(255,255,255,.12-.30) invisible Repointing the background alone would have produced an empty white strip with a logo in it. Changing the ground is never the change; it is half of a pair. WHICH COLOURS THE BAR TAKES NOW — the request was "brandkit colours according to logo", so the inks below are the MEASURED palette from the 1600x1600 badge (Brand Kit/02-Color/palette.md), not the #300050/#300060/#FFCB9A literals that had accumulated here. None of those three appears anywhere in the artwork: #300060 was specified by hand, and the violet family entered this theme from a palette built off a derived wordmark that was later superseded. The badge is navy silhouette, sky, ocean and apricot. So on white: .site-title --wqs-ink #022A5C 14.11:1 AAA the mark's own ink .site-tagline --wqs-ink-soft #4C6F81 5.39:1 AA the kit's secondary nav links --wqs-ink #022A5C 14.11:1 AAA nav hover --wqs-ocean-ink #0072A1 5.36:1 AA the working ocean nav hover pill --wqs-sky #C5EAFF fill + navy ink 11.14:1 .nav-toggle-bar --wqs-ink #022A5C 14.11:1 (needs 3:1) .nav-toggle-label --wqs-ink #022A5C 14.11:1 AAA header icons --wqs-ink #022A5C 14.11:1 icon hover --wqs-sky fill + --wqs-ink glyph 11.14:1 Every figure is from the kit's own contrast matrix, measured against paper #FFFFFF. The bar is now MORE legible than it was on violet, not less. THE FOCUS RING IMPROVES AND IS STILL THE THING TO WATCH. --wqs-ocean-ink was 3.03:1 on #300060 — over WCAG 1.4.11's 3:1 with almost nothing to spare. On white it is 5.36:1. That margin is why the same token can now also carry nav hover text, which needs 4.5:1 and could not have had it on the old bar. THE FOOTER FOLLOWED LATER THE SAME DAY. It was left on #300060 when this bar went white, which broke the open-and-close-on-one-colour symmetry that justified darkening the header at v1.7.1. It is now --wqs-navy-true #022A5C — the badge's own silhouette navy — so the page is white at the top and the logo's navy at the bottom, and BOTH grounds are measured brand colours for the first time. See the .site-foot rule for what that move cost (the focus ring). SEPARATION IS A SHADOW, NOT A BORDER — 2026-08-06, by request. The 3px sky rule this shipped with earlier the same day is gone. The job is unchanged and it still has to be done: this bar is STICKY over a white page, so with no ground contrast and no edge it would dissolve into the content scrolling under it. --shadow-sm does it without drawing a line, and it is already tinted with --wqs-ink rather than being neutral grey, so the lift reads as the brand's navy rather than as a generic drop shadow. A shadow also degrades better than the border did: the sky rule was a fixed 3px band that sat there whether or not anything was under it, whereas this only reads where content passes beneath. */ .site-head { --wqs-head: var(--wqs-paper); background: var(--wqs-head); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 40; } /* 68px -> 90px by request. The wrap measurements recorded further down were all taken at 68px and REMAIN VALID: they are about the bar's WIDTH — whether the brand lockup and the button fit on one line — and a taller bar changes neither term. Nothing keys off this height. */ .site-head-inner { display: flex; align-items: center; gap: 1rem; min-height: 90px; padding-block: .5rem; flex-wrap: wrap; } .site-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; min-height: var(--tap); } /* CHANGED 2026-08-05 — the logo is now the BADGE, not the wordmark. The wordmark was a 502x82 violet script quantised from a derived asset; it shares no colour with this brand and clashed with the badge palette once that shipped. The master mark is a square illustrated badge, so this reverts to the 46px circle the rest of this lineage uses. CONSEQUENCE THAT MUST NOT BE MISSED: the wordmark carried the site's NAME, and .site-title was hidden precisely because of that. A square badge says nothing, so the title is now VISIBLE again — badge + name + tagline is a lockup, which is what a 6:1 landscape header slot actually wants. Dropping the badge in without un-hiding this would have left the header nameless. */ /* 46 -> 50px by request, 2026-08-06. THE WIDTH/HEIGHT ATTRIBUTES IN default.hbs MOVED WITH IT, BOTH OF THEM. A circular mark's size lives in three places on this site — this rule, the in the {{#if @site.logo}} branch, and the in the {{else}} fallback — and the attributes are what reserve the box before the file lands. Changing only the CSS leaves the browser reserving 46px for a 50px image, which is a layout shift on every page load: exactly the thing those attributes exist to prevent, reintroduced by a cosmetic edit. The FOOTER lockup (.foot-brand-logo) is deliberately left at 46px — it is a separate element and was not part of the request. */ .site-logo { height: 50px; width: 50px; object-fit: contain; border-radius: 50%; flex: none; } .site-brand-text { display: flex; flex-direction: column; } .site-title { /* 19px by request, 2026-08-06 — was 1.2rem. Stated in px rather than rem because the ask was in px; note this makes the brand name the one piece of type on the site that no longer scales with the reader's root font size. At the default 16px root it is a 0.2px change, so nothing moved visually; the difference only appears for a reader who has enlarged their base font, where the title now stays put while the rest of the page grows. */ font-family: var(--font-head); font-size: 19px; font-weight: 700; /* The ACCENT, matching enlighteningquotes.com, which sets its site title in --eq-brown rather than its ink. Amethyst is 7.02:1 on paper — AAA — so the match costs nothing in contrast. */ /* RE-INKED AGAIN for the white bar, 2026-08-06. White was correct on the violet ground and is 1.00:1 on this one. --wqs-ink #022A5C is the badge's own silhouette-and-wordmark navy — 6.13% of the artwork by area, the largest non-white share — and 14.11:1 on paper. NOT --wqs-title #300050, which every other heading on a light ground uses: that is a hand-picked violet with no counterpart in the logo, and the request was for the kit's colours. The two are close in tone (16.92 vs 14.11) so this is a hue decision, not a contrast one. Flagged rather than quietly propagated: the body headings still carry #300050. */ color: var(--wqs-ink); line-height: 1.1; letter-spacing: -.01em; } /* --wqs-ink-soft #4C6F81 — the kit's own secondary ink, 5.39:1 on paper, AA at this size. It is what the palette lists for "meta, bylines", which is exactly the role a tagline plays under the site name. The footer's #C9BAB2 was chosen against the violet and is 1.61:1 here. */ /* 13px by request, 2026-08-06 — was .78rem (12.48px at a 16px root), so this is a half-pixel larger and, like .site-title above, no longer scales with the reader's root font size. It stays --wqs-ink-soft: at 5.39:1 that clears AA, and WCAG has no minimum font size, so 13px is a legibility judgement rather than a compliance one. */ .site-tagline { font-size: 13px; color: var(--wqs-ink-soft); line-height: 1.25; } /* The button now holds a visible "Menu" label under the bars, so it can no longer be a fixed 44x44 square — a hard height would clip the text and a hard width would squeeze it. min-* keeps the WCAG 2.5.8 floor while letting the box grow to whatever the word needs; align-items centres the bars over the label now that the two have different natural widths (previously the bars were the only children and stretched edge to edge). */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: var(--tap); min-height: var(--tap); /* Was rgba(255,255,255,.30) — a white wash, invisible on a white bar. Same shape, same alpha, the ink flipped to the brand navy. */ background: none; border: 1px solid rgba(2,42,92,.30); border-radius: 8px; cursor: pointer; padding: 6px 10px; } /* The bars lost their stretch when align-items became centre, so they now need an explicit width — without one an empty span with no content is 0px wide and the burger disappears entirely. */ .nav-toggle-bar { width: 22px; } .nav-toggle-label { font-family: var(--font-head); font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .03em; color: var(--wqs-ink); margin-top: 2px; } /* The bars ARE the control — WCAG 1.4.11 wants 3:1 of them. On the white bar --wqs-ink is 14.11:1, so the burger is the highest-contrast thing in the header. This is also the only element here that has now been re-inked three times (amethyst -> white -> navy); it is re-measured each time rather than assumed to have survived, because at 2px tall it is the first thing to disappear and the last thing anyone notices. */ .nav-toggle-bar { display: block; height: 2px; background: var(--wqs-ink); border-radius: 2px; } /* {{navigation}} emits its own