/* ============================================================================ site-v11.css — HAO v11 refinement layer ---------------------------------------------------------------------------- Loaded AFTER site-v6.css. It does not replace or restyle the existing visual system: every value below reuses the tokens already defined in site-v6.css (--charcoal, --crimson, --bright, --bone, --line, --muted, --gap, --pad-r, --stave-x, --display, --body). No new font, no new colour family, no framework, no JavaScript. Contents 1. Header: remove the horizontal-overflow band (defect D1, D2) 2. Contrast on dark surfaces (defect D3) 3. Focus visibility 4. Heading outline helpers (defect D4) 5. Editorial typography: measure, wrapping 6. Spacing and rhythm 7. Long-form and list robustness 8. Mobile detail ========================================================================== */ /* --------------------------------------------------------------------------- 1. HEADER — no horizontal overflow --------------------------------------------------------------------------- Measured before this build: the header content needed ~1232px plus up to 144px of padding, while .desk only switched off below 1180px. Windows from roughly 1181px to 1319px (EN), and to 1359px (ES), therefore produced a real horizontal scrollbar on every page carrying the header, and 320px pushed the mobile control off-screen. The rules below (a) let the bar wrap instead of overflowing, (b) tighten horizontal padding and the nav gap so the full desktop nav still fits a 1280px-class laptop, and (c) move the desktop/mobile switch to a width the content can actually satisfy. --------------------------------------------------------------------------- */ .top{flex-wrap:wrap} .brand{min-width:0;flex:0 1 auto} .brand span{overflow:hidden;text-overflow:ellipsis} /* the nav may use spare room, but must never force the bar wider than the view */ .desk{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;row-gap:.45rem} .top-right{flex:0 0 auto;margin-left:auto} .mob{margin-left:auto} @media (max-width:1400px){ .top{padding-left:clamp(16px,2.6vw,40px);padding-right:clamp(16px,2.6vw,40px)} .desk{gap:.95rem} } /* tighten the wordmark only while the full desktop nav is on screen; below that site-v6.css already has its own smaller sizes and they must win */ @media (min-width:1260px) and (max-width:1400px){ .brand{font-size:1.35rem} } /* switch to the compact menu where the header can actually satisfy the layout */ @media (max-width:1259px){ .desk{display:none} .mob{display:block} } @media (min-width:1260px){ .desk{display:flex} .mob{display:none} } /* keep the mobile panel inside the viewport on the narrowest phones */ @media (max-width:420px){ .mob nav{min-width:0;width:min(84vw,240px)} } /* --------------------------------------------------------------------------- 2. CONTRAST ON DARK SURFACES --------------------------------------------------------------------------- Measured before this build (WCAG 2.1 AA; normal text needs 4.5:1): "Begin with Free Study" a.btn.outline #8F0814 on #161619 = 1.90:1 FAIL "Support the Order" a.textlink #8F0814 on #161619 = 1.90:1 FAIL its explanatory line p.fine #55555B on #161619 = 2.44:1 FAIL All three sat on --charcoal (hero / band / libhead / footer). The light equivalents below keep the burgundy family as the accent and reserve the deep burgundy for light surfaces — burgundy is not abandoned, it is used where it is legible. --------------------------------------------------------------------------- */ .hero .btn.outline,.band .btn.outline,.libhead .btn.outline, footer .btn.outline{ color:#FFFFFF; border-color:#B9B9C1; background-color:transparent; } .hero .btn.outline:hover,.band .btn.outline:hover,.libhead .btn.outline:hover, footer .btn.outline:hover{ color:#FFFFFF; border-color:#FFFFFF; background-color:rgba(255,255,255,.12); } .hero .textlink,.band .textlink,.libhead .textlink,.choose .textlink, footer .textlink{ color:#F2A0A7; /* 7.5:1 on --charcoal */ text-decoration-color:#F2A0A7; } .hero .textlink:hover,.band .textlink:hover,.libhead .textlink:hover, footer .textlink:hover{color:#FFD8DB} .hero .fine,.band .fine,.libhead .fine,footer .fine{ color:#C9C9D0; /* 10.8:1 on --charcoal */ } .hero .byline,.band .count,.libhead .count{color:#C9C9D0} /* a filled button is not prose: never underline it on hover */ a.btn:hover,a.btn:focus{text-decoration:none} /* --------------------------------------------------------------------------- 3. FOCUS VISIBILITY --------------------------------------------------------------------------- site-v6.css already sets :focus-visible{outline:3px solid var(--focus)} with a white --focus on the dark bars. This guarantees a visible ring on inline prose links and on the list/footer links. --------------------------------------------------------------------------- */ a.textlink:focus-visible,.more a:focus-visible, .foot-links a:focus-visible,.list a:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:2px; } .hero a.textlink:focus-visible,.band a.textlink:focus-visible, .libhead a.textlink:focus-visible,footer a:focus-visible{ outline-color:#FFFFFF; } /* --------------------------------------------------------------------------- 4. HEADING OUTLINE --------------------------------------------------------------------------- The membership pages previously ran h1 -> h3 with no h2 above the three tier names, and the numbered progression nested an

inside
  1. inside a section already headed by an

    . Both are corrected in the markup; these rules hold the intended visual size after the level change. --------------------------------------------------------------------------- */ .steps h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.2; margin:0 0 .3em; } .steps h3::before{display:none} /* The three membership tier names were raised from

    to

    so the outline runs h1 -> h2. site-v6.css sizes ".tier h3" only, so a bare

    inside ".tier" has no rule of its own and inherits the generic h2{font-size:clamp(1.9rem,4.2vw,3rem)} -- measured at 48px on a 1280px viewport, against 24px before the level change. These declarations reproduce the v10 ".tier h3" rendering (1.5rem body size / 1.2 leading) for both the

    names on the membership pages and the

    names still used on the homepages, so the semantic fix brings no visual drift. ".tier h3" keeps its own rule above all other h3 rules by coming last in the cascade. */ .tier h2,.tier h3{ font-size:1.5rem; line-height:1.2; max-width:none; margin:0 0 .25rem; } /* --------------------------------------------------------------------------- 5. EDITORIAL TYPOGRAPHY --------------------------------------------------------------------------- Long-form historical and theological pages keep a comfortable measure and avoid single-word last lines. text-wrap is progressive: where it is not supported the declaration is simply ignored. --------------------------------------------------------------------------- */ h1,h2,h3{text-wrap:balance} blockquote{text-wrap:balance} p,li,dd{text-wrap:pretty} .page .measure p,.libbody p,.prose p{max-width:62ch} /* --------------------------------------------------------------------------- 6. SPACING AND RHYTHM --------------------------------------------------------------------------- Small corrections only: the tier columns aligned unevenly because the price block and the list had different bottom margins, and the "coming shortly" notice sat hard against the actions. --------------------------------------------------------------------------- */ /* NOTE: no align-items here. The tier columns rely on grid default 'stretch' so that .tier-actions{margin-top:auto} lines the three action rows up across cards. An earlier draft of this layer set align-items:start, which collapsed each card to its own content height and knocked those rows out of alignment. */ /* PRE-EXISTING, measured in v10 as well: the two paid cards' action rows sat 22px apart, because .tier.main carries 'padding:1.1rem 1.2rem 1.4rem' while the plain tiers carry no bottom padding, and .tier-actions{margin-top:auto} pins each row to its own content box. Equalising the bottom padding aligns the two action rows without touching the cards' visual treatment. */ .tier:not(.main){padding-bottom:1.4rem} .tier ul{margin-bottom:1.15rem} .tier .soon{margin-top:1rem} .tier .annual{margin-bottom:.35rem} .tier .for{margin-bottom:.85rem} .cardrow,.sealrow{margin-top:clamp(2.4rem,4vw,3.6rem)} .sealrow>.measure>h2:first-child,.cardrow>.measure>h3:first-child{margin-top:0} /* The welcome-document artwork. This rule previously existed as an identical