/* site.css — the shared look for every page.
   ------------------------------------------------------------------
   Before this, the homepage carried its own inline styles and the
   articles carried another set, so the two drifted apart. Everything
   common now lives here: colour, type, the header, the footer, buttons,
   cards and section bands. Page-specific rules stay in their own file.

   Rules of the house:
   · Baloo 2 for anything loud, Inter for anything you actually read.
   · Chunky ink borders with a hard offset shadow. No soft drop shadows.
   · No framework, no build step, no JavaScript required to render.
   ------------------------------------------------------------------ */

:root {
  /* brand */
  --cream:  #FFF4E4;
  --coral:  #FF5A3C;
  --ink:    #1A1614;
  --yellow: #FFD84D;
  --mint:   #DDEFE0;
  --blush:  #FFE0D6;
  --card:   #FFFFFF;
  --muted:  #7A6F63;
  --rule:   #E8DCC8;

  /* spacing scale — keeps vertical rhythm consistent between sections */
  --s-1: 8px;  --s-2: 14px; --s-3: 22px;
  --s-4: 34px; --s-5: 52px; --s-6: 76px;

  --shadow:    4px 5px 0 var(--ink);
  --shadow-sm: 2px 3px 0 var(--ink);
  --shadow-lg: 6px 8px 0 var(--ink);

  --wide: 1040px;   /* full-width section content */
  --read: 680px;    /* comfortable measure for prose */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(32px, 7.5vw, 58px); }
h2 { font-size: clamp(24px, 4.6vw, 36px); }
h3 { font-size: clamp(18px, 2.6vw, 21px); }
.lede { font-size: clamp(16px, 2.3vw, 19px); color: var(--muted); line-height: 1.55; }
.eyebrow {
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--coral);
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.wrap-read { width: 100%; max-width: var(--read); margin: 0 auto; padding: 0 20px; }
.band { padding: var(--s-5) 0; position: relative; }
.band--white { background: var(--card); }
.band--cream { background: var(--cream); }
.band--mint  { background: var(--mint); }
.band--sun   { background: var(--yellow); }
.band--ink   { background: var(--ink); color: var(--cream); }
.band--ink .lede, .band--ink .eyebrow { color: #E9DCCB; }
/* A hard ink rule between bands keeps the sticker-book feel. */
.band + .band { border-top: 3px solid var(--ink); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-2); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 244, 228, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 3px solid var(--ink);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 10px; padding-bottom: 10px;
}
.site-header .logo img { height: 38px; width: auto; }
@media (min-width: 520px) { .site-header .logo img { height: 44px; } }
.site-nav { display: none; gap: 20px; align-items: center; }
.site-nav a {
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 15px; text-decoration: none;
}
.site-nav a:hover { color: var(--coral); }
@media (min-width: 760px) { .site-nav { display: flex; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  background: var(--coral); color: #fff;
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 15px 28px; font-size: 18px;
  transition: transform .09s ease, box-shadow .09s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--sm { padding: 9px 17px; font-size: 14px; border-width: 2.5px; box-shadow: var(--shadow-sm); }
.btn { white-space: nowrap; }        /* never let the label break in two */
.site-header .btn--sm { flex: none; }
.btn--ghost { background: var(--card); color: var(--ink); }
.btn--sun { background: var(--yellow); color: var(--ink); }

/* ---------- cards ---------- */
.card {
  background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: var(--shadow); padding: 20px;
}
.card--sun { background: var(--yellow); }
.card--mint { background: var(--mint); }
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- footer ---------- */
.site-footer {
  /* Stacked like .band is. Pages that paint decorative blobs on body::before
     and ::after would otherwise draw them over the footer, which is not
     positioned and so loses the paint order. */
  position: relative; z-index: 1;
  background: var(--ink); color: #E9DCCB;
  padding: var(--s-5) 0 var(--s-3);
  border-top: 3px solid var(--ink);
}
.site-footer .cols { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 15px; color: #fff; margin-bottom: 8px;
}
/* :not(.btn) matters. A bare `.site-footer a` outranks `.btn--sun` on
   specificity, so it was repainting the footer's "Get the app" button in the
   pale link colour at link size — cream text on yellow, effectively
   unreadable. Links are styled here; buttons keep their own look. */
.site-footer a:not(.btn) { color: #E9DCCB; text-decoration: none; font-size: 14.5px; }
.site-footer a:not(.btn):hover { color: var(--yellow); text-decoration: underline; }
.site-footer ul { list-style: none; display: grid; gap: 7px; }
.site-footer .blurb { font-size: 14px; color: #BCAE9C; max-width: 36ch; }
.site-footer .fine {
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid #39312B; font-size: 13px; color: #9C9084;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}

/* ---------- scroll reveal ----------
   Progressive enhancement: the class is only added by JS once the observer
   is ready, so with JS off or blocked nothing is ever hidden. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.in { transition: none; }
}

/* ---------- small helpers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}