/* ============================================================ WEAVE FAMILY LIBRARY · family.css · the one CSS contract ------------------------------------------------------------ Public, multilingual, cited psychoeducation for patients, relatives and caregivers. Forked by every book in the shelf. THREE DESIGN TIERS (plan sec.5): Tier 1 Library constants -> :root + base + components. NEVER vary. This is what makes the shelf one library. Tier 2 Series identity -> [data-series="..."] hue presets. One per relationship series (partner, parent, child...). Tier 3 Per-book accent -> a theme token block (a small :root override) that ThemeFactory drops in per book, within its series hue. This is the variety. Components read ONLY from --accent* / --ink / --line tokens, so a new palette flows through the whole book by setting variables. RENDER PATHS (one file serves both): Print / PDF -> .page divs, A4, @page margin:0, fixed 297mm, flex footer (house Puppeteer canon, Loupe-safe). Mobile web -> @media screen relaxes .page to a flowing column, readable at 320px, body >=16px, lh>=1.5. FONTS are linked in each template (Newsreader + Hanken Grotesk for Latin; Noto Serif/Sans Devanagari for the Hindi + Marathi variants in Unit 6). They are NOT @import-ed here: a non-leading @import silently drops the whole font load. HARD RULES honoured: pure-white #FFFFFF base, no left-stripe soft-tint boxes (hierarchy via type, chips, position, hairline rules), no default-Claude elements, zero em-dashes, no diacritics in Hinglish slots, branding on cover/headers/footer only. ============================================================ */ /* ============================================================ TIER 1 - LIBRARY CONSTANTS (never vary) ============================================================ */ :root { /* --- ink, paper, hairlines (constant across the shelf) --- */ --paper: #FFFFFF; /* pure white base, HARD rule */ --ink: #1B1B1A; /* near-black body ink, AA on white */ --ink-strong: #0F0F0E; /* headings */ --muted: #585652; /* secondary text, AA on white */ --faint: #6F6B63; /* eyebrows, captions, page numbers (AA on white ~4.6:1) */ --line: #E7E3DC; /* hairline rules + dividers */ --line-strong: #CFC9BF; /* heavier divider */ --field: #B7B2A8; /* fillable underline / box stroke */ /* --- type families (Latin defaults; Devanagari swapped by [lang]) --- */ --font-head: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* --- type scale (SCREEN px; print overridden below) --- PART H1 (premium): bigger + easily readable. Bigger SERVES the reading contract for an ADHD / distressed reader. v0 values in parentheses were rejected as too small. */ --fs-eyebrow: 13px; /* (was 12) */ --fs-micro: 14px; /* (was 13) */ --fs-small: 16px; /* (was 15) */ --fs-body: 19px; /* (was 16.5) */ --fs-lead: 22px; /* (was 18.5) */ --fs-h3: 24px; /* (was 20) */ --fs-h2: 32px; /* (was 25) */ --fs-h1: 46px; /* (was 36) */ --fs-cover: 60px; /* (was 44) */ --fs-stat: 64px; /* NEW: Leela big-number figure */ --lh-body: 1.65; /* PART H1 (was 1.6) */ --lh-tight: 1.12; /* --- spacing scale (stretched for premium air, PART H1) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --sp-6: 40px; --sp-7: 56px; --sp-8: 72px; --radius: 12px; --radius-sm: 8px; --measure: 64ch; /* max line length for body reading comfort */ /* brand accent MARK: a small flower (replaces the long accent dashes that read as AI). Applied via CSS mask so it tints to --accent per condition. Used by eyebrow / in-short label / pullquote / masthead. */ --flower-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.8' r='3.3'/%3E%3Ccircle cx='16.95' cy='10.4' r='3.3'/%3E%3Ccircle cx='15.05' cy='16.2' r='3.3'/%3E%3Ccircle cx='8.95' cy='16.2' r='3.3'/%3E%3Ccircle cx='7.05' cy='10.4' r='3.3'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); /* --- fallback accents (neutral slate; used only if a render carries no data-condition at all. A real book sets data-condition (Tier 2) and optionally a Tier 3 theme block, which override these) --- */ --accent: #516170; /* neutral slate = standalone fallback */ --accent-strong: #3A4654; /* AA on white */ --accent-soft: #EBEEF1; /* faint tint for chip fills + cover wash */ --accent-contrast:#FFFFFF; /* text on solid accent */ } /* --- PRINT type scale (points, for paper) --- */ @media print { :root { --fs-eyebrow: 8.5pt; --fs-micro: 9pt; --fs-small: 10.5pt; --fs-body: 13pt; /* PART H1: bigger paper body (was 11.5) */ --fs-lead: 15pt; --fs-h3: 15.5pt; --fs-h2: 20pt; --fs-h1: 29pt; --fs-cover: 40pt; --fs-stat: 44pt; --lh-body: 1.5; } } /* ============================================================ TIER 2 - CONDITION IDENTITY (owns the hue; LOCKED 2026-06-15) Set ; the condition owns the accent family. Series owns STRUCTURE only (no hue). A book's Tier 3 theme block (body[data-book], specificity 0,1,1) refines within the hue. Every --accent-strong is AA-verified as text on white #FFFFFF (>=4.5:1). Palette canon: family/_build/DESIGN-SYSTEM.md A2. ============================================================ */ [data-condition="neuro-adhd"] { --accent:#0F766E; --accent-strong:#115E59; --accent-soft:#E3F2EE; --accent-contrast:#FFFFFF; } [data-condition="neuro-autism"] { --accent:#5B7A6E; --accent-strong:#3F5A4F; --accent-soft:#EAF0EC; --accent-contrast:#FFFFFF; } [data-condition="low-mood"] { --accent:#F2B705; --accent-strong:#9A5B17; --accent-soft:#FDF3D6; --accent-contrast:#FFFFFF; } [data-condition="anxiety"] { --accent:#4B7BA8; --accent-strong:#2F5A86; --accent-soft:#E8F0F7; --accent-contrast:#FFFFFF; } [data-condition="bipolar"] { --accent:#5C6B8A; --accent-strong:#3E4C72; --accent-soft:#EBEDF3; --accent-contrast:#FFFFFF; } [data-condition="ocd"] { --accent:#8A8175; --accent-strong:#5F574B; --accent-soft:#F0EEEA; --accent-contrast:#FFFFFF; } [data-condition="psychosis"] { --accent:#C4663B; --accent-strong:#A14A28; --accent-soft:#F7E6DC; --accent-contrast:#FFFFFF; } [data-condition="trauma"] { --accent:#A86B4C; --accent-strong:#7E4A30; --accent-soft:#F2E5DC; --accent-contrast:#FFFFFF; } [data-condition="addiction"] { --accent:#5B8C5A; --accent-strong:#3D6B3C; --accent-soft:#E8F0E6; --accent-contrast:#FFFFFF; } [data-condition="sleep"] { --accent:#6A6BB0; --accent-strong:#474897; --accent-soft:#EAEAF5; --accent-contrast:#FFFFFF; } [data-condition="memory-ageing"] { --accent:#B5651D; --accent-strong:#8A4A12; --accent-soft:#F6E8D6; --accent-contrast:#FFFFFF; } [data-condition="perinatal"] { --accent:#B85C79; --accent-strong:#7E3850; --accent-soft:#F7E7EC; --accent-contrast:#FFFFFF; } /* Perinatal: warm nurturing rose-plum; accent-strong AA-verify before deploy */ [data-condition="eating"] { --accent:#8C6A86; --accent-strong:#614A5E; --accent-soft:#F0EAEF; --accent-contrast:#FFFFFF; } /* eating disorders: calm mauve-plum, accent-strong AA 7.93:1 on white */ [data-condition="couples"] { --accent:#C77E6A; --accent-strong:#9A4F3C; --accent-soft:#F6E7E1; --accent-contrast:#FFFFFF; } /* relating: AA/CVD verify before lock */ [data-condition="family"] { --accent:#7E9B86; --accent-strong:#4C6655; --accent-soft:#E9F0EA; --accent-contrast:#FFFFFF; } /* relating: AA/CVD verify before lock */ [data-condition="standalone"] { --accent:#516170; --accent-strong:#3A4654; --accent-soft:#EBEEF1; --accent-contrast:#FFFFFF; } [data-condition="society"] { --accent:#3E4C84; --accent-strong:#2E3A6B; --accent-soft:#E9EAF4; --accent-contrast:#FFFFFF; } /* Stigma & Society: deep civic indigo-ink (public square, dignity, rights). NOT a clinical condition hue. accent-strong AA 10.86:1 on white; distinct from anxiety/bipolar/sleep blues. */ /* SERIES IDENTITY (owns STRUCTURE, not hue): only the relationship glyph hook. The glyph SVGs land in F1b/F3; this var is their handle. */ [data-series="for-you"] { --series-glyph: "for-you"; } [data-series="partner"] { --series-glyph: "partner"; } [data-series="parent"] { --series-glyph: "parent"; } [data-series="child"] { --series-glyph: "child"; } [data-series="sibling"] { --series-glyph: "sibling"; } [data-series="adult-child"] { --series-glyph: "adult-child"; } [data-series="friend-ally"] { --series-glyph: "friend-ally"; } [data-series="community-carer"] { --series-glyph: "community-carer"; } [data-series="carer"] { --series-glyph: "carer"; } [data-series="stigma-society"] { --series-glyph: "stigma-society"; } /* ============================================================ BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Devanagari swap. Match the ROOT element by its exact lang attribute and let the font custom-properties cascade. Do NOT use :lang(hi) here: it matches every descendant by lang inheritance, so romanised Hindi (html lang="hi-Latn") would swap its descendants to Devanagari even though the root is excluded. html[lang="hi"]=hi-dev, html[lang="mr"]=mr-dev; hi-Latn matches neither. */ html[lang="hi"], html[lang="mr"], [lang="hi-dev"], [lang="mr-dev"], .lang-dev { --font-head: "Noto Serif Devanagari", "Newsreader", serif; --font-body: "Noto Sans Devanagari", system-ui, sans-serif; --font-ui: "Noto Sans Devanagari", system-ui, sans-serif; --lh-body: 1.75; /* PART H1: Devanagari needs more leading */ } /* Kannada swap (kn-dev), promoted from wave 2 on 2026-06-15. Same root-match rule as Devanagari. Kannada has no Latin-script variant in the launch set, so no data-script guard is needed. lang="kn" comes from page_wrapper. */ html[lang="kn"], [lang="kn-dev"], .lang-knda { --font-head: "Noto Serif Kannada", "Newsreader", serif; --font-body: "Noto Sans Kannada", system-ui, sans-serif; --font-ui: "Noto Sans Kannada", system-ui, sans-serif; --lh-body: 1.75; /* Kannada also benefits from more leading */ } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink-strong); line-height: var(--lh-tight); font-weight: 600; margin: 0 0 var(--sp-3); letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } strong { font-weight: 600; color: var(--ink-strong); } a { color: var(--accent-strong); text-underline-offset: 2px; } /* explicit, theme-aware keyboard focus ring (WCAG 2.4.7; do not rely on UA default) */ a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 2px; } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; max-width: var(--measure); } li { margin: 0 0 var(--sp-2); } /* clean accent-dot bullets (no default disc, no AI-slop) */ ul.ticks { list-style: none; padding-left: 0; } ul.ticks > li { position: relative; padding-left: 1.5em; } ul.ticks > li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ============================================================ PAGE MODEL - PRINT (house Puppeteer canon, Loupe-safe) ============================================================ */ @page { size: A4; margin: 0; } .page { position: relative; width: 210mm; height: 297mm; /* HARD: fixed height, never min-height */ overflow: hidden; /* HARD: clip, never spill to a phantom page */ background: var(--paper); display: flex; flex-direction: column; padding: 18mm 17mm 0; margin: 0 auto; box-sizing: border-box; page-break-after: always; break-after: page; } .page:last-child { page-break-after: auto; break-after: auto; } .page__body { flex: 1 1 auto; min-height: 0; } .page__footer { flex: 0 0 auto; /* footer rides the flex bottom, every page */ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 4mm 0 7mm; margin-top: var(--sp-5); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--faint); } .page__footer .num { font-variant-numeric: tabular-nums lining-nums; } /* governance stamp (Part C) - faint generated footer line. Separators are DRAWN dots (no separator characters), so the Hinglish zero-diacritic gate stays clean. Sits between the wordmark and the page number. */ .govstamp { display: inline-flex; flex-wrap: wrap; align-items: baseline; flex: 0 1 auto; justify-content: center; color: var(--faint); font-family: var(--font-ui); font-size: var(--fs-eyebrow); letter-spacing: 0.01em; } .govstamp > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--field); margin: 0 0.55em; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* running header on inner pages (wordmark + book short-title only) */ .runhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--faint); } .runhead__mark { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .runhead__book { font-style: italic; font-family: var(--font-head); color: var(--muted); } /* ============================================================ MASTHEAD / WORDMARK (Tier 1 constant - cover + headers only) ============================================================ */ .masthead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); } .masthead__mark { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--fs-micro); color: var(--ink-strong); } .masthead__sub { font-family: var(--font-ui); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; color: var(--faint); margin-left: auto; /* push the sub to the right; flower sits by the wordmark */ } /* .masthead__flower is the small accent flower (shared .flower-mark rule), replacing the old long .masthead__rule line that read as AI. */ .eyebrow { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 var(--sp-3); } /* the brand flower mark (shared): a small accent-tinted flower */ .flower-mark, .eyebrow::before, .in-short__label::before, .masthead__flower { content: ""; display: inline-block; flex: none; width: 16px; height: 16px; background-color: var(--accent); -webkit-mask: var(--flower-url) center / contain no-repeat; mask: var(--flower-url) center / contain no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* SECTION OPENER (PART H2 premium chapter rhythm): a big faint condition numeral + eyebrow + h2 + hairline. A number, not a colour band, so colour stays intentional. Emitted by short_guide for each numbered heading-section. */ .section-opener { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; margin: 0 0 var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; } .section-opener__num { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h1); line-height: 0.86; letter-spacing: -0.02em; color: var(--accent); opacity: 0.42; font-variant-numeric: lining-nums tabular-nums; align-self: start; } .section-opener__head { min-width: 0; } .section-opener .eyebrow { margin: 0 0 var(--sp-2); } .section-opener h2 { margin: 0; } /* ============================================================ COVER (short-guide / deep-guide first page) ============================================================ */ .cover { justify-content: space-between; padding-bottom: 16mm; } /* meta sits off the bottom edge, not jammed against it */ /* cover body sits at natural height; space-between pins the meta to the page foot. (Default .page__body flex:1 would eat the space and push the meta off the sheet.) */ .cover .page__body { flex: 0 1 auto; } .cover__motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--accent); opacity: 0.10; } .cover__motif svg { width: 100%; height: 100%; display: block; } /* lift content above the motif WITHOUT clobbering the motif's own absolute positioning (a bare .cover > * would, at equal specificity) */ .cover > *:not(.cover__motif) { position: relative; z-index: 1; } /* premium cover hero (PART H, archetype 1): a full-width scene band under the masthead, title in the lower zone. Side-bleed only (the proven .plate pattern), never a top-edge negative-margin bleed. */ .cover__hero { margin: var(--sp-4) -17mm var(--sp-6); } .cover__hero img { display: block; width: 100%; height: 96mm; object-fit: cover; border-radius: 0; } .cover__hero svg { display: block; width: 100%; height: auto; } .cover__hero .imgph { width: 100%; min-height: 96mm; border-radius: 0; border-left: 0; border-right: 0; } @media screen { .cover__hero { margin: var(--sp-4) 0 var(--sp-6); } .cover__hero img { height: auto; max-height: 60vh; border-radius: var(--radius-sm); } .cover__hero .imgph { border-radius: var(--radius); border: 1.5px dashed var(--line-strong); } } .cover__title { font-size: var(--fs-cover); line-height: 1.02; margin: 0 0 var(--sp-4); max-width: 18ch; } .cover__promise { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); line-height: 1.4; color: var(--accent-strong); max-width: 34ch; margin: 0 0 var(--sp-5); } .cover__meta { border-top: 1px solid var(--line); padding-top: var(--sp-5); font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); display: grid; gap: var(--sp-3); max-width: 56ch; } .cover__meta > span { max-width: 100%; } .cover__meta b { color: var(--ink-strong); font-weight: 600; } .cover__series { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); color: var(--muted); margin: 0 0 var(--sp-2); } /* ============================================================ LAYERED-READING BLOCKS (plan sec.9 reading contract) In short -> core -> More, if you want it Encoded by TYPE + HAIRLINE RULES + CHIPS, never a tinted left-stripe box (HARD rule 13). ============================================================ */ /* "In short" - PART H2 premium tinted card. The ONE deliberate, generously padded tint island per section (NOT the banned thin left-stripe box: this is a full, crafted, intentional block). --ink on --accent-soft is 13.9-15.6:1. */ .in-short { background: var(--accent-soft); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-6); max-width: var(--measure); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .in-short__label { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: var(--sp-3); } /* .in-short__label::before flower comes from the shared .flower-mark rule */ .in-short__text { font-family: var(--font-head); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-strong); margin: 0; } /* core - the 60-second read; just well-set body */ .core { margin: 0 0 var(--sp-4); } /* "More, if you want it" - collapsed on web (

), set smaller in print. The PDF render emits

; @media print shrinks it. */ .more { margin: var(--sp-3) 0 var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); max-width: var(--measure); } .more > summary { cursor: pointer; list-style: none; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small); color: var(--accent-strong); display: inline-flex; align-items: center; gap: 0.5em; } .more > summary::-webkit-details-marker { display: none; } .more > summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; } .more[open] > summary::after { transform: rotate(-135deg); } .more__body { padding-top: var(--sp-3); } .more__body > :last-child { margin-bottom: 0; } /* ============================================================ "TRY THIS" interactive prompt (>=1 per chapter, sec.9) PART H2: a premium white ACTION CARD (1px hairline border + radius + accent-dot label). White, not tinted, so it does not compete with the in-short tint island (max one filled tint per section). No left-stripe. ============================================================ */ .tryit { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-6); max-width: var(--measure); } .tryit__label { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: var(--sp-3); } .tryit__label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tryit p { margin: 0; } /* ============================================================ STAT / STATGRID (PART H2 Leela big-number grammar) a huge condition-coloured serif figure + label + faint sub. one focal number, lots of air. NOT a tinted box. ============================================================ */ .stat { margin: var(--sp-6) 0; max-width: var(--measure); break-inside: avoid; page-break-inside: avoid; } .stat__figure { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-stat); line-height: 0.98; letter-spacing: -0.02em; color: var(--accent-strong); font-variant-numeric: lining-nums tabular-nums; display: block; margin: 0 0 var(--sp-2); } .stat__label { font-family: var(--font-head); font-size: var(--fs-lead); line-height: 1.3; color: var(--ink-strong); display: block; max-width: 30ch; margin: 0; } .stat__sub { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--faint); display: block; margin-top: var(--sp-2); } .statgrid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6) var(--sp-7); margin: var(--sp-6) 0; max-width: var(--measure); break-inside: avoid; page-break-inside: avoid; } .statgrid .stat { margin: 0; } @media print { .statgrid { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 601px) { .statgrid { grid-template-columns: 1fr 1fr; } } /* ============================================================ CALLOUT card (PART H2: Remember / In your corner) a filled --accent-soft card + line icon + title. Used sparingly (a section's one filled tint is normally the in-short). ============================================================ */ .callout { background: var(--accent-soft); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-6); max-width: var(--measure); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .callout__title { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 0.55em; margin: 0 0 var(--sp-3); } .callout__icon { width: 18px; height: 18px; flex: none; stroke: var(--accent-strong); } .callout p { margin: 0; } .callout p + p { margin-top: var(--sp-3); } /* ============================================================ HIGHLIGHT (PART H2 key-sentence marker: a soft --accent-soft marker behind ONE key phrase per section; never decoration) ============================================================ */ .highlight { background: var(--accent-soft); color: var(--ink-strong); padding: 0.06em 0.28em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ============================================================ KEY VISUAL (one per section - diagram / flow / icon) ============================================================ */ .keyvisual { margin: var(--sp-4) 0; break-inside: avoid; page-break-inside: avoid; text-align: center; } .keyvisual svg { max-width: 100%; height: auto; } /* raster scenes (ChatGPT images): rounded, full-width, never overflow */ .keyvisual img, .feature__media img, .plate img, .infographic img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); } .keyvisual__cap { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--faint); margin-top: var(--sp-2); } /* image placeholder: shown when a scene asset is not yet placed, so the proof renders the slot (dashed frame + caption + label). Replaced by the real once Wilfred's ChatGPT scene is dropped in visuals/. */ .imgph { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--accent-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-2); padding: var(--sp-6); min-height: 58mm; } .imgph__label { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); } .imgph__cap { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); max-width: 42ch; margin: 0; } /* ============================================================ ARCHETYPE COMPONENTS (F1b) - feature, plate, pull-quote, margin note, card grid, infographic. Hierarchy by type / position / hairline, never a tinted box (HARD rule). ============================================================ */ /* pull-quote (one per spread; serif, never beside its source line) */ .pullquote { margin: var(--sp-5) 0; padding: 0; border: 0; max-width: var(--measure); break-inside: avoid; page-break-inside: avoid; } .pullquote::before { content: ""; display: block; width: 22px; height: 22px; background-color: var(--accent); margin-bottom: var(--sp-3); -webkit-mask: var(--flower-url) center / contain no-repeat; mask: var(--flower-url) center / contain no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .pullquote p { font-family: var(--font-head); font-style: italic; font-size: calc(var(--fs-lead) * 1.2); line-height: 1.3; color: var(--accent-strong); margin: 0; max-width: 28ch; } .pullquote__cite { display: block; margin-top: var(--sp-3); font-family: var(--font-ui); font-style: normal; font-size: var(--fs-micro); letter-spacing: 0.04em; color: var(--faint); } /* margin note (annotated-margin signature; micro, faint, hairline-led) */ .marginnote { font-family: var(--font-ui); font-size: var(--fs-micro); line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-2); margin: 0 0 var(--sp-4); } .marginnote sup.fn { color: var(--accent-strong); } @media print { /* float into the wide outer margin so body text wraps beside it */ .marginnote { float: right; clear: right; width: 34%; margin: 0 0 var(--sp-3) var(--sp-5); } } /* magazine feature (image + lead text; image 7-col / text 5-col on print) */ .feature { margin: var(--sp-4) 0 var(--sp-5); break-inside: avoid; page-break-inside: avoid; } .feature__media { margin: 0 0 var(--sp-3); } .feature__media .keyvisual { margin: 0; } .feature__media svg, .feature__media img { max-width: 100%; height: auto; } .feature__body > :last-child { margin-bottom: 0; } @media print { .feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-5); align-items: start; } .feature__media { margin: 0; } .feature__media .keyvisual svg, .feature__media .keyvisual img { max-height: 92mm; } } /* full-bleed emotional plate (one image + one line; max 1 per resource) */ .plate { margin: var(--sp-5) 0; text-align: center; break-inside: avoid; page-break-inside: avoid; } .plate .keyvisual { margin: 0 0 var(--sp-3); } .plate svg, .plate img { max-width: 100%; height: auto; } .plate__line { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-strong); max-width: 36ch; margin: var(--sp-3) auto 0; } @media print { .plate { margin: var(--sp-5) -17mm; } /* bleed sideways to the page edge */ .plate .keyvisual svg, .plate .keyvisual img { max-height: 120mm; } .plate__line { padding: 0 17mm; } } /* card grid (2-col calm cards, never 3; a neutral hairline border is fine here) */ .cardgrid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5); max-width: var(--measure); } .cardgrid .card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); break-inside: avoid; page-break-inside: avoid; } .cardgrid .card__title { font-family: var(--font-head); font-size: var(--fs-h3); color: var(--ink-strong); margin: 0 0 var(--sp-2); } .cardgrid .card__text { margin: 0; font-size: var(--fs-small); } @media print { .cardgrid { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 601px) { .cardgrid { grid-template-columns: 1fr 1fr; } } /* infographic plate (label-free image + up to 4 callouts) */ .infographic { margin: var(--sp-4) 0 var(--sp-5); break-inside: avoid; page-break-inside: avoid; } .infographic .keyvisual { margin: 0 0 var(--sp-4); } .infographic svg, .infographic img { max-width: 100%; height: auto; } .callouts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); } .callouts .callout { font-size: var(--fs-small); line-height: 1.45; color: var(--ink); border-top: 1.5px solid var(--line-strong); padding-top: var(--sp-2); margin: 0; } /* higher specificity than the generic ".keyvisual svg{max-height:30mm}" print cap below, so a component visual keeps its full height regardless of order */ @media print { .infographic .keyvisual svg, .infographic .keyvisual img { max-height: 116mm; } } @media screen and (max-width: 600px) { .callouts { grid-template-columns: 1fr; } } /* ============================================================ EVIDENCE-STRENGTH CHIPS (chips are allowed; tiny accent fill) ============================================================ */ .evid { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2em 0.7em; border-radius: 999px; white-space: nowrap; } .evid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; } .evid--strong { color: #1F5135; background: #E4F0E7; } .evid--strong::before { background: #2E7D4F; } .evid--growing { color: #6B4A12; background: #F4ECDD; } .evid--growing::before { background: #B7842B; } .evid--expert { color: #3A4256; background: #E9ECF3; } .evid--expert::before { background: #5B6680; } /* ============================================================ "WHERE THIS COMES FROM" sources box (Tier 1 constant) white, hairline-divided rows, small-caps label. No tint box. ============================================================ */ .sources { margin: var(--sp-5) 0 var(--sp-4); border-top: 1.5px solid var(--line-strong); padding-top: var(--sp-3); max-width: var(--measure); break-inside: avoid; page-break-inside: avoid; } .sources__label { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); } /* traditional reference list: hanging indent, no strength chip, clickable DOI/URL (plain ink on paper via the print rule, accent on screen) */ .ref { font-size: var(--fs-small); line-height: 1.5; color: var(--ink); padding-left: 1.5em; text-indent: -1.5em; /* hanging indent */ margin: 0 0 var(--sp-2); overflow-wrap: anywhere; word-wrap: break-word; /* long DOIs/URLs wrap, never clip */ } .ref:last-of-type { margin-bottom: 0; } .ref__link { font-family: var(--font-ui); font-size: var(--fs-micro); } /* "Further reading" - plain reader-facing links, quiet accent-dot list */ .further { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dotted var(--line-strong); } .further__label { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-2); } .further__list { list-style: none; padding-left: 0; margin: 0; } .further__list > li { position: relative; padding-left: 1.5em; margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.45; } .further__list > li:last-child { margin-bottom: 0; } .further__list > li::before { content: ""; position: absolute; left: 0.15em; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* optional trust line (Niharika byline only; rendered after sign-off) */ .sources__trust { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--muted); margin: var(--sp-3) 0 0; } .sources__note { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--muted); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dotted var(--line-strong); } /* footnote markers in body */ sup.fn { font-size: 0.72em; font-weight: 700; color: var(--accent-strong); padding-left: 1px; } /* ============================================================ CRISIS LINK (every page links the red-flag card, sec.9) ============================================================ */ .crisis-link { display: flex; align-items: center; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-4); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); } .crisis-link__dot { width: 11px; height: 11px; border-radius: 50%; background: #C0392B; flex: none; } .crisis-link b { color: var(--ink-strong); } /* the crisis link is now a real ; keep it a calm callout (muted, not accent-coloured) but signal it is clickable by underlining the call to action */ a.crisis-link { color: var(--muted); text-decoration: none; } a.crisis-link b { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ SELF-CHECK list ("Is this me?" card) - plain checkboxes ============================================================ */ .selfcheck { list-style: none; padding: 0; margin: 0 0 var(--sp-5); max-width: var(--measure); } .selfcheck > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); } .selfcheck__box { width: 18px; height: 18px; border: 1.5px solid var(--field); border-radius: 4px; margin-top: 2px; flex: none; } /* ============================================================ FILLABLE FIELDS (toolkit / worksheet) ============================================================ */ .field { margin: 0 0 var(--sp-4); break-inside: avoid; page-break-inside: avoid; } .field__label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small); color: var(--ink-strong); margin-bottom: var(--sp-2); } .field__hint { font-weight: 400; color: var(--faint); font-size: var(--fs-micro); } .field__line { border-bottom: 1.5px solid var(--field); height: var(--sp-6); } .field__line + .field__line { margin-top: var(--sp-2); } .field__box { border: 1.5px solid var(--field); border-radius: var(--radius-sm); min-height: 22mm; } .field__box--tall { min-height: 40mm; } /* fillable grid (e.g. weekly tracker) - table-layout fixed, Loupe-safe */ table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 var(--sp-5); break-inside: avoid; page-break-inside: avoid; font-size: var(--fs-small); } table.grid thead { display: table-header-group; } /* repeat header if a grid spans pages */ table.grid th, table.grid td { border: 1px solid var(--line-strong); padding: var(--sp-2) var(--sp-2); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-wrap: break-word; /* wrap, never clip (Loupe lesson) */ } table.grid th { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.04em; color: var(--ink-strong); background: var(--accent-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; } table.grid td.fillrow { height: 10mm; } /* keep a parenthetical scale label (e.g. "(1 to 5)") on one line so it wraps whole onto the next row under its word, instead of splitting mid-bracket */ .nw { white-space: nowrap; } /* ============================================================ FILLABLE LADDER (toolkit: green / amber / red early-warning plan) A write-it-yourself fork of the booklet's warning ladder. Each rung is a WHITE hairline card carrying a small coloured signal (dot + level + printed cue) and labelled fill prompts. The colour is a signal, NEVER a tinted left-stripe box (HARD rule 13). Fill lines reuse .field__line. ============================================================ */ .ladder { margin: 0 0 var(--sp-4); max-width: var(--measure); } .ladder__rung { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-2); break-inside: avoid; page-break-inside: avoid; } .ladder__rung:last-child { margin-bottom: 0; } .ladder__sig { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); } .ladder__dot { width: 13px; height: 13px; border-radius: 50%; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ladder__level { font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; } .ladder__cue { font-family: var(--font-head); font-style: italic; font-size: var(--fs-small); color: var(--muted); margin-left: 0.1em; } /* signal colours: green/amber/red echo the evidence chips + crisis dot. Text colours are AA on white (>=4.5:1). */ .ladder__rung--green .ladder__dot { background: #2E7D4F; } .ladder__rung--green .ladder__level { color: #1F5135; } .ladder__rung--amber .ladder__dot { background: #B7842B; } .ladder__rung--amber .ladder__level { color: #6B4A12; } .ladder__rung--red .ladder__dot { background: #C0392B; } .ladder__rung--red .ladder__level { color: #8A2A1E; } .ladder__fills { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-5); } .ladder__filllabel { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-micro); color: var(--ink-strong); margin-bottom: var(--sp-2); } .ladder__fill .field__line { height: 24px; } .ladder__fill .field__line + .field__line { margin-top: var(--sp-2); } @media print { .ladder__fills { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 601px) { .ladder__fills { grid-template-columns: 1fr 1fr; } } /* ============================================================ DECISION-AID weigh-up (plan sec.4; Ottawa / IPDAS neutral) ============================================================ */ .weigh { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 var(--sp-5); break-inside: avoid; page-break-inside: avoid; } .weigh thead { display: table-header-group; } .weigh th, .weigh td { border-bottom: 1px solid var(--line-strong); padding: var(--sp-3) var(--sp-3); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-wrap: break-word; font-size: var(--fs-small); line-height: 1.45; } .weigh thead th { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-strong); border-bottom: 2px solid var(--accent); } .weigh th[scope="row"] { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body); color: var(--ink-strong); width: 30%; } .weigh .good { color: #1F5135; } .weigh .cost { color: #7A3322; } .questions { border-top: 1.5px solid var(--line-strong); padding-top: var(--sp-3); break-inside: avoid; page-break-inside: avoid; } .questions ol { padding-left: 1.3em; } .questions li { font-size: var(--fs-body); } /* ============================================================ CRISIS / RED-FLAG CARD (shared component, high-contrast) solid accent band = a deliberate header, NOT a soft-tint left-stripe box. print-color-adjust:exact so it prints. ============================================================ */ .crisiscard.page { padding-top: 0; } /* band sits at the top edge; no negative-margin bleed (it collapses and clips the kicker) */ .crisiscard .page__body { padding-top: 0; } .crisis-band { background: #B0271A; color: #FFFFFF; -webkit-print-color-adjust: exact; print-color-adjust: exact; margin: 0 -17mm var(--sp-4); /* page has no top pad here, so the band reaches the top edge and only bleeds sideways */ padding: 12mm 17mm var(--sp-4); } .crisis-band__kicker { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 var(--sp-2); } .crisis-band__title { color: #FFFFFF; font-size: var(--fs-h1); margin: 0; max-width: 22ch; } .crisis-band__lead { color: rgba(255,255,255,0.92); font-size: var(--fs-lead); max-width: 40ch; margin: var(--sp-3) 0 0; } .redflags { list-style: none; padding: 0; margin: 0 0 var(--sp-6); } .redflags > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); } .redflags__mark { color: #B0271A; font-weight: 800; } .steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--sp-6); } .steps > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; } .steps > li::before { counter-increment: step; content: counter(step); font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); -webkit-print-color-adjust: exact; print-color-adjust: exact; display: grid; place-items: center; flex: none; } .helplines { border-top: 1.5px solid var(--line-strong); padding-top: var(--sp-4); } .helplines__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); } .helplines__row:last-child { border-bottom: 0; } .helplines__name { font-family: var(--font-ui); font-weight: 600; color: var(--ink-strong); } .helplines__name small { display: block; font-weight: 400; color: var(--faint); font-size: var(--fs-micro); } .helplines__num { font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-h3); font-variant-numeric: tabular-nums lining-nums; color: var(--accent-strong); white-space: nowrap; } /* The crisis card carries a lot in one sheet (band + flags + steps + 5 helplines + footer). Tighten the rhythm so it all fits above the footer without collision. Scoped to .crisiscard so the multi-page guides keep their generous spacing. */ .crisiscard .crisis-band__lead { margin-top: var(--sp-2); } .crisiscard .section { margin-bottom: var(--sp-3); } .crisiscard .redflags > li, .crisiscard .steps > li, .crisiscard .helplines__row { padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .crisiscard .helplines { padding-top: var(--sp-3); } /* The non-English scripts run longer than English on the single-sheet crisis card. Tighten the row rhythm for every language, then scale the type down per language so all the safety lines fit one page without cutting any helpline, red flag or step. Scoped to .crisiscard and to @media print, so the web reader view and the multi-page guides are untouched. Lang hooks per the type block above: hi=hi-dev, mr=mr-dev, hi-Latn=hi-roman, kn=kn-dev. */ @media print { .crisiscard .redflags > li, .crisiscard .steps > li, .crisiscard .helplines__row { padding-top: var(--sp-1); padding-bottom: var(--sp-1); } .crisiscard .redflags, .crisiscard .steps { margin-bottom: var(--sp-3); } html[lang="hi"] .crisiscard, html[lang="mr"] .crisiscard, html[lang="hi-Latn"] .crisiscard { --fs-body: 11.5pt; --fs-lead: 13pt; --fs-h1: 25pt; --fs-h3: 14pt; --lh-body: 1.4; } html[lang="kn"] .crisiscard { --fs-body: 10.5pt; --fs-lead: 12pt; --fs-h1: 23pt; --fs-h3: 13pt; --lh-body: 1.34; } } /* ============================================================ SECTION FLOW / BREAK CONTROL (print) ============================================================ */ .section { margin: 0 0 var(--sp-5); } .section + .section { padding-top: var(--sp-2); } h2 { break-after: avoid; page-break-after: avoid; } h3, h4 { break-after: avoid; page-break-after: avoid; } figure, .keyvisual, table, .tryit, .in-short, .stat, .statgrid, .callout, .section-opener, .imgph { break-inside: avoid; page-break-inside: avoid; } /* ============================================================ SCREEN / MOBILE WEB (one file serves both) Relax the fixed A4 page into a flowing, readable column. Readable at 320px, left-aligned, >=16px body, lh>=1.6. ============================================================ */ @media screen { body { background: #FFFFFF; padding: 0; } .reader { max-width: 720px; margin: 0 auto; padding: 0 20px; } .page { width: auto; height: auto; min-height: 0; overflow: visible; padding: 40px 0 0; margin: 0; page-break-after: auto; break-after: auto; border: 0; } .page + .page { border-top: 1px solid var(--line); } .page__body { flex: 0 1 auto; } .page__footer { border-top: 1px solid var(--line); margin-top: var(--sp-6); } /* crisis band stays edge-to-edge inside the reader column */ .crisis-band { margin: 0 0 var(--sp-6); padding: 28px 22px; border-radius: var(--radius); } .text-left { text-align: left; } } @media screen and (max-width: 600px) { :root { --fs-h1: 36px; --fs-cover: 42px; --fs-h2: 27px; --fs-lead: 20px; --fs-body: 18px; /* PART H1 mobile floor: body >=18px */ --fs-stat: 52px; } .reader { padding: 0 16px; } .weigh, table.grid { font-size: 15px; } .helplines__row { grid-template-columns: 1fr; gap: var(--sp-1); } /* section-opener: numeral above the title on narrow screens */ .section-opener { grid-template-columns: 1fr; gap: var(--sp-2); } .section-opener__num { font-size: 40px; } } /* never justify (reading contract); never auto-hyphenate body */ p, li, .core, .in-short__text { text-align: left; } /* ============================================================ MOTION: zero on patient printables (HARD rule 17) ============================================================ */ @media (prefers-reduced-motion: reduce) { .more > summary::after { transition: none; } } /* ============================================================ PRINT polish ============================================================ */ @media print { .screen-only { display: none !important; } .keyvisual svg { max-height: 30mm; } /* keep diagrams from crowding a dense page */ /* the PDF render opens

; show its body slightly smaller */ .more[open] > summary::after, .more > summary { /* summary still useful as a label in print */ } .more__body { font-size: 0.94em; } a { color: var(--ink); text-decoration: none; } /* links are plain on paper */ .crisis-link a, .sources a { color: var(--ink); } } .print-only { display: none; } @media print { .print-only { display: revert; } }