/* Lead Commander — leadcmdr.com
   Palette from the Lead Commander Brand Kit. Do not invent new colours here. */

:root {
  --navy:         #061223;
  --navy-canvas:  #020B18;
  --blue:         #2E77C2;
  --blue-bright:  #4499E0;
  --blue-deep:    #1F4268;
  --blue-shadow:  #152D49;
  --steel:        #6E7378;
  --tag-dark:     #B9C6D2;
  --paper:        #F4F5F7;
  --rule:         rgba(185, 198, 210, 0.16);
  --measure:      44rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--navy-canvas);
  color: var(--tag-dark);
  font: 400 17px/1.65 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

/* ---- header ---- */

header {
  border-bottom: 1px solid var(--rule);
  /* Flat #020B18 on purpose: the dark lockup bakes that exact colour into its own
     background rect, so a gradient here would show the logo's panel as a visible box. */
  background: var(--navy-canvas);
}
header .wrap { padding-top: 34px; padding-bottom: 34px; }
header img { display: block; width: 260px; max-width: 72%; height: auto; }

/* ---- type ---- */

h1 {
  color: #fff;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
h2 {
  color: #fff;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 42px 0 12px;
}
h3 { color: var(--blue-bright); font-size: 16px; margin: 28px 0 8px; }

.eyebrow {
  color: var(--blue-bright);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.lede { font-size: 19px; color: #D8E2EC; }

p, li { margin: 0 0 14px; }
ul { padding-left: 22px; }
li::marker { color: var(--blue); }

a { color: var(--blue-bright); text-underline-offset: 3px; }
a:hover { color: #fff; }

strong { color: #fff; font-weight: 600; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  color: #D8E2EC;
  background: rgba(46, 119, 194, 0.14);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- blocks ---- */

main .wrap { padding-top: 52px; padding-bottom: 72px; }

.card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  background: rgba(31, 66, 104, 0.22);
  padding: 20px 22px;
  margin: 26px 0;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.updated {
  color: var(--steel);
  font-size: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 44px;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule);
  background: var(--navy);
  color: var(--steel);
  font-size: 14px;
}
footer .wrap { padding-top: 28px; padding-bottom: 40px; }
footer a { color: var(--tag-dark); margin-right: 18px; }
footer .co { margin-top: 12px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  main .wrap { padding-top: 38px; }
}