/* pbms.app: the public one-page site. Static, no script; every colour below is a PBMS token copied from
   design-tokens/pbms.tokens.json (generated as app/design-tokens.generated.css). Square corners, flat hairline
   surfaces, Atkinson Hyperlegible Next self-hosted, every text size in rem and nothing under 17px. */

/* The face, as app/experience.css declares it (OFL-1.1, licence in /fonts/OFL.txt). */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 99.33%; ascent-override: 98.67%; descent-override: 32.22%; line-gap-override: 0%; }

:root {
  /* Colours */
  --pbms-primary: #0084d2;        /* color.primary: the short rule under the logo; never behind white text */
  --pbms-primary-dark: #006fad;   /* color.primary-dark: links on light grounds */
  --pbms-primary-darker: #005684; /* color.primary-darker: link hover */
  --pbms-ink: #1f3447;            /* color.ink: all text on light grounds */
  --pbms-muted-small: #4a5868;    /* color.muted-small: secondary text (7.27:1 on white) */
  --pbms-line: #d9e0e1;           /* color.line: hairline rules */
  --pbms-line-strong: #7d8b93;    /* color.line-strong: the ledger's top rule */
  --pbms-pale-blue: #f3f9fc;      /* color.pale-blue: the page canvas */
  --pbms-paper: #e5f0f7;          /* color.paper: the accent band */
  --pbms-emblem-ink: #0a1d34;     /* color.emblem-ink (= area-hero): the hero's navy, the logo's own navy */
  --pbms-emblem-light: #f3f9fc;   /* color.emblem-light: light text on the navy */
  --pbms-white: #ffffff;          /* color.white */
  --pbms-focus: #003b5c;          /* focus.color: focus ring on light grounds */
  --pbms-focus-on-dark: #9fd3f5;  /* focus.on-dark: focus ring on navy; also the hero's secondary text */

  /* Type (the --pbms-type-* scale) */
  --pbms-body: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --pbms-type-body: 1.0625rem;      /* 17px, the floor */
  --pbms-type-subtitle: 1.1875rem;  /* 19px */
  --pbms-type-title: 1.375rem;      /* 22px */
  --pbms-type-heading: 1.625rem;    /* 26px */
  --pbms-type-page-min: 1.875rem;   /* 30px */
  --pbms-type-page-max: 2.625rem;   /* 42px */
  --pbms-type-hero-min: 2.125rem;   /* 34px */
  --pbms-type-hero-max: 3.375rem;   /* 54px */

  /* Space, width, motion */
  --pbms-space-2: 8px;
  --pbms-space-3: 12px;
  --pbms-space-4: 16px;
  --pbms-space-5: 24px;
  --pbms-space-6: 32px;
  --pbms-space-7: 48px;
  --pbms-space-8: 64px;
  --pbms-width-page: 1180px;
  --pbms-hairline: 1px;
  --pbms-motion-base: 180ms;
  --pbms-ease: cubic-bezier(.2, 0, 0, 1);

  --gutter: clamp(20px, 5vw, 48px);
}

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

html {
  background: var(--pbms-pale-blue);
  color: var(--pbms-ink);
  font-family: var(--pbms-body);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--pbms-pale-blue);
  font-size: var(--pbms-type-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

::selection { background: var(--pbms-primary-dark); color: var(--pbms-white); }

h1, h2, h3, p, ol { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

.wrap { width: min(100%, var(--pbms-width-page)); margin-inline: auto; padding-inline: var(--gutter); }

/* Links: blue, underlined, a visible ring on the keyboard. */
a { color: var(--pbms-primary-dark); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--pbms-primary-darker); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--pbms-focus); outline-offset: 2px; text-decoration: none; }

/* The hero: the logo's own navy, edge to edge; the reversed logo, a short blue rule, the statement. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--pbms-emblem-ink); color: var(--pbms-emblem-light); }
.hero-inner { position: relative; z-index: 1; padding-block: clamp(40px, 9vw, 120px) clamp(48px, 9vw, 112px); }

/* The approved navy hero art (the brand pack, 10_Hero_Images, F-817): on a phone it sits behind the whole hero under a navy veil that
   deepens towards the words; from 880px it fills the right of the hero and fades into the navy before the words begin, so every word
   stays on plain navy. The veil is the logo's own navy (rgb 10 29 52). */
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 29, 52, .55) 0%, rgba(10, 29, 52, .82) 38%, rgba(10, 29, 52, .96) 62%, rgb(10, 29, 52) 100%); }
@media (min-width: 880px) {
  .hero-art { inset: 0 0 0 auto; width: 62%; }
  .hero-art img { object-position: 60% 50%; }
  .hero-art::after { background: linear-gradient(90deg, rgb(10, 29, 52) 0%, rgba(10, 29, 52, .72) 30%, rgba(10, 29, 52, .25) 70%, rgba(10, 29, 52, .4) 100%); }
}

/* The PBMS.app lockup (the brand pack, 12_PBMS_App: the icon, PBMS.app, the full name, Powered by FOCS). Its file carries 100 units of
   space round a 2164.64 by 747.21 drawing: pull it back so the icon lines up with the words below. */
.hero-logo { --logo-w: clamp(300px, 46vw, 560px); width: var(--logo-w); margin: calc(var(--logo-w) * -0.0462) 0 calc(var(--logo-w) * -0.0462) calc(var(--logo-w) * -0.0462); }

.hero-title {
  max-width: 20ch;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px);
  font-size: clamp(var(--pbms-type-hero-min), 1.2rem + 3.6vw, var(--pbms-type-hero-max));
  line-height: 1.08;
  letter-spacing: -0.025em;
  position: relative;
}
.hero-title::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 64px;
  height: 3px;
  background: var(--pbms-primary);
  transform-origin: left center;
}
.hero-lede {
  max-width: 38rem;
  margin-top: var(--pbms-space-5);
  color: var(--pbms-focus-on-dark);
  font-size: clamp(var(--pbms-type-subtitle), 1rem + .6vw, var(--pbms-type-title));
  line-height: 1.5;
}

/* The one authored moment: the rule draws in under the logo. The words are there from the start. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title::before { animation: rule-in 640ms var(--pbms-ease) 120ms both; }
  @keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Bands: a grid of a lead column and a body column, the same in both bands so the eye drops straight down. */
.band { padding-block: clamp(48px, 8vw, 104px); }
.split { display: grid; gap: var(--pbms-space-6); }
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
}

.split h2 { font-size: clamp(var(--pbms-type-page-min), 1.3rem + 1.6vw, var(--pbms-type-page-max)); }
.split-lead > p { max-width: 34rem; margin-top: var(--pbms-space-4); font-size: var(--pbms-type-subtitle); }
.split-lead > p + p { margin-top: var(--pbms-space-4); }
.split-body p { max-width: 40rem; font-size: var(--pbms-type-subtitle); line-height: 1.6; }

/* The mission as a ledger: ruled rows, the act on the left, what it means on the right. */
.ledger { list-style: none; padding: 0; border-top: var(--pbms-hairline) solid var(--pbms-line-strong); }
.ledger li { display: grid; gap: var(--pbms-space-2); padding-block: var(--pbms-space-5); border-bottom: var(--pbms-hairline) solid var(--pbms-line); }
.ledger h3 { font-size: var(--pbms-type-title); line-height: 1.25; }
.ledger p { max-width: 36rem; }
@media (min-width: 600px) {
  .ledger li { grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr); column-gap: var(--pbms-space-6); align-items: baseline; }
}
@media (min-width: 880px) {
  .ledger { margin-top: .6rem; }
}

.judgement { background: var(--pbms-paper); border-top: var(--pbms-hairline) solid var(--pbms-line); }
.judgement h2 .line { display: block; }
@media (min-width: 880px) {
  .judgement .split-body { padding-top: .5rem; }
}

/* The footer: the PBMS.app lockup (PBMS.app, the full name, Powered by FOCS in FOCS's own colours, F-760), and under a hairline the operator's
   company line as focshq.com gives it, beside the one discreet link. */
.site-footer { border-top: var(--pbms-hairline) solid var(--pbms-line); background: var(--pbms-white); color: var(--pbms-muted-small); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pbms-space-5) var(--pbms-space-6); padding-block: var(--pbms-space-7) var(--pbms-space-6); }
/* The full-colour lockup: the same pull-back as the hero's, so its icon sits on the text column. FOCS stays a third of PBMS's size inside it (F-676). */
.footer-lockup { --logo-w: clamp(260px, 34vw, 380px); width: var(--logo-w); margin: calc(var(--logo-w) * -0.0462) 0 calc(var(--logo-w) * -0.0462) calc(var(--logo-w) * -0.0462); }
.footer-base { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pbms-space-3) var(--pbms-space-6); padding-block: var(--pbms-space-5) var(--pbms-space-6); border-top: var(--pbms-hairline) solid var(--pbms-line); }
.footer-legal { max-width: 52rem; font-size: var(--pbms-type-body); line-height: 1.55; }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--pbms-space-2);
  margin-inline: calc(var(--pbms-space-2) * -1);
  font-size: var(--pbms-type-body);
  transition: color var(--pbms-motion-base) var(--pbms-ease);
}

/* The not-found page reuses the hero and the footer; its logo links home, so its ring is the on-dark one. */
.hero-home { display: inline-block; }
.hero a:focus-visible { outline-color: var(--pbms-focus-on-dark); outline-offset: 4px; }
.notfound .hero-inner { padding-bottom: clamp(56px, 10vw, 128px); }
.notfound-body { padding-block: clamp(40px, 6vw, 72px); }
.notfound-body p { max-width: 36rem; }
.notfound-body a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--pbms-space-3); }

@media (forced-colors: active) {
  .hero-title::before { background: CanvasText; }
  a:focus-visible { outline-color: Highlight; }
}

@media print {
  .hero { background: none; color: var(--pbms-ink); }
  .hero-logo { content: url("/brand/pbms-app-lockup-powered-by-focs-full-colour.svg"); }
  .hero-art { display: none; }
  .hero-lede { color: var(--pbms-ink); }
  .judgement { background: none; }
}