/* ------------------------------------------------------------------------
   ThriveFSM brand system v2.0: shared stylesheet.

   Loaded first by every site in this repository, before the site's own
   site.css. It holds the locked tokens and the few rules that must look
   the same everywhere. Anything a single site does differently belongs in
   that site's site.css, normally by overriding one of the custom
   properties below rather than restating a rule.

   House rules this file enforces:
   - Force light. Every colour is explicit, and coloured surfaces are
     painted as same-colour gradients, which device force-dark cannot
     invert.
   - Alternating stone and stone-2 bands, where the colour change is the
     divider. Hairlines separate things inside a card, never between bands.
   - Navy for nav, CTA and footer only.
   - Brass #A9842F on light, #CBA24E on dark.
   - Heading emphasis by colour, never italic.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: only light;

  --stone:     #ECEAE2;   /* primary background band */
  --stone-2:   #E2DFD5;   /* alternate background band */
  --card:      #F5F3EC;   /* lifted surfaces */
  --ink:       #23201A;   /* text */
  --ink-soft:  #52493B;   /* secondary text */
  --navy:      #15243E;   /* nav, CTA and footer only */
  --navy-2:    #1E3556;   /* navy hover */
  --on-navy:   #EFE6D3;   /* text on navy */
  --brass:     #A9842F;   /* accent on light */
  --brass-hi:  #CBA24E;   /* accent on dark */
  --hair:      #D3CFC2;   /* within-card separation only */

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Per-site knobs. Sites override these in site.css. */
  --wrap-max: 1080px;
  --band-y:   clamp(44px, 7vw, 76px);
  --measure:  65ch;
  --eyebrow:  var(--brass);
  --focus:    var(--brass);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(var(--stone), var(--stone));
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- bands */
.band { width: 100%; }
.band--stone  { background: linear-gradient(var(--stone),   var(--stone)); }
.band--stone2 { background: linear-gradient(var(--stone-2), var(--stone-2)); }
.band--navy   {
  background: linear-gradient(var(--navy), var(--navy));
  color: var(--on-navy);
}

/* Bands span the full width, so the side gutter lives on the inner wrap. */
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--band-y);
}

/* Eyebrows never sit flush to a block's top edge: the band padding above
   handles that, so the eyebrow only carries its own bottom space. */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 18px;
}
.band--navy .eyebrow { color: var(--brass-hi); }

/* Heading emphasis via colour, never italic. */
.accent { color: var(--brass); }
.band--navy .accent { color: var(--brass-hi); }

/* ------------------------------------------------------------ wordmark */
/* "ThriveFSM" is always one word, with FSM in brass. */
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup svg { display: block; flex: none; }
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--brass); }

/* --------------------------------------------------------------- button */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 2px;
  background: linear-gradient(var(--navy), var(--navy));
  color: var(--on-navy);
  border: 1px solid var(--navy);
}
.btn:hover, .btn:focus-visible {
  background: linear-gradient(var(--navy-2), var(--navy-2));
  color: var(--on-navy);
}

/* --------------------------------------------------------------- footer */
.contact-line {
  margin-top: 26px;
  font-size: 1.05rem;
  font-weight: 600;
  /* Shown as selectable text, not only as a link: the address itself must
     always be readable and copyable. */
  user-select: all;
}

.legal {
  border-top: 1px solid rgba(239, 230, 211, 0.22);
  margin-top: 40px;
  padding-top: 22px;
  font-size: 0.8rem;
  line-height: 1.65;
  opacity: 0.74;
  max-width: 72ch;
}
.legal p + p { margin-top: 7px; }

/* ------------------------------------------------------- draft notice */
.draftbar {
  background: linear-gradient(var(--brass), var(--brass));
  color: #FFF8E8;
}
.draftbar .wrap {
  padding-block: 9px;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}