/*
 * Design-bearing seed stylesheet (#969; de-branded #1936).
 *
 * The :root block below defines the canonical `--zb-*` CSS custom
 * properties shared with the website-build lane — the SAME names the
 * #967 editorial guardrail block and the #968 photo-derived palette
 * emit, so the seed and the build brief never drift. Only the NAMES are
 * shared; the values here are placeholders.
 *
 * ## These values are a neutral SCAFFOLD, never a brand (#1936)
 *
 * Until #1936 this block inlined the ZenBusiness brand defaults —
 * Signature Black ink/canvas, a Growth Green CTA, Montserrat/Inter. That
 * made ZenBusiness's own look the literal starting point of every
 * founder's website, and the resting state of any site whose build
 * produced no palette of its own. A founder's site, zenbusiness.com, and
 * zenbiz.com must never blur into each other.
 *
 * What is here now is a deliberately quiet, un-branded graphite-and-clay
 * scaffold in system typefaces: enough to make the placeholder page
 * legible and presentable, specific to nobody. It is REPLACED, not
 * extended, on the first real build — `sites.commission_build` always
 * appends a palette block carrying the business's own theme kit
 * (`@fabric/ui/site-theme-kits`), tinted by its hero photo when there is
 * one, and instructs the agent to supersede this `:root`.
 *
 * Two rules for anyone editing this file:
 *   1. Never reintroduce a ZenBusiness brand value here — not Signature
 *      Black (#111112), Growth Green (#33F28B), Horizon Blue (#3971E7),
 *      Montserrat, or Inter. `packages/server/src/__tests__/invariants/
 *      founder-site-brand.test.ts` fails the build if you do.
 *   2. Keep it neutral. Making the scaffold *prettier* by giving it a
 *      real personality would just recreate the original bug with a
 *      different palette — every founder site would start life looking
 *      like the same non-ZenBusiness template.
 *
 * Every pairing below still clears WCAG AA 4.5:1: ink on canvas ≈14.4:1,
 * ink on the section tint ≈13.4:1, accent-text on surface ≈10.0:1,
 * secondary on canvas ≈5.7:1, and the CTA (canvas-on-ink) ≈14.4:1.
 * These are computed in-test, not eyeballed — see the seed block of
 * `packages/server/src/__tests__/invariants/founder-site-brand.test.ts`.
 */
:root {
  --zb-color-ink: #1C2126;
  --zb-color-canvas: #F6F7F8;
  --zb-color-surface: #FFFFFF;
  --zb-color-accent: #2E5266;
  --zb-color-accent-text: #2E5266;
  --zb-color-secondary: #8A5836;
  --zb-color-section-tint: #E9EBED;
  --zb-color-border: #D7DBDF;
  --zb-cta-fill: #2E5266;
  --zb-cta-text: #FFFFFF;
  /* Header banner only. The nav used to sit on --zb-color-ink,
     which put the charcoal/copper logo mark on a near-black field it
     barely registered against. This is a light, warm, copper-tinted
     cream — secondary (#8A5836) blended ~15% into canvas (#F6F7F8) —
     so the mark reads clearly while still keying off this site's own
     palette rather than an unrelated hue. Ink text on it is ~12.3:1,
     well past the WCAG AA 4.5:1 floor. */
  --zb-color-header-bg: #E6DFDB;
  --zb-font-headline: 'Sora', sans-serif;
  --zb-font-body: 'IBM Plex Sans', sans-serif;

  --zb-space-1: 0.5rem;
  --zb-space-2: 1rem;
  --zb-space-3: 2rem;
  --zb-space-4: 4rem;
  --zb-radius: 0.75rem;
  --zb-maxw: 64rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--zb-color-canvas);
  color: var(--zb-color-ink);
  font-family: var(--zb-font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--zb-font-headline);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--zb-space-2);
}

h1 {
  font-weight: 800; /* ExtraBold — reserved for the single <h1> */
  font-size: clamp(2.25rem, 6vw, 3.75rem);
}

h2 {
  font-weight: 700; /* Bold */
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
  font-weight: 600; /* SemiBold */
  font-size: 1.25rem;
}

p {
  margin: 0 0 var(--zb-space-2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--zb-color-accent-text);
}

/* Mobile-first layout primitives ----------------------------------- */

.container {
  width: 100%;
  max-width: var(--zb-maxw);
  margin: 0 auto;
  padding: 0 var(--zb-space-3);
}

.section {
  padding: var(--zb-space-4) 0;
}

.eyebrow {
  font-family: var(--zb-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  color: var(--zb-color-accent-text);
  margin: 0 0 var(--zb-space-1);
}

/* Call to action — always the two CTA vars, never a literal color. The
   pairing they resolve to is chosen per business (and contrast-checked)
   by the build's palette block; this file only decides that the button
   uses them. */
.cta-button {
  display: inline-block;
  background: var(--zb-cta-fill);
  color: var(--zb-cta-text);
  font-family: var(--zb-font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.875rem 2rem;
  border-radius: var(--zb-radius);
  border: none;
  cursor: pointer;
}

.cta-button:hover,
.cta-button:focus {
  filter: brightness(0.95);
}

/* Hero — full-viewport. The placeholder background is an INK field with
   a soft neutral highlight for depth, so it re-tints automatically with
   whatever `:root` the first real build emits; the agent swaps in a
   manifest photo.

   The second gradient stop is deliberately ink, NOT the accent. The
   accent is a mid-lightness fill by construction, so canvas-colored hero
   text over an accent stop lands at ~2.3:1 with a saturated kit accent
   (Marigold's #E08E1D) — the same class of defect as the old
   accent-colored links on the ink bar. Canvas-on-ink is the one pairing
   every theme kit guarantees, so the field stays in ink and the
   translucent white does the shaping. */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(160deg, var(--zb-color-ink), var(--zb-color-ink));
  color: var(--zb-color-canvas);
}

#hero h1 {
  max-width: 18ch;
}

#hero .sub {
  font-size: 1.125rem;
  max-width: 46ch;
  color: var(--zb-color-canvas);
  margin-bottom: var(--zb-space-3);
}

/* About — two columns; the left column is a real <img> slot. */
#about {
  background: var(--zb-color-surface);
}

/* About — bulleted specifics list (restored #23). Matches the
   paragraph rhythm already used in .about-column rather than the
   browser default list margin. */
.about-list {
  margin: 0 0 var(--zb-space-2);
  padding-left: 1.25em;
}

.about-list li {
  margin-bottom: 0.4em;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zb-space-3);
  align-items: center;
}

.about-grid img {
  width: 100%;
  border-radius: var(--zb-radius);
  background: var(--zb-color-section-tint);
}

/* Features — responsive card grid. */
#features {
  background: var(--zb-color-section-tint);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zb-space-3);
}

.card {
  background: var(--zb-color-surface);
  border: 1px solid var(--zb-color-border);
  border-radius: var(--zb-radius);
  padding: var(--zb-space-3);
}

.card h3 {
  color: var(--zb-color-ink);
}

/* Closing CTA. */
#cta {
  background: var(--zb-color-ink);
  color: var(--zb-color-surface);
  text-align: center;
}

#cta h2 {
  color: var(--zb-color-surface);
}

#cta .sub {
  color: var(--zb-color-canvas);
  max-width: 44ch;
  margin: 0 auto var(--zb-space-3);
}

/* Footer + photographer-attribution slot. */
#footer {
  background: var(--zb-color-ink);
  color: var(--zb-color-canvas);
  padding: var(--zb-space-3) 0;
  font-size: 0.875rem;
}

/* Links on the ink bar are the CANVAS color, not the accent (#1936).
   The accent is a mid-lightness FILL; as text on the ink background it
   clears 4.5:1 for almost no palette — it only ever looked fine because
   the old ZenBusiness default happened to pair a very bright green with
   a near-black ink (~12.8:1). Across the theme kits the same rule lands
   at 1.9–3.4:1. Canvas-on-ink is the pairing that holds for every
   palette, in both polarities, because the kit guarantees it. */
#footer a {
  color: var(--zb-color-canvas);
  text-decoration: underline;
}

/* De-emphasized via opacity on the inherited footer color rather than a
   literal grey: the footer text color flips with the palette (a dark
   theme kit inverts ink and surface), and a baked-in grey that reads as
   "quiet" on one polarity reads as illegible on the other. */
.attribution {
  margin-top: var(--zb-space-2);
  opacity: 0.75;
  font-size: 0.8125rem;
}

/* Shared site header — the SAME markup ships on the homepage AND on
   blog/index.html (and on every page added later) so the whole site
   reads as one website. Light, warm copper-tinted banner so it
   reads as a distinct bar on every page, including over the dark hero
   gradient on the homepage — and, critically, so the charcoal/copper
   logo mark has contrast to stand out against instead of blending into
   a dark field. */
.site-nav {
  background: var(--zb-color-header-bg);
  color: var(--zb-color-ink);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap rather than overflow — see .site-nav__links for how the link
     group takes its own row below the md breakpoint. */
  flex-wrap: wrap;
  gap: var(--zb-space-1) var(--zb-space-2);
  padding-top: var(--zb-space-2);
  padding-bottom: var(--zb-space-2);
}

.site-nav__brand {
  font-family: var(--zb-font-headline);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--zb-color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Logo graphic — replaces the text-only wordmark in .site-nav__brand.
   Founder-uploaded asset, real source 1600x440; sized short and wide for
   the header bar and never stretched (height fixed, width auto). Sized up
   from 36px, then 60px, per repeated founder feedback that the mark was
   still illegible — 76px mobile / 108px from the 900px nav
   breakpoint is a clear further increase while still fitting the 375px
   viewport (~276px wide) and the desktop nav row (~393px wide)
   alongside the link group without forcing an extra wrap. */
.site-nav__logo {
  display: block;
  height: 76px;
  width: auto;
}

@media (min-width: 900px) {
  .site-nav__logo {
    height: 108px;
  }
}

/* Mobile-first: the link group takes a full row of its own, UNDER the
   brand. `flex-basis: 100%` is what actually forces that — relying on
   `flex-wrap` alone would let the group shrink to its narrowest link and
   stay beside the brand, stacking the links into a tall column next to it
   instead of dropping below it. The inner `flex-wrap: wrap` then only
   handles a link set too long for one row. */
.site-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: var(--zb-space-1) var(--zb-space-2);
}

/* Desktop — md (900px): there is room beside the brand, so the group
   sits inline and takes the roomier gap. */
@media (min-width: 900px) {
  .site-nav__links {
    flex-basis: auto;
    gap: var(--zb-space-3);
  }
}

.site-nav__link {
  font-family: var(--zb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--zb-color-ink);
  text-decoration: none;
}

/* Hover/active state without a hue swap — same reason as `#footer a`:
   the accent is not guaranteed legible as text against every theme
   kit's header tint. Underline + full-strength ink reads as state in
   every palette and does not depend on color alone. */
.site-nav__link:hover,
.site-nav__link:focus {
  text-decoration: underline;
}

.site-nav__link--active {
  color: var(--zb-color-ink);
  text-decoration: underline;
}

/* Blog index — a light content page. The empty state holds the route
   until the founder loop publishes the first cornerstone articles. */
.blog-index {
  background: var(--zb-color-surface);
  min-height: 60vh;
}

.blog-empty {
  margin-top: var(--zb-space-3);
  padding: var(--zb-space-4) var(--zb-space-3);
  background: var(--zb-color-section-tint);
  border: 1px solid var(--zb-color-border);
  border-radius: var(--zb-radius);
  text-align: center;
}

.blog-empty h2 {
  color: var(--zb-color-ink);
  margin-bottom: var(--zb-space-1);
}

.blog-empty p {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--zb-color-ink);
}

/* Desktop — md (900px) boundary, matching the @fabric/ui breakpoint. */
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}