/* The shell every page shares: color, type, the masthead and the colophon.
   Kept in one file because four pages that are meant to look like one site
   drift apart the moment each carries its own copy of the tokens. Page
   specific layout stays inline in the page it belongs to. */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f3;
  --fg: #16161a;
  --fg-muted: #52525e;
  --rule: #e0e0da;
  --accent: #4a3d8f;
  --shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 18px 48px rgba(20, 20, 30, .14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014;
    --bg-alt: #191920;
    --fg: #ececee;
    --fg-muted: #a8a8b4;
    --rule: #2c2c35;
    --accent: #b3a6ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .55);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .6rem 1rem;
  background: var(--accent);
  color: #fff;
  z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.2vh, 2rem) clamp(1.25rem, 4vw, 3.5rem);
  gap: clamp(.75rem, 2vh, 1.75rem);
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  flex: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  font-size: .92rem;
}

.nav a {
  color: var(--fg-muted);
  text-decoration: none;
  text-underline-offset: 3px;
}

.nav a:hover { color: var(--fg); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  font-weight: 640;
  letter-spacing: -.015em;
  color: inherit;
  text-decoration: none;
}

a.mark:hover { color: var(--accent); }
a.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* The logo is black and blue on transparent, which vanishes on a dark
   ground, so it sits on a white chip in both themes — the same white the
   app icon is composited onto. */
.mark img {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  background: #fff;
  border-radius: 22%;
}

h1 {
  margin: 0 0 clamp(.6rem, 1.6vh, 1rem);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 680;
  text-wrap: balance;
}

.lead {
  margin: 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--fg-muted);
  max-width: 34rem;
  text-wrap: pretty;
}

/* A page that is read rather than scanned. The masthead, the text and the
   colophon share one measure so nothing floats against an edge on a wide
   screen. */
.page.document {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

.prose {
  flex: 1 1 auto;
  width: 100%;
  padding: clamp(1.25rem, 4vh, 2.5rem) 0;
}

.prose h1 { max-width: 20ch; }

.prose > .lead { margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem); }

/* Anything standing outside a section keeps the same measure the rail's
   text column has, or an intro runs the full width while the body does not. */
.prose > p { max-width: 38rem; }

/* Each section is its own heading and its own text. Wide enough, the heading
   moves into a rail beside the text and stays there while that section is
   read: the width gets used for orientation instead of being left empty, and
   the text keeps a measure somebody can actually read. */
.prose section {
  display: grid;
  gap: .35rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  padding-top: clamp(1.6rem, 4vh, 2.6rem);
  border-top: 1px solid var(--rule);
}

@media (min-width: 56rem) {
  .prose section {
    grid-template-columns: minmax(0, 13rem) minmax(0, 38rem);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .prose section h2 {
    position: sticky;
    top: clamp(1rem, 3vh, 2rem);
  }
}

.prose h2 {
  margin: 0;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
  font-weight: 660;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--fg-muted);
}

.prose h3 {
  margin: clamp(1.2rem, 2.5vh, 1.6rem) 0 .4rem;
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -.005em;
}

.prose h3:first-child { margin-top: 0; }

.prose p, .prose li { text-wrap: pretty; }
.prose p { margin: 0 0 .95rem; }
.prose section > div > :last-child { margin-bottom: 0; }

.prose ul {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.prose strong { font-weight: 640; }

.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* The dated line at the top of a policy, and anything else that is a fact
   about the document rather than part of it. */
.stamp {
  margin: 0 0 clamp(1.5rem, 3.5vh, 2.25rem);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--fg-muted);
}

.colophon {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  align-items: baseline;
  padding-top: clamp(.6rem, 1.6vh, 1.1rem);
  border-top: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--fg-muted);
}

.colophon p { margin: 0; }
.colophon a { color: inherit; text-underline-offset: 2px; }
.colophon a:hover { color: var(--fg); }
.colophon a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ko-fi injects its floating button inside an iframe, and the iframe element's
   own background is white — a rectangle painted over whatever the button
   happens to sit on, which here is the colophon. The button inside it is
   already the color it was configured with; only its backdrop is wrong.
   `!important` because the widget sets these inline. */
.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi,
.floating-chat-kofi-popup-iframe,
.floating-chat-kofi-popup-iframe-mobi,
#kofi-widget-overlay,
iframe[src*="ko-fi"] {
  background: transparent !important;
  background-color: transparent !important;
  color-scheme: normal;
}