/* Safe Family Internet: the Bold Talks steer. SFI colours, Bold Talks scale and restraint.
   Shared by every page. /assets/ is cached for a year, so bump the ?v= on every <link>
   to this file whenever it changes. Rules and reasons: DESIGN.md in the repo root. */

/* No stranded words: headings and statements wrap evenly */
.hero h1, .band .head, .statement p, .page-sub h2 { text-wrap: balance; }

/* Homepage: the hero sits beside the shield, so it is capped to keep "You'll find out" on one line */
.page-home .hero h1 { font-size: clamp(56px, 8vw, 104px); line-height: .86; letter-spacing: .002em; }
.page-home .band .head { font-size: clamp(46px, 6.6vw, 96px); line-height: .9; letter-spacing: .004em; }

/* Sub pages: no logo column, so the headline runs the full width */
.page-sub .hero h1 { font-size: clamp(60px, 10vw, 140px); line-height: .86; letter-spacing: .002em; max-width: none; }
.page-sub h2 { font-size: clamp(42px, 6vw, 88px); line-height: .9; letter-spacing: .004em; }

/* Statement band: one sentence, full width, one magenta word or phrase, nothing else */
.statement { padding-block: clamp(96px, 13vw, 176px); padding-inline: max(22px, calc((100% - var(--bound, 1080px)) / 2)); }
.statement.ink { background: var(--ink, #16163A); }
.statement.cobalt { background: var(--cobalt, #1B1BCC); }
.statement p { margin: 0; font-family: var(--font-display, 'Bebas Neue', Oswald, Impact, sans-serif);
  font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(50px, 8.2vw, 124px); line-height: .9; letter-spacing: .004em; }
.statement .mag { color: #FF4FB0; }
.statement .lead-in { margin: 0 0 22px; font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }
/* Sub pages use a 28px gutter and a 1024px content width: line the band up with them */
.page-sub .statement { padding-inline: max(28px, calc((100% - 1024px) / 2)); }

/* No max-width on any running text (Colin, 2026-09-13). Paragraphs, leads, lists and captions run
   the full width of their container. Cap containers, never text. !important because several page
   templates set these caps with higher specificity. */
p, li, dd, figcaption, blockquote, .lead, .hero-sub, .narrow, .castle-note, .honest p { max-width: none !important; }

/* A container that is both .wrap and .narrow keeps the page width; only the text cap goes */
.page-sub .wrap.narrow { max-width: 1080px !important; }