/* Page Fehling brand theme.
   Source: PageFehling_BrandBook_V1.pdf (2022, webuildbridges).
   Navy #05223c and cool-white #ebf8fc are the 70% primaries, cobalt-teal
   #18b7bd is the 30% secondary, red #e72a38 is the 10% accent and is used
   only for genuinely rare emphasis, never for UI chrome. */

:root {
  --f-bg:      #ebf8fc;
  --f-card:    #ffffff;
  --f-ink:     #05223c;
  --f-body:    #2c4257;
  /* #64798c only reaches 4.16:1 on the cool-white background. #5f7385 clears
     4.5:1 on both the background and the card. */
  --f-muted:   #5f7385;
  --f-border:  #cfe4ee;

  /* The brand teal #18b7bd is a 2.46:1 colour. It cannot carry white text and
     cannot be small text on white, which rules it out for the buttons, badges
     and step numbers that make up most of this interface. So the text-bearing
     steps are darkened and the signature teal is kept for fills that nothing
     sits on top of. */
  --f-accent:        #0e7a86;  /* 5.06:1 on white, both directions */
  --f-accent-dk:     #05223c;  /* brand navy, for hover and pressed */
  --f-accent-bright: #18b7bd;  /* the signature, decorative use only */
  --f-accent-tint:   #dff4f6;

  /* Result-card slots. Navy plus two steps of teal, mirroring the base theme's
     black-plus-two-blues. The brand red is deliberately not used here: the
     brand book reserves it as a 10% accent for rare emphasis, and four result
     cards on every single profile is not rare. */
  --f-slot-1: #05223c;  /* 16.15:1 */
  --f-slot-2: #0b6a75;  /*  6.30:1 */
  --f-slot-3: #0e7a86;  /*  5.06:1 */

  --f-nav-bg:   rgba(235,248,252,0.92);
  --f-nav-link: rgba(5,34,60,0.62);
  --f-bar-link: rgba(255,255,255,0.72);
  --f-badge-bg: #dff4f6;

  --f-nav-logo-h: 26px;

  /* DIN 2014 (headers, bold + caps) and Hello America (script accent) are
     licensed fonts and are not on Google Fonts. Archivo is the closest free
     DIN-family grotesque; Pacifico matches the monoline retro script of the
     logo. Helvetica is the brand body face and needs no webfont on Apple
     devices, with Arial as the cross-platform fallback. */
  --f-font-body:   'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-font-head:   'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-font-script: 'Pacifico', cursive;
}

/* Pacifico has a much larger apparent size and a deeper descender than Kalam,
   which the base sizes were tuned for, so every element using the script face
   comes down about 12%.

   Screen and print are corrected separately. Both of these rules are a single
   class, same as the base rules they are correcting, so they win purely on
   being loaded last. That means an unscoped .hand here would also beat the
   7.4pt inside styles.css's @media print block and quietly push the one-page
   PDF onto a second page. */
@media screen {
  .hand { font-size: 14px; line-height: 1.6; }
  .type-voice { font-size: 26px; line-height: 1.4; }
  /* .keep keeps its 26px. It is an isolated flourish with no body copy beside
     it to overpower, and it reads correctly against the lede at full size, so
     the 12% reduction the other two need would only make it timid.

     The descenders are the real problem. Pacifico drops the p, f and g well
     below the line box, and .keep underlines itself with a border-bottom
     sitting 2px under that box, so at the base padding the border rules
     straight through all three tails and reads as a strikethrough. 10px is
     the measured clearance: 8px still grazes the g, and past 12px the rule
     detaches and stops reading as an underline. */
  .keep { padding-bottom: 10px; }
}

@media print {
  .hand { font-size: 6.5pt; line-height: 1.35; }
  /* Same collision at print scale. 10px under a 26px face is 0.385em, which
     at the 13pt print size is 5pt. */
  .keep { padding-bottom: 5pt; }
}