/* system.css: copied from Zaha-UI, branch system-draft-1, src/styles/system.css (Brand's design system, draft 2.1, 16 Oct 2026).
   Never edit here: change it in Zaha-UI and copy it again. The site loads it on rebuilt pages only (today the home page). */
/* system — the Zaha design system, draft 2 (16 Oct 2026): Function Health's grammar is the base (founder, 15 Oct:
   "Please use this as our design inspiration"; brand guide §0). Draft 1 (15 Oct, night) was Wispr-led.
   Source: 5-Brand/references/system-draft.html, built to the measured references in 5-Brand/references/index.html
   (Function Health's results card and emails, Wispr Flow's emails, Aesop, 35 reference posts), and brand guide §4.9.
   Everything is namespaced --z-* / .z-* so the ported site tokens in base.css are untouched.
   Light and dark follow the reader's setting (brand guide §2.7); .z-light / .z-dark force one, for previews.
   Rules: six text styles at most per surface; one italic phrase; one action; terra once. */

:root {
  /* ground and ink: softer, as Function's emails (the founder, 16 Oct: "i like how they are softer where the blacks feel
     like greys"): heads #3C3D42 (10.2:1 on cream), body #616867 (5.3:1; 4.5:1 on the deepest cream). Dark set: guide §2.7 */
  --z-bg: #FBF7F2; --z-bg-deep: #EFE4D6; --z-surface: #FFFFFF; --z-card: #FFFDF9;
  --z-ink: #3C3D42; --z-ink-2: #616867; --z-ink-3: #616867; --z-line: #E5DDD3;
  --z-terra: #C4704B; --z-terra-ink: #9A4F31; --z-bg-warm: #F5EDE3;
  --z-action: #A85E3E; --z-action-hover: #9A4F31; --z-on-action: #FBF7F2;   /* the terra pill (guide §4.4) */
  --z-hair: #E5DDD3;                                                         /* hairline grids (guide §4.1) */
  --z-card-shadow: 0 18px 50px rgba(60, 40, 20, 0.16);

  /* type: eight styles in the kit, at most six on any one surface */
  --z-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --z-sans: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --z-t-figure: 300 clamp(76px, 24vw, 100px)/1 var(--z-serif);   /* the one number: Function's card, ~100px */
  --z-t-display: 300 44px/46px var(--z-serif);                    /* headline: Function 48 on 48 at 390px, in light serif */
  --z-t-display-letter: 300 30px/34px 'Source Serif 4', ui-serif, Georgia, serif;   /* letters: Function's email headline, ~1.7x body */
  --z-t-heading: 300 26px/30px var(--z-serif);                    /* section head: Function 26 to 27px, light serif */
  --z-t-italic: italic 300 24px/34px var(--z-serif);              /* the line in her terms: Function, 28 on 41 */
  --z-t-strong: 600 16px/24px var(--z-sans);                      /* names, the action: Function 16 at 600 */
  --z-t-body: 400 16px/24px var(--z-sans);                        /* reading: Wispr, 16 on 24 */
  --z-t-label: 600 15px/20px var(--z-sans);                       /* a label or field name */
  --z-t-small: 400 13px/18px var(--z-sans);                       /* date, source, footer, the 988 line */

  /* space and shape (Wispr's rhythm: rows 40 above / 30 below, breaks 60, heading to body 16) */
  --z-margin: 30px;
  --z-gap-1: 8px; --z-gap-2: 16px; --z-gap-3: 24px; --z-gap-4: 40px; --z-gap-5: 60px;
  --z-r-card: 16px; --z-r-panel: 24px; --z-r-action: 999px;
  --z-action-h: 48px;              /* Function's pills: 48 to 50px */

  /* motion: Function's 0.15 to 0.26s, ease; one moment plays once; loops get a pause control (guide §4.3) */
  --z-dur-1: 160ms; --z-dur-2: 220ms; --z-dur-moment: 900ms;
  --z-ease: ease;
}

@media (prefers-color-scheme: dark) {
  :root:not(.z-light) {
    --z-bg: #161514; --z-bg-deep: #2B2825; --z-surface: #1F1D1B; --z-card: #1F1D1B;
    --z-ink: #FBF7F2; --z-ink-2: #D4CBC1; --z-ink-3: #A89F95; --z-line: #3A3632;
    --z-terra: #E89571; --z-terra-ink: #E89571; --z-action: #E89571; --z-action-hover: #F0A586; --z-on-action: #1A1A1A; --z-bg-warm: #1F1D1B; --z-hair: #3A3632;
    --z-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  }
}
.z-dark {
  --z-bg: #161514; --z-bg-deep: #2B2825; --z-surface: #1F1D1B; --z-card: #1F1D1B;
  --z-ink: #FBF7F2; --z-ink-2: #D4CBC1; --z-ink-3: #A89F95; --z-line: #3A3632;
  --z-terra: #E89571; --z-terra-ink: #E89571; --z-action: #E89571; --z-action-hover: #F0A586; --z-on-action: #1A1A1A; --z-bg-warm: #1F1D1B; --z-hair: #3A3632;
  --z-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.z-light {
  --z-bg: #FBF7F2; --z-bg-deep: #EFE4D6; --z-surface: #FFFFFF; --z-card: #FFFDF9;
  --z-ink: #3C3D42; --z-ink-2: #616867; --z-ink-3: #616867; --z-line: #E5DDD3;
  --z-terra: #C4704B; --z-terra-ink: #9A4F31; --z-action: #A85E3E; --z-action-hover: #9A4F31; --z-on-action: #FBF7F2; --z-bg-warm: #F5EDE3; --z-hair: #E5DDD3;
  --z-card-shadow: 0 18px 50px rgba(60, 40, 20, 0.16);
}

/* ---- the styles ---- */
.z-figure { font: var(--z-t-figure); letter-spacing: -0.03em; font-variant-numeric: lining-nums; color: var(--z-ink); margin: 0; white-space: nowrap; }
.z-figure .z-arrow { font-size: 0.5em; color: var(--z-ink-3); margin: 0 0.16em; vertical-align: 0.22em; }
.z-display { font: var(--z-t-display); letter-spacing: -0.015em; color: var(--z-ink); margin: 0; text-wrap: balance; }
.z-display em { font-style: italic; }
.z-dot { color: var(--z-terra); }
.z-heading { font: var(--z-t-heading); color: var(--z-ink); margin: 0; text-wrap: balance; }
.z-italic { font: var(--z-t-italic); color: var(--z-ink-2); margin: 0; text-wrap: balance; }
.z-strong { font: var(--z-t-strong); color: var(--z-ink); margin: 0; }
.z-body { font: var(--z-t-body); color: var(--z-ink); margin: 0; text-wrap: pretty; }
.z-body.z-quiet { color: var(--z-ink-2); }
.z-label { font: var(--z-t-label); color: var(--z-ink-2); margin: 0; }
.z-small { font: var(--z-t-small); color: var(--z-ink-3); margin: 0; }
.z-wordmark { font: 500 22px/1 var(--z-serif); letter-spacing: -0.01em; color: var(--z-ink); text-decoration: none; }
.z-wordmark::after { content: "."; color: var(--z-terra); }

/* ---- the action: Function's pill (48px, 999px, 16px at 600), terra; one primary per surface ---- */
.z-action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--z-action-h); padding: 0 25px;
  border: 1px solid var(--z-action); border-radius: var(--z-r-action); background: var(--z-action); color: var(--z-on-action); font: var(--z-t-strong);
  text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) { .z-action:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); } }
.z-action.z-secondary { background: transparent; color: var(--z-terra-ink); border-color: var(--z-action); }
.z-action.z-on-photo { background: #FBF7F2; color: #9A4F31; border-color: #FBF7F2; }
.z-action.z-block { display: flex; width: 100%; }
.z-action:focus-visible { outline: 2px solid var(--z-terra); outline-offset: 3px; }
.z-link { color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; }

.z-rule { border: 0; border-top: 1px solid var(--z-line); margin: 0; width: 100%; }

/* ---- the letter: Wispr's page in our type ---- */
.z-letter { background: var(--z-bg); color: var(--z-ink); padding: var(--z-gap-4) var(--z-margin) 32px; display: grid; gap: var(--z-gap-3);
  max-width: 600px; margin-inline: auto; box-sizing: border-box; }
.z-letter > .z-display { margin-top: var(--z-gap-1); font: var(--z-t-display-letter); letter-spacing: -0.01em; }
.z-letter .z-heading { font-size: 22px; line-height: 28px; }   /* section heads in a letter sit well under its 30px headline */
.z-letter-band { display: block; width: calc(100% + 2 * var(--z-margin)); margin: 0 calc(-1 * var(--z-margin)); height: 64px; object-fit: cover; object-position: center; }
.z-letter-foot { border-top: 1px solid var(--z-line); padding-top: var(--z-gap-2); display: grid; gap: 4px; }
/* the three social icons: the site's marks in ink on a sand disc, 40px to tap, so they read in light and dark */
.z-social { list-style: none; margin: 0 0 var(--z-gap-1); padding: 0; display: flex; gap: 12px; }
.z-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--z-bg-deep); color: var(--z-ink); }
.z-social svg { width: 18px; height: 18px; }
.z-social a:focus-visible { outline: 2px solid var(--z-terra); outline-offset: 2px; }

/* ---- the facts list: hairline rows, not a box (guide §4.1), for anything booked ---- */
.z-facts { display: grid; margin: 0; border-top: 1px solid var(--z-hair); }
.z-facts div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--z-hair); }
.z-facts dt { font: var(--z-t-label); color: var(--z-ink-2); }
.z-facts dd { font: var(--z-t-body); color: var(--z-ink); margin: 0; }

/* ---- the stats row: Function's three stats under the hero, divided by vertical hairlines ---- */
.z-stats { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; margin: 0; padding: 20px 0; }
.z-stats div { padding: 0 12px; border-left: 1px solid var(--z-hair); display: grid; gap: 2px; align-content: start; }
.z-stats div:first-child { padding-left: 0; border-left: 0; }
.z-stats dt { font: 600 14px/19px var(--z-sans); color: var(--z-ink); order: -1; }   /* Function: 14px at 600 */
.z-stats dd { font: var(--z-t-small); color: var(--z-ink-2); margin: 0; }

/* ---- the pause control: on anything that keeps moving (guide §4.3) ---- */
.z-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--z-ink);
  font: 600 12px/1 var(--z-sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.z-pause svg { width: 12px; height: 12px; }
.z-pause:focus-visible { outline: 2px solid var(--z-terra); outline-offset: 2px; border-radius: 6px; }

/* ---- the number card: Function's results card ---- */
.z-numbercard { background: var(--z-card); border-radius: var(--z-r-card); box-shadow: var(--z-card-shadow); padding: 44px 22px 22px;
  display: grid; justify-items: center; text-align: center; width: 100%; max-width: 420px; margin-inline: auto; box-sizing: border-box; }
.z-numbercard .z-label { font: 500 24px/30px var(--z-sans); margin-top: 12px; }   /* Function's label: 30px, a third of the figure */
.z-numbercard .z-rule { margin: 32px 0 30px; }
.z-numbercard .z-small { margin-top: 34px; }
.z-numbercard .z-to { display: inline-block; }
@keyframes z-arrive { from { opacity: 0; transform: translateX(-0.12em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .z-numbercard.z-play .z-to { animation: z-arrive var(--z-dur-moment) var(--z-ease) 0.3s both; }
}

/* ---- the moment: Function's card over a real photograph (or a clean field until one exists; never painted light) ---- */
.z-moment { position: relative; overflow: hidden; display: grid; place-items: center; padding: 72px 47px; background: var(--z-bg-deep); }
.z-moment > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-moment > .z-numbercard { position: relative; box-shadow: none; }

/* ---- the help lines: 911, 988 and Naseeha, in the Chief Care Officer's signed order, tappable (guide §4.9) ---- */
.z-help { background: var(--z-bg-warm); border-radius: var(--z-r-panel); padding: 24px; display: grid; gap: 10px; }
.z-help ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.z-help a { color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }   /* a number never splits */

/* ---- the band: the one thing to remember, once, full width ---- */
.z-band { background: var(--z-bg-warm); border-radius: var(--z-r-panel); padding: 28px 24px; display: grid; gap: var(--z-gap-1); }  /* Function's feature panel */

/* ---- the post (1080 x 1350) and story (1080 x 1920): built at full size; scale the frame, never the type ---- */
.z-post { position: relative; width: 1080px; height: 1350px; overflow: hidden; background: var(--z-bg); color: var(--z-ink); }
.z-post.z-story { height: 1920px; }
.z-post.z-ground-ink { background: #1A1A1A; color: #FBF7F2; --z-ink: #FBF7F2; --z-ink-2: #D4CBC1; --z-line: #3A3632; --z-terra: #E89571; }
.z-post.z-ground-deep { background: var(--z-bg-deep); }
.z-post p { margin: 0; }
.z-post-wm { position: absolute; top: 64px; left: 0; right: 0; text-align: center; font: 500 44px/1 var(--z-serif); letter-spacing: -0.01em; z-index: 1; }
.z-post-wm::after { content: "."; color: var(--z-terra); }
.z-story .z-post-wm { top: 260px; }
.z-post-head { position: absolute; left: 120px; right: 120px; top: 50%; transform: translateY(-50%); text-align: center;
  font: 300 176px/1.02 var(--z-serif); letter-spacing: -0.025em; text-wrap: balance; z-index: 1; }
.z-post-head .z-l2 { display: block; margin-top: 40px; font: italic 400 64px/1.25 var(--z-serif); letter-spacing: 0; color: var(--z-ink-2); }  /* 300 only for the largest words (guide §3.2) */
.z-post-sub { position: absolute; left: 120px; right: 120px; bottom: 110px; text-align: center; font: 500 40px/1.3 var(--z-sans); color: var(--z-ink-2); z-index: 1; }
.z-story .z-post-sub { bottom: 380px; }
/* a photograph fills the frame; cream type only where the photograph is already dark, never a darkening layer */
.z-post-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-post.z-on-photo { --z-ink: #FBF7F2; --z-ink-2: #F3EDE6; --z-terra: #E89571; }
/* the number post: Function's card at post scale */
.z-post-fig { position: absolute; left: 0; right: 0; top: 230px; text-align: center; font: 300 440px/1 var(--z-serif); letter-spacing: -0.045em; }
.z-post-figlabel { position: absolute; left: 150px; right: 150px; top: 720px; text-align: center; font: 600 44px/1.3 var(--z-sans); color: var(--z-ink-2); }
.z-post-figline { position: absolute; left: 140px; right: 140px; top: 920px; text-align: center; font: italic 400 64px/1.3 var(--z-serif);
  color: var(--z-ink-2); border-top: 2px solid var(--z-line); padding-top: 60px; }