/* ============================================================
   Small World — the public site at smallworld.family.

   ⚠️ SEPARATE FROM THE APP ON PURPOSE. This is a different deployable (Cloudflare Pages,
   output directory `site/`) and must not pull in public/styles.css — that file is ~1,850
   lines of app UI and none of it is used here. The tokens below are COPIED from it, not
   imported, and only the handful this page needs.

   ⚠️ IF THE BRAND ACCENT OR SURFACES CHANGE, CHANGE THEM IN BOTH PLACES. The values are
   copied deliberately (two deployables, no build step to share them), which means they can
   drift. The app's styles.css is the source of truth; this file follows it.

   Same rules as the app, because the same people read it:
     • type in rem, never px — it must survive the reader's text-size setting
     • light/dark by system setting, no toggle
     • system font everywhere except the wordmark (Nunito, self-hosted, wordmark only)
     • no inline styles anywhere, so the strict CSP holds
   ============================================================ */

/* ⚠️ Self-hosted. Loading this from Google Fonts would hand every reader's IP to Google,
   which is a values violation for a product whose pitch is privacy. Nunito-OFL.txt ships
   beside it because the licence requires it. */
@font-face {
  font-family: "Nunito";
  src: url("assets/Nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg:        #ffffff;
  --surface:   #f4f4f6;
  --text:      #1c1c1e;
  --text-2:    #5c5c63;
  --text-3:    #6e6e73;
  --separator: rgba(60,60,67,.11);

  /* Ultramarine, the default theme. The site has no theme picker — same call as the
     favicon, which is also fixed ultramarine because it can't read a reader's choice. */
  --accent-text: #2309ff;
  --accent-weak: rgba(10,82,255,.15);

  --measure: 34rem;      /* comfortable line length, in rem so it grows with the text */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #000000;
    --surface:   #1c1c1e;
    --text:      #f5f5f7;
    --text-2:    rgba(235,235,245,.72);
    --text-3:    rgba(235,235,245,.55);
    --separator: rgba(84,84,88,.55);
    /* ⚠️ The accent flips LIGHTER on black — copied from the app's re-tuned dark tokens,
       not lightened by eye. See the long note in public/styles.css before touching it. */
    --accent-text: #688eff;
    --accent-weak: rgba(96,136,255,.13);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "system-ui", "SF Pro Text", "Segoe UI", system-ui,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  /* Generous side padding so nothing touches the edge on a phone. */
  padding: 3.5rem 1.25rem 4rem;
}

/* ---------- the mark ---------- */
.brand { text-align: center; margin-bottom: 3rem; }
.brand-mark {
  display: block;
  width: 5.5rem; height: 5.5rem;      /* rem, so it grows with the reader's text */
  margin: 0 auto 1rem;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
/* ⚠️ Nunito is for the WORDMARK ONLY. Everything else is the system font — that rule is
   what keeps the app legible at large text, and the site follows it.
   ⚠️ ALWAYS LOWERCASE — "small world", never title case, never all caps. This is the app's
   documented brand rule (public/styles.css line ~364) and the site got it wrong first time
   round. The technique matters too: THE SOURCE TEXT STAYS "Small World" so the proper name is
   what gets copied and what a screen reader announces, and text-transform does the visual
   half. The weight and tracking match the app's for the same reason — one wordmark, not two. */
.wordmark {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 2.3rem;
  text-transform: lowercase;
  letter-spacing: -.015em;
  line-height: 1.1;
  display: block;
}
.lead {
  font-size: 1.25rem;
  color: var(--text-2);
  margin: .75rem 0 0;
  text-wrap: balance;
}

/* ---------- sections ---------- */
section { margin-top: 2.75rem; }
h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0 0 .6rem;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }

.points { list-style: none; margin: 0; padding: 0; }
.points li {
  padding: .9rem 0;
  border-top: 1px solid var(--separator);
}
.points li:last-child { border-bottom: 1px solid var(--separator); }
.points b { display: block; font-weight: 650; margin-bottom: .15rem; }
.points span { color: var(--text-2); }

/* A quiet panel for the two things people most want to know: the address, and the cost. */
.panel {
  background: var(--surface);
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 1rem;
}
/* The example address. ⚠️ Sized in em so it tracks the surrounding text rather than
   staying stubbornly small when someone turns their text size up. */
.address {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
  background: var(--accent-weak);
  color: var(--accent-text);
  border-radius: 7px;
  padding: .15em .45em;
  /* A long address must wrap rather than push the page sideways on a phone. */
  overflow-wrap: anywhere;
}

.note {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--separator);
  color: var(--text-3);
  font-size: .95rem;
}
.note a { color: var(--accent-text); }

@media (min-width: 40rem) {
  .wrap { padding-top: 5rem; }
  .brand-mark { width: 6.5rem; height: 6.5rem; }
  .wordmark { font-size: 2.8rem; }
}