/* The shared look of every page except the home page, which carries its own
   copy of the same rules inline. From the F2 design (29 September 2026):
   Bricolage for the brand, buttons and body; Newsreader for headlines;
   Caveat for handwritten labels; orange, ink and paper; a dark floating menu
   bar with the supplied wordmark; the dark footer. Everything served from
   this site, nothing from anywhere else (D54). */

@font-face { font-family: "Bricolage"; src: url(/assets/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(/assets/caveat.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --night: #121220;
  --night-2: #1C1C2E;
  --night-line: rgba(255,255,255,.09);
  --ink: #1A1A2E;
  --paper: #FFFDFA;
  --paper-2: #F3F1EC;
  --orange: #E8521A;
  --orange-ink: #C2410C;
  --on-dark: #F5F4F0;
  --muted-dark: #A9A8B8;
  --muted: #5A5A6E;
  --serif: "Newsreader", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --focus: #C2410C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Bricolage", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(1320px, 100% - 32px); margin: 0 auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 6px; }

/* Buttons: ink on orange, 4.6:1, so they pass AA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--orange); color: var(--ink);
  font: 700 1.0625rem/1.1 "Bricolage", system-ui, sans-serif; text-decoration: none;
  transition: transform .2s var(--ease), background .2s;
}
.btn:hover { background: #F2662F; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { background: var(--night-2); color: var(--on-dark); }

/* The menu bar: floats over the dark band at the top of every page. */
.nav {
  position: sticky; top: 12px; z-index: 50;
  width: min(1100px, 100% - 24px); margin: 12px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 10px 10px 16px; border-radius: 8px;
  background: var(--night); border: 1px solid var(--night-line); color: var(--on-dark);
  --focus: #FF7A45;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.wordmark-img { display: block; height: 34px; width: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; color: var(--muted-dark); font-weight: 500; transition: color .2s; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--on-dark); }
.nav .btn { padding: 11px 18px; font-size: 1rem; }
@media (max-width: 760px) { .nav ul { display: none; } }
@media (max-width: 380px) { .nav .wordmark-img { height: 29px; } }

/* The dark band under the menu bar, with the page's headline in it. */
.page-hero {
  background: var(--night); color: var(--on-dark);
  margin-top: -76px; padding: 150px 0 clamp(56px, 8vw, 96px);
  --focus: #FF7A45;
}
.kicker { margin: 0 0 14px; font-family: var(--hand); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--orange); transform: rotate(-2deg); transform-origin: left; }
.page-hero h1 {
  margin: 0; max-width: 18ch;
  font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; line-height: 1.02;
  font-size: clamp(2.6rem, 6vw, 5rem);
}
.page-hero h1 em { font-style: italic; color: var(--orange); }
.page-hero .lede { margin: 22px 0 0; max-width: 46ch; color: var(--muted-dark); font-size: 1.1875rem; line-height: 1.5; }

/* Long reading pages: privacy, terms, contact. */
.prose { width: min(46rem, 100% - 32px); margin: 0 auto; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.prose h2 {
  margin: 44px 0 10px; font-family: var(--serif); font-weight: 600;
  font-size: 1.75rem; line-height: 1.15; letter-spacing: -.015em; color: var(--ink);
}
.prose p, .prose ul { margin: 0 0 14px; max-width: 40em; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--orange-ink); text-underline-offset: 3px; }

/* The footer, the same on every page. */
footer { background: var(--night); color: var(--muted-dark); padding: 70px 0 40px; --focus: #FF7A45; }
footer .cols { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }
footer .brand { margin-bottom: 12px; }
footer .wordmark-img { height: 30px; }
footer p { margin: 0; }
footer .fhead { color: var(--on-dark); font-weight: 700; margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--on-dark); }
footer .legal { border-top: 1px solid var(--night-line); margin-top: 50px; padding-top: 24px; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Social links: a small drawn mark beside the name. Drawn here, because the
   site loads nothing from anybody else. */
.soc { display: inline-flex; align-items: center; gap: 9px; }
.soc svg { width: 20px; height: 20px; flex: none; }