/* ⚠️ THESE THREE VALUES ARE CONTRAST FIXES. DO NOT REVERT THEM BY EYE.
   Measured against WCAG 2.2 at 4.5:1 for body-size text, on both the page
   background and the card background, because --brass is the link colour on
   every page and .cta:hover puts it on a card.

     light --brass  #846A35 -> #7B6331   was 4.12:1 on --bg
     dark  --muted  #868079 -> #8F8A83   was 3.99:1 on --card
     dark  --brass  #93815B -> #9C8960   was 4.11:1 on --card

   Hue and saturation are unchanged; only lightness moved, by the smallest step
   that clears the threshold. */
/* Ponderanda: the static front.
 *
 * The palette is Paper, taken verbatim from lib/ui/tokens.dart. A visitor who
 * installs the app should recognise the surface they arrived from.
 *
 * ⚠️ NO THIRD-PARTY REQUESTS FROM THIS PAGE, EVER. The serif is self-hosted for
 * the same reason the app bundles it rather than fetching it: a page that
 * promises nothing leaves your device should not open by calling Google. A
 * German court has already held that passing an IP to fonts.gstatic.com without
 * consent is a GDPR problem, and the privacy policy is served from this very
 * stylesheet. No CDN, no analytics, no embeds.
 */

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('fonts/IBMPlexSerif-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* PonderColors.light */
  --bg: #E9E6DF;
  --ink: #262420;
  --muted: #6B665C;
  --line: #D3CEC3;
  --card: #F4F2ED;
  --brass: #7B6331;
  --weighed: #5D5850;
  --empty: #D3CEC3;

  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  /* The body face is a system stack on purpose: shipping a second 200KB TTF to
   * render paragraphs is a page-weight cost with no brand return. The serif
   * carries the identity; the sans just has to be quiet and legible. */
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PonderColors.dark, drawn, not inverted. Brass is dimmed here so it does
     * not glow; see the note in tokens.dart. */
    --bg: #15171A;
    --ink: #CFCAC0;
    --muted: #8F8A83;
    --line: #2A2E34;
    --card: #20242A;
    --brass: #9C8960;
    --weighed: #8A857C;
    --empty: #2A2E34;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

header {
  padding: 2rem 0 0;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  width: fit-content;
}

/* The mark is drawn to its own tight bounds, not the icon's 1024 box, that box
 * is mostly the padding an adaptive icon needs, and beside a word it would read
 * as a large gap with a small mark floating in it. Same reasoning as the
 * Android widget lockup. */
.mark {
  width: 1.75rem;
  height: auto;
  fill: currentColor;
  flex: none;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

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

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: var(--measure);
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 1.75rem 0 0.4rem;
}

p { max-width: var(--measure); margin: 0 0 1rem; }

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
}

.muted { color: var(--muted); }

.small { font-size: 0.9375rem; line-height: 1.6; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul { max-width: var(--measure); padding-left: 1.1rem; }
li { margin-bottom: 0.5rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

/* ---- the ladder signature ----------------------------------------------- */

/* Marks of increasing width resting on a beam, the same balance the icon is
 * built from, and the signature the home-screen widget uses. */
.ladder {
  margin: 2.5rem 0 3rem;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

/* ---- sections ----------------------------------------------------------- */

main { padding: 3.5rem 0 0; }

.points {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 0;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .points { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* The three .point headings are h2, not h3: they are peers of the sections below
   them and h1 followed by h3 is a heading skip, which Lighthouse flags. They keep
   the smaller h3 treatment here so nothing moves visually. */
.point h2 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: inherit;
  margin: 0 0 0.4rem;
}
.point h3 { margin-top: 0; }
.point p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0; }

.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }

/* The one call to action on the site. A shared card is how a stranger arrives,
   and every page they can land on has to offer somewhere to go, the pages used
   to end on "Coming to Android" with no link at all. Brass, not a shouting
   colour: THEME-BRIEF's red-band ban applies here as much as in the app. */
.cta {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--brass);
  border-radius: 8px;
  color: var(--brass);
  font-size: 0.9375rem;
  text-decoration: none;
}
.cta:hover, .cta:focus { background: var(--card); }

/* Previous/next across the archive. It is what makes the day pages a browsable
   set rather than a field of orphans a crawler reaches only from the sitemap. */
.dayflip {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}

footer {
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
footer a { color: var(--muted); }
footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

/* ---- the policy --------------------------------------------------------- */

.policy { padding-top: 2.5rem; }
.policy h2 { margin-top: 2.5rem; }
.policy p, .policy li { max-width: 38rem; }
.policy table {
  border-collapse: collapse;
  width: 100%;
  max-width: 38rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9375rem;
}
.policy th, .policy td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.policy th { font-weight: 500; }

.updated { color: var(--muted); font-size: 0.9375rem; }

.toc { font-size: 0.9375rem; }
.toc ul { list-style: none; padding: 0; }
.toc li { margin-bottom: 0.35rem; }

/* ⚠️ THESE EXIST SO THE CSP CAN STAY STRICT.
   The pages used style="margin:0" and style="margin:0 0 14px" inline. The site's
   Content-Security-Policy is default-src 'self' with no style-src, so the browser
   BLOCKED every one of them: the margins were never applied and each attribute
   logged a CSP violation, which is what Lighthouse reports as "Browser errors were
   logged to the console".
   The alternative was style-src 'unsafe-inline', which weakens the policy for two
   margin rules. Attribute styles cannot be hashed, so there is no middle option. */
.flush { margin: 0; }
.tight { margin: 0 0 14px; }