/* Sofia Sans family (Challenge Visual Identity Guidelines, p14). SIL Open Font License: assets/fonts/OFL.txt */
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/sofia-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/sofia-sans-extra-condensed-800-italic-latin.woff2") format("woff2");
}

:root {
  /* Challenge palette (p13) */
  --challenge-red: #EE2024;
  --black: #222222;
  --off-white: #FDFDFD;
  --mid-gray: #545454;

  /* Lockup geometry, measured from the official artwork.
     --bb is the full height of the Bainbridge standard logo.
     Bainbridge "B" cap height = 0.3885 x logo height; Challenge cap height = 0.9917 x its logo height,
     so matching the two letter heights makes the Challenge logo 0.3918 x --bb tall.
     Bainbridge minimum is 10mm high (~38px); Challenge minimum is 96px wide (= 16.4px tall),
     so --bb never drops below 44px. */
  --bb: clamp(44px, 13vw, 112px);
  --challenge-h: calc(var(--bb) * 0.3918);
  /* Clear space: Challenge X = its cap height; Bainbridge = its "e" height (0.283 x logo height). 5% margin. */
  --challenge-clear: calc(var(--challenge-h) * 0.9917 * 1.05);
  --bainbridge-clear: calc(var(--bb) * 0.283 * 1.05);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--black);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vh, 96px) 16px;
  text-align: center;
}

/* ---------- Co-brand lockup ---------- */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(48px, 9vh, 104px);
}

.lockup img { display: block; width: auto; max-width: none; }

.lockup__challenge {
  height: var(--challenge-h);
  margin-right: var(--challenge-clear);
}

.lockup__bainbridge {
  height: var(--bb);
  margin-left: var(--bainbridge-clear);
}

.lockup__rule {
  flex: none;
  width: 2px;
  height: var(--bb);
  background: var(--black);
}

/* ---------- Copy (Challenge type pairings, p15) ---------- */
.headline {
  margin: 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.75rem, 8.5vw, 5.75rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--black);
  text-wrap: balance;
}

/* Challenge red used as an accent, as permitted on p13 */
.headline::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: clamp(24px, 4vh, 36px) auto 0;
  background: var(--challenge-red);
}

.lead {
  margin: clamp(24px, 4vh, 36px) 0 0;
  max-width: 32em;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--mid-gray);
  text-wrap: balance;
}

.contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-style: normal;
}

.contact__link {
  font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.625rem);
  line-height: 1.3;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--challenge-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  padding: 4px 2px;
  border-radius: 2px;
  overflow-wrap: anywhere;
}

.contact__link:hover { color: var(--challenge-red); }

.contact__link:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}