/* zbam.co.uk, the plain pages (/privacy, /support). Ink, paper, one orange; radius 0; one reading column. */
:root {
  --ink: #0A0A0A;
  --paper: #FAFAF8;
  --accent: #FF4D00;
  --muted: #6B6B6B;
  --soft: rgba(250, 250, 248, .72);
  --hair: rgba(250, 250, 248, .16);
  --display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--paper); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The band, as in the app: the mark goes home, the page's name in the middle. */
.band { position: sticky; top: 0; z-index: 2; height: 56px; padding: 0 6px; display: flex; align-items: center; background: var(--ink); border-bottom: 1px solid var(--hair); }
.band .home { width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper); }
.band .home svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.band .name { position: absolute; left: 50%; transform: translateX(-50%); font: 600 21px/1 var(--display); letter-spacing: .04em; }

main { max-width: 38em; margin: 0 auto; padding: 56px 20px 72px; }
h1 { margin: 0; font: 700 clamp(40px, 9vw, 72px)/1 var(--display); letter-spacing: -.015em; }
.lead { margin: 18px 0 0; font: 600 clamp(19px, 2.6vw, 24px)/1.25 var(--display); text-wrap: balance; }
.date { margin: 14px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
h2 { margin: 48px 0 10px; font: 600 clamp(20px, 2.8vw, 24px)/1.2 var(--display); letter-spacing: .005em; }
p { margin: 0 0 12px; color: var(--soft); }
p strong { color: var(--paper); font-weight: 600; }
ol, ul { margin: 0 0 12px; padding-left: 1.2em; color: var(--soft); }
li { margin: 0 0 6px; }
.contact { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); }
.contact p { font: 600 20px/1.3 var(--display); color: var(--paper); }

footer { max-width: 38em; margin: 0 auto; padding: 0 20px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12px/1.6 var(--mono); letter-spacing: .08em; color: var(--muted); }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--paper); }
footer a[aria-current="page"] { color: var(--paper); }