/* The only place a color, a size or a space is defined.
   Source: CloudNhyne Consulting Brand Guideline v1.0, in
   "08 Cloudnhyne Consulting/CloudNhyne Consulting Handoff, Sept 2026.md".
   Mix: about 70 percent black, 20 percent gold, 10 percent Ember Red.
   One family, Montserrat: Bold for what we say, Regular for how we explain it.

   Measured contrast on base-black: white 20.03, soft-grey 11.97, sphere-gold 11.16,
   highlight-gold 13.71, ember-red 4.98. On grain-charcoal ember-red is 4.24, so red
   text sits on base-black only; on charcoal, red is for rules and accents.
   ui-line is not a brand color: it is the one neutral the interface needs for
   borders, 3.76 on base-black and 3.20 on grain-charcoal, over the 3.0 floor. */

/* Montserrat is served from the site itself, cut to Latin, so no visitor's
   request goes to a font host. SIL Open Font License. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --sphere-gold: #FFB308;
  --highlight-gold: #FFD109;
  --ember-red: #E5452F;
  --base-black: #080808;
  --grain-charcoal: #1C1C1C;
  --wordmark-white: #FFFFFF;
  --soft-grey: #C8C8C8;
  --ui-line: #6B6B6B;
  --veil: rgb(8 8 8 / 0.62);
  --gold-ping: rgb(255 179 8 / 0.55);
  --gold-ping-end: rgb(255 179 8 / 0);
  /* The doorway glow behind the doors and the form: low enough that labels on it keep 4.5 to 1. */
  --gold-glow: rgb(255 179 8 / 0.22);

  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bold: 700;
  --regular: 400;
  /* Anthony, 2026-09-25: the big headlines are set in Regular, lighter and
     calmer; Bold stays for labels, buttons, prices and the words that must
     be found at a glance. */
  --display: 400;

  /* Type scale, seven steps, and nothing else: small is for uppercase labels
     only, body (18px) is every sentence. The two display steps are also capped
     by the screen's width, so text zoomed to 200 percent still fits a phone. */
  --t-small: 0.875rem;
  --t-body: 1.125rem;
  --t-line: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --t-card: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --t-choice: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  --t-chapter: min(clamp(2.75rem, 1.2rem + 6.4vw, 7.5rem), 12vw);
  --t-hero: min(clamp(2.625rem, 0.8rem + 8.8vw, 9.5rem), 13vw);
  --lh-body: 1.6;
  --lh-tight: 1.25;
  --lh-display: 1.05;

  /* Space scale. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: max(clamp(1.25rem, 0.5rem + 2.6vw, 3rem), env(safe-area-inset-left), env(safe-area-inset-right));
  /* The logo is sized so its Ember Red CONSULTING line is at least 4px tall
     (the lockup is 2.64 times as wide as it is tall); on the narrowest phones
     it gives way to the I'm ready button beside it. */
  --logo-h: min(4.4rem, (100vw - 11rem) / 2.64);
  --bar-h: calc(max(var(--logo-h), var(--tap)) + var(--s-5) + env(safe-area-inset-top));
  --tap: 2.75rem;
  --control-h: 3.25rem;
  --cta-h: 3.5rem;
  --measure: 40rem;
  /* The footer logo also fits the screen's height, so on a short screen it never sits under the bar. */
  --foot-w: clamp(8rem, min(76vw, 100svh - 30rem), 20rem);
  --rule-w: 3rem;
  --rule-h: 0.25rem;

  --r-pill: 999px;
  --r-card: 0.75rem;
  --r-cover: 0.375rem;
  /* The one float shadow: the journal covers. */
  --shadow-float: 0 1.5rem 2rem -1rem var(--base-black), 0 0.5rem 1.25rem -0.5rem var(--gold-ping);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d-mid: 280ms;
  --d-slow: 400ms;
}