/* The client journey's look, shared by every page.
 *
 * Every colour is a variable. These defaults are a quiet grey set: a page
 * that arrives already in somebody else's brand asks to be undone before it
 * can be used. The agency's client palette (Settings, PDF & branding) replaces
 * the base colours at runtime (forms-runtime.js, applyClientTheme); the rules,
 * overlay and panel lines are worked out from them here, so a palette only
 * ever has to name ten colours.
 *
 * The type is part of the layout rather than the brand: Cormorant Garamond
 * for headings and figures, Jost for everything else.
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap");

:root {
  --j-paper: #F2F2F0;
  --j-raised: #F8F8F6;
  --j-sand: #DEDEDA;
  --j-ink: #222222;
  --j-body: #4B4B4B;
  --j-body-email: #3F3F3F;
  --j-muted: #666666;
  --j-accent: #6E6E6E;
  --j-panel: #333333;
  --j-on-panel-accent: #C4C4C4;
  --j-on-panel-text: #F2F2F0;

  --j-rule: color-mix(in srgb, var(--j-ink) 10%, transparent);
  --j-rule-strong: color-mix(in srgb, var(--j-ink) 14%, transparent);
  --j-rule-email: color-mix(in srgb, var(--j-ink) 18%, var(--j-paper));
  --j-panel-rule: color-mix(in srgb, var(--j-on-panel-text) 14%, var(--j-panel));
  --j-panel-rule-2: color-mix(in srgb, var(--j-on-panel-text) 24%, var(--j-panel));
  --j-overlay: linear-gradient(180deg,
    color-mix(in srgb, var(--j-ink) 30%, transparent) 0%,
    color-mix(in srgb, var(--j-ink) 66%, transparent) 100%);

  --j-display: 'Cormorant Garamond', Georgia, serif;
  --j-text: 'Jost', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--j-paper); }
a { color: var(--j-ink); }
img { max-width: 100%; }
/* A merge photo the agency hasn't supplied is hidden, never broken. */
img[hidden] { display: none !important; }
/* A hero whose photo has not arrived yet shows its colour, not a broken icon. */
img[src=""], img:not([src]) { visibility: hidden; }
/* Widely tracked capitals (the wordmark, the website, the regions line) wrap
 * on a phone rather than pushing the page sideways: an agency's own name can be
 * far longer than five letters. */
[style*="letter-spacing:0.42em"], [style*="letter-spacing: 0.42em"],
[style*="letter-spacing:0.36em"], [style*="letter-spacing: 0.36em"],
[style*="letter-spacing:0.3em"], [style*="letter-spacing: 0.3em"] {
  overflow-wrap: anywhere;
  min-width: 0;
}
[style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }